@font-face{font-family:Onest;src:url(/assets/onest-cyrillic.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;src:url(/assets/onest-latin.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap;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}
/* Liquid Glass redesign. Loaded last: overrides style.css + interface.css visuals only.
   Blur is limited to fixed chrome (nav, sheet, toast); cards use tinted glass without
   backdrop-filter to stay smooth in Telegram's Android WebView. */
:root{color-scheme:light;
  --bg:#eef2fa;--surface:#fff;--text:#0d1220;--muted:rgba(13,18,32,.55);--line:rgba(13,18,32,.08);
  --accent:#1a8cff;--accent-soft:rgba(26,140,255,.12);--green:#0fa968;--red:#e8385f;
  --glass:rgba(255,255,255,.55);--glass-hi:rgba(255,255,255,.78);--glass-edge:rgba(255,255,255,.95);
  --glass-shadow:0 10px 30px rgba(40,60,120,.10),inset 0 1px 1px rgba(255,255,255,.9);
  --blob-a:#ffc2dc;--blob-b:#b9c6ff;--blob-c:#b2f2e4;--blob-d:#ffe0b0;
  --cta:linear-gradient(180deg,#3aa0ff,#1a76ff);--radius:26px}
:root[data-theme=dark]{color-scheme:dark;
  --bg:#140c2a;--surface:#1c1733;--text:#fff;--muted:rgba(255,255,255,.62);--line:rgba(255,255,255,.12);
  --accent:#6fd0ff;--accent-soft:rgba(111,208,255,.16);--green:#5dffb0;--red:#ff7a9a;
  --glass:rgba(255,255,255,.10);--glass-hi:rgba(255,255,255,.18);--glass-edge:rgba(255,255,255,.28);
  --glass-shadow:0 10px 30px rgba(0,0,0,.25),inset 0 1px 1px rgba(255,255,255,.35);
  --blob-a:#ff5fa2;--blob-b:#5f7bff;--blob-c:#20d6b5;--blob-d:#ffb04a;
  --cta:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.8))}

html body{background:var(--bg)!important;font-family:Onest,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text)}
html body::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 30% at 15% 10%,var(--blob-a),transparent 70%),radial-gradient(45% 35% at 95% 30%,var(--blob-b),transparent 70%),
  radial-gradient(50% 35% at 25% 85%,var(--blob-c),transparent 70%),radial-gradient(40% 30% at 95% 95%,var(--blob-d),transparent 70%)}
:root[data-theme=dark] body::before{opacity:.75}

/* Shared glass surface */
.gift-card,.row,.stat,.subscription-card,.search,.balance,.details,.note,.theme-picker,.market-options label,
.filter-toggle,.filter-panel,.empty,.skeleton,.button.secondary,.button.soft,.button.danger,.icon-button,.balance-chip,.price-stepper,.switch-row{
  background:linear-gradient(135deg,var(--glass-hi),var(--glass))!important;
  border:1px solid var(--glass-edge)!important;box-shadow:var(--glass-shadow)!important;color:var(--text)}
nav,dialog,#toast{background:linear-gradient(135deg,var(--glass-hi),var(--glass))!important;border:1px solid var(--glass-edge)!important;
  box-shadow:var(--glass-shadow),0 20px 50px rgba(20,30,70,.18)!important;
  backdrop-filter:blur(26px) saturate(1.8)!important;-webkit-backdrop-filter:blur(26px) saturate(1.8)!important}
:root[data-theme=dark] dialog{background:rgba(28,22,52,.82)!important}

/* Header */
.shell{padding:0 16px calc(118px + env(safe-area-inset-bottom))!important}
.topbar{height:58px!important;border:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;margin-bottom:6px!important;gap:8px}
.balance-chip{border-radius:999px!important;padding:7px 14px 7px 7px!important;font-weight:800;display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.icon-button{border-radius:50%!important;width:42px!important;height:42px!important}
.heading{margin:6px 0 16px!important}.heading h1{font-size:2rem!important;font-weight:800;letter-spacing:-.8px!important}
h2{font-weight:800}.section-head{margin:22px 0 12px}

/* GRAM coin */
.gram{width:1.05em;height:1.05em;border-radius:50%;vertical-align:-.16em;margin-right:.25em;flex-shrink:0}
.balance-chip .gram{width:24px;height:24px;margin:0}
.balance-number .gram{width:.85em;height:.85em;vertical-align:-.1em}

/* Balance hero */
.balance{border-radius:30px!important;padding:20px!important;color:var(--text)!important;flex-wrap:wrap}
.balance small{color:var(--muted)!important}.balance-number{font-size:2.6rem!important;font-weight:800!important;letter-spacing:-1.2px!important;display:flex;align-items:center}
.balance .button{background:var(--glass-hi)!important;color:var(--text)!important;border:1px solid var(--glass-edge)!important}

/* Buttons */
.button{border-radius:999px!important;min-height:48px;font-weight:800!important;background:var(--cta)!important;color:#fff!important;
  box-shadow:0 10px 24px rgba(26,118,255,.3),inset 0 1px 1px rgba(255,255,255,.45)!important;border:0}
:root[data-theme=dark] .button:not(.secondary):not(.soft):not(.danger){color:#111!important;box-shadow:0 12px 30px rgba(0,0,0,.35),inset 0 -2px 6px rgba(0,0,0,.08)!important}
.button.secondary,.button.soft{color:var(--text)!important}.button.danger{color:var(--red)!important}
.button:active{transform:scale(.97)}

/* Search, segmented pickers */
.search,input.search{border-radius:999px!important;padding:13px 18px!important}
.theme-picker{border-radius:999px!important;padding:4px!important}
.theme-picker button{border-radius:999px!important;font-weight:700}
.theme-picker button[aria-pressed=true]{background:var(--glass-edge)!important;color:var(--text)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.7)}
:root[data-theme=dark] .theme-picker button[aria-pressed=true]{background:rgba(255,255,255,.22)!important}

/* Catalogue */
.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
@media(min-width:700px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
.gift-card{border-radius:var(--radius)!important;padding:7px 7px 10px!important;align-items:stretch!important;text-align:left!important;gap:4px!important;min-height:0!important}
.gift-card .gift-media{width:100%!important;height:auto!important;aspect-ratio:1;border-radius:20px!important;margin:0 0 4px!important;
  background:radial-gradient(circle at 50% 60%,var(--glass-hi),transparent 75%),var(--accent-soft)!important}
.gift-card h3{font-size:.92rem!important;font-weight:800;padding:4px 6px 0}.gift-card small,.gift-card .gift-floor{padding:0 6px}
.gift-card.selected{outline:2px solid var(--accent);outline-offset:-2px}
.floor-summary{color:var(--text)!important;font-weight:800;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.floor-summary small{font-weight:600}

/* Lists, orders, stats */
.row,.subscription-card{border-radius:24px!important}
.row .gift-media{border-radius:18px!important}
.row .amount{font-weight:800}
.stat{border-radius:24px!important}.stat strong{font-weight:800}
.pill{border-radius:999px;font-weight:800;background:var(--glass-hi);border:1px solid var(--glass-edge);color:var(--accent)}
.pill.active{color:var(--green)}
.details{border-radius:24px!important}.note{border-radius:20px!important}
.empty{border-style:solid!important;border-radius:28px!important}

/* Order form */
.market-options label{border-radius:20px!important;padding:12px 4px!important}
.market-options label:has(input:checked){box-shadow:inset 0 0 0 2px var(--accent),var(--glass-shadow)!important}
.market-icon,.market-options img{border-radius:50%!important}
.price-stepper{border-radius:22px!important;padding:6px!important}
.price-stepper button{border-radius:16px!important;background:var(--glass-hi)!important;font-weight:800}
.price-stepper input{font-size:1.6rem!important;font-weight:800;text-align:center;background:transparent!important;border:0!important;box-shadow:none!important}
input:not([type=checkbox]):not([type=radio]),select{border-radius:16px!important;background:var(--glass)!important;border:1px solid var(--glass-edge)!important;color:var(--text)!important}
.switch-row{border-radius:20px!important;padding:12px 14px!important}
.filter-toggle,.filter-panel{border-radius:20px!important}
.filter-option[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--accent)!important}

/* Floating dock */
nav{bottom:calc(18px + env(safe-area-inset-bottom))!important;left:50%!important;transform:translateX(-50%)!important;
  width:calc(100% - 36px)!important;max-width:470px!important;border-radius:34px!important;padding:6px!important;border-top:1px solid var(--glass-edge)!important}
nav button{border-radius:28px!important;font-weight:700;font-size:.7rem!important;color:var(--muted)!important}
nav button.active{background:var(--glass-edge)!important;color:var(--text)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.8),0 4px 12px rgba(20,30,70,.08)}
:root[data-theme=dark] nav button.active{background:rgba(255,255,255,.2)!important}
nav button.active::after{display:none!important}

/* Sheet + toast */
dialog{border-radius:30px 30px 0 0!important}
dialog::backdrop{background:rgba(13,18,32,.28)!important;backdrop-filter:blur(3px)}
.drag-handle{background:var(--muted)!important;opacity:.4}
#toast{border-radius:24px!important;color:var(--text)!important;top:calc(12px + env(safe-area-inset-top));bottom:auto!important;font-weight:700}

/* Solid fallback where translucency is unsupported or unwanted */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){nav,dialog,#toast{background:var(--surface)!important}}
@media(prefers-reduced-transparency:reduce){nav,dialog,#toast,.gift-card,.row,.stat,.balance,:root[data-theme] dialog{background:var(--surface)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
.floor-summary.floor-loading,.floor-summary.floor-empty,.floor-summary.floor-unavailable{color:var(--muted)!important;font-weight:600;font-size:.78rem}

/* iOS-style switch and sheet header */
.switch-row input{width:48px!important;height:29px!important;min-height:29px!important;border-radius:999px!important;background:rgba(120,128,150,.32)!important;border:0!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)!important}
.switch-row input:before{width:25px!important;height:25px!important;left:2px!important;top:2px!important;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.switch-row input:checked{background:#34c759!important}
.switch-row input:checked:before{transform:translateX(19px)!important}
.sheet-top{background:transparent!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);margin:0 -26px;padding:12px 26px 0}
.balance-number span{color:var(--muted)!important;font-size:1.1rem!important;margin-left:6px}

/* Market hero: balance with quick actions */
.market-hero{display:block!important;margin-bottom:16px!important}
.market-hero .balance-number{margin:4px 0 2px}
.hero-actions{display:flex;gap:8px;margin-top:14px}
.hero-actions .button{flex:1;min-height:42px!important;font-size:.85rem!important;padding:8px 10px!important}

/* Orders: KPIs, stage pill, pipeline, floor proximity */
.order-kpis{margin-bottom:6px}.order-kpis strong{display:flex!important;align-items:center;gap:4px;font-size:1.45rem!important}
.order-kpis .gram{width:22px;height:22px}
.row .amount{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.stage{display:inline-block;font-size:.7rem;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--glass-hi);border:1px solid var(--glass-edge);color:var(--accent);white-space:nowrap}
.stage-check,.stage-delivery{color:#d97706}.stage-done{color:var(--green)}.stage-paused{color:var(--muted)}
.proximity{margin-top:8px}
.proximity .bar,.track{--rail:rgba(13,18,32,.08)}
:root[data-theme=dark] .proximity .bar,:root[data-theme=dark] .track{--rail:rgba(255,255,255,.16)}
.proximity .bar{height:6px;border-radius:3px;background:var(--rail);overflow:hidden}
.proximity .bar>div{height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--green));transition:width .5s ease}
.proximity small{font-size:.72rem!important;margin-top:5px!important}
.proximity.ready small{color:var(--green)}.proximity.no-floor .bar{opacity:.4}
.track{display:flex;margin-top:10px}
.track span{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.62rem;font-weight:700;color:var(--muted)}
.track span::before{content:"";position:absolute;top:8px;right:50%;width:100%;height:3px;background:var(--rail);z-index:0}
.track span:first-child::before{display:none}
.track span.done::before,.track span.current::before{background:var(--green)}
.track i{width:18px;height:18px;border-radius:50%;background:var(--rail);position:relative;z-index:1;display:grid;place-items:center;font-style:normal}
.track .done i{background:var(--green)}.track .done i::after{content:"✓";color:#fff;font-size:10px;font-weight:900}
.track .current i{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.track .done,.track .current{color:var(--text)}

/* Sheet: blurred art of the open gift behind the glass */
/* Gift colour as the sheet's own background: "local" stretches it over the whole scroll height. */
#sheet.has-art{background:radial-gradient(120% 40% at 50% 0%,var(--art-a),transparent 70%),linear-gradient(180deg,var(--art-a),var(--art-b))!important;background-attachment:local!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
:root[data-theme=dark] #sheet.has-art{background:linear-gradient(rgba(16,10,34,.5),rgba(16,10,34,.5)),radial-gradient(120% 40% at 50% 0%,var(--art-a),transparent 70%),linear-gradient(180deg,var(--art-a),var(--art-b))!important;background-attachment:local!important}
.collection-title .gift-media,#sheet-body>.gift-media{box-shadow:0 14px 34px rgba(20,30,70,.22)}

/* Arrival banner */
#toast.gift-toast{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 16px 10px 10px;width:min(420px,calc(100% - 24px))}
#toast.gift-toast[hidden]{display:none!important}
#toast.gift-toast .gift-media{width:46px!important;height:46px!important;border-radius:14px;flex-shrink:0}
#toast.gift-toast b{display:block;font-size:.95rem}#toast.gift-toast small{display:block;color:var(--muted);font-weight:600;margin-top:2px}

.floor-bar,#buy-settings,#notice-settings{background:linear-gradient(135deg,var(--glass-hi),var(--glass))!important;border:1px solid var(--glass-edge)!important;box-shadow:var(--glass-shadow)!important;border-radius:22px!important}

/* Gift card */
.gift-hero{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0 0 14px}
.gift-hero .gift-media{width:min(62vw,230px)!important;height:min(62vw,230px)!important;border-radius:36px!important;box-shadow:0 24px 50px rgba(20,30,70,.28)!important;margin-bottom:14px}
.gift-hero h2{font-size:1.7rem!important;font-weight:800;margin:0!important}
.gift-hero small{color:var(--muted);font-weight:600;margin-top:4px}
.attr-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.attr-chips div,.market-list,.quick-gift,.quick-price,.quick-markets{background:linear-gradient(135deg,var(--glass-hi),var(--glass));border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);border-radius:20px}
.attr-chips div{padding:9px 6px;text-align:center}
.attr-chips small{display:block;font-size:.7rem;color:var(--muted);font-weight:600}.attr-chips b{font-size:.95rem}
.market-list{border-radius:24px;padding:6px;margin-bottom:12px}
.mr{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:18px}
.mr .market-icon{width:36px!important;height:36px!important;border-radius:11px!important}
.mr .n{flex:1;font-weight:800;min-width:0}.mr .n small{display:block;font-size:.72rem;color:var(--muted);font-weight:600}
.mr .pr{font-weight:800;display:flex;align-items:center;white-space:nowrap}
.mr.best{background:rgba(31,184,111,.12);box-shadow:inset 0 0 0 1px rgba(31,184,111,.45)}
.mr.best .n small{color:var(--green)}
/* CTA is a real bottom bar with its own glass background. */
.sheet-cta{position:sticky;bottom:0;z-index:3;display:grid;gap:8px;margin:0 -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--glass-edge)}
.sheet-cta .button.secondary{min-height:40px!important;font-size:.82rem!important}

/* Quick order */
.quick-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.quick-head h2{margin:0!important;font-size:1.1rem!important}.quick-head span{width:42px}
.quick-gift{display:flex;align-items:center;gap:12px;padding:10px;margin-bottom:10px}
.quick-gift .gift-media{width:52px!important;height:52px!important;border-radius:16px!important}
.quick-gift>div{flex:1;min-width:0}.quick-gift b{display:block}.quick-gift small{color:var(--muted);font-weight:600;font-size:.78rem}
.quick-gift .subtle{font-weight:700;font-size:.8rem}
#quick-form{gap:10px!important;margin-top:0!important}
.quick-price{padding:16px 14px;text-align:center}
.quick-price>small{color:var(--muted);font-weight:700;font-size:.8rem}
.quick-amount{display:flex!important;align-items:center;justify-content:center;gap:8px;margin:6px 0 2px}
.quick-amount .gram{width:34px;height:34px;margin:0}
:is(#quick-form,#edit-form) .quick-amount input{width:auto!important;max-width:210px;font-size:2.8rem!important;font-weight:800;letter-spacing:-1px;text-align:left;padding:0!important;min-height:0!important;background:transparent!important;border:0!important;box-shadow:none!important;color:var(--text)!important}
:is(#quick-form,#edit-form) .quick-delta{display:block;min-height:1.1em;color:var(--green);font-weight:800;font-size:.8rem}:is(#quick-form,#edit-form) .quick-delta.over{color:var(--red)}
:is(#quick-form,#edit-form) .quick-range{-webkit-appearance:none;appearance:none;width:100%!important;height:38px!important;min-height:38px!important;margin:14px 0 4px;padding:0!important;border-radius:19px!important;
  background:linear-gradient(90deg,rgba(111,208,255,.45),rgba(47,209,139,.6))!important;border:1px solid var(--glass-edge)!important}
.quick-range::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.quick-range::-moz-range-thumb{width:32px;height:32px;border:0;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.quick-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.quick-steps button{padding:10px 0;border-radius:16px;font-weight:800;font-size:.85rem;background:var(--glass);border:1px solid var(--glass-edge)}
.quick-steps button[aria-pressed=true]{background:var(--glass-edge);box-shadow:inset 0 0 0 2px var(--accent)}
.quick-markets{padding:12px 14px}
.quick-markets>small{color:var(--muted);font-weight:700;font-size:.8rem}
.quick-markets>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.quick-markets label{display:flex!important;align-items:center;gap:6px!important;padding:5px 12px 5px 5px;border-radius:999px;background:var(--glass-hi);border:1px solid var(--glass-edge);font-weight:700;font-size:.85rem;color:var(--text)!important;cursor:pointer;opacity:.5}
.quick-markets label:has(input:checked){opacity:1;box-shadow:inset 0 0 0 2px var(--accent)}
.quick-markets input{position:absolute;opacity:0;width:1px!important;height:1px!important;min-height:0!important}
.quick-markets .market-icon{width:26px!important;height:26px!important;border-radius:50%!important}
.quick-markets label:has(input:focus-visible){outline:2px solid var(--accent)}
.quick-sum{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted);font-weight:600;padding:0 4px}
.quick-sum b{color:var(--text)}.quick-sum b.short{color:var(--red)}
.quick-note{font-size:.75rem!important;margin:0!important;padding:0 4px}



/* No zoom: pinch and double-tap are off; 16px inputs stop iOS from zooming on focus. */
html{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%;text-size-adjust:100%}
input,select,textarea{font-size:16px!important}

/* Gift tiles: the gift's own colour behind it (set by media.js). */
.gift-media.tiled{background:radial-gradient(circle at 50% 38%,var(--tile-a),var(--tile-b))!important}
.gift-media .gift-anim{position:absolute;inset:0}.gift-media .gift-anim canvas,.gift-media .gift-anim svg{width:100%!important;height:100%!important;display:block}

/* Full-screen card and quick order */
#sheet.fullscreen{width:100%!important;max-width:100%!important;height:100dvh;max-height:100dvh!important;margin:0!important;border-radius:0!important;border:0!important;
  padding:calc(10px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom))!important}
#sheet.fullscreen .sheet-top{display:none!important}
@media(min-width:700px){#sheet.fullscreen{width:520px!important;max-width:520px!important;margin:auto!important;border-radius:30px!important;height:92dvh}}
.card-bar{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px}
.card-bar .icon-button,.quick-head .icon-button{font-size:1.5rem!important}
#sheet .balance-chip{border-radius:999px;padding:6px 12px 6px 6px;font-weight:800;display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--glass-hi),var(--glass));border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow)}
#sheet .balance-chip .gram{width:22px;height:22px;margin:0}
.fav-button[aria-pressed=true]{color:#ff3b6b}
.fav-dot{color:#ff3b6b;font-size:.8em}
/* A tab switch in progress: the old screen does not take taps meant for the new one. */
#main.switching{pointer-events:none}
/* Catalogue badges: an order is out for this gift / it is in favourites. */
.gift-badges{display:flex;flex-wrap:wrap;gap:4px;padding:2px 6px 0}
.gift-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;font-size:.66rem;font-weight:800;line-height:1.35;white-space:nowrap;background:var(--accent-soft);color:var(--accent)}
.gift-badge.order.paused{background:rgba(120,120,128,.16);color:var(--muted)}
.gift-badge.fav{background:rgba(255,59,107,.12);color:#ff3b6b}
.gift-row .gift-badges{flex-shrink:0;flex-wrap:nowrap;padding:0}
.gift-row .gift-badge .badge-text{display:none}
/* Price presets under a bid cap: part of the field above, not a section of its own. */
.quick-markets .price-presets[data-part]{border-top:0;padding-top:0;margin-top:6px}
#sheet.fullscreen .gift-hero .gift-media{width:min(66vw,260px)!important;height:min(66vw,260px)!important}

/* Orders: photo tile, title + stage, price line */
.order-row{align-items:flex-start!important}
.order-row .gift-media{width:64px!important;height:64px!important;border-radius:18px!important;flex-shrink:0}
.order-row .info{min-width:0}
.order-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.order-top h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order-price{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:6px;font-weight:800;font-size:.95rem}
.order-price span{display:flex;align-items:center;gap:2px;white-space:nowrap}
.order-price small{margin:0!important;font-size:.72rem!important;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.order-warn{color:#d97706!important;font-weight:700}
.quick-head{display:grid!important;grid-template-columns:44px 1fr auto;gap:8px}
.quick-head h2{text-align:center;white-space:nowrap}
.quick-head .balance-chip{justify-self:end}

#sheet .balance-chip{width:auto!important;height:auto!important;min-width:max-content;max-width:none!important;overflow:visible}

/* Hero frame: chosen backdrop behind the gift, like a real NFT */
.hero-frame{width:min(66vw,260px);height:min(66vw,260px);border-radius:36px;box-shadow:0 24px 50px rgba(20,30,70,.28);margin-bottom:14px;overflow:hidden;position:relative}
.hero-frame.has-backdrop{background:radial-gradient(circle at 50% 42%,var(--bd-a),var(--bd-b))}
.hero-frame .gift-media{width:100%!important;height:100%!important;border-radius:0!important;box-shadow:none!important;margin:0!important}
.hero-frame.has-backdrop .gift-media{background:transparent!important}
.hero-frame.mini{width:56px;height:56px;border-radius:16px;margin:0;flex-shrink:0;box-shadow:0 6px 14px rgba(20,30,70,.18)}
.quick-gift small{display:block}
/* Model / backdrop / pattern chips */
.attr-pick button{padding:9px 6px;text-align:center;border-radius:20px;background:linear-gradient(135deg,var(--glass-hi),var(--glass));border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);color:var(--text);min-width:0}
.attr-pick button b{display:block;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attr-pick button small{display:block;font-size:.7rem;color:var(--muted);font-weight:600}
.attr-pick button.soon{opacity:.55}
.attr-pick button:active{transform:scale(.97)}
.market-note{font-size:.72rem;color:var(--muted);text-align:center;margin:4px 0 2px}
/* Picker over the card */
.picker{position:fixed;inset:0;z-index:5;overflow-y:auto;overscroll-behavior:contain;padding:calc(10px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));background:var(--bg)}
:root[data-theme=dark] .picker{background:#140c2a}
.picker-head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;margin-bottom:10px}
.picker-head h3{text-align:center;font-size:1.1rem;font-weight:800}.picker-head span{text-align:right;color:var(--muted);font-weight:700;font-size:.85rem}
.picker .search{margin-bottom:12px}
.picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pick-opt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 10px;border-radius:20px;background:linear-gradient(135deg,var(--glass-hi),var(--glass));border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);color:var(--text);min-width:0}
.pick-opt.on{box-shadow:inset 0 0 0 2px var(--accent),var(--glass-shadow)}
.pick-opt .gift-media,.pick-swatch,.pick-any{width:100%!important;height:auto!important;aspect-ratio:1;border-radius:16px!important;display:grid;place-items:center}
.pick-any{background:var(--accent-soft);color:var(--accent);font-size:1.6rem}
.pick-opt b{font-size:.78rem;width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-opt small{font-size:.68rem;color:var(--muted);font-weight:700;min-height:1em}
.pick-opt[hidden]{display:none!important}
/* Model floor under the name: one line, never wider than the tile. */
.pick-floor{display:flex;align-items:center;justify-content:center;gap:3px;width:100%;min-width:0;min-height:1.2em;font-size:.7rem;font-weight:750;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.pick-floor img{width:.95em;height:.95em;border-radius:50%;flex-shrink:0;margin:0}
.pick-floor span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pick-floor:empty::before{content:'';width:42%;height:.7em;border-radius:6px;background:var(--glass-edge);opacity:.6}

/* Sheet is its own screen: the page underneath never scrolls or peeks through. */
html.sheet-open,html.sheet-open body{overflow:hidden!important;overscroll-behavior:none}
#sheet{overscroll-behavior:contain}
#sheet.fullscreen{position:fixed;inset:0}

/* Softer gift-coloured screen: light glow at the top, fading to a pale tint (closer to the mockup). */
#sheet.has-art{background:radial-gradient(85% 40% at 50% 20%,var(--art-a) 0%,transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--art-b) 72%,#fff) 0%,color-mix(in srgb,var(--art-a) 55%,#fff) 55%,color-mix(in srgb,var(--art-a) 30%,#fff) 100%)!important;background-attachment:local!important}
:root[data-theme=dark] #sheet.has-art{background:radial-gradient(85% 40% at 50% 20%,color-mix(in srgb,var(--art-a) 70%,transparent) 0%,transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--art-b) 55%,#120a2a) 0%,color-mix(in srgb,var(--art-b) 30%,#120a2a) 100%)!important;background-attachment:local!important}

/* Hero: smaller gift so more of the backdrop shows; no blurry thumbnail flash before the animation. */
.hero-frame{display:grid;place-items:center}
.hero-frame .gift-media{width:74%!important;height:74%!important;background:transparent!important}
.hero-frame:not(.has-backdrop){background:radial-gradient(circle at 50% 42%,var(--glass-hi),var(--glass))}
.hero-frame.mini .gift-media{width:84%!important;height:84%!important}
.gift-media[data-play]:not(.media-hq):not(.hq-failed)>img{opacity:0}
.gift-media[data-play]:not(.media-hq):not(.hq-failed){animation:hero-wait 1.1s ease-in-out infinite alternate}
@keyframes hero-wait{from{opacity:.55}to{opacity:1}}
.gift-media .gift-anim{animation:hero-in .35s ease-out}
@keyframes hero-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.gift-media[data-play],.gift-media .gift-anim{animation:none!important}}

/* Order editor */
#edit-form{gap:10px!important;margin-top:0!important}
.stars-price .star{font-size:2rem;color:#f5a623;line-height:1}
#edit-form .button.danger{background:transparent!important;border:1px solid var(--glass-edge)!important;color:var(--red)!important;box-shadow:none!important}

.quick-gift>.hero-frame{flex:0 0 56px}
#sheet.fullscreen .gift-hero .hero-frame .gift-media,#sheet .hero-frame .gift-media{width:74%!important;height:74%!important;margin:0!important;border-radius:0!important;box-shadow:none!important}
#sheet .hero-frame.mini .gift-media{width:84%!important;height:84%!important}

/* Full-screen sheet = separate opaque screen; the dialog itself scrolls, bounce stays inside it. */
/* Android keeps the minimized (tiny) stable height after restore: never shorter than the screen. */
/* The visible height only: max(Telegram's stable height, 100dvh) ran past the screen when the
   stable height was the larger one, hiding the pinned button below the edge (01.11). */
#sheet.fullscreen{inset:0;width:100vw!important;height:100vh;height:100dvh;max-height:none!important;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;-webkit-overflow-scrolling:touch;background-color:var(--bg)!important;padding-bottom:0!important}
#sheet.fullscreen:not(.has-art){background:var(--bg)!important}
#sheet.fullscreen::backdrop{background:var(--bg)!important;backdrop-filter:none}
#sheet.fullscreen #sheet-body{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
#sheet.fullscreen #sheet-body:has(>.sheet-cta){padding-bottom:0}
@media(min-width:700px){#sheet.fullscreen{width:520px!important;height:92dvh}#sheet.fullscreen::backdrop{background:rgba(13,18,32,.5)!important}}
dialog{overscroll-behavior:contain}
/* iOS ignores overflow:hidden on body; app.js pins body with top:-scrollY while a sheet is open. */


/* No tap highlight, container focus rings, or text selection/callouts in the UI. */
*{-webkit-tap-highlight-color:transparent}
html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable],[contenteditable] *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
#main:focus,[tabindex="-1"]:focus,dialog:focus,section:focus,div:focus{outline:none!important}
:focus:not(:focus-visible){outline:none!important}
@media(hover:none){button:focus,a:focus,[role=button]:focus{outline:none!important}}

/* Pattern: ring of small symbols on the backdrop, under the gift */
.hero-frame .pattern-layer{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-frame .pattern-layer>span{position:absolute;width:13%;aspect-ratio:1;transform:translate(-50%,-50%);opacity:.38;filter:saturate(.6)}
.hero-frame.mini .pattern-layer>span{width:20%}
#sheet .hero-frame .pattern-layer .gift-media{width:100%!important;height:100%!important;background:transparent!important;border-radius:0!important;animation:none!important}
.hero-frame>.gift-media{position:relative;z-index:1}

/* New order window (mockup): glass cards over the backdrop, filled slider, pinned CTA */
#sheet:has(#quick-form){display:flex;flex-direction:column}
#quick-form{display:flex!important;flex-direction:column;flex:1}
.quick-head .icon-button{width:40px;height:40px;border-radius:50%!important;background:linear-gradient(135deg,var(--glass-hi),var(--glass))!important;border:1px solid var(--glass-edge)!important;font-size:1.1rem!important}
.quick-head h2{font-size:1.05rem!important;font-weight:800}
.quick-gift,.quick-price,.quick-markets{border-radius:22px!important}
.quick-gift .quick-floor{display:flex!important;align-items:center;gap:3px}
.quick-gift .quick-floor .gram,.quick-sum .gram{width:14px;height:14px;margin:0}
.quick-gift #quick-change{color:var(--muted)}
.quick-price{padding:18px 14px 14px}
:is(#quick-form) .quick-range{--fill:80%;background:linear-gradient(90deg,rgba(125,220,255,.75),rgba(97,226,168,.9) var(--fill),rgba(255,255,255,.55) var(--fill))!important}
.quick-steps button{background:rgba(255,255,255,.7);color:#111}
.quick-markets label.off{opacity:.45;cursor:not-allowed;box-shadow:none!important}
.quick-markets label:not(.off):has(input:checked){background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08),inset 0 0 0 2px var(--accent)}
.quick-notify{display:flex!important;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--glass-edge);cursor:pointer}
.quick-notify b{display:block;font-size:.85rem}.quick-notify small{color:var(--muted);font-size:.74rem;font-weight:600}
.quick-notify input{position:static!important;opacity:1!important;width:auto!important;height:auto!important}
.quick-sum{font-weight:700}.quick-sum b{display:inline-flex;align-items:center;gap:3px}
#quick-form .quick-submit{margin-top:auto;position:sticky;bottom:0;min-height:54px;border-radius:999px!important;font-weight:800;background:linear-gradient(180deg,#3b8cff,#1f6bff)!important;color:#fff!important;box-shadow:0 10px 24px rgba(31,107,255,.35)}
/* Fixed scale: touch-action is not inherited, so the sheet (top layer) needs it too. */
*,*::before,*::after{touch-action:pan-x pan-y}
input[type=range]{touch-action:none}
:is(.quick-sum,.quick-notify,.quick-gift .quick-floor,.quick-gift small)[hidden]{display:none!important}
.sheet-cta .link-button{background:none;border:0;color:var(--muted);font-weight:700;font-size:.82rem;padding:4px;text-decoration:underline;text-underline-offset:3px}
/* Order setup: purchase / notification switches, own prices */
#quick-form [data-part][hidden]{display:none!important}
.quick-toggle{display:flex!important;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
.quick-toggle b{display:block;font-size:.95rem}.quick-toggle small{color:var(--muted);font-size:.74rem;font-weight:600}
.quick-markets .quick-toggle input{position:static!important;opacity:1!important;width:auto!important;height:auto!important}
.quick-markets [data-part]{margin-top:10px;padding-top:10px;border-top:1px solid var(--glass-edge)}
.quick-markets [data-part]>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.quick-markets [data-part]>small,.quick-own small{color:var(--muted);font-weight:700;font-size:.8rem}
.quick-checks label{opacity:1!important;padding:6px 12px!important}
.quick-checks input{position:static!important;opacity:1!important;width:auto!important;height:auto!important;margin:0}
.quick-own{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
.quick-own label{display:flex!important;flex-direction:column;align-items:stretch!important;gap:4px!important;padding:0!important;background:none!important;border:0!important;opacity:1!important;border-radius:0}
.quick-own label[hidden]{display:none!important}
.quick-own input{position:static!important;opacity:1!important;width:100%!important;height:auto!important;min-height:44px!important;border-radius:14px!important}
.quick-amount.small .star{font-size:1.6rem;color:#f5a623}
#quick-form .quick-stars .quick-amount input{font-size:2rem!important}
.quick-markets label.quick-toggle{padding:0!important;background:none!important;border:0!important;box-shadow:none!important;opacity:1!important;border-radius:0!important}
.quick-markets>div[data-part]{display:block}
.quick-toggle input[role=switch]{-webkit-appearance:none;appearance:none;flex:0 0 50px;width:50px!important;height:30px!important;min-height:0!important;border-radius:999px!important;background:rgba(120,120,128,.3)!important;border:0!important;position:relative!important;transition:background .2s;cursor:pointer}
.quick-toggle input[role=switch]::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .2s}
.quick-toggle input[role=switch]:checked{background:#34c759!important}
.quick-toggle input[role=switch]:checked::after{transform:translateX(20px)}
/* Until the sharp gift is ready: a soft pulse instead of a blurry thumbnail. */
.gift-media:not(.media-ready):not(.media-unavailable){animation:hero-wait 1.1s ease-in-out infinite alternate}
/* Orders tab (mockup): big title, round +, compact cards with bar and status pill */
.orders-head{display:flex;align-items:center;justify-content:space-between;margin:18px 0 14px}
.orders-head h1{margin:0;font-size:2rem;font-weight:800;letter-spacing:-.8px}
.round-add{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--glass-hi),var(--glass));border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow)}
.round-add svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.order-list{gap:10px!important}
.order-list .order-row{display:flex!important;align-items:center!important;gap:12px;padding:12px!important;border-radius:22px!important;text-align:left}
.order-list .order-row .gift-media{width:56px!important;height:56px!important;border-radius:16px!important}
.order-list .order-row .info{flex:1;min-width:0}
.order-list .order-row h3{margin:0;font-size:1rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.order-list .order-row h3 small{color:var(--muted);font-weight:700}
.order-meta{display:flex!important;align-items:center;gap:3px;margin-top:2px;color:var(--muted);font-weight:600;font-size:.8rem;white-space:nowrap;overflow:hidden}
.order-meta .gram{width:14px;height:14px;margin:0}
/* The price stays whole; the variants/number tail ellipsizes. */
.order-meta .meta-keep{display:inline-flex;align-items:center;gap:3px;flex-shrink:0}.order-meta .meta-rest{min-width:0;overflow:hidden;text-overflow:ellipsis}
.order-bar{height:5px;border-radius:999px;background:rgba(120,120,128,.18);margin-top:8px;overflow:hidden;max-width:180px}
.order-bar>div{height:100%;width:8%;border-radius:inherit;background:linear-gradient(90deg,#2f80ff,#27c2a0);transition:width .4s}
.order-bar.ready>div,.order-bar.delivery>div{background:linear-gradient(90deg,#2f80ff,#34c759)}
.order-list .stage{flex-shrink:0;align-self:center;padding:6px 12px;border-radius:999px;background:#fff;color:#111;font-weight:800;font-size:.78rem;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.order-list .stage-done{color:#1f9d55}.order-list .stage-check{color:#d97706}
.cancel-all{display:block;margin:12px auto 0}
/* Tab bar: minimal line icons, active pill */
#nav button svg{fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round;stroke-linejoin:round}
#nav button[data-route=profile] svg{stroke-width:3.2!important}
#nav button.active{background:rgba(255,255,255,.85);border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.08)}
:root[data-theme=dark] #nav button.active{background:rgba(255,255,255,.14)}
/* Fixed screen: no sideways drag or rubber-band on any tab (only vertical scrolling). */
/* clip, not hidden: overflow-x:hidden on both html and body makes body a second scroll
   container, and Android Telegram WebView then loses vertical scrolling. */
html,body{overflow-x:clip;overscroll-behavior:none;max-width:100%}
*,*::before,*::after{touch-action:pan-y}
input[type=range]{touch-action:none}
#nav button[data-route=profile] svg{stroke-width:1.8!important}
.line-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.hero-actions .button{display:inline-flex!important;align-items:center;justify-content:center;gap:6px}
.fav-filter{flex:0 0 46px;height:46px;border-radius:16px;display:grid;place-items:center;background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);color:var(--muted)}
.fav-filter svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.fav-filter[aria-pressed=true]{color:#ff3b6b;background:#fff}.fav-filter[aria-pressed=true] svg{fill:currentColor}
.toolbar:has(#fav-only){display:flex;gap:8px;align-items:center}.toolbar:has(#fav-only) .search{flex:1;min-width:0}
.notice-range{margin:10px 0 4px;text-align:center}
.notice-range .notice-delta{display:block;color:var(--green);font-weight:800;font-size:.8rem}
#quick-form .notice-range .quick-range{--fill:57%;-webkit-appearance:none;appearance:none;width:100%!important;height:34px!important;min-height:34px!important;margin:8px 0 4px;padding:0!important;border-radius:17px!important;border:1px solid var(--glass-edge)!important;background:linear-gradient(90deg,rgba(125,220,255,.75),rgba(97,226,168,.9) var(--fill),rgba(255,255,255,.55) var(--fill))!important}
.notice-range .quick-steps button{padding:8px 0}
.notice-range .quick-steps button[aria-pressed=true]{background:var(--glass-edge);box-shadow:inset 0 0 0 2px var(--accent)}
/* Notifications price: same big block as the purchase */
.notice-price small:first-child{color:var(--muted);font-weight:700;font-size:.8rem}
.notice-price .quick-amount input{font-size:2.2rem!important}
.quick-own{grid-template-columns:1fr!important}
/* Profile (mockup) */
.profile-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin:18px 0 16px}
.profile-head .profile-avatar{width:84px!important;height:84px!important;border-radius:50%!important;margin:0 0 10px!important;background:linear-gradient(135deg,#5aa2ff,#2f6bff)!important;color:#fff;font-size:1.8rem;font-weight:800;box-shadow:0 10px 24px rgba(47,107,255,.3)}
.profile-head h1{margin:0;font-size:1.5rem;font-weight:800}
.profile-head small{color:var(--muted);font-weight:600;margin-top:2px}
.wallet-card{position:relative;overflow:hidden;border-radius:26px;padding:18px 16px 16px;color:#fff;background:linear-gradient(135deg,#3b8cff,#2257e8);box-shadow:0 14px 30px rgba(34,87,232,.3);margin-bottom:22px}
.wallet-card>small{opacity:.85;font-weight:600}
.wallet-mark{position:absolute;right:-14px;top:-14px;width:120px;height:120px;fill:rgba(255,255,255,.12);transform:rotate(12deg)}
.wallet-amount{display:flex;align-items:center;gap:8px;margin:6px 0 2px}
.wallet-amount .gram{width:30px;height:30px;margin:0;background:#fff;border-radius:50%}
.wallet-amount b{font-size:2.2rem;font-weight:800;letter-spacing:-.8px}.wallet-amount span{font-size:1.3rem;font-weight:800}
.wallet-sub{display:block;opacity:.8;font-weight:600;font-size:.8rem}
.wallet-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.wallet-actions button{padding:11px 0;border-radius:14px;background:rgba(255,255,255,.2);color:#fff;font-weight:800;font-size:.85rem}
.wallet-actions button:active{background:rgba(255,255,255,.3)}
.section-head .link{color:var(--accent);font-weight:700}
.gift-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:22px}
.strip-slot,.strip-gift{aspect-ratio:1;border-radius:18px;background:var(--glass);border:1px solid var(--glass-border)}
.strip-gift{padding:0;overflow:hidden}.strip-gift .gift-media{width:100%!important;height:100%!important;border-radius:18px!important}
.strip-empty{grid-column:1/-1;margin:0;text-align:center;padding:18px 0}
.menu-list{border-radius:22px;background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);overflow:hidden;margin-bottom:24px}
.menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:14px 14px;text-align:left}
.menu-item+.menu-item{border-top:1px solid var(--line)}
.menu-item>span:nth-child(2){flex:1;min-width:0}.menu-item b{display:block;font-size:.95rem}.menu-item small{color:var(--muted);font-size:.78rem;font-weight:600}
.menu-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(59,140,255,.12);color:#2f6bff}
.menu-icon svg,.chev{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.chev{color:var(--muted);width:16px;height:16px}
/* Admin GRAM actions */
.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:14px;background:rgba(120,120,128,.14);margin:6px 0 10px}
.segmented button{padding:8px 0;border-radius:10px;font-weight:700;font-size:.85rem}
.segmented button[aria-pressed=true]{background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.1)}
:root[data-theme=dark] .segmented button[aria-pressed=true]{background:rgba(255,255,255,.16)}
.profile-head .avatar-fallback{color:#fff!important;opacity:1!important}

/* Floor history (gift card) */
.floor-history{margin:12px 0;padding:12px;border-radius:18px;background:var(--panel-glass);box-shadow:inset 0 0 0 1px var(--panel-edge)}
.history-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.history-tabs{display:flex;gap:4px}
.history-tabs button{border:0;border-radius:10px;padding:4px 8px;font:inherit;font-size:.75rem;font-weight:600;color:var(--muted);background:transparent;cursor:pointer}
.history-tabs button[aria-selected="true"]{color:var(--text);background:var(--accent-soft)}
.history-line{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin-top:6px}
.history-nums{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.history-nums span{display:flex;align-items:center;gap:3px;font-weight:700}
.history-nums .gram{width:14px;height:14px;margin:0}
.history-nums small{color:var(--muted);font-size:.75rem}
.history-nums small.up{color:var(--red)}
.history-nums small.down{color:var(--green)}
.spark{width:100%;height:56px;display:block}
.spark-line{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.spark-fill{fill:var(--accent-soft);opacity:.6}
.spark-dot{fill:var(--accent)}

/* Multi picker */
.rarity-steps{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:8px 0}
.rarity-steps small{color:var(--muted);font-size:.75rem}
.rarity-steps button,.button.small{border:0;border-radius:12px;padding:6px 10px;font:inherit;font-size:.8rem;font-weight:600;background:var(--accent-soft);color:var(--text);cursor:pointer}
.picker-count{margin:0 0 6px;font-size:.8rem}

/* Order live status */
.order-live{display:flex!important;align-items:center;gap:3px;flex-wrap:wrap;margin-top:2px;color:var(--muted);font-size:.72rem;font-weight:500}
.order-live .gram{width:12px;height:12px;margin:0}
.order-live.hit{color:var(--green);font-weight:700}
.order-live.wait{opacity:.7}
.order-live-box{margin:8px 0}
.variant-list{margin:8px 0;padding:10px 12px;border-radius:16px;background:var(--panel-glass)}
.variant-list small{color:var(--muted)}
.variant-list ul{margin:6px 0 0;padding-left:18px;font-size:.85rem}
.quick-number .subtle{display:block;margin-top:4px;font-size:.72rem}
.picker-head:has(#picker-done){grid-template-columns:44px 1fr auto}
#picker-done{width:auto;min-width:0;height:auto;border-radius:12px;padding:8px 14px;white-space:nowrap}

/* Selected market chip: keep the theme's glass, not a white fill (text is light in dark mode). */
.quick-markets label:not(.off):has(input:checked){background:linear-gradient(135deg,var(--accent-soft),var(--glass-hi))!important;color:var(--text)!important}
/* Price inputs hug their digits so the currency sign and number stay centred together. */
:is(#quick-form,#edit-form) .quick-amount input{field-sizing:content;min-width:1ch;text-align:center}
/* No visible scrollbars anywhere; scrolling itself still works. */
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none;width:0;height:0}
#quick-form .quick-number .quick-amount input{font-size:2rem!important}
#quick-form .quick-number .quick-amount input::placeholder{color:var(--muted);opacity:.6}

/* ===================== Motion =====================
   All of it is switched off by the global prefers-reduced-motion rule in style.css. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}
@keyframes item-in{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes pop-in{0%{opacity:0;transform:scale(.72)}70%{opacity:1;transform:scale(1.04)}100%{transform:none}}
@keyframes tab-pop{0%{transform:scale(.78)}60%{transform:scale(1.14)}100%{transform:none}}
@keyframes sheet-up{from{transform:translateY(100%)}}
/* Closing: a short fade with a slight shrink (sliding down looked heavy, 01.11). Scale and
   opacity only, so a sheet pulled down by the finger fades from where it was let go. */
@keyframes sheet-down{to{opacity:0;scale:.96}}
@keyframes fade-in{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}
@keyframes picker-in{from{opacity:.4;transform:translateX(100%)}}
@keyframes toast-in{from{opacity:0;transform:translateY(-14px) scale(.95)}}

/* Tab switch: the screen slides in from the side of travel, then its cards cascade in. */
#main.items-enter :is(.gift-card,.row,.subscription-card,.stat,.balance,.section-head,.toolbar,.orders-head,.heading){animation:item-in .45s var(--ease-out) both}
#nav.changed button.active svg{animation:tab-pop .42s var(--ease-spring)}

/* Sheets slide up over a fading backdrop and slide back down on close. */
dialog#sheet[open]{animation:sheet-up .44s var(--ease-out)}
dialog#sheet[open]::backdrop{animation:fade-in .3s ease}
dialog#sheet.closing{animation:sheet-down .22s cubic-bezier(.4,0,1,1) forwards}
dialog#sheet.closing::backdrop{animation:fade-out .26s ease forwards}
#sheet-body.sheet-enter>*{animation:item-in .4s var(--ease-out) both}
#sheet-body.sheet-enter :is(.attr-chips>*,.market-list>.mr,.quick-markets label,.quick-steps>button){animation:item-in .4s var(--ease-out) both}
#sheet-body.sheet-enter :is(.gift-hero .hero-frame,.quick-gift .hero-frame){animation:pop-in .55s var(--ease-spring) both}

/* Model/backdrop picker slides in from the right; its options cascade. */
#picker:not([hidden]){animation:picker-in .34s var(--ease-out)}
#picker:not([hidden]) .picker-grid>.pick-opt{animation:item-in .34s var(--ease-out) both}

#toast:not([hidden]){animation:toast-in .4s var(--ease-spring)}

/* Tactile press feedback. */
:is(.gift-card,.row,.pick-opt,.button,.round-add,#nav button,.quick-steps button,.attr-chips button,.history-tabs button,.rarity-steps button){transition:transform .12s ease}
:is(.gift-card,.row,.pick-opt,.button,.round-add,#nav button,.quick-steps button,.attr-chips button,.history-tabs button,.rarity-steps button):active{transform:scale(.96)}
#main.items-enter :is(.gift-card,.row,.subscription-card,.stat,.balance):nth-child(1),#sheet-body.sheet-enter>:nth-child(1),#picker:not([hidden]) .picker-grid>.pick-opt:nth-child(1){animation-delay:0.03s}
#main.items-enter :is(.gift-card,.row,.subscription-card,.stat,.balance):nth-child(2),#sheet-body.sheet-enter>:nth-child(2),#picker:not([hidden]) .picker-grid>.pick-opt:nth-child(2){animation-delay:0.06s}
#main.items-enter :is(.gift-card,.row,.subscription-card,.stat,.balance):nth-child(3),#sheet-body.sheet-enter>:nth-child(3),#picker:not([hidden]) .picker-grid>.pick-opt:nth-child(3){animation-delay:0.09s}
#main.items-enter :is(.gift-card,.row,.subscription-card,.stat,.balance):nth-child(4),#sheet-body.sheet-enter>:nth-child(4),#picker:not([hidden]) .picker-grid>.pick-opt:nth-child(4){animation-delay:0.12s}
#main.items-enter :is(.gift-card,.row,.subscription-card,.stat,.balance):nth-child(5),#sheet-body.sheet-enter>:nth-child(5),#picker:not([hidden]) .picker-grid>.pick-opt:nth-child(5){animation-delay:0.15s}
#main.items-enter :is(.gift-card,.row,.subscription-card,.stat,.balance):nth-child(6),#sheet-body.sheet-enter>:nth-child(6),#picker:not([hidden]) .picker-grid>.pick-opt:nth-child(6){animation-delay:0.18s}
#main.items-enter :is(.gift-card,.row,.subscription-card,.stat,.balance):nth-child(7),#sheet-body.sheet-enter>:nth-child(7),#picker:not([hidden]) .picker-grid>.pick-opt:nth-child(7){animation-delay:0.21s}
#main.items-enter :is(.gift-card,.row,.subscription-card,.stat,.balance):nth-child(8),#sheet-body.sheet-enter>:nth-child(8),#picker:not([hidden]) .picker-grid>.pick-opt:nth-child(8){animation-delay:0.24s}
#main.items-enter :is(.gift-card,.row,.subscription-card,.stat,.balance):nth-child(9),#sheet-body.sheet-enter>:nth-child(9),#picker:not([hidden]) .picker-grid>.pick-opt:nth-child(9){animation-delay:0.27s}
#main.items-enter :is(.gift-card,.row,.subscription-card,.stat,.balance):nth-child(10),#sheet-body.sheet-enter>:nth-child(10),#picker:not([hidden]) .picker-grid>.pick-opt:nth-child(10){animation-delay:0.30s}
#main.items-enter :is(.gift-card,.row,.subscription-card,.stat,.balance):nth-child(11),#sheet-body.sheet-enter>:nth-child(11),#picker:not([hidden]) .picker-grid>.pick-opt:nth-child(11){animation-delay:0.33s}
#main.items-enter :is(.gift-card,.row,.subscription-card,.stat,.balance):nth-child(12),#sheet-body.sheet-enter>:nth-child(12),#picker:not([hidden]) .picker-grid>.pick-opt:nth-child(12){animation-delay:0.36s}
#main.items-enter :is(.gift-card,.row,.subscription-card,.stat,.balance):nth-child(13),#sheet-body.sheet-enter>:nth-child(13),#picker:not([hidden]) .picker-grid>.pick-opt:nth-child(13){animation-delay:0.39s}
#main.items-enter :is(.gift-card,.row,.subscription-card,.stat,.balance):nth-child(14),#sheet-body.sheet-enter>:nth-child(14),#picker:not([hidden]) .picker-grid>.pick-opt:nth-child(14){animation-delay:0.42s}
#picker:not([hidden]) .picker-grid>.pick-opt:nth-child(n+15){animation-delay:.45s}
/* Past the first screen nothing slides in: a hundred catalog cards animating at once each got a
   layer of their own and made the tab change stutter on phones. */
#main.items-enter :is(.gift-card,.row,.subscription-card):nth-child(n+15){animation:none}
#sheet-body.sheet-enter :is(.attr-chips>*,.market-list>.mr):nth-child(2){animation-delay:.08s}#sheet-body.sheet-enter :is(.attr-chips>*,.market-list>.mr):nth-child(3){animation-delay:.12s}#sheet-body.sheet-enter :is(.attr-chips>*,.market-list>.mr):nth-child(4){animation-delay:.16s}#sheet-body.sheet-enter :is(.attr-chips>*,.market-list>.mr):nth-child(n+5){animation-delay:.2s}

/* Switch rows are not chips: no checked tint when the toggle is on. */
.quick-markets label.quick-toggle:not(.off):has(input:checked){background:none!important;box-shadow:none!important}
.quick-toggle,.quick-toggle *{-webkit-user-select:none;user-select:none}
/* The amount is an input: show it can be typed, not only dragged. */
:is(#quick-form,#edit-form) .quick-amount{width:max-content;max-width:100%;margin-inline:auto;padding:0 10px 2px;border-bottom:2px dashed var(--glass-edge);cursor:text}
:is(#quick-form,#edit-form) .quick-amount:focus-within{border-bottom-color:var(--accent)}
.edit-hint{display:block;margin-top:4px;color:var(--muted)!important;font-size:.72rem!important;font-weight:600}
/* The sheet art stays put while the form grows or scrolls: a "local" background spanned the
   whole content (top colour changed when a section opened) and was repainted on every scroll. */
#sheet.has-art,:root[data-theme=dark] #sheet.has-art{background-attachment:scroll!important}

.price-sort{flex:0 0 auto;width:auto;max-width:44%;height:46px;min-height:46px;border-radius:16px;padding:0 12px;font-size:.8rem;background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);color:var(--text)}
.toolbar:has(#fav-only){flex-wrap:nowrap}
@media(max-width:420px){.price-sort{max-width:38%;padding:0 8px;font-size:.72rem}}
.subscription-card .switch-row{margin-top:8px}.subscription-card .actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.subscription-card .actions .button{min-width:0;padding:8px 6px}

/* No focus rings or glows anywhere: taps on fields must not look like a selection. */
*,*:focus,*:focus-visible,*:focus-within{outline:none!important}
input:focus,select:focus,textarea:focus{box-shadow:none!important;border-color:var(--glass-border,var(--line))!important}
.quick-markets label:has(input:focus-visible){outline:none!important}
input,textarea{-webkit-user-select:text;user-select:text}
/* Room under the last field so it can scroll above the on-screen keyboard. */
dialog.fullscreen #sheet-body,dialog.fullscreen form{scroll-padding-bottom:45vh}
dialog.fullscreen form{padding-bottom:max(30vh,env(keyboard-inset-height,0px))}
/* Price sort: a pill that matches the favourites button. */
.price-sort{appearance:none;-webkit-appearance:none;height:46px;min-height:46px;line-height:46px;padding:0 30px 0 14px!important;border-radius:16px;background:var(--glass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center/14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-weight:600;font-size:.78rem;color:var(--text)}
.toolbar .price-sort{flex:0 0 auto;width:118px;max-width:118px;padding:0 26px 0 12px!important;background-position:right 9px center}
/* Name search over orders and notifications. */
.list-search{width:100%;margin:0 0 12px}
.search-empty{text-align:center;margin:8px 0 16px}
/* Top bar balance: readable at a glance. */
.topbar .balance-chip{font-size:1.08rem!important;padding:7px 14px 7px 7px!important}
.topbar .balance-chip .gram{width:26px;height:26px}
/* Catalogue as a list: small picture, name, floor. */
.view-mode[aria-pressed=true]{color:var(--accent);background:#fff}.view-mode svg{stroke-linecap:round}
.toolbar .search{min-width:120px}
.grid.as-list{display:flex;flex-direction:column;gap:8px}
.gift-row{display:flex;align-items:center;gap:12px;width:100%;padding:8px 14px 8px 8px;text-align:left;border-radius:16px;background:var(--glass,var(--surface));border:1px solid var(--glass-border,var(--line));box-shadow:var(--glass-shadow,none);color:var(--text)}
.gift-row .gift-media{width:44px!important;height:44px!important;min-width:44px;margin:0!important;border-radius:12px}
.gift-row h3{flex:1;min-width:0;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gift-row .gift-floor{margin:0;flex-shrink:0;text-align:right}.gift-row .floor-summary{white-space:nowrap}
/* Notifications: compact rows like orders; settings open on tap. */
/* A grid track grows to its widest nowrap line; pin it to the screen so long rows ellipsize instead. */
.list{grid-template-columns:minmax(0,1fr)}.list>.row{min-width:0}
.sub-row{align-items:center!important}
.sub-row h3{font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub-row .order-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The look gives way to the price: only the model/backdrop part ellipsizes. */
.sub-row .sub-look{min-width:0;overflow:hidden;text-overflow:ellipsis}.sub-row .sub-limit{flex-shrink:0}
.sub-markets{display:flex;align-items:center;gap:4px;margin-top:5px}.sub-markets img{width:16px;height:16px;border-radius:50%}.sub-markets small{margin:0 0 0 4px!important}
.order-list .order-row.paused>:not(.pick-mark){opacity:.6}.sub-arrow{color:var(--muted);font-size:1.4rem;flex-shrink:0}
.sub-detail{margin-top:14px}
/* Admin GRAM sheet: fixed in place, no sideways drag or pinch/focus zoom. */
#sheet.locked-sheet{overflow-x:hidden;touch-action:pan-y}
#sheet.locked-sheet .detail span,#sheet.locked-sheet small,#sheet.locked-sheet h3{overflow-wrap:anywhere;min-width:0}
#sheet.locked-sheet input,#sheet.locked-sheet select{font-size:16px!important}
/* Subscription sheet head: the gift and its name, no dark bar. */
#sheet .sub-head{display:flex;flex-direction:column;align-items:center;gap:8px;margin:2px 0 4px;background:none;border:0;padding:0}
#sheet .sub-head .gift-media{width:76px;height:76px;border-radius:22px;box-shadow:0 12px 28px rgba(20,30,70,.22)}
#sheet .sub-head h2{margin:0!important;font-size:1.25rem;font-weight:800;text-align:center}
/* Minimal bottom bar: icons only, labels stay as aria-label. */
#nav button{gap:0!important;padding-top:12px!important;padding-bottom:12px!important}
#nav button svg{width:24px!important;height:24px!important}
/* Backdrop picker: backdrops in the chosen model's own colour (monochrome looks). */
.pick-opt{position:relative}
.picker-grid>.picker-section{grid-column:1/-1;margin:10px 2px 2px;font-size:.78rem;font-weight:800;color:var(--muted);letter-spacing:.2px}
.picker-grid>.picker-section:first-of-type{margin-top:0}
.pick-opt.mono{border-color:color-mix(in srgb,var(--accent) 55%,transparent)!important}
.mono-badge{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.8rem;background:var(--surface);color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.18)}
/* Order setup: prices of the chosen model and of the model on the chosen backdrop. */
.look-prices{display:grid;gap:8px;margin:12px 0 4px;padding:12px;border-radius:18px;background:var(--glass,var(--surface));border:1px solid var(--glass-border,var(--line))}
.look-prices>small{color:var(--muted);font-weight:700;font-size:.74rem}
.look-row{display:grid;gap:6px}.look-row>b{font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.look-row>div{display:flex;flex-wrap:wrap;gap:6px}
.look-row span{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:10px;background:color-mix(in srgb,var(--text) 6%,transparent);font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums}
.look-row span.best{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.look-row .market-icon{width:16px;height:16px;border-radius:50%}
.quick-steps{display:flex;flex-wrap:wrap;gap:6px}

/* Market volume screen (Объём рынка) */
.topbar-left{display:inline-flex;align-items:center;gap:8px;min-width:0}
.stats-button{width:44px;height:44px;flex-shrink:0;border-radius:50%!important;background:linear-gradient(135deg,var(--glass-hi),var(--glass))!important;border:1px solid var(--glass-edge)!important;box-shadow:var(--glass-shadow)}
.stats-button svg{width:22px;height:22px;fill:none;stroke:var(--text);stroke-width:2.6;stroke-linecap:round}
.ms-spacer{width:44px}
#ms-body{display:grid;gap:12px;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.ms-row{display:grid;grid-template-columns:auto 1fr;gap:8px}
.ms-seg{padding:4px;border-radius:14px;background:var(--panel-glass);box-shadow:inset 0 0 0 1px var(--panel-edge)}
.ms-seg button{flex:1;padding:8px 10px;font-size:.85rem;border-radius:11px}
.ms-seg button[aria-selected="true"]{background:var(--accent);color:#fff}
.ms-markets{display:flex;gap:6px;padding:4px;border-radius:14px;background:var(--panel-glass);box-shadow:inset 0 0 0 1px var(--panel-edge);overflow-x:auto;scrollbar-width:none}
.ms-markets::-webkit-scrollbar{display:none}
.ms-markets button{flex:1 0 auto;min-width:44px;height:38px;display:grid;place-items:center;border:0;border-radius:11px;background:transparent;color:var(--muted);font:inherit;font-size:.85rem;font-weight:700;padding:0 10px}
.ms-markets button[aria-selected="true"]{background:var(--accent);color:#fff}
.ms-markets .market-icon{width:24px;height:24px;border-radius:50%}
.ms-card,.ms-gift,.ms-model{border-radius:20px;background:var(--panel-glass);box-shadow:inset 0 0 0 1px var(--panel-edge)}
.ms-card{padding:14px 14px 8px}
.ms-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.ms-main{min-width:0}
.ms-main strong{display:flex;align-items:center;gap:6px;font-size:1.9rem;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1.1}
.ms-main strong .gram{width:24px;height:24px;margin:0}
.ms-main small,.ms-side small{display:block;margin-top:4px;font-size:.8rem;color:var(--muted);white-space:nowrap}
.ms-side{text-align:right;flex-shrink:0}
.ms-side b{display:block;font-size:1rem}
.ms-chg{font-weight:800}.ms-chg.up{color:var(--green)}.ms-chg.down{color:var(--red)}
.ms-chart{position:relative;margin-top:6px}
.ms-plot{position:relative;height:64px}
.ms-chart.big .ms-plot{height:132px}
.ms-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ms-fill{fill:var(--accent);opacity:.16}
.ms-line{fill:none;stroke:var(--accent);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.ms-dot{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--surface,#fff);box-shadow:0 0 0 2px var(--accent)}
.ms-lab{position:absolute;transform:translate(-50%,-150%);font-size:.66rem;font-weight:800;color:var(--muted);white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.ms-chart .ms-dot:first-of-type+.ms-lab,.ms-lab{max-width:60px;overflow:hidden;text-overflow:ellipsis}
.ms-ticks{position:relative;height:16px;margin-top:4px;font-size:.64rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ms-ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.ms-ticks span:first-child{transform:none}
.ms-gifts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ms-gift{display:block;width:100%;min-width:0;text-align:left;border:0;color:var(--text);font:inherit;padding:10px 10px 4px;overflow:hidden}
.ms-gtop{display:flex;align-items:center;gap:8px;min-width:0}
.ms-gtop .gift-media{width:34px!important;height:34px!important;flex-shrink:0;border-radius:10px!important}
.ms-gname{flex:1;min-width:0}
.ms-gname b{display:block;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-gname small{display:block;font-size:.7rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-go{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;border-radius:9px;background:var(--accent-soft);color:var(--accent);font-weight:800}
.ms-gift .ms-lab{font-size:.58rem}
.ms-gift .ms-ticks{font-size:.56rem;height:14px}
.ms-note{margin:0}
.ms-models-head{margin:6px 0 0!important}
.ms-models-head small{color:var(--muted);font-size:.75rem}
.ms-models{display:grid;gap:6px}
.ms-model{display:flex;align-items:center;gap:10px;padding:8px 10px;min-width:0}
.ms-model .gift-media{width:40px!important;height:40px!important;flex-shrink:0;border-radius:12px!important}
.ms-mname{flex:1;min-width:0}
.ms-mname b{display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-bar{display:block;height:5px;margin-top:6px;border-radius:5px;background:var(--accent-soft);overflow:hidden}
.ms-bar i{display:block;height:100%;border-radius:5px;background:var(--accent)}
.ms-mnums{text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.ms-mnums b{display:block;font-size:.88rem}
.ms-mnums small{display:inline-flex;align-items:center;gap:3px;font-size:.75rem;color:var(--muted)}
.ms-mnums .gram{width:14px;height:14px;margin:0}
@media(max-width:360px){.ms-seg button{padding:7px 6px;font-size:.78rem}.ms-main strong{font-size:1.6rem}}
.ms-gname small{display:flex;align-items:center;gap:2px}
.ms-gname small .gram{width:12px;height:12px;margin:0;flex-shrink:0}
.ms-gname small .ms-chg{flex-shrink:0}

/* Type: Onest everywhere, figures of equal width wherever numbers line up. */
body,button,input,select,textarea{font-family:Onest,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-feature-settings:"tnum" 0}
h1,h2,h3,.ms-main strong,.balance-number{letter-spacing:-.02em}
.amount,.pr,.balance-number,.ms-main strong,.ms-mnums,.pick-floor,[data-ton-balance]{font-variant-numeric:tabular-nums}

/* Bottom bar: icon with its name under it, liquid glass slider. */
#nav button{flex-direction:column!important;align-items:center;justify-content:center;gap:3px!important;padding:8px 2px 7px!important;position:relative;z-index:1;background:transparent!important;box-shadow:none!important;transition:color .25s ease}
#nav button svg{width:22px!important;height:22px!important;transition:transform .35s var(--ease-spring,cubic-bezier(.34,1.56,.64,1))}
#nav .nav-label{display:block;font-size:.62rem;font-weight:650;line-height:1;letter-spacing:.01em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
#nav button.active{color:var(--nav-blue)!important}
/* While the drop is dragged, the tab under it lights up instead of the open one. */
#nav .lg-dragging button.active:not(.lg-near){color:var(--muted)!important}
#nav .lg-dragging button.lg-near{color:var(--nav-blue)!important}
#nav .lg-dragging button.lg-near svg{transform:scale(1.12)}
/* The capsule keeps its own positioning; it only hosts the pill. */
.lg-track{touch-action:none!important;user-select:none;-webkit-user-select:none}
.lg-track *{touch-action:none!important}
/* Liquid glass: a clear drop that blurs and brightens what is under it, a specular
   highlight on top, a bright rim and a soft shadow. Lifted, it brightens and glows so it
   stays visible under the finger. Only transform/opacity animate (GPU). */
.lg-pill{position:absolute;left:0;top:0;z-index:0;border-radius:999px;pointer-events:none;transform-origin:50% 50%;
  background:
    radial-gradient(120% 85% at 28% 0%,rgba(255,255,255,.75),rgba(255,255,255,0) 58%),
    linear-gradient(180deg,rgba(255,255,255,.46),rgba(255,255,255,.18));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.35),
    inset 0 0 0 1px rgba(255,255,255,.42),0 6px 18px rgba(20,30,70,.16);
  /* No backdrop-filter: inside the blurred bar WebKit (Telegram on iOS) may not paint a
     blurred child that moves every frame, so the drop vanished while dragged. */
  transform:none;
  transition:left .5s cubic-bezier(.3,1.35,.5,1),top .5s cubic-bezier(.3,1.35,.5,1),width .4s cubic-bezier(.3,1.35,.5,1),height .4s cubic-bezier(.3,1.35,.5,1),box-shadow .25s ease,background .25s ease,opacity .2s}
.lg-pill.lg-instant{transition:box-shadow .25s ease,background .25s ease,opacity .2s}
.lg-pill.lifted{
  background:
    radial-gradient(120% 85% at 28% 0%,rgba(255,255,255,.85),rgba(255,255,255,0) 60%),
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.26));
  box-shadow:inset 0 1px 1px #fff,inset 0 -1px 2px rgba(255,255,255,.6),
    inset 0 0 0 1.5px rgba(255,255,255,.7),0 0 0 1px rgba(255,255,255,.25),0 12px 30px rgba(20,30,70,.28)}
:root[data-theme=dark] .lg-pill{
  background:
    radial-gradient(120% 85% at 28% 0%,rgba(255,255,255,.34),rgba(255,255,255,0) 58%),
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.07));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -1px 1px rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(255,255,255,.18),0 6px 18px rgba(0,0,0,.4)}
:root[data-theme=dark] .lg-pill.lifted{
  background:
    radial-gradient(120% 85% at 28% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%),
    linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.2));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset 0 -1px 2px rgba(255,255,255,.3),
    inset 0 0 0 1.5px rgba(255,255,255,.45),0 0 0 1px rgba(255,255,255,.12),0 0 22px rgba(160,190,255,.25),0 12px 30px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:reduce){.lg-pill{transition:none}}

/* Volume screen bars: the same drop, tinted with the accent, clipped to its bar. */
.ms-seg,.ms-markets{position:relative;overflow:hidden;isolation:isolate}
.ms-seg button,.ms-markets button{position:relative;z-index:1;background:transparent!important;transition:color .25s ease}
.ms-seg button[aria-selected="true"],.ms-markets button[aria-selected="true"]{color:#fff}
:root:root .ms-seg .lg-pill,:root:root .ms-markets .lg-pill{border-radius:11px;-webkit-backdrop-filter:none;backdrop-filter:none;
  background:
    radial-gradient(120% 85% at 28% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 55%),
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 78%,transparent),color-mix(in srgb,var(--accent) 58%,transparent));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -1px 1px rgba(255,255,255,.25),
    inset 0 0 0 1px rgba(255,255,255,.28),0 4px 14px color-mix(in srgb,var(--accent) 40%,transparent)}
:root:root .ms-seg .lg-pill.lifted,:root:root .ms-markets .lg-pill.lifted{
  background:
    radial-gradient(120% 85% at 28% 0%,rgba(255,255,255,.5),rgba(255,255,255,0) 55%),
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 55%,transparent),color-mix(in srgb,var(--accent) 35%,transparent))}
.ms-markets{overflow:hidden}
.ms-markets button{flex:1 1 0;min-width:0}

/* Chart values sit on a chip: the line never hides them; edge labels stay inside. */
.ms-lab{padding:1px 5px;border-radius:7px;background:color-mix(in srgb,var(--surface,#fff) 86%,transparent);box-shadow:0 1px 4px rgba(0,0,0,.14);color:var(--text)!important;transform:translate(-50%,-140%)!important;max-width:none!important;z-index:2}
.ms-lab.l{transform:translate(-6px,-140%)!important}
.ms-lab.r{transform:translate(calc(-100% + 6px),-140%)!important}
:root[data-theme=dark] .ms-lab{background:rgba(22,24,40,.88);box-shadow:0 1px 6px rgba(0,0,0,.45)}
.ms-dot{z-index:1}
/* Gift tiles: the value first and never cut; the growth figure after it. */
.ms-gname small{display:flex;align-items:center;gap:5px;min-width:0}
.ms-val{display:inline-flex;align-items:center;gap:2px;flex-shrink:0;color:var(--text);font-weight:700}
.ms-gname small .ms-chg{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* Admin users sheet (subscriptions and bans): full screen, stays put; only the content changes. */
#sheet .users-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:12px}
#sheet .users-stats .stat{padding:10px 8px;border-radius:16px;text-align:center}
#sheet .users-stats .stat small{font-size:.66rem;line-height:1.2;display:block}
#sheet .users-stats .stat strong{font-size:1.25rem;margin-top:4px}
#sheet #user-search{margin:0 0 12px}
#sheet .user-row{align-items:center}
#sheet .user-row .info{min-width:0}
#sheet .user-row h3{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sheet .user-row .pill{flex-shrink:0;white-space:nowrap}
.pill.banned{color:var(--red)}
#sheet .user-card{margin:0 0 6px}
#sheet .user-card .detail .pill{padding:4px 10px}
#sheet .users-h{margin:20px 0 4px}
.user-grant{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}
.user-days{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:0 0 12px}
.user-days .error{grid-column:1/-1}
.user-days input{min-width:0}
#sheet .user-card~.button.wide{margin-top:4px}
/* One-line title: the bar keeps its height whatever name is shown. */
#sheet .users-bar h2{flex:1;min-width:0;margin:0 8px!important;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sheet .users-bar .icon-button{flex-shrink:0}

/* Floor / median under the gift in the order setup: label | value, one line each. */
.quick-gift .quick-stats{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:10px;row-gap:2px;margin-top:4px;font-size:.78rem;font-weight:600;line-height:1.35}
.quick-gift .quick-stats>span:nth-child(odd){color:var(--muted);white-space:nowrap}
.quick-gift .quick-stat{display:flex;align-items:center;gap:4px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);font-variant-numeric:tabular-nums}
.quick-gift .quick-stat .gram{width:14px;height:14px;margin:0;flex-shrink:0}
.quick-gift .quick-stat i{font-style:normal;color:var(--muted)}
/* "Сменить" sits on the title line, so the floor rows get the card's whole width. */
.quick-gift{position:relative}
.quick-gift:has(#quick-change)>div>b{padding-right:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quick-gift #quick-change{position:absolute;top:10px;right:12px;padding:0}

/* Bottom bar, MRKT style: round glass buttons at the sides (the admin's sessions on the
   left, the profile avatar on the right) and the main tabs in a glass capsule with the drop.
   #nav itself is only a transparent row; the gaps between its parts let taps through. */
:root{--nav-h:64px;--nav-blue:#1a8cff}
:root[data-theme=dark]{--nav-blue:#3d9bff}
:root #nav:not([hidden]){display:flex!important;align-items:center;gap:8px}
:root #nav{left:12px!important;right:12px!important;transform:none!important;width:auto!important;max-width:480px!important;margin:0 auto;
  padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;pointer-events:none}
#nav>*{pointer-events:auto}
#nav .nav-tabs,#nav .nav-orb{border:1px solid var(--glass-edge)!important;
  background:linear-gradient(135deg,var(--glass-hi),var(--glass))!important;
  box-shadow:var(--glass-shadow),0 14px 36px rgba(20,30,70,.16)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.8);backdrop-filter:blur(26px) saturate(1.8)}
:root[data-theme=dark] #nav .nav-tabs,:root[data-theme=dark] #nav .nav-orb{border-color:rgba(255,255,255,.14)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.04)),rgba(18,12,36,.72)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 14px 36px rgba(0,0,0,.45)!important}
#nav .nav-tabs{position:relative;flex:1 1 auto;min-width:0;display:flex;height:var(--nav-h);padding:5px;border-radius:999px}
#nav .nav-tabs button{flex:1 1 0;min-width:0;height:100%;border-radius:999px!important}
#nav .nav-orb{position:relative;flex:0 0 var(--nav-h);width:var(--nav-h);height:var(--nav-h);border-radius:50%!important;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px!important;padding:0!important;transition:box-shadow .25s ease,color .25s ease,transform .12s ease}
/* An open side page: a blue ring inside the round button (the bar's drop stays in the capsule). */
#nav .nav-orb.active{box-shadow:inset 0 0 0 2px var(--nav-blue),var(--glass-shadow),0 14px 36px rgba(20,30,70,.16)!important}
:root[data-theme=dark] #nav .nav-orb.active{box-shadow:inset 0 0 0 2px var(--nav-blue),inset 0 1px 1px rgba(255,255,255,.18),0 14px 36px rgba(0,0,0,.45)!important}
#nav .nav-profile{padding:5px!important}
#nav .nav-avatar{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:linear-gradient(135deg,#5aa2ff,#2f6bff);color:#fff;font-size:1.05rem;font-weight:800;letter-spacing:.02em}
#nav .nav-avatar .avatar-fallback{font-size:inherit;font-weight:inherit;color:inherit}
#nav .nav-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
#nav .nav-profile.active .nav-avatar{box-shadow:0 0 0 1px rgba(255,255,255,.5)}
/* A long name in a round button wraps onto two lines under the icon. */
#nav .nav-orb .nav-label{white-space:normal;text-align:center;line-height:1.1;max-width:calc(var(--nav-h) - 8px)}
@media(max-width:360px){:root{--nav-h:58px}:root #nav{gap:6px;left:8px!important;right:8px!important}#nav .nav-orb .nav-label{font-size:.58rem}}
/* Opaque fallbacks: :root×3 outranks the dark theme rule (:root[data-theme=dark] #nav .nav-tabs). */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root:root:root #nav .nav-tabs,:root:root:root #nav .nav-orb{background:var(--surface)!important}}
@media(prefers-reduced-transparency:reduce){:root:root:root #nav .nav-tabs,:root:root:root #nav .nav-orb{background:var(--surface)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

/* ===== Dark theme in the Portals style (17.10) =====
   Near-black page, flat graphite cards without rims, one bright blue for actions and
   prices, white bold titles over grey details. Liquid glass is kept for the chrome that
   floats over content: the bottom bar, the header buttons and the sheets.
   :root:root[data-theme=dark] outranks the older dark rules above. */
:root:root[data-theme=dark]{
  --bg:#0b0b0c;--surface:#1c1c1e;--surface-2:#2c2c2e;--surface-3:#3a3a3c;
  --text:#fff;--muted:#8e8e93;--line:rgba(255,255,255,.08);
  --accent:#1e8cff;--accent-soft:rgba(30,140,255,.16);--green:#30d158;--red:#ff453a;
  --glass:rgba(44,44,46,.55);--glass-hi:rgba(58,58,60,.6);--glass-edge:rgba(255,255,255,.1);--glass-border:rgba(255,255,255,.08);
  --glass-shadow:0 8px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07);
  --panel-glass:#1c1c1e;--panel-edge:transparent;--panel-light:transparent;
  --cta:#1e8cff;--nav-blue:#1e8cff;--rail:rgba(255,255,255,.12)}
:root[data-theme=dark] body::before{display:none}
:root[data-theme=dark] .picker{background:var(--bg)}

/* Flat cards: graphite, no border, no shadow, no blur. */
:root[data-theme=dark] :is(.gift-card,.gift-row,.row,.stat,.subscription-card,.balance,.details,.note,.empty,.skeleton,.menu-list,
  .market-list,.quick-gift,.quick-price,.quick-markets,.attr-chips div,.switch-row,.ms-card,.ms-gift,.floor-history,.look-prices,
  .filter-toggle,.filter-panel,.strip-gift,.strip-slot,.pick-opt,.market-options label,.price-stepper,.floor-bar,.theme-picker,
  .segmented,.ms-seg,.ms-markets,#buy-settings,#notice-settings){
  background:var(--surface)!important;border-color:transparent!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
:root[data-theme=dark] :is(.gift-card,.row,.stat,.subscription-card,.balance,.menu-list,.market-list,.ms-card,.floor-history){border-radius:20px!important}
:root[data-theme=dark] .empty{border-style:solid!important}
/* A card inside a bottom sheet (graphite on graphite) is one step lighter; inside such a card, one more. */
:root[data-theme=dark] #sheet:not(.fullscreen) :is(.row,.stat,.subscription-card,.balance,.details,.note,.empty,.market-list,.quick-gift,
  .quick-price,.quick-markets,.attr-chips div,.switch-row,.look-prices,.filter-toggle,.filter-panel,.pick-opt,.market-options label,
  .price-stepper,.floor-bar,.theme-picker,.segmented,#buy-settings,#notice-settings){background:var(--surface-2)!important}
:root[data-theme=dark] :is(.subscription-card,.details,#buy-settings,#notice-settings) .switch-row{background:var(--surface-2)!important}
:root[data-theme=dark] #sheet:not(.fullscreen) :is(.subscription-card,.details,#buy-settings,#notice-settings) .switch-row{background:var(--surface-3)!important}
:root[data-theme=dark] .attr-chips :is(div,button){background:var(--surface)!important;border-color:transparent!important;box-shadow:none!important}
/* The catalogue toolbar is tight: a narrower search inset keeps "Поиск" readable. */
:root:root[data-theme=dark] .toolbar .search{padding:13px 10px 13px 36px!important;background-position:12px 50%!important;background-size:17px!important}
:root:root[data-theme=dark] .toolbar .search{min-width:118px!important}
:root:root[data-theme=dark] .toolbar .price-sort{width:106px!important;max-width:106px!important}
/* Filter capsule with its own grey chevron, like "Коллекция ⌄" on Portals. */
:root:root[data-theme=dark] .price-sort{background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center/16px!important}
:root[data-theme=dark] #edit-form .button.danger{background:var(--surface)!important;border-color:transparent!important}
:root[data-theme=dark] .menu-item+.menu-item{border-top-color:rgba(255,255,255,.06)!important}
:root[data-theme=dark] .menu-icon{background:var(--accent-soft);color:var(--accent)}
:root[data-theme=dark] .mr.best{background:rgba(48,209,88,.12);box-shadow:none}
:root[data-theme=dark] .ms-lab{background:var(--surface-2);box-shadow:0 1px 6px rgba(0,0,0,.5)}
:root[data-theme=dark] .ms-dot{background:var(--surface)}
:root[data-theme=dark] .order-bar{background:rgba(255,255,255,.1)}
:root[data-theme=dark] :is(.gift-card,.gift-row,.row) h3{font-weight:800}

/* Fields: dark capsules, the search with a magnifier, a thin blue ring on focus. */
:root[data-theme=dark] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select){
  background-color:var(--surface)!important;border-color:transparent!important;box-shadow:none!important;color:var(--text)!important}
:root[data-theme=dark] #sheet:not(.fullscreen) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select){background-color:var(--surface-2)!important}
:root[data-theme=dark] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select):focus{box-shadow:0 0 0 1.5px var(--accent)!important}
:root[data-theme=dark] :is(input,select)::placeholder{color:var(--muted)}
:root:root[data-theme=dark] .search{padding-left:42px!important;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") no-repeat 15px 50%/18px!important}
:root:root[data-theme=dark] #sheet:not(.fullscreen) .search{background-color:var(--surface-2)!important}
/* The big price fields stay bare inside their card. */
:root:root[data-theme=dark] :is(.price-stepper,.quick-amount) input:not([type=checkbox]):not([type=radio]):not([type=range]){background:transparent!important;box-shadow:none!important}

/* Buttons: blue primary, graphite secondary, round graphite icon buttons. */
:root:root[data-theme=dark] .button:not(.secondary):not(.soft):not(.danger){background:var(--accent)!important;color:#fff!important;
  box-shadow:0 8px 22px rgba(30,140,255,.28),inset 0 1px 0 rgba(255,255,255,.22)!important}
:root:root[data-theme=dark] :is(.button.secondary,.button.soft,.button.danger){background:var(--surface-2)!important;border-color:transparent!important;box-shadow:none!important}
:root:root[data-theme=dark] #sheet:not(.fullscreen) :is(.button.secondary,.button.soft,.button.danger){background:var(--surface-3)!important}
:root:root[data-theme=dark] .balance .button{background:var(--surface-2)!important;border-color:transparent!important}
:root:root[data-theme=dark] .button.danger{color:var(--red)!important}
:root[data-theme=dark] :is(.fav-filter,.price-sort,.round-add){background-color:var(--surface)!important;border-color:transparent!important;box-shadow:none!important;color:var(--text)}
:root[data-theme=dark] .fav-filter[aria-pressed=true]{background:var(--surface-2)!important;color:#ff375f}
:root[data-theme=dark] .quick-steps button{background:var(--surface-2);color:var(--text);border-color:transparent}
:root[data-theme=dark] .quick-steps button[aria-pressed=true]{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent);color:#fff}
/* Segmented choices: the chosen one is a lighter tile with white text (Portals categories). */
:root:root[data-theme=dark] :is(.theme-picker,.segmented) button[aria-pressed=true],:root[data-theme=dark] .history-tabs:not(.lg-track) button[aria-selected="true"]{background:var(--surface-3)!important;color:#fff!important;box-shadow:none!important}

/* Prices: a bright blue capsule, like a price tag on Portals. */
:root[data-theme=dark] .floor-summary>b{display:inline-flex;align-items:center;gap:3px;padding:4px 10px 4px 5px;border-radius:999px;background:var(--accent);color:#fff;line-height:1}
:root[data-theme=dark] .floor-summary>b .gram{margin:0;width:16px;height:16px}
:root[data-theme=dark] .floor-summary>small{color:var(--muted)!important}
/* Order status: coloured capsules instead of white pills. */
:root:root[data-theme=dark] .order-list .stage{background:var(--accent);color:#fff;box-shadow:none;border:0}
:root:root[data-theme=dark] .order-list :is(.stage-check,.stage-delivery){background:rgba(255,159,10,.16);color:#ff9f0a}
:root:root[data-theme=dark] .order-list .stage-done{background:rgba(48,209,88,.16);color:var(--green)}
:root:root[data-theme=dark] .order-list .stage-paused{background:var(--surface-2);color:var(--muted)}

/* Header: round liquid-glass buttons over the page. */
:root:root[data-theme=dark] :is(.topbar .icon-button,.topbar .balance-chip,#sheet .icon-button,#sheet .balance-chip){
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04)),rgba(44,44,46,.55)!important;
  border:1px solid rgba(255,255,255,.1)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 18px rgba(0,0,0,.35)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);color:#fff}
/* Bottom bar: the same glass on the new black. */
:root:root[data-theme=dark] #nav :is(.nav-tabs,.nav-orb){border-color:rgba(255,255,255,.1)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.03)),rgba(28,28,30,.72)!important}

/* Profile wallet: the blue banner, as on the Portals home screen. */
:root[data-theme=dark] .wallet-card{background:linear-gradient(135deg,#2f8cff,#1460e6 60%,#0f4fc4);box-shadow:0 14px 34px rgba(30,140,255,.25)}

/* Toast and arrival banner: dark glass. */
:root:root[data-theme=dark] #toast{background:rgba(44,44,46,.82)!important;border-color:rgba(255,255,255,.1)!important;box-shadow:0 12px 30px rgba(0,0,0,.5)!important}

/* ===== Sheets (both themes): one look, motion, swipe down to close =====
   A bottom sheet slides up on an iOS sheet curve over a fading dimmer and slides back down
   on close; it follows the finger when pulled down (app.js) and settles back if let go early. */
:root{--sheet-in:cubic-bezier(.32,.72,0,1)}
dialog#sheet[open]{animation:sheet-up .5s var(--sheet-in)}
dialog#sheet[open]::backdrop{animation:fade-in .35s ease}
dialog#sheet.closing{animation:sheet-down .22s cubic-bezier(.4,0,.9,.6) forwards}
#sheet.dragging{transition:none!important;user-select:none;-webkit-user-select:none}
#sheet.settling{transition:transform .4s var(--sheet-in)!important}
.drag-handle{width:38px!important;height:5px!important;left:calc(50% - 19px)!important;top:8px!important;border-radius:999px!important}
/* The header strip stays the sheet's own colour (no blurred band) and fades into the content. */
.sheet-top{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  background:linear-gradient(180deg,var(--sheet-bg,transparent) 62%,transparent)!important}
#sheet.has-art .sheet-top{background:transparent!important}
#sheet .sheet-top #close-sheet{width:34px!important;height:34px!important;font-size:1.25rem}
:root[data-theme=dark] dialog#sheet:not(.fullscreen){--sheet-bg:rgba(28,28,30,.96);background:rgba(28,28,30,.92)!important;border:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 -14px 44px rgba(0,0,0,.6)!important;
  -webkit-backdrop-filter:blur(30px) saturate(1.6)!important;backdrop-filter:blur(30px) saturate(1.6)!important;border-radius:28px 28px 0 0!important}
:root[data-theme=dark] dialog#sheet::backdrop{background:rgba(0,0,0,.62)!important;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
:root[data-theme=dark] .drag-handle{background:rgba(255,255,255,.28)!important;opacity:1!important}
/* The gift's own colour glows from the top of its sheet and fades into black. */
:root:root[data-theme=dark] #sheet.has-art:not(.fullscreen){background:radial-gradient(110% 55% at 50% 0%,color-mix(in srgb,var(--art-a) 36%,transparent),transparent 72%),rgba(28,28,30,.95)!important}
:root:root[data-theme=dark] #sheet.fullscreen.has-art{background:radial-gradient(120% 42% at 50% 0%,color-mix(in srgb,var(--art-a) 40%,transparent),transparent 74%),var(--bg)!important}
:root[data-theme=dark] #sheet.fullscreen::backdrop{background:var(--bg)!important}
:root:root[data-theme=dark] .sheet-cta{background:rgba(11,11,12,.72)!important;border-top:1px solid rgba(255,255,255,.06)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6)}
@media(prefers-reduced-motion:reduce){dialog#sheet[open],dialog#sheet.closing{animation:none}#sheet.settling{transition:none!important}}

/* ===== Chosen models, backdrops, patterns (both themes) =====
   A chosen tile in the picker: blue ring, tinted tile, blue name and a check badge that pops
   in. The order sheet's Модели/Фоны/Узоры chips light up the same way once something is
   chosen there. :not(#_):not(#_) only lifts specificity above the flat dark cards (which carry an id
   in their selector list; the picker sits inside the sheet). */
:root .pick-opt.on:not(#_):not(#_){background:color-mix(in srgb,var(--accent) 14%,var(--surface))!important;border-color:var(--accent)!important;
  box-shadow:inset 0 0 0 2px var(--accent),0 6px 18px color-mix(in srgb,var(--accent) 22%,transparent)!important}
:root .pick-opt.on:not(#_):not(#_) b{color:var(--accent)}
.pick-opt.on::after{content:"";position:absolute;top:6px;left:6px;z-index:2;width:22px;height:22px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat;
  box-shadow:0 2px 8px rgba(0,0,0,.3);animation:pick-on .3s var(--ease-spring,cubic-bezier(.34,1.56,.64,1))}
@keyframes pick-on{from{transform:scale(.3);opacity:0}}
:root .attr-pick button.chosen:not(#_):not(#_){background:color-mix(in srgb,var(--accent) 14%,var(--surface))!important;
  box-shadow:inset 0 0 0 2px var(--accent)!important;border-color:var(--accent)!important}
:root .attr-pick button.chosen:not(#_):not(#_) b{color:var(--accent)}
@media(prefers-reduced-motion:reduce){.pick-opt.on::after{animation:none}}

/* ===== Price sliders (both themes), iOS style =====
   A thin rail, the chosen part in blue ending under the knob's centre (--f is the 0..1
   position set by paintRange in app.js), a round white knob that grows while held.
   :not(#_) lifts these above the older fat gradient bars (#quick-form … !important). */
:root :is(#quick-form,#edit-form) .quick-range:not(#_){--knob:28px;--rail:rgba(120,120,128,.22);
  -webkit-appearance:none;appearance:none;width:100%!important;height:var(--knob)!important;min-height:var(--knob)!important;
  margin:18px 0 8px!important;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent}
:root[data-theme=dark] :is(#quick-form,#edit-form) .quick-range:not(#_){--rail:rgba(255,255,255,.14)}
.quick-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;border:0;
  background:linear-gradient(90deg,#5ab0ff,var(--accent)) 0 0/calc(var(--knob,28px)/2 + (100% - var(--knob,28px))*var(--f,.5)) 100% no-repeat,var(--rail)}
.quick-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--knob,28px);height:var(--knob,28px);
  margin-top:calc((6px - var(--knob,28px))/2);border:0;border-radius:50%;background:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.25),0 0 0 .5px rgba(0,0,0,.08);transition:transform .15s ease}
.quick-range:active::-webkit-slider-thumb{transform:scale(1.15)}
.quick-range::-moz-range-track{height:6px;border-radius:999px;background:var(--rail)}
.quick-range::-moz-range-progress{height:6px;border-radius:999px;background:linear-gradient(90deg,#5ab0ff,var(--accent))}
.quick-range::-moz-range-thumb{width:var(--knob,28px);height:var(--knob,28px);border:0;border-radius:50%;background:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.25),0 0 0 .5px rgba(0,0,0,.08)}
.quick-range:focus-visible{outline:none}
.quick-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--accent-soft),0 3px 10px rgba(0,0,0,.25)}
@media(prefers-reduced-motion:reduce){.quick-range::-webkit-slider-thumb{transition:none}}
/* Quick price steps under a slider: one even row, the chosen step filled blue. */
:root :is(#quick-form,#edit-form) .quick-steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;margin-top:6px}
:root :is(#quick-form,#edit-form) .quick-steps button{min-width:0;padding:9px 0;border-radius:12px;font-size:.8rem;white-space:nowrap;border-color:transparent;box-shadow:none}
:root :is(#quick-form,#edit-form) .quick-steps button[aria-pressed=true]{background:var(--accent);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 35%,transparent)}

/* ===== Motion and icons, 17.10 (both themes) ===== */
/* Price that counts while a slider glides: steady digit widths, a small bump on arrival. */
.quick-amount input,[data-ton-balance],[data-ton-held],[data-live-balance]{font-variant-numeric:tabular-nums}
.quick-amount.bump{animation:amount-bump .45s var(--ease-spring,cubic-bezier(.34,1.56,.64,1))}
@keyframes amount-bump{35%{transform:scale(1.07)}}
/* A form part that appears when its switch is turned on slides down into place. */
[data-part].part-in{animation:part-in .42s var(--ease-out,cubic-bezier(.22,1,.36,1)) both}
@keyframes part-in{from{opacity:0;transform:translateY(-8px) scale(.985)}}
/* Loading cards shimmer instead of blinking. */
.skeleton{position:relative;overflow:hidden;animation:none!important}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:shimmer 1.3s ease-in-out infinite}
:root[data-theme=dark] .skeleton::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}
@keyframes shimmer{to{transform:translateX(100%)}}
/* Line icons in round buttons, list arrows and hints (instead of ‹ × › ✎ glyphs). */
.icon-button .line-icon{width:21px;height:21px;stroke-width:2.3}
#sheet .sheet-top #close-sheet .line-icon{width:17px;height:17px;stroke-width:2.4}
.sub-arrow{display:grid;place-items:center}.sub-arrow .line-icon{width:18px;height:18px;stroke-width:2.2}
.ms-go .line-icon{width:15px;height:15px;stroke-width:2.6}
.edit-hint .line-icon{width:13px;height:13px;vertical-align:-2px;margin-right:2px;stroke-width:2.2}
#full-edit .line-icon{width:17px;height:17px;margin-right:6px;vertical-align:-3px}
.pagination .button .line-icon{width:18px;height:18px}
/* Narrow phones (≤380px): the catalogue search gets its own row, the three controls go under it. */
@media(max-width:380px){
  :root .toolbar:has(#fav-only){flex-wrap:wrap!important}
  :root:root .toolbar:has(#fav-only) .search{flex:1 1 100%!important;min-width:0!important}
  :root:root .toolbar:has(#fav-only) .price-sort{flex:1 1 auto!important;width:auto!important;max-width:none!important}
}
@media(prefers-reduced-motion:reduce){.quick-amount.bump,[data-part].part-in,.skeleton::after{animation:none}}

/* ===== Backdrop presets (17.10) ===== */
/* Picker «Фоны»: a «Пресеты» card over the grid — preset chips (lit = its backdrops are the
   choice) and an always-visible «Новый пресет» / «Сохранить выбор»; naming happens in place. */
.preset-box{margin:2px 0 12px;padding:12px;border-radius:18px;background:var(--surface)}
.preset-head{display:flex;align-items:baseline;gap:8px;margin:0 2px 10px;flex-wrap:wrap}
.preset-head b{font-size:.95rem}.preset-head small{color:var(--muted);font-size:.74rem}
.preset-chips{display:flex;flex-wrap:wrap;gap:6px}
.preset-chips button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 13px;border-radius:999px;font-weight:700;font-size:.84rem;
  background:var(--surface-2);color:var(--text);transition:background .2s ease,box-shadow .2s ease,transform .12s ease}
.preset-chips button i{font-style:normal;font-size:.72rem;color:var(--muted);font-weight:800}
.preset-chips button[aria-pressed=true]{background:var(--accent);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 35%,transparent)}
.preset-chips button[aria-pressed=true] i{color:rgba(255,255,255,.8)}
.preset-chips button.preset-off{opacity:.45}
.preset-chips .preset-save{background:transparent;box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}
.preset-chips .preset-save .line-icon{width:15px;height:15px;margin-right:-2px}
.preset-chips button:active{transform:scale(.95)}
.preset-name-row{display:flex;gap:6px;align-items:center}
#picker .preset-name-row input{flex:1 1 auto;min-width:0;min-height:40px!important;padding:8px 14px!important;border-radius:999px!important;background-color:var(--surface-2)!important}
.preset-name-row .button.small{min-height:40px;padding:8px 14px;border-radius:999px!important;background:var(--accent)!important;color:#fff!important;font-weight:800}
.preset-name-row .button.small:disabled{opacity:.45}
.preset-cancel{flex:0 0 40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--muted)}
.preset-cancel .line-icon{width:16px;height:16px}
/* Profile sheet: intro, the presets, an empty state with sample colours, the «new» button. */
.preset-intro{margin:-4px 0 14px;font-size:.84rem;line-height:1.45}
.preset-list{margin-bottom:14px}
.preset-item{gap:12px!important;padding:12px 14px!important}
.preset-swatches{display:grid;grid-template-columns:repeat(2,18px);gap:3px;flex-shrink:0}
.preset-swatches i,.preset-demo i{border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.preset-swatches i{width:18px;height:18px}
.preset-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:20px 16px;margin:0 0 14px;border-radius:20px;background:var(--surface-2)}
.preset-demo{display:flex;gap:6px;margin-bottom:6px}
.preset-demo i{width:34px;height:34px;border-radius:11px}
.preset-demo i:nth-child(odd){transform:translateY(4px)}
.preset-empty b{font-size:1rem}.preset-empty small{color:var(--muted);font-size:.82rem;line-height:1.45;max-width:260px}
.preset-new{margin-top:2px}
.preset-new .line-icon{width:18px;height:18px;margin-right:2px}
/* Editor: name field, then the backdrop grid; the save bar stays at the bottom. */
.preset-title{width:100%;font-size:1.05rem!important;font-weight:700;margin:0 0 10px;padding:14px 16px!important;border-radius:16px!important}
.preset-grid{margin-bottom:12px}
.preset-grid .pick-opt b{margin-top:4px}

/* Fields inside a card (graphite on graphite) are a step lighter with a hairline edge, so it is
   clear where to type (e.g. «Telegram до, Stars»); the big amounts stay bare. */
:root:root[data-theme=dark] :is(.quick-markets,.quick-price,.subscription-card,.details,.note,.row,.stat,.balance,.market-list,.preset-box,#buy-settings,#notice-settings) :not(.quick-amount):not(.price-stepper)>:is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select){
  background-color:var(--surface-2)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:14px!important;padding:11px 14px!important}
:root:root[data-theme=dark] #sheet:not(.fullscreen) :is(.quick-markets,.quick-price,.subscription-card,.details,.note,.row,.stat,.balance,.market-list,#buy-settings,#notice-settings) :not(.quick-amount):not(.price-stepper)>:is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select){
  background-color:var(--surface-3)!important}
:root:root[data-theme=dark] :is(.quick-markets,.quick-price,#buy-settings,#notice-settings) :not(.quick-amount)>input::placeholder{color:var(--muted)}
/* A Stars cap field shows its ★ at the right edge. */
.quick-own label[data-part=notice-stars],.quick-own label[data-part=buy-stars]{position:relative}
.quick-own label[data-part=notice-stars]::after{content:"★";position:absolute;right:14px;bottom:12px;color:#f5a623;font-size:.95rem;pointer-events:none}
.quick-own label[data-part=notice-stars] input{padding-right:36px!important}

/* ===== Tonnel auctions (17.10): order form section and Профиль → Аукционы Tonnel ===== */
.auction-sub{display:block;margin:12px 2px 6px;color:var(--muted);font-weight:700;font-size:.8rem}
.remind-steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
.remind-steps button{min-width:0;padding:9px 0;border-radius:12px;font-weight:800;font-size:.8rem;background:var(--surface-2);color:var(--text);transition:background .2s ease,box-shadow .2s ease,transform .12s ease}
.remind-steps button[aria-pressed=true]{background:var(--accent);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 35%,transparent)}
.remind-steps button:active{transform:scale(.95)}
.auction-part .quick-checks{margin-top:10px}
.auction-card{display:grid;gap:8px;padding:14px;margin:10px 0 4px;border-radius:20px;background:var(--surface)}
.auction-card>small{color:var(--muted);font-weight:700;font-size:.8rem;margin:0 2px}
:root[data-theme=dark] .auction-card .switch-row{background:var(--surface-2)!important}
#sheet .switch-row>span{display:grid;gap:2px}#sheet .switch-row strong{font-size:.92rem}
.auction-list{gap:8px!important}
.auction-item{border-radius:20px;background:var(--surface);overflow:hidden}
.auction-item .auction-row{background:transparent!important;border-radius:0!important}
.auction-row .gift-media,.auction-rule .gift-media{width:48px!important;height:48px!important;border-radius:14px!important;flex-shrink:0}
.auction-live{color:var(--text)!important;font-weight:700}.auction-live b{color:var(--accent)}
.auction-more{display:grid;gap:8px;padding:0 14px 14px}
.auction-more>small{color:var(--muted);font-weight:700;font-size:.8rem}
:root[data-theme=dark] .auction-more .switch-row{background:var(--surface-2)!important}
.auction-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.auction-actions .button{min-height:42px!important;font-size:.85rem!important}
.auction-rule{gap:12px!important;padding:12px 14px!important;align-items:center}
.rule-delete{flex:0 0 36px;width:36px!important;height:36px!important;background:var(--surface-2)!important;border:0!important;box-shadow:none!important;color:var(--muted)}
.rule-delete .line-icon{width:16px;height:16px}
.rule-delete.sure{background:color-mix(in srgb,var(--red) 22%,var(--surface-2))!important;color:var(--red)}
[data-part-on][hidden],.auction-more[hidden]{display:none!important}
/* The auction chips keep their even row inside the order form (its market rows are flex). */
:root .quick-markets [data-part] .remind-steps:not(#_){display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
:root .quick-markets [data-part] .remind-steps:not(#_) button{min-height:38px;padding:8px 0;font-size:.8rem;white-space:nowrap}
:root[data-theme=dark] #sheet :is(.auction-card,.auction-more) .switch-row{background:var(--surface-2)!important;padding:12px 14px!important}
.auction-note{margin:6px 4px 2px;font-size:.78rem!important;line-height:1.4}
.auction-auto{display:grid;gap:8px}.auction-auto>small{color:var(--muted);font-weight:700;font-size:.8rem;margin:2px 2px 0}
/* Search hides rows with [hidden]; the forced flex of order rows must not show them again. */
.order-list .order-row[hidden],.list>[hidden]{display:none!important}
/* Профиль → Аукционы: markets of «Аукционы по всем ордерам» (icon + name in the chip). */
.auction-scope{margin:10px 2px 0}
.auction-markets button{display:flex;align-items:center;justify-content:center;gap:7px}
.auction-markets .market-icon{width:20px;height:20px;border-radius:50%!important}
/* Selection mode (22.10): a long press or «Выбрать» puts round checks into the order and
   notification rows; the bottom menu gives way to a glass bar with the count, «Выбрать все»
   and the actions for the chosen rows. */
.orders-head .head-actions{display:flex;align-items:center;gap:14px}
.section-head .head-links{display:flex;align-items:center;gap:14px;flex-shrink:0}
.section-head .head-links button{white-space:nowrap}
.section-head:has(.head-links) h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:360px){.section-head:has(.head-links){gap:10px}.section-head:has(.head-links) h2{font-size:1.25rem}.section-head .head-links{gap:10px}.section-head .head-links button{font-size:.8rem}.orders-head .head-actions{gap:10px}}
.pick-start{color:var(--accent);font-weight:700;font-size:.95rem;padding:8px 2px;background:none!important;border:0!important;box-shadow:none!important}
.section-head .pick-start{font-size:.875rem}
.order-list .order-row{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.order-list .order-row .pick-mark{flex:0 0 0;width:0;height:24px;margin-right:-12px;border-radius:50%;display:grid;place-items:center;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.3);opacity:0;transform:scale(.4);overflow:hidden;
  transition:flex-basis .28s var(--ease-out),width .28s var(--ease-out),margin .28s var(--ease-out),opacity .2s ease,transform .3s var(--ease-spring),background .15s ease,box-shadow .15s ease}
.order-list.picking .order-row .pick-mark{flex-basis:24px;width:24px;margin-right:0;opacity:1;transform:none}
.order-list .order-row .pick-mark .line-icon{width:15px;height:15px;stroke:#fff;stroke-width:3;opacity:0;transform:scale(.5);transition:opacity .15s ease,transform .25s var(--ease-spring)}
.order-list .order-row.picked .pick-mark{background:var(--accent);box-shadow:none}
.order-list .order-row.picked .pick-mark .line-icon{opacity:1;transform:none}
:root .order-list.picking .order-row:not(#_){transition:background .18s ease,box-shadow .18s ease,transform .12s ease}
:root .order-list.picking .order-row.picked:not(#_){background:color-mix(in srgb,var(--accent) 13%,var(--surface))!important;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 70%,transparent)!important}
.order-list.picking .sub-arrow{opacity:0;width:0;overflow:hidden}
:root.picking #nav:not(#_){opacity:0;transform:translateY(26px)!important;pointer-events:none}
:root.picking #nav>*{pointer-events:none!important}
:root #nav{transition:opacity .22s ease,transform .3s var(--ease-out)}
:root.picking .shell{padding-bottom:calc(178px + env(safe-area-inset-bottom))!important}
.pick-bar{position:fixed;z-index:6;left:12px;right:12px;bottom:calc(18px + env(safe-area-inset-bottom));max-width:480px;margin:0 auto;
  display:grid;gap:8px;padding:8px;border-radius:28px;color:var(--text);
  border:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.03)),rgba(28,28,30,.78);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.14),0 14px 36px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(26px) saturate(1.8);backdrop-filter:blur(26px) saturate(1.8);
  animation:pick-bar-in .34s var(--ease-out) both}
.pick-bar.leaving{animation:pick-bar-out .24s ease both;pointer-events:none}
@keyframes pick-bar-in{from{opacity:0;transform:translateY(28px) scale(.97)}}
@keyframes pick-bar-out{to{opacity:0;transform:translateY(28px) scale(.97)}}
.pick-top{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;padding:0 6px 0 2px}
.pick-close{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--text)}
.pick-close .line-icon{width:16px;height:16px;stroke-width:2.4}
.pick-count{font-size:.95rem;font-weight:800;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.pick-count.bump{animation:amount-bump .35s var(--ease-spring)}
.pick-all{color:var(--accent);font-weight:700;font-size:.875rem;padding:8px 4px;white-space:nowrap}
.pick-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
.pick-actions button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;padding:8px 4px;border-radius:20px;
  background:rgba(255,255,255,.07);color:var(--text);font-size:.74rem;font-weight:700;transition:transform .12s ease,opacity .2s ease,background .15s ease}
.pick-actions button:active:not(:disabled){transform:scale(.95);background:rgba(255,255,255,.12)}
.pick-actions button:disabled{opacity:.32;cursor:default}
.pick-actions button .line-icon{width:21px;height:21px}
.pick-actions button.danger{color:var(--red)}
.pick-actions button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:360px){.pick-bar{left:8px;right:8px}.pick-actions button{font-size:.68rem;min-height:52px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.pick-bar{background:var(--surface)}}
@media(prefers-reduced-transparency:reduce){.pick-bar{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){.pick-bar,.pick-bar.leaving,.pick-count.bump{animation:none}}
/* «Типы уведомлений» for the chosen rows: a half-way switch when only some have the type. */
.pick-types{display:grid;gap:8px;margin-top:14px}
:root[data-theme=dark] #sheet .pick-types .switch-row{background:var(--surface-2)!important}
.pick-types .switch-row small{margin-top:3px}
.pick-types .switch-row input:indeterminate{background:linear-gradient(90deg,#34c759 50%,rgba(120,128,150,.32) 50%)!important}
.pick-types .switch-row input:indeterminate:before{transform:translateX(9.5px)!important}
.pick-types-note{margin:12px 4px 0;font-size:.8rem!important}

/* ===== Screen skeletons and pull-to-refresh (25.10) ===== */
/* Bones sit in the real rows and cards; one light sweep runs across each of them. */
.sk{display:block;flex-shrink:0;border-radius:8px;background:linear-gradient(90deg,var(--sk-base) 0 35%,var(--sk-hi) 50%,var(--sk-base) 65% 100%);background-size:300% 100%;animation:sk-sweep 1.4s ease-in-out infinite}
:root{--sk-base:rgba(20,30,70,.07);--sk-hi:rgba(20,30,70,.13)}
:root[data-theme=dark]{--sk-base:rgba(255,255,255,.06);--sk-hi:rgba(255,255,255,.12)}
@keyframes sk-sweep{from{background-position:100% 0}to{background-position:0 0}}
.sk-screen{pointer-events:none}
.sk-row{min-height:80px}
.sk-row .info{display:grid;gap:9px}
.sk-pic{width:56px;height:56px;border-radius:16px}
.sk-line{height:12px;border-radius:6px}
.sk-line.w70{width:70%}.sk-line.w60{width:60%}.sk-line.w40{width:40%}
.sk-pill{width:62px;height:28px;border-radius:999px;align-self:center}
.sk-amount{width:58px;height:16px;border-radius:6px;align-self:center}
.sk-hero{height:112px;border-radius:22px;margin-bottom:20px}
.sk-search{flex:1;height:46px;border-radius:16px}
.sk-card .sk-art{width:100%;aspect-ratio:1;border-radius:18px}
.sk-card .gift-card-info{display:grid;gap:8px;padding:4px 4px 0}
.grid.as-list .sk-card{flex-direction:row!important;align-items:center!important;min-height:0!important}
.grid.as-list .sk-card .sk-art{width:48px;height:48px;aspect-ratio:auto}
@media(prefers-reduced-motion:reduce){.sk{animation:none}}

/* ===== Android: light chrome (25.10) ===== */
/* Android WebViews redraw every blurred layer on each frame while the screen under it moves, so
   tab changes stutter there (iPhone is fine). html.lite (set in theme()): no backdrop blur
   anywhere — the floating chrome turns near-opaque instead —, the screen only fades in, rows
   arrive together, and the skeleton pulses its opacity (compositor only, no repaint). */
:root.lite *,:root.lite *::before,:root.lite *::after,:root.lite dialog::backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
:root:root:root.lite #nav .nav-tabs,:root:root:root.lite #nav .nav-orb,:root.lite .pick-bar,:root.lite .icon-button,:root.lite .balance-chip,:root.lite #toast{background:rgba(28,28,30,.96)!important}
:root:root:root.lite #sheet,:root:root:root.lite #sheet.has-art{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:var(--surface)!important}
:root.lite #main.items-enter *,:root.lite #sheet-body.sheet-enter *,:root.lite #sheet-body.sheet-enter>*{animation:none!important}
:root.lite .sk{background:var(--sk-hi);animation:sk-pulse 1s ease-in-out infinite alternate}
@keyframes sk-pulse{to{opacity:.45}}

/* ===== «Недавние продажи» (27.10) ===== */
/* Built from the order screen's parts: gift rows, model/backdrop chips, period tabs, the floor
   chart. The one accent is each sale's price against the model's floor right now. */
.rs-title{margin:0!important;font-size:1.05rem!important;text-align:center}
#sheet .rs-gifts{margin-top:12px}
.rs-gifts .gift-row .rs-go{margin-left:auto;color:var(--muted);display:grid;place-items:center}
.rs-gifts .gift-row .rs-go .line-icon{width:18px;height:18px}
.rs-pick{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.rs-days{margin:14px 0 10px;width:max-content}
.rs-days button{min-height:36px;padding:6px 14px!important;font-size:.85rem!important;white-space:nowrap}
.rs-list{margin-top:10px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.rs-sale{text-align:left;color:var(--text)}
.rs-sale:disabled{opacity:1;cursor:default}
.rs-sale .gift-media{width:48px!important;height:48px!important;border-radius:14px!important;flex-shrink:0}
.rs-sale h3{font-size:.95rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-sale h3 small{display:inline;color:var(--muted);font-weight:600}
.rs-sale .info>small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-price{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.rs-price b{display:inline-flex;align-items:center;gap:4px;font-size:1rem;font-variant-numeric:tabular-nums}
.rs-price .market-icon{width:16px;height:16px;border-radius:5px;margin-right:2px}
.rs-price small{font-size:.75rem;color:var(--muted);margin:0!important;white-space:nowrap}
.rs-price small.rs-below{color:var(--green)}
.rs-empty{margin:18px 4px;line-height:1.5}
/* Sold gift on its own backdrop, as on Telegram. */
.gift-media.on-bd{background:radial-gradient(circle at 50% 40%,var(--bd-a),var(--bd-b))!important}
/* «По маркетам»: one row of market cards, all on screen (the row splits the width evenly; the
   name gives way to the logo when a card is narrow). The chosen one is lit in the market's tint. */
.rs-mk[data-mk=telegram]{--mk:#2aabee}.rs-mk[data-mk=portals]{--mk:#5b8cff}.rs-mk[data-mk=mrkt]{--mk:#34c77b}
.rs-mk[data-mk=tonnel]{--mk:#f2c200}.rs-mk[data-mk=getgems]{--mk:#a47cff}
.rs-markets{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;margin:12px 0 4px}
.rs-mk{--mk:var(--accent,#5b8cff);display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;container-type:inline-size;
  padding:9px 9px 8px;border-radius:15px;text-align:left;color:var(--text);
  background:color-mix(in srgb,var(--text) 6%,transparent);box-shadow:inset 0 0 0 1px var(--line);
  transition:background .2s ease,box-shadow .2s ease,transform .15s ease}
.rs-mk:active{transform:scale(.97)}
.rs-mk.on{background:color-mix(in srgb,var(--mk) 16%,transparent);box-shadow:inset 0 0 0 1.5px var(--mk)}
.rs-mk-top{display:flex;align-items:center;gap:5px;max-width:100%;font-size:.74rem;font-weight:700;color:var(--muted);white-space:nowrap}
.rs-mk-top span:last-child{overflow:hidden;text-overflow:ellipsis}
@container (max-width:74px){.rs-mk[data-mk]:not([data-mk=""]) .rs-mk-top span:last-child{display:none}}
.rs-mk.on .rs-mk-top{color:var(--text)}
.rs-mk-top .market-icon{width:18px;height:18px;border-radius:6px;flex-shrink:0}
.rs-mk-all{display:grid;place-items:center;width:18px;height:18px;border-radius:6px;background:rgba(127,127,127,.18);flex-shrink:0}
.rs-mk-all .ico{width:12px;height:12px}
.rs-mk-num{font-size:1.15rem;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.rs-mk small{display:inline-flex;align-items:center;gap:3px;max-width:100%;overflow:hidden;font-size:.7rem;color:var(--muted);white-space:nowrap}
.rs-mk small .gram{width:11px;height:11px;margin:0}
@media(prefers-reduced-motion:reduce){.rs-mk{transition:none}.rs-mk:active{transform:none}}

/* ===== Icons: Lucide, one stroke (28.10) ===== */
/* Midas rounded duotone icons. Keep small controls crisp in both themes. */
svg.ico{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
:root svg.ico{stroke-width:1.8!important}
:root nav button svg.ico{stroke-width:1.9!important}
:root svg.ico :is(.icon-tone,.icon-solid){fill:currentColor!important;stroke:none!important}
svg.ico .icon-tone{fill-opacity:.18}
svg.ico .icon-solid{fill-opacity:1}
:root nav button.active svg.ico .icon-tone{fill-opacity:.32}
:root .stats-button svg.ico{stroke:var(--text);width:23px;height:23px}
:root :is(.fav-filter,.fav-button)[aria-pressed=true] svg.ico .icon-tone{fill-opacity:1}
:root:root .menu-icon{width:36px;height:36px;border-radius:12px;background:var(--icon-bg);color:var(--icon-color)}
:root .menu-icon svg.ico{width:22px;height:22px}
.menu-icon-bell{--icon-color:#e6a637;--icon-bg:#e6a63720}
.menu-icon-presets{--icon-color:#9b83ee;--icon-bg:#9b83ee20}
.menu-icon-auctions{--icon-color:#ed9671;--icon-bg:#ed967120}
.menu-icon-anim{--icon-color:#4cbbba;--icon-bg:#4cbbba20}
.menu-icon-markets{--icon-color:#6aa8ee;--icon-bg:#6aa8ee20}
:root[data-theme=light] .menu-icon-bell{--icon-color:#a66b10}
:root[data-theme=light] .menu-icon-presets{--icon-color:#7954c9}
:root[data-theme=light] .menu-icon-auctions{--icon-color:#b75b33}
:root[data-theme=light] .menu-icon-anim{--icon-color:#167f80}
:root[data-theme=light] .menu-icon-markets{--icon-color:#3473b9}
/* «Все», «История», «Модели и фоны»: a small chevron instead of a typed arrow. */
:is(.link,.head-links button,.gift-card small) .line-icon{width:14px;height:14px;margin-left:2px;vertical-align:-2px;stroke-width:2.4!important}

/* ===== Long lists: off-screen items cost nothing (29.10) ===== */
/* The catalog draws 120+ cards at once; laying out and painting all of them was the long task of
   every switch to «Маркет». Off-screen cards and rows are skipped until they scroll near; «auto»
   keeps each one's real size once it has been drawn, so the scrollbar does not jump. */
#catalog-grid>.gift-card{content-visibility:auto;contain-intrinsic-size:auto 250px}
#catalog-grid>.gift-row,#main .list>.row{content-visibility:auto;contain-intrinsic-size:auto 76px}

/* ===== Design pass (31.10): one gold accent, calmer chrome, depth, feedback ===== */
/* Gold of the Midas splash marks what is active or chosen: the bottom-bar tab, a round side
   button, the price presets, the chosen model/backdrop/pattern chips and a set sort. Blue stays
   for actions (buttons, price tags). */
:root{--gold:#f2cf6e;--gold-deep:#c8962e;--gold-ink:#1d1606;--gold-grad:linear-gradient(100deg,#c8962e,#f2cf6e 45%,#fff0c2 62%,#e2b553)}
:root:root:root[data-theme=dark]{--nav-blue:var(--gold)}
:root:root :is(#quick-form,#edit-form) .quick-steps button[aria-pressed=true]{background:var(--gold-grad);color:var(--gold-ink);box-shadow:0 4px 14px rgba(242,207,110,.22)}
:root:root :is(.attr-pick button.chosen,.pick-opt.on):not(#_):not(#_){background:color-mix(in srgb,var(--gold) 11%,var(--surface))!important;border-color:transparent!important;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--gold) 70%,transparent)!important}
:root:root :is(.attr-pick button.chosen,.pick-opt.on):not(#_):not(#_) b{color:var(--gold)}
:root:root .pick-opt.on::after{background-color:var(--gold);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1606' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
:root:root .price-sort:has(option:checked:not([value=""])){box-shadow:inset 0 0 0 1.5px var(--gold)!important;color:var(--gold)!important}

/* Calmer bottom bar: no glare, a hairline edge, one soft shadow; the drop is a quiet tile and
   the active tab is told by its gold colour alone. */
:root:root:root[data-theme=dark] #nav :is(.nav-tabs,.nav-orb){border-color:rgba(255,255,255,.06)!important;
  background:rgba(28,28,30,.86)!important;box-shadow:0 10px 30px rgba(0,0,0,.45)!important}
:root:root:root[data-theme=dark] #nav .nav-orb.active{box-shadow:inset 0 0 0 1.5px var(--gold),0 10px 30px rgba(0,0,0,.45)!important}
:root:root[data-theme=dark] #nav .lg-pill{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
:root:root[data-theme=dark] #nav .lg-pill.lifted{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 8px 22px rgba(0,0,0,.45)}
#nav .nav-tabs button:not(.active),#nav .nav-orb:not(.active){color:var(--muted)}

/* Depth: a soft glow under the gift in its backdrop's colour (box-shadow only, no blur filter),
   and the backdrop itself changes colour smoothly when another one is chosen. */
@property --bd-a{syntax:'<color>';inherits:true;initial-value:transparent}
@property --bd-b{syntax:'<color>';inherits:true;initial-value:transparent}
.hero-frame.has-backdrop{transition:--bd-a .35s ease,--bd-b .35s ease,box-shadow .35s ease;
  box-shadow:0 22px 56px -16px color-mix(in srgb,var(--bd-b) 80%,transparent),0 0 80px -24px color-mix(in srgb,var(--bd-a) 70%,transparent)!important}
.hero-frame.mini.has-backdrop{box-shadow:0 8px 22px -8px color-mix(in srgb,var(--bd-b) 80%,transparent)!important}
:root #catalog-grid .gift-card .gift-media.tiled{box-shadow:0 14px 30px -14px var(--tile-b)!important}

/* Price first, labels quiet: a larger price tag, the market and hints small and grey. */
:root:root[data-theme=dark] .gift-card .floor-summary>b{font-size:1.02rem;font-weight:800;padding:5px 11px 5px 5px}
:root:root[data-theme=dark] .gift-card .floor-summary>b .gram{width:18px;height:18px}
:root:root .gift-card .floor-summary>small{font-size:.7rem;font-weight:600}
:root:root .gift-card .gift-card-info>small{color:var(--muted);font-size:.72rem;font-weight:500}
:root:root .gift-card h3{font-weight:700!important}

/* Compact balance: one row — the sum on the left, two small pills on the right — so the first
   screen of the market is the gifts. */
:root:root .market-hero.compact{display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 14px 18px!important;margin-bottom:12px!important}
.market-hero.compact .hero-sum{min-width:0}
.market-hero.compact .hero-sum>small{font-size:.75rem;font-weight:600}
:root:root .market-hero.compact .balance-number{font-size:1.75rem!important;margin:2px 0 0}
.market-hero.compact .hero-sub{display:block;font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.market-hero.compact .hero-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0;margin:0!important}
.hero-act{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px 0 10px;border-radius:999px;background:var(--surface-2);color:var(--text);font-size:.8rem;font-weight:700;white-space:nowrap}
.hero-act .line-icon{width:16px;height:16px}

/* Filter chips show their choice: the model, the backdrop's colour dot, the pattern symbol. */
.attr-pick button b{display:flex!important;align-items:center;justify-content:center;gap:5px;min-width:0}
.chip-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-prev{display:inline-flex;flex-shrink:0}
.chip-prev>i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;overflow:hidden;box-shadow:0 0 0 1.5px var(--surface)}
.chip-prev>i+i{margin-left:-6px}
.chip-dot{background:radial-gradient(circle at 50% 40%,var(--a),var(--b))}
.chip-art{background:var(--surface-2)}
:root .chip-art .gift-media{width:100%!important;height:100%!important;min-width:0;margin:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.chip-art .media-placeholder{font-size:.55rem}

/* Feedback: the heart fills and pops; cards and chips press in (the scale is set above). */
.fav-button svg{width:24px;height:24px;fill:transparent;stroke:currentColor;stroke-width:2;stroke-linejoin:round;transition:fill .25s ease,color .25s ease}
.fav-button[aria-pressed=true] svg{fill:currentColor}
.fav-button.pop svg{animation:heart-pop .45s var(--ease-spring)}
@keyframes heart-pop{40%{transform:scale(1.28)}}
.gift-card{transition:transform .12s ease,box-shadow .2s ease}

/* Empty states: a small gold gift on a soft glow, a short text and one action. */
.empty-art{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 14px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,207,110,.18),rgba(242,207,110,0) 70%)}
.empty-art svg{width:52px;height:52px;fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.empty-art svg rect[fill]{stroke:none}
:root:root .empty h3{font-size:1.05rem;margin:0 0 6px}
:root:root .empty p{color:var(--muted);font-size:.85rem;margin:0 0 16px}
@media(prefers-reduced-motion:reduce){.hero-frame.has-backdrop{transition:none}.fav-button.pop svg{animation:none}}

/* Volume screen in the app's look (01.11): gold marks the chosen period, metric and market and
   draws the charts; the gifts are one full-width list (names were cut, percents ran out of
   the half-width cards) with a quiet sparkline, no dots or labels. */
:root:root .ms-seg .lg-pill,:root:root .ms-markets .lg-pill,:root:root .ms-seg .lg-pill.lifted,:root:root .ms-markets .lg-pill.lifted{
  background:var(--gold-grad);box-shadow:0 4px 14px rgba(242,207,110,.22)}
:root:root .ms-seg button[aria-selected="true"],:root:root .ms-markets button[aria-selected="true"]{color:var(--gold-ink)}
:root:root .ms-line{stroke:var(--gold)}
:root:root .ms-fill{fill:var(--gold);opacity:.14}
:root:root .ms-dot{box-shadow:0 0 0 2px var(--gold)}
:root:root .ms-go{background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--gold)}
:root:root .ms-gifts{grid-template-columns:minmax(0,1fr);gap:8px}
:root:root .ms-gift{display:grid;grid-template-columns:minmax(0,1fr) 38%;align-items:center;gap:12px;padding:10px 12px}
:root:root .ms-gift .ms-chart{margin:0}
:root:root .ms-gift .ms-plot{height:40px}
:root:root .ms-gift :is(.ms-dot,.ms-lab,.ms-ticks){display:none}
:root:root .ms-gname b{font-size:.92rem}
:root:root .ms-gname small{font-size:.78rem;gap:6px}
.ms-sk-plot{display:block;height:132px;margin-top:12px;border-radius:14px}
.ms-sk-spark{display:block;height:40px;border-radius:10px}
:root:root .ms-gift .ms-go{display:none}
.look-row em{font-style:normal}
.order-slots:not(:empty){display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin:0 0 14px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(255,255,255,.045)}
.slots-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.slots-copy b{font-size:15px}.slots-copy small{color:var(--muted,#999);font-size:12px;line-height:1.35}.slots-add{flex:none;border:0;border-radius:12px;padding:9px 11px;background:rgba(70,145,255,.16);color:#77b5ff;font:inherit;font-size:12px;font-weight:650}.slots-add span{display:block;margin-top:2px;font-size:11px;opacity:.8}.slot-plans{display:grid;gap:8px;margin:18px 0}.slot-plan{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(255,255,255,.05);color:inherit;padding:16px;font:inherit}.slot-plan span{display:flex;align-items:center;gap:5px;white-space:nowrap;color:#77b5ff}.slot-plan svg{width:16px;height:16px}
[data-theme="light"] .order-slots:not(:empty){background:rgba(255,255,255,.55);border-color:rgba(30,45,70,.1)}
[data-theme="light"] .slots-add,[data-theme="light"] .slot-plan span{color:#145eb4}
[data-theme="light"] .slot-plan{background:rgba(30,45,70,.04);border-color:rgba(30,45,70,.08)}
.payment-sum{display:flex;flex-direction:column;gap:5px;padding:18px;border-radius:16px;background:rgba(255,255,255,.06);margin:16px 0}.payment-sum small,.payment-details small{color:var(--muted,#999)}.payment-sum b{font-size:26px}.payment-details{display:grid;gap:7px;margin:16px 0}.payment-details>div{display:flex;align-items:center;gap:10px;margin-bottom:8px}.payment-details code{min-width:0;overflow-wrap:anywhere;flex:1;font-size:13px}.payment-details button{border:0;border-radius:10px;background:rgba(70,145,255,.16);color:#77b5ff;padding:9px;font:inherit;font-size:12px}.slot-plan:disabled{opacity:.5}.slot-plan[aria-busy=true] span{opacity:.5}#invoice-check,#invoice-plans{margin-top:8px}[data-theme="light"] .payment-sum{background:rgba(30,45,70,.05)}[data-theme="light"] .payment-details button{color:#145eb4}
.order-list.picking .pick-other{opacity:.4;pointer-events:none}
.wallet-link{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:10px 10px 10px 14px;border-radius:18px;background:var(--glass,var(--surface));border:1px solid var(--glass-edge,var(--line))}.wl-copy{display:flex;align-items:center;gap:10px;min-width:0}.wl-copy b{display:block;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wl-copy small{display:block;font-size:.75rem;color:var(--muted)}.wl-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--muted)}.wl-dot.ok{background:#34c759;box-shadow:0 0 0 4px rgba(52,199,89,.18)}.wl-btn{flex:none;display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:13px;background:#5b4cf0;color:#fff;font-weight:700;font-size:.85rem}.wl-btn svg{width:16px;height:16px}.wl-btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--glass-edge,var(--line))}
.ton-form{display:grid;gap:14px;margin-top:14px}.ton-form .quick-steps{justify-content:center}.ton-form .quick-steps button{padding:9px 16px}
.ton-to{overflow-wrap:anywhere}
.plan-balance{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:12px 12px 12px 14px;border-radius:16px;background:var(--glass,var(--surface));border:1px solid var(--glass-edge,var(--line))}.plan-balance small{display:block;color:var(--muted);font-size:.75rem}.plan-balance b{display:flex;align-items:center;gap:6px;font-size:1rem}.plan-balance .gram{width:18px;height:18px;margin:0}
#plan-back{margin-top:10px}.slot-plan.plan-on{opacity:1}.slot-plan.plan-on span{color:#34c759}
/* Admin panel (01.11): overview tiles, sections menu, Telegram accounts, transfers, priority. */
.admin-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 18px}.admin-tile{display:flex;flex-direction:column;gap:4px;min-width:0;padding:14px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-border,var(--line))}.admin-tile small{color:var(--muted);font-size:.75rem;font-weight:600}.admin-tile b{display:flex;align-items:center;gap:5px;font-size:1.3rem;font-weight:800;letter-spacing:-.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-tile b .gram{width:18px;height:18px;margin:0}.admin-tile span{color:var(--muted);font-size:.75rem;line-height:1.3}.admin-tile.warn{border-color:color-mix(in srgb,var(--red) 45%,transparent)}.admin-tile.warn span{color:var(--red)}
.admin-menu .menu-item>span:nth-child(2){flex:1;min-width:0}.admin-menu .menu-item small{display:block;color:var(--muted);font-size:.78rem}.admin-badge{min-width:22px;height:22px;padding:0 7px;border-radius:11px;display:grid;place-items:center;background:var(--red);color:#fff;font-size:.75rem;font-weight:800}.menu-icon-profile{--icon-color:#3fb5ff;--icon-bg:#3fb5ff20}.menu-icon-list{--icon-color:#5ec98a;--icon-bg:#5ec98a20}.menu-icon-sales{--icon-color:#f0b84a;--icon-bg:#f0b84a20}
#add-session{min-height:38px;padding:8px 13px}#add-session svg{width:16px;height:16px}
.acc-list{display:grid;gap:10px}.acc-card{padding:12px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-border,var(--line))}.acc-head{display:flex;align-items:center;gap:11px;width:100%;text-align:left}.acc-ava{flex:none;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--accent-soft,rgba(59,140,255,.15));color:var(--accent);font-weight:800}.acc-info{flex:1;min-width:0}.acc-info b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acc-info small{display:block;color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acc-meta{margin:8px 0 0 51px}.acc-meta .error,.acc-meta .subtle{margin-top:6px;font-size:.8rem}.acc-role{display:inline-block;padding:3px 9px;border-radius:9px;font-size:.75rem;font-weight:700;background:rgba(127,127,127,.14);color:var(--muted)}.acc-role.buyer{background:rgba(93,255,176,.14);color:var(--green)}.acc-actions{display:flex;gap:8px;margin-top:10px}.acc-actions .button{min-height:38px;padding:8px 12px}.acc-actions .button.secondary{flex:1}.acc-actions .button.danger svg{width:17px;height:17px}
.pill.bad{color:var(--red)}
.tx-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;margin:6px 0 12px;border-radius:14px;background:var(--glass)}.tx-tabs button{padding:9px;border-radius:11px;font-weight:700;color:var(--muted)}.tx-tabs button.active{background:var(--accent);color:#fff}.tx-list{display:grid;gap:8px}.tx-row{display:flex;justify-content:space-between;gap:10px;padding:12px;border-radius:16px;background:var(--glass)}.tx-row>div{min-width:0}.tx-row>div:last-child{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}.tx-row b{display:block;font-size:.9rem}.tx-row small{display:block;color:var(--muted);font-size:.75rem;overflow-wrap:anywhere}
.prio-ctl{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;gap:10px;margin:10px 0}.prio-ctl .button{min-height:48px;font-size:1.4rem;padding:0}.prio-ctl>div{text-align:center}.prio-ctl b{display:block;font-size:1.8rem;font-weight:800}.prio-ctl small{color:var(--muted);font-size:.75rem}.prio-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:8px;font-size:.72rem;font-weight:800;vertical-align:middle;background:rgba(93,255,176,.16);color:var(--green)}.prio-tag.low{background:rgba(255,122,154,.16);color:var(--red)}
/* Deposit and withdrawal sheets (01.11, after the user's reference screens). */
.wallet-actions.two{grid-template-columns:repeat(2,1fr)}
.ts-title{font-size:1.75rem;margin:6px 0 14px}
.ts-card{display:flex!important;flex-direction:column;align-items:center;gap:14px;margin:0;padding:18px 16px 16px;border-radius:26px;background:var(--glass);border:1px solid var(--glass-border,var(--line))}
.ts-label{color:var(--muted);font-size:.85rem}
.ts-wallet{display:inline-flex;align-items:center;gap:8px;margin-top:-4px;padding:8px 14px;border-radius:999px;background:rgba(127,127,127,.14);border:1px solid var(--glass-border,var(--line));font-weight:700;font-size:.95rem}.ts-wallet svg{width:20px;height:20px;color:#2f8cff}.ts-wallet.off{color:#fff;background:#2f8cff;border-color:transparent}.ts-wallet.off svg{color:#fff}
.ts-amount{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;width:100%;min-height:76px}.ts-amount label{grid-column:2}.ts-amount label{display:flex!important;align-items:baseline;gap:12px;cursor:text}.ts-amount input{width:1.4ch;min-width:1.4ch;max-width:62vw;min-height:0;padding:0;border:0;background:transparent;color:var(--text);font-family:inherit;font-size:var(--ts-size,3.4rem)!important;font-weight:800;line-height:1.1;letter-spacing:-1px;text-align:right;outline:none;caret-color:#2f8cff}.ts-amount input::placeholder{color:var(--text);opacity:1}.ts-amount span{font-size:calc(var(--ts-size,3.4rem) * .76);font-weight:800;color:var(--muted);opacity:.55}
.ts-max{grid-column:3;justify-self:end;padding:8px 14px;border-radius:999px;background:#fff;color:#111;font-weight:700;font-size:.95rem}
.ts-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.ts-chips button{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:rgba(127,127,127,.14);border:1px solid var(--glass-border,var(--line));font-weight:700;font-size:1rem}.ts-chips .gram{width:20px;height:20px;margin:0}
.ts-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}.ts-tiles>div{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:18px;background:rgba(127,127,127,.12)}.ts-tiles small{color:var(--muted);font-size:.85rem}.ts-tiles b{display:inline-flex;align-items:center;gap:5px;font-size:1.05rem}.ts-tiles .gram{width:16px;height:16px;margin:0}
.ts-go{min-height:56px;border-radius:999px;font-size:1.1rem;font-weight:800}.ts-go:disabled{opacity:.5;cursor:default}
:root #sheet .ts-amount input:not(#_){font-size:var(--ts-size,3.4rem)!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;min-height:0!important}
#sheet.pinned .ts-bar{margin:0 0 6px;padding-top:max(env(safe-area-inset-top),var(--tg-content-safe-area-inset-top,0px))}#sheet.pinned .ts-title{font-size:2rem;margin:4px 0 16px}
dialog.fullscreen form.ts-card{padding-bottom:16px!important}
/* 01.11: an account's long error (SESSION_REVOKED: … without spaces) widened the whole list past the screen. */
.acc-list{grid-template-columns:minmax(0,1fr)}.acc-card,.acc-head,.acc-meta{min-width:0}.acc-meta .error{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.acc-head .pill{flex:none}