:root{--bg:#FAF6F1;--card:#FFFDFA;--ink:#1F1915;--muted:#60564E;--accent:#935927;--border:#D7D0C7;--hover:#F3EDE4;--ok:#059669;--warn:#B45309;--bad:#D40924;--info:#0E7490;--side:#F5EFE7;
  /* icon tiles, same colour per number as the old Performance space (Viktor) */
  --t-green:#059669;--t-blue:#2563EB;--t-violet:#7C3AED;--t-orange:#EA580C;--t-rose:#E11D48;--t-amber:#D97706;--t-red:#DC2626;--t-sky:#0284C7;--t-yellow:#CA8A04;
  --b-ok-bg:#ECFDF5;--b-ok-bd:#A7F3D0;--b-ok-tx:#047857;--b-amb-bg:#FFFBEB;--b-amb-bd:#FDE68A;--b-amb-tx:#B45309;--b-bad-bg:#FEF2F2;--b-bad-bd:#FECACA;--b-bad-tx:#B91C1C}
[hidden]{display:none!important}
html,body{overflow-x:hidden}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0E0A08;--card:#171310;--ink:#F2EEE9;--muted:#999189;--accent:#D69459;--border:rgba(255,255,255,.10);--hover:rgba(255,255,255,.05);--ok:#34D399;--warn:#FBBF24;--bad:#DE3B3D;--info:#22D3EE;--side:#130F0C;
  --t-green:#34D399;--t-blue:#60A5FA;--t-violet:#A78BFA;--t-orange:#FB923C;--t-rose:#FB7185;--t-amber:#FBBF24;--t-red:#F87171;--t-sky:#38BDF8;--t-yellow:#FACC15;
  --b-ok-bg:rgba(52,211,153,.12);--b-ok-bd:rgba(52,211,153,.3);--b-ok-tx:#34D399;--b-amb-bg:rgba(251,191,36,.12);--b-amb-bd:rgba(251,191,36,.3);--b-amb-tx:#FBBF24;--b-bad-bg:rgba(248,113,113,.12);--b-bad-bd:rgba(248,113,113,.3);--b-bad-tx:#F87171}}
:root[data-theme="dark"]{--bg:#0E0A08;--card:#171310;--ink:#F2EEE9;--muted:#999189;--accent:#D69459;--border:rgba(255,255,255,.10);--hover:rgba(255,255,255,.05);--ok:#34D399;--warn:#FBBF24;--bad:#DE3B3D;--info:#22D3EE;--side:#130F0C;
  --t-green:#34D399;--t-blue:#60A5FA;--t-violet:#A78BFA;--t-orange:#FB923C;--t-rose:#FB7185;--t-amber:#FBBF24;--t-red:#F87171;--t-sky:#38BDF8;--t-yellow:#FACC15;
  --b-ok-bg:rgba(52,211,153,.12);--b-ok-bd:rgba(52,211,153,.3);--b-ok-tx:#34D399;--b-amb-bg:rgba(251,191,36,.12);--b-amb-bd:rgba(251,191,36,.3);--b-amb-tx:#FBBF24;--b-bad-bg:rgba(248,113,113,.12);--b-bad-bd:rgba(248,113,113,.3);--b-bad-tx:#F87171}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
button,input,select{font:inherit;color:inherit}
.muted{color:var(--muted)} .bad{color:var(--bad)} .ok{color:var(--ok)} .warn{color:var(--warn)}
.num,td.n,th.n{font-variant-numeric:tabular-nums;text-align:right}

/* ── layout: side menu (desktop) / tab row (phone) ── */
.shell{min-height:100vh}
.side{position:sticky;top:0;z-index:5;background:var(--side);border-bottom:1px solid var(--border);padding:8px 12px 0}
.brand{display:flex;align-items:center;gap:8px;font-size:15px;padding:4px 4px 8px;white-space:nowrap}
.brand b{color:var(--accent)} .mark{width:24px;height:24px;border-radius:7px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px 8px}nav::-webkit-scrollbar{display:none}
nav button{display:flex;align-items:center;gap:8px;border:0;background:none;padding:8px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;color:var(--muted);min-height:38px;text-align:left}
nav button svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
nav button:hover{background:var(--hover);color:var(--ink)}
nav button.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--border)}
nav button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.glab,.sidefoot{display:none}
main{max-width:1320px;margin:0 auto;padding:16px}
@media(min-width:900px){
  .shell{display:grid;grid-template-columns:224px minmax(0,1fr)}
  .side{height:100vh;border-bottom:0;border-right:1px solid var(--border);padding:16px 12px;display:flex;flex-direction:column}
  .brand{padding:0 8px 16px}
  nav{flex-direction:column;overflow:visible;margin:0;padding:0;gap:2px}
  nav button{width:100%}
  .glab{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:16px 12px 6px}
  .sidefoot{display:block;margin-top:auto;font-size:12px;padding:0 12px}
  main{padding:24px 28px;width:100%}
}

h1{font-size:24px;margin:0 0 2px;letter-spacing:-.01em} h2{font-size:16px;margin:24px 0 10px} h3{font-size:15px;font-weight:600;margin:0}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:0 1px 2px rgba(31,25,21,.04)}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:18px}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.seg{display:inline-flex;flex-wrap:wrap;background:var(--hover);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px}
.seg button{border:0;background:none;border-radius:7px;padding:6px 11px;cursor:pointer;min-height:34px;color:var(--muted);white-space:nowrap}
.seg button.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(31,25,21,.12)}
.pill{border:1px solid var(--border);background:var(--card);border-radius:999px;padding:7px 12px;cursor:pointer;min-height:36px}
.pill.on{background:var(--accent);border-color:var(--accent);color:#fff}
.btn{border:1px solid var(--border);background:var(--card);border-radius:8px;padding:8px 14px;cursor:pointer;min-height:38px}
.btn:hover{background:var(--hover)}
.btn.icon{display:inline-grid;place-items:center;width:40px;padding:0}
.btn.icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn.icon.spin svg{animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.switch{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.switch button{border:0;background:var(--card);padding:7px 12px;cursor:pointer;min-height:36px;color:var(--muted)}
.switch button.on{background:var(--ink);color:var(--bg)}

/* ── KPI cards: 5 on top, 3 under (like the old tab) ── */
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kpis.k3{grid-template-columns:1fr;margin-top:12px}
@media(min-width:640px){.kpis.k3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.kpis.k5{grid-template-columns:repeat(5,minmax(0,1fr))}}
.kpi{display:flex;flex-direction:column;min-width:0}
.kpi .top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.kpi .lab{font-size:13px;font-weight:500;color:var(--muted)}
.kpi .val{font-size:28px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15;overflow-wrap:anywhere}
.kpi .sub{font-size:12px;color:var(--muted);margin-top:4px;overflow-wrap:anywhere}
.kpi.neg .val{color:var(--bad)} .kpi.amber .val{color:var(--warn)}
.tile{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.tile svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tile.fill svg{fill:currentColor;stroke:none}
.c-green{--c:var(--t-green)} .c-blue{--c:var(--t-blue)} .c-violet{--c:var(--t-violet)} .c-orange{--c:var(--t-orange)} .c-rose{--c:var(--t-rose)} .c-amber{--c:var(--t-amber)} .c-red{--c:var(--t-red)} .c-sky{--c:var(--t-sky)} .c-yellow{--c:var(--t-yellow)}

.strip{border:1px solid var(--border);border-left:4px solid var(--warn);background:var(--card);border-radius:8px;padding:10px 12px;margin-bottom:12px;font-size:13px}
.strip.info{border-left-color:var(--accent)} .strip.bad{border-left-color:var(--bad)}
.sec{display:flex;align-items:center;gap:8px;margin:28px 0 12px;color:var(--muted)}
.sec svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sec h2{margin:0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.sec::after{content:"";flex:1;height:1px;background:var(--border)}
.grid2{display:grid;grid-template-columns:1fr;gap:12px} @media(min-width:1000px){.grid2{grid-template-columns:1fr 1fr}}
.grid3{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px} @media(min-width:1000px){.grid3{grid-template-columns:repeat(3,1fr)}}
.ch-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.ch-head .who{display:flex;gap:10px;align-items:center;min-width:0}
.ch-head .desc{font-size:12px;color:var(--muted)}
.ch-head .big{text-align:right}
.ch-head .big b{display:block;font-size:19px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ch-head .big span{font-size:12px;color:var(--muted)}
.funnel{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;background:var(--hover);border-radius:10px;padding:10px 4px;margin-bottom:12px;text-align:center}
.funnel b{display:block;font-size:16px;font-variant-numeric:tabular-nums} .funnel span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.stats{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 12px}
.stats div{min-width:70px} .stats b{display:block;font-size:16px;font-variant-numeric:tabular-nums} .stats span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.badge{display:inline-block;font-size:12px;font-weight:600;border:1px solid;border-radius:6px;padding:1px 7px;font-variant-numeric:tabular-nums;white-space:nowrap}
.badge.good{background:var(--b-ok-bg);border-color:var(--b-ok-bd);color:var(--b-ok-tx)} .badge.mid{background:var(--b-amb-bg);border-color:var(--b-amb-bd);color:var(--b-amb-tx)} .badge.low{background:var(--b-bad-bg);border-color:var(--b-bad-bd);color:var(--b-bad-tx)}
.tw{overflow-x:auto;margin:0 -4px} table{border-collapse:collapse;width:100%;font-size:13px}
th{font-weight:500;color:var(--muted);text-align:left;font-size:12px;padding:6px 6px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:8px 6px;border-bottom:1px solid var(--border);vertical-align:top} tr:last-child td{border-bottom:0}
tr.sub td{color:var(--muted);font-size:12px;background:var(--hover)} tr.click{cursor:pointer} tr.click:hover td{background:var(--hover)}
.tag{display:inline-block;font-size:11px;border:1px solid var(--border);border-radius:999px;padding:0 7px;margin:1px 2px 1px 0;color:var(--muted)}
.star{color:var(--t-amber)}
.foot{font-size:12px;color:var(--muted);margin-top:12px}
.sk{background:linear-gradient(90deg,var(--hover),var(--card),var(--hover));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:6px;color:transparent!important}
@keyframes sk{to{background-position:-200% 0}}
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.loginCard{width:100%;max-width:360px;display:grid;gap:12px}
label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
input[type=email],input[type=password],input[type=date],input[type=number]{border:1px solid var(--border);border-radius:6px;padding:8px 10px;background:var(--bg);min-height:38px;width:100%}
input[type=number]{max-width:110px}
.dates{display:none;gap:6px;align-items:center;flex-wrap:wrap} .dates.on{display:flex} .dates input{width:auto}
.st{font-weight:600} .st.OK{color:var(--ok)} .st.failing{color:var(--bad)}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)} .row:last-child{border-bottom:0}
.chk{display:flex;gap:10px;align-items:flex-start;padding:8px 0;color:var(--ink);font-size:14px} .chk input{margin-top:3px;width:18px;height:18px}
.grid3{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))!important}
.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:160px}
.morerow td{border-bottom:0;padding-top:10px}
.morebtn{border:1px solid var(--border);background:var(--card);border-radius:8px;padding:7px 12px;cursor:pointer;color:var(--accent);font-weight:600;width:100%;min-height:38px}
.morebtn:hover{background:var(--hover)}
@media(max-width:1099px){.kpis.k5>.kpi:last-child{grid-column:1/-1}}

/* step 1: freshness line, site steps, new buyer cost */
.fresh{display:flex;flex-wrap:wrap;gap:4px 14px;margin:-6px 0 14px;font-size:12px;color:var(--muted)}
.fr{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.fr b{color:var(--ink);font-weight:600}
.fr.ok{color:var(--muted)}.fr i{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}.fr.warn i{background:var(--warn)}.fr.bad i{background:var(--bad)}.fr.info i{background:var(--accent)}
@media(max-width:639px){.fresh{flex-direction:column;gap:3px}.fr{display:block;white-space:normal}.fr i{display:inline-block;margin-right:5px;vertical-align:1px}}
.xrow{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}@media(min-width:900px){.xrow{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;background:var(--hover);border-radius:10px;padding:12px 6px;text-align:center}
.step{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0}
.step b{font-size:20px;font-variant-numeric:tabular-nums;line-height:1.2}.step>span:last-child{font-size:11px;color:var(--muted)}
.step+.step::before{content:"→";position:absolute;left:-7px;top:52%;color:var(--muted);transform:translateX(-50%)}
.step .rate{font-size:11px;font-weight:600;color:var(--accent);background:var(--card);border:1px solid var(--border);border-radius:999px;padding:0 6px;margin-bottom:4px;white-space:nowrap}

/* step 2: Ads page (MER gauge, Meta verdict table, orders per campaign, Google per bag) */
#merbox:not(:empty){margin-top:12px}
.mgrid{display:grid;grid-template-columns:1fr;gap:10px}@media(min-width:640px){.mgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mcell{background:var(--hover);border-radius:10px;padding:12px;min-width:0;border:1px solid transparent}.mcell.main{border-color:var(--accent);background:var(--card)}
.mcell .lab{font-size:13px;font-weight:500;color:var(--muted)}
.mval{font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px;margin:2px 0 6px}.mval .badge{font-size:12px;letter-spacing:0}
.mcell .sub{font-size:12px;color:var(--muted);margin-top:6px}
.mbar{position:relative;height:6px;border-radius:3px;background:var(--border)}.mbar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--muted)}
.mbar i.good{background:var(--ok)}.mbar i.mid{background:var(--warn)}.mbar i.low{background:var(--bad)}
.mbar s{position:absolute;top:-3px;width:2px;height:12px;background:var(--muted);text-decoration:none}.mbar s.goal{background:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.chip{border:1px solid var(--border);background:var(--card);border-radius:999px;padding:5px 12px;cursor:pointer;min-height:34px;font-size:13px;color:var(--muted)}
.chip:hover{background:var(--hover)}.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:600}
.vb{display:inline-block;font-size:12px;font-weight:600;border:1px solid var(--border);border-radius:6px;padding:1px 7px;white-space:nowrap;color:var(--muted)}
.vb.good{background:var(--b-ok-bg);border-color:var(--b-ok-bd);color:var(--b-ok-tx)}.vb.mid{background:var(--b-amb-bg);border-color:var(--b-amb-bd);color:var(--b-amb-tx)}
.vb.low{background:var(--b-bad-bg);border-color:var(--b-bad-bd);color:var(--b-bad-tx)}.vb.keep{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.tag.tired{color:var(--warn);border-color:var(--b-amb-bd)}.tag.st-out{color:var(--b-bad-tx);border-color:var(--b-bad-bd);background:var(--b-bad-bg)}.tag.st-low{color:var(--b-amb-tx);border-color:var(--b-amb-bd);background:var(--b-amb-bg)}
.small{font-size:12px}
table.adt td.adn{min-width:200px;max-width:280px}table.adt td.why{min-width:220px;max-width:320px}
table.adt td,table.gt td{white-space:nowrap}table.adt td.adn,table.adt td.why{white-space:normal}
.rule{margin:12px 0 0;font-size:13px;font-weight:600;color:var(--ink);border-left:3px solid var(--accent);padding:4px 10px}
tr.ctot td{background:var(--hover);border-top:1px solid var(--border)}
.mer.compact .ch-head .btn{flex:none}
/* Step 3: Reports + Marketplaces */
.rlines{margin:0;padding-left:22px;display:grid;gap:7px;font-size:14px;line-height:1.5}.rlines li::marker{color:var(--muted);font-variant-numeric:tabular-nums}
.ralarms{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.card.ralarms{display:block;margin-bottom:12px;padding:4px 16px}.ralarms .vb{white-space:normal}
select{border:1px solid var(--border);background:var(--card);color:var(--ink);border-radius:8px;padding:7px 10px;min-height:38px;max-width:100%}
#mcards .vb,#moffers .vb{white-space:normal}.strip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;vertical-align:-2px}
#mcards .morebtn{margin-top:8px}
@media(max-width:639px){#moffers .hp{display:none}#moffers td,#moffers th{padding:6px 4px}}
table.ct td:first-child{min-width:160px}table.ct td.n{white-space:nowrap}
/* phonebrand (Shmiel Oct 25, Ben small screen): no name row on phones, the page tabs sit at the very top */
@media(max-width:899px){.side .brand{display:none}.side{padding-top:6px}}