/* ── Шрифти: наші власні, не з Google ──────────────────────────
   На маркеті мережа перевантажена, і похід по шрифт на чужий домен —
   зайві DNS, TLS і очікування саме тоді, коли людина стоїть у проході.
   Тепер обидві гарнітури лежать поруч із застосунком.

   Кирилиця й латиниця — окремими файлами: українцю латинський шматок
   не качається взагалі. Обидві під ліцензією SIL OFL 1.1, тексти —
   у web/fonts/LICENSE-*.txt.
   ──────────────────────────────────────────────────────────── */
@font-face{font-family:Unbounded;font-style:normal;font-weight:700;font-display:swap;
  src:url(/static/fonts/unbounded-latin-700.woff2) format('woff2');
  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}
@font-face{font-family:Unbounded;font-style:normal;font-weight:700;font-display:swap;
  src:url(/static/fonts/unbounded-cyrillic-700.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Unbounded;font-style:normal;font-weight:800;font-display:swap;
  src:url(/static/fonts/unbounded-latin-800.woff2) format('woff2');
  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}
@font-face{font-family:Unbounded;font-style:normal;font-weight:800;font-display:swap;
  src:url(/static/fonts/unbounded-cyrillic-800.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Commissioner;font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/fonts/commissioner-latin-400.woff2) format('woff2');
  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}
@font-face{font-family:Commissioner;font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/fonts/commissioner-cyrillic-400.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Commissioner;font-style:normal;font-weight:500;font-display:swap;
  src:url(/static/fonts/commissioner-latin-500.woff2) format('woff2');
  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}
@font-face{font-family:Commissioner;font-style:normal;font-weight:500;font-display:swap;
  src:url(/static/fonts/commissioner-cyrillic-500.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Commissioner;font-style:normal;font-weight:600;font-display:swap;
  src:url(/static/fonts/commissioner-latin-600.woff2) format('woff2');
  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}
@font-face{font-family:Commissioner;font-style:normal;font-weight:600;font-display:swap;
  src:url(/static/fonts/commissioner-cyrillic-600.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Commissioner;font-style:normal;font-weight:700;font-display:swap;
  src:url(/static/fonts/commissioner-latin-700.woff2) format('woff2');
  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}
@font-face{font-family:Commissioner;font-style:normal;font-weight:700;font-display:swap;
  src:url(/static/fonts/commissioner-cyrillic-700.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* ═══════════════════════════════════════════════════════════════
   «Афіша» — той самий напрям, що й у застосунку покупця. Кабінет і
   застосунок мусять виглядати одним сервісом: продавець показує картку
   покупцю зі свого ж екрана.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#F0E7D6; --surface:#FBF6EC; --ink:#171310; --ink-2:#4A423A; --muted:#8A7B68;
  --line:#DFD3BC; --line-2:#C9BCA2; --acc:#C4402A; --acc-soft:#F6E2DA;
  --ok:#55632F; --danger:#B42318; --brand:#55632F;
  --display:Unbounded,"Arial Black",system-ui,sans-serif;
  --body:Commissioner,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --pad:20px;
  --r:4px;
  --lift:3px 3px 0 var(--ink);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
  font:400 16px/1.5 var(--body);-webkit-font-smoothing:antialiased}
#app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.screen{flex:1;display:flex;flex-direction:column;padding:0 var(--pad) 32px}
.screen.wide{padding:0}
.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:12px;padding:40px 0}
.narrow{max-width:420px;margin:0 auto;width:100%}

h1{font:800 26px/1.08 var(--display);letter-spacing:-.025em;margin:10px 0 2px}
h2{font:800 17px/1.2 var(--display);letter-spacing:-.015em;margin:0 0 12px}
.lead{color:var(--ink-2);margin:0 0 18px;font-size:15.5px}
.hint{color:var(--muted);font-size:13.5px;margin:8px 0 0}
.hint.bad{color:var(--danger)}
.opt{color:var(--muted);font-weight:400;font-size:12.5px}

.mark{width:60px;height:60px;border-radius:var(--r);background:var(--brand);color:#fff;
  display:grid;place-items:center;font:700 20px/1 var(--display)}
/* Місце, де колись стояла кнопка-віджет Telegram. Віджета більше немає:
   підтвердження входу переїхало в чат з ботом (див. login.py). */

/* Кнопка на всю ширину — і для <button>, і для <a>: посилання в Telegram
   мусить виглядати й натискатись так само, як звичайна кнопка. */
.btn.wide{display:flex;width:100%;margin:8px 0;text-decoration:none}

/* Код для звірки. Він не секрет — він проти того, щоб людина підтвердила
   чужий вхід, тому мусить читатись з одного погляду. */
.codebox{width:100%;border:2px solid var(--ink);border-radius:var(--r);
  background:var(--surface);padding:14px 16px;margin:6px 0 10px;text-align:center}
.codelab{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.code{font:800 38px/1.1 var(--display);letter-spacing:.14em;
  font-variant-numeric:tabular-nums;margin-top:4px}
.tick{width:60px;height:60px;border-radius:50%;background:var(--ok);color:#fff;
  display:grid;place-items:center;font-size:30px;font-weight:700}
.tick.bad{background:var(--danger)}

.form{display:grid;gap:12px;text-align:left;width:100%}
.form label{display:grid;gap:6px;font-size:13.5px;color:var(--ink-2);font-weight:500}
input,select{width:100%;min-height:46px;border-radius:var(--r);border:2px solid var(--line-2);
  background:var(--surface);padding:0 13px;font:400 15.5px/1 var(--body);color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--acc-soft);border-color:var(--acc)}
.btn{min-height:48px;border-radius:var(--r);border:2px solid var(--ink);cursor:pointer;
  font:700 15px/1 var(--display);letter-spacing:-.01em;padding:0 18px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.primary{background:var(--acc);color:#FBF6EC;box-shadow:var(--lift)}
.btn.ghost{background:var(--surface);color:var(--ink)}
.btn:active{transform:translate(2px,2px)}
.btn.primary:active{box-shadow:1px 1px 0 var(--ink)}
/* Неактивна кнопка мусить виглядати неактивною. Досі в кабінеті вона
   лишалась яскравою: продавець тиснув «Надіслати», коли надсилати не було
   чого, і нічого не відбувалось — виглядало як поламане. */
.btn:disabled{background:var(--line-2);color:var(--muted);border-color:var(--line-2);
  cursor:default;opacity:1;box-shadow:none}
.btn:disabled:active{transform:none}
.ico{width:18px;height:18px;flex:none}
.linkbtn{background:none;border:0;color:var(--acc);font:600 14.5px/1 var(--body);
  cursor:pointer;padding:8px}
.row{display:flex;align-items:center;gap:12px}
.saved{color:var(--ok);font-size:13.5px;font-weight:600}

/* ── Шапка ─────────────────────────────────────────────── */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px var(--pad);background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5}
.who{display:flex;flex-direction:column;min-width:0}
/* Довга назва в шапці скорочується, а не розповзається на два рядки. */
.who b{font:700 16px/1.2 var(--display);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.slug{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.who{flex:1 1 auto}
.top-right{display:flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0}
.top-right .linkbtn{flex:none}
.trial{background:var(--acc-soft);color:var(--acc);border-radius:var(--r);
  padding:5px 11px;font-size:12.5px;font-weight:600;white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ── Дві колонки ───────────────────────────────────────── */
.cols{display:grid;gap:16px;padding:16px var(--pad) 40px;max-width:1120px;
  margin:0 auto;width:100%}
.col{display:grid;gap:16px;align-content:start}
.card{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);
  padding:18px;box-shadow:var(--lift)}
.addrow{grid-template-columns:1fr;gap:10px;margin-top:12px}

.links{display:grid;gap:8px}
.link{display:flex;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:var(--r);padding:10px 12px}
.link .t{font-weight:600;font-size:14px}
.link .u{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.link .grow{flex:1;min-width:0}
.link button{background:none;border:0;cursor:pointer;color:var(--muted);
  width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;flex:none}
.link button:hover{background:var(--acc-soft);color:var(--acc)}
.empty{color:var(--muted);font-size:14px;padding:10px 0}

/* ── Живий перегляд ────────────────────────────────────── */
.preview-card{position:sticky;top:78px}
.phone{border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;background:var(--bg);box-shadow:var(--lift)}
.p-cover{height:84px;background:var(--brand);position:relative}
.p-cover::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 11px,rgba(240,231,214,.16) 11px 12px)}
.p-cover.has-img::after{display:none}
.p-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.p-logo{position:absolute;left:16px;bottom:-22px;width:56px;height:56px;border-radius:var(--r);
  background:var(--surface);border:2px solid var(--ink);display:grid;place-items:center;overflow:hidden;
  color:var(--brand);z-index:1}
.p-logo::after{content:attr(data-letter);font:800 20px/1 var(--display)}
.p-logo.has-img::after{display:none}
.p-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-body{padding:32px 16px 18px}
.p-name{font:700 19px/1.2 var(--display)}
.p-about{color:var(--ink-2);font-size:13.5px;margin-top:3px}
.p-market{display:inline-block;background:var(--acc);color:#FBF6EC;
  border-radius:3px;padding:5px 10px;font-size:10.5px;font-weight:700;margin:10px 0 12px;
  letter-spacing:.09em;text-transform:uppercase}
.p-btn{background:var(--acc);color:#FBF6EC;border:2px solid var(--ink);border-radius:var(--r);min-height:44px;
  display:grid;place-items:center;font:700 14px/1 var(--display);letter-spacing:-.01em}
.p-follow{display:grid;gap:8px;margin-top:8px}
.p-follow div{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);
  min-height:42px;display:grid;place-items:center;font-weight:600;font-size:14px}

.spinner{width:32px;height:32px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--acc);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}.btn:active{transform:none}}

/* Планшет: поля й мережі стають в ряд, зʼявляється місце під перегляд */
@media (min-width:700px){
  .addrow{grid-template-columns:170px 1fr auto}
  .cols{padding:22px 28px 48px}
}
/* Ноутбук: перегляд стає поруч і лишається на екрані при прокрутці */
@media (min-width:1000px){
  .cols{grid-template-columns:1fr 360px;gap:22px}
}

/* ── Вкладки ──────────────────────────────────────────── */
/* Вкладок три, а телефон буває вузький: даємо їм прокрутку вбік,
   щоб «Бренд» не зʼїхав на другий рядок. */
.tabs{display:flex;gap:4px;padding:10px var(--pad) 0;max-width:1120px;margin:0 auto;
  width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{background:none;border:0;cursor:pointer;padding:10px 12px;border-radius:var(--r) 11px 0 0;
  font:600 14.5px/1 var(--body);color:var(--muted);white-space:nowrap;flex:none}
.tab.on{background:var(--surface);color:var(--ink);box-shadow:0 -1px 0 var(--line) inset}
.pane{display:block}
.cols.one{grid-template-columns:1fr;max-width:760px}

/* ── Картка маркету ───────────────────────────────────── */
.mk{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--lift);
  padding:18px;margin-bottom:14px}
.mk-top{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.mk-name{font:700 18px/1.2 var(--display)}
.mk-when{color:var(--muted);font-size:13.5px;margin-top:3px}
.badge{border-radius:var(--r);padding:5px 11px;font-size:12px;font-weight:600;white-space:nowrap}
.badge.current{background:var(--acc-soft);color:var(--acc)}
.badge.upcoming{background:#EAF3EE;color:var(--ok)}
.badge.past{background:#EEF0EA;color:var(--ink-2)}

.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:10px;margin:16px 0}
.num{background:var(--bg);border-radius:var(--r);padding:11px 12px}
.num b{display:block;font:700 22px/1.1 var(--display)}
.num span{color:var(--muted);font-size:12px}

.qrbox{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:16px}
.qrbox img{width:132px;height:132px;border-radius:var(--r);background:#fff;flex:none}
.qract{display:grid;gap:8px;flex:1;min-width:190px}
.qract .btn{justify-content:flex-start}
.qract .linkbtn{justify-self:start;padding-left:0}
.token{font-size:12.5px;color:var(--muted);letter-spacing:.6px}
.dates{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.empty-mk{color:var(--muted);font-size:14.5px;background:var(--surface);
  border:1px dashed var(--line-2);border-radius:var(--r);padding:22px;text-align:center;
  margin-bottom:14px}

/* ── Постійний код: куди він веде зараз ───────────────── */
.q-now{font-size:13.5px;margin:14px 0 0;color:var(--ink-2);
  background:var(--bg);border-radius:var(--r);padding:11px 13px}
.q-now.none{color:var(--muted)}
.q-now.current{background:var(--acc-soft);color:var(--acc);font-weight:500}

/* ── Дії в картці «мого» маркету ──────────────────────── */
.mk-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:14px}
.mk-act .token{margin-left:auto}

/* ── Довідник маркетів ────────────────────────────────── */
.searchbar{position:sticky;top:64px;z-index:4;background:var(--bg);
  padding:10px 0 12px;margin-top:2px}
.searchbar input{min-height:48px}
.catalog{display:grid;gap:10px}
.cat{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r)}
.cat.joined{border-color:var(--line-2);background:#FCFCFA}
.cat>summary{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;
  list-style:none}
.cat>summary::-webkit-details-marker{display:none}
.cat>summary::after{content:"";width:8px;height:8px;flex:none;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-left:2px}
.cat[open]>summary::after{transform:rotate(225deg)}
.cat>summary:hover{background:var(--bg);border-radius:var(--r)}
.grow{flex:1;min-width:0}
.cat-name{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.cat-when{color:var(--muted);font-size:12.5px;margin-top:2px}
.chip{background:var(--bg);color:var(--ink-2);border-radius:var(--r);padding:5px 10px;
  font-size:11.5px;font-weight:600;white-space:nowrap;flex:none}
.cat-body{padding:0 16px 16px;display:grid;gap:12px;border-top:1px solid var(--line);
  margin-top:2px;padding-top:14px}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.fact{background:var(--bg);border-radius:var(--r);padding:9px 11px;display:grid;gap:2px}
.fact span{color:var(--muted);font-size:11.5px}
.fact b{font-size:14px;font-weight:600}
.cat-body .btn{justify-self:start}

/* Схожі записи перед створенням — щоб не плодити дублі. */
.similar{background:#FFF8E6;border:1px solid #F0DFAE;border-radius:var(--r);padding:13px 14px;
  display:grid;gap:8px;font-size:13.5px;color:#6B5310}
.similar b{font:700 14.5px/1.25 var(--display)}
.similar .hint{margin:0;color:#8A6D1E}
.sim{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:8px 10px}
.sim .btn{min-height:38px;font-size:13.5px;padding:0 12px;flex:none}

@media (min-width:700px){
  .tabs{padding-left:28px;padding-right:28px}
  .qrbox img{width:160px;height:160px}
  .facts{grid-template-columns:repeat(4,1fr)}
}

/* ── Що є на заміну ───────────────────────────────────── */
.btn.file{display:inline-flex;cursor:pointer}
.btn.file input{position:absolute;width:0;height:0;opacity:0}
.stock-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sti{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column}
.sti img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--bg);display:block}
.sti-title{border:0;border-top:1px solid var(--line);border-radius:0;min-height:40px;
  font-size:14px}
.sti-title:focus{outline:2px solid var(--acc-soft);border-color:var(--acc)}
.sti-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:4px 10px 8px}
.sti-foot .hint{margin:0;font-size:11.5px}
.sti-foot .linkbtn{padding:4px 2px;font-size:13px}

/* ── Розбір речей ─────────────────────────────────────── */
.screen.sort{padding:0;background:var(--brand);color:#fff;
  height:100vh;height:100dvh;overflow:hidden}
.sort-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px var(--pad);flex:none}
.sort-top .linkbtn{color:#fff;opacity:.85}
.sort-count{font:600 14px/1 var(--body);opacity:.85}
.sort-body{flex:1;display:grid;place-items:center;padding:0 var(--pad);min-height:0;
  position:relative}
.sort-photo{max-width:100%;max-height:100%;border-radius:var(--r);object-fit:contain;
  background:#0d120f;touch-action:pan-y;transition:transform .12s ease,opacity .12s ease}
.sort-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font:700 34px/1 var(--display);padding:14px 26px;border-radius:var(--r);
  background:rgba(255,255,255,.94);color:var(--brand);pointer-events:none}
.sort-mark.available{background:#1F7A4A;color:#fff}
.sort-mark.gone{background:#B42318;color:#fff}
.sort-mark.alternative{background:#C2255C;color:#fff}
.sort-mark.unknown{background:#8A6D1E;color:#fff}
.sort-acts{display:grid;gap:10px;padding:14px var(--pad) calc(18px + env(safe-area-inset-bottom));
  flex:none}
.sort-acts .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sort-acts .hint{margin:0;text-align:center;color:rgba(255,255,255,.6)}
.btn.big{min-height:56px;font-size:17px;font-weight:700}
.btn.yes{background:#1F7A4A;color:#fff}
.btn.gone{background:#B42318;color:#fff}
.sort-acts .btn.ghost{background:rgba(255,255,255,.1);color:#fff;
  border-color:rgba(255,255,255,.25);font-size:14px;padding:0 10px;
  white-space:nowrap}
.sort-done{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:24px var(--pad);text-align:center}
.sort-done h2{color:#fff}
.sort-done .nums{width:100%;max-width:420px;grid-template-columns:repeat(4,1fr)}
.sort-done .num{background:rgba(255,255,255,.1)}
.sort-done .num span{color:rgba(255,255,255,.65)}
.sort-done .hint{color:rgba(255,255,255,.7)}
.sort-done .linkbtn{color:#fff}
.sort-done .tick{background:#1F7A4A}
.screen.sort .hint.bad{padding:0 var(--pad) 10px;color:#FFB4AC}

/* Вибір заміни */
.sheet{position:fixed;inset:0;background:rgba(21,26,23,.6);display:flex;
  align-items:flex-end;z-index:20}
.sheet-in{background:var(--surface);color:var(--ink);width:100%;
  border-radius:var(--r) 20px 0 0;padding:18px var(--pad) calc(20px + env(safe-area-inset-bottom));
  display:grid;gap:12px;max-height:85vh;overflow:auto}
.stock-grid.pick{grid-template-columns:repeat(3,1fr);gap:8px}
.pick-item{background:none;border:1px solid var(--line);border-radius:var(--r);padding:0;
  cursor:pointer;overflow:hidden;display:flex;flex-direction:column;text-align:left}
.pick-item img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.pick-item span{font-size:11.5px;padding:5px 6px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-item:hover{border-color:var(--acc)}

/* ── Розсилка ─────────────────────────────────────────── */
textarea{width:100%;border-radius:var(--r);border:2px solid var(--line-2);
  background:var(--surface);padding:11px 13px;font:400 15px/1.45 var(--body);
  color:var(--ink);resize:vertical}
textarea:focus{outline:2px solid var(--acc-soft);border-color:var(--acc)}
.wave{display:flex;align-items:baseline;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line)}
.wave:last-child{border-bottom:0}
.wave .hint{margin:0}

@media (min-width:700px){
  .stock-grid{grid-template-columns:repeat(3,1fr)}
  .stock-grid.pick{grid-template-columns:repeat(5,1fr)}
  .sheet{align-items:center;justify-content:center}
  .sheet-in{max-width:620px;border-radius:var(--r)}
  .sort-acts{max-width:620px;margin:0 auto;width:100%}
}
@media (min-width:1000px){
  .stock-grid{grid-template-columns:repeat(4,1fr)}
}

/* ── Вибір каналів для листа ──────────────────────────── */
.lbl{font-size:13.5px;color:var(--ink-2);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip-pick{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--r);padding:8px 14px;
  font-size:14px;font-weight:600;color:var(--ink-2);background:var(--surface);
  user-select:none}
.chip-pick input{width:16px;height:16px;min-height:0;margin:0;accent-color:var(--acc);
  flex:none}
.chip-pick.on{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}

/* ── Лист очима покупця ───────────────────────────────── */
.msg{background:#E8F3E4;border-radius:var(--r);padding:10px;display:grid;gap:8px;
  max-width:420px}
.msg-photo{height:120px;border-radius:var(--r);background:var(--line);
  display:grid;place-items:center;color:var(--muted);font-size:12.5px}
.msg-text{background:#fff;border-radius:var(--r);padding:10px 12px;font-size:14.5px;
  line-height:1.45;white-space:pre-wrap;word-break:break-word}
.msg-btn{background:#fff;border-radius:var(--r);min-height:40px;display:grid;
  place-items:center;font-size:14px;font-weight:600;color:#2C7BB6}
.msg-none{color:var(--danger);font-size:13px;font-weight:600;padding:2px 2px 4px}

/* ── Усі фото маркету ─────────────────────────────────── */
.phg{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin-bottom:14px}
.phg.small{border:0;background:none;padding:0;margin:14px 0 0}
.phg>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}
.phg>summary::-webkit-details-marker{display:none}
.phg>summary b{font:700 16px/1.2 var(--display)}
.phg.small>summary b{font-size:14px;font-family:var(--body);font-weight:600;
  color:var(--ink-2)}
.phg>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-left:auto}
.phg[open]>summary::after{transform:rotate(225deg)}
.phg-n{background:var(--bg);border-radius:var(--r);padding:3px 10px;font-size:12.5px;
  font-weight:600;color:var(--ink-2)}
.phg-body{padding-top:12px}
.phg-body .hint{margin:0}

.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ph-tile{position:relative;border:0;padding:0;background:var(--bg);cursor:pointer;
  border-radius:var(--r);overflow:hidden;aspect-ratio:1}
.ph-tile img{width:100%;height:100%;object-fit:cover;display:block}
.ph-tile:hover{outline:2px solid var(--acc);outline-offset:-2px}
.ph-tile.sent{opacity:.72}
.ph-badge{position:absolute;right:4px;bottom:4px;width:34px!important;height:34px!important;
  border-radius:7px;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.ph-sent{position:absolute;left:4px;top:4px;background:rgba(21,26,23,.72);color:#fff;
  border-radius:6px;padding:2px 6px;font-size:10px;font-weight:600}

.ph-big{width:100%;max-height:52vh;object-fit:contain;border-radius:var(--r);
  background:var(--bg)}
.ph-alt{display:flex;align-items:center;gap:10px;background:var(--bg);
  border-radius:var(--r);padding:8px 10px;font-size:13.5px;color:var(--ink-2)}
.ph-alt img{width:48px;height:48px;object-fit:cover;border-radius:var(--r);flex:none}
.ph-state{font-size:13.5px;font-weight:600;color:var(--ink-2);
  background:var(--bg);border-radius:var(--r);padding:9px 12px}
.ph-state.available{background:#EAF3EE;color:var(--ok)}
.ph-state.gone{background:#FDECEA;color:var(--danger)}
.ph-state.alternative{background:var(--acc-soft);color:var(--acc)}
.ph-state.unknown{background:#FFF8E6;color:#8A6D1E}
.ph-state.sent{background:#EEF0EA;color:var(--muted)}
.ph-acts{display:grid;gap:8px}
.ph-acts .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ph-acts .btn.big{min-height:48px;font-size:16px}
.ph-acts .btn.ghost{font-size:14px;padding:0 10px;white-space:nowrap}

@media (min-width:700px){
  .ph-grid{grid-template-columns:repeat(5,1fr);gap:8px}
}
@media (min-width:1000px){
  .ph-grid{grid-template-columns:repeat(7,1fr)}
}
.phg.none>summary b{color:var(--muted)}
.phg.none .phg-n{opacity:.6}

/* ── Обличчя бренду: обкладинка і лого ─────────────────── */
/* Обидві картинки показуємо в тій формі, в якій їх обріже сервер,
   щоб продавець одразу бачив результат, а не здогадувався про нього. */
.pics{display:grid;gap:14px;margin-top:12px}
.pic{display:grid;gap:8px}
.pic-box{background:var(--bg);border:2px dashed var(--line-2);border-radius:var(--r);
  position:relative;overflow:hidden;display:grid;place-items:center}
.pic-box.wide{aspect-ratio:1400/900}
.pic-box.square{width:108px;height:108px}
.pic-box.has-img{border-style:solid;border-color:var(--ink)}
.pic-box::after{content:"ще немає";color:var(--muted);font-size:13px}
.pic-box.has-img::after{display:none}
.pic-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pic-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pic-act .btn{min-height:42px;font-size:13.5px}
@media (min-width:700px){
  .pics{grid-template-columns:1fr 108px;align-items:start;gap:16px}
  .pic-act{flex-direction:column;align-items:stretch}
}

/* ═══ 0.17.0 — новий кабінет за погодженими мокапами ═══════════
   Вкладки: Код · Wish List's · Маркети · Заміна · Бренд.
   Екран «Речі» — чотири блоки, у кожного своя кнопка відправки.  */

/* ── Підвкладки «Не оброблені / Оброблені» ─────────────────── */
.subtabs{display:flex;gap:16px;margin:0 0 14px;border-bottom:1px solid var(--line)}
.subtab{background:none;border:0;padding:0 0 7px;cursor:pointer;
  font:600 14px/1 var(--body);color:var(--muted);border-bottom:2px solid transparent;
  margin-bottom:-1px}
.subtab.on{color:var(--ink);font-weight:700;border-bottom-color:var(--acc)}

/* ── Картка віш-листа ──────────────────────────────────────── */
.wl-card{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--lift);padding:16px;margin-bottom:14px;
  display:flex;flex-direction:column;gap:11px}
.wl-card.quiet{border:1px solid var(--line-2);box-shadow:none}
.wl-kicker{font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.wl-big{font:800 20px/1.2 var(--display);margin-top:2px}
.wl-big span{font:600 16px/1.2 var(--body);color:var(--ink-2)}
.wl-where{font-size:13px;color:var(--ink-2)}
.wl-state{border-radius:var(--r);padding:10px 12px;font-size:13.5px;line-height:1.4}
.wl-state.warn{background:var(--acc-soft);font-weight:700}
.wl-state.ok{background:#EFF0E6;color:var(--ok);font-weight:700}
.wl-state.calm{background:#F3EADF;color:var(--ink-2)}
.wl-sub{font-size:12.5px;color:var(--muted);margin-top:-4px}
.wl-act{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.wl-act .linkbtn{align-self:flex-start}

/* ── Блоки екрана «Речі» ───────────────────────────────────── */
.blk{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--lift);overflow:hidden;margin-bottom:14px}
.blk.quiet{border:1px solid var(--line-2);box-shadow:none}
.blk.check{border-color:var(--acc);box-shadow:none}
.blk-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;background:#EFF0E6;border-bottom:2px solid var(--ink)}
.blk.quiet .blk-head{background:#F3EADF;border-bottom:1px solid var(--line-2)}
.blk.check .blk-head{background:var(--acc-soft);border-bottom:2px solid var(--acc)}
.blk-head.warn .blk-right{color:var(--acc);font-weight:700}
.blk-title{font:700 15px/1.2 var(--display)}
.blk-right{font-size:11.5px;color:var(--muted)}
.blk-body{padding:12px;display:flex;flex-direction:column;gap:10px}
.blk-letter{font-size:12.5px;color:var(--ink-2);margin:0}
.blk-body .hint.dim{color:var(--muted);font-size:12px}

/* ── Рядок «перевірити наявність» ──────────────────────────── */
.chk-row{padding:11px 0;border-bottom:1px solid var(--line)}
.chk-row:last-of-type{border-bottom:0}
.chk-top{display:flex;gap:10px;align-items:center}
.chk-pic{width:52px;height:52px;border-radius:var(--r);object-fit:cover;
  border:1px solid var(--line-2);cursor:zoom-in;flex-shrink:0}
.chk-text{flex-grow:1;font-size:12.5px;color:var(--ink-2);line-height:1.35}
.chk-acts{display:flex;gap:6px;margin-top:8px}
.chk-acts .btn{flex:1 1 0;min-height:40px;padding:0 6px;font-size:12.5px}
.btn.small{min-height:40px;font-size:12.5px}
.btn.yes{background:var(--ok);color:var(--surface);border-color:var(--ink)}

/* ── Код на стенд окремою сторінкою ────────────────────────── */
.qrbox.big{justify-content:center}
.qrbox.big img{width:240px;height:240px}
@media (min-width:700px){ .qrbox.big img{width:300px;height:300px} }