/* ArzonKassa — design system */
:root{
  --brand:#4F46E5; --brand-2:#6366F1; --brand-soft:#EEF2FF;
  --mint:#10B981; --success:#10B981; --danger:#EF4444; --warn:#F59E0B;
  --bg:#F5F6FA; --surface:#FFFFFF; --surface-2:#FAFAFC;
  --text:#0F172A; --muted:#64748B; --border:#E6E8F0;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 4px 16px rgba(15,23,42,.08);
  --shadow-lg:0 12px 40px rgba(15,23,42,.14);
  --r:16px; --r-lg:22px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
html[data-theme="dark"]{
  --brand:#818CF8; --brand-2:#6366F1; --brand-soft:#1E1B4B;
  --bg:#0B0F19; --surface:#151A28; --surface-2:#1B2133;
  --text:#F1F5F9; --muted:#94A3B8; --border:#252C3F;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 4px 16px rgba(0,0,0,.45);
  --shadow-lg:0 12px 40px rgba(0,0,0,.6);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,sans-serif;
  background:var(--bg); color:var(--text); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
input,button,select,textarea{font-family:inherit;font-size:16px}
.muted{color:var(--muted)}
.center{text-align:center}
.hidden{display:none !important}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 20px;border-radius:14px;border:none;cursor:pointer;
  font-weight:600;font-size:16px;transition:transform .12s,box-shadow .2s,background .2s;
  background:var(--surface-2);color:var(--text);
}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 6px 18px rgba(79,70,229,.3)}
.btn-success{background:var(--success);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-ghost{background:transparent;border:1.5px solid var(--border);color:var(--text)}
.btn-block{display:flex;width:100%}
.btn-sm{padding:9px 14px;font-size:14px;border-radius:11px}
.btn:disabled{opacity:.5;pointer-events:none}

/* ---------- Cards / forms ---------- */
.card{background:var(--surface);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.field{margin-bottom:14px}
.label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:7px}
.input{
  width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text);outline:none;transition:border .18s,box-shadow .18s;
}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(79,70,229,.12)}
.phone-wrap{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden;transition:border .18s,box-shadow .18s}
.phone-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(79,70,229,.12)}
.phone-prefix{padding:14px 8px 14px 16px;font-weight:600;color:var(--muted);user-select:none}
.phone-wrap .input{border:none;box-shadow:none;padding-left:4px}
.phone-wrap .input:focus{box-shadow:none}

.alert{padding:13px 16px;border-radius:13px;font-size:14.5px;margin-bottom:14px}
.alert-err{background:rgba(239,68,68,.1);color:var(--danger)}
.alert-ok{background:rgba(16,185,129,.12);color:var(--success)}

/* ---------- Layout ---------- */
.app{max-width:720px;margin:0 auto;padding-bottom:calc(78px + var(--safe-b))}
.topbar{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 85%,transparent);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--border);padding:calc(12px + var(--safe-t)) 16px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.topbar h1{font-size:20px}
.screen{padding:16px;display:none}
.screen.active{display:block;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Tabbar ---------- */
.tabbar{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--border);
  display:flex;padding:8px 4px calc(8px + var(--safe-b));
  max-width:720px;margin:0 auto;
}
.tab{
  flex:1;background:none;border:none;padding:6px 2px;cursor:pointer;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;
  transition:color .18s;
}
.tab svg{width:23px;height:23px;stroke-width:2}
.tab.active{color:var(--brand)}
.tab:active{transform:scale(.93)}

/* ---------- PWA install banner ---------- */
.install-banner{
  position:relative;margin:10px 16px 0;padding:11px 13px;border-radius:18px;
  background:linear-gradient(118deg,#4F46E5 0%,#6D5CF6 45%,#8B5CF6 100%);
  background-size:200% 200%;
  color:#fff;display:flex;align-items:center;gap:11px;
  box-shadow:0 8px 22px rgba(79,70,229,.36),inset 0 1px 0 rgba(255,255,255,.22);
  animation:ibIn .5s cubic-bezier(.16,1,.3,1) both, ibFlow 9s ease-in-out infinite 0.5s;
  overflow:hidden;isolation:isolate;
}
/* Мягкое световое пятно, медленно плывёт по баннеру */
.install-banner::before{
  content:"";position:absolute;top:-60%;left:-30%;width:55%;height:220%;
  background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent 72%);
  filter:blur(6px);pointer-events:none;z-index:0;
  animation:ibSheen 5.5s ease-in-out infinite;
}
/* Контент поверх светового пятна */
.install-banner > *{position:relative;z-index:1}
@keyframes ibFlow{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes ibSheen{
  0%{transform:translateX(-40%) skewX(-12deg);opacity:0}
  35%{opacity:1}
  100%{transform:translateX(320%) skewX(-12deg);opacity:0}
}
@keyframes ibIn{
  0%{opacity:0;transform:translateY(-18px) scale(.94);max-height:0;
    margin-top:0;padding-top:0;padding-bottom:0}
  55%{opacity:1;max-height:78px}
  100%{opacity:1;transform:none;max-height:78px}
}
.install-banner.ib-hide{animation:ibOut .34s cubic-bezier(.4,0,.6,1) both}
@keyframes ibOut{
  0%{opacity:1;max-height:78px}
  100%{opacity:0;transform:translateY(-14px) scale(.96);max-height:0;
    margin-top:0;padding-top:0;padding-bottom:0}
}

/* Иконка-телефон, в неё «влетает» стрелка */
.install-banner .ib-icon{
  position:relative;width:38px;height:38px;border-radius:12px;flex-shrink:0;
  background:rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  display:grid;place-items:center;
  animation:ibFloat 3.2s ease-in-out infinite;
}
@keyframes ibFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-2px) rotate(-2deg)}
}
.ib-phone{position:absolute;inset:0;display:grid;place-items:center}
.ib-arrow{
  position:absolute;left:50%;margin-left:-6px;top:7px;
  animation:ibDrop 2.6s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes ibDrop{
  0%{transform:translateY(-11px);opacity:0}
  25%{opacity:1}
  55%{transform:translateY(7px);opacity:1}
  70%{transform:translateY(7px);opacity:0}
  100%{transform:translateY(7px);opacity:0}
}
/* Волна от «приземления» стрелки */
.ib-ring{
  position:absolute;left:50%;top:64%;width:20px;height:20px;margin-left:-10px;
  border:2px solid rgba(255,255,255,.85);border-radius:50%;
  animation:ibRing 2.6s cubic-bezier(.2,.8,.4,1) infinite;
}
@keyframes ibRing{
  0%,50%{transform:scale(.2);opacity:0}
  62%{transform:scale(.4);opacity:.9}
  85%,100%{transform:scale(1.5);opacity:0}
}

.install-banner .ib-txt{flex:1;min-width:0}
.install-banner .ib-t{font-weight:750;font-size:14px;line-height:1.25;
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.install-banner .ib-s{font-size:11.5px;opacity:.9;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.install-banner button{border:none;font-weight:700;cursor:pointer;
  transition:transform .14s cubic-bezier(.2,.9,.3,1),box-shadow .2s}
.install-banner button:active{transform:scale(.92)}
.ib-yes{
  position:relative;background:#fff;color:var(--brand);
  padding:9px 15px;font-size:13.5px;border-radius:11px;flex-shrink:0;
  box-shadow:0 3px 10px rgba(0,0,0,.16);
  animation:ibBreathe 2.8s ease-in-out infinite;
}
@keyframes ibBreathe{
  0%,100%{box-shadow:0 3px 10px rgba(0,0,0,.16),0 0 0 0 rgba(255,255,255,.55)}
  50%{box-shadow:0 3px 10px rgba(0,0,0,.16),0 0 0 7px rgba(255,255,255,0)}
}
.ib-no{background:transparent;color:#fff;padding:6px 2px;opacity:.75;
  font-size:17px;line-height:1;flex-shrink:0;border-radius:8px}
.ib-no:active{opacity:1}

/* Уважаем системную настройку «уменьшить движение» */
@media (prefers-reduced-motion:reduce){
  .install-banner,.install-banner::before,.install-banner .ib-icon,
  .ib-arrow,.ib-ring,.ib-yes{animation:none}
}

/* ---------- Cart / list ---------- */
.row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--border)}
.row:last-child{border-bottom:none}
.row-main{flex:1;min-width:0}
.row-title{font-weight:600;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-sub{font-size:13px;color:var(--muted)}
.row-amount{font-weight:700;font-size:15.5px;white-space:nowrap}

.qty{display:flex;align-items:center;gap:9px}
.qty button{
  width:32px;height:32px;border-radius:10px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text);font-size:19px;font-weight:600;cursor:pointer;
  display:grid;place-items:center;line-height:1;
}
.qty button:active{transform:scale(.9)}
.qty span{min-width:34px;text-align:center;font-weight:700}

.totals{background:var(--surface-2);border-radius:var(--r);padding:15px;margin-top:14px}
.tline{display:flex;justify-content:space-between;padding:5px 0;font-size:15px}
.tline.big{font-size:21px;font-weight:800;border-top:1.5px solid var(--border);margin-top:8px;padding-top:12px}

.chip{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--surface-2);color:var(--muted)}
.chip.debt{background:rgba(245,158,11,.14);color:var(--warn)}
.chip.ok{background:rgba(16,185,129,.14);color:var(--success)}

.empty{text-align:center;padding:44px 20px;color:var(--muted)}
.empty svg{width:52px;height:52px;opacity:.35;margin-bottom:12px}

/* ---------- Stats ---------- */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:15px;box-shadow:var(--shadow-sm)}
.stat-v{font-size:23px;font-weight:800;letter-spacing:-.03em}
.stat-l{font-size:12.5px;color:var(--muted);margin-top:2px}
.chart{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:10px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.bar{width:100%;background:linear-gradient(180deg,var(--brand),var(--brand-2));border-radius:7px 7px 3px 3px;min-height:3px;transition:height .5s cubic-bezier(.2,.9,.3,1)}
.bar-lbl{font-size:10px;color:var(--muted);white-space:nowrap}

/* ---------- Modal ---------- */
.modal-back{
  position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(4px);
  z-index:200;display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.modal-back.show{opacity:1;pointer-events:auto}
.modal{
  background:var(--surface);width:100%;max-width:520px;border-radius:26px 26px 0 0;
  padding:22px 20px calc(22px + var(--safe-b));transform:translateY(100%);
  transition:transform .32s cubic-bezier(.2,.9,.3,1);max-height:92vh;overflow-y:auto;
}
.modal-back.show .modal{transform:none}
.modal-grab{width:38px;height:4px;border-radius:99px;background:var(--border);margin:0 auto 16px}
.modal h3{font-size:19px;margin-bottom:14px}
@media(min-width:560px){
  .modal-back{align-items:center}
  .modal{border-radius:24px;margin:20px}
}

/* ---------- Toast ---------- */
.toasts{position:fixed;top:calc(14px + var(--safe-t));left:50%;transform:translateX(-50%);z-index:300;width:min(92%,430px);display:flex;flex-direction:column;gap:9px}
.toast{
  background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:13px 15px;
  box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:11px;
  animation:toastIn .3s cubic-bezier(.2,.9,.3,1);
}
.toast.out{animation:toastOut .25s forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(-18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-14px) scale(.96)}}
.toast-i{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:700}
.toast.s .toast-i{background:var(--success)}
.toast.e .toast-i{background:var(--danger)}
.toast.i .toast-i{background:var(--brand)}
.toast-t{flex:1;font-size:14.5px;font-weight:500}
.toast-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:19px;padding:0 3px;line-height:1}

/* ---------- Scanner ---------- */
.scan-wrap{position:relative;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:4/3}
#scanVideo{width:100%;height:100%;object-fit:cover;display:block}
.scan-frame{position:absolute;inset:22% 10% 16%;border:3px solid rgba(255,255,255,.9);border-radius:14px;box-shadow:0 0 0 2000px rgba(0,0,0,.35)}
.scan-line{position:absolute;left:10%;right:10%;height:2px;background:var(--brand);box-shadow:0 0 12px var(--brand);animation:scanMove 2s ease-in-out infinite}
@keyframes scanMove{0%,100%{top:18%}50%{top:80%}}

/* ---------- Receipt ---------- */
.receipt{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:13.5px;background:var(--surface-2);padding:17px;border-radius:var(--r)}
.receipt .r-row{display:flex;justify-content:space-between;gap:10px}
.receipt hr{border:none;border-top:1px dashed var(--border);margin:9px 0}

.search-bar{position:relative;margin-bottom:13px}
.search-bar .input{padding-left:42px}
.search-bar svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--muted)}

.fab{
  position:fixed;right:16px;bottom:calc(90px + var(--safe-b));z-index:55;
  width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  box-shadow:0 8px 24px rgba(79,70,229,.4);display:grid;place-items:center;
}
.fab:active{transform:scale(.92)}
.seg{display:flex;background:var(--surface-2);border-radius:13px;padding:4px;margin-bottom:14px}
.seg button{flex:1;border:none;background:none;padding:10px;border-radius:10px;font-weight:600;font-size:14.5px;color:var(--muted);cursor:pointer;transition:.2s}
.seg button.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}

/* ---------- Плавающая корзина ---------- */
.cart-fab{
  position:fixed;right:16px;bottom:calc(88px + var(--safe-b));z-index:58;
  width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  box-shadow:0 10px 26px rgba(79,70,229,.45);
  display:grid;place-items:center;
  animation:cartIn .38s cubic-bezier(.2,1.3,.4,1) both;
  transition:transform .14s;
}
.cart-fab:active{transform:scale(.9)}
@keyframes cartIn{
  0%{opacity:0;transform:scale(.4) translateY(16px)}
  100%{opacity:1;transform:none}
}
.cart-fab.bump{animation:cartBump .4s cubic-bezier(.3,1.4,.5,1)}
@keyframes cartBump{
  0%{transform:scale(1)}
  35%{transform:scale(1.16)}
  100%{transform:scale(1)}
}
.cart-badge{
  position:absolute;top:-4px;right:-4px;min-width:24px;height:24px;padding:0 6px;
  border-radius:999px;background:#EF4444;color:#fff;
  font-size:12.5px;font-weight:800;line-height:1;
  display:grid;place-items:center;
  border:2.5px solid var(--bg);
  box-shadow:0 2px 8px rgba(239,68,68,.5);
  animation:badgePop .32s cubic-bezier(.3,1.5,.5,1);
}
@keyframes badgePop{
  0%{transform:scale(.3);opacity:0}
  100%{transform:scale(1);opacity:1}
}
.cart-sum{
  position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:999px;
  padding:2px 9px;font-size:11px;font-weight:700;white-space:nowrap;
  box-shadow:var(--shadow-sm);
}

/* ---------- Товар в списке кассы ---------- */
.p-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.p-row:last-child{border-bottom:none}
.p-row:active{background:var(--surface-2)}
.p-row.out{opacity:.42;cursor:not-allowed}
.p-add{
  width:36px;height:36px;border-radius:11px;flex-shrink:0;border:none;cursor:pointer;
  background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;
  font-size:21px;font-weight:600;line-height:1;
}
.p-row:active .p-add{transform:scale(.9)}
.p-incart{
  background:var(--brand);color:#fff;border-radius:11px;min-width:36px;height:36px;
  display:grid;place-items:center;font-weight:800;font-size:15px;flex-shrink:0;
}

/* ---------- Bottom sheet ---------- */


/* ================= Сетка товаров в кассе (2 колонки) ================= */
.p-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
  padding:12px 0;
}
.p-card{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  background:var(--surface);border:1.5px solid var(--border);border-radius:16px;
  padding:13px 12px 12px;cursor:pointer;text-align:left;
  transition:transform .13s,border-color .18s,box-shadow .2s;
  font-family:inherit;color:var(--text);
  animation:cardIn .3s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.p-card:active{transform:scale(.96)}
.p-card.picked{border-color:var(--brand);box-shadow:0 0 0 3px rgba(79,70,229,.13)}
.p-card.out{opacity:.45;pointer-events:none}
.p-ic{
  width:42px;height:42px;border-radius:12px;margin-bottom:5px;
  background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;flex-shrink:0;
  transition:transform .18s;
}
.p-card:active .p-ic{transform:scale(.92)}
.p-name{
  font-weight:650;font-size:14.5px;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;width:100%;
}
.p-price{font-weight:800;font-size:15px;letter-spacing:-.02em;color:var(--text)}
.p-stock{font-size:11.5px;color:var(--muted)}
.p-stock.low{color:var(--warn);font-weight:600}
.p-stock.zero{color:var(--danger);font-weight:600}
.p-cnt{
  position:absolute;top:9px;right:9px;min-width:23px;height:23px;padding:0 6px;
  border-radius:999px;background:var(--brand);color:#fff;
  font-size:12px;font-weight:800;display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(79,70,229,.4);
  animation:badgePop .28s cubic-bezier(.3,1.5,.5,1);
}

/* ================= Иконка в строках (чек, склад) ================= */
.r-ic{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;
}
.ic-tile{
  border-radius:11px;display:grid;place-items:center;flex-shrink:0;
  width:38px;height:38px;
}
/* Цвет "выреза" внутри иконок — совпадает с фоном подложки,
   чтобы детали выглядели вырезанными, а не белыми пятнами. */
:root{--ic-cut:#FFFFFF}
html[data-theme="dark"]{--ic-cut:#151A28}
.p-ic svg,.r-ic svg,.ic-btn svg{--ic-cut:var(--surface)}
.ic-btn.on svg{--ic-cut:var(--brand)}

/* ================= Выбор иконки товара ================= */
.ic-search{margin-bottom:8px;font-size:14.5px;padding:11px 14px}
.ic-pick{
  max-height:230px;overflow-y:auto;padding:10px 11px;
  background:var(--surface-2);border-radius:14px;border:1.5px solid var(--border);
  -webkit-overflow-scrolling:touch;
}
.ic-group{margin-bottom:12px}
.ic-group:last-child{margin-bottom:0}
.ic-cat{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin-bottom:7px;
}
.ic-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:7px}
.ic-btn{
  aspect-ratio:1;border:2px solid transparent;border-radius:12px;cursor:pointer;
  display:grid;place-items:center;padding:0;
  transition:transform .14s,box-shadow .2s,border-color .16s;
}
.ic-btn:active{transform:scale(.88)}
.ic-btn.on{
  border-color:var(--brand);
  box-shadow:0 3px 12px rgba(79,70,229,.34);transform:scale(1.06);
}
.ic-em{
  line-height:1;display:block;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",
    "Android Emoji",EmojiSymbols,sans-serif;
}
.ic-hint{font-size:12.5px;color:var(--muted);margin-top:8px;min-height:17px}

/* ================= Разбивка по способам оплаты ================= */
.ps-row{margin-bottom:13px}
.ps-row:last-child{margin-bottom:0}
.ps-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:14px}
.ps-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ps-label{font-weight:600}
.ps-pct{margin-left:auto;font-weight:800;font-size:14.5px}
.ps-sum{color:var(--muted);font-size:12.5px;min-width:74px;text-align:right}
.ps-track{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.ps-fill{
  height:100%;border-radius:999px;
  animation:psGrow .7s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes psGrow{from{width:0 !important}}

/* ================= Секции настроек ================= */
.set-sec{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin:18px 0 10px;padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.set-sec:first-of-type{margin-top:4px}

/* ================= Чек: иконка в строке ================= */
.receipt .r-nm{display:flex;align-items:center;gap:6px;min-width:0}
.receipt .r-ic-p{display:inline-flex;flex-shrink:0;opacity:.75}

/* ================= Сканер поверх формы ================= */
.scan-overlay{
  position:fixed;inset:0;z-index:400;
  background:rgba(15,23,42,.62);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:18px;
  animation:soIn .22s ease both;
}
@keyframes soIn{from{opacity:0}to{opacity:1}}
.scan-sheet{
  background:var(--surface);border-radius:22px;padding:20px;
  width:100%;max-width:460px;box-shadow:var(--shadow-lg);
  animation:soUp .3s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes soUp{from{transform:translateY(24px) scale(.97);opacity:0}to{transform:none;opacity:1}}

/* ================= Выбор должника ================= */
.dbt-list{max-height:44vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  margin:0 -4px;padding:0 4px}
.dbt-row{
  width:100%;display:flex;align-items:center;gap:11px;
  background:var(--surface);border:1.5px solid var(--border);border-radius:14px;
  padding:11px 13px;margin-bottom:8px;cursor:pointer;text-align:left;
  font-family:inherit;color:var(--text);
  transition:border-color .16s,box-shadow .2s,transform .12s;
  animation:cardIn .24s ease both;
}
.dbt-row:active{transform:scale(.98)}
.dbt-row.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(79,70,229,.14)}
.dbt-av{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-weight:800;font-size:14px;
}
.dbt-row.on .dbt-av{background:var(--brand);color:#fff}
.dbt-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dbt-name{font-weight:650;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dbt-sub{font-size:12.5px;color:var(--muted)}
.dbt-owe{
  text-align:right;font-weight:800;font-size:15px;color:var(--warn);
  display:flex;flex-direction:column;line-height:1.15;flex-shrink:0;
}
.dbt-owe small{font-size:10.5px;font-weight:600;opacity:.75}
.dbt-ok{font-size:12px;color:var(--success);font-weight:600;flex-shrink:0}

/* ================= Долги, сгруппированные по людям ================= */
.dg{
  background:var(--surface);border:1.5px solid var(--border);border-radius:16px;
  margin-bottom:10px;overflow:hidden;
  transition:border-color .18s,box-shadow .2s;
  animation:cardIn .26s ease both;
}
.dg.open{border-color:var(--brand);box-shadow:0 4px 16px rgba(79,70,229,.13)}
.dg-head{
  width:100%;display:flex;align-items:center;gap:11px;
  background:none;border:none;padding:13px 14px;cursor:pointer;
  font-family:inherit;color:var(--text);text-align:left;
}
.dg-head:active{background:var(--surface-2)}
.dg-av{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-weight:800;font-size:15px;
}
.dg.open .dg-av{background:var(--brand);color:#fff}
.dg-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dg-name{font-weight:700;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-sum{
  font-weight:800;font-size:17px;color:var(--warn);flex-shrink:0;
  display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;
}
.dg-sum.paid{color:var(--success)}
.dg-sum small{font-size:10px;font-weight:600;opacity:.7}
.dg-arw{color:var(--muted);flex-shrink:0;transition:transform .26s cubic-bezier(.2,.9,.3,1)}
.dg.open .dg-arw{transform:rotate(180deg)}

.dg-body{
  overflow:hidden;max-height:0;padding:0 14px;
  transition:max-height .32s cubic-bezier(.2,.9,.3,1),padding-bottom .3s;
}
.dg.open .dg-body{max-height:1200px;padding-bottom:12px}

.dg-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-top:1px solid var(--border);
}
.dg-item-main{flex:1;min-width:0}
.dg-item-sum{font-weight:700;font-size:15px}
.dg-item-sub{font-size:12px;color:var(--muted)}
.dg-all{margin-top:10px}

/* Плитки эмодзи в карточках и строках */
.p-ic .ic-em,.r-ic .ic-em{line-height:1}
.r-ic-p{font-size:12px;display:inline-flex;flex-shrink:0}

/* ================= Промах сканера ================= */
.scan-miss{
  margin-top:10px;padding:10px 13px;border-radius:12px;
  background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.22);
  animation:missIn .26s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes missIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sm-code{
  font-family:"SF Mono",ui-monospace,Menlo,monospace;
  font-size:15px;font-weight:700;color:var(--danger);letter-spacing:.04em;
}
.sm-txt{font-size:12.5px;color:var(--muted);margin-top:2px}

/* Окно после трёх промахов */
.mo-code{
  font-family:"SF Mono",ui-monospace,Menlo,monospace;
  font-size:19px;font-weight:800;letter-spacing:.06em;
  background:var(--surface-2);border:1.5px solid var(--border);border-radius:12px;
  padding:12px 14px;text-align:center;margin-bottom:12px;
}
.mo-sec{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin:16px 0 9px;
}
.mo-item{
  width:100%;display:flex;align-items:center;gap:11px;
  background:var(--surface);border:1.5px solid var(--border);border-radius:13px;
  padding:10px 12px;margin-bottom:8px;cursor:pointer;text-align:left;
  font-family:inherit;color:var(--text);transition:border-color .16s,transform .12s;
}
.mo-item:active{transform:scale(.98)}
.mo-item:hover{border-color:var(--brand)}
.mo-ic{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:grid;place-items:center;
}
.mo-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mo-name{font-weight:650;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-bc{
  font-family:"SF Mono",ui-monospace,Menlo,monospace;
  font-size:11.5px;color:var(--muted);letter-spacing:.03em;
}
.mo-add{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-size:19px;font-weight:600;line-height:1;
}
.mo-hint{font-size:12px;color:var(--muted);margin:-2px 0 4px;line-height:1.4}

/* ================= Круглая кнопка сканера (слева внизу) ================= */




/* ================= Знак валюты у крупных цифр ================= */
.stat-v .cur,.sum-cur{
  font-size:.5em;font-weight:700;margin-left:3px;
  color:var(--muted);letter-spacing:0;
}

/* ================= Строка склада ================= */
.wr{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer;
  transition:background .15s;
}
.wr:last-child{border-bottom:none}
.wr:active{background:var(--surface-2)}
.wr-main{flex:1;min-width:0}
.wr-name{font-weight:650;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wr-price{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:2px}
.wr-sell{font-size:13.5px;font-weight:700}
.wr-cost{font-size:12px;color:var(--muted)}
.wr-mk{
  font-size:11px;font-weight:700;color:var(--success);
  background:rgba(16,185,129,.12);padding:1px 6px;border-radius:6px;
}
.wr-bc{
  font-family:"SF Mono",ui-monospace,Menlo,monospace;
  font-size:11px;color:var(--muted);margin-top:2px;letter-spacing:.02em;
}
.wr-stock{
  display:flex;flex-direction:column;align-items:flex-end;
  flex-shrink:0;line-height:1.15;min-width:52px;
}
.wr-qty{font-size:19px;font-weight:800;letter-spacing:-.03em}
.wr-unit{font-size:11px;color:var(--muted);font-weight:600}
.wr-stock.low .wr-qty{color:var(--warn)}
.wr-stock.zero .wr-qty{color:var(--danger)}
.wr-stock.zero .wr-unit{color:var(--danger);opacity:.7}

/* ================= Оплата наличными и сдача ================= */
.cash-total{
  display:flex;align-items:baseline;justify-content:space-between;
  background:var(--surface-2);border-radius:14px;padding:14px 16px;margin-bottom:16px;
}
.ct-l{font-size:13.5px;color:var(--muted);font-weight:600}
.ct-v{font-size:26px;font-weight:850;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.ct-v small{font-size:.48em;font-weight:700;color:var(--muted);margin-left:4px}

.cash-change{
  display:flex;align-items:baseline;justify-content:space-between;
  border-radius:14px;padding:15px 16px;
  background:var(--surface-2);border:1.5px solid var(--border);
  transition:background .22s,border-color .22s;
}
.cc-l{font-size:13.5px;color:var(--muted);font-weight:600}
.cc-v{
  font-size:27px;font-weight:850;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;color:var(--muted);
}
.cc-v small{font-size:.46em;font-weight:700;margin-left:4px;opacity:.75}
.cash-change.ok{
  background:rgba(16,185,129,.11);border-color:rgba(16,185,129,.3);
}
.cash-change.ok .cc-v{color:var(--success)}
.cash-change.short{
  background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.28);
}
.cash-change.short .cc-v{color:var(--danger);font-size:19px}

/* Неактивная кнопка «Продать»: видно, что нажать нельзя */
#cashOk:disabled{
  opacity:1;
  background:var(--surface-2);
  color:var(--muted);
  box-shadow:none;
  cursor:not-allowed;
}
/* Прочерк вместо суммы, пока ничего не введено */
.cash-change .cc-v{transition:color .2s}

/* ================= Крестик в углу модального окна ================= */
/* Крестик закреплён в углу самой модалки, не уезжает при прокрутке */
.modal{position:relative}
.sheet-x{
  position:absolute;top:18px;right:18px;z-index:6;
  width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:var(--surface-2);color:var(--muted);
  display:grid;place-items:center;
  transition:transform .13s,background .18s,color .18s;
}
.sheet-x:active{transform:scale(.88)}
.sheet-x:hover{background:var(--border);color:var(--text)}

/* ================= Закреплённые кнопки внизу листа ================= */
.sheet-actions{
  position:sticky;bottom:0;z-index:4;
  display:grid;grid-template-columns:1fr 1.5fr;gap:10px;
  padding:12px 0 calc(2px + var(--safe-b));margin-top:14px;
  background:var(--surface);
  box-shadow:0 -12px 18px -8px var(--surface);
}
.sheet-actions .btn{width:100%}

/* ================= Набранная сумма ================= */
.cash-got{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border:2px solid var(--brand);border-radius:14px;
  padding:13px 16px;margin-bottom:10px;
  background:var(--surface);
}
.cg-l{font-size:13.5px;color:var(--muted);font-weight:600;flex-shrink:0}
.cg-v{
  font-size:29px;font-weight:850;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cg-v.empty{color:var(--border)}

/* ================= Цифровая клавиатура ================= */
.numpad{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin-top:14px;
}
.np{
  height:54px;border-radius:14px;cursor:pointer;
  background:var(--surface-2);border:1.5px solid var(--border);color:var(--text);
  font-size:23px;font-weight:700;font-family:inherit;
  font-variant-numeric:tabular-nums;
  display:grid;place-items:center;
  transition:transform .1s,background .15s;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
}
.np:active{transform:scale(.93);background:var(--brand);color:#fff;border-color:var(--brand)}
.np-del{color:var(--danger)}
.np-del:active{background:var(--danger);border-color:var(--danger);color:#fff}

/* ================= Выбор периода в отчёте ================= */
.per-bar{
  display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.per-bar::-webkit-scrollbar{display:none}
.per{
  flex-shrink:0;padding:9px 15px;border-radius:11px;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--border);color:var(--muted);
  font-weight:650;font-size:14px;font-family:inherit;
  transition:transform .12s,background .18s,color .18s,border-color .18s;
}
.per:active{transform:scale(.95)}
.per.active{background:var(--brand);color:#fff;border-color:var(--brand)}

.per-range{
  background:var(--surface);border:1.5px solid var(--border);border-radius:16px;
  padding:14px;margin-bottom:12px;
  animation:missIn .24s cubic-bezier(.2,.9,.3,1) both;
}
.pr-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.pr-f{display:block}
.pr-f .label{display:block;margin-bottom:5px}

.per-title{
  font-size:13px;font-weight:700;color:var(--muted);
  margin:2px 0 12px;letter-spacing:-.01em;
}

/* Карточка «Получено деньгами» */
.note-card{margin-bottom:14px}
.nc-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.nc-right{text-align:right}
.nc-v{font-size:25px;font-weight:850;letter-spacing:-.035em;color:var(--success)}
.nc-v.small{font-size:19px;color:var(--muted)}
.nc-l{font-size:12.5px;color:var(--muted);margin-top:2px}
.nc-hint{
  font-size:12.5px;color:var(--muted);line-height:1.4;
  margin-top:11px;padding-top:11px;border-top:1px solid var(--border);
}

/* ================= Кликабельные карточки склада ================= */
.stat-btn{
  cursor:pointer;text-align:left;font-family:inherit;
  transition:transform .12s,border-color .18s,box-shadow .2s;
}
.stat-btn:active{transform:scale(.96)}
.stat-btn.active{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(79,70,229,.14);
}
.stat-btn.active .stat-v{color:var(--brand)}
.wf-title{
  font-size:13px;font-weight:700;color:var(--muted);
  margin:2px 0 10px;
}

/* ================= Очистка истории ================= */
.cl-opts{display:flex;flex-direction:column;gap:8px}
.cl-opt{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--border);border-radius:13px;
  padding:12px 13px;transition:border-color .16s,background .16s;
}
.cl-opt input{
  margin:2px 0 0;flex-shrink:0;width:19px;height:19px;
  accent-color:var(--brand);cursor:pointer;
}
.cl-opt:has(input:checked),.cl-opt.on{border-color:var(--brand);background:var(--brand-soft)}
.cl-opt.danger:has(input:checked),.cl-opt.danger.on{
  border-color:var(--danger);background:rgba(239,68,68,.08);
}
.cl-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.cl-t{font-weight:650;font-size:14.5px}
.cl-s{font-size:12.5px;color:var(--muted);line-height:1.35}
.cl-opt.danger .cl-t{color:var(--danger)}

/* Красная приписка на карточке — сколько ещё не вернули */
.stat-note{
  font-size:11.5px;font-weight:650;color:var(--danger);
  margin-top:4px;line-height:1.3;
  animation:missIn .3s cubic-bezier(.2,.9,.3,1) both;
}
.stat-note .sn-c{font-weight:600;opacity:.75}

/* ================= Импорт товаров ================= */
.im-drop{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:26px 16px;border-radius:16px;cursor:pointer;
  background:var(--surface-2);border:2px dashed var(--border);
  transition:border-color .2s,background .2s;
}
.im-drop:active{transform:scale(.99)}
.im-drop.ok{border-color:var(--success);border-style:solid;background:rgba(16,185,129,.07)}
.im-ic{font-size:30px;line-height:1}
.im-t{font-weight:700;font-size:15.5px;margin-top:4px}
.im-s{font-size:12.5px;color:var(--muted);word-break:break-all;text-align:center}

.im-info{
  margin-top:12px;padding:13px 15px;border-radius:14px;
  background:var(--surface-2);border:1.5px solid var(--border);
  animation:missIn .26s cubic-bezier(.2,.9,.3,1) both;
}
.im-row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;padding:3px 0}
.im-row b{font-weight:800;font-size:16px}
.im-row.warn{color:var(--warn)}
.im-prev{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.im-chip{
  font-size:12px;padding:5px 9px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.im-chip.more{color:var(--muted);font-weight:600}
.im-hint{
  font-size:12px;color:var(--muted);line-height:1.4;
  margin-top:10px;padding-top:9px;border-top:1px solid var(--border);
}

/* ================= Чек: липкие шапка и итоги ================= */
.ck-head{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface);
  padding:2px 0 10px;margin:0 0 2px;
  box-shadow:0 8px 12px -8px var(--surface);
}
.ck-list{
  max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  margin:0 -20px;padding:0 20px;
}
.ck-foot{
  position:sticky;bottom:0;z-index:5;
  background:var(--surface);
  padding:10px 0 calc(2px + var(--safe-b));
  margin:0 0 -4px;
  box-shadow:0 -12px 16px -8px var(--surface);
}
.ck-foot .totals{margin-top:0}

/* ================= Кнопка «без штрихкода» рядом с поиском ================= */
.kassa-top{
  position:sticky;top:var(--topbar-h, 56px);z-index:30;
  display:flex;flex-direction:column;gap:9px;
  background:var(--bg);
  padding:12px 4px 12px;
  margin:0 -4px;
  box-shadow:0 -8px 0 0 var(--bg);
}
.nobc-btn{
  width:50px;height:50px;flex-shrink:0;border-radius:14px;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--border);color:var(--brand);
  display:grid;place-items:center;
  transition:transform .13s,background .18s,color .18s;
}
.nobc-btn:active{transform:scale(.92);background:var(--brand);color:#fff}
.nb-wrap{max-height:48vh;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}

/* Крестик очистки внутри поля поиска */
.search-bar{position:relative}
.sb-x{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;border:none;cursor:pointer;
  background:var(--surface-2);color:var(--muted);
  font-size:14px;line-height:1;display:grid;place-items:center;
}
.sb-x:active{transform:translateY(-50%) scale(.88)}
.search-bar .input{padding-right:42px}

/* ================= Непрерывный сканер ================= */
.scan-count{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:4;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  background:rgba(255,255,255,.96);color:#12161F;
  border-radius:999px;padding:7px 15px;
  box-shadow:0 4px 16px rgba(0,0,0,.22);
}
.sc-n{font-size:20px;font-weight:850;letter-spacing:-.02em;color:#DC2626}
.sc-t{font-size:11.5px;color:#64748B;font-weight:600}
.sc-s{font-size:14px;font-weight:800;color:#DC2626;margin-left:2px}
.scan-hit{
  margin-top:10px;padding:13px 14px;border-radius:15px;
  background:rgba(16,185,129,.12);border:1.5px solid rgba(16,185,129,.3);
  display:flex;align-items:center;gap:12px;
  animation:missIn .26s cubic-bezier(.2,.9,.3,1) both;
}
.sh-ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;flex-shrink:0}
.sh-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sh-n{font-weight:750;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-p{font-size:12.5px;color:var(--muted)}
.sh-qty{
  display:flex;flex-direction:column;align-items:center;flex-shrink:0;
  background:var(--success);color:#fff;border-radius:13px;
  padding:7px 13px;line-height:1.1;
}
.sh-qty b{font-size:22px;font-weight:850;letter-spacing:-.03em}
.sh-qty small{font-size:10.5px;font-weight:600;opacity:.85}

/* ================= Свой эмодзи для товара ================= */
.io-emoji{margin-bottom:10px}
.io-in{
  font-size:26px !important;text-align:center;
  padding:9px !important;width:80px;border-radius:12px;
}
.io-hint{
  display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:6px;
}

/* ================= График с переключателем ================= */
.ch-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.ch-tabs{display:flex;background:var(--surface-2);border-radius:10px;padding:3px;flex-shrink:0}
.ch-tabs button{
  border:none;background:none;cursor:pointer;font-family:inherit;
  padding:6px 11px;border-radius:8px;font-size:12.5px;font-weight:650;color:var(--muted);
  transition:.18s;
}
.ch-tabs button.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.chart{align-items:flex-end;gap:4px;height:170px;padding-top:4px}
.bar-col{justify-content:flex-end}
.bar-v{
  font-size:9.5px;font-weight:700;color:var(--muted);
  white-space:nowrap;margin-bottom:3px;
  writing-mode:vertical-rl;transform:rotate(180deg);
  max-height:38px;overflow:hidden;
}
.bar.zero{background:var(--border);opacity:.55}
.bar-lbl{font-size:9.5px}

/* ================= Оплата: компактная пара полей ================= */
.cash-pair{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.cash-got,.cash-change{
  flex-direction:column;align-items:flex-start;gap:2px;
  padding:11px 13px;margin:0;
}
.cg-l,.cc-l{font-size:11.5px}
.cg-v{font-size:23px}
.cc-v{font-size:23px}
.cash-change.short .cc-v{font-size:14px;line-height:1.3}
.numpad{gap:7px;margin-top:0}
.np{height:48px;font-size:21px;border-radius:12px}
.cash-total{padding:11px 14px;margin-bottom:12px}
.ct-v{font-size:23px}

/* ================= Ручка листа: подсказка, что можно тянуть ================= */
.modal-grab{
  width:44px;height:5px;cursor:grab;
  margin:0 auto 14px;
}
#modal{touch-action:pan-y}

/* ================= История и возврат ================= */
.hist-list{max-height:60vh;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
.hist-row{width:100%;text-align:left;font-family:inherit;color:var(--text);border:none;background:none;cursor:pointer}
.h-tag{
  font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;margin-left:8px;
  vertical-align:middle;
}
.h-tag.full{background:rgba(239,68,68,.14);color:var(--danger)}
.h-tag.part{background:rgba(245,158,11,.16);color:var(--warn)}

.sd-meta{font-size:13px;color:var(--muted);margin-bottom:12px}
.sd-note{
  font-size:13px;color:var(--danger);font-weight:600;
  background:rgba(239,68,68,.08);border-radius:10px;padding:9px 12px;margin-bottom:12px;
}
.sd-list{max-height:44vh;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0 -4px 4px;padding:0 4px}
.sd-row{
  display:flex;align-items:center;gap:11px;
  padding:10px 0;border-bottom:1px solid var(--border);
}
.sd-row:last-child{border-bottom:none}
.sd-row.done{opacity:.5}
.sd-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.sd-b{flex:1;min-width:0}
.sd-n{font-weight:650;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-p{font-size:12px;color:var(--muted);margin-top:1px}
.sd-ret{color:var(--danger)}
.sd-qty{display:flex;align-items:center;gap:9px;flex-shrink:0}
.sd-m,.sd-pl{
  width:30px;height:30px;border-radius:9px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text);font-size:17px;font-weight:700;cursor:pointer;
  display:grid;place-items:center;line-height:1;
}
.sd-m:active,.sd-pl:active{transform:scale(.9);background:var(--brand);color:#fff}
.sd-qty span{min-width:20px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.sd-ok{font-size:12px;color:var(--muted);flex-shrink:0}
.sd-sum{
  font-size:15px;font-weight:750;text-align:right;
  padding:10px 0;color:var(--danger);
}

/* ================= Управление продавцами ================= */
.sl-card{
  background:var(--surface-2);border:1.5px solid var(--border);border-radius:14px;
  padding:13px 14px;margin-bottom:10px;
}
.sl-card.off{opacity:.6}
.sl-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.sl-name{font-weight:750;font-size:15.5px}
.sl-code{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:"SF Mono",ui-monospace,Menlo,monospace;
  font-size:16px;font-weight:800;letter-spacing:.12em;color:var(--brand);
  background:var(--brand-soft);border-radius:9px;padding:5px 10px;
}
.sl-code:active{transform:scale(.95)}
.sl-stat{font-size:13px;color:var(--muted);margin-bottom:10px}
.sl-act{display:flex;gap:8px}
.sl-btn{
  flex:1;padding:9px;border-radius:10px;cursor:pointer;font-family:inherit;
  background:var(--surface);border:1.5px solid var(--border);color:var(--text);
  font-size:13.5px;font-weight:650;
}
.sl-btn:active{transform:scale(.97)}
.sl-btn.del{color:var(--danger)}

/* Вход: переключатель владелец/продавец */
.login-mode{
  display:flex;gap:7px;background:var(--surface-2);border-radius:12px;padding:4px;margin-bottom:18px;
}
.lm{
  flex:1;padding:10px;border-radius:9px;border:none;cursor:pointer;font-family:inherit;
  background:none;color:var(--muted);font-weight:650;font-size:14.5px;transition:.18s;
}
.lm.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.code-in{
  font-size:22px !important;text-align:center;letter-spacing:.08em;
  font-weight:800;font-family:"SF Mono",ui-monospace,Menlo,monospace;
  padding:14px !important;
}

.sd-seller{font-size:12.5px;color:var(--brand);font-weight:600}

/* ================= Кнопки сканирования над поиском ================= */
.scan-bar{display:flex;align-items:center;gap:9px}
.scan-cam-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  background:var(--brand);border:none;border-radius:12px;color:#fff;
  padding:12px 14px;font-family:inherit;font-size:14.5px;font-weight:700;
  box-shadow:0 3px 10px rgba(79,70,229,.28);
  transition:transform .13s,box-shadow .18s;
}
.scan-cam-btn:active{transform:scale(.98)}
.scan-cam-btn svg{flex-shrink:0}

/* Маленькая кнопка без штрихкода */
.nobc-btn.sm{width:42px;height:42px;border-radius:12px;flex-shrink:0}

/* ================= Экран покупателя (второй монитор) ================= */
.disp-body{margin:0;background:var(--bg);overflow:hidden}
.disp{
  display:flex;flex-direction:column;height:100vh;height:100dvh;
  max-width:100%;padding:0;
}
.disp-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px;background:var(--surface);border-bottom:1px solid var(--border);
}
.disp-shop{font-size:26px;font-weight:850;letter-spacing:-.02em}
.disp-status{font-size:15px;color:var(--muted);font-weight:600}

.disp-main{flex:1;overflow:hidden;display:flex;flex-direction:column;position:relative}
.disp-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:40px;
}
.disp-empty-ic{font-size:80px;line-height:1}
.disp-empty-t{font-size:34px;font-weight:850}
.disp-empty-s{font-size:18px;color:var(--muted);max-width:400px}

.disp-list{flex:1;overflow-y:auto;padding:16px 28px}
.disp-item{
  display:flex;align-items:center;gap:18px;
  padding:16px 0;border-bottom:1px solid var(--border);
}
.disp-item:last-child{border-bottom:none}
.disp-item-ic{
  width:56px;height:56px;border-radius:14px;flex-shrink:0;
  display:grid;place-items:center;
}
.disp-item-ic .ic-em{font-size:30px}
.disp-item-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.disp-item-n{font-size:24px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.disp-item-q{font-size:17px;color:var(--muted)}
.disp-item-s{font-size:26px;font-weight:850;white-space:nowrap;font-variant-numeric:tabular-nums}

.disp-foot{
  background:var(--surface);border-top:2px solid var(--border);
  padding:22px 28px calc(22px + env(safe-area-inset-bottom));
}
.disp-total-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.disp-total-l{font-size:30px;font-weight:800}
.disp-total-v{font-size:52px;font-weight:900;letter-spacing:-.03em;color:var(--brand);font-variant-numeric:tabular-nums}
.disp-pay{margin-top:16px;padding-top:16px;border-top:1px dashed var(--border);display:flex;flex-direction:column;gap:8px}
.disp-pay-row{display:flex;justify-content:space-between;font-size:22px;color:var(--muted)}
.disp-pay-row span:last-child{font-weight:750;color:var(--text);font-variant-numeric:tabular-nums}
.disp-pay-row.big{font-size:30px}
.disp-pay-row.big span:last-child{color:var(--success);font-weight:900}

.disp-thanks{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;background:var(--bg);
  animation:missIn .4s cubic-bezier(.2,.9,.3,1) both;
}
.disp-thanks-ic{font-size:100px;line-height:1}
.disp-thanks-t{font-size:44px;font-weight:900;color:var(--success)}
.disp-thanks-s{font-size:26px;font-weight:700;color:var(--muted)}

/* Ссылка экрана покупателя */
.dp-link{
  font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:12.5px;
  background:var(--surface-2);border:1.5px solid var(--border);border-radius:11px;
  padding:12px 14px;word-break:break-all;line-height:1.5;color:var(--brand);
}