/* =====================================================================
   SEBE Shop · кабинет магазина. Бренд SEBE: бирюза → зелёный.
   ===================================================================== */
:root{
  --accent:#0a9db0; --accent2:#2bc15e; --grad:linear-gradient(135deg,#0fb7c6 0%,#2ec75f 100%);
  --bg:#f4f4f1; --card:#fff; --ink:#17202b; --ink2:#3b4653; --mut:#6d7684; --line:#e5e6e1; --line2:#eeeeea;
  --ok:#15803d; --warn:#b45309; --bad:#c2410c; --radius:18px;
  --sur:#fff; --sur2:#f8fafc; --lift:#fff; --on-ink:#fff; --track:#d3d8df;
  --ok-bg:#dcfce7; --ok-fg:#166534; --warn-bg:#fef3c7; --warn-fg:#92400e; --warn-line:#fcd34d; --bad-bg:#fee2e2; --bad-fg:#991b1b;
  --info-bg:#e0f2fe; --info-fg:#075985; --neu-bg:#f1f5f9; --neu-fg:#64748b; --ease:cubic-bezier(.23,1,.32,1);
  --shadow:0 1px 2px rgba(23,32,43,.04),0 10px 28px -20px rgba(23,32,43,.25);
--ico-face:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 2.5c-3 0-5.5 1.6-6.8 3.6M18.8 6.1C17.5 4.1 15 2.5 12 2.5'/%3E%3Cpath d='M4.5 10.5A7.5 7.5 0 0 1 12 6a7.5 7.5 0 0 1 7.5 4.5'/%3E%3Cpath d='M8 12a4 4 0 0 1 8 0v2.5'/%3E%3Cpath d='M12 12v5'/%3E%3Cpath d='M5.6 14.5c.3-1 .4-2 .4-3'/%3E%3Cpath d='M16 17.5c-.2 1.3-.7 2.5-1.4 3.5'/%3E%3Cpath d='M8.6 21c.7-1.2 1-2.3 1-3.5'/%3E%3C/svg%3E");--ico-qr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Cpath d='M14 14h3v3h-3zM20 14v1M14 20h1M18 18h3v3'/%3E%3C/svg%3E");}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mut{color:var(--mut)} .small{font-size:13px} .num{font-variant-numeric:tabular-nums}

/* каркас */
.shell{display:flex;min-height:100vh}
.side{width:236px;flex:none;background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:30}
.side__collapse{display:none}
.side__brand{display:flex;align-items:center;gap:10px;padding:18px 18px 10px;font-weight:800;font-size:17px}
.side__brand img{width:32px;height:32px}
.side__brand small{display:block;font-weight:600;font-size:12px;color:var(--mut);max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side__nav{display:flex;flex-direction:column;gap:2px;padding:8px 10px;flex:1;overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain}
.side__link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;color:var(--mut);font-weight:600;text-decoration:none;border:0;background:none;width:100%;cursor:pointer;text-align:left;position:relative;transition:background .15s,color .15s}
.side__link span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side__link:hover{background:var(--line2);color:var(--ink)}
.side__link.is-on{background:color-mix(in srgb,var(--accent) 12%,var(--card));color:var(--accent)}
.side__link.is-on::before{content:'';position:absolute;left:-10px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.side__link b{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#e11d48;color:#fff;font-size:11.5px;display:grid;place-items:center}
.side__foot{padding:12px 14px 16px;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:8px}
.side__ico{display:flex;align-items:center;justify-content:center;gap:7px}
.side__ico svg{width:16px;height:16px;stroke-width:2}
.side__row{display:flex;gap:8px}
.side__row .btn{flex:1;min-width:0;padding-left:8px;padding-right:8px}
.side__row .btn svg{display:none}   /* в развёрнутом меню два слова и так рядом; иконки - для свёрнутого */
.side__row .btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.langs{display:flex;gap:4px}
.langs button{flex:1;padding:6px 0;border-radius:9px;border:1px solid var(--line);background:var(--sur);font-size:12.5px;font-weight:700;color:var(--mut);cursor:pointer}
.langs button.is-on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.langs--big{gap:8px}.langs--big button{padding:11px 0;border-radius:12px;font-size:14.5px;font-weight:650}
.main{flex:1;min-width:0;margin-left:236px;padding:24px 28px 80px}
.burger{display:none}
/* сворачивание меню - только на компьютере; на телефоне меню и так шторка */
@media(min-width:861px){
  body.side-anim .side{transition:width .22s var(--ease)}
  body.side-anim .main{transition:margin-left .22s var(--ease)}
  /* кнопка на ребре меню: видна при наведении на меню, в остальное время не мешает */
  .side__collapse{display:grid;place-items:center;position:absolute;right:-13px;top:24px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--mut);cursor:pointer;z-index:2;box-shadow:0 2px 6px rgba(15,25,45,.08);opacity:0;transition:opacity .15s,transform .22s var(--ease),color .15s}
  .side__collapse svg{width:14px;height:14px;stroke-width:2.2}
  .side:hover .side__collapse,.side__collapse:focus-visible{opacity:1}
  .side__collapse:hover{color:var(--accent);border-color:var(--accent)}
  body.side-mini .side{width:72px}
  body.side-mini .main{margin-left:72px}
  body.side-mini .side__collapse{transform:rotate(180deg)}
  body.side-mini .side__brand{justify-content:center;padding:18px 0 10px}
  body.side-mini .side__brand > div{display:none}
  body.side-mini .side__nav{padding:8px;overflow:visible}
  body.side-mini .side__link{justify-content:center;padding:11px 0}
  body.side-mini .side__link span{display:none}
  body.side-mini .side__link.is-on::before{left:-8px}
  body.side-mini .side__link b{position:absolute;top:5px;right:9px;margin:0;min-width:16px;height:16px;padding:0 4px;font-size:10px}
  body.side-mini .side__foot{padding:10px 8px 14px}
  body.side-mini .side__row{flex-direction:column}
  body.side-mini .side__foot .btn{padding:10px 0;justify-content:center}
  body.side-mini .side__foot .btn span{display:none}
  body.side-mini .side__row .btn svg{display:block}
  body.side-mini .side__ico svg,body.side-mini .side__sale svg{width:18px;height:18px}
  /* подсказка справа от иконки - та подпись, что спрятали */
  body.side-mini [data-tip]:hover::after{content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);background:var(--ink);color:var(--on-ink);padding:6px 10px;border-radius:8px;font-size:13px;font-weight:600;white-space:nowrap;z-index:50;pointer-events:none;box-shadow:0 8px 20px -8px rgba(15,25,45,.4)}
  body.side-mini .side__foot [data-tip]{position:relative}
}
@media(max-width:860px){
  .side{transform:translateX(-100%);transition:transform .24s var(--ease);box-shadow:0 20px 60px rgba(0,0,0,.2)}
  body.nav-open .side{transform:none}
  .main{margin-left:0;padding:14px 14px 90px}
  .burger{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--sur);cursor:pointer;flex:none}
  .backdrop{position:fixed;inset:0;background:rgba(15,25,45,.35);z-index:25;display:block;opacity:0;pointer-events:none;transition:opacity .24s var(--ease);touch-action:none}
  body.nav-open .backdrop{opacity:1;pointer-events:auto}
  html,body{overscroll-behavior-x:none}
}

.head{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.head h1{margin:0;font-size:24px;letter-spacing:-.01em}
.head .sub{color:var(--mut);font-size:14px}
.head .spacer{flex:1}
.banner{padding:11px 14px;border-radius:12px;margin-bottom:14px;font-size:14px;background:var(--warn-bg);color:var(--warn-fg);border:1px solid var(--warn-line)}
.banner--info{background:var(--info-bg);color:var(--info-fg);border-color:transparent}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px;box-shadow:var(--shadow)}
.card__head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line2)}
.card__head h2{margin:0;font-size:16px}
.card__head .spacer{flex:1}
.card__body{padding:16px 18px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
/* карточки в паре тянутся на одну высоту, пустое место занимает содержимое */
.grid2>.card{display:flex;flex-direction:column}
.grid2>.card>.list,.grid2>.card>.empty,.grid2>.card>.card__body{flex:1}
.grid2>.card>.empty{display:flex;flex-direction:column;justify-content:center}
@media(max-width:1000px){.grid2{grid-template-columns:minmax(0,1fr)}}
.grid2>*{min-width:0}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.kpi__l{font-size:12.5px;color:var(--mut);font-weight:600}
.kpi__v{font-size:24px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi__s{font-size:12.5px;color:var(--mut);margin-top:2px}

/* кнопки и поля */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:8px 14px;border-radius:11px;border:1px solid var(--line);background:var(--sur);font-weight:650;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .15s var(--ease),background .15s}
.btn:hover{background:var(--sur2)}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
.btn--primary{background:var(--grad);border:0;color:#fff;box-shadow:0 8px 18px -10px rgba(15,183,198,.75)}
.btn--primary:hover{background:var(--grad);filter:brightness(1.04)}
.btn--sm{min-height:32px;padding:5px 10px;font-size:13.5px;border-radius:9px}
.btn--ghost{border-color:transparent;background:none;color:var(--mut)}
.btn--danger{color:var(--bad)}
.btn--wa{background:#25d366;border-color:#25d366;color:#fff}
@media (prefers-reduced-motion:reduce){.btn,.side{transition:none}.btn:active{transform:none}}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field>span{font-size:12.5px;font-weight:700;color:var(--mut)}
.field input,.field select,.field textarea,.inp{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--sur);font-size:15px}
.field textarea{resize:vertical;min-height:84px}
.field input:focus,.field select:focus,.field textarea:focus,.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,183,198,.14)}
.field small{font-size:12.5px;color:var(--mut)}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:0}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:600px){.row:not(.row--keep),.row3{grid-template-columns:1fr}}
/* пара, в которой второе поле скрыто (шаг заказа у штучного товара): первое на всю ширину */
.row:has(> .field[hidden]) > .field{grid-column:1/-1}
.check{display:flex;align-items:center;gap:10px;padding:9px 0;cursor:pointer;font-weight:600}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.toolbar .inp{max-width:280px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--sur);font-weight:650;font-size:13.5px;color:var(--mut);cursor:pointer}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}

/* списки */
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid var(--line2);cursor:pointer}
.li:first-child{border-top:0}
.li:hover{background:var(--sur2)}
.li__img{width:48px;height:48px;border-radius:11px;background:var(--line2);overflow:hidden;flex:none;display:grid;place-items:center;color:var(--mut);font-weight:800}
.li__img img{width:100%;height:100%;object-fit:cover}
.li__main{flex:1;min-width:0}
.li__t{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li__t--btn{display:block;width:100%;text-align:left;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.li__t--btn:hover{text-decoration-color:var(--accent)}
/* наценка под ценами в карточке товара */
.margin-line{display:flex;align-items:baseline;gap:8px;margin:-4px 0 12px;flex-wrap:wrap}
.margin-line__v{font-weight:800;color:var(--ok);font-variant-numeric:tabular-nums}
.margin-line__v.is-bad{color:var(--bad)}
.li__s{font-size:13px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li__side{text-align:right;flex:none}
.li__side b{display:block;font-variant-numeric:tabular-nums}
.empty{padding:30px 18px;text-align:center;color:var(--mut)}
.pill{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--neu-bg);color:var(--ink2);white-space:nowrap}
.pill--new{background:var(--bad-bg);color:var(--bad-fg)}
.pill--confirmed{background:var(--info-bg);color:var(--info-fg)}
.pill--shipped{background:#ede9fe;color:#5b21b6}
.pill--done,.pill--ok{background:var(--ok-bg);color:var(--ok-fg)}
.pill--cancelled{background:var(--neu-bg);color:var(--neu-fg)}
.pill--warn{background:var(--warn-bg);color:var(--warn-fg)}

/* окно редактирования (выезжает справа, на телефоне - снизу) */
.sheet-bg{position:fixed;inset:0;background:rgba(15,25,45,.38);z-index:60;display:flex;justify-content:flex-end;opacity:0;pointer-events:none;transition:opacity .2s var(--ease);touch-action:none}
.sheet-bg.on{opacity:1;pointer-events:auto}
/* пока открыто окно или меню, страница под ними стоит: иначе на iPhone палец на шапке окна крутит фон */
body.sheet-open,body.nav-open{overflow:hidden}
@media (max-width:860px){.side{touch-action:none}}
.sheet-bg.is-wide .sheet{width:min(960px,100%)}
.sheet{width:min(560px,100%);height:100%;background:var(--card);display:flex;flex-direction:column;transform:translateX(24px);transition:transform .24s var(--ease)}
.sheet-bg.on .sheet{transform:none}
.sheet__head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line2)}
.sheet__head h3{margin:0;font-size:17px;flex:1}
.sheet__body{flex:1;overflow-y:auto;padding:16px 18px;touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* кнопок в подвале бывает много (отмена, возврат, правка, печать) - переносим на вторую
   строку, а не выдавливаем за край окна */
.sheet__foot{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line2)}
.sheet__foot .spacer{flex:1 1 0;min-width:0}
.sheet__foot .btn{white-space:nowrap}
.x{width:36px;height:36px;border-radius:10px;border:0;background:var(--line2);font-size:20px;cursor:pointer;line-height:1}
@media(max-width:600px){
  .sheet-bg{align-items:flex-end}
  .sheet{height:92vh;height:92dvh;border-radius:20px 20px 0 0;transform:translateY(24px)}
  .sheet__head{padding:12px 16px}
  .sheet__body{padding:14px 16px}
  .sheet__foot{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .sheet__foot .btn--primary{flex:1}
  /* три кнопки и больше не влезают в ширину телефона: главная - первой строкой на всю ширину, остальные под ней */
  .sheet__foot:has(> .btn:nth-of-type(3)){flex-wrap:wrap}
  .sheet__foot:has(> .btn:nth-of-type(3)) .btn--primary{flex:1 1 100%;order:-1}
  .sheet__foot:has(> .btn:nth-of-type(3)) .btn:not(.btn--primary){flex:1 1 0}
  .sheet__foot:has(> .btn:nth-of-type(3)) .spacer{display:none}
}
/* iPhone приближает страницу, если шрифт поля меньше 16px */
@media(max-width:860px){.field input,.field select,.field textarea,.inp{font-size:16px}}
@media (prefers-reduced-motion:reduce){.sheet-bg,.sheet{transition:none}}

.photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.photo{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--line2)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo__bar{position:absolute;inset:auto 4px 4px 4px;display:flex;justify-content:space-between;gap:4px}
.photo__w{position:absolute;left:6px;bottom:6px;z-index:2;border:0;border-radius:999px;padding:3px 9px;font:600 11px/1.2 inherit;color:#0f172a;background:rgba(255,255,255,.92);box-shadow:0 1px 4px rgba(15,23,42,.18);cursor:pointer}
.photo__w:hover{background:#fff}
.photo__w:disabled{opacity:.65;cursor:default}

.photo__bar button{width:26px;height:26px;border-radius:8px;border:0;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;font-size:13px}
.photo--add{display:grid;place-items:center;border:2px dashed var(--line);background:var(--sur);color:var(--mut);cursor:pointer;font-weight:700;font-size:13px;text-align:center;padding:6px}
.photo--first::after{content:"";position:absolute;inset:0;border:2px solid var(--accent);border-radius:12px;pointer-events:none}

.steps{list-style:none;margin:0;padding:0}
.step{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line2)}
.step:first-child{border-top:0}
.step__dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--line2);color:var(--mut);flex:none}
.step.is-done .step__dot{background:var(--ok-bg);color:var(--ok-fg)}
.step__t{flex:1}
.step.is-done .step__t{color:var(--mut);text-decoration:line-through;text-decoration-color:var(--track)}

.dns{display:grid;grid-template-columns:auto 1fr auto;gap:6px 14px;font-size:14px;background:var(--line2);border-radius:12px;padding:12px 14px;margin:10px 0}
.dns b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600}
.oitem{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line2)}
.oitem:first-child{border-top:0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.kv dt{color:var(--mut)} .kv dd{margin:0}

.toast{position:fixed;left:50%;bottom:22px;z-index:90;transform:translate(-50%,14px);opacity:0;pointer-events:none;background:var(--ink);color:var(--on-ink);padding:10px 16px;border-radius:13px;font-weight:600;transition:opacity .2s var(--ease),transform .24s var(--ease);max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* при открытом окне (касса, чек) подсказка поднимается над кнопками окна, чтобы не попадать под палец */
body.sheet-open .toast{bottom:104px}

/* вход */
.auth{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(900px 500px at 70% -10%,#d9f6ef,transparent 60%),var(--bg)}
.auth__card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px 24px;box-shadow:0 24px 60px -30px rgba(15,25,45,.3)}
.auth__brand{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:21px}
.auth__brand img{width:38px;height:38px}
.auth__brand span{color:var(--accent);font-weight:650}
.auth__sub{text-align:center;color:var(--mut);margin:4px 0 20px;font-size:14px}
.auth .btn--primary{width:100%;min-height:48px;margin-top:6px}
/* вход по отпечатку: вторая кнопка под паролем, спокойнее основной */
.btn--face{width:100%;margin-top:10px;background:var(--sur);border:1px solid var(--line);color:var(--ink);font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}
.btn--face::before{content:'';width:18px;height:18px;background:currentColor;-webkit-mask:var(--ico-face) center/contain no-repeat;mask:var(--ico-face) center/contain no-repeat}
.btn--face:hover{border-color:var(--accent);color:var(--accent)}
.pk-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line2)}
.pk-row:first-child{border-top:0}
.pk-row__t{font-weight:650}
.pk-row__s{font-size:12.5px;color:var(--mut)}
.auth__err{background:var(--bad-bg);color:var(--bad-fg);border-radius:11px;padding:9px 12px;font-size:14px;font-weight:600;margin-bottom:12px}
.auth__err:empty{display:none}

/* тариф: лимиты и цены */
.meters{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:640px){.meters{grid-template-columns:1fr}}
.meter__top{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;margin-bottom:6px}
.meter__top b{font-variant-numeric:tabular-nums;white-space:nowrap}
.meter__bar{height:8px;border-radius:6px;background:var(--line2);overflow:hidden}
.meter__bar i{display:block;height:100%;border-radius:6px;background:var(--grad)}
.meter__bar i.is-full{background:#f59e0b}
.tfs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.tfs{grid-template-columns:1fr}}
.tf{border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.tf.is-on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--card))}
.tf__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tf__price{margin:6px 0 2px}
.tf__price b{font-size:20px;font-variant-numeric:tabular-nums}
.tf__list{margin:8px 0 0;padding-left:18px;font-size:13.5px;line-height:1.6}
.banner--demo{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--ok-bg);color:var(--ok-fg);border-color:transparent}

/* вкладки внутри раздела (Каталог: товары и категории; Интернет-магазин: витрина и домен) */
.tabs{display:inline-flex;gap:2px;padding:3px;margin:0 0 16px;border-radius:12px;background:var(--line2);max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs__it{flex:none;padding:8px 16px;border:0;border-radius:9px;background:none;color:var(--mut);font:inherit;font-size:14px;font-weight:650;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.tabs__it:hover{color:var(--ink)}
.tabs__it.is-on{background:var(--sur);color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.08)}
@media (max-width:640px){.tabs{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.tabs::-webkit-scrollbar{display:none}.tabs__it{flex:1 0 auto;padding-left:12px;padding-right:12px;white-space:nowrap}}

/* кнопка сканера рядом с полем штрихкода */
.inp-scan{display:flex;gap:8px;align-items:stretch}
.inp-scan input{flex:1;min-width:0}
.btn-scan{flex:none;display:inline-flex;align-items:center;gap:7px}
.btn-scan svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* инвентаризация */
.inv-now{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.inv-now .card__body{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap}
.inv-how{margin:0 0 12px;padding-left:20px;line-height:1.7}
.inv-minus{color:var(--bad)}
.inv-plus{color:#0f766e}
.li__side .inv-plus{display:block;font-size:12.5px;font-weight:650}
.inv-kpis{margin-bottom:12px}
.inv-progress__bar{height:8px;border-radius:99px;background:var(--line2);overflow:hidden;margin-bottom:6px}
.inv-progress__bar span{display:block;height:100%;width:0;border-radius:99px;background:var(--grad);transition:width .3s var(--ease)}
/* поиск и кнопки: на узком экране поле занимает строку целиком, кнопки уходят под него
   ровным рядом, а не ломаются вразнобой */
.inv-scan{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.inv-scan__field{position:relative;flex:1 1 260px;min-width:0}
.inv-scan .btn-scan{flex:1 1 auto;justify-content:center;white-space:nowrap}
@media(min-width:861px){.inv-scan .btn-scan{flex:0 0 auto}}
.inv-scan__field .inp{width:100%;font-size:16px;padding-top:12px;padding-bottom:12px}
.inv-sug{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -12px rgba(15,23,34,.28);padding:6px;max-height:320px;overflow:auto}
.inv-sug button{display:flex;justify-content:space-between;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:none;font:inherit;text-align:left;cursor:pointer}
.inv-sug button:hover{background:var(--line2)}
.inv-sug button span{color:var(--mut);font-size:12.5px;white-space:nowrap}
/* название показываем целиком: у весового товара разница как раз в хвосте («вес. Алель») */
.inv-sug button{align-items:flex-start}
.inv-sug button b{flex:1;min-width:0;white-space:normal;line-height:1.3;font-weight:600}
.inv-sug button span{flex:none;margin-top:1px}
/* остаток в подсказке: по нему продавец выбирает позицию */
.inv-sug__st{color:var(--ink)!important;background:var(--line2);border-radius:999px;padding:2px 8px}
.inv-sug__st--out{color:var(--bad-fg)!important;background:var(--bad-bg)}
.inv-sug__empty{padding:12px;color:var(--mut)}
.inv-last{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--line2)}
.inv-last b{flex:1;min-width:0}
.inv-last.is-flash{animation:invFlash .9s var(--ease)}
@keyframes invFlash{from{background:color-mix(in srgb,var(--accent2) 30%,var(--card))}to{background:var(--line2)}}
@media (prefers-reduced-motion:reduce){.inv-last.is-flash{animation:none}}
.inv-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.inv-nums{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;text-align:right}
.li--static{cursor:default}
.inv-kv{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:0 0 14px;padding:12px 14px;border-radius:12px;background:var(--line2)}
.inv-kv span{color:var(--mut)}
.inv-kv b{text-align:right}
.inv-steps{margin:-4px 0 6px}
.inv-back{margin:0 0 10px}
@media (max-width:640px){.inv-scan{flex-wrap:wrap}.inv-scan__field{flex:1 1 100%}.inv-scan .btn-scan{flex:1 1 40%;justify-content:center;padding:12px}}
/* Окно «Строки накладной»: шапка документа, строки с товаром и ценами, итог.
   Колонки одинаковой ширины у заголовка и строк - поэтому сетка задана переменной. */
.st-inv, .st-inv--head, .st-inv__row{--inv-cols:minmax(140px,1.2fr) minmax(150px,1fr) 300px 96px}
.st-inv__doc{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--line2);margin-bottom:12px}
.st-inv__doc-t b{display:block;font-size:15px;font-weight:700}
.st-inv__doc-t span{display:block;margin-top:2px}
.st-inv__doc-n{margin-left:auto;text-align:right;line-height:1.2}
.st-inv__doc-n b{font-size:20px}
.st-inv__doc-n span{display:block}
.st-inv--head{display:grid;grid-template-columns:var(--inv-cols);gap:10px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);padding:0 0 6px}
.st-inv{display:flex;flex-direction:column}
.st-inv__row{display:grid;grid-template-columns:var(--inv-cols);gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--line2)}
.st-inv__row.is-new .st-inv__tag{background:var(--warn-bg);color:var(--warn-fg)}
.st-inv__n{font-weight:650;line-height:1.35;overflow-wrap:anywhere}
.st-inv__n small{display:block;font-weight:500;color:var(--mut);font-size:11.5px;margin-top:2px}
.st-inv__sel{display:flex;flex-direction:column;gap:5px;min-width:0}
.st-inv__tag{align-self:flex-start;font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;background:var(--ok-bg);color:var(--ok-fg)}
.st-inv__q3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.st-inv--head .st-inv__q3 span{text-align:center}
.st-inv__f{display:block;min-width:0}
.st-inv__f span{display:none}
.st-inv__f .inp{width:100%;box-sizing:border-box}
.st-inv__row .inp{font-size:15px;padding-top:9px;padding-bottom:9px;text-align:center}
.st-inv__row select.inp{text-align:left}
.st-inv__sum{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.st-inv__total{margin-top:14px;padding:14px;border-radius:14px;background:var(--line2)}
.st-inv__tot-row{display:flex;align-items:baseline;gap:10px;font-size:15px}
.st-inv__tot-row b{margin-left:auto;font-size:20px}
.st-inv__tot-row--sub{margin-top:6px;font-size:14px;color:var(--mut)}
.st-inv__tot-row--sub b{font-size:16px;color:var(--ok)}
.st-inv__tot-row b.is-bad{color:var(--bad)}
.st-inv__note{margin-top:10px;line-height:1.45}
@media (max-width:900px){
  .st-inv--head{display:none}
  .st-inv__row{grid-template-columns:1fr;gap:8px;padding:14px 0}
  .st-inv__sum{text-align:left;color:var(--mut);font-size:13px}
  .st-inv__doc{flex-wrap:wrap}
  .st-inv__f span{display:block;font-size:11.5px;font-weight:650;color:var(--mut);margin-bottom:3px;text-align:center}
}

/* продажа в магазине (касса) */
.pill--pos{background:color-mix(in srgb,var(--accent) 14%,var(--card));color:var(--accent)}
.side__sale{display:flex;align-items:center;justify-content:center;gap:8px}
.side__sale svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sale-list{margin:12px -4px 0;display:flex;flex-direction:column}
.sale-li{display:flex;align-items:center;gap:10px;padding:10px 4px;border-top:1px solid var(--line2)}
.sale-li:first-child{border-top:0}
.sale-li .li__main{flex:1;min-width:0}
.sale-li .li__t{font-size:15.5px;white-space:normal;line-height:1.3}
.sale-qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--sur);flex:none}
.sale-qty button{width:38px;height:40px;border:0;background:none;font:inherit;font-size:19px;font-weight:700;color:var(--ink2);cursor:pointer}
.sale-qty button:active{background:var(--line2)}
.sale-qty input{width:46px;height:40px;border:0;text-align:center;font:inherit;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;padding:0}
.sale-qty--w{padding-right:10px;gap:4px}
.sale-qty--w input{width:74px;text-align:right}
.sale-qty--w span{color:var(--mut);font-size:13px}
.sale-sum{min-width:78px;text-align:right;font-size:15.5px}
.sale-li .x{width:30px;height:30px;border:0;border-radius:9px;background:none;color:var(--mut);font-size:20px;cursor:pointer;flex:none}
.sale-li .x:hover{background:var(--line2);color:var(--bad)}
/* верхняя строка окна продажи: переключатель слева, камера справа - подальше от поиска,
   чтобы кассир не открывал её локтем, когда набирает товар */
/* переключатель и камера - одной высоты и на одной линии: у переключателя свой нижний отступ,
   из-за него кнопка съезжала вверх и выглядела меньше */
.sale-top{display:flex;align-items:stretch;gap:10px;margin:-2px 0 12px}
.sale-top .op-switch{flex:1;min-width:0;margin:0}
.sale-cam{flex:none;min-height:0;padding:0 16px;border-radius:12px;color:var(--ink2);font-weight:650}
.sale-cam svg{width:18px;height:18px}
@media(max-width:600px){.sale-cam span{display:none}.sale-cam{padding:0 14px}}
/* способы оплаты - один сегментный переключатель: выбранный «поднят» белой плашкой */
.sale-pay{display:flex;gap:4px;padding:4px;margin:14px 0 8px;border-radius:14px;background:var(--line2)}
.sale-pay button{flex:1;min-width:0;padding:10px 8px;border:0;border-radius:11px;background:transparent;font:inherit;font-weight:650;color:var(--mut);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s,box-shadow .15s,transform .12s var(--ease)}
.sale-pay button:active{transform:scale(.97)}
.sale-pay button.is-on{background:var(--sur);color:var(--accent);box-shadow:0 1px 2px rgba(15,23,34,.10),0 6px 14px -8px rgba(15,23,34,.25)}
@media (max-width:600px){.sale-pay--many{display:grid;grid-template-columns:1fr 1fr}}
/* «Получено наличными»: сумма крупно, быстрые купюры, строка сдачи */
.sale-cash{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1.5px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:16px;background:var(--sur)}
.sale-cash:focus-within{border-color:var(--accent)}
.sale-cash__row{display:flex;align-items:center;gap:10px}
.sale-cash__label{flex:1;min-width:0;font-size:13.5px;color:var(--mut)}
.sale-cash__inp{display:inline-flex;align-items:baseline;gap:4px}
.sale-cash__inp input{width:130px;border:0;outline:none;background:none;font:inherit;font-size:20px;font-weight:800;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.sale-cash__inp i{font-style:normal;font-size:14px;font-weight:700;color:var(--mut)}
.sale-cash__quick{display:flex;gap:6px;flex-wrap:wrap}
.sale-cash__quick button{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--sur);font:inherit;font-size:13px;font-weight:650;color:var(--ink2);cursor:pointer;font-variant-numeric:tabular-nums;transition:background .15s,color .15s,transform .12s var(--ease)}
.sale-cash__quick button:active{transform:scale(.96)}
.sale-cash__quick button.is-on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.sale-cash__change{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-top:8px;border-top:1px dashed var(--line);font-size:15px;font-weight:700;color:var(--warn)}
.sale-cash__change b{font-size:19px;font-weight:800}
.sale-cash__change.is-ok{color:var(--ok)}
.sale-cash__change:empty{display:none}
/* смешанная оплата: суммы по способам и остаток, который ещё не разнесли */
.sale-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:0 0 6px}
.sale-part{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:14px;padding:9px 12px;background:var(--sur);transition:border-color .15s}
.sale-part:focus-within{border-color:var(--accent)}
.sale-part span{font-size:13px;color:var(--mut);white-space:nowrap}
.sale-part input{flex:1;min-width:0;border:0;outline:none;background:none;font:inherit;font-size:16px;font-weight:700;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
/* подпись в шапке карточки: «12 чеков · 48 300 ₸» */
.card__sub{font-size:13px;color:var(--mut);white-space:nowrap}
/* заголовок карточки с итогом под ним: название и цифры стопкой, кнопка справа не выдавливает текст */
.card__ttl{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.card__ttl h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card__ttl .card__sub{overflow:hidden;text-overflow:ellipsis}
.card__head > .btn{flex:none;white-space:nowrap}
.btn__short{display:none}
/* новый заказ, который ещё не открывали: точка у номера вместо второй пилюли «новый» */
.dot-new{display:inline-block;width:8px;height:8px;border-radius:50%;background:#e5484d;margin-right:7px;vertical-align:2px;box-shadow:0 0 0 3px rgba(229,72,77,.15)}
@media (max-width:600px){
  .card__head > .btn .btn__long{display:none}
  .card__head > .btn .btn__short{display:inline}
  /* на телефоне подпись заказа (время, доставка, оплата) переносится, а не обрезается */
  .li--order .li__s{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
.card__sub b{color:var(--ink)}
.sale-part__left{grid-column:1/-1;font-size:13px;font-weight:650;color:var(--warn);padding:2px 4px}
.sale-part__left.is-ok{color:var(--ok)}
.sale-part--cash{grid-column:1/-1;border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.sale-part__change{grid-column:1/-1;font-size:15px;font-weight:800;color:var(--warn);padding:2px 4px}
.sale-part__change.is-ok{color:var(--ok)}
.list-more{padding:12px;display:flex;justify-content:center}
.sale-li.is-swap{background:color-mix(in srgb,var(--accent) 8%,var(--card));border-radius:12px}
.ie-price{display:inline-flex;align-items:center;gap:6px}
.ie-price input{width:96px;padding:4px 8px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
/* смена на кассе: кто за прилавком и сколько уже пробито */
.shiftbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:11px 16px;border:1px solid var(--line);border-radius:14px;background:var(--sur)}
.shiftbar--off{border-color:var(--warn-line);background:var(--warn-bg)}
.shiftbar__t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.shiftbar__t b{font-size:14.5px}
.shiftbar button{flex:none;margin-left:auto}
/* пин-код: крупное поле и цифровая клавиатура для сенсорного экрана */
.way-switch{margin:14px 0 6px}
.pinfield input{font-size:26px;font-weight:800;letter-spacing:10px;text-align:center;font-variant-numeric:tabular-nums}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:280px;margin:12px auto 0}
.pinpad button{padding:14px 0;border:1px solid var(--line);border-radius:14px;background:var(--sur);font:inherit;font-size:20px;font-weight:700;cursor:pointer;transition:background .12s,transform .12s var(--ease)}
.pinpad button:active{transform:scale(.96);background:var(--line2)}
.pinpad__x{font-size:16px!important;color:var(--mut)}
.pinor{display:flex;align-items:center;gap:10px;margin:16px 0 10px;color:var(--mut);font-size:12.5px}
.pinor::before,.pinor::after{content:"";flex:1;height:1px;background:var(--line)}
/* QR для подтверждения с телефона */
.qrbox{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--sur)}
.qrbox--bad{color:var(--bad);justify-content:center}
.qrbox__img{width:132px;height:132px;flex:none}
.qrbox__img svg{width:100%;height:100%;display:block}
.qrbox__t{display:flex;flex-direction:column;gap:4px;min-width:0}
.confirm-ask{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:14px;background:var(--line2);margin-bottom:12px}
.confirm-ask b{font-size:16px}
/* короткие пары «подпись - значение» в окнах смены */
.kv-lite{display:grid;grid-template-columns:1fr auto;gap:6px 14px;margin:12px 0;font-size:14px}
.kv-lite span{color:var(--mut)}
.kv-lite b{text-align:right;font-variant-numeric:tabular-nums}
/* неприметная ссылка-кнопка рядом со значением: «исправить», «изменить» */
.linkbtn{border:0;background:none;padding:0;margin-left:6px;color:var(--accent,#0a9db0);font:inherit;font-size:13px;text-decoration:underline dotted;cursor:pointer}
/* итог под списком продаж: нал, безнал и общая сумма за выбранный период */
.chips--sub{margin-top:-6px}
.chip--sm{padding:5px 10px;font-size:12.5px}
.sumcard{margin-top:12px}
.sumcard__body{padding:10px 18px 14px}
.sumrow{display:flex;align-items:baseline;gap:12px;padding:6px 0;font-size:14.5px}
.sumrow span{color:var(--mut)}
.sumrow b{margin-left:auto;font-variant-numeric:tabular-nums}
.sumrow--sub{font-size:12.5px;padding:2px 0}
.sumrow--total{margin-top:6px;padding-top:10px;border-top:1px solid var(--line2);font-size:16px}
.sumrow--total span{color:var(--ink);font-weight:700}
.sumrow--total b{font-size:19px}
.sale-go{font-size:16px;min-height:50px;padding-left:20px;padding-right:20px;border-radius:14px}
.sale-go span+span{font-variant-numeric:tabular-nums}
@media (max-width:600px){.sale-li{flex-wrap:wrap;row-gap:8px}.sale-li .li__main{flex-basis:calc(100% - 44px)}.sale-li .x{order:1}.sale-qty{margin-left:0}.sale-sum{margin-left:auto}}

/* способы оплаты на кассе (настройки) */
.pm-list{display:flex;flex-direction:column}
.pm-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line2)}
.pm-row:first-child{border-top:0}
.pm-row.is-off .pm-name,.pm-row.is-off .pm-inp{opacity:.55}
.pm-name{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pm-inp{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:14px}
.pm-move{width:32px;height:32px;border:1px solid var(--line);border-radius:9px;background:var(--sur);color:var(--mut);font-size:15px;cursor:pointer;flex:none}
.pm-move[disabled]{opacity:.35;cursor:default}
.pm-row .x{width:32px;height:32px;flex:none;color:var(--mut)}
.pm-row .x:hover{color:var(--bad)}
.switch{position:relative;display:inline-block;width:42px;height:26px;flex:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch i{position:absolute;inset:0;border-radius:999px;background:var(--track);transition:background .18s;cursor:pointer}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--sur);box-shadow:0 1px 3px rgba(15,23,34,.25);transition:transform .18s cubic-bezier(.23,1,.32,1)}
.switch input:checked+i{background:var(--accent)}
.switch input:checked+i::after{transform:translateX(16px)}
.switch input[disabled]+i{opacity:.6;cursor:default}
@media (max-width:600px){.pm-move{display:none}}

/* окно нового товара на кассе (пробили код, которого нет в каталоге) */
.np-head{display:flex;flex-direction:column;gap:6px;padding:12px 14px;margin-bottom:14px;border-radius:14px;background:color-mix(in srgb,var(--accent) 7%,var(--card));border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line))}
.np-code{font-size:13px;color:var(--mut)}
.np-code b{color:var(--ink);font-size:15px;letter-spacing:.3px}
.np-hint{font-size:14px;line-height:1.45;color:var(--ink)}

/* фото товара по штрихкоду (открытые базы, Яндекс) */
.ph-find{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.ph-find:empty{display:none}
.ph-find__head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ph-cands{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.ph-cand{position:relative;display:flex;flex-direction:column;gap:4px;padding:6px;border:1.5px solid var(--line);border-radius:12px;background:var(--sur);cursor:pointer;transition:border-color .15s}
.ph-cand:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px rgba(10,157,176,.14)}
.ph-cand input{position:absolute;top:10px;left:10px;width:18px;height:18px;accent-color:var(--accent)}
.ph-cand img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:8px;background:var(--line2)}
.ph-cand__w{position:absolute;top:8px;right:8px;font-size:10px;font-style:normal;font-weight:600;color:var(--ok-fg);background:var(--ok-bg);border-radius:999px;padding:2px 7px}
.ph-cand__w--mark{background:var(--warn-bg);color:var(--warn-fg)}
.ph-cand span{font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-find__foot{display:flex;gap:8px;flex-wrap:wrap}

/* склад: оприходование и списание */
.st-doc .card__body{display:flex;flex-direction:column;gap:12px}
.st-doc .field{margin:0}
.st-reasons .chip{display:inline-flex;align-items:center;gap:6px}
.st-reasons .chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.st-x{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:-4px;border-radius:50%;font-size:14px;line-height:1;opacity:.7}
.st-x:hover{opacity:1;background:rgba(0,0,0,.12)}
.st-add{border-style:dashed}
/* окно оплаты: открывается по «Пробить» - сумма, способ, сдача и печать чека */
/* ===== окно оплаты: на компьютере - окно по центру, на телефоне - шторка снизу ===== */
.paywin{position:fixed;inset:0;z-index:85;display:grid;place-items:center;padding:16px;background:rgba(15,23,34,.45);animation:askIn .14s var(--ease)}
.paywin__box{width:min(520px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;background:var(--card);border-radius:22px;overflow:hidden;box-shadow:0 34px 80px -26px rgba(15,23,34,.55);animation:pwIn .22s var(--ease)}
@keyframes pwIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.paywin__head{display:flex;align-items:center;gap:12px;padding:16px 20px 14px;border-bottom:1px solid var(--line2)}
.paywin__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.paywin__t span{font-size:13.5px;color:var(--mut)}
.paywin__t small{font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paywin__head b{margin-left:auto;font-size:32px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.paywin__head .x{flex:none}
.paywin__body{padding:14px 20px 16px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px}
.paywin__body .sale-parts{margin:0}
.paywin__foot{display:flex;gap:10px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line2);background:var(--card)}
.paywin__foot .btn{min-height:52px;border-radius:14px}
.paywin__foot .sale-go{flex:1;font-size:17px}
/* способы оплаты - плитки с иконками, названия не обрезаются */
.paypick{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.paypick--2{grid-template-columns:1fr 1fr}
.paypick button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:8px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--sur);font:inherit;font-size:15px;font-weight:700;color:var(--ink2);cursor:pointer;transition:border-color .15s,background .15s,color .15s,transform .12s}
.paypick button svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--mut);transition:color .15s}
.paypick button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paypick button:active{transform:scale(.97)}
.paypick button.is-on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--card));color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.paypick button.is-on svg{color:var(--accent)}
.payopts{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.payopts .sale-print{padding:2px 0}
.payopts .sale-note__add{margin:0}
.paywin .sale-note{margin:0}
.paywin .sale-note:not(.is-open){display:none}
@media (max-width:600px){
  .paywin{padding:0;place-items:end center}
  .paywin__box{width:100%;max-height:94dvh;border-radius:22px 22px 0 0;animation:sheetUp .26s var(--ease)}
  .paywin__head{padding:14px 16px 12px}
  .paywin__head b{font-size:28px}
  .paywin__body{padding:12px 16px 14px}
  .paywin__foot{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .paywin__foot #pwBack{flex:0 0 auto;padding-left:14px;padding-right:14px}
  .paywin__foot .sale-go{min-height:56px}
  .paypick button{min-height:56px;font-size:15.5px}
}
@keyframes sheetUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media (max-height:560px) and (min-width:601px){.paywin__head{padding:10px 20px}.paywin__head b{font-size:26px}.paypick button{min-height:46px}.paywin__foot .btn{min-height:46px}}
/* своё окно подтверждения: у кассы по системному промахиваются пальцем */
.ask{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(15,23,34,.4);animation:askIn .14s var(--ease)}
@keyframes askIn{from{opacity:0}to{opacity:1}}
.ask__box{width:min(380px,88vw);background:var(--card);border-radius:20px;padding:20px;box-shadow:0 30px 70px -24px rgba(15,23,34,.5)}
.ask__t{font-size:17px;font-weight:800;margin-bottom:6px}
.ask__m{font-size:14.5px;color:var(--ink2);line-height:1.45;white-space:pre-line}
.ask__in{width:100%;margin-top:14px;min-height:46px;padding:0 14px;border:1px solid var(--line);border-radius:12px;font:inherit;font-size:15.5px;background:var(--line2)}
.ask__in:focus{outline:none;border-color:var(--accent);background:var(--sur);box-shadow:0 0 0 3px rgba(10,157,176,.12)}
.ask__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ask__b{display:flex;gap:8px;margin-top:18px}
.ask__b .btn{flex:1;min-height:44px}
@media(prefers-reduced-motion:reduce){.ask{animation:none}}
/* чтение накладной: видно, что идёт работа, а не зависло */
.readbar{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(15,23,34,.35)}
.readbar__box{width:min(360px,86vw);background:var(--card);border-radius:18px;padding:18px;box-shadow:0 24px 60px -20px rgba(15,23,34,.45)}
.readbar__t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.readbar__t b{font-size:15px}
.readbar__t .num{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.readbar__l{height:8px;border-radius:999px;background:var(--line2);overflow:hidden}
.readbar__l i{display:block;height:100%;width:0;border-radius:999px;background:var(--grad);transition:width .3s var(--ease)}
/* строка проведённого документа: по ней правят закуп, цену и сам товар */
.st-row--edit{cursor:pointer;border-radius:12px}
.st-row--edit:hover{background:var(--line2)}
.st-row__edit{color:var(--accent);text-decoration:underline dotted}
/* поиск поставщика прямо в поле: список базы и кнопка «добавить нового» */
.st-head__sup{position:relative}
.st-head__sup .inv-sug{top:calc(100% + 4px)}
.desk__upd{margin:10px 0 2px;padding:8px 12px;border-radius:10px;background:var(--line2)}
/* «Новый товар» рядом с камерой: выделяем акцентом - ей пользуются каждый приход */
.btn-scan--new{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--accent)}
.btn-scan--new svg{width:18px;height:18px}
/* в строке прихода три поля цен: у каждого своя подпись, иначе непонятно, где что */
.st-cost{display:flex;flex-direction:column;gap:2px}
.st-cap{font-size:10.5px;line-height:1;color:var(--mut);white-space:nowrap}
.st-cost--mark{max-width:86px}
@media(max-width:760px){.st-cost,.st-cost--mark{max-width:none;flex:1 1 30%}}
/* шапка прихода: поставщик, номер накладной и способ оплаты в одну строку */
.st-head{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:10px;align-items:end}
.st-head .field{margin:0}
.st-head__pay .chips{display:flex;gap:6px}
.st-sum{min-width:88px;text-align:right;font-variant-numeric:tabular-nums}
.st-total__big{font-size:16px}
@media (max-width:760px){.st-head{grid-template-columns:1fr}.st-sum{min-width:0}}
.st-list{display:flex;flex-direction:column;margin:0 -4px}
.st-li{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 4px;border-top:1px solid var(--line2)}
.st-li .st-was{flex-basis:100%;margin-top:-4px}
.st-li:first-child{border-top:0}
.st-li .li__main{flex:1;min-width:0}
.st-li .x{width:30px;height:30px;border:0;border-radius:9px;background:none;color:var(--mut);font-size:20px;cursor:pointer;flex:none}
.st-li .x:hover{background:var(--line2);color:var(--bad)}
.st-rs{flex:none;width:200px}
.st-reason{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:11px;background:var(--sur);font:inherit;font-size:13.5px}
.st-rs .iossel__trig{padding:8px 10px;font-size:13.5px}
.st-cost{width:112px}
.st-cost input{width:100%;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:11px;font:inherit;font-variant-numeric:tabular-nums;text-align:right}
.st-empty{padding:18px 4px}
.st-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 20px 16px;border-top:1px solid var(--line2)}
.st-total{font-size:14px;color:var(--mut)}
.st-total b{color:var(--ink)}
.st-rows{display:flex;flex-direction:column;margin-top:10px}
.st-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line2)}
.st-row .li__main{flex:1;min-width:0}
@media (max-width:600px){
  /* строка товара: название и крестик сверху, количество и причина (закуп) - в одну строку */
  .st-li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 10px}
  .st-li .li__main{grid-column:1/3;grid-row:1}
  .st-li .x{grid-column:3;grid-row:1}
  .st-li .st-was{grid-column:1/-1;margin-top:0}
  .st-li .sale-qty{grid-column:1;grid-row:2}
  .st-li .st-rs{grid-column:2/4;grid-row:2;width:auto;min-width:0}
  .st-foot{padding:12px 14px 14px}
  .st-foot .btn--primary{flex:1 1 100%}
}

/* плавающая кнопка сканера на телефоне */
.scan-fab{display:none}
@media (max-width:860px){
  .scan-fab{display:grid;place-items:center;position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:40;width:60px;height:60px;border:0;border-radius:50%;background:var(--grad);color:#fff;box-shadow:0 12px 28px -8px rgba(10,157,176,.6),0 2px 6px rgba(15,23,34,.18);cursor:pointer;transition:transform .14s var(--ease)}
  .scan-fab:active{transform:scale(.94)}
  .scan-fab svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  body.nav-open .scan-fab{display:none}
}
@media (prefers-reduced-motion:reduce){.scan-fab{transition:none}}

@media (max-width:860px){.main{padding-bottom:96px}}

/* программа лояльности */
.seg{display:flex;gap:2px;padding:3px;border-radius:12px;background:var(--line2)}
.seg button{flex:1;padding:9px 0;border:0;border-radius:9px;background:none;font:inherit;font-weight:650;color:var(--mut);cursor:pointer}
.seg button.is-on{background:var(--sur);color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.08)}
/* переключатель потоков в «Заказах»: не растягиваем на весь экран на компьютере */
.ord-seg{max-width:560px;margin-bottom:12px}
.ord-seg button{padding:9px 12px;white-space:nowrap}
.loy-levels{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.loy-lv{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 76px 30px;gap:8px;align-items:center}
.loy-lv input{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:10px;font:inherit;background:var(--sur);min-width:0}
.loy-lv input:disabled{background:var(--line2);color:var(--mut)}
.loy-lv--head span{font-size:12px;color:var(--mut);font-weight:600}
.loy-lv .x{width:30px;height:30px;border:0;border-radius:9px;background:none;color:var(--mut);font-size:20px;cursor:pointer}
.loy-lv .x:hover{background:var(--line2);color:var(--bad)}
.loy-example{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--line2);display:flex;flex-direction:column;gap:6px;font-size:14px}
.loy-example div{display:flex;justify-content:space-between;gap:12px}
.loy-note{margin:-4px 0 10px 28px}
.loy-cats{flex-wrap:wrap}
.loy-kpis{grid-template-columns:1fr 1fr;margin:14px 0 10px}
.loy-progress{margin-bottom:12px}
@media (max-width:600px){.loy-lv{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 60px 30px}}

/* покупатель в окне продажи */
.sale-cust{margin-top:14px;padding-top:12px;border-top:1px solid var(--line2)}
.sale-card{margin-top:8px;padding:12px 14px;border-radius:12px;background:var(--line2);display:flex;flex-direction:column;gap:8px}
.sale-card__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sale-card__bal{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.sale-card__row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.sale-card__use{padding:0;margin:0}
.sale-card__use b{margin-left:auto}
.sale-card__name{background:var(--sur)}
/* поле суммы: крупно и ровно. Разрядка между цифрами - это стиль пин-кода, деньгам он не идёт */
.sumfield__in{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:14px;padding:10px 14px;background:var(--sur);transition:border-color .15s}
.sumfield__in:focus-within{border-color:var(--accent)}
.sumfield__in input{flex:1;min-width:0;border:0;outline:none;background:none;font:inherit;font-size:26px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--ink)}
.sumfield__in i{font-style:normal;font-size:17px;font-weight:700;color:var(--mut)}
/* сумму строки правят чаще цены («отдам за 500»), поэтому она сама - кнопка */
.sale-sum--btn{border:0;background:none;padding:2px 0;font:inherit;font-weight:800;color:inherit;cursor:pointer;text-decoration:underline dotted;text-underline-offset:4px;text-decoration-color:var(--line)}
.sale-sum--btn:hover{text-decoration-color:var(--accent)}
/* правка цены позиции прямо в чеке */
.sale-price{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.sale-price s{opacity:.6;margin-left:4px}
.sale-li--off .sale-price{color:var(--bad)}
.sale-edit{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0 4px 10px;border-top:0}
.sale-edit label{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--mut)}
.sale-edit input{width:110px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;font:inherit;font-variant-numeric:tabular-nums;text-align:right}
/* скидка на весь чек */
.sale-disc{margin-top:10px}
.sale-disc__box{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.sale-disc__box label{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--mut)}
.sale-disc__box input{width:110px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;font:inherit;font-variant-numeric:tabular-nums;text-align:right}
.sale-break{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.sale-break div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.sale-break__total{padding-top:6px;border-top:1px solid var(--line2);font-size:15.5px !important}

.loy-sub{margin:-2px 0 12px 28px;padding:10px 12px;border-radius:12px;background:var(--line2)}
.loy-sub .check{margin:0 0 6px}

/* Национальный каталог товаров: отметка у товара */
.pill--nkt{background:var(--ok-bg);color:var(--ok-fg)}
.pill--nkt-miss{background:var(--warn-bg);color:var(--warn-fg)}
.nkt-line{margin:-4px 0 12px;font-size:13px;line-height:1.45;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.nkt-line:empty{display:none}
.nkt-line__ok{color:var(--ok);font-weight:700}
.nkt-line__miss{color:var(--warn);font-weight:700}
.nkt-line__wait{color:var(--mut, #6b7790)}
.nkt-line__btn{padding:3px 10px;border-radius:999px;border:1px solid var(--line, #e3e8ef);background:var(--sur);font:inherit;font-size:12.5px;font-weight:650;cursor:pointer}
.nkt-line__btn:active{transform:scale(.97)}

/* аналитика продаж */
.an-bar{display:flex;gap:10px 16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}
.an-presets{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.an-bar__side{display:flex;gap:8px;align-items:center}
.an-seg{flex:none}
.an-seg button{padding:7px 12px;font-size:13.5px;white-space:nowrap}
.an-seg--sm button{padding:5px 10px;font-size:13px}
.an-custom{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 8px}
.an-custom .field{margin:0;min-width:160px}
.an-range{font-size:13.5px;color:var(--ink2);margin:2px 0 14px}
#anBody{transition:opacity .15s}
#anBody.is-loading{opacity:.55}
.an-kpis{margin-bottom:12px}
.an-kpis--sm .kpi__v{font-size:19px}
.an-kpis--sm{margin-bottom:16px;grid-template-columns:repeat(5,minmax(0,1fr))}
/* второй ряд из пяти карточек: на узких экранах складываем так, чтобы карточка не оставалась одна */
@media(max-width:1100px){.an-kpis--sm{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.an-kpis--sm{grid-template-columns:repeat(2,minmax(0,1fr))}.an-kpis--sm .kpi:last-child:nth-child(odd){grid-column:1/-1}}
.an-note{display:block;margin-top:2px}
.an-kpi__v{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.an-d{display:inline-flex;align-items:center;padding:1px 7px;border-radius:999px;font-size:12px;font-weight:700;background:var(--line2);color:var(--ink2);white-space:nowrap;font-variant-numeric:tabular-nums}
.an-d--up{background:var(--ok-bg);color:var(--ok-fg)}
.an-d--down{background:var(--bad-bg);color:var(--bad-fg)}
.an-d--new{background:var(--info-bg);color:var(--info-fg)}
.an-head{flex-wrap:wrap}
.an-legend{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mut);font-weight:600}
.an-dot{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none;vertical-align:-1px}
.an-legend .an-dot+span{margin-right:8px}
.an-dot--pos,.an-bar--pos{background:#0a9db0;fill:#0a9db0}
.an-dot--web,.an-bar--web{background:#7fd6a0;fill:#7fd6a0}
.an-chart{position:relative;padding:8px 12px 6px 4px;min-height:200px}
.an-chart svg.an-svg{display:block;width:100%;height:auto;stroke:none;fill:none;touch-action:pan-y}
.an-chart svg.an-svg text{stroke:none}
.an-chart .an-grid{stroke:var(--line2);stroke-width:1}
.an-ax{font-size:11px;fill:var(--mut);font-variant-numeric:tabular-nums}
.an-wkend{fill:#f6f8fb}
.an-hl{fill:rgba(21,32,51,.05)}
.an-tip{position:absolute;z-index:2;min-width:170px;padding:9px 11px;border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 30px -12px rgba(16,24,40,.28);font-size:13px;pointer-events:none}
.an-tip__t{font-weight:700;margin-bottom:5px}
.an-tip__r{display:flex;align-items:center;gap:7px;padding:1px 0}
.an-tip__r b{margin-left:auto;padding-left:12px}
.an-tip__sum{border-top:1px solid var(--line2);margin-top:4px;padding-top:5px;font-weight:650}
.an-h3{margin:18px 0 8px;font-size:13px;font-weight:700;color:var(--mut);text-transform:none}
.an-h3:first-child{margin-top:0}
.an-row{padding:6px 0}
.an-row__top{display:flex;align-items:baseline;gap:10px;justify-content:space-between;font-size:14px;margin-bottom:5px}
.an-row__v{white-space:nowrap}
.an-meter{height:6px;border-radius:99px;background:var(--line2);overflow:hidden}
.an-meter i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.an-meter--sm{height:5px;width:70px;flex:none}
.an-meter--warn i{background:linear-gradient(90deg,#f59e0b,#ef4444)}
.an-wo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 28px}
@media(max-width:760px){.an-wo{grid-template-columns:minmax(0,1fr)}}
.an-split{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--line2);margin:2px 0 12px}
.an-split i{display:block;height:100%}
.an-ch{display:flex;align-items:center;gap:10px;padding:7px 0;font-weight:650}
.an-ch .an-dot{align-self:flex-start;margin-top:5px}
.an-ch__main{flex:1;min-width:0}
.an-ch__main .small{font-weight:500}
.an-note{margin-top:6px}
.an-heat-wrap{overflow-x:auto;margin:0 -4px;padding:0 4px}
.an-heat{display:grid;gap:3px;min-width:380px}
.an-heat__hd{font-size:10.5px;color:var(--mut);text-align:left;height:14px;line-height:14px}
.an-heat__wd{font-size:12px;color:var(--mut);font-weight:600;line-height:20px}
.an-heat__c{height:20px;border-radius:4px;background:var(--line2);position:relative;overflow:hidden}
.an-heat__c[style*="--a"]::after{content:"";position:absolute;inset:0;background:#0a9db0;opacity:var(--a)}
.an-heat__scale{display:flex;align-items:center;gap:8px;margin:10px 0 0}
.an-heat__scale i{width:90px;height:8px;border-radius:99px;background:linear-gradient(90deg,rgba(10,157,176,.14),#0a9db0)}
.an-facts{display:flex;flex-direction:column;gap:4px;margin-top:12px;font-size:14px}
.an-table-wrap{overflow-x:auto}
.an-table{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
.an-table th{font-size:12px;font-weight:700;color:var(--mut);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line2);white-space:nowrap}
.an-table td{padding:9px 12px;border-top:1px solid var(--line2);vertical-align:middle}
.an-table tbody tr:first-child td{border-top:0}
.an-table th:first-child,.an-table td:first-child{padding-left:18px}
.an-table th:last-child,.an-table td:last-child{padding-right:18px}
.an-warn{color:var(--warn)}
.an-r{text-align:right!important;white-space:nowrap}
.an-share{white-space:nowrap}
.an-share>*{display:inline-block;vertical-align:middle}
.an-share .num{margin-left:8px;font-size:13px;min-width:34px}
.an-prod{display:flex;align-items:center;gap:9px;min-width:0}
.an-prod__n{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:340px}
.an-abc{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;font-size:11.5px;font-weight:800;flex:none}
.an-abc--A{background:var(--ok-bg);color:var(--ok-fg)}
.an-abc--B{background:var(--info-bg);color:var(--info-fg)}
.an-abc--C{background:var(--neu-bg);color:var(--neu-fg)}
.an-more{padding:10px 18px 0}
.an-abc-help{display:flex;flex-direction:column;gap:6px;padding:14px 18px 16px}
.an-abc-help>div{display:flex;align-items:center;gap:8px}
.an-mv{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line2)}
.an-h3+.an-mv,.an-dead+.an-mv{border-top:0}
.an-mv__main{flex:1;min-width:0}
.an-mv__n{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-mv b{white-space:nowrap}
.an-up{color:var(--ok)}
.an-down{color:var(--bad)}
.an-dead{font-size:14px;color:var(--ink2);margin-bottom:8px}
@media (max-width:860px){
  .an-bar{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .an-presets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px}
  .an-presets::-webkit-scrollbar{display:none}
  .an-presets .chip{flex:none}
  .an-bar__side .an-seg{flex:1}
  .an-bar__side .an-seg button{flex:1}
}
@media (max-width:600px){
  .an-table{min-width:0}
  .an-table thead{display:none}
  .an-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:10px 16px;border-top:1px solid var(--line2)}
  .an-table tbody tr:first-child{border-top:0}
  .an-table td,.an-table td:first-child,.an-table td:last-child{padding:0;border:0}
  .an-table td:first-child{grid-column:1/-1}
  .an-table td:nth-child(2),.an-table td:nth-child(4){text-align:left!important}
  .an-prod{align-items:flex-start}
  .an-prod__n{white-space:normal;max-width:none}
  .an-meter--sm{width:56px}
  .an-kpis .kpi__v{font-size:20px}
  .an-kpis--sm .kpi__v{font-size:17px}
  .an-bar__side{flex-wrap:wrap}
  .an-head .an-legend{order:3;width:100%}
}

/* товарный чек: подсказка с кнопкой, окно продажи, настройки с предпросмотром */
.toast{width:max-content}
.toast--act{display:flex;align-items:center;gap:12px;pointer-events:auto}
@media (max-width:860px){.toast--act{bottom:calc(96px + env(safe-area-inset-bottom))}}
.toast__btn{flex:none;border:0;border-radius:9px;padding:6px 11px;background:var(--sur);color:var(--ink);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.toast__btn:active{transform:scale(.97)}
.sale-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sale-print{padding:6px 0;font-size:14px}
.rcpt-set{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:start}
.rcpt-set__form{max-width:520px}
.rcpt-set__w{max-width:320px;margin-bottom:6px}
.rcpt-set__w button span+span{margin-left:.25em}
.rcpt-pv{background:var(--line2);border-radius:14px;padding:14px;display:flex;justify-content:center;overflow-x:auto}
.rcpt-pv .rcpt{box-shadow:0 8px 24px -14px rgba(16,24,40,.35);border-radius:2px}
@media (max-width:900px){.rcpt-set{grid-template-columns:minmax(0,1fr)}.rcpt-set__form{max-width:none}}

/* касса без интернета: плашка в шапке и заглушка разделов */
.net{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;border:0;font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.net::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.net--down{background:var(--warn-bg);color:var(--warn-fg)}
.net--sync{background:var(--info-bg);color:var(--info-fg)}
.net--sync::before{animation:netPulse 1s ease-in-out infinite}
.net--bad{background:var(--bad-bg);color:var(--bad-fg)}
@keyframes netPulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.net--sync::before{animation:none}}
.offline{border-color:var(--warn-line);background:var(--warn-bg)}
.offline__t{font-size:17px;font-weight:800;margin-bottom:6px}
.offline p{margin:0 0 14px;max-width:60ch}
@media (max-width:600px){.head .net{order:3;flex-basis:auto}}

/* программа SEBE Касса */
.desk__t{font-weight:800;font-size:16px;margin-bottom:6px}
.desk__list{margin:0 0 14px;padding-left:18px;color:var(--ink2);display:grid;gap:3px}
.desk-update{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.desk__dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:12px}
.desk__os{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
@media (max-width:700px){.desk__dl{grid-template-columns:1fr}}

/* ===== дашборд: шапка с выручкой, быстрые действия, что требует внимания ===== */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px;align-items:end;padding:22px 24px;margin-bottom:14px;border-radius:22px;color:#fff;background:linear-gradient(135deg,#0a8fa3 0%,#12b0be 45%,#2bc15e 100%);box-shadow:0 18px 40px -24px rgba(10,143,163,.7)}
.hero__l{font-size:13px;font-weight:650;opacity:.85}
/* спрятать выручку от посторонних глаз у кассы */
.hero__l{display:flex;align-items:center;gap:8px}
.hero__eye{width:26px;height:26px;flex:none;display:grid;place-items:center;border:0;border-radius:9px;
  background:rgba(255,255,255,.2);color:#fff;cursor:pointer;transition:background .15s,transform .12s var(--ease)}
.hero__eye:hover{background:rgba(255,255,255,.28)}
.hero__eye:active{transform:scale(.94)}
.hero__eye svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero__v{font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-top:2px}
.hero__s{margin-top:8px;font-size:13.5px;opacity:.92;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.hero__s i{width:4px;height:4px;border-radius:50%;background:var(--sur);opacity:.6;align-self:center}
/* способы оплаты за сегодня: нал, Kaspi, карта - по ним вечером сверяют кассу */
.hero__pay{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.hero__pay-it{display:inline-flex;align-items:baseline;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.18);font-size:12.5px}
.hero__pay-it b{font-size:13.5px}
.hero__side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.spark{display:flex;align-items:flex-end;gap:4px;height:56px;width:100%}
.spark i{flex:1;border-radius:4px 4px 2px 2px;background:rgba(255,255,255,.42);min-height:4px}
.spark i.is-today{background:var(--sur)}
.hero__cap{font-size:11.5px;opacity:.75}
.hero__plan{position:absolute;top:14px;right:16px;display:inline-flex;align-items:center;gap:8px;padding:5px 6px 5px 5px;border:0;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font-size:12.5px;font-weight:600;cursor:pointer}
.hero__plan .pill{background:var(--sur);color:var(--ink)}
.hero__plan .pill--warn{background:var(--warn-bg);color:var(--warn-fg)}
.qa{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:12px;margin-bottom:14px}
.qa--2{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:0}
.qa__it{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);text-align:left;cursor:pointer;transition:transform .14s var(--ease),border-color .15s}
.qa__it:hover{border-color:color-mix(in srgb,var(--mut) 45%,var(--line))}
.qa__it:active{transform:scale(.98)}
.qa__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;margin-bottom:8px;background:color-mix(in srgb,var(--accent) 12%,var(--card));color:var(--accent)}
.qa__ic svg{width:22px;height:22px}
.qa__it:first-child .qa__ic{background:var(--grad);color:#fff}
.qa__t{font-weight:750;font-size:15px}
.qa__s{font-size:12.5px;color:var(--mut)}
.att{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
/* товары на исходе: спокойная строка внизу главной, без красного акцента */
.lowline{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 14px;padding:11px 16px;border:1px solid var(--line);border-radius:14px;background:var(--sur);font:inherit;font-size:13.5px;color:var(--mut);text-align:left;cursor:pointer;transition:border-color .15s,color .15s}
.lowline:hover{border-color:var(--line2);color:var(--ink2)}
.lowline__n{padding:2px 9px;border-radius:999px;background:var(--line2);color:var(--ink2);font-weight:700;font-size:12.5px}
.lowline__go{margin-left:auto;color:var(--accent);font-weight:650;white-space:nowrap}
.att__it{display:inline-flex;align-items:center;gap:10px;padding:9px 14px 9px 10px;border:1px solid var(--line);border-radius:999px;background:var(--sur);font-weight:600;color:var(--ink2);cursor:pointer;box-shadow:var(--shadow)}
.att__it b{min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--line2);display:grid;place-items:center;font-size:13px}
.att__it.is-hot b{background:#e11d48;color:#fff}
.att__it.is-warn b{background:var(--warn-bg);color:var(--warn-fg)}
.rank{width:26px;height:26px;border-radius:8px;background:var(--line2);display:grid;place-items:center;font-size:12.5px;font-weight:800;color:var(--mut);flex:none}
.list .li:first-child .rank{background:var(--warn-bg);color:var(--warn-fg)}
@media(max-width:1000px){.qa{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr);padding:18px 18px 16px;border-radius:20px}
  .hero__v{font-size:34px}
  .hero__side{align-items:stretch}
  .spark{height:44px}
  .hero__cap{text-align:right}
  .hero__plan{top:12px;right:12px}
  .qa{gap:10px}
  .qa__it{padding:12px 14px}
  .qa__ic{width:36px;height:36px;margin-bottom:6px}
}

/* ===== нижняя панель на телефоне: Главная · Заказы · [скан] · Каталог · Ещё ===== */
.tabbar{display:none}
@media(max-width:860px){
  .burger{display:none}
  .main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .tabbar{display:grid;grid-template-columns:1fr 1fr 76px 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:24;background:var(--card);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:50px;padding:4px 2px;border:0;border-radius:12px;background:none;color:var(--mut);font-size:11px;font-weight:650;cursor:pointer}
  .tabbar button svg{width:23px;height:23px;stroke-width:1.8}
  .tabbar button.is-on{color:var(--accent)}
  .tabbar button:active{transform:scale(.95)}
  .tabbar button b{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e11d48;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
  .scan-fab{left:50%;right:auto;transform:translateX(-50%);bottom:calc(26px + env(safe-area-inset-bottom));width:62px;height:62px;border:4px solid var(--card);box-shadow:0 10px 24px -8px rgba(10,157,176,.6),0 2px 6px rgba(15,23,34,.15)}
  .scan-fab:active{transform:translateX(-50%) scale(.94)}
  .sheet__foot{box-shadow:0 -10px 24px -20px rgba(23,32,43,.35)}
}

/* ===== шапки карточек с иконкой, пустые экраны ===== */
.card__head .h-ic{width:30px;height:30px;border-radius:9px;background:var(--line2);color:var(--ink2);display:grid;place-items:center;flex:none;margin-right:-2px}
.card__head .h-ic svg{width:17px;height:17px}
.empty--big{padding:40px 18px 34px;display:flex;flex-direction:column;align-items:center;gap:6px}
.empty__ic{width:56px;height:56px;border-radius:18px;background:color-mix(in srgb,var(--accent) 10%,var(--card));color:var(--accent);display:grid;place-items:center;margin-bottom:6px}
.empty__ic svg{width:26px;height:26px}
.empty__t{font-weight:750;font-size:16px;color:var(--ink)}
.empty__s{max-width:440px;font-size:13.5px;line-height:1.5}
.empty__a{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}

/* ===== каталог: чипы категорий, плитки и список ===== */
.cat-bar .inp{flex:1 1 220px;min-width:0;max-width:none}
.cat-bar .cat-bar__st{flex:0 1 190px}
.cat-bar .iossel{flex:0 1 200px;width:auto}   /* select обёрнут в iOS-список: ширину задаём обёртке */
.chips--scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:-4px -2px 12px;padding:4px 2px 6px;-webkit-overflow-scrolling:touch}
.chips--scroll::-webkit-scrollbar{display:none}
.chips--scroll .chip{flex:none}
.vswitch{display:inline-flex;gap:2px;padding:3px;border-radius:11px;background:var(--line2);flex:none}
.vswitch button{width:36px;height:32px;border:0;border-radius:8px;background:none;color:var(--mut);display:grid;place-items:center;cursor:pointer}
.vswitch button svg{width:18px;height:18px}
.vswitch button.is-on{background:var(--sur);color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.08)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:12px}
.pc{display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;font:inherit;color:inherit;transition:transform .14s var(--ease),border-color .15s}
.pc:hover{border-color:color-mix(in srgb,var(--mut) 45%,var(--line))}
.pc:active{transform:scale(.985)}
.pc.is-hidden{opacity:.6}
.pc__img{position:relative;aspect-ratio:1;background:var(--line2);display:grid;place-items:center;color:var(--mut);font-size:30px;font-weight:800}
.pc__img img{width:100%;height:100%;object-fit:cover;display:block}
.pc__star{position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:8px;background:var(--sur);color:#d97706;display:grid;place-items:center;font-style:normal;font-size:14px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.pc__out{position:absolute;left:8px;right:8px;bottom:8px;padding:4px 8px;border-radius:8px;background:rgba(23,32,43,.78);color:#fff;font-size:12px;font-weight:650;text-align:center}
.pc__b{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px}
.pc__t{font-weight:650;font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.pc__c{font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc__p{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;margin-top:4px}
.pc__p b{font-size:16px}
.pc__stock{margin-left:auto;font-size:12px;color:var(--mut);white-space:nowrap}
.pc__pills{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
@media(max-width:600px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pc__b{padding:8px 10px 10px}
  /* поиск + сканер в первой строке, фильтр + вид во второй */
  .cat-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .cat-bar .inp,.cat-bar .cat-bar__st{width:100%;max-width:none}
}

/* ===== заказы: кружок покупателя ===== */
.li__av{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;font-size:16px;color:#fff}
.li__av--pos{background:color-mix(in srgb,var(--accent) 12%,var(--card));color:var(--accent)}
.li__av svg{width:20px;height:20px}

/* ===== обновление кабинета ===== */
.side__refresh{display:flex;align-items:center;justify-content:center;gap:6px}
.side__refresh svg{width:16px;height:16px}
.upd{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 10px;border:0;border-radius:999px;background:var(--grad);color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 6px 14px -8px rgba(15,183,198,.8);animation:updIn .3s var(--ease)}
.upd svg{width:16px;height:16px}
.upd:active{transform:scale(.96)}
@keyframes updIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.upd{animation:none}}

/* окно продажи: что делаем с пробитым товаром - продажа, приход, списание */
.op-switch{margin:-2px 0 12px}
.op-switch button{padding:10px 0;font-size:14.5px}

/* ===== галочки «вкл/выкл» - переключатели в стиле iPhone ===== */
.check input[type=checkbox]{-webkit-appearance:none;appearance:none;position:relative;flex:none;width:44px;height:27px;margin:0;border-radius:999px;background:var(--track);cursor:pointer;transition:background .18s}
.check input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:var(--sur);box-shadow:0 1px 3px rgba(15,23,34,.28);transition:transform .2s var(--ease)}
.check input[type=checkbox]:checked{background:var(--accent2)}
.check input[type=checkbox]:checked::after{transform:translateX(17px)}
.check input[type=checkbox]:disabled{opacity:.5;cursor:default}
.check input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.check input[type=checkbox],.check input[type=checkbox]::after{transition:none}}

/* ===== настройки: быстрые переходы, журнал уведомлений ===== */
.set-jump{margin-bottom:14px}
#view .card[id^="set-"]{scroll-margin-top:16px}
.notif-log .li:nth-child(n+5){display:none}
#notifLog.is-all .notif-log .li{display:flex}
/* значок сайта: вкладка браузера в миниатюре */
.fav{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.fav__tab{display:inline-flex;align-items:center;gap:8px;max-width:220px;padding:8px 12px;border-radius:10px 10px 0 0;background:var(--line2);border:1px solid var(--line);border-bottom:0;font-size:13px;color:var(--ink)}
.fav__tab img{width:16px;height:16px;border-radius:3px;flex:none;object-fit:cover}
.fav__tab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav__tab i{font-style:normal;color:var(--mut);margin-left:4px}
/* остатки склада в деньгах */
.rem-note{margin:-4px 0 14px;padding:10px 14px;border-radius:12px;background:var(--warn-bg);color:var(--warn-fg);font-size:13.5px;line-height:1.4}
.rem-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.rem-search{padding:10px 18px 12px;border-bottom:1px solid var(--line2)}
.rem-search .inp{width:100%}
.rem-cost{display:block;font-size:12.5px;color:var(--mut);font-variant-numeric:tabular-nums}
#remCats .li.is-on{background:var(--line2);box-shadow:inset 3px 0 0 var(--accent)}
@media (max-width:860px){.rem-grid{grid-template-columns:minmax(0,1fr)}}
/* крупные суммы в плитках на телефоне: не переносим «₸» на вторую строку, а чуть уменьшаем шрифт */
@media (max-width:480px){.kpi__v{font-size:clamp(16px,5.2vw,24px);white-space:nowrap}}
/* прежние цены в строке прихода и в документе */
.st-was{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:3px;font-size:12.5px;color:var(--mut)}
.st-was__l{font-weight:600}
.st-was__dot{font-style:normal;opacity:.6}
.st-was i:not(.st-was__dot){font-style:normal;color:var(--accent);font-weight:650}
.st-was s,.st-row s,.st-hist s{color:var(--mut);text-decoration-thickness:1px}
.st-was__ch{color:var(--ink2)}
.st-up{color:var(--bad)}
.st-down{color:var(--ok)}
.st-was__hist{border:0;background:none;padding:0;color:var(--accent);font:inherit;font-weight:650;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.st-docsup{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.st-docsup__btn{border:0;background:none;padding:0;font:inherit;font-size:13px;cursor:pointer}
.st-hist__r{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line2)}
.st-hist__r:first-child{border-top:0}
.st-hist__p{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:13px;color:var(--mut);flex:none}
.st-hist__p b{color:var(--ink)}
.p-hist{margin:4px 0 12px;border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--line2)}
.p-hist summary{cursor:pointer;font-weight:650;font-size:14px}
.p-hist__b{margin-top:8px}
.p-hist__r{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:6px 0;border-top:1px solid var(--line);font-size:13px}
.p-hist__r:first-child{border-top:0}
/* список приходов: сумма по закупу и по цене продажи столбиком справа */
.st-docsum{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.st-docsum span{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.st-docsum i{font-style:normal;font-size:12px;color:var(--mut);font-weight:600}
.st-docsum span:first-child b{font-size:15px}
.st-docsum span:last-child b{font-size:13.5px}
/* вход по QR на странице входа */
.btn--qr::before{-webkit-mask:var(--ico-qr) center/contain no-repeat;mask:var(--ico-qr) center/contain no-repeat}
.qr-login{display:flex;flex-direction:column;align-items:center;gap:14px}
.qr-login__box{width:236px;height:236px;display:grid;place-items:center;border:1px solid var(--line);border-radius:18px;background:#fff;padding:10px}
.qr-login__box svg{width:100%;height:100%;display:block}
.qr-login__wait{color:var(--mut);font-size:14px}
.qr-login__how{margin:0;padding-left:20px;font-size:14px;color:var(--ink2);line-height:1.6;align-self:stretch}
.qr-login__left{font-size:13px;color:var(--mut);min-height:18px;text-align:center}
.qr-login .btn--face{margin-top:0}
/* телефон: разрешить вход на компьютере */
.qrl{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:14px;margin-bottom:12px}
.qrl__ic{width:44px;height:44px;border-radius:12px;background:var(--line2);display:grid;place-items:center;flex:none}
.qrl__ic svg{width:24px;height:24px}
/* QR-пропуск продавца */
.badge-card{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.badge-card__qr{width:240px;height:240px;border:1px solid var(--line);border-radius:18px;padding:10px;background:#fff}
.badge-card__qr svg{width:100%;height:100%;display:block}
.badge-card b{font-size:18px}
.btn--noico::before{display:none}
/* плашка «проведите вправо» */
.slide{position:relative;height:62px;margin-top:14px;border-radius:31px;background:var(--line2);border:1px solid var(--line);overflow:hidden;user-select:none;-webkit-user-select:none}
.slide__fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:31px;background:var(--grad);transition:width .28s var(--ease)}
.slide.is-drag .slide__fill{transition:none}
.slide__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-left:48px;font-weight:700;font-size:15px;color:var(--ink2);pointer-events:none;
  background:linear-gradient(90deg,var(--mut) 0%,var(--mut) 35%,var(--ink) 50%,var(--mut) 65%,var(--mut) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:slideShine 2.4s linear infinite;transition:opacity .15s}
@keyframes slideShine{from{background-position:120% 0}to{background-position:-120% 0}}
.slide__knob{position:absolute;left:4px;top:4px;width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(15,23,34,.2);display:grid;place-items:center;color:var(--accent);cursor:grab;touch-action:none;transition:transform .32s cubic-bezier(.32,.72,0,1),background .2s,color .2s}
.slide.is-drag .slide__knob{transition:none;cursor:grabbing}
.slide__knob svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}
.slide__check{opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s}
.slide.is-done .slide__arrow{opacity:0}
.slide.is-done .slide__check{opacity:1;transform:none}
.slide.is-done .slide__knob{background:rgba(255,255,255,.22);box-shadow:none;color:#fff}
.slide.is-done .slide__label{animation:none;background:none;-webkit-text-fill-color:#fff;color:#fff;padding-left:0}
.slide.is-done{border-color:transparent}
@media (prefers-reduced-motion:reduce){.slide__label{animation:none}.slide__knob,.slide__fill{transition:none}}
/* QR для входа на компьютере (показывает телефон) */
.qrmint{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.qrmint__qr{width:min(280px,72vw);aspect-ratio:1;display:grid;place-items:center;padding:12px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px -24px rgba(15,23,34,.35)}
.qrmint__qr svg{width:100%;height:100%;display:block}
.qrmint__qr.is-fade{animation:qrIn .35s var(--ease)}
@keyframes qrIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.qrmint__ring{position:relative;width:64px;height:64px}
.qrmint__ring svg{width:64px;height:64px;transform:rotate(-90deg)}
.qrmint__bg{fill:none;stroke:var(--line2);stroke-width:3}
.qrmint__arc{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .9s linear}
.qrmint__ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:17px;font-variant-numeric:tabular-nums}
.qrmint__t{font-weight:700;max-width:320px}
/* страница входа: второй способ - QR с телефона */
.qr-login__or{display:flex;align-items:center;gap:10px;width:100%;color:var(--mut);font-size:13px}
.qr-login__or::before,.qr-login__or::after{content:'';flex:1;height:1px;background:var(--line)}
.qr-login__alt{display:flex;flex-direction:column;gap:8px;width:100%;padding:14px;border-radius:14px;background:var(--line2);font-size:13.5px;color:var(--ink2)}
.qr-login__alt b{font-size:14.5px;color:var(--ink)}
.qr-login__alt .btn{margin-top:4px}
/* ===== розыгрыш ===== */
.raf-intro{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 18px;margin-bottom:16px;border-radius:var(--radius);background:linear-gradient(135deg,#e3f6f5 0%,#e6f7ec 100%);border:1px solid #cfe9e4}
.raf-intro>div{flex:1 1 320px;display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--ink2);line-height:1.45}
.raf-intro b{font-size:15.5px;color:var(--ink)}
.raf__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.raf__stats>div{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:var(--line2)}
.raf__stats b{font-size:24px;font-weight:800;line-height:1.1}
.raf__stats span{font-size:12.5px;color:var(--mut)}
.raf__wins{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.raf__win{display:flex;align-items:center;gap:12px;font-size:14px}
.raf__place{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;font-size:14px;background:var(--grad);color:#fff}
.raf__place--1{background:linear-gradient(135deg,#f7c948,#e59f00)}.raf__place--2{background:linear-gradient(135deg,#cfd8e3,#98a5b5)}.raf__place--3{background:linear-gradient(135deg,#e6a57e,#b8683b)}
.raf__acts{flex-wrap:wrap;margin:0}
.raf-top{display:flex;flex-direction:column;gap:12px}
.raf-top__r{display:flex;align-items:flex-start;gap:12px}
.raf-top__m{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.raf-top__t{display:flex;justify-content:space-between;gap:10px}
.raf-top__bar{height:8px;border-radius:99px;background:var(--line2);overflow:hidden}
.raf-top__bar i{display:block;height:100%;border-radius:99px;background:var(--grad);animation:barIn .6s var(--ease)}
@keyframes barIn{from{width:0}}
@media (max-width:600px){.raf__stats b{font-size:19px}}
/* лототрон на весь экран */
body.lotto-open{overflow:hidden}
.lotto{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px;color:#f3fbf8;
  background:radial-gradient(circle at 50% 38%,#11706b 0%,#0b3b45 42%,#0a1a26 78%);opacity:0;transition:opacity .28s var(--ease)}
.lotto.on{opacity:1}
.lotto__fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lotto__x{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.lotto__head{text-align:center}
.lotto__eyebrow{font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#7fe7c4}
.lotto__head h1{margin:6px 0 4px;font-size:clamp(26px,4vw,44px);letter-spacing:-.02em}
.lotto__prize{font-size:18px;color:#cbeee6}
.lotto__drum{position:relative;width:min(560px,92vw);height:336px;overflow:hidden;border-radius:28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 30px 40px -20px rgba(0,0,0,.55),inset 0 -30px 40px -20px rgba(0,0,0,.55),0 30px 80px -30px rgba(0,0,0,.7)}
.lotto__drum::before,.lotto__drum::after{content:'';position:absolute;left:0;right:0;height:112px;z-index:2;pointer-events:none}
.lotto__drum::before{top:0;background:linear-gradient(#0b2f38,rgba(11,47,56,0))}
.lotto__drum::after{bottom:0;background:linear-gradient(rgba(11,47,56,0),#0b2f38)}
.lotto__band{position:absolute;left:10px;right:10px;top:112px;height:112px;border-radius:20px;border:2px solid rgba(127,231,196,.7);box-shadow:0 0 30px rgba(46,199,95,.35);z-index:1;pointer-events:none}
.lotto.is-win .lotto__band{border-color:#ffd166;box-shadow:0 0 50px rgba(255,209,102,.55);animation:bandPulse 1.1s ease-in-out 2}
@keyframes bandPulse{50%{transform:scale(1.03)}}
.lotto__reel{will-change:transform}
.lotto__row{height:112px;display:flex;align-items:center;gap:22px;padding:0 34px}
.lotto__no{font-size:40px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;min-width:170px}
.lotto__who{display:flex;flex-direction:column;gap:2px;font-size:20px;font-weight:600;color:#cbeee6;min-width:0}
.lotto__who i{font-style:normal;font-size:15px;color:#8fc9bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lotto__row.is-win .lotto__no{color:#ffd166}
.lotto__meta{font-size:14px;color:#9fd2c7}
.lotto__go{min-width:240px;height:60px;padding:0 34px;border:0;border-radius:30px;background:var(--grad);color:#fff;font:inherit;font-size:20px;font-weight:800;cursor:pointer;
  box-shadow:0 18px 40px -14px rgba(46,199,95,.8);transition:transform .16s var(--ease),opacity .2s}
.lotto__go:active{transform:scale(.97)}
.lotto__go:disabled{opacity:.55;cursor:default}
.lotto__win{position:relative;z-index:3;text-align:center;padding:18px 28px;border-radius:22px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);animation:winIn .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes winIn{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
.lotto__wt{font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#ffd166}
.lotto__wn{font-size:34px;font-weight:800;margin-top:4px}
.lotto__wp{font-size:18px;color:#cbeee6}
.lotto__wz{margin-top:6px;font-weight:700}
.lotto__wf{margin-top:6px;font-size:12.5px;color:#8fc9bd}
@media (max-width:600px){.lotto__drum{height:252px}.lotto__drum::before,.lotto__drum::after{height:84px}.lotto__band{top:84px;height:84px}.lotto__row{height:84px;padding:0 18px;gap:14px}.lotto__no{font-size:28px;min-width:120px}.lotto__who{font-size:16px}}
@media (prefers-reduced-motion:reduce){.lotto__win,.lotto.is-win .lotto__band,.raf-top__bar i{animation:none}}
/* ===== страница входа: форма и QR рядом ===== */
.auth__duo{display:flex;gap:22px;align-items:stretch;justify-content:center;width:100%;max-width:880px}
.auth__duo .auth__card{flex:0 1 400px}
.qrcard{flex:0 0 380px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 26px;border-radius:22px;text-align:center;
  border:1.5px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,#0fb7c6,#2ec75f) border-box;box-shadow:0 24px 60px -30px rgba(15,25,45,.3);animation:qrcardIn .5s var(--ease)}
@keyframes qrcardIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.qrcard__eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.qrcard__h{margin:0;font-size:22px;letter-spacing:-.01em}
.qrcard__left{font-size:12.5px;color:var(--mut);min-height:17px;font-variant-numeric:tabular-nums}
.qrcard__steps{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;align-self:stretch;text-align:left}
.qrcard__steps li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink2)}
.qrcard__steps b{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:12.5px;color:#fff;background:var(--grad)}
.qrcard__alt{margin-top:4px;font-size:12.5px;color:var(--mut);line-height:1.45}
@media (max-width:899px){.qrcard{display:none}}
/* сам код: белый квадрат, уголки-прицел, логотип в центре, бегущая линия сканера */
.qrc{position:relative;width:236px;height:236px;padding:14px;border-radius:22px;background:#fff;box-shadow:0 10px 30px -18px rgba(15,23,34,.35),inset 0 0 0 1px var(--line);display:grid;place-items:center;overflow:hidden}
.qrc>svg{width:100%;height:100%;display:block;transition:filter .25s,opacity .25s}
.qrc.is-in>svg{animation:qrIn .45s var(--ease)}
.qrc__wait{font-size:13px;color:var(--mut)}
.qrc__logo{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:13px;background:#fff;box-shadow:0 0 0 5px #fff;display:grid;place-items:center}
.qrc__logo img{width:38px;height:38px;border-radius:10px}
.qrc__c{position:absolute;width:26px;height:26px;border:3px solid var(--accent)}
.qrc__c--tl{left:6px;top:6px;border-right:0;border-bottom:0;border-radius:12px 0 0 0}
.qrc__c--tr{right:6px;top:6px;border-left:0;border-bottom:0;border-radius:0 12px 0 0}
.qrc__c--bl{left:6px;bottom:6px;border-right:0;border-top:0;border-radius:0 0 0 12px}
.qrc__c--br{right:6px;bottom:6px;border-left:0;border-top:0;border-radius:0 0 12px 0}
.qrc__scan{position:absolute;left:12px;right:12px;top:14px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#0fb7c6,#2ec75f,transparent);box-shadow:0 0 12px rgba(15,183,198,.7);animation:qrScan 2.8s ease-in-out infinite;pointer-events:none}
@keyframes qrScan{0%,100%{transform:translateY(0);opacity:.2}50%{transform:translateY(204px);opacity:.9}}
.qrc__over{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px;text-align:center;font-size:14px;background:rgba(255,255,255,.82)}
.qrc.is-dead .qrc__over,.qrc.is-ok .qrc__over{display:flex}
.qrc.is-dead>svg{filter:blur(4px);opacity:.5}
.qrc.is-dead .qrc__scan,.qrc.is-ok .qrc__scan{display:none}
.qrc.is-ok .qrc__over{background:rgba(255,255,255,.9);animation:qrIn .3s var(--ease)}
.qrc__ok{width:64px;height:64px;border-radius:50%;background:var(--grad);display:grid;place-items:center;animation:okPop .45s cubic-bezier(.2,1.5,.4,1)}
.qrc__ok svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:okDraw .35s .2s ease forwards}
@keyframes okPop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes okDraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.qrc__scan{animation:none;opacity:.4}.qrcard,.qrc.is-in>svg{animation:none}}
/* ===== кабинет продавца на телефоне ===== */
body.seller-mode .side,body.seller-mode .tabbar,body.seller-mode .scan-fab,body.seller-mode .burger,body.seller-mode #banners{display:none!important}
body.seller-mode .main{margin-left:0;max-width:520px;margin:0 auto;padding-bottom:40px}
.sl-home{display:flex;flex-direction:column;gap:16px}
.sl-hello{display:flex;flex-direction:column;gap:2px;font-size:15px;color:var(--mut)}
.sl-hello b{font-size:26px;color:var(--ink);letter-spacing:-.01em}
.sl-shift{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.sl-shift>div:last-child{display:flex;flex-direction:column;gap:3px}
.sl-shift span{font-size:13.5px;color:var(--mut)}
.sl-shift__dot{width:12px;height:12px;border-radius:50%;flex:none;background:var(--track)}
.sl-shift.is-on{border-color:#bfe8d3;background:linear-gradient(135deg,#effaf5,#fff)}
.sl-shift.is-on .sl-shift__dot{background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.18);animation:dotPulse 1.8s ease-in-out infinite}
@keyframes dotPulse{50%{box-shadow:0 0 0 9px rgba(34,197,94,.06)}}
.sl-scan{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:190px;border:0;border-radius:24px;background:var(--grad);color:#fff;font:inherit;font-size:18px;font-weight:800;cursor:pointer;
  box-shadow:0 22px 44px -20px rgba(10,157,176,.75);transition:transform .16s var(--ease)}
.sl-scan:active{transform:scale(.98)}
.sl-scan svg{width:54px;height:54px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.sl-more{display:flex;flex-direction:column;gap:10px}
.sl-more .btn{width:100%}
/* ===== программа лояльности из модулей ===== */
.loy-intro{margin:0 0 14px;font-size:14px;color:var(--ink2);line-height:1.5;max-width:760px}
.loy-mod{margin-bottom:14px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
.loy-mod.is-on{border-color:#bfe3dc;box-shadow:0 14px 34px -26px rgba(10,120,110,.55)}
.loy-mod__head{display:flex;align-items:center;gap:14px;padding:16px 18px}
.loy-mod__ic{width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;background:var(--line2);color:var(--mut);transition:background .2s,color .2s}
.loy-mod__ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.loy-mod.is-on .loy-mod__ic{background:var(--grad);color:#fff}
.loy-mod__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.loy-mod__t h2{margin:0;font-size:17px;letter-spacing:-.01em}
.loy-mod__t span{font-size:13.5px;color:var(--mut);line-height:1.4}
.check.loy-mod__sw{padding:0;flex:none}
.loy-mod__body{display:none;padding:0 18px 18px}
.loy-mod.is-on .loy-mod__body,.loy-mod.is-open .loy-mod__body{display:block;animation:modIn .25s var(--ease)}
.loy-mod.is-on .loy-mod__more{display:none}
.loy-mod__body>.card:last-child,.loy-mod__body .grid2 .card:last-child{margin-bottom:0}
@keyframes modIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width:600px){.loy-mod__head{flex-wrap:wrap;padding:14px}.loy-mod__t{flex:1 1 calc(100% - 120px)}.loy-mod__more{order:5;margin-left:58px}.loy-mod__body{padding:0 12px 12px}}
/* подарок за покупки: пример, строка на кассе и в карточке */
.gift-demo{display:flex;flex-direction:column;gap:8px;padding:12px 14px;margin:4px 0 12px;border-radius:14px;background:var(--line2)}
.gift-demo__t{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.gift-row{display:flex;align-items:center;gap:10px;font-size:14px;margin-top:8px}
.gift-demo .gift-row{margin:0}
.gift-row--due{padding:10px 12px;border-radius:12px;background:linear-gradient(135deg,#fff5d6,#ffe9b3);color:#6b4a00;border:1px solid #f5d27a}
.gift-row--card{padding:10px 12px;border-radius:12px;background:var(--line2);margin:0 0 12px}
.gift-ic{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--sur);color:#c47f00}
.gift-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gift-dots{display:flex;gap:4px;flex:none}
.gift-dots i{width:9px;height:9px;border-radius:50%;background:var(--track)}
.gift-dots i.on{background:var(--accent)}
/* розыгрыш: правила, призы по местам, форма */
.raf__rules{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.raf__rules span{padding:5px 10px;border-radius:999px;background:var(--line2);font-size:12.5px;font-weight:600;color:var(--ink2)}
.raf__prizes{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.raf__prizes li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px}
.raf__prizes li.is-won b{text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25);color:var(--mut)}
.raf-form__sec{margin:16px 0 8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.raf-prize{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.raf-prize .inp{flex:1;min-width:0}
.raf-prize .x{width:32px;height:32px;flex:none;border:0;border-radius:9px;background:none;color:var(--mut);font-size:20px;cursor:pointer}
.raf-prize .x:hover{background:var(--line2);color:var(--bad)}
#rfPrizeAdd{margin-bottom:6px}
.lotto__tix{margin-left:auto;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.16);font-size:18px;font-weight:800;color:#fff}
/* ===== загрузка: кольцо в цветах бренда, появляется с задержкой, чтобы не мигать на быстрых переходах ===== */
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:220px;padding:30px 18px;color:var(--mut);font-size:13.5px;font-weight:600;opacity:0;animation:ldIn .35s var(--ease) .15s forwards}
.loading--sm{min-height:96px;padding:14px;gap:10px;font-size:13px}
.loading__ring{position:relative;width:38px;height:38px;border-radius:50%;flex:none;
  background:conic-gradient(from 90deg,rgba(15,183,198,0) 0 20%,#0fb7c6 55%,#2ec75f 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4.5px),#000 calc(100% - 3.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 4.5px),#000 calc(100% - 3.5px));
  animation:ldSpin .8s cubic-bezier(.45,.1,.55,.9) infinite}
.loading--sm .loading__ring{width:26px;height:26px;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 2.5px))}
.loading__t{display:inline-flex;align-items:baseline}
.loading__t i{display:inline-block;width:.32em;font-style:normal;text-align:left;animation:ldDot 1.2s ease-in-out infinite}
.loading__t i:nth-child(2){animation-delay:.2s}.loading__t i:nth-child(3){animation-delay:.4s}
@keyframes ldDot{0%,60%,100%{opacity:.25}30%{opacity:1}}
@keyframes ldSpin{to{transform:rotate(360deg)}}
@keyframes ldIn{to{opacity:1}}
/* первая загрузка кабинета: логотип внутри кольца */
.loading--page{min-height:min(60vh,520px)}
.loading--page .loading__logo{position:relative;width:76px;height:76px;display:grid;place-items:center}
.loading--page .loading__logo img{width:40px;height:40px;border-radius:12px;animation:ldPulse 1.6s ease-in-out infinite}
.loading--page .loading__logo .loading__ring{position:absolute;inset:0;width:76px;height:76px}
@keyframes ldPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}}
@media (prefers-reduced-motion:reduce){.loading__ring{animation-duration:1.6s}.loading__t i,.loading--page .loading__logo img{animation:none;opacity:1}.loading{animation-delay:0s}}

/* комментарий к чеку: ссылка «+ Комментарий» в окне оплаты раскрывается в поле; в списках - строка с иконкой */
.sale-note{margin-top:4px}
.sale-note__add{margin:0;font-size:14px}
.sale-note__f{display:none;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--mut)}
.sale-note.is-open .sale-note__add{display:none}
.sale-note.is-open .sale-note__f{display:flex;animation:modIn .2s var(--ease)}
/* комментарий к чеку в списке: крупно и заметно - за кассой читают без очков */
.li__note{display:inline-flex;align-items:flex-start;gap:7px;align-self:flex-start;max-width:100%;margin-top:6px;padding:5px 11px 5px 9px;border-radius:10px;background:#fff4d6;border:1px solid #f3dc9a;color:#5c3d00;font-size:16px;font-weight:700;line-height:1.3;min-width:0}
.li__note svg{width:17px;height:17px;flex:none;margin-top:1px;fill:none;stroke:#b7791f;stroke-width:2.2;stroke-linejoin:round}
.li__note span{min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
/* ===== продавцы: список карточками и форма ===== */
#slList{gap:8px}
.slr{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--sur);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.slr:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:color-mix(in srgb,var(--accent) 4%,var(--card))}
.slr:disabled{cursor:default}
.slr.is-off{opacity:.6}
.slr__av{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-weight:800;font-size:16px}
.slr__i{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.slr__i b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slr__chips{display:flex;flex-wrap:wrap;gap:4px}
.slr__chip{padding:2px 8px;border-radius:999px;background:var(--line2);font-size:11.5px;font-weight:650;color:var(--mut)}
.slr__chip--on{background:var(--ok-bg);color:var(--ok-fg)}
.slr__chip--ok{background:color-mix(in srgb,var(--accent) 12%,var(--card));color:var(--accent)}
.slr__go{width:18px;height:18px;flex:none;fill:none;stroke:var(--mut);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.slf-pin__row{display:flex;gap:8px;align-items:stretch}
.slf-pin__row .pinfield{flex:1;max-width:220px}
.slf-pin__row .pinfield input{width:100%;height:52px}
.slf-pin__row .btn{flex:none}
.inp.is-bad,input.is-bad{border-color:var(--bad)!important;box-shadow:0 0 0 3px rgba(220,38,38,.14)}
.slf-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 10px}
.slf-act{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:var(--sur);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s}
.slf-act:hover{border-color:var(--accent)}
.slf-act svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.slf-act span{display:flex;flex-direction:column;min-width:0}
.slf-act b{font-size:14px}
.slf-act i{font-style:normal;font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slf-done{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:6px 0 14px}
.slf-done__ok{width:56px;height:56px;border-radius:50%;background:var(--grad);display:grid;place-items:center;margin-bottom:6px;animation:okPop .4s cubic-bezier(.2,1.5,.4,1)}
.slf-done__ok svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.slf-done b{font-size:18px}
.slf-done__pin{font-size:34px;font-weight:800;letter-spacing:12px;font-variant-numeric:tabular-nums;padding-left:12px;margin:2px 0 4px}
@media (max-width:600px){.slf-acts{grid-template-columns:1fr}}

/* ===== тёмная тема =====
   Включается атрибутом html[data-theme=dark] (переключатель внизу меню, выбор в localStorage sebe_theme).
   «Как в системе» - атрибут ставит скрипт в <head> по prefers-color-scheme, чтобы не мигало белым. */
html[data-theme=dark]{
  color-scheme:dark;
  --accent:#2cc0d2; --accent2:#3ed474;
  --bg:#0f1418; --card:#171d23; --sur:#1e262d; --sur2:#262f37; --lift:#313c46; --ink:#e6eaee; --ink2:#c2cad2; --mut:#8e98a4; --line:#2a333c; --line2:#212930;
  --on-ink:#0f1418; --track:#3a4550;
  --ok:#4ade80; --warn:#fbbf24; --bad:#f87171;
  --ok-bg:rgba(34,197,94,.16); --ok-fg:#6ee7a0; --warn-bg:rgba(245,158,11,.16); --warn-fg:#fcd34d; --warn-line:rgba(245,158,11,.45);
  --bad-bg:rgba(239,68,68,.16); --bad-fg:#fca5a5; --info-bg:rgba(56,189,248,.16); --info-fg:#7dd3fc; --neu-bg:#28313a; --neu-fg:#9aa5b1;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -20px rgba(0,0,0,.7);
}
html[data-theme=dark] .side__link.is-on{background:color-mix(in srgb,var(--accent) 16%,var(--card))}
html[data-theme=dark] .tabs__it.is-on,html[data-theme=dark] .seg button.is-on,html[data-theme=dark] .vswitch button.is-on,html[data-theme=dark] .sale-pay button.is-on{background:var(--lift);box-shadow:0 1px 2px rgba(0,0,0,.35)}
html[data-theme=dark] .pill--shipped{background:rgba(139,92,246,.18);color:#c4b5fd}
html[data-theme=dark] .toast__btn{background:var(--bg);color:var(--ink)}
html[data-theme=dark] .auth{background:radial-gradient(900px 500px at 70% -10%,rgba(15,183,198,.16),transparent 60%),var(--bg)}
html[data-theme=dark] .an-wkend{fill:var(--line2)}
html[data-theme=dark] .an-hl{fill:rgba(255,255,255,.06)}
html[data-theme=dark] .an-dot--web,html[data-theme=dark] .an-bar--web{background:#5fcf8c;fill:#5fcf8c}
html[data-theme=dark] .raf-intro{background:linear-gradient(135deg,rgba(15,183,198,.14) 0%,rgba(46,199,95,.12) 100%);border-color:var(--line)}
html[data-theme=dark] .sl-shift.is-on{border-color:rgba(34,197,94,.4);background:linear-gradient(135deg,rgba(34,197,94,.1),var(--card))}
html[data-theme=dark] .loy-mod.is-on{border-color:rgba(44,192,210,.4);box-shadow:0 14px 34px -26px rgba(0,0,0,.8)}
html[data-theme=dark] .gift-row--due{background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(245,158,11,.1));color:#fcd34d;border-color:rgba(245,158,11,.4)}
html[data-theme=dark] .gift-ic{background:var(--sur2);color:#fbbf24}
html[data-theme=dark] .li__note{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.4);color:#fde68a}
html[data-theme=dark] .li__note svg{stroke:#fbbf24}
html[data-theme=dark] .rem-note{background:var(--warn-bg);color:var(--warn-fg)}
html[data-theme=dark] .pc__star{color:#fbbf24}
html[data-theme=dark] .inv-plus{color:#5eead4}
html[data-theme=dark] .photo__w{color:#0f172a}
html[data-theme=dark] .hero__plan .pill{background:rgba(255,255,255,.92);color:#17202b}
html[data-theme=dark] .hero__plan .pill--warn{background:#fff7ed;color:#9a3412}
html[data-theme=dark] .qrc__over{background:rgba(255,255,255,.86);color:#17202b}
html[data-theme=dark] .step.is-done .step__t{text-decoration-color:var(--mut)}
html[data-theme=dark] .rcpt-pv .rcpt{box-shadow:0 8px 24px -14px rgba(0,0,0,.8)}
html[data-theme=dark] .ph-cand img{background:#fff}
html[data-theme=dark] .field input:focus,html[data-theme=dark] .field select:focus,html[data-theme=dark] .field textarea:focus,html[data-theme=dark] .inp:focus{box-shadow:0 0 0 3px rgba(44,192,210,.22)}
html[data-theme=dark] .btn--primary{box-shadow:0 8px 18px -10px rgba(15,183,198,.5)}
html[data-theme=dark] .backdrop{background:rgba(0,0,0,.55)}
html[data-theme=dark] .sheet-bg,html[data-theme=dark] .paywin,html[data-theme=dark] .ask,html[data-theme=dark] .readbar{background:rgba(0,0,0,.6)}
@media(max-width:860px){html[data-theme=dark] .side{box-shadow:0 20px 60px rgba(0,0,0,.6)}}

/* переключатель темы внизу меню: три плитки (светлая / как в системе / тёмная), под выбранной едет подложка */
.theme{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:3px;border-radius:11px;background:var(--line2);isolation:isolate}
.theme::before{content:'';position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);border-radius:8px;background:var(--sur);box-shadow:0 1px 2px rgba(16,24,40,.1),0 2px 6px -2px rgba(16,24,40,.12);
  transform:translateX(calc(var(--theme-i,0) * 100%));transition:transform .26s var(--ease);z-index:0}
html[data-theme=dark] .theme::before{background:var(--lift);box-shadow:0 1px 2px rgba(0,0,0,.4)}
.theme button{position:relative;z-index:1;display:grid;place-items:center;height:30px;border:0;border-radius:8px;background:none;color:var(--mut);cursor:pointer;transition:color .18s}
.theme button svg{width:17px;height:17px;stroke-width:2;transition:transform .26s var(--ease)}
.theme button:hover{color:var(--ink)}
.theme button.is-on{color:var(--accent)}
.theme button.is-on svg{transform:rotate(-12deg) scale(1.08)}
.theme button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(min-width:861px){
  body.side-mini .theme{display:flex;padding:0;background:none;border-radius:11px}
  body.side-mini .theme::before{display:none}
  body.side-mini .theme button{display:none;width:100%;height:36px;border:1px solid var(--line);background:var(--sur)}
  body.side-mini .theme button.is-on{display:grid}
  body.side-mini .theme button.is-on svg{transform:none}
  body.side-mini .theme [data-tip]{position:relative}
}

/* режим кассы: права продавца */
.kassa-locked{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:32px 18px}
.kassa-locked .h-ic{margin-bottom:4px}
.kassa-locked .mut{max-width:420px}
.kassa-mode{width:100%;justify-content:flex-start;gap:8px;margin-bottom:8px;color:var(--warn-fg);background:var(--warn-bg);border-color:var(--warn-line)}
.kassa-mode svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
body.side-mini .kassa-mode span{display:none}
.shift-list{display:flex;flex-direction:column;gap:8px}
.shift-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.shift-row__t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}

/* долги покупателей */
.pay-debt{border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.pay-debt__t{display:flex;align-items:center;gap:8px;color:var(--warn-fg)}
.pay-debt .row{margin:0}
.debt-card .card__head b{font-size:18px}
.debt-sum{background:var(--sur2,transparent)}
.cu-seg{flex:none}
.cu-seg button{padding:9px 16px;white-space:nowrap}
.avg-line{margin:-4px 0 10px}

/* заказ поставщику */
.so-line{align-items:center;gap:10px}
.so-qty{width:84px;text-align:right;flex:none}
.so-lines{max-height:48vh;overflow-y:auto;border:1px solid var(--line);border-radius:12px;margin:6px 0 12px}
.st-exp{width:140px}
.st-exp input{text-align:left;font-size:13px;padding:0 8px;background:var(--sur);color:var(--ink)}
@media(max-width:760px){.st-exp{flex:1 1 30%;width:auto}}
/* сроки годности */
.exp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.exp-days{min-width:86px;text-align:center;font-weight:700;border-radius:9px;padding:4px 8px;background:var(--line2)}
.exp-days.is-bad{background:var(--bad-bg,#fde8e8);color:var(--bad)}
.exp-days.is-warn{background:var(--warn-bg);color:var(--warn-fg)}
.promo-tag{color:var(--ok);font-weight:650}
.promo-badge{flex:none;min-width:56px;text-align:center;font-weight:800;border-radius:10px;padding:6px 8px;background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.pr-cats{max-height:220px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;padding:4px 12px;margin-bottom:12px}
#prKind,#prScope{margin-bottom:12px}
/* онлайн-касса */
.fz-prov{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.fz-p{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--sur);cursor:pointer;font:inherit;color:var(--ink)}
.fz-p.is-on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent)}
.fz-p:disabled{opacity:.55;cursor:default}
.fz-map{display:flex;flex-direction:column;gap:6px;margin:4px 0 6px}
.fz-map__r{display:grid;grid-template-columns:minmax(110px,1fr) 2fr;gap:10px;align-items:center}
.fz-q{margin:10px 0 6px}
.fz-docs{max-height:320px;overflow-y:auto;border:1px solid var(--line);border-radius:12px}

/* ===== шапка на телефоне: раздел уже назван нижней панелью, заголовок не повторяем =====
   Главная - имя магазина с логотипом (как в приложениях), Заказы и Каталог - только действия,
   разделы из «Ещё» (Склад, Покупатели, Аналитика, Настройки) - с заголовком, там панель не помогает. */
.head__shop{display:none;align-items:center;gap:10px;min-width:0}
.head__shop img{width:34px;height:34px;border-radius:10px;object-fit:cover;flex:none;background:var(--sur)}
.head__shop span{font-size:18px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:860px){
  .head{margin-bottom:12px}
  body[data-route=home] .head h1,body[data-route=orders] .head h1,body[data-route=catalog] .head h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body[data-route=home] .head__shop{display:flex}
  /* без заголовка и без кнопок шапке нечего показывать - не оставляем пустую полосу */
  body[data-route=orders] .head:not(:has(#headActions > *)):not(:has(.net:not([hidden]))):not(:has(.upd:not([hidden]))),
  body[data-route=catalog] .head:not(:has(#headActions > *)):not(:has(.net:not([hidden]))):not(:has(.upd:not([hidden]))){margin-bottom:0}
}

/* ===== iPhone с экрана «Домой»: приложение занимает весь экран, системная полоса сверху
   становится его продолжением (тот же фон). Отступы под неё - env(safe-area-inset-top),
   в браузере он равен нулю и ничего не меняет. ===== */
@media(max-width:860px){
  /* стеклянная полоса iOS размывает шире системного отступа: шапку опускаем ещё на 12px, чтобы в покое она была под стеклом целиком */
  .main{padding-top:calc(26px + env(safe-area-inset-top))}
  .side__brand{padding-top:calc(18px + env(safe-area-inset-top))}
  .sheet{padding-top:env(safe-area-inset-top)}
  .paywin,.ask,.readbar,.lotto{padding-top:calc(16px + env(safe-area-inset-top))}
  .toast{bottom:calc(22px + env(safe-area-inset-bottom))}
}
/* в светлой теме iPhone рисует часы белым: под них - цветная полоса в цвет кассы, как продолжение шапки */
@media(max-width:860px){
  html:not([data-theme=dark]) body::before{content:'';position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);background:linear-gradient(90deg,#0fb7c6,#2cc56f);z-index:200;pointer-events:none}
}

/* дата и погода в шапке: тихо, мелко, справа */
.head__meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-left:4px;color:var(--mut);font-size:12.5px;line-height:1.2;white-space:nowrap;text-transform:lowercase}
.head__date::first-letter{text-transform:uppercase}
.head__wx{display:inline-flex;align-items:center;gap:4px;color:var(--ink2);font-weight:650}
.head__wx svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:860px){
  body:not([data-route=home]) .head__meta{display:none}
}