/* Layout: app shell — brand bar, section tabs, one period row that scopes the screen, content max 1160px */
:root{
  --bg:#f3f5f4; --surface:#ffffff; --surface-2:#edf1ef; --ink:#111915; --ink-2:#47514d; --muted:#6c7672; --line:#dce2df;
  --accent:#2448b8; --accent-ink:#ffffff; --accent-soft:#e6ebf9;
  --spend:#7b8594; --other:#eb6834;
  --good:#0f7d38; --good-soft:#e1f1e6; --warn:#8a5a00; --warn-bar:#d99a1a; --warn-soft:#f8ecd2; --bad:#c23131; --bad-soft:#f8e2e2;
  --f-display:"Unbounded","Golos Text",system-ui,sans-serif;
  --f-body:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:12px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d1211; --surface:#151b19; --surface-2:#1c2421; --ink:#ecf1ee; --ink-2:#b3beb9; --muted:#8b958f; --line:#27312d;
    --accent:#7d9bf0; --accent-ink:#0d1211; --accent-soft:#1b2546;
    --spend:#8a95a4; --other:#d95926;
    --good:#34c46a; --good-soft:#12301f; --warn:#e6a93c; --warn-bar:#e6a93c; --warn-soft:#33290f; --bad:#ef6a6a; --bad-soft:#3a1b1b;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0d1211; --surface:#151b19; --surface-2:#1c2421; --ink:#ecf1ee; --ink-2:#b3beb9; --muted:#8b958f; --line:#27312d;
  --accent:#7d9bf0; --accent-ink:#0d1211; --accent-soft:#1b2546;
  --spend:#8a95a4; --other:#d95926;
  --good:#34c46a; --good-soft:#12301f; --warn:#e6a93c; --warn-bar:#e6a93c; --warn-soft:#33290f; --bad:#ef6a6a; --bad-soft:#3a1b1b;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;padding-inline:16px;padding-block:0 56px}
.wrap{max-width:1160px;margin-inline:auto}
h1,h2,h3{text-wrap:balance;margin:0}
h1{font-size:22px;font-weight:600}
h2{font-size:17px;font-weight:600}
h3{font-size:15px;font-weight:600}
p{margin:0}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.num,td{font-variant-numeric:tabular-nums}
.kop{font-size:.78em;opacity:.62;font-weight:inherit}
.muted{color:var(--muted)}
.neg{color:var(--bad)}
.stack-sm{display:grid;gap:6px}
.screen{display:grid;gap:16px}

/* top bar */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-block:16px 12px}
.brand{display:flex;align-items:baseline;gap:10px;margin-right:auto;text-decoration:none;color:var(--ink)}
.brand b{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:-.01em}
.brand b i{font-style:normal;color:var(--accent)}
.brand span{color:var(--muted);font-size:13px}
.shop-pick{display:flex;align-items:center;gap:8px}
.shop-pick select{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13.5px;max-width:16rem}
.user{font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:center}
.user form{display:inline}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-size:inherit}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tab{padding:10px 14px 12px;color:var(--ink-2);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;text-decoration:none}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--accent)}

.msgs{display:grid;gap:8px;margin-top:14px}
.msg{border-radius:10px;padding:10px 14px;font-size:14px;background:var(--accent-soft)}
.msg.success{background:var(--good-soft);color:var(--good)}
.msg.warning{background:var(--warn-soft);color:var(--warn)}
.msg.error{background:var(--bad-soft);color:var(--bad)}
.demo-note{background:var(--accent-soft);border-radius:var(--r);padding:10px 14px;font-size:13.5px;margin-top:14px}

/* period row */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-block:16px}
.seg{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:3px}
.seg a{padding:7px 14px;border-radius:8px;font-weight:500;color:var(--ink-2);text-decoration:none}
.seg a.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.period-label{font-weight:600}
.custom{display:flex;gap:6px;align-items:center;font-size:13px;flex-wrap:wrap}
.custom input{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 8px;font-size:13px}
.custom button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 10px;cursor:pointer;font-size:13px}
.custom select{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 8px;font-size:13px}
.prec{font-size:12.5px;border-radius:999px;padding:3px 10px;display:inline-flex;gap:6px;align-items:center;background:var(--surface-2);color:var(--ink-2)}
.prec.warn{background:var(--warn-soft);color:var(--warn)}

/* cards & tiles */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0}
.card-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:14px}
.card-head p{font-size:13px;color:var(--muted)}
.grid-2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px}
.grid-even{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:900px){.grid-2,.grid-even{grid-template-columns:minmax(0,1fr)}}
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr);gap:16px}
@media (max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}}
.hero-main{display:flex;flex-direction:column;gap:8px;justify-content:center}
.hero-label{font-size:13px;color:var(--ink-2)}
.hero-value{font-size:44px;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.hero-say{font-size:15px;color:var(--ink-2);max-width:44ch}
.hero-say b{color:var(--ink);font-weight:600}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tiles-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:700px){.tiles-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{background:var(--surface-2);border-radius:10px;padding:12px 14px;min-width:0}
.tile .l{font-size:12.5px;color:var(--ink-2)}
.tile .v{font-size:22px;font-weight:600;margin-top:2px;overflow-wrap:anywhere}
.tile .s{font-size:12.5px;color:var(--muted)}
.delta{font-size:13px;font-weight:500}
.delta.up{color:var(--good)} .delta.down{color:var(--bad)}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;border-radius:999px;padding:3px 10px 3px 4px;white-space:nowrap}
.chip i{font-style:normal;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--surface)}
.chip.good{background:var(--good-soft);color:var(--good)} .chip.good i{background:var(--good)}
.chip.warn{background:var(--warn-soft);color:var(--warn)} .chip.warn i{background:var(--warn)}
.chip.bad{background:var(--bad-soft);color:var(--bad)} .chip.bad i{background:var(--bad)}
.chip.none{background:var(--surface-2);color:var(--muted);padding-left:10px}
.src{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:0 5px;white-space:nowrap;font-weight:400}
.tag{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:5px;padding:2px 7px}

/* waterfall */
.wf{display:grid;gap:2px}
.wf-row{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) 7.5rem 5.5rem;gap:4px 14px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.wf-row:first-child{border-top:0}
.wf-head{font-size:12px;color:var(--muted);padding-block:0 4px;border-top:0}
.wf-head span:nth-child(3),.wf-head span:nth-child(4){text-align:right}
.wf-t{font-weight:500;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.wf-d{font-size:12.5px;color:var(--muted);line-height:1.35}
.wf-track{position:relative;height:20px}
.wf-bar{position:absolute;top:2px;height:16px;border-radius:4px;min-width:2px}
.wf-bar.in{background:var(--accent)}
.wf-bar.out{background:var(--spend)}
.wf-bar.good{background:var(--good)} .wf-bar.bad{background:var(--bad)}
.wf-zero{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--ink-2)}
.wf-v{text-align:right;font-weight:600}
.wf-p{text-align:right;color:var(--ink-2)}
.wf-row.total{border-top:2px solid var(--ink-2);padding-top:10px}
.wf-row.total .wf-t{font-weight:700}
@media (max-width:640px){
  .wf-row{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"lab val pct" "bar bar bar"}
  .wf-row>div:nth-child(1){grid-area:lab}.wf-row>div:nth-child(2){grid-area:bar}.wf-row>div:nth-child(3){grid-area:val}.wf-row>div:nth-child(4){grid-area:pct}
  .wf-head{display:none}.wf-d{display:none}
}

/* insights */
.ins{display:grid;gap:10px}
.in{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:12px;border-radius:10px;background:var(--surface-2)}
.in .ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--surface)}
.in.good .ic{background:var(--good)} .in.warn .ic{background:var(--warn)} .in.bad .ic{background:var(--bad)}
.in p{font-size:14px}
.in p b{font-weight:600}
.link{color:var(--accent);font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* columns */
.cols{position:relative;display:grid;grid-template-columns:3.6rem minmax(0,1fr);gap:8px}
.cols-y{position:relative;height:170px;font-size:11.5px;color:var(--muted);text-align:right}
.cols-y span{position:absolute;right:0;transform:translateY(-50%);white-space:nowrap}
.cols-plot{position:relative;height:170px}
.cols-grid{position:absolute;left:0;right:0;height:1px;background:var(--line)}
.cols-grid.zero{background:var(--ink-2);opacity:.6}
.cols-bars{position:absolute;inset:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.col{position:relative;outline:none}
.col .b{position:absolute;left:50%;transform:translateX(-50%);width:min(24px,62%);background:var(--accent);border-radius:4px 4px 0 0}
.col .b.neg{border-radius:0 0 4px 4px;background:var(--bad)}
.col.off .b{opacity:.32}
.col:hover .b,.col:focus-visible .b{opacity:1}
.col:focus-visible{box-shadow:inset 0 0 0 2px var(--accent);border-radius:6px}
.cols-x{grid-column:2;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);font-size:11.5px;color:var(--muted);text-align:center}
.tip{position:absolute;z-index:5;pointer-events:none;background:var(--ink);color:var(--bg);font-size:12.5px;padding:6px 9px;border-radius:7px;white-space:nowrap;transform:translate(-50%,-110%)}

/* tables */
.tbl-wrap{overflow-x:auto;margin-inline:-4px}
table{border-collapse:collapse;width:100%}
table.wide{min-width:760px}
th,td{padding:10px 8px;text-align:right;border-top:1px solid var(--line);white-space:nowrap}
th{font-size:12px;font-weight:500;color:var(--muted);border-top:0;vertical-align:bottom;white-space:normal}
th:first-child,td:first-child,.tl{text-align:left}
tbody tr.click{cursor:pointer}
tbody tr.click:hover td{background:var(--surface-2)}
.prod{display:flex;align-items:center;gap:10px;white-space:normal;min-width:14rem;text-decoration:none;color:inherit}
.sw{width:28px;height:36px;border-radius:6px;flex:none;border:1px solid var(--line)}
img.sw{width:32px;height:auto;aspect-ratio:320/461;object-fit:cover;display:block}
.prod b{display:block;font-weight:500;font-size:14px}
.prod small{color:var(--muted);font-size:12px}
.per100{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.per100 .bar{width:56px;height:6px;border-radius:3px;background:var(--surface-2);position:relative;overflow:hidden}
.per100 .bar span{position:absolute;left:0;top:0;bottom:0;border-radius:3px}

/* sku */
.sku-layout{display:grid;grid-template-columns:17rem minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.sku-layout{grid-template-columns:minmax(0,1fr)}.sku-list{display:none}}
.sku-select{display:none}
@media (max-width:900px){.sku-select{display:block}}
.sku-select select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.sku-list{display:grid;gap:2px;padding:8px;max-height:78vh;overflow:auto}
.sku-btn{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;border-radius:8px;padding:8px;text-decoration:none;color:inherit}
.sku-btn:hover{background:var(--surface-2)}
.sku-btn.on{background:var(--accent-soft)}
.sku-btn .sw{width:22px;height:28px;border-radius:5px}
.sku-btn span{font-size:13.5px;line-height:1.3;overflow-wrap:anywhere}
.sku-btn small{display:block;color:var(--muted);font-size:12px}
.sku-btn em{font-style:normal;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.sku-btn.dim{opacity:.6}
.sku-head{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.sku-head .sw{width:44px;height:56px;border-radius:8px}
.sku-btn img.sw{width:24px;height:35px}
.sku-head img.sw{width:64px;height:92px}
.sku-say{font-size:16px;color:var(--ink-2);max-width:64ch}
.sku-say b{color:var(--ink);font-weight:600}
.note{font-size:13.5px;color:var(--ink-2);background:var(--surface-2);border-radius:10px;padding:10px 12px}
.note b{font-weight:600;color:var(--ink)}

/* ads */
.div-rows{display:grid;gap:2px}
.div-row{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) 7rem;gap:4px 14px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.div-row:first-child{border-top:0}
.div-t{font-weight:500;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.div-t small{display:block;color:var(--muted);font-weight:400;font-size:12px}
.div-track{position:relative;height:20px}
.div-track .z{position:absolute;top:-6px;bottom:-6px;width:1px;background:var(--ink-2)}
.div-track .b{position:absolute;top:2px;height:16px}
.div-track .b.good{background:var(--good);border-radius:0 4px 4px 0}
.div-track .b.warn{background:var(--warn-bar);border-radius:0 4px 4px 0}
.div-track .b.bad{background:var(--bad);border-radius:4px 0 0 4px}
.div-v{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .div-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t v" "bar bar"}
  .div-row>div:nth-child(1){grid-area:t}.div-row>div:nth-child(2){grid-area:bar}.div-row>div:nth-child(3){grid-area:v}
}
.stack{display:flex;height:18px;gap:2px}
.stack span{display:block;height:100%}
.stack span:first-child{border-radius:4px 0 0 4px}
.stack span:last-child{border-radius:0 4px 4px 0}
.stack span:only-child{border-radius:4px}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* product groups */
.groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:12px}
.group{background:var(--surface-2);border-radius:10px;padding:14px;display:grid;gap:8px;align-content:start;min-width:0}
.group-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.group-nums{font-size:13px;color:var(--ink-2)}
.group-advice{font-size:13.5px}
.group-top{margin:0;padding-left:18px;display:grid;gap:3px;font-size:13px}
.group-top a{color:var(--ink);text-decoration:none}
.group-top a:hover{text-decoration:underline}

/* forms */
.form{display:grid;gap:14px;max-width:40rem}
.field{display:grid;gap:5px}
.field label,.field legend{font-weight:500;font-size:14px}
.field .help{font-size:12.5px;color:var(--muted)}
.field .err{font-size:13px;color:var(--bad)}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=number],.field input[type=date],.field select,.field textarea,.input{
  width:100%;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px}
.field textarea{resize:vertical;min-height:8rem}
.field fieldset{border:0;padding:0;margin:0;display:grid;gap:6px}
.choice{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;background:var(--surface)}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.check{display:flex;gap:10px;align-items:flex-start}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:10px 18px;font-weight:600;cursor:pointer;text-decoration:none;background:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:var(--surface-2);color:var(--ink)}
.btn.danger{background:none;color:var(--bad);padding:6px 8px;font-weight:500}
.btn.bad{background:var(--bad);color:var(--surface)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.errors{background:var(--bad-soft);color:var(--bad);border-radius:10px;padding:10px 12px;font-size:14px}

/* upload */
.drop{border:2px dashed var(--line);border-radius:var(--r);padding:28px 18px;text-align:center;display:grid;gap:10px;justify-items:center;background:var(--surface-2);transition:border-color .2s}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop input[type=file]{max-width:100%}
.steps{margin:0;padding-left:20px;display:grid;gap:6px;font-size:14px}
.status-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:10px 0;border-top:1px solid var(--line);align-items:center}
.status-list>div:first-child{border-top:0}
.status-list small{display:block;color:var(--muted);font-size:12.5px}
details summary{cursor:pointer;color:var(--accent);font-size:13px}
.headers{font-size:12.5px;color:var(--muted);margin-top:6px;white-space:normal}
.formula{font-size:15px;line-height:2}
.formula .p{display:inline-block;background:var(--surface-2);border-radius:6px;padding:0 8px;margin:2px 0}
.formula .p.res{background:var(--good-soft);color:var(--good);font-weight:600}

/* landing & auth */
.auth{max-width:26rem;margin:6vh auto 0}
.auth.support{max-width:34rem}
.foot{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:48px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.foot a{color:var(--muted)}
/* документы сервиса */
.doc{max-width:48rem;margin:4vh auto 0;line-height:1.6}
.doc h1{font-size:26px;line-height:1.25;margin-bottom:6px}
.doc h2{font-size:17px;margin:26px 0 8px}
.doc p,.doc li{color:var(--ink-2)}
.doc p{margin:8px 0}
.doc ul,.doc ol{margin:6px 0;padding-left:22px;display:grid;gap:4px}
.doc .req{background:var(--surface-2);border-radius:var(--r);padding:12px 16px;margin-top:18px;font-size:14px}
.qr-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:10px}
.qr{background:#fff;border-radius:10px;padding:6px;width:200px;flex:none;line-height:0}
.qr svg{width:100%;height:auto}
.secret,.codes code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:15px;letter-spacing:.04em;background:var(--surface-2);border-radius:6px;padding:4px 8px;overflow-wrap:anywhere}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin:16px 0;padding-left:22px}
.land{display:grid;gap:28px;padding-block:6vh 0}
.land h1{font-family:var(--f-display);font-size:clamp(28px,5vw,44px);line-height:1.15;letter-spacing:-.02em;max-width:18ch}
.land .lead{font-size:18px;color:var(--ink-2);max-width:56ch}
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:800px){.feats{grid-template-columns:minmax(0,1fr)}}
.empty{text-align:center;padding:40px 18px;display:grid;gap:12px;justify-items:center}
.empty p{max-width:52ch;color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){.wf-bar,.col .b,.div-track .b{transition:all .3s ease}}