/* FITMENT Деньги — тёмная тема в духе банковского приложения.
   Одна тема намеренно: приложение открывается десятки раз в день, и вечером
   светлый экран бьёт по глазам. Поэтому все цвета заданы явно. */
:root{
  --bg:#0A0C0F;
  --surface:#14181E;
  --raise:#1C222A;
  --line:#262E37;
  --ink:#F2F5F8;
  --body:#C3CAD3;
  --muted:#87919C;
  --dim:#5D6874;

  --accent:#FF7A2F;        /* оранжевый FITMENT */
  --accent-dim:#3A2113;
  --in:#3DD68C;            /* пришло */
  --in-dim:#10291F;
  --cny:#7C8CFF;           /* юани */
  --cny-dim:#1A1E3A;
  --bad:#FF6B5A;

  --f:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  --nav-h:74px;
  --r:16px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--body);font-family:var(--f);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button,input{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
/* iOS иначе принимает быстрый двойной тап по цифре за жест «приблизить» */
button,a,input,.op,.card,.keys,#sheet,nav{touch-action:manipulation}
button{-webkit-user-select:none;user-select:none}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.app{max-width:520px;margin-inline:auto;padding-left:16px;padding-right:16px;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px)}

/* ------------------------------------------------------------- вход */
#gate{max-width:320px;margin:0 auto;padding:18vh 20px 40px;text-align:center}
#gate .logo{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:8px}
#gate h1{font-size:1.6rem;color:var(--ink);margin:0 0 6px;font-weight:700;letter-spacing:-.02em}
#gate p{font-size:.92rem;color:var(--muted);margin:0 0 24px}
#pin{width:100%;padding:18px;font-size:1.8rem;font-weight:700;text-align:center;letter-spacing:.4em;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--ink)}
#gateErr{color:var(--bad);font-size:.86rem;min-height:1.4em;margin:12px 0}

/* ------------------------------------------------------------- топбар */
.top{position:sticky;top:0;z-index:20;background:var(--bg);
  padding:calc(env(safe-area-inset-top) + 14px) 0 12px;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  font-weight:700;padding:6px 2px;margin:-6px -2px}
.brand span{color:var(--dim);letter-spacing:.12em}
.top-r{display:flex;align-items:center;gap:8px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--dim);flex:none;margin-right:2px}
.dot.ok{background:var(--in)} .dot.wait{background:var(--accent)} .dot.off{background:var(--dim)}
.ico{width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:12px;background:var(--surface);color:var(--muted)}
.ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.ico.sm{width:34px;height:34px;border-radius:10px}
.ico:active{background:var(--raise)}

/* ------------------------------------------------------------- общее */
.view{display:none;padding-top:6px} .view.on{display:block}
.card{background:var(--surface);border-radius:var(--r);width:100%}
.pad{padding:16px}
.sec{display:flex;align-items:baseline;justify-content:space-between;
  margin:26px 2px 10px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);font-weight:600}
.lnk{color:var(--accent);font-size:.84rem;font-weight:600;text-transform:none;letter-spacing:0}
.lnk.back{display:block;margin:4px 0 8px;color:var(--muted)}
.note{font-size:.82rem;color:var(--muted);line-height:1.5;margin:10px 4px 0}
.note b{color:var(--body);font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;
  border-radius:14px;font-weight:600;background:var(--raise);color:var(--ink);padding:14px 18px}
.btn.primary{width:100%;background:var(--accent);color:#120B05;font-size:1.04rem;font-weight:700;padding:17px}
.btn.primary:disabled{background:var(--raise);color:var(--dim)}
.btn.sm{padding:10px 14px;font-size:.86rem;border-radius:11px;background:var(--accent);color:#120B05}
.btn.sm.ghost{background:var(--raise);color:var(--body);text-decoration:none}
.btn.sm.danger{background:var(--raise);color:var(--bad)}
.btn.armed{background:var(--bad);color:#1A0705}
/* Архив собран и ждёт второго касания — зелёным, это не опасное действие. */
.btn.rdy{background:var(--in);color:#04170E;font-weight:700}

/* ------------------------------------------------------ хаб модулей */
.mods{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:4px}
.mod{text-align:left;background:var(--surface);border-radius:var(--r);
  padding:16px 15px 15px;border:1px solid transparent;min-height:118px;
  display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.mod:active{background:var(--raise)}
.mod .mi{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;background:var(--raise);color:var(--dim)}
.mod .mi svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.mod strong{display:block;color:var(--ink);font-size:1rem;font-weight:600;letter-spacing:-.01em}
.mod small{display:block;color:var(--dim);font-size:.78rem;line-height:1.35;margin-top:3px}
.mod.live{border-color:var(--accent-dim);grid-column:1/-1;min-height:0;
  flex-direction:row;align-items:center}
.mod.live .mi{background:var(--accent-dim);color:var(--accent);flex:none}
.mod.live .mb{flex:1;min-width:0}
.mod.live small{color:var(--muted)}
.mod.live .go{flex:none;color:var(--accent);font-size:1.2rem;font-weight:700}
.mod .chip{display:inline-block;margin-top:8px;padding:3px 8px;border-radius:7px;
  background:var(--raise);color:var(--dim);font-size:.68rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}

.soonh h2{margin:10px 0 6px;font-size:1.35rem;color:var(--ink);font-weight:700;letter-spacing:-.02em}
.soonh p{margin:0;font-size:.92rem;color:var(--body);line-height:1.5}
.soonh .chip{display:inline-block;padding:4px 9px;border-radius:8px;background:var(--accent-dim);
  color:var(--accent);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.plan{margin:0;padding-left:20px;color:var(--body);font-size:.92rem;line-height:1.5}
.plan li{padding:6px 0}
.plan li b{color:var(--ink);font-weight:600}

/* ------------------------------------------------------ карточка месяца */
.month{padding:20px 18px 16px}
.mhead{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);font-weight:600}
.min{margin-top:10px}
.min i{display:block;font-style:normal;font-size:.82rem;color:var(--muted)}
.min b{display:block;font-size:2.3rem;font-weight:700;color:var(--in);line-height:1.15;letter-spacing:-.03em}
.mout{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--line)}
.mo i{display:block;font-style:normal;font-size:.8rem;color:var(--muted)}
.mo b{display:block;font-size:1.32rem;font-weight:700;color:var(--ink);margin-top:2px}
.mo s{display:block;text-decoration:none;font-size:.76rem;color:var(--dim);margin-top:1px}
.mo.cny b{color:var(--cny)}
.mtotal{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-size:.86rem;color:var(--muted);display:flex;justify-content:space-between;align-items:baseline}
.mtotal b{color:var(--body);font-weight:600}

/* ------------------------------------------------------ кошелёк */
.wallet.cards{border-color:var(--line)}
.wallet.cards .wl b{color:var(--ink)}
.wallet.cards .wgo{background:var(--raise);color:var(--body)}
.wallet.due{border-color:var(--accent)}
.wallet.cards.due{border-color:var(--accent)}
.wallet.cards.due .wgo{background:var(--accent-dim);color:var(--accent)}
.wl s.gap{color:var(--bad)}
.wallet{display:flex;align-items:center;justify-content:space-between;gap:14px;
  text-align:left;padding:16px 18px;margin-top:10px;border:1px solid var(--cny-dim)}
.wallet:active{background:var(--raise)}
.wl i{display:block;font-style:normal;font-size:.8rem;color:var(--muted)}
.wl b{display:block;font-size:1.5rem;font-weight:700;color:var(--cny);margin-top:2px}
.wl s{display:block;text-decoration:none;font-size:.78rem;color:var(--dim);margin-top:2px}
.wgo{flex:none;background:var(--cny-dim);color:var(--cny);font-size:.84rem;font-weight:600;
  padding:10px 14px;border-radius:11px}

/* ------------------------------------------------------ серия дней */
.streak{margin-top:10px;padding:12px 16px;background:var(--surface);border-radius:12px;
  font-size:.86rem;color:var(--muted);display:flex;justify-content:space-between;align-items:baseline}
.streak b{color:var(--accent);font-weight:700}

/* ------------------------------------------------------ лента */
.day{margin:18px 4px 8px;font-size:.78rem;color:var(--dim);font-weight:600;
  display:flex;justify-content:space-between;align-items:baseline}
.op{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:13px 14px;background:var(--surface);border-radius:13px;margin-bottom:6px}
.op:active{background:var(--raise)}
.op-i{width:38px;height:38px;flex:none;border-radius:11px;display:flex;align-items:center;
  justify-content:center;font-size:1.05rem;font-weight:700;background:var(--raise);color:var(--muted)}
.op-i.in{background:var(--in-dim);color:var(--in)}
.op-i.ex{background:var(--cny-dim);color:var(--cny)}
.op-i.out{background:var(--accent-dim);color:var(--accent)}
.op-b{flex:1;min-width:0}
.op-t{color:var(--ink);font-weight:500;font-size:.96rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-s{font-size:.78rem;color:var(--dim);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-v{font-weight:700;font-size:1rem;white-space:nowrap;color:var(--ink);text-align:right}
.op-v.in{color:var(--in)}
.op-v.cny{color:var(--cny)}
.op-v s{display:block;text-decoration:none;font-size:.74rem;color:var(--dim);font-weight:500}
.empty{text-align:center;padding:44px 20px;color:var(--dim);font-size:.9rem}
.empty b{display:block;color:var(--muted);font-size:1rem;margin-bottom:6px;font-weight:600}

/* раскрытая операция */
/* запись, у которой категория не разобрана */
.op.rev .op-i{box-shadow:inset 0 0 0 1.5px var(--accent)}
.op.rev .op-s{color:var(--accent)}

.opx{display:flex;gap:8px;margin:0 0 8px}
.opx button{flex:1;padding:12px;border-radius:11px;background:var(--raise);
  font-size:.85rem;font-weight:600;color:var(--body)}
.opx button.danger{color:var(--bad)}

/* ------------------------------------------------------ аналитика */
.mnav{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 0 14px}
.mnav b{font-size:1.1rem;color:var(--ink);font-weight:700}
.line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:11px 0;border-top:1px solid var(--line);font-size:.94rem}
.line:first-child{border-top:0}
.line > div:first-child{min-width:0}
.line b{color:var(--body);font-weight:500}
.line small{display:block;font-size:.74rem;color:var(--dim)}
.line .v{font-weight:700;color:var(--ink);white-space:nowrap;flex:none}
.line .v.up{color:var(--bad)} .line .v.down{color:var(--in)}
.bar{height:4px;border-radius:2px;background:var(--raise);margin-top:7px;overflow:hidden}
.bar > i{display:block;height:100%;border-radius:2px;background:var(--accent)}
.bar.cny > i{background:var(--cny)}
#anIn .bar > i{background:var(--in)}
.spark{width:100%;height:64px;display:block;margin:4px 0 10px}

/* ------------------------------------------------------ настройки */
.row{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:14px 16px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row b{font-weight:500;color:var(--ink);font-size:.94rem;display:block}
.row small{display:block;color:var(--dim);font-size:.78rem}
.fld{width:120px;padding:11px 12px;text-align:right;background:var(--raise);
  border:0;border-radius:11px;color:var(--ink);font-weight:600}

/* ------------------------------------------------------ кнопки ввода */
nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bg);
  padding:8px 16px calc(env(safe-area-inset-bottom) + 10px);
  border-top:1px solid var(--line)}
.nav-in{max-width:520px;margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.act{display:flex;align-items:center;justify-content:center;gap:7px;height:52px;
  border-radius:14px;font-size:.96rem;font-weight:700;background:var(--surface);color:var(--ink)}
.act .sgn{font-size:1.1rem;font-weight:700}
.act.in{color:var(--in)} .act.in:active{background:var(--in-dim)}
.act.out .sgn{color:var(--accent)} .act.out:active{background:var(--raise)}
.act.ex{color:var(--cny)} .act.ex:active{background:var(--cny-dim)}

/* ------------------------------------------------------ панель ввода */
#scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.6);
  animation:fade .18s ease-out}
#sheet{position:fixed;left:0;right:0;bottom:0;z-index:50;
  max-width:520px;margin-inline:auto;background:var(--surface);
  border-radius:22px 22px 0 0;padding:10px 16px calc(env(safe-area-inset-bottom) + 14px);
  animation:up .22s cubic-bezier(.2,.9,.3,1);max-height:94vh;overflow-y:auto}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){#sheet,#scrim{animation:none}}

.sh-head{display:flex;align-items:center;gap:10px;padding:4px 0 10px}
.sh-head b{flex:1;text-align:center;font-size:1rem;color:var(--ink);font-weight:600}
.sh-head .ico{background:var(--raise)}
.sh-head .ico[hidden] + b{margin-left:34px}

.disp{padding:8px 0 14px;text-align:center}
.disp-v{display:flex;align-items:baseline;justify-content:center;gap:6px}
.disp-v span{font-size:2.9rem;font-weight:700;color:var(--ink);letter-spacing:-.035em;line-height:1.1}
.disp-v em{font-style:normal;font-size:1.5rem;font-weight:600;color:var(--dim)}
.disp-sub{margin-top:6px;font-size:.86rem;color:var(--muted);min-height:1.3em}
.disp-sub.cny{color:var(--cny)}
.curseg{display:inline-flex;gap:4px;margin-top:12px;padding:4px;background:var(--raise);border-radius:12px}
.curseg button{width:56px;height:36px;border-radius:9px;font-size:1.05rem;font-weight:700;color:var(--muted)}
.curseg.wide button{width:auto;padding:0 20px;font-size:.92rem;font-weight:600}
.curseg button.on{background:var(--surface);color:var(--ink)}

.quick{display:flex;gap:7px;overflow-x:auto;padding:0 0 12px;scrollbar-width:none}
.quick::-webkit-scrollbar{display:none}
.quick button{flex:none;padding:9px 13px;border-radius:11px;background:var(--raise);
  font-size:.85rem;font-weight:600;color:var(--body);white-space:nowrap}

.picks{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-bottom:6px}
.picks button{padding:17px 14px;border-radius:14px;background:var(--raise);
  font-size:.96rem;font-weight:600;color:var(--ink);text-align:left;line-height:1.25}
.picks button:active{background:var(--line)}
.picks button small{display:block;font-size:.76rem;color:var(--dim);font-weight:400;margin-top:2px}
.picks.one{grid-template-columns:1fr}
.picks button.accent{background:var(--raise);color:var(--ink)}
.picks button.cnyb{background:var(--cny-dim);color:var(--cny)}
.picks button.inb{background:var(--in-dim);color:var(--in)}
.picks button.sug{box-shadow:inset 0 0 0 1.5px var(--accent)}
.picks button.sug small{color:var(--accent)}
.picks button.add{background:transparent;border:1px dashed var(--line-strong,#39424C);color:var(--body)}
.picks button.wide{grid-column:1/-1;text-align:center;padding:19px 14px;font-size:1rem}

.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:4px 0 14px}
.keys button{height:58px;border-radius:14px;background:var(--raise);
  font-size:1.5rem;font-weight:600;color:var(--ink);display:flex;align-items:center;justify-content:center}
.keys button:active{background:var(--line)}
.keys button.del svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* поле комментария в панели ввода */
.noteline{padding:0 0 12px}
.noteinp{width:100%;padding:14px;background:var(--raise);border:0;border-radius:12px;
  color:var(--ink);font-size:.95rem}
.noteinp::placeholder{color:var(--dim)}

/* ------------------------------------------------------ тост */
#toast{position:fixed;left:50%;transform:translateX(-50%) translateY(16px);
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px);z-index:60;
  width:min(92vw,430px);background:var(--raise);color:var(--ink);
  padding:13px 14px;border-radius:14px;font-size:.88rem;font-weight:600;opacity:0;
  pointer-events:none;transition:opacity .18s,transform .18s;
  display:flex;align-items:center;gap:10px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
#toastTxt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#toastBtn{flex:none;padding:7px 11px;border-radius:10px;background:var(--surface);
  color:var(--accent);font-size:.82rem;font-weight:700}
@media (prefers-reduced-motion:reduce){#toast{transition:none}}

/* ------------------------------------------------ экран сертификата */
.photobox{display:flex;align-items:center;justify-content:center;min-height:190px;
  background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);
  margin-bottom:14px;overflow:hidden;cursor:pointer;position:relative}
.photobox span{color:var(--muted);font-size:.95rem;text-align:center;padding:0 20px}
.photobox span small{display:block;color:var(--dim);font-size:.8rem;margin-top:5px}
.photobox img{width:100%;max-height:320px;object-fit:contain;display:block}
/* Сам input лежит прозрачным слоем поверх рамки: так выбор файла открывается
   одним нативным нажатием. Через label + click() Safari на айфоне закрывал
   диалог, потому что событие приходило дважды. */
.photobox input[type=file]{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;font-size:0}
.row2{display:flex;gap:8px}
.row2 .noteinp{flex:1}
.row2 .btn{flex:none;align-self:stretch}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 label{display:block;font-size:.78rem;color:var(--muted)}
.grid2 label .noteinp{margin-top:5px}
.grid2 label.wide2{grid-column:1/-1}
.certimg{width:100%;border-radius:10px;display:block}
.btn.wide{width:100%;margin-bottom:14px}

.btn.ok{background:var(--in);color:#06210f;font-weight:700}
.btn.ok:active{filter:brightness(.92)}
.btn.ok[disabled]{opacity:.6}
.quick button.on{background:var(--accent-dim);color:var(--accent);font-weight:600}
.opx button.ok{background:var(--in-dim);color:var(--in)}
#v-arch .op-i{font-size:1rem}
.photos{display:flex;gap:8px;overflow-x:auto;margin-top:12px;padding-bottom:2px}
.photos a{flex:none;width:88px;height:88px;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);display:block}
.photos a.ttn{border-color:var(--accent)}
.photos img{width:100%;height:100%;object-fit:cover;display:block}
.tabs{display:flex;gap:8px;margin:12px 0 14px}
.tabs button{flex:1;padding:11px;border:0;border-radius:11px;background:var(--raise);
  color:var(--muted);font:inherit;font-size:.9rem}
.tabs button.on{background:var(--accent-dim);color:var(--accent);font-weight:600}
.op.late .op-i{box-shadow:inset 0 0 0 1.5px var(--bad)}
.op.late .op-s{color:var(--bad)}
textarea.noteinp{resize:vertical;min-height:96px;line-height:1.45;font-family:var(--f)}
.recv{white-space:pre-wrap}
.addph{position:relative}
.addph .btn{width:100%}
.addph input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:0}
.photos .ph{position:relative;flex:none}
.photos .ph a{display:block}
.ph-x{position:absolute;top:4px;right:4px;width:24px;height:24px;border:0;border-radius:50%;
  background:rgba(10,12,15,.78);color:#fff;font-size:.8rem;line-height:1;padding:0;
  display:flex;align-items:center;justify-content:center}
.ph-x.armed{background:var(--bad);font-weight:700}

/* Номер отправки в списке у хозяина — тем же цветом, что у работника */
#v-ships .op-i{background:var(--cny-dim);color:var(--cny);font-weight:700}
#v-ships .op{margin-bottom:10px}

/* Выгрузка снимков: не кнопка действия, а спокойная полоса под списком —
   пользуются ей редко, но когда транспортная теряет груз, нужна сразу. */
.dlbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.dlbar:empty{display:none}
.dl-h{flex-basis:100%;font-size:.78rem;color:var(--muted)}
/* Получатель в закрытой отправке: переносы строк из заявки сохраняем,
   там обычно ФИО, город и телефон каждый со своей строки. */
.recv-r{margin-bottom:6px;font-size:.95rem;line-height:1.4;white-space:pre-line}
.dlbar a{text-decoration:none}

/* Строка про копию на Диск: в норме незаметна, при поломке — кричит. */
.drv{margin-top:10px;font-size:.78rem;color:var(--muted)}
.drv:empty{display:none}
.drv.bad{color:var(--bad);font-weight:600}

/* К оплате — первый блок на экране денег. Крупная цифра как у месячных
   сумм, но своя, тревожная линия сверху: это ещё не потраченное, а
   обещанное, и путать эти две вещи нельзя. */
.card.due{padding:18px 16px 14px}
.due-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.due-h i{font-style:normal;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted)}
.due-h small{font-size:.78rem;color:var(--muted)}
.due-n{display:block;font-size:2.5rem;line-height:1.1;margin-top:6px;letter-spacing:-.02em}
.due-cny{font-size:.82rem;color:var(--cny);margin-top:4px}
.due-cny:empty{display:none}
.card.due #dueList{margin-top:14px}
.card.due #dueList:empty{display:none}
.card.due .op{margin-bottom:8px}
.card.due .op-i.cny{background:var(--cny-dim);color:var(--cny)}
.btn.due-add{margin-top:12px;background:var(--raise);color:var(--ink);font-weight:600}
.btn.due-pay{background:var(--in);color:#08160E;font-weight:700}

/* Блок оплат отделяем от месяца заметнее: это разные вещи — обещанное
   и потраченное, и слипшимися они читаются как одно целое. */
.card.due{margin-bottom:26px}
.picks button.on{background:var(--accent-dim);color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent)}

/* Плитка-календарь. Поле даты лежит прозрачным слоем поверх кнопки:
   так на айфоне открывается родное колесо, а выглядит всё как остальные
   плитки — без чужеродного системного элемента в списке. */
.picks .pickdate{position:relative;display:grid}
.picks .pickdate button{width:100%}
.picks .pickdate input{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;border:0;background:none;-webkit-appearance:none;appearance:none}

/* Возврат в очередь: действие редкое и обратимое, поэтому спокойный вид,
   а подтверждение — красное, чтобы не нажать мимо. */
.btn.back-q{background:var(--raise);color:var(--ink);font-weight:600}
.btn.back-q.armed{background:var(--bad);color:#fff;font-weight:700}

/* 10.10: шапка-счётчик (закуп) — те же стили, что у очереди работника */
.hero{display:flex;align-items:center;gap:16px;padding:18px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);margin-bottom:14px}
.hero-n{font-size:3rem;line-height:1;font-weight:800;color:var(--accent);min-width:46px;text-align:center}
.hero-t b{display:block;font-size:1.05rem;color:var(--ink)}
.hero-t small{display:block;font-size:.85rem;color:var(--muted);margin-top:3px}
.hero.late{border-color:var(--bad);background:#1A1113}
.hero.late .hero-n{color:var(--bad)}
.hero.late .hero-t small{color:var(--bad);font-weight:600}
.hero.ok .hero-n{color:var(--in)}

/* 10.10: карточка закупа */
.zk{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px;
  margin-bottom:10px;cursor:pointer}
.zk:active{background:var(--raise)}
.zk.hot{border-color:var(--bad)}
.zk.done{opacity:.75}
.zk-th{width:100px;height:100px;flex:none;border-radius:12px;background:var(--raise) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:1.6rem}
/* у сертификата фото диска — на левой странице разворота */
.zk-th.cert{background-size:210% auto;background-position:14% 52%}
.zk-b{flex:1;min-width:0}
.zk-art{font-size:1rem;font-weight:800;color:#5CC8FF;letter-spacing:.02em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.zk-qty{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:8px;background:var(--accent-dim);
  color:var(--accent);font-size:.82rem;font-weight:700;vertical-align:2px}
.zk-l2{font-size:.9rem;color:var(--ink);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zk-l3{font-size:.8rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zk-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.zk-pill{padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:700;white-space:nowrap}
.zk-pill.hot{background:#3A1614;color:var(--bad)}
.zk-pill.mid{background:#3A3010;color:#FFC94D}
.zk-pill.ok{background:var(--in-dim);color:var(--in)}
.zk-age{font-size:.74rem;color:var(--dim);white-space:nowrap}
.zk-open .zk{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.zk-open .card{border-top-left-radius:0;border-top-right-radius:0;margin-bottom:10px}
.zk-add{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.zk-add .quick{margin-top:8px}
/* 10.10: строки «название — значение» в раскрытых карточках */
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:.92rem;color:var(--muted)}
.kv:last-child{border-bottom:0}
.kv b{color:var(--ink);font-weight:600;text-align:right;word-break:break-word}

/* 10.10: тумблер «Через Авито» */
.tgl{display:flex;align-items:center;gap:12px;cursor:pointer;-webkit-user-select:none;user-select:none}
.tgl input{position:absolute;opacity:0;width:0;height:0}
.tgl-ui{flex:none;width:50px;height:30px;border-radius:15px;background:var(--raise);position:relative;
  transition:background .2s;box-shadow:inset 0 0 0 1px var(--line)}
.tgl-ui::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;transition:transform .2s}
.tgl input:checked + .tgl-ui{background:#00AAFF}
.tgl input:checked + .tgl-ui::after{transform:translateX(20px)}
.tgl-t{font-size:.95rem;color:var(--ink);font-weight:600}
.tgl-t small{display:block;font-size:.76rem;color:var(--muted);font-weight:400;margin-top:2px}

/* 12.10: продажа в таблицу — крупное поле цены и прибыль сразу */
.sale-l{font-size:.8rem;color:var(--muted);margin-bottom:8px}
.sale-in{display:flex;align-items:baseline;gap:8px;background:var(--raise);border-radius:14px;padding:14px 18px}
.sale-in input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font:inherit;
  font-size:2rem;font-weight:800;letter-spacing:.01em}
.sale-in input::placeholder{color:var(--dim)}
.sale-in span{font-size:1.5rem;font-weight:700;color:var(--muted)}
.sale-kpi{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}
.sale-kpi div{background:var(--raise);border-radius:12px;padding:10px 8px 11px;min-width:0}
.sale-kpi small{display:block;font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.sale-kpi b{display:block;font-size:1rem;color:var(--ink);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sale-kpi b.good{color:var(--in)}
.sale-kpi b.mid{color:#FFC94D}
.sale-kpi b.bad{color:var(--bad)}

/* 12.10: количество в закупе */
.zk-step{display:flex;align-items:center;gap:14px;margin-top:4px}
.zk-step b{min-width:64px;text-align:center;color:var(--ink);font-size:1.05rem}
.zk-sb{width:44px;height:40px;border:0;border-radius:11px;background:var(--raise);color:var(--ink);font-size:1.4rem;font-weight:700}

/* 12.10: просмотр фото на весь экран */
.pv{position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.pv img{max-width:100%;max-height:100%;object-fit:contain}
.pv-x{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:14px;width:44px;height:44px;border:0;border-radius:22px;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.2rem}

/* 12.10: закуп из проданных */
.sold-bar{margin-bottom:10px}
.sold-th{display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--dim)}
.sold-th img{width:100%;height:100%;object-fit:cover;display:block}
.sold-big{border-radius:12px;overflow:hidden;background:var(--raise);min-height:120px;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:2rem}
.sold-big img{width:100%;display:block}
#zakupTabs button{font-size:.86rem;padding:11px 6px}

/* 12.10: таблица для поставщика */
.xl-btn{background:var(--raise);color:var(--ink);margin:2px 0 4px}
.xl-ov{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.7);display:flex;align-items:flex-end;justify-content:center}
.xl-box{width:100%;max-width:560px;max-height:92vh;background:var(--bg);border-radius:18px 18px 0 0;display:flex;flex-direction:column;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
.xl-hd{display:flex;align-items:flex-start;gap:10px}
.xl-hd > div{flex:1;min-width:0}
.xl-hd b{display:block;font-size:1.3rem;color:var(--ink)}
.xl-hd small{display:block;font-size:.82rem;color:var(--muted);margin-top:3px}
.xl-x{position:static;flex:none}
.xl-list{overflow-y:auto;margin:8px 0;-webkit-overflow-scrolling:touch}
.xl-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;color:inherit;background:var(--surface);
  border:1.5px solid transparent;border-radius:14px;padding:8px;margin-bottom:7px;opacity:.55}
.xl-row.on{opacity:1;border-color:var(--in)}
.xl-chk{width:28px;height:28px;flex:none;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#06210f}
.xl-row.on .xl-chk{background:var(--in);border-color:var(--in)}
.xl-th{width:84px;height:84px;flex:none;border-radius:10px;overflow:hidden;background:var(--raise);display:flex;align-items:center;justify-content:center;color:var(--dim)}
.xl-th img{width:100%;height:100%;object-fit:cover}
.xl-b{flex:1;min-width:0}
.xl-b b{display:block;color:#5CC8FF;font-size:1.08rem}
.xl-b span{display:block;font-size:.92rem;color:var(--ink);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xl-b small{display:block;font-size:.85rem;color:var(--muted);margin-top:2px}
.xl-ft .btn{margin-bottom:8px;text-decoration:none}

/* 12.10: картинки-элементы вместо фона — не мигают при перерисовке */
.zk-th{overflow:hidden;display:flex;align-items:center;justify-content:center}
.zk-th img{width:100%;height:100%;object-fit:cover;display:block}

.certimg[data-none]{display:none}

/* 12.10: итог выбора в таблице для поставщика — одна строка крупных плиток */
.xl-kpi{display:grid;grid-template-columns:.8fr 1fr 1.2fr;gap:6px;margin:10px 0 8px}
.xl-t{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 10px;min-width:0}
.xl-t b{display:block;font-size:1.2rem;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xl-t span{display:block;font-size:.74rem;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xl-t.sum b{color:var(--accent)}
.xl-all{width:100%;background:var(--raise);color:var(--ink);font-size:1rem;padding:11px;margin:2px 0 4px}

/* 12.10: «когда-нибудь» и ручной порядок закупа */
.zk-pill.later{background:var(--raise);color:var(--muted)}
.zk-ordbtn{background:var(--raise);color:var(--ink);margin:0 0 10px;font-size:1rem;padding:12px}
.zk-ordbtn.on{background:var(--in);color:#06210f}
.zk-ord{cursor:default}
.zk-ord .zk-th{width:64px;height:64px}
.zk-arr{display:flex;gap:8px;flex:none}
.zk-ab{width:52px;height:52px;border-radius:14px;border:0;background:var(--raise);color:var(--ink);font-size:1.5rem;font-weight:800}
.zk-ab:active{background:var(--accent);color:#111}
.zk-ab[disabled]{opacity:.2}

/* 12.10: сертификат в карточке отправки */
.ship-cert{margin:0 0 14px;display:flex;flex-direction:column;gap:8px}
.ship-cert img{width:100%;border-radius:12px;background:var(--raise);min-height:120px;object-fit:contain}
.ship-cert .btn{align-self:flex-start;text-decoration:none}