/* ZOUKI Mini App.
   A shop window at dusk: the goods are lit, and what you touch is the glass in front of them.
   Three materials, each with one job.
     Goods  the photos, and the light they throw on the page (#amb).
     Glass  only what floats and is touched: tab bar, cart dock, nameplates, toast. Never glass on glass.
     Tag    saffron and solid. It carries the code and is the one loud thing.
   Words sit on calm surfaces in aubergine ink, so they read on any photo, in day and night. */

@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('fonts/unbounded-cyrillic-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('fonts/unbounded-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('fonts/unbounded-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('fonts/unbounded-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Day */
:root {
  --paper: #FBF9FC; --surface: #FFFFFF; --ink: #24122E; --ink-2: #5E4D68;
  --line: rgba(36, 18, 46, .11); --edge: rgba(36, 18, 46, .17); --well: rgba(36, 18, 46, .045);
  --saffron: #F4B41A; --tag-ink: #24122E; --live: #C2255C; --ok: #0B7A5E; --ok-soft: #DDF3EB; --warn-soft: #FCE8EF;
  --solid: #24122E; --on-solid: #FBF9FC;
  /* plate: a calm surface for words. glass: what floats. rim: where the light catches an edge. */
  --plate: rgba(255, 255, 255, .76); --glass: rgba(255, 255, 255, .68); --glass-2: rgba(255, 255, 255, .44);
  --rim: rgba(255, 255, 255, .96); --rim-2: rgba(255, 255, 255, .5); --lens: rgba(36, 18, 46, .075);
  --sh: 36, 18, 46; --frost: blur(22px) saturate(1.9);
  --display: 'Unbounded', system-ui, sans-serif;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pad: 16px; --bar: 64px; --lift: 0px;
  --spring: cubic-bezier(.3, 1.4, .5, 1); --out: cubic-bezier(.16, 1, .3, 1);
}
/* Dusk */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #150B1C; --surface: #24152F; --ink: #F6EFFA; --ink-2: #B9A8C4;
    --line: rgba(246, 239, 250, .12); --edge: rgba(246, 239, 250, .2); --well: rgba(246, 239, 250, .065);
    --live: #FF6B98; --ok: #46D9AA; --ok-soft: #123C32; --warn-soft: #4A1B2D; --solid: #F6EFFA; --on-solid: #150B1C;
    --plate: rgba(46, 29, 58, .74); --glass: rgba(64, 44, 78, .6); --glass-2: rgba(38, 23, 49, .52);
    --rim: rgba(255, 255, 255, .26); --rim-2: rgba(255, 255, 255, .09); --lens: rgba(255, 255, 255, .15);
    --sh: 0, 0, 0; --frost: blur(24px) saturate(1.7) brightness(1.12);
  }
}
:root[data-theme='dark'] {
  --paper: #150B1C; --surface: #24152F; --ink: #F6EFFA; --ink-2: #B9A8C4;
  --line: rgba(246, 239, 250, .12); --edge: rgba(246, 239, 250, .2); --well: rgba(246, 239, 250, .065);
  --live: #FF6B98; --ok: #46D9AA; --ok-soft: #123C32; --warn-soft: #4A1B2D; --solid: #F6EFFA; --on-solid: #150B1C;
  --plate: rgba(46, 29, 58, .74); --glass: rgba(64, 44, 78, .6); --glass-2: rgba(38, 23, 49, .52);
  --rim: rgba(255, 255, 255, .26); --rim-2: rgba(255, 255, 255, .09); --lens: rgba(255, 255, 255, .15);
  --sh: 0, 0, 0; --frost: blur(24px) saturate(1.7) brightness(1.12);
}
/* A weak phone, a browser without the effect, or a person who asked for less: the same shapes, solid. */
:root.lite { --glass: var(--surface); --glass-2: var(--surface); --plate: var(--surface); --frost: none; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root { --glass: var(--surface); --glass-2: var(--surface); --frost: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root { --glass: var(--surface); --glass-2: var(--surface); --plate: var(--surface); --frost: none; --line: var(--edge); }
  #amb { display: none; }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--paper); }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 400 15px/1.45 var(--body); overscroll-behavior-y: none; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
[hidden] { display: none !important; }

/* The light of the goods: a few product photos, shrunk to a handful of pixels and spread over the page. */
#amb { position: fixed; left: -48px; top: -48px; width: calc(100vw + 96px); height: calc(100vh + 96px); z-index: -1; pointer-events: none; opacity: 0;
  filter: blur(30px); transition: opacity .9s ease;
  -webkit-mask: linear-gradient(transparent 60px, #000 250px); mask: linear-gradient(transparent 60px, #000 250px); }
#amb.on { opacity: 1; }
.lite #amb { filter: none; }

#view { padding: 18px var(--pad) calc(var(--bar) + var(--lift) + 40px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; }

h1 { font: 700 26px/1.12 var(--display); letter-spacing: -0.025em; margin: 4px 0 20px; text-wrap: balance; }
h2 { font: 600 15px/1.2 var(--display); letter-spacing: -0.01em; margin: 32px 0 12px; }
p { margin: 0 0 12px; }
.quiet { color: var(--ink-2); }
.small { font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
/* a price as a boutique writes it on a card: the pennies small and raised */
.cash i { position: relative; top: -.42em; margin-left: .04em; font-style: normal; font-size: .62em; letter-spacing: 0; }
.hello { margin: 4px 0 0; color: var(--ink-2); overflow-wrap: anywhere; }
.empty { color: var(--ink-2); padding: 28px 0; max-width: 34ch; }

/* ---------- glass: the floating layer ---------- */
#tabs, #dock, #toast div, .plateglass, .capsule, .roomhead .bell {
  background: linear-gradient(180deg, var(--glass), var(--glass-2));
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
  box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 .5px var(--rim-2), inset 0 -10px 18px -14px var(--rim),
    0 16px 36px -14px rgba(var(--sh), .42), 0 2px 8px rgba(var(--sh), .1);
}

/* Tab bar: one capsule, and a lens that slides to where you are */
#tabs { overflow: hidden; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 5; height: var(--bar); max-width: 536px; margin: 0 auto;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 5px; border-radius: 32px; }
#tabs .lens { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / var(--n, 4)); border-radius: 27px; background: var(--lens);
  box-shadow: inset 0 1px 0 var(--rim-2), inset 0 0 0 .5px var(--rim-2);
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .5s var(--spring); }
#tabs button { position: relative; z-index: 1; min-width: 0; padding: 2px 2px 0; background: none; border: 0; color: var(--ink-2);
  display: grid; justify-items: center; align-content: center; gap: 3px; font: 550 10.5px/1 var(--body); white-space: nowrap; transition: color .2s ease; }
#tabs button[aria-current='page'] { color: var(--ink); font-weight: 650; }
#tabs .badge { position: absolute; top: 5px; left: calc(50% + 5px); min-width: 17px; height: 17px; padding: 0 4.5px; border-radius: 9px;
  background: var(--saffron); color: var(--tag-ink); font: 700 10.5px/17px var(--body); box-shadow: 0 0 0 2px var(--surface), 0 2px 5px rgba(var(--sh), .25); }

/* Icons: drawn for ZOUKI. One weight, round ends, and the eyelet of the tag in every one. */
.ic { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ic .eye { fill: currentColor; stroke: none; transition: fill .25s ease; }
[aria-current='page'] > .ic .eye { fill: var(--saffron); }
.ic .mv { transform-box: view-box; transform-origin: 12px 12px; }
.ic-sell .mv { transform-origin: 9.6px 12px; }
/* Chosen, each icon makes its own small move once: the signal goes out, the bag is lifted, the parcel is sealed, the tag swings. */
@media (prefers-reduced-motion: no-preference) {
  #tabs .lens.go { animation: squash .5s ease; }
  #tabs .badge.bump { animation: bump .4s var(--spring); }
  [aria-current='page'] > .ic-live .mv { animation: signal .6s var(--out); }
  [aria-current='page'] > .ic-cart .mv { animation: lift .5s var(--spring); }
  [aria-current='page'] > .ic-orders .mv { animation: seal .6s var(--out); }
  [aria-current='page'] > .ic-sell .mv { animation: swing .7s var(--out); }
  [aria-current='page'] > .ic-admin .mv { animation: slide .5s var(--spring); }
}
@keyframes squash { 35% { scale: 1.07 .92; } 70% { scale: .98 1.02; } }
@keyframes bump { 40% { transform: scale(1.4); } }
@keyframes signal { from { transform: scale(.55); opacity: 0; } }
@keyframes lift { 40% { transform: translateY(-2.5px); } }
@keyframes seal { from { transform: scaleX(0); opacity: 0; } }
@keyframes swing { 25% { transform: rotate(-16deg); } 60% { transform: rotate(8deg); } }
@keyframes slide { from { transform: translateX(-5px); } }

/* Cart dock: floats above the tab bar while you are holding something in this room */
#dock { position: fixed; left: 12px; right: 12px; bottom: calc(var(--bar) + 18px + env(safe-area-inset-bottom)); z-index: 5; max-width: 536px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px 0 8px; border: 0; border-radius: 28px; text-align: left; }
#dock .n { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--saffron); color: var(--tag-ink);
  font: 700 15px/1 var(--display); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 3px 8px -2px rgba(var(--sh), .3); }
#dock .main { flex: 1; min-width: 0; display: grid; gap: 3px; }
#dock b { font: 650 15px/1 var(--display); letter-spacing: -0.01em; }
#dock .clock { margin: 0; font-size: 12.5px; gap: 6px; }
#dock .go { flex: none; display: flex; align-items: center; gap: 2px; font: 600 13px/1 var(--display); }
#dock .go .ic { width: 18px; height: 18px; stroke-width: 2.2; }
#dock:active { transform: scale(.985); }
@media (prefers-reduced-motion: no-preference) { #dock { animation: rise .42s var(--spring); transition: transform .12s ease; } }
/* While someone is typing on a phone, the floating bars step out of the keyboard's way */
@media (hover: none) { body:has(input:focus, textarea:focus) :is(#tabs, #dock) { transform: translateY(220px); transition: transform .25s ease; } }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }

/* Toast */
#toast { position: fixed; left: 16px; right: 16px; bottom: calc(var(--bar) + var(--lift) + 22px + env(safe-area-inset-bottom)); z-index: 9; pointer-events: none;
  display: flex; justify-content: center; }
#toast div { max-width: 420px; padding: 12px 18px; border-radius: 22px; color: var(--ink); font-weight: 600; font-size: 14px; }
#toast div.ok { color: var(--ok); }
@media (prefers-reduced-motion: no-preference) { #toast div { animation: rise .32s var(--spring); } }

/* ---------- the tag ---------- */
.tag { position: relative; isolation: isolate; flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 72px; height: 40px;
  padding: 0 12px 0 26px; color: var(--tag-ink); font: 700 15px/1 var(--display); letter-spacing: 0.01em;
  filter: drop-shadow(0 3px 4px rgba(var(--sh), .26)); }
.tag::before, .tag::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 0 7px 7px 0;
  clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%);
  -webkit-mask: radial-gradient(circle at 15px 50%, transparent 3.2px, #000 3.9px); mask: radial-gradient(circle at 15px 50%, transparent 3.2px, #000 3.9px); }
.tag::before { background: linear-gradient(180deg, #FFCF52, var(--saffron) 55%, #E7A40A); }
.tag::after { background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .7) 50%, transparent 60%) 220% 0 / 300% 100% no-repeat; }
.tag.small { min-width: 56px; height: 30px; font-size: 12px; padding: 0 9px 0 21px; }
.tag.small::before, .tag.small::after { clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  -webkit-mask: radial-gradient(circle at 12px 50%, transparent 2.4px, #000 3px); mask: radial-gradient(circle at 12px 50%, transparent 2.4px, #000 3px); }
.tag.sign { height: 66px; padding: 0 24px 0 46px; font: 800 27px/1 var(--display); letter-spacing: -0.03em; transform-origin: 26px 50%; }
.tag.sign::before, .tag.sign::after { border-radius: 0 12px 12px 0; clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%);
  -webkit-mask: radial-gradient(circle at 26px 50%, transparent 5px, #000 5.8px); mask: radial-gradient(circle at 26px 50%, transparent 5px, #000 5.8px); }
.tag.blank { filter: none; border: 1.5px dashed var(--edge); border-radius: 7px; color: var(--ink-2); padding: 0 10px; }
.tag.blank::before, .tag.blank::after { display: none; }
/* When a room opens, the light crosses each tag once */
@media (prefers-reduced-motion: no-preference) { .lit .tag::after { animation: sheen 1s calc(var(--k, 0) * 70ms + .25s) ease-out both; } }
@keyframes sheen { from { background-position: 220% 0; } to { background-position: -120% 0; } }

/* ---------- rows and plates ---------- */
.row { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.row:first-of-type { border-top: 0; }
.row .main { flex: 1; min-width: 0; }
.name { font-weight: 600; overflow-wrap: anywhere; }
.price { font: 600 14px/1.3 var(--display); }
.sheet { background: var(--plate); border-radius: 22px; padding: 4px 16px;
  box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 .5px var(--rim-2), 0 0 0 .5px var(--line), 0 18px 36px -26px rgba(var(--sh), .45); }
.sheet + .sheet { margin-top: 14px; }

/* Sizes: tapping one takes it */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { position: relative; overflow: hidden; display: grid; gap: 2px; min-width: 78px; padding: 9px 13px 10px; text-align: left; border-radius: 14px;
  background: var(--plate); border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--rim), 0 10px 16px -13px rgba(var(--sh), .55); transition: transform .14s var(--out); }
.chip:active { transform: scale(0.955); }
.chip b { position: relative; font: 600 14px/1.2 var(--display); }
.chip span { position: relative; font-size: 12.5px; color: var(--ink-2); }
.chip.out { background: none; border-style: dashed; box-shadow: none; }
.chip.mine { background: var(--ok-soft); border-color: var(--ok); }
.chip.mine span { color: var(--ok); font-weight: 600; }
.chip[disabled] { opacity: .55; }
.none { padding-top: 40px; color: var(--ink-2); }
.none .ic { width: 44px; height: 44px; stroke-width: 1.4; opacity: .7; }
/* The size you just took fills from the bottom, like a glass being poured */
@media (prefers-reduced-motion: no-preference) {
  .chip.fill { background: var(--plate); }
  .chip.fill::before { content: ''; position: absolute; inset: 0; background: var(--ok-soft); transform-origin: bottom; animation: pour .55s var(--out) calc(var(--t, 0) * -1ms) both; }
}
@keyframes pour { from { transform: scaleY(0); } }
/* A counter that just changed steps up into place, so a room visibly moves when others buy */
@media (prefers-reduced-motion: no-preference) { .chip .tick { animation: tick .45s var(--out); } }
@keyframes tick { from { transform: translateY(9px); opacity: 0; } }

/* ---------- buttons ---------- */
.btn { display: block; width: 100%; padding: 16px 18px; border: 0; border-radius: 18px; color: var(--on-solid); text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--solid) 86%, #8E7A9C), var(--solid) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 12px 22px -14px rgba(var(--sh), .8);
  font: 600 15px/1.2 var(--display); letter-spacing: -0.01em; transition: transform .14s var(--out), opacity .14s ease; }
.btn:active { transform: scale(0.975); opacity: .9; }
.btn[disabled] { opacity: .5; }
.btn.ghost { background: var(--plate); color: var(--ink); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 var(--rim); }
.btn.quietbtn { background: none; color: var(--ink-2); box-shadow: none; font: 500 14px/1.2 var(--body); padding: 12px; }
.btn.danger { background: none; color: var(--live); border: 1px solid var(--live); box-shadow: none; }
.link { background: none; border: 0; padding: 6px 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }
.icon { flex: none; width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--edge); background: var(--plate); font: 600 16px/1 var(--body);
  box-shadow: inset 0 1px 0 var(--rim); transition: transform .12s var(--out); }
.icon:active { transform: scale(.92); }

/* ---------- forms ---------- */
label.field { display: block; margin: 0 0 12px; font-size: 13px; color: var(--ink-2); }
div.field { margin: 0 0 14px; font-size: 13px; color: var(--ink-2); }
div.field .chips { margin-top: 6px; }
.kinds .chip { padding: 9px 13px; }
.kinds .chip b { font-size: 12.5px; }
label.field input, label.field textarea, label.field select, input.bare { display: block; width: 100%; margin-top: 5px; padding: 13px 14px; background: var(--plate); color: var(--ink);
  border: 1px solid var(--edge); border-radius: 14px; font-size: 16px; box-shadow: inset 0 2px 4px -2px rgba(var(--sh), .16); transition: border-color .15s ease; }
label.field input:focus, label.field textarea:focus, label.field select:focus, input.bare:focus { border-color: var(--ink); outline: 0; }
label.field textarea, label.field select { font: inherit; font-size: 16px; line-height: 1.4; resize: none; }
::placeholder { color: var(--ink-2); opacity: .7; }
.cols { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr; gap: 8px; }
.cols.two { grid-template-columns: 0.8fr 1.4fr; }
.cols.two label.field { margin: 0 0 12px; }
.inline { display: flex; gap: 8px; align-items: center; }
.inline input.bare { margin: 0; }
input.code { width: 92px; text-transform: uppercase; font: 600 15px/1 var(--display); text-align: center; }
label.check { display: flex; align-items: center; gap: 10px; margin: 2px 0 16px; font-size: 14px; }
label.check input { flex: none; width: 22px; height: 22px; accent-color: var(--ink); }
input[aria-invalid='true'] { border-color: var(--live) !important; }

/* ---------- the live list: each live is a shop window ---------- */
.livecard { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 28px; overflow: hidden; text-align: left; background: var(--well);
  margin-bottom: 16px; box-shadow: 0 0 0 .5px var(--line), 0 26px 44px -30px rgba(var(--sh), .6); transition: transform .2s var(--out); }
.livecard:active { transform: scale(.985); }
.win { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; height: 300px; }
.win img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.windows > :only-child .win { height: min(56vh, 460px); }
/* the light comes up on a photo once it has loaded */
.win img, .shot img { opacity: 0; }
.win img.in, .shot img.in { opacity: 1; }
.win:not(.set) img.in { opacity: 0; }
.win.one { grid-auto-columns: 100%; width: 100%; height: auto; aspect-ratio: var(--r, 1.2); max-height: 430px; }
.win.one img { object-position: center; }
.win.one img:not(:first-child) { display: none; }
@media (prefers-reduced-motion: no-preference) {
  :root:not(.lite) .shot img { transition: opacity .5s ease; }
  :root:not(.lite) .win img { transform: scale(1.06); transition: opacity .5s ease, transform 1.2s var(--out); }
  :root:not(.lite) .win img.in { transform: none; }
}
.livecard .plateglass { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 13px 16px 14px; border-radius: 20px; }
.livecard.bare { background: var(--plate); }
.livecard.bare .plateglass { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding: 18px; }
.livecard .shop { font: 650 18px/1.15 var(--display); letter-spacing: -0.02em; margin-bottom: 5px; overflow-wrap: anywhere; }
.livecard .meta { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live); margin-right: 7px; vertical-align: 1px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent); }
@media (prefers-reduced-motion: no-preference) { .dot { animation: pulse 1.8s ease-in-out infinite; } }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- the Live Room ---------- */
.shot { position: relative; flex: none; width: 104px; height: 138px; padding: 0; border: 0; border-radius: 18px; background: var(--well);
  box-shadow: 0 0 0 .5px var(--line), 0 18px 26px -18px rgba(var(--sh), .6); transition: transform .2s var(--out); }
.shot:active { transform: scale(.97); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.shot .tag { position: absolute; left: -8px; top: 12px; }
.shot.sm { width: 66px; height: 88px; border-radius: 14px; }
.shot.sm img { border-radius: 14px; }
.shot.sm + .main .tag { margin: 1px 0 7px -2px; }
.room .name { font-size: 16px; line-height: 1.25; }
.room .price { font-size: 16px; margin-top: 3px; }
.soldby { margin-top: 26px; padding: 14px 16px; border-radius: 18px; background: var(--plate); font-size: 14px;
  box-shadow: inset 0 1px 0 var(--rim), 0 0 0 .5px var(--line); }
.soldby summary { cursor: pointer; overflow-wrap: anywhere; list-style: none; }
.soldby summary::-webkit-details-marker { display: none; }
.soldby summary .ic { display: inline-block; vertical-align: -3px; width: 16px; height: 16px; margin-right: 6px; stroke-width: 2.2; color: var(--ink-2); transition: transform .25s var(--out); }
.soldby[open] summary .ic { transform: rotate(90deg); }
.soldby summary .pill { margin-left: 8px; }
.soldby > div { margin-top: 8px; display: grid; gap: 2px; }
.soldby > p { margin: 10px 0 0; }
.soldby.in { margin-top: 6px; padding: 0; background: none; box-shadow: none; font-size: 13px; }
.soldby.in summary { color: var(--ink-2); }

/* Fair Drop */
.drop { margin-top: 12px; padding: 13px 15px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--saffron) 70%, transparent);
  background: color-mix(in srgb, var(--saffron) 15%, var(--plate)); box-shadow: inset 0 1px 0 var(--rim); }
.drop p { margin: 4px 0 8px; }
.drophead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.drophead b { font: 700 14px/1.2 var(--display); }
.drophead .entrants { font-size: 13px; font-weight: 600; }
.dropclock { margin: 0; color: var(--ink); font-weight: 600; }
.dropstart { margin-top: 12px; display: grid; gap: 8px; }
.secs { padding: 9px 13px; border-radius: 12px; border: 1px solid var(--edge); background: var(--plate); font: 600 13px/1 var(--display); box-shadow: inset 0 1px 0 var(--rim); }
.secs:active { transform: scale(.95); }
.secs[disabled] { opacity: .4; }
.wonline { font: 700 17px/1.2 var(--display); color: var(--ok); margin-bottom: 6px; }
.steps { padding-left: 22px; margin: 18px 0 0; display: grid; gap: 16px; }
.steps li::marker { font: 700 14px var(--display); }
.hash { margin-top: 6px; font: 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-2); overflow-wrap: anywhere; }
.hash span { display: block; font: 600 12px/1.4 var(--body); color: var(--ink); }

/* ---------- cart ---------- */
.clock { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; font-size: 13px; color: var(--ink-2); }
.clock .bar { flex: 1; height: 5px; border-radius: 3px; background: var(--well); overflow: hidden; box-shadow: inset 0 1px 1px rgba(var(--sh), .14); }
.clock .bar i { display: block; height: 100%; width: 100%; border-radius: 3px; background: var(--ink); transform-origin: left; transition: transform 1s linear; }
.clock.low { color: var(--live); } .clock.low .bar i { background: var(--live); }
/* Dates you book: the days on each option, the terms before paying, who is coming after */
.chip .when, .chip.mine .when { color: var(--ink); font-weight: 600; }
.terms { display: grid; gap: 4px; margin: 12px 0 2px; padding: 11px 13px; border-radius: 14px; background: var(--well); color: var(--ink-2); }
.terms b { color: var(--ink); font-weight: 600; }
.terms span { white-space: pre-line; overflow-wrap: anywhere; }
/* The house at dusk: one small window for each place on a dated offer. A taken place has its light on; yours is green. */
.lights { display: flex; flex-wrap: wrap; gap: 3px; max-width: 117px; margin: 5px 0 3px; }
.lights i { position: relative; width: 7px; height: 10px; border-radius: 3.5px 3.5px 1px 1px; background: var(--well); box-shadow: inset 0 0 0 .5px var(--edge); }
.lights i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; }
.lights .on::after { opacity: 1; background: var(--saffron); box-shadow: 0 0 7px rgba(244, 180, 26, .6); }
.lights .me::after { opacity: 1; background: var(--ok); box-shadow: 0 0 7px color-mix(in srgb, var(--ok) 60%, transparent); }
@media (prefers-reduced-motion: no-preference) { .lights .new { animation: lamp 1s var(--out) both; } .lights .new::after { animation: kindle 1s var(--out) both; } }
@keyframes lamp { 38% { transform: scale(1.35); } }
@keyframes kindle { 0%, 22% { opacity: 0; } }
.soon { margin-top: 6px; }
.lines .soon { margin-top: 8px; }
/* In the Live Room's row: what the law wants said before paying, whether or not the item has a photo */
.rowmore { margin: 1px 0 4px; }
.rowmore summary { cursor: pointer; list-style: none; color: var(--ink-2); }
.rowmore summary::-webkit-details-marker { display: none; }
.rowmore summary .ic { display: inline-block; vertical-align: -3px; width: 15px; height: 15px; margin-right: 4px; stroke-width: 2.2; transition: transform .25s var(--out); }
.rowmore[open] summary .ic { transform: rotate(90deg); }
.rowmore .terms { margin: 8px 0 4px; }
.guests { display: grid; gap: 8px; margin: 4px 0 16px; }
.guests label.field { margin: 0; }
.done + .guests { margin-top: 16px; }
.chip.none { border-style: dashed; }
.chip.none.mine { border-style: solid; }
.v-dates { display: none; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.dated .v-dates { display: grid; }
.v-dates label.field { margin: 0; }
/* The shop bell, beside the shop's name. Its clapper is the eyelet: saffron once you have asked. */
/* The room's head floats over the rows: the shop's name in a capsule of glass, and the bell */
.roomhead { position: sticky; top: 8px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; pointer-events: none; }
.roomhead > * { pointer-events: auto; }
.capsule { min-width: 0; padding: 9px 15px; border-radius: 20px; overflow-wrap: anywhere; }
.bell { flex: none; display: grid; place-items: center end; width: 44px; height: 44px; margin: -4px 0; padding: 0; border: 0; background: none; color: var(--ink-2); }
.roomhead .bell { place-items: center; margin: 0; border-radius: 50%; }
.bell .ic { transform-origin: 50% 14%; }
.bell.on { color: var(--ink); }
.bell.on .eye { fill: var(--saffron); }
.bells { display: flex; gap: 8px; align-items: flex-start; margin: 22px 2px 0; }
.bells .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.bells b { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .bell.rung .ic { animation: ring .8s var(--out); } }
@keyframes ring { 18% { transform: rotate(17deg); } 42% { transform: rotate(-13deg); } 66% { transform: rotate(7deg); } 84% { transform: rotate(-3deg); } }
.shipmore { margin-bottom: 8px; }
.shipmore .chips { margin: 0 0 8px; }
.shipmore input.bare { width: 0; flex: 1; }
.shipped { margin-bottom: 6px; color: var(--ink-2); }
.rowbtn.lone + .rowbtn.lone { margin-top: 10px; }
.rowbtn .ic { width: 18px; height: 18px; color: var(--ink-2); }
.invite { overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 12px; border-top: 1px solid var(--line); }
.total b { font: 700 22px/1 var(--display); letter-spacing: -0.02em; }
.seller { font: 600 16px/1.2 var(--display); padding: 16px 0 2px; overflow-wrap: anywhere; }
.private { margin: 0 0 10px; }
.legal { margin: 12px 0 0; }

/* Status pills */
.pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--well); color: var(--ink); white-space: nowrap;
  box-shadow: inset 0 0 0 .5px var(--line); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--live); }
.pill + .pill { margin-left: 6px; }

/* ---------- seller ---------- */
.takings { padding: 4px 0 6px; }
.takings b { display: block; font: 800 40px/1.05 var(--display); letter-spacing: -0.035em; }
.takings span { display: block; }
.takings b + span { margin-top: 4px; }
.vrow { padding: 12px 0 2px; border-top: 1px solid var(--line); margin-top: 12px; }
.vhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vhead .lab { font: 600 15px/1.2 var(--display); overflow-wrap: anywhere; }
.pm { display: flex; gap: 6px; }
.pm .icon[disabled] { opacity: .35; }
.stats { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.stats b { color: var(--ink); font-weight: 700; }
.stats .hot, .stats .hot b { color: var(--live); }
.feed .row { padding: 11px 0; align-items: center; gap: 10px; }
.note { background: var(--well); border-radius: 16px; padding: 13px 15px; font-size: 13px; color: var(--ink-2); margin-top: 14px; }
.note.warn { color: var(--live); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--live); }
.addr { font-size: 13px; color: var(--ink-2); margin: 4px 0 10px; white-space: pre-line; }
.rowbtn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; background: none; border: 0; border-top: 1px solid var(--line); text-align: left; }
.rowbtn:first-child { border-top: 0; }
.rowbtn .main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rowbtn img, .nophoto { flex: none; width: 45px; height: 60px; object-fit: cover; border-radius: 10px; }
.nophoto { display: grid; place-items: center; border: 1.5px dashed var(--edge); color: var(--ink-2); font-size: 18px; }
.rowbtn.lone { padding: 16px; border: 0; border-radius: 18px; background: var(--plate); box-shadow: inset 0 1px 0 var(--rim), 0 0 0 .5px var(--line); }
.vedit { margin-bottom: 8px; }
.vedit .link { display: block; margin-left: auto; padding: 4px 0 2px; }
.vedit.off .cols { opacity: .45; }
.kindhint { margin: 10px 0 16px; min-height: 2.8em; }
.phs { display: flex; flex-wrap: wrap; gap: 10px; }
.phs + p { margin-top: 10px; }
.ph { position: relative; width: 78px; height: 104px; }
.ph .pic { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--well); box-shadow: 0 0 0 .5px var(--line); }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph.add { border: 1.5px dashed var(--edge); border-radius: 14px; background: none; color: var(--ink-2); font: 300 30px/1 var(--body); }
.ph.add.busy { color: transparent; background: var(--well); border-style: solid; border-color: transparent; }
@media (prefers-reduced-motion: no-preference) { .ph.add.busy { animation: pulse 1s ease-in-out infinite; } }
.mini { position: absolute; top: -7px; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid var(--edge); background: var(--surface); color: var(--ink); font: 600 14px/1 var(--body);
  box-shadow: 0 2px 6px rgba(var(--sh), .2); }
.mini.left { left: -7px; } .mini.right { right: -7px; }
.chips + label.field { margin-top: 14px; }
h1 + p.quiet + .chips { margin-top: 4px; }

/* ---------- photos, and the product page ---------- */
.viewer { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; background: rgba(14, 7, 19, .9);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.lite .viewer { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(14, 7, 19, .97); }
.frame { position: relative; flex: none; width: 100%; max-width: 560px; aspect-ratio: 3 / 4; max-height: 70vh; margin: auto; overflow: hidden; transform-origin: 0 0; }
.strip { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.strip::-webkit-scrollbar { display: none; }
.strip img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; }
.viewer .nav { position: absolute; top: calc(50% - 22px); display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: #fff; }
@media (hover: hover) { .viewer .nav { display: grid; } }
.viewer .prev { left: 10px; } .viewer .next { right: 10px; }
.viewbar { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.viewbar > * { pointer-events: auto; min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 14px; border: 0; border-radius: 22px; color: #fff; font: 600 13px/1 var(--body); }
.viewbar .num:empty { visibility: hidden; }
/* small glass buttons that sit on a photo: always dark glass with white marks, so they read on any picture */
.viewer .nav, .viewbar > * { background: rgba(20, 10, 28, .34); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 .5px rgba(255, 255, 255, .16); }
/* the product page: the photo fills the screen, and the sheet of glass rises over its lower edge */
.pv { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pv .frame { flex: 1000 1 0; min-height: 0; aspect-ratio: auto; max-height: 160vw; margin: 0 auto; }
.pv .strip img { object-fit: cover; }
.pv.fit .frame { flex: none; aspect-ratio: var(--r); max-height: 60vh; }
.pv.fit .pvcard { flex: none; }
.pvcard { position: relative; flex: 1 0 auto; max-height: 62vh; overflow-y: auto; margin: -44px 10px calc(10px + var(--lift) + env(safe-area-inset-bottom)); padding: 20px 18px 18px; border-radius: 30px; }
.pvhead { display: flex; align-items: center; gap: 12px; }
.pvhead .name { font: 650 18px/1.2 var(--display); letter-spacing: -0.02em; }
.pvcard .price { font-size: 17px; margin-top: 10px; }
.desc { margin: 10px 0 2px; color: var(--ink-2); white-space: pre-line; max-width: 46ch; }
.pvcard .chips { margin-top: 14px; }
.by { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.by .pill { margin-left: 8px; }
.pvopen #dock { z-index: 21; bottom: calc(10px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: no-preference) {
  .viewer { animation: fade .25s ease; }
  .pvcard { animation: sheet .5s var(--out) .05s both; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes sheet { from { transform: translateY(46px); opacity: 0; } }

/* ---------- paying with USDT ---------- */
.copyrow { align-items: center; padding: 12px 0; }
.mono { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.waiting { margin-top: 18px; color: var(--ink-2); }

/* ---------- admin ---------- */
.seg { display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(var(--pad) * -1) 18px; padding: 0 var(--pad) 4px; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: none; padding: 9px 14px; border-radius: 99px; border: 1px solid var(--edge); background: none; color: var(--ink-2); font: 600 12.5px/1 var(--display); }
.seg button[aria-current='page'] { border-color: transparent; color: var(--on-solid); background: var(--solid); }
.figs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.fig b { display: block; font: 700 22px/1.15 var(--display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.fig span { font-size: 12.5px; color: var(--ink-2); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 10px 0 4px; font-size: 13px; }
.kv dt { color: var(--ink-2); } .kv dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.acts { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 6px; }
.ask { display: grid; gap: 8px; margin-top: 10px; }
.ask .btn { padding: 12px 14px; font-size: 13px; }

/* ---------- the door: ZOUKI's own tag hangs on it while the shop opens, then the door gives way ---------- */
#door { position: fixed; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; background: var(--paper); text-align: center; }
#door.open { opacity: 0; pointer-events: none; }
#door p { margin: 14px 0 0; max-width: 28ch; color: var(--ink-2); font-size: 16px; }
#door .btn { width: auto; padding: 16px 30px; text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  #door { transition: opacity .3s ease, transform .5s var(--out); }
  #door.open { transform: scale(1.06); }
  #door:not(.front) .sign { animation: sway 1.5s ease-in-out infinite alternate; }
}
@keyframes sway { from { transform: rotate(-5deg); } to { transform: rotate(4deg); } }

/* ---------- a wide window: Telegram on a computer, or a browser ---------- */
@media (hover: hover) {
  a.btn, summary { cursor: pointer; }
  .livecard:hover .win img.in { transform: scale(1.035); }
  .shot:hover { transform: translateY(-3px); }
}
@media (min-width: 880px) {
  #view[data-v='live'], #view[data-v='room'] { max-width: 1080px; padding-top: 34px; }
  #view[data-v='live'] h1, #view[data-v='room'] h1 { font-size: 34px; margin-bottom: 28px; }
  .windows { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 24px; }
  .windows > :only-child { grid-column: 1 / -1; max-width: 760px; }
  .windows .livecard { margin: 0; }
  .room { display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; }
  .room .row:nth-of-type(2) { border-top: 0; }
  /* the product page: the photo stands on the left, the sheet of glass leans over its edge */
  .pv { flex-direction: row; align-items: center; justify-content: center; }
  .pv .frame { flex: none; width: auto; height: calc(100% - 56px); max-height: none; aspect-ratio: 3 / 4; margin: 0; border-radius: 30px; }
  .pv .next { right: 58px; }
  .windows { align-items: start; }
  .pv.fit .frame { height: auto; width: min(56vw, calc(86vh * var(--r))); max-height: none; }
  .pvcard { flex: 0 1 440px; max-height: 78vh; margin: 0 0 0 -44px; }
  .viewer:not(.pv) .frame { max-width: none; width: auto; height: 86vh; max-height: none; }
}