/* Layout: bright console. One indigo→violet hero band carries the REVIX brand; every other surface stays quiet (white / lavender).
   Desktop: top tabs. Phone: bottom tab bar, tables turn into cards, dialogs become bottom sheets. */
:root{
  /* Same palette as the mobile app (mobile-app/lib/core/theme/app_palette.dart): WCAG AA in light and dark. */
  --bg:#F6F5FA; --surface:#FFFFFF; --sunk:#EFEDF6; --ink:#1C1830; --muted:#696582; --line:#E6E3F0;
  --accent:#6A4CE0; --accent-2:#B6A4F5; --accent-ink:#FFFFFF; --accent-soft:#EDE9FD;
  --hero-a:#1F1747; --hero-b:#7D4FD9; --hero-ink:#FFFFFF;
  --ok:#137B51; --ok-soft:#E1F5EC; --warn:#A05C09; --warn-soft:#FDF1DE; --bad:#C62C40; --bad-soft:#FDE7EA; --info:#2063D6; --info-soft:#E4EDFD;
  --c1:#6A4CE0; --c2:#E16198; --c3:#139E96; --c4:#CD7B0E; --c5:#4A8CF0; --c6:#908AAD;
  /* text on a series colour's light tint (initials on product tiles), same as mobile seriesInk */
  --c1-ink:#6648DF; --c2-ink:#C42569; --c3-ink:#0E756F; --c4-ink:#985B0A; --c5-ink:#1262DB; --c6-ink:#6B648E;
  --shadow:0 1px 2px rgba(28,24,48,.05),0 12px 32px -18px rgba(28,24,48,.24);
  --f-display:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif; --f-body:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif; --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:16px; --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0E0C17; --surface:#181525; --sunk:#13111E; --ink:#F1EFF9; --muted:#A29CB9; --line:#2A263B;
  --accent:#A48DFF; --accent-2:#C4B5FF; --accent-ink:#150F33; --accent-soft:#29224A;
  --hero-a:#221A52; --hero-b:#6E3FBF; --hero-ink:#FFFFFF;
  --ok:#4ED39C; --ok-soft:#102A20; --warn:#F4B65C; --warn-soft:#33250E; --bad:#FF7A8A; --bad-soft:#3B1520; --info:#7FAAFF; --info-soft:#15213F;
  --c1:#A48DFF; --c2:#F08DB8; --c3:#4FD1C5; --c4:#F6C06A; --c5:#7FAAFF; --c6:#B7B1CF;
  --c1-ink:#A48DFF; --c2-ink:#F08DB8; --c3-ink:#4FD1C5; --c4-ink:#F6C06A; --c5-ink:#7FAAFF; --c6-ink:#B7B1CF;
  --shadow:0 1px 0 rgba(255,255,255,.03),0 14px 34px -18px rgba(0,0,0,.7); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E0C17; --surface:#181525; --sunk:#13111E; --ink:#F1EFF9; --muted:#A29CB9; --line:#2A263B;
  --accent:#A48DFF; --accent-2:#C4B5FF; --accent-ink:#150F33; --accent-soft:#29224A;
  --hero-a:#221A52; --hero-b:#6E3FBF; --hero-ink:#FFFFFF;
  --ok:#4ED39C; --ok-soft:#102A20; --warn:#F4B65C; --warn-soft:#33250E; --bad:#FF7A8A; --bad-soft:#3B1520; --info:#7FAAFF; --info-soft:#15213F;
  --c1:#A48DFF; --c2:#F08DB8; --c3:#4FD1C5; --c4:#F6C06A; --c5:#7FAAFF; --c6:#B7B1CF;
  --c1-ink:#A48DFF; --c2-ink:#F08DB8; --c3-ink:#4FD1C5; --c4-ink:#F6C06A; --c5-ink:#7FAAFF; --c6-ink:#B7B1CF;
  --shadow:0 1px 0 rgba(255,255,255,.03),0 14px 34px -18px rgba(0,0,0,.7); color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--ink)}
body{font-family:var(--f-body);font-size:14px;line-height:1.45;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 48px;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
h1,h2,h3{margin:0;text-wrap:balance}
h1{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:-.02em;line-height:1.2}
h2{font-size:16px;font-weight:600}
h3{font-size:13px;font-weight:600;color:var(--muted)}
p{margin:0}
.wrap{max-width:1260px;margin:0 auto}
.mono{font-family:var(--f-mono);font-size:12.5px}
.muted{color:var(--muted)}
.num,td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:6;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:12px;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px))}
.top>*{max-width:1260px;margin-inline:auto}
.bar{display:flex;align-items:center;gap:10px}
.logo{display:flex;align-items:center;gap:9px}
.logo .mark{width:32px;height:32px;flex:none;border-radius:10px;background:linear-gradient(135deg,var(--hero-a),var(--hero-b));display:grid;place-items:center}
.logo .mark svg{width:32px;height:32px;display:block}
.logo .lt{font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:.06em}
.logo .ls{font-size:12px;color:var(--muted);margin-left:2px}
.spacer{flex:1}
.who{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 10px 4px 4px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.who .r{font-size:11.5px;color:var(--muted)}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--hero-a),var(--hero-b));color:#fff;display:grid;place-items:center;font-weight:700;font-size:11.5px;flex:none}
.ib{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;position:relative;color:var(--ink);transition:border-color .15s,transform .15s}
.ib:hover{border-color:var(--accent)}
.ib:active{transform:scale(.94)}
.ib b{position:absolute;top:-5px;right:-5px;background:var(--bad);color:var(--accent-ink);border-radius:9px;font-size:10px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--bg)}
.tabs{display:flex;gap:4px;overflow-x:auto;margin-top:12px;padding-bottom:10px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{border:0;background:none;padding:8px 13px;color:var(--muted);cursor:pointer;white-space:nowrap;border-radius:999px;font-weight:500;transition:background .2s,color .2s}
.tab:hover{color:var(--ink);background:var(--sunk)}
.tab.on{color:var(--accent-ink);background:var(--accent)}

main{padding-top:14px;display:flex;flex-direction:column;gap:16px}
main.phone{max-width:1060px;margin:0 auto}
@media (min-width:900px){main.phone .menu{grid-template-columns:repeat(3,1fr)}}
main.enter{animation:enter .45s var(--ease) both}
@keyframes enter{from{opacity:0;transform:translateY(8px)}}
.head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.head .sub{color:var(--muted);font-size:13px;margin-top:2px}

/* blocks */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0;box-shadow:var(--shadow)}
.card>h2+*{margin-top:12px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpis.two{grid-template-columns:1fr 1fr}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:3px;min-width:0;box-shadow:var(--shadow)}
.kpi .l{font-size:12.5px;color:var(--muted)}
.kpi .v{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .d{font-size:12px}
.up{color:var(--ok)} .down{color:var(--bad)}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}

/* hero band — the one loud element */
.hero{position:relative;overflow:hidden;border-radius:26px;color:var(--hero-ink);background:linear-gradient(118deg,var(--hero-a) 0%,var(--hero-b) 100%);padding:24px 26px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;isolation:isolate;box-shadow:0 24px 50px -28px color-mix(in srgb,var(--hero-a) 80%,transparent)}
.hero::before{content:"";position:absolute;inset:-40% -10% auto auto;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 65%);z-index:-1}
.hero .hl{font-size:13.5px;opacity:.9}
.hero .hv{font-family:var(--f-display);font-size:clamp(34px,6vw,58px);font-weight:700;letter-spacing:-.035em;line-height:1.02;font-variant-numeric:tabular-nums}
.hero .hd{font-size:13px;opacity:.95;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hero .hd .chip{background:rgba(255,255,255,.2);border-radius:999px;padding:3px 10px;font-weight:600}
.hero .up,.hero .down,.hero .muted{color:inherit}
.hero .hchart{grid-column:1/-1;margin:6px -26px 0;height:120px;position:relative}
.hero .hchart svg{display:block;width:100%;height:100%}
.hero .hfoot{position:absolute;right:20px;bottom:12px;font-size:12px;opacity:.9}
.hero.mini{padding-bottom:22px;align-items:center}
.hline{stroke-dasharray:1;stroke-dashoffset:0}
.enter .hline{animation:draw 1.3s var(--ease) both .15s}
.enter .harea{animation:fade 1s ease both .5s}
@keyframes draw{from{stroke-dashoffset:1}}
@keyframes fade{from{opacity:0}}
.ring{position:relative;display:grid;place-items:center;align-self:start}
.ring .rt{fill:none;stroke:rgba(255,255,255,.25);stroke-width:11}
.ring .rp{fill:none;stroke:var(--hero-ink);stroke-width:11;stroke-linecap:round}
.enter .ring .rp{animation:ringIn 1.2s var(--ease) both .2s}
@keyframes ringIn{from{stroke-dasharray:0 100}}
.ring .rv{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.1}
.ring .rv b{font-family:var(--f-display);font-size:22px;font-weight:700}
.ring .rv span{font-size:11.5px;opacity:.9}

/* donut & stacked bars */
.donutwrap{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center}
.donut{width:150px;height:150px}
.donut circle{fill:none;stroke-width:16}
.enter .donut .seg{animation:ringIn 1s var(--ease) both}
.prow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow .pn{font-weight:600}
.prow .pv{font-variant-numeric:tabular-nums;text-align:right}
.prow .pbar{grid-column:2/-1}
.stackbar{display:flex;height:16px;border-radius:9px;overflow:hidden;gap:2px;background:var(--sunk)}
.stackbar i{display:block;height:100%}
.enter .stackbar i{animation:growx .9s var(--ease) both}
@keyframes growx{from{transform:scaleX(0);transform-origin:left}}

/* tables */
.tw{overflow-x:auto;margin-inline:-18px;padding-inline:18px}
table.t{width:100%;border-collapse:collapse;font-size:13px}
.t th{font-size:12px;font-weight:600;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.t td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.t tbody tr:last-child td{border-bottom:0}
.t tr.click{cursor:pointer}
.t tr.click:hover td{background:var(--sunk)}
.t tfoot td{font-weight:600;border-top:1px solid var(--line)}
.empty{padding:26px;text-align:center;color:var(--muted)}

.pill{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--sunk);color:var(--muted)}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.bad{background:var(--bad-soft);color:var(--bad)} .pill.info{background:var(--info-soft);color:var(--info)} .pill.acc{background:var(--accent-soft);color:var(--accent)}

.btn{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:9px 14px;cursor:pointer;font-weight:500;white-space:nowrap;transition:border-color .15s,transform .12s,box-shadow .2s}
.btn:hover{border-color:var(--accent)}
.btn:active{transform:scale(.97)}
.btn.pri{background:linear-gradient(118deg,var(--hero-a),var(--hero-b));color:#fff;border-color:transparent;box-shadow:0 8px 20px -10px var(--hero-a)}
.btn.pri:hover{box-shadow:0 10px 26px -10px var(--hero-a)}
.btn.ok{background:var(--ok);color:var(--accent-ink);border-color:var(--ok)}
.btn.bad{color:var(--bad)}
.btn.sm{padding:5px 10px;font-size:12.5px;border-radius:10px}
.btn.ghost{border-color:transparent;background:none}
.btn.big{padding:13px 16px;font-size:15px;font-weight:600}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

.filters{display:flex;gap:8px;flex-wrap:wrap}
select,input,textarea{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 11px;min-width:0;transition:border-color .15s}
select:focus,input:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.filters select{padding:7px 9px;border-radius:999px}
label.f{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);min-width:0}
label.f input,label.f select,label.f textarea{color:var(--ink);font-size:14px;width:100%}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:10px}
.form .full{grid-column:1/-1}
.line{display:grid;grid-template-columns:minmax(0,3fr) minmax(60px,.8fr) minmax(90px,1.4fr) auto;gap:6px;align-items:end}
.warnbox,.badbox,.okbox,.infobox{padding:11px 13px;border-radius:12px;font-size:13px}
.warnbox{background:var(--warn-soft);color:var(--warn)} .badbox{background:var(--bad-soft);color:var(--bad)} .okbox{background:var(--ok-soft);color:var(--ok)} .infobox{background:var(--info-soft);color:var(--info)}

.meter{height:8px;background:var(--sunk);border-radius:6px;overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--hero-a),var(--hero-b));border-radius:6px}
.enter .meter i{animation:growx .9s var(--ease) both .1s}
.share{display:flex;height:12px;border-radius:7px;overflow:hidden;gap:2px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:0}
svg text{fill:var(--muted);font-family:var(--f-body)}
.gb{transform-box:fill-box;transform-origin:50% 100%}
.enter .gb{animation:grow .8s var(--ease) both}
@keyframes grow{from{transform:scaleY(0)}}

/* quick answers */
.qa{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:8px}
.qa details{border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:border-color .2s}
.qa details[open]{border-color:var(--accent)}
.qa summary{padding:11px 13px;cursor:pointer;font-weight:500;list-style:none;display:flex;gap:8px;justify-content:space-between;align-items:flex-start}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--accent);font-weight:700;font-size:16px;line-height:1;transition:transform .2s}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa .ans{padding:0 13px 13px;font-size:13px;animation:fade .3s ease}

/* list items (phone) */
.li{display:flex;gap:11px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.li:last-child{border-bottom:0}
.li .main{flex:1;min-width:0}
.li .t1{font-weight:600}
.li .t2{font-size:12.5px;color:var(--muted)}
.menu{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.menu button{display:flex;flex-direction:column;gap:10px;align-items:flex-start;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px;text-align:left;cursor:pointer;font-weight:600;font-size:14px;box-shadow:var(--shadow);transition:border-color .15s,transform .12s}
.menu button:hover{border-color:var(--accent)}
.menu button:active{transform:scale(.97)}
.menu .ico{width:34px;height:34px;padding:7px;border-radius:10px;background:var(--accent-soft);color:var(--accent)}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.actions .btn{padding:13px;text-align:center;white-space:normal}

/* modal */
#modal{position:fixed;inset:0;z-index:20;background:rgba(20,16,36,.5);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:calc(24px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 24px max(12px,env(safe-area-inset-left,0px));animation:fade .2s ease}
.dlg{background:var(--surface);border-radius:22px;width:min(760px,100%);padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 80px -20px rgba(0,0,0,.45);animation:pop .28s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}}
.dlg.wide{width:min(1000px,100%)}
.dlg .x{margin-left:auto}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:14px;z-index:30;font-weight:500;max-width:90vw;animation:toast .3s var(--ease)}
@keyframes toast{from{opacity:0;transform:translate(-50%,12px)}}
.sheetlist{display:grid;gap:4px}
.sheetlist button{display:flex;gap:12px;align-items:center;border:0;background:none;padding:12px;border-radius:12px;cursor:pointer;font-weight:500;font-size:15px;text-align:left}
.sheetlist button:hover,.sheetlist button.on{background:var(--accent-soft);color:var(--accent)}

/* documents */
.doc{border:1px solid var(--line);border-radius:12px;padding:22px;background:var(--surface);font-size:13px}
.doc .dh{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:2px solid var(--accent);padding-bottom:10px;margin-bottom:12px}
.doc .dt{font-family:var(--f-display);font-size:15px;font-weight:600}
.sign{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px;font-size:12px;color:var(--muted)}
.sign div{border-top:1px solid var(--muted);padding-top:4px}
.photos{display:flex;gap:6px;flex-wrap:wrap}
.photos span{background:var(--sunk);border-radius:8px;padding:4px 9px;font-size:12px}

/* login */
.auth{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0;min-height:calc(100vh - 48px);max-width:1180px;margin:24px auto 0;border-radius:30px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.brand{position:relative;overflow:hidden;color:#fff;background:linear-gradient(140deg,var(--hero-a),var(--hero-b));padding:36px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;isolation:isolate}
.brand canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.brand .logo .lt{font-size:22px}
.brand h1{font-size:clamp(26px,3.4vw,42px);font-weight:600;line-height:1.1;max-width:15ch;letter-spacing:-.03em;animation:rise .8s var(--ease) both .1s}
.brand p{max-width:42ch;opacity:.92;font-size:15px;animation:rise .8s var(--ease) both .25s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.prods{display:flex;gap:8px;flex-wrap:wrap}
.prods span{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 12px;font-weight:600;font-size:13px;backdrop-filter:blur(4px)}
.authform{padding:40px clamp(20px,4vw,48px);display:flex;flex-direction:column;justify-content:center;gap:26px}
.authform form{max-width:380px;width:100%}
.authform h2{font-family:var(--f-display);font-weight:700;font-size:24px}
.pw{display:flex;gap:6px}
.pw input{flex:1}
.err{background:var(--bad-soft);color:var(--bad);padding:10px 12px;border-radius:10px;font-size:13px;animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.demo{max-width:420px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip-u{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 11px 4px 4px;cursor:pointer;font-size:12.5px;transition:border-color .15s}
.chip-u:hover{border-color:var(--accent)}
.chip-u .avatar{width:24px;height:24px;font-size:10px}
.chip-u:disabled{opacity:.45;cursor:not-allowed}

/* bottom nav (phone) */
.bnav{display:none}
@media (max-width:760px){
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .tabs,.who .nm,.logo .ls{display:none}
  .who{padding:0;border:0;background:none}
  .bnav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:8;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  .bnav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;font-size:10.5px;color:var(--muted);cursor:pointer;font-weight:500;min-width:0}
  .bnav button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .bnav .ico{width:40px;height:28px;padding:4px 10px;border-radius:999px;transition:background .2s}
  .bnav button.on{color:var(--accent)}
  .bnav button.on .ico{background:var(--accent-soft)}
  h1{font-size:19px}
  .hero{padding:20px 18px 0;border-radius:22px}
  .hero .hchart{margin-inline:-18px;height:96px}
  .hero .hfoot{display:none}
  .ring svg{width:84px;height:84px}
  .t td>.cv{display:block;min-width:0;overflow-wrap:anywhere}
  .ring .rv b{font-size:17px}
  .card{padding:15px}
  .tw{margin-inline:-15px;padding-inline:15px}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:12px 13px}
  .kpi .v{font-size:18px}
  .head>.spacer{display:none}
  .head .filters{width:100%}
  .filters select{flex:1 1 140px}
  .donutwrap{grid-template-columns:1fr;justify-items:center}
  .donutwrap>div:last-child{width:100%}
  #modal{align-items:flex-end;padding:0}
  .dlg,.dlg.wide{width:100%;border-radius:22px 22px 0 0;max-height:92vh;overflow-y:auto;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));animation:sheet .32s var(--ease)}
  @keyframes sheet{from{transform:translateY(40px);opacity:.4}}
  .auth{grid-template-columns:1fr;margin:12px 0 0;min-height:0;border-radius:24px}
  .brand{padding:24px;gap:18px;min-height:260px}
  .authform{padding:24px 18px}
  .line{grid-template-columns:1fr 1fr}.line>:first-child{grid-column:1/-1}
  /* tables become cards */
  .t thead{display:none}
  .t tr{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
  .t tbody tr:last-child{border-bottom:0}
  .t td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;border:0;padding:3px 0;text-align:right}
  .t td::before{content:attr(data-label);color:var(--muted);font-size:12px;text-align:left;flex:none;max-width:45%}
  .t td[data-label=""]::before{display:none}
  .t td[data-label=""]{justify-content:flex-end}
  .t td:first-child{font-weight:600}
  .t tfoot tr{border-top:2px solid var(--line)}
  .t tr.click:hover td{background:none}
}

/* v3: sidebar shell */
.shell{display:grid;grid-template-columns:252px minmax(0,1fr);gap:28px;max-width:1460px;margin:0 auto}
.side{position:sticky;top:env(safe-area-inset-top,0px);align-self:start;height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;padding:20px 0 16px}
.side .logo{padding:0 10px 8px}
.snav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1;min-height:0;margin-inline:-6px;padding-inline:6px;scrollbar-width:thin}
.sb{display:flex;align-items:center;gap:11px;border:0;background:none;padding:9px 12px;border-radius:12px;color:var(--muted);font-weight:500;cursor:pointer;text-align:left;transition:background .2s,color .2s,box-shadow .2s}
.sb:hover{background:var(--sunk);color:var(--ink)}
.sb.on{background:linear-gradient(118deg,var(--hero-a),var(--hero-b));color:#fff;box-shadow:0 10px 24px -14px var(--hero-a)}
.sb .cnt{margin-left:auto;background:var(--bad);color:var(--accent-ink);border-radius:9px;font-size:11px;padding:1px 7px;font-weight:700}
.sb.on .cnt{background:rgba(255,255,255,.28)}
.ucard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.ucard .u{display:flex;gap:10px;align-items:center;min-width:0}
.ucard .nm{min-width:0;display:flex;flex-direction:column}
.ucard .nm b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ucard .acts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ucard .acts .ib{width:auto}
.content{min-width:0}
.content main{padding-top:24px}
.mtop{display:none}
/* buyer confirmation */
.buyer{border:1.5px dashed var(--accent);border-radius:14px;padding:12px 14px 14px;display:grid;gap:10px;margin:0;background:color-mix(in srgb,var(--accent-soft) 55%,var(--surface))}
.buyer legend{padding:0 6px;font-weight:600;color:var(--accent)}
.sigpad{width:100%;height:160px;background:#FFFFFF;border:1px solid var(--line);border-radius:12px;touch-action:none;cursor:crosshair;display:block}
.sigrow{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.thumbs{display:flex;gap:6px;flex-wrap:wrap}
.thumbs img{width:66px;height:66px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.signed{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px}
.sigimg{height:74px;max-width:180px;background:#FFFFFF;border-radius:8px;border:1px solid var(--line);padding:4px;object-fit:contain}
.ptile{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--pc-ink);background:color-mix(in srgb,var(--pc) 16%,var(--surface));font-family:var(--f-display);font-weight:600;font-size:13px;flex:none;overflow:hidden}
.ptile img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){
  .shell{grid-template-columns:1fr;gap:0}
  .side{display:none}
  .mtop{display:flex;align-items:center;gap:8px;position:sticky;top:env(safe-area-inset-top,0px);z-index:6;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-block:10px;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px))}
  .mtop .ib{width:36px;height:36px}
  .content main{padding-top:10px}
  .signed{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* web panel additions */
.skel{display:grid;gap:14px}.skel i{display:block;height:90px;border-radius:16px;background:linear-gradient(90deg,var(--sunk),var(--surface),var(--sunk));background-size:200% 100%;animation:sk 1.2s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.errbox{background:var(--bad-soft);color:var(--bad);padding:14px 16px;border-radius:14px}
.qr{background:#fff;padding:10px;border-radius:12px;display:inline-block}
.docframe{width:100%;height:70vh;border:1px solid var(--line);border-radius:12px;background:#fff}
a{color:var(--accent)}
a.sb,.bnav a,.sheetlist a,a.ib{text-decoration:none;color:inherit}
a.sb{color:var(--muted)} a.sb.on{color:#fff}
.sheetlist a{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;font-weight:500;font-size:15px}
.sheetlist a:hover,.sheetlist a.on{background:var(--accent-soft);color:var(--accent)}
@media (max-width:760px){
  .bnav a{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;font-size:10.5px;color:var(--muted);font-weight:500;min-width:0}
  .bnav a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .bnav a .ico{width:40px;height:28px;padding:4px 10px;border-radius:999px;transition:background .2s}
  .bnav a.on{color:var(--accent)} .bnav a.on .ico{background:var(--accent-soft)}
}

/* ===== Менеджер — приложение продажника: каталог, корзина, продажи ===== */
.mh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mh h1{font-size:26px}
.mh .today{color:var(--muted);font-size:13px}
.mh .today::first-letter{text-transform:uppercase}
.mbanner{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:14px;padding:12px 14px;font:inherit;text-align:left;cursor:pointer;animation:rise .35s var(--ease)}
.mbanner .ico{width:20px;height:20px;flex:none}
.mbanner>span:not(.go){flex:1}
.mbanner .go{font-weight:600;white-space:nowrap}
.mbanner .btn{color:inherit}
.mbanner.warn{background:var(--warn-soft);color:var(--warn)} .mbanner.info{background:var(--info-soft);color:var(--info)}
.salehero .planbar{height:8px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden;max-width:440px;margin:6px 0 4px}
.salehero .planbar i{display:block;height:100%;background:#fff;border-radius:inherit;animation:grow 1.1s var(--ease)}
.cta{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}
.ctab{display:flex;align-items:center;gap:14px;padding:18px;border-radius:20px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font:inherit;text-align:left;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s,border-color .15s}
.ctab:hover{border-color:var(--accent)} .ctab:active{transform:scale(.98)}
.ctab .ico{width:46px;height:46px;padding:11px;border-radius:15px;background:var(--accent-soft);color:var(--accent);flex:none}
.ctab b{display:block;font-size:16px} .ctab small{color:var(--muted);font-size:12.5px}
.ctab.pri{background:var(--ink);color:var(--bg);border-color:transparent} .ctab.pri small{color:inherit;opacity:.7}
.ctab.pri .ico{background:linear-gradient(118deg,var(--hero-a),var(--hero-b));color:#fff}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0;box-shadow:var(--shadow)}
.tile small{color:var(--muted);font-size:12px}
.tile b{font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile span{font-size:12px;color:var(--muted)}
.tile.bad span{color:var(--bad)} .tile.acc{background:var(--accent-soft);border-color:transparent} .tile.acc b{color:var(--accent)}
.sect{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px}
.sect a{color:var(--accent);font-size:13px;text-decoration:none;font-weight:600}
.hits{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(176px,1fr);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 6px;margin:0 -2px}
.hit{scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:3px;box-shadow:var(--shadow)}
.hit .art{height:112px;margin-bottom:6px}
.hit .sub{font-size:11.5px;color:var(--muted);margin-bottom:8px;flex:1}
.art{position:relative;display:grid;place-items:center;border-radius:14px;background:color-mix(in oklab,var(--pc) 13%,var(--surface));cursor:pointer;overflow:hidden}
.art svg{width:100%;height:100%;max-height:150px;transition:transform .35s var(--ease)}
.art:hover svg{transform:scale(1.06) rotate(-3deg)}
.art img{width:100%;height:100%;object-fit:cover}
.art.big{height:240px}
.art.big svg{max-height:220px}
.csearch{display:flex;flex-direction:column;gap:10px;position:sticky;top:env(safe-area-inset-top,0px);z-index:3;background:var(--bg);padding:8px 0}
.csearch input{width:100%;padding:12px 14px;border-radius:14px;font-size:15px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.chipb{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:99px;padding:7px 14px;font:inherit;font-weight:500;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.chipb.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chipb i{font-style:normal;margin-left:6px;opacity:.6;font-size:12px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:14px;padding-bottom:96px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .18s var(--ease),border-color .15s;animation:rise .45s var(--ease) both}
.pcard:nth-child(2){animation-delay:.05s} .pcard:nth-child(3){animation-delay:.1s} .pcard:nth-child(4){animation-delay:.15s} .pcard:nth-child(n+5){animation-delay:.2s}
.pcard:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--pc) 50%,var(--line))}
.pcard .art{height:172px;border-radius:0}
.stockb{position:absolute;left:10px;top:10px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--surface);box-shadow:var(--shadow)}
.stockb.ok{color:var(--ok)} .stockb.warn{color:var(--warn)} .stockb.bad{color:var(--bad)}
.pbody{padding:12px 14px 14px;display:flex;flex-direction:column;gap:2px;flex:1}
.cat{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--pc,var(--accent));font-weight:700}
.pn{font-family:var(--f-display);font-weight:600;font-size:17px;cursor:pointer;letter-spacing:-.01em}
.pf{font-size:12.5px;color:var(--muted)}
.pprice{display:flex;align-items:baseline;gap:4px;margin-top:8px}
.pprice b{font-size:21px;font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pprice span{color:var(--muted);font-size:12px}
.pmin{font-size:11.5px;color:var(--muted);margin-bottom:12px}
.pact{margin-top:auto}
.btn.full{width:100%;justify-content:center;display:inline-flex;align-items:center;gap:6px}
.btn .ico{width:16px;height:16px}
.btn.pri .ico{color:inherit}
.step{display:flex;align-items:center;justify-content:space-between;border-radius:12px;background:var(--accent-soft);padding:4px;animation:rise .2s var(--ease)}
.step button{width:42px;height:34px;border:0;border-radius:9px;background:var(--surface);color:var(--accent);font-size:20px;font-weight:600;cursor:pointer}
.step button:active{transform:scale(.92)}
.step button:disabled{opacity:.4;cursor:not-allowed}
.step b{font-size:16px;color:var(--accent);font-variant-numeric:tabular-nums}
.cartbar{position:fixed;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:15;display:flex;justify-content:center;pointer-events:none;padding:0 16px}
.cartbar .cb-in{pointer-events:auto;display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--bg);border-radius:20px;padding:10px 10px 10px 12px;box-shadow:0 20px 44px -16px rgba(28,24,48,.6);width:min(640px,100%);animation:rise .35s var(--ease)}
.cb-n{min-width:36px;height:36px;padding:0 6px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(118deg,var(--hero-a),var(--hero-b));color:#fff;font-weight:700}
.cb-t{flex:1;display:flex;flex-direction:column;min-width:0}
.cb-t b{font-size:16px;font-variant-numeric:tabular-nums}
.cb-t small{opacity:.7;font-size:11.5px}
.cartbar .btn.ghost{color:inherit;opacity:.7}
@media (min-width:761px){.cartbar{left:280px}}
.plist{display:flex;flex-direction:column;margin-top:6px}
.pl{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.pl:first-child{border-top:0}
.pl .main{flex:1;display:flex;flex-direction:column;min-width:0}
.pl .main span{font-size:12.5px}
.pl[data-open]{cursor:pointer}
.pl .amt{font-variant-numeric:tabular-nums;white-space:nowrap}
.pdet{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;align-items:start}
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.prices div{background:var(--sunk);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;min-width:0}
.prices small{font-size:11px;color:var(--muted)} .prices b{font-size:15px;font-variant-numeric:tabular-nums}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg label{cursor:pointer;position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;transition:border-color .15s,background .15s;height:100%}
.seg small{color:var(--muted);font-size:12px}
.seg input:checked+span{border-color:var(--accent);background:var(--accent-soft)}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
form[data-mode=consignment] .onlybuy{display:none!important}
form[data-mode=buyout] .onlycons{display:none!important}
.lines{display:flex;flex-direction:column;gap:8px}
.ln{display:grid;grid-template-columns:52px minmax(0,1fr) 90px 140px;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:8px}
form[data-mode=consignment] .ln{grid-template-columns:52px minmax(0,1fr) 90px}
.lart{width:52px;height:52px;border-radius:10px;background:color-mix(in oklab,var(--pc) 13%,var(--surface))}
.lart svg{width:100%;height:100%}
.lmain{display:flex;flex-direction:column;min-width:0} .lmain span{font-size:12px}
.lq,.lp{display:flex;flex-direction:column;gap:2px} .lq small,.lp small{font-size:11px;color:var(--muted)} .lq input,.lp input{width:100%}
.totalbox{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:14px;background:var(--sunk)}
.totalbox b{font-family:var(--f-display);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.success{text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center;padding:14px 4px 4px}
.success .tick{width:86px;height:86px;border-radius:50%;background:linear-gradient(118deg,var(--hero-a),var(--hero-b));display:grid;place-items:center;color:#fff;font-size:42px;font-weight:700;animation:pop .55s var(--ease);box-shadow:0 18px 40px -16px var(--hero-a)}
.success.pend .tick{background:var(--warn);box-shadow:none}
.success .tick svg{width:52px;height:52px;fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s .3s var(--ease) forwards}
.success .big{font-family:var(--f-display);font-size:34px;font-weight:700;letter-spacing:-.03em}
.segs{margin-top:4px}
.dgroup{display:flex;flex-direction:column;gap:6px}
.dh{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);padding:6px 4px 0}
.dh span::first-letter{text-transform:uppercase}
.dh b{color:var(--ink)}
.sale{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--line);background:var(--surface);border-radius:16px;font:inherit;color:inherit;text-align:left;cursor:pointer;box-shadow:var(--shadow);transition:border-color .15s}
.sale:hover{border-color:var(--accent)}
.sk{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--accent-soft);color:var(--accent)}
.sk .ico{width:20px;height:20px}
.sk.consignment{background:var(--info-soft);color:var(--info)} .sk.return,.sk.adjustment{background:var(--bad-soft);color:var(--bad)}
.sale .main{flex:1;display:flex;flex-direction:column;min-width:0}
.sale .main .muted{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sale .right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;white-space:nowrap}
.menu button.hot{border-color:var(--accent);background:var(--accent-soft)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes grow{from{width:0}}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@media (max-width:760px){
  .cta{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr} .tiles .tile:first-child{grid-column:1/-1}
  .pgrid{grid-template-columns:1fr 1fr;gap:10px}
  .pcard .art{height:128px} .pbody{padding:10px 11px 12px} .pn{font-size:15px} .pprice b{font-size:17px} .pmin{font-size:11px}
  .cartbar{bottom:calc(76px + env(safe-area-inset-bottom,0px));padding:0 10px}
  .cb-t small,.cartbar .btn.ghost{display:none}
  .mh h1{font-size:22px}
  .pdet{grid-template-columns:1fr} .art.big{height:190px}
  .ln,form[data-mode=consignment] .ln{grid-template-columns:44px 1fr 1fr} .lart{width:44px;height:44px;grid-row:span 2} .lmain{grid-column:2/-1}
  form[data-mode=consignment] .lq{grid-column:2/-1}
  .prices b{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.pcard,.cartbar .cb-in,.mbanner,.step{animation:none}}
a.btn{text-decoration:none;display:inline-flex;align-items:center;gap:6px;color:inherit}
a.btn.pri{color:#fff}
.csearch .chips,.chips.segs{flex-wrap:nowrap}

/* ===== Карточка препарата: галерея, видео, описание, состав, применение ===== */
.pdet{grid-template-columns:minmax(0,380px) minmax(0,1fr)}
.pmedia{display:flex;flex-direction:column;gap:8px;min-width:0}
.gtrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:18px;aspect-ratio:1;background:var(--sunk);scrollbar-width:none}
.gtrack::-webkit-scrollbar{display:none}
.gtrack img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center}
.gthumbs{display:flex;gap:6px;overflow-x:auto}
.gthumbs button{flex:none;width:56px;height:56px;padding:0;border-radius:10px;border:2px solid transparent;overflow:hidden;cursor:pointer;background:var(--sunk);opacity:.7;transition:opacity .15s,border-color .15s}
.gthumbs button.on{border-color:var(--accent);opacity:1}
.gthumbs img{width:100%;height:100%;object-fit:cover;display:block}
.ghostv{border-style:dashed}
.pinfo{gap:10px}
.ptabs{display:flex;gap:4px;padding:4px;background:var(--sunk);border-radius:14px;margin-top:6px;position:sticky;top:-1px;z-index:2}
.ptabs button{flex:1;border:0;background:none;padding:9px 6px;border-radius:10px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.ptabs button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.ptab{animation:rise .25s var(--ease);line-height:1.6;font-size:14.5px}
.ptab p{margin:0 0 10px}
.plist2{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.plist2 li{padding:10px 12px;border-radius:12px;background:var(--sunk);border-left:3px solid var(--pc,var(--accent))}
.steps{margin:0;padding:0;list-style:none;counter-reset:st;display:flex;flex-direction:column;gap:10px}
.steps li{counter-increment:st;display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:start}
.steps li::before{content:counter(st);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--hero-a),var(--hero-b))}
.pvideo{width:100%;border-radius:16px;background:#000;display:block;max-height:70vh}
.pvideo.yt{aspect-ratio:16/9;overflow:hidden}
.pvideo.yt iframe{width:100%;height:100%;border:0}
.vbadge{position:absolute;right:10px;top:10px;display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:3px 8px 3px 5px;border-radius:99px;background:rgba(20,16,36,.62);color:#fff}
.vbadge .ico{width:13px;height:13px;fill:#fff;stroke:none}
.pcard .art img{width:100%;height:100%;object-fit:cover}
.pfs{border:1px solid var(--line);border-radius:16px;padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px;margin:0}
.pfs legend{font-weight:600;padding:0 6px}
.pfs textarea{width:100%;resize:vertical;line-height:1.5}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.gi{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--sunk)}
.gi img{width:100%;height:100%;object-fit:cover;display:block}
.gi .cover{position:absolute;left:6px;top:6px;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:99px;background:var(--accent);color:var(--accent-ink)}
.gi .gact{position:absolute;right:4px;bottom:4px;display:flex;gap:4px}
.gi .gact button{width:28px;height:28px;border-radius:8px;border:0;background:rgba(20,16,36,.66);color:#fff;cursor:pointer;font-size:13px}
.addf{align-self:flex-start;cursor:pointer}
.vprev{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.vprev video{width:100%;max-width:420px;border-radius:12px;background:#000}
.ptile img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
@media (max-width:760px){
  .pdet{grid-template-columns:1fr}
  .gtrack{border-radius:14px}
  .ptabs{top:0}
  .ptabs button{font-size:13px;padding:9px 4px}
}

/* ===== PWA: офлайн, установка, очередь отправки ===== */
#netbar{position:fixed;left:12px;right:12px;margin:0 auto;width:fit-content;top:calc(8px + env(safe-area-inset-top,0px));z-index:25;display:flex;align-items:center;gap:8px;max-width:560px;padding:9px 14px;border-radius:14px;background:var(--ink);color:var(--bg);font-size:12.5px;box-shadow:0 14px 30px -14px rgba(0,0,0,.5);animation:rise .3s var(--ease)}
#netbar .ico{width:18px;height:18px;flex:none;opacity:.8}
body.offline .mtop{margin-top:44px}
@media (min-width:761px){body.offline .content{padding-top:44px}}
.mbanner.acc{background:linear-gradient(118deg,var(--hero-a),var(--hero-b));color:#fff}
.obox{border-color:var(--warn);background:color-mix(in oklab,var(--warn-soft) 55%,var(--surface))}
.obox h2{display:flex;align-items:center;gap:8px}
.obox h2 .ico{width:18px;height:18px;color:var(--warn)}
.success.queued .tick{background:var(--ink)}
.success.queued .tick svg.ico{width:42px;height:42px;fill:none;stroke:var(--bg);stroke-width:2;stroke-dasharray:none;stroke-dashoffset:0;animation:none}
@media (display-mode:standalone){
  body{padding-top:env(safe-area-inset-top,0px)}
  .mtop{position:sticky;top:0;z-index:7;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
}

/* ===== Фирменный стиль Revix (каталог 2025): какао, пудрово-розовый, полутоновая сфера ===== */
h1,.kpi .v,.hero .hv,.ring .rv b,.tile b,.pprice b,.totalbox b,.success .big,.pname,.pn,.cb-t b,.mh h1{font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
h1{font-weight:600}
.hero .hv{font-weight:600;letter-spacing:-.02em}
/* logo: the real halftone sphere + wordmark, recoloured through CSS masks so it follows the theme */
.blogo{display:inline-flex;align-items:center;gap:8px;color:var(--ink);flex:none}
.blogo i{display:block;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.blogo .bmark{--m:url(/brand/mark.png);width:30px;height:33px}
.blogo .bword{--m:url(/brand/wordmark.png);width:68px;height:21px}
.logo .ls{line-height:1.15;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.mtop .blogo .bmark{width:28px;height:31px}
.brand .blogo{color:var(--hero-ink)}
.brand .blogo .bmark{width:44px;height:48px}.brand .blogo .bword{width:104px;height:32px}
/* hero: cocoa → rose with a faint halftone sphere */
.hero{background:radial-gradient(120% 140% at 100% 0%,color-mix(in oklab,var(--hero-b) 85%,#fff 15%) 0%,transparent 55%),linear-gradient(125deg,var(--hero-a) 0%,var(--hero-b) 100%)}
.hero::after{content:"";position:absolute;right:-60px;bottom:-90px;width:340px;height:370px;background:#fff;opacity:.09;-webkit-mask:url(/brand/mark.png) center/contain no-repeat;mask:url(/brand/mark.png) center/contain no-repeat;z-index:-1;pointer-events:none}
.hero::before{background:radial-gradient(circle,rgba(236,230,255,.22),transparent 65%)}
.btn.pri{background:var(--accent);box-shadow:0 8px 20px -12px var(--accent)}
.btn.pri:hover{background:color-mix(in oklab,var(--accent) 88%,#000);box-shadow:0 10px 24px -12px var(--accent)}
.ctab.pri .ico,.cb-n,.steps li::before,.gi .cover{background:var(--accent)}
.success .tick{background:var(--accent);box-shadow:0 18px 40px -16px var(--accent)}
.mbanner.acc{background:linear-gradient(118deg,var(--hero-a),var(--hero-b))}
.sb.on{background:var(--ink);color:var(--bg);box-shadow:0 10px 22px -14px var(--ink)}
.sb.on .ico{color:inherit}
/* login: brand photo from the catalogue under a cocoa veil */
.brand.photo{background:linear-gradient(180deg,rgba(28,24,48,.15) 0%,rgba(28,24,48,.55) 45%,rgba(18,14,38,.92) 100%),url(/brand/brand-portrait.jpg) center 18%/cover no-repeat,var(--hero-a)}
.brand .eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.8}
.brand h1{font-weight:600;max-width:17ch}
.brand .contacts{font-size:12.5px;opacity:.85}
.prods span{background:rgba(247,244,255,.14);border-color:rgba(247,244,255,.28)}
@media (max-width:760px){.brand.photo{background-position:center 12%}}
.ptab .lead{font-size:15px;line-height:1.6;margin:0 0 12px}
.dsec{padding:10px 0;border-top:1px solid var(--line)}
.dsec h4{margin:0 0 4px;font:600 11.5px/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.dsec p{margin:0}
a.sb.on,.sb.on{color:var(--bg)}
.pcard .art{height:auto;aspect-ratio:1/1}
.pcard .art img,.hit .art img{object-position:50% 38%}
.pf{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:760px){.pcard .art{height:auto}}
.cat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}