/* Gamwall — publisher UI. Light, warm orange accent, Nunito; dark theme via [data-theme=dark]. */

:root{
  --scheme:light; color-scheme:light;
  --bg:#fafafa; --bg2:#ffffff; --panel:#ffffff; --panel2:#ffffff; --raise:#f4f4f5;
  --line:#ececef; --line2:#dcdce1;
  --ink:#09090b; --ink2:#3f3f46; --muted:#71717a; --faint:#a1a1aa;
  --accent:#f59e0b; --accent2:#f97316; --accent-ink:#ffffff; --accent-soft:#fff4e5;
  --acc-rgb:245,158,11; --acc2-rgb:249,115,22; --accent-hi:#ea7a0c; --accent-text:#9a4b05;
  --green:#16a34a; --green-soft:#e9f9ef;
  --amber:#d97706; --amber-soft:#fff6e0;
  --red:#e11d48; --red-soft:#ffecef;
  --violet:#7c3aed; --violet-soft:#f3eeff;
  --blue:#2563eb; --blue-soft:#eaf1ff;
  --green-text:#15803d; --red-text:#be123c; --amber-text:#b45309; --violet-text:#6d28d9;
  --hover:rgba(9,9,11,.035); --glass:rgba(255,255,255,.82); --sh-rgb:24,24,40;
  --r-sm:10px; --r:14px; --r-lg:20px;
  --shadow:0 1px 2px rgba(24,24,40,.04), 0 1px 3px rgba(24,24,40,.06);
  --sidebar:256px; --topbar:64px;
  --f-body:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-head:'Nunito','Segoe UI',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --grad:linear-gradient(135deg,#f59e0b,#f97316);
}
:root[data-theme=dark]{
  --scheme:dark; color-scheme:dark;
  --bg:#0b0b0f; --bg2:#101015; --panel:#131318; --panel2:#18181f; --raise:#1f1f27;
  --line:#24242c; --line2:#32323c;
  --ink:#f4f4f5; --ink2:#d4d4d8; --muted:#a1a1aa; --faint:#71717a;
  --accent-soft:rgba(245,158,11,.12); --accent-hi:#fbbf24; --accent-text:#fcd9a0; --accent-ink:#ffffff;
  --green:#22c55e; --green-soft:rgba(34,197,94,.12);
  --amber:#f59e0b; --amber-soft:rgba(245,158,11,.12);
  --red:#fb7185; --red-soft:rgba(251,113,133,.12);
  --violet:#a78bfa; --violet-soft:rgba(167,139,250,.12);
  --blue:#60a5fa; --blue-soft:rgba(96,165,250,.12);
  --green-text:#86efac; --red-text:#fca5a5; --amber-text:#fcd34d; --violet-text:#c4b5fd;
  --hover:rgba(255,255,255,.04); --glass:rgba(16,16,21,.82); --sh-rgb:0,0,0;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px -12px rgba(0,0,0,.6);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--accent);text-decoration:none}
img{max-width:100%}
h1,h2,h3{font-family:var(--f-head);letter-spacing:-.02em;margin:0}
::selection{background:rgba(var(--acc-rgb),.3)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.num{font-family:var(--f-head);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mono{font-family:var(--f-mono);font-size:12px}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.t-green{color:var(--green)} .t-red{color:var(--red)} .t-amber{color:var(--amber)} .t-accent{color:var(--accent)}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);flex-shrink:0;background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:50;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.sb-brand{display:flex;align-items:center;gap:10px;height:var(--topbar);padding:0 20px;border-bottom:1px solid var(--line)}
.sb-brand img{height:34px;width:auto}
.sb-nav{flex:1;overflow-y:auto;padding:10px 12px 48px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.sb-group{margin-top:14px}
.sb-label{display:block;padding:0 12px 6px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.sb-link{position:relative;display:flex;align-items:center;gap:12px;height:38px;padding:0 12px;border-radius:10px;color:var(--muted);font-weight:600;font-size:13.5px;transition:background .15s,color .15s}
.sb-link i{width:18px;text-align:center;font-size:14px;opacity:.9}
.sb-link:hover{background:var(--hover);color:var(--ink)}
.sb-link.is-active{background:linear-gradient(90deg,rgba(var(--acc-rgb),.16),rgba(var(--acc-rgb),.04));color:var(--ink)}
.sb-link.is-active i{color:var(--accent)}
.sb-link.is-active::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.sb-link.is-soon{cursor:default;color:var(--faint)}
.sb-link.is-soon:hover{background:none;color:var(--faint)}
.sb-pill{margin-left:auto;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--hover);color:var(--faint);border:1px solid var(--line)}
.sb-pill.hot{background:var(--amber-soft);color:var(--amber);border-color:rgba(245,158,11,.3)}
.sb-foot{padding:12px;border-top:1px solid var(--line)}
.sb-user{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.sb-user .who{min-width:0;flex:1}
.sb-user .name{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user .role{font-size:11.5px;color:var(--muted)}
.avatar{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;font:800 14px var(--f-head);color:var(--accent-ink);background:var(--grad)}
.icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:all .15s;font-size:14px}
.icon-btn:hover{color:var(--ink);border-color:var(--line2);background:var(--hover)}
.icon-btn.danger:hover{color:var(--red);border-color:rgba(248,113,113,.4);background:var(--red-soft)}

.shell>.main{flex:1;min-width:0;margin-left:var(--sidebar);display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:40;height:var(--topbar);display:flex;align-items:center;gap:12px;padding:0 28px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar .menu-btn{display:none}
.tb-title{flex:1;min-width:0}
.tb-title h1{font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-title .crumb{font-size:12px;color:var(--muted)}
.tb-chip{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);font-size:12.5px;color:var(--ink2);white-space:nowrap}
.tb-chip i{color:var(--muted)}
.tb-chip.money{border-color:rgba(34,197,94,.3);background:var(--green-soft);color:var(--green);font:700 14px var(--f-head)}
.tb-chip.money i{color:var(--green)}
.dropdown{position:relative}
.dropdown>summary{list-style:none;cursor:pointer}
.dropdown>summary::-webkit-details-marker{display:none}
.profile-btn{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px 0 4px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.profile-btn:hover{border-color:var(--line2)}
.profile-btn .avatar{width:32px;height:32px;border-radius:9px;font-size:13px}
.profile-btn .txt{line-height:1.15;text-align:left}
.profile-btn .txt b{display:block;font-size:12.5px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-btn .txt span{font-size:11px;color:var(--muted)}
.menu{position:absolute;right:0;top:calc(100% + 8px);width:240px;padding:6px;background:var(--panel2);border:1px solid var(--line2);border-radius:14px;box-shadow:0 24px 60px -10px rgba(var(--sh-rgb),.7)}
.menu-head{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.menu-head b{display:block;font-size:13px}
.menu-head span{font-size:12px;color:var(--muted);word-break:break-all}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:9px;border:0;background:none;color:var(--ink2);font:600 13px var(--f-body);cursor:pointer;text-align:left}
.menu-item i{width:16px;text-align:center;color:var(--muted)}
.menu-item:hover{background:var(--hover);color:var(--ink)}
.menu-item.danger,.menu-item.danger i{color:var(--red)}

.content{padding:28px;max-width:1520px;width:100%;margin:0 auto}
.backdrop{display:none}

/* ---------- page header ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head h2{font-size:24px;font-weight:700}
.page-head p{margin:4px 0 0;color:var(--muted)}

/* ---------- surfaces ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.card-head h3{font-size:14.5px;font-weight:700}
.card-head .sub{font-size:12px;color:var(--muted);margin-top:2px}
.card-body{padding:18px 20px}
.grid{display:grid;gap:16px}
.grid>*,.stack>*{min-width:0}
.g-kpi{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-kpi.six{grid-template-columns:repeat(6,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);align-items:start}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stack{display:flex;flex-direction:column;gap:16px}
.mt{margin-top:16px}

/* KPI */
.kpi{padding:18px 18px 14px;position:relative;overflow:hidden}
.kpi-top{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.kpi-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:13px;background:var(--accent-soft);color:var(--accent)}
.kpi-ic.green{background:var(--green-soft);color:var(--green)}
.kpi-ic.amber{background:var(--amber-soft);color:var(--amber)}
.kpi-ic.violet{background:var(--violet-soft);color:var(--violet)}
.kpi-ic.red{background:var(--red-soft);color:var(--red)}
.kpi-val{margin-top:12px;font:700 27px/1.1 var(--f-head);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:12px;color:var(--muted);min-height:20px}
.kpi .spark{display:block;margin-top:10px;width:100%;height:36px}
.delta{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.delta.up{background:var(--green-soft);color:var(--green)}
.delta.down{background:var(--red-soft);color:var(--red)}
.delta.flat{background:var(--hover);color:var(--muted)}

/* period strip */
.periods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.period{padding:16px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.period:nth-child(2n){border-right:0}
.period:nth-last-child(-n+2){border-bottom:0}
.period .lbl{font-size:12px;color:var(--muted);font-weight:600}
.period .val{font:700 20px var(--f-head);margin-top:4px;font-variant-numeric:tabular-nums}
.period .meta{font-size:12px;color:var(--faint);margin-top:2px}

/* money */
.money-row{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line)}
.money-row:last-child{border-bottom:0}
.money-row .kpi-ic{width:38px;height:38px;border-radius:11px;font-size:15px}
.money-row .lbl{font-size:12.5px;color:var(--muted)}
.money-row .hint:empty{display:none}
.money-row .val{font:700 19px var(--f-head);font-variant-numeric:tabular-nums}
.money-row>div:nth-child(2){flex:1;min-width:0}
.money-row .lbl{white-space:nowrap}
.money-row .hint{font-size:11.5px;color:var(--faint);text-align:right;max-width:140px}

/* segmented control */
.seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);gap:2px}
.seg a{display:inline-flex;align-items:center}
.seg button,.seg a{border:0;background:none;color:var(--muted);font:600 12px var(--f-body);padding:6px 11px;border-radius:7px;cursor:pointer;white-space:nowrap}
.seg button:hover,.seg a:hover{color:var(--ink)}
.seg button.on,.seg a.on{background:var(--raise);color:var(--ink);box-shadow:0 1px 0 var(--hover) inset,0 2px 6px rgba(var(--sh-rgb),.3)}

/* chart */
.chart-wrap{position:relative;padding:8px 12px 4px}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .grid-line{stroke:var(--line);stroke-dasharray:3 4}
.chart .axis{fill:var(--faint);font:500 12px var(--f-body)}
.chart .hit{fill:transparent}
.chart .hit:hover{fill:rgba(var(--acc-rgb),.06)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.chart-tip{position:absolute;pointer-events:none;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:8px 10px;font-size:12px;box-shadow:0 12px 30px rgba(var(--sh-rgb),.5);white-space:nowrap;opacity:0;transition:opacity .1s;z-index:5}
.chart-tip b{font-family:var(--f-head)}
[data-pane]{display:none}[data-pane].on{display:block}

/* tables */
.table-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:11px 20px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--hover)}
.tbl td{padding:12px 20px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--hover)}
.tbl .r{text-align:right}
.tbl .clip{max-width:280px;overflow:hidden;text-overflow:ellipsis}
.status{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;font-size:11.5px;font-weight:700;text-transform:capitalize}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.s-approved,.s-active,.s-paid{background:var(--green-soft);color:var(--green)}
.s-pending,.s-processing{background:var(--amber-soft);color:var(--amber)}
.s-declined,.s-chargeback,.s-rejected{background:var(--red-soft);color:var(--red)}

/* list rows (top offers / publishers) */
.rank-list{list-style:none;margin:0;padding:6px 10px}
.rank-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px}
.rank-row:hover{background:var(--hover)}
.rank{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font:700 11px var(--f-head);background:var(--raise);color:var(--muted);flex-shrink:0}
.rank.gold{background:var(--amber-soft);color:var(--amber)}
.thumb{width:36px;height:36px;border-radius:10px;object-fit:cover;background:var(--raise);flex-shrink:0;display:grid;place-items:center;color:var(--faint);font-size:14px;border:1px solid var(--line)}
.rank-main{flex:1;min-width:0}
.rank-main b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-main span{font-size:11.5px;color:var(--muted)}
.bar{height:4px;border-radius:4px;background:var(--line);margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent2),var(--accent))}
.rank-val{text-align:right;font:700 13.5px var(--f-head);font-variant-numeric:tabular-nums;white-space:nowrap}
.rank-val small{display:block;font:500 11px var(--f-body);color:var(--muted)}

/* attention list */
.todo{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);color:var(--ink)}
.todo:last-child{border-bottom:0}
.todo .t{flex:1;font-weight:600;font-size:13px}
.todo .t span{display:block;font-weight:500;font-size:11.5px;color:var(--muted)}
.count{min-width:30px;height:24px;padding:0 8px;border-radius:8px;display:grid;place-items:center;font:700 12px var(--f-head);background:var(--raise);color:var(--muted)}
.count.hot{background:var(--amber-soft);color:var(--amber)}
.count.bad{background:var(--red-soft);color:var(--red)}

.empty{padding:36px 20px;text-align:center;color:var(--muted);font-size:13px}
.empty i{display:block;font-size:22px;color:var(--faint);margin-bottom:8px}

/* buttons / forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);font:700 13.5px var(--f-body);cursor:pointer;transition:all .15s}
.btn:hover{border-color:var(--accent)}
.btn-primary{background:linear-gradient(180deg,var(--accent),var(--accent2));border-color:transparent;color:var(--accent-ink);box-shadow:0 8px 24px -8px rgba(var(--acc-rgb),.6)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-block{width:100%}
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:7px}
.input-wrap{position:relative}
.input-wrap>i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:13px;pointer-events:none}
.input{width:100%;height:44px;padding:0 14px 0 40px;border-radius:11px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);font:500 14px var(--f-body);transition:border-color .15s,box-shadow .15s}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.14)}
.input-wrap .reveal{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:none;color:var(--faint);cursor:pointer;border-radius:8px}
.input-wrap .reveal:hover{color:var(--ink)}
.alert{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:11px;font-size:13px;margin-bottom:16px}
.alert-error{background:var(--red-soft);color:var(--red-text);border:1px solid rgba(248,113,113,.3)}

/* auth */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.auth-art{position:relative;overflow:hidden;padding:48px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--line);
  background:radial-gradient(900px 500px at 15% 10%,rgba(var(--acc-rgb),.16),transparent 60%),radial-gradient(700px 500px at 90% 90%,rgba(var(--acc2-rgb),.10),transparent 60%),var(--bg2)}
.auth-art::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 30% 30%,#000 10%,transparent 70%);opacity:.5;pointer-events:none}
.auth-art>*{position:relative;z-index:1}
.auth-art img{height:42px;width:auto}
.auth-art h2{font-size:38px;line-height:1.15;font-weight:800;max-width:520px}
.auth-art h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-art p{color:var(--muted);max-width:460px;font-size:15px;margin:14px 0 0}
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:620px}
.feat{padding:14px;border-radius:14px;background:rgba(12,19,34,.7);border:1px solid var(--line)}
.feat i{color:var(--accent);font-size:15px}
.feat b{display:block;font-size:13px;margin-top:8px}
.feat span{font-size:12px;color:var(--muted)}
.auth-form{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.auth-box{width:100%;max-width:400px}
.auth-box h1{font-size:26px;font-weight:700}
.auth-box .lead{color:var(--muted);margin:6px 0 26px}
.auth-mobile-logo{display:none;height:36px;margin-bottom:28px}
.auth-note{margin-top:22px;font-size:12px;color:var(--faint);text-align:center}

/* env badges */
.env-badges{position:fixed;right:14px;bottom:14px;display:flex;gap:6px;z-index:90;pointer-events:none;opacity:.85}
.auth .env-badges,body:not(:has(.sidebar)) .env-badges{left:auto;right:14px;bottom:14px;width:auto}
.env-badges span{font:700 11px var(--f-body);padding:5px 10px;border-radius:999px;letter-spacing:.02em;box-shadow:0 6px 18px rgba(var(--sh-rgb),.4);white-space:nowrap}
.env-new{background:#7C3AED;color:#fff}
.env-local{background:#F59E0B;color:#111}

/* ---------- responsive ---------- */
@media (max-width:1280px){.g-kpi.six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1100px){.g-main{grid-template-columns:1fr}}
@media (max-width:1180px){.g-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){
  .sidebar{transform:translateX(-100%)}
  body.nav-open .sidebar{transform:none;box-shadow:20px 0 60px rgba(var(--sh-rgb),.6)}
  body.nav-open .backdrop{display:block;position:fixed;inset:0;background:rgba(var(--sh-rgb),.6);z-index:45}
  .shell>.main{margin-left:0}
  .env-badges{left:auto;right:14px;bottom:14px;width:auto}
  .topbar{padding:0 16px}
  .topbar .menu-btn{display:grid}
  .content{padding:20px 16px}
  .g-2,.g-3{grid-template-columns:1fr}

  .auth{grid-template-columns:1fr}.auth-art{display:none}.auth-mobile-logo{display:block}
}
@media (max-width:640px){
  .money-row .hint{display:none}
  .g-kpi,.g-kpi.six{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:14px}.kpi-val{font-size:21px}.kpi-top{font-size:10.5px}.kpi .kpi-ic{display:none}
  .mini-stat{padding:12px 14px;gap:10px}.mini-stat .kpi-ic{width:32px;height:32px;font-size:13px}.mini-stat .val{font-size:17px}
  .stat-strip{grid-template-columns:1fr 1fr;gap:10px}
  .hide-sm{display:none}
  .page-head h2{font-size:20px}
  .tb-chip.date,.profile-btn .txt{display:none}
  .tb-title .crumb{display:none}
  .card-head{flex-wrap:wrap}
}

/* ======================= components for inner pages ======================= */
.btn-sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:8px}
.btn-xs{height:28px;padding:0 10px;font-size:12px;border-radius:7px}
.btn-ghost{background:transparent;border-color:var(--line)}
.btn-ghost:hover{border-color:var(--line2);background:var(--hover)}
.btn-danger{background:var(--red-soft);border-color:rgba(248,113,113,.35);color:var(--red)}
.btn-danger:hover{border-color:var(--red)}
.btn-success{background:var(--green-soft);border-color:rgba(34,197,94,.35);color:var(--green)}
.btn[disabled],.btn.is-disabled{opacity:.5;cursor:not-allowed;filter:none}
.btn .spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.input.plain{padding-left:14px}
textarea.input{height:auto;min-height:96px;padding:12px 14px;line-height:1.5;resize:vertical}
select.input{appearance:none;-webkit-appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238495b5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
select.input option{background:var(--panel);color:var(--ink)}
.input-sm{height:36px;font-size:13px;border-radius:9px}
.input.mono{font-family:var(--f-mono);font-size:12.5px}
input[type=date].input{color-scheme:var(--scheme)}
input[type=file].input{padding:8px 10px;height:auto}
.field-hint{font-size:12px;color:var(--faint);margin-top:6px}
.form-grid{display:grid;gap:0 16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid .full{grid-column:1/-1}
.form-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:16px;margin-top:4px;border-top:1px solid var(--line)}
.copy-row{display:flex;gap:8px}
.copy-row .input{flex:1;min-width:0}

.alert-success{background:var(--green-soft);color:var(--green-text);border:1px solid rgba(34,197,94,.3)}
.alert-info{background:var(--accent-soft);color:var(--accent-text);border:1px solid rgba(var(--acc-rgb),.3)}
.alert-warn{background:var(--amber-soft);color:var(--amber-text);border:1px solid rgba(245,158,11,.3)}

.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--hover);border:1px solid var(--line);color:var(--ink2);white-space:nowrap}
.chip.blue{background:var(--accent-soft);border-color:rgba(var(--acc-rgb),.3);color:var(--accent-hi)}
.chip.green{background:var(--green-soft);border-color:rgba(34,197,94,.3);color:var(--green-text)}
.chip.red{background:var(--red-soft);border-color:rgba(248,113,113,.3);color:var(--red-text)}
.chip.amber{background:var(--amber-soft);border-color:rgba(245,158,11,.3);color:var(--amber-text)}
.chip.violet{background:var(--violet-soft);border-color:rgba(167,139,250,.3);color:var(--violet-text)}
.flags{display:flex;align-items:center;gap:4px}
.flags img{width:20px;height:15px;border-radius:3px;object-fit:cover;border:1px solid var(--line)}
.devs{display:flex;gap:8px;color:var(--muted);font-size:14px}
.money-pill{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:8px;background:var(--green-soft);border:1px solid rgba(34,197,94,.28);color:var(--green);font:700 13px var(--f-head);font-variant-numeric:tabular-nums}

/* tabs (link style) */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tabs a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;color:var(--muted);font-weight:600;font-size:13.5px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--ink);border-bottom-color:var(--accent)}
.tabs .n{font:700 11px var(--f-head);padding:1px 7px;border-radius:999px;background:var(--raise);color:var(--muted)}
.tabs a.on .n{background:var(--accent-soft);color:var(--accent)}

/* filter toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.toolbar .grow{flex:1;min-width:200px}
.toolbar .input{height:38px}
.filter-pop{position:relative}
.filter-pop>summary{list-style:none}
.filter-pop>summary::-webkit-details-marker{display:none}
.filter-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(560px,92vw);padding:16px;background:var(--panel2);border:1px solid var(--line2);border-radius:14px;box-shadow:0 24px 60px -10px rgba(var(--sh-rgb),.7)}
.filter-panel h4{margin:0 0 8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.check-grid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.check{position:relative}
.check input{position:absolute;opacity:0;pointer-events:none}
.check span{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.check input:checked+span{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.check input:focus-visible+span{outline:2px solid var(--accent)}
.active-filters{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px;border-bottom:1px solid var(--line)}
.active-filters a{color:inherit}

/* pagination */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.pager .pages{display:flex;gap:4px}
.pager a,.pager span.cur,.pager span.gap{min-width:32px;height:32px;padding:0 8px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line);color:var(--ink2);font-weight:600}
.pager a:hover{border-color:var(--line2);background:var(--hover)}
.pager span.cur{background:var(--accent-soft);border-color:rgba(var(--acc-rgb),.4);color:var(--accent)}
.pager span.gap{border:0}
.pager .off{opacity:.4;pointer-events:none}

/* stat strip */
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:16px}
.mini-stat{padding:16px 18px;display:flex;align-items:center;gap:14px}
.mini-stat .kpi-ic{width:40px;height:40px;border-radius:12px;font-size:15px;flex-shrink:0}
.mini-stat .lbl{font-size:12px;color:var(--muted);font-weight:600}
.mini-stat .val{font:700 20px/1.2 var(--f-head);font-variant-numeric:tabular-nums;margin-top:2px}
.mini-stat .sub{font-size:11.5px;color:var(--faint)}

/* modal */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:flex-start;justify-content:center;padding:6vh 16px;background:rgba(2,6,14,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);overflow-y:auto}
.modal.open{display:flex}
.modal-box{width:100%;max-width:560px;background:var(--panel);border:1px solid var(--line2);border-radius:18px;box-shadow:0 40px 100px -20px rgba(var(--sh-rgb),.8);animation:pop .16s ease-out}
.modal-box.wide{max-width:760px}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0}}
.modal-head{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:16px}
.modal-head .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.modal-head .icon-btn{margin-left:auto;flex-shrink:0}
.modal-body{padding:20px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--line)}

/* key-value list */
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:13px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;text-align:right;font-weight:600;word-break:break-word}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.tile{padding:12px 14px;border-radius:12px;background:var(--bg2);border:1px solid var(--line)}
.tile .l{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.tile .v{font:700 19px var(--f-head);margin-top:4px;font-variant-numeric:tabular-nums}
.tile.hl{background:var(--green-soft);border-color:rgba(34,197,94,.3)}.tile.hl .v{color:var(--green)}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.steps li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);font-size:13px}
.steps .n{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font:700 11px var(--f-head)}
.steps .p{margin-left:auto;font:700 13px var(--f-head);color:var(--green)}

/* code */
pre.code,code.code{font-family:var(--f-mono);font-size:12px;color:#e4e4e7;background:#18181b;border:1px solid var(--line);border-radius:10px}
pre.code{padding:14px 16px;margin:0;overflow-x:auto;line-height:1.6;white-space:pre}
code.code,code.ic{padding:2px 6px;border-radius:6px}
code.ic{font-family:var(--f-mono);font-size:12px;background:var(--raise);color:var(--accent-hi)}
.code-wrap{position:relative}
.code-wrap .copy-btn{position:absolute;top:8px;right:8px}

/* placement cards */
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:16px}
.pl-card{display:flex;flex-direction:column}
.pl-top{display:flex;align-items:flex-start;gap:14px;padding:18px 20px}
.pl-top .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(var(--acc-rgb),.25),rgba(var(--acc2-rgb),.08));color:var(--accent);font-size:18px;flex-shrink:0}
.pl-top h3{font-size:15px}
.pl-top .meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.pl-top .status{margin-left:auto}
.pl-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pl-stats>div{padding:12px 16px;border-right:1px solid var(--line);min-width:0}
.pl-stats>div:last-child{border-right:0}
.pl-stats .l{font-size:11px;color:var(--faint);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pl-stats .v{font:700 15px var(--f-head);margin-top:2px}
.pl-actions{display:flex;flex-wrap:wrap;gap:8px;padding:14px 20px}
.pl-actions .spacer{flex:1}
.add-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:220px;border:1.5px dashed var(--line2);border-radius:var(--r-lg);color:var(--muted);background:transparent;cursor:pointer;font:600 14px var(--f-body);transition:all .15s}
.add-card:hover{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.add-card i{font-size:22px;color:var(--accent)}
.add-card[disabled]{cursor:not-allowed;opacity:.5}

/* support chat */
.thread{display:flex;flex-direction:column;gap:14px;padding:20px;max-height:62vh;overflow-y:auto}
.msg{max-width:min(620px,86%);padding:12px 14px;border-radius:14px;font-size:13.5px;line-height:1.55;background:var(--raise);border:1px solid var(--line)}
.msg.me{align-self:flex-end;background:linear-gradient(180deg,rgba(var(--acc-rgb),.18),rgba(var(--acc2-rgb),.10));border-color:rgba(var(--acc-rgb),.3)}
.msg .who{font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:4px;display:flex;gap:8px}
.msg .att{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;font-weight:600}
.msg .att img{display:block;max-width:220px;max-height:160px;border-radius:8px;margin-top:6px;border:1px solid var(--line)}

/* docs */
.docs{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
.docs-nav{position:sticky;top:calc(var(--topbar) + 20px);display:flex;flex-direction:column;gap:2px}
.docs-nav a{padding:7px 12px;border-radius:8px;color:var(--muted);font-size:13px;font-weight:600}
.docs-nav a:hover{color:var(--ink);background:var(--hover)}
.doc-sec{scroll-margin-top:calc(var(--topbar) + 16px)}
.doc-sec h2{font-size:19px;margin-bottom:6px}
.doc-sec h3{font-size:14.5px;margin:18px 0 8px}
.doc-sec p{color:var(--ink2);margin:0 0 12px;line-height:1.65}
.doc-sec .card-body>*:last-child{margin-bottom:0}
.note{display:flex;gap:10px;padding:12px 14px;border-radius:11px;background:var(--accent-soft);border:1px solid rgba(var(--acc-rgb),.25);color:var(--accent-text);font-size:13px;margin:12px 0}
.note.warn{background:var(--amber-soft);border-color:rgba(245,158,11,.25);color:var(--amber-text)}
.checklist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.checklist li{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);font-size:13px;font-weight:600}
.checklist i{color:var(--green)}

/* assets */
.asset-thumb{height:150px;display:grid;place-items:center;border-bottom:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;background-image:linear-gradient(45deg,var(--hover) 25%,transparent 25%,transparent 75%,var(--hover) 75%),linear-gradient(45deg,var(--hover) 25%,transparent 25%,transparent 75%,var(--hover) 75%);background-size:20px 20px;background-position:0 0,10px 10px}
.asset-thumb img{max-height:70px;max-width:80%}
.asset-thumb.light{background-color:#e9eef7}

/* settings */
.profile-hero{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.profile-hero .avatar{width:56px;height:56px;border-radius:16px;font-size:22px}

@media (max-width:960px){
  .docs{grid-template-columns:1fr}.docs-nav{position:static;flex-direction:row;flex-wrap:wrap}
  .form-grid{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .tiles{grid-template-columns:1fr 1fr}
  .pl-grid{grid-template-columns:1fr}
  .modal{padding:0;align-items:flex-end}
  .modal-box{border-radius:18px 18px 0 0;max-height:92vh;overflow-y:auto}
  .toolbar .grow{min-width:100%}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.docs>*{min-width:0}
.card-head h3 i{margin-right:6px}
.doc-sec .tbl td,.doc-sec .tbl th{padding:10px 12px}
@media (max-width:960px){.docs-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}.docs-nav a{white-space:nowrap}}

/* ======================= polish ======================= */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar) + 12px)}
body.modal-open{overflow:hidden}
/* no fade-in on page load: pages switch instantly (the browser cross-fade below is enough) */
@keyframes page-in{from{opacity:0;transform:translateY(6px)}}
.card{transition:border-color .2s,box-shadow .2s,transform .2s}
.card.hover:hover,.pl-card:hover{border-color:var(--line2);box-shadow:0 18px 40px -18px rgba(var(--sh-rgb),.8);transform:translateY(-1px)}
.btn{transition:transform .08s,filter .15s,border-color .15s,background .15s,box-shadow .15s}
.btn:active:not([disabled]){transform:translateY(1px) scale(.99)}
.btn-primary:focus-visible{box-shadow:0 0 0 4px rgba(var(--acc-rgb),.3)}
.btn.copied{border-color:rgba(34,197,94,.5);color:var(--green)}
.sb-link{transition:background .15s,color .15s,padding .15s}
.sb-link:not(.is-soon):hover{padding-left:15px}
.tbl tbody tr{transition:background .12s}
.tbl thead th{position:sticky;top:0;z-index:1;background:var(--panel)}
.table-wrap{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.thumb.ph{display:grid;place-items:center;font:700 14px var(--f-head);color:var(--accent-hi);background:linear-gradient(135deg,rgba(var(--acc-rgb),.18),rgba(167,139,250,.14))}
.chart-tip .dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
.fi{border-radius:3px;box-shadow:0 0 0 1px var(--hover)}
.flags .fi{width:20px;height:15px;background-size:cover}
.kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:5px;border:1px solid var(--line2);background:var(--bg2);font:600 11px var(--f-mono);color:var(--muted)}
.input-wrap .kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%)}

/* progress bar */
.gw-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:300;background:linear-gradient(90deg,var(--accent2),var(--accent),#a78bfa);box-shadow:0 0 10px rgba(var(--acc-rgb),.7);opacity:0;transition:width .25s,opacity .3s}
.gw-progress.run{opacity:1;width:70%;transition:width 6s cubic-bezier(.1,.6,.2,1),opacity .1s}
.gw-progress.done{width:100%;opacity:0;transition:width .2s,opacity .35s .15s}

/* toasts */
#gw-toasts{position:fixed;top:76px;right:16px;z-index:250;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 32px))}
.toast{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;font-size:13px;background:var(--panel2);border:1px solid var(--line2);box-shadow:0 18px 40px -10px rgba(var(--sh-rgb),.7);animation:toast-in .25s cubic-bezier(.2,.7,.2,1)}
.toast i{margin-top:2px}
.toast.ok i{color:var(--green)} .toast.err{border-color:rgba(248,113,113,.4)} .toast.err i{color:var(--red)}
.toast.out{animation:toast-out .3s forwards}
@keyframes toast-in{from{opacity:0;transform:translateX(20px)}}
@keyframes toast-out{to{opacity:0;transform:translateX(20px)}}

/* security bits */
.sec-row{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line)}
.sec-row:last-child{border-bottom:0}
.sec-row .t{flex:1;min-width:0}
.sec-row .t b{display:block;font-size:13.5px}
.sec-row .t span{font-size:12.5px;color:var(--muted)}
.qr-box{display:grid;place-items:center;width:188px;height:188px;padding:12px;border-radius:14px;background:#fff;margin:0 auto 14px}
.qr-box img,.qr-box canvas{width:164px!important;height:164px!important}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px;border-radius:12px;background:#18181b;border:1px dashed var(--line2);font:600 13px var(--f-mono);color:#e4e4e7;text-align:center}
.event{display:flex;gap:12px;align-items:flex-start;padding:12px 20px;border-bottom:1px solid var(--line);font-size:13px}
.event:last-child{border-bottom:0}
.event .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:var(--raise);color:var(--muted);font-size:12px}
.event .ic.good{background:var(--green-soft);color:var(--green)} .event .ic.warn{background:var(--amber-soft);color:var(--amber)} .event .ic.bad{background:var(--red-soft);color:var(--red)}
.event .meta{font-size:11.5px;color:var(--faint);margin-top:2px}
.shield{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700}
.shield.on{background:var(--green-soft);color:var(--green);border:1px solid rgba(34,197,94,.3)}
.shield.off{background:var(--amber-soft);color:var(--amber);border:1px solid rgba(245,158,11,.3)}
.otp-input{letter-spacing:10px;font:700 24px var(--f-mono)!important;text-align:center;height:56px!important}

/* phones: tables turn into cards (add class "stack" + data-label on cells) */
@media (max-width:640px){
  .tbl.tbl-cards thead{display:none}
  .tbl.tbl-cards,.tbl.tbl-cards tbody{display:block}
  .tbl.tbl-cards tr{display:block;padding:12px 16px;border-bottom:1px solid var(--line)}
  .tbl.tbl-cards tr:last-child{border-bottom:0}
  .tbl.tbl-cards td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:5px 0;border:0;white-space:normal;text-align:right;min-height:28px}
  .tbl.tbl-cards td::before{content:attr(data-label);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);text-align:left;flex-shrink:0}
  .tbl.tbl-cards td.cell-main{display:block;text-align:left;padding-bottom:8px}
  .tbl.tbl-cards td.cell-main::before,.tbl.tbl-cards td[data-label=""]::before{display:none}
  .tbl.tbl-cards td .clip{max-width:60vw!important}
  .tbl.tbl-cards .empty{width:100%}
  .tbl.tbl-cards td.hide-sm{display:none}
  .content{padding-bottom:70px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.pw-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px}
.pw-meter i{height:4px;border-radius:4px;background:var(--line)}
.pw-meter[data-s="1"] i:nth-child(-n+1){background:var(--red)}
.pw-meter[data-s="2"] i:nth-child(-n+2){background:var(--amber)}
.pw-meter[data-s="3"] i:nth-child(-n+3){background:#a3e635}
.pw-meter[data-s="4"] i{background:var(--green)}
.skel{position:relative;overflow:hidden;background:var(--bg2);border:1px solid var(--line);min-height:64px}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--hover),transparent);transform:translateX(-100%);animation:shimmer 1.2s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.spin{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;vertical-align:-2px}
@media (max-width:640px){
  .input-wrap .kbd{display:none}
  .stat-strip{grid-template-columns:1fr 1fr;gap:10px}
  .mini-stat{padding:12px;gap:10px}
  .mini-stat .kpi-ic{width:32px;height:32px;font-size:13px}
  .mini-stat .val{font-size:17px}
  .page-head{margin-bottom:16px}
}
.tile.desc{text-align:left}
.desc-text{font-size:13px;line-height:1.6;color:var(--ink2);white-space:pre-line;max-height:150px;overflow-y:auto;padding-right:6px;scrollbar-width:thin}
.modal{overscroll-behavior:contain}
.pl-stats .v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- audit fixes ---- */
.offer-cell{display:flex;align-items:center;gap:12px;min-width:0}
.offer-name{all:unset;cursor:pointer;font-weight:700;display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.offer-name:hover{color:var(--accent)}
.offer-name:focus-visible{outline:2px solid var(--accent);border-radius:4px}
.target{display:flex;align-items:center;gap:10px}
.target .devs{font-size:13px;gap:6px;color:var(--faint)}
.row-actions{display:inline-flex;gap:6px;justify-content:flex-end;white-space:nowrap}
.tbl td,.tbl th{padding-left:16px;padding-right:16px}
.tbl td:first-child,.tbl th:first-child{padding-left:20px}
.tbl td:last-child,.tbl th:last-child{padding-right:20px}
.tbl .two{display:flex;flex-direction:column;line-height:1.35}
.tbl .two small{font-size:11.5px;color:var(--faint)}
/* code blocks: copy button in its own bar, never over the code */
.code-box{border:1px solid var(--line);border-radius:10px;background:#18181b;overflow:hidden}
.code-box .bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 6px 14px;border-bottom:1px solid var(--line);background:var(--hover);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.code-box pre{margin:0;padding:12px 14px;overflow-x:auto;font:12px/1.6 var(--f-mono);color:#e4e4e7;white-space:pre}
.code-box pre.wrap{white-space:pre-wrap;word-break:break-all}
.wrap-any{overflow-wrap:anywhere;word-break:break-word}
/* money rows: hint under the label instead of colliding with the amount */
.money-row .hint{display:none}
.money-row .sub{display:block;font-size:11.5px;color:var(--faint);margin-top:1px}
/* payments: 5 stats in one row on desktop */
.stat-strip.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1180px){.stat-strip.five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.stat-strip.five{grid-template-columns:1fr 1fr}}
/* nicer file inputs */
input[type=file].input{color:var(--muted);font-size:13px;cursor:pointer}
input[type=file].input::file-selector-button{margin-right:12px;height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);font:600 12.5px var(--f-body);cursor:pointer}
input[type=file].input::file-selector-button:hover{border-color:var(--accent)}
/* filter toolbars */
.toolbar.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.toolbar.filters .grow{flex:1 1 260px;min-width:0}
.toolbar.filters select.input{flex:0 1 180px;width:auto;min-width:140px}
.toolbar.filters .acts{display:flex;gap:8px;flex:none}
.daterange{display:flex;align-items:center;gap:6px;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel);flex:none}
.daterange>i{color:var(--muted);font-size:13px}
.daterange .input{border:0;background:transparent;height:34px;padding:0 4px;width:128px;box-shadow:none}
@media (max-width:640px){.toolbar.filters .grow,.daterange,.toolbar.filters select.input,.toolbar.filters .acts{flex:1 1 100%}.daterange .input{flex:1;width:auto}.toolbar.filters .acts .btn{flex:1}}

/* ================= Top-nav publisher shell (Zadfly-style) ================= */
body{background:var(--bg)}
.tshell{min-height:100vh;display:flex;flex-direction:column;
  background:radial-gradient(1100px 420px at 50% -120px,rgba(var(--acc-rgb),.10),transparent 70%),var(--bg)}
.tnav-wrap{position:sticky;top:12px;z-index:60;display:flex;align-items:center;gap:12px;max-width:1240px;width:calc(100% - 32px);margin:12px auto 0}
.tnav{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:56px;padding:0 8px 0 12px;border-radius:18px;background:var(--glass);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid var(--line);box-shadow:0 8px 30px -12px rgba(var(--sh-rgb),.18)}
.tnav-brand{display:flex;align-items:center;padding-right:8px;margin-right:2px;border-right:1px solid var(--line);height:32px}
.tnav-brand img{height:28px;width:auto}
.tnav-links{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
.tnav-link{display:flex;align-items:center;gap:7px;height:36px;padding:0 11px;border-radius:11px;color:var(--ink2);font:700 13.5px var(--f-body);white-space:nowrap;cursor:pointer;list-style:none;transition:background .15s,color .15s}
.tnav-link::-webkit-details-marker{display:none}
.tnav-link i{font-size:12.5px;color:var(--muted)}
.tnav-link .caret{font-size:9px;margin-left:1px}
.tnav-link:hover{background:var(--hover);color:var(--ink)}
.tnav-link.on{background:var(--accent-soft);color:var(--accent-hi)}
.tnav-link.on i{color:var(--accent-hi)}
.tnav-dd{position:relative}
.tnav-dd[open] .caret{transform:rotate(180deg)}
.tnav-menu{position:absolute;left:0;top:calc(100% + 10px);width:270px;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 50px -16px rgba(var(--sh-rgb),.28);z-index:70}
.tnav-mi{display:flex;gap:12px;align-items:center;padding:9px 10px;border-radius:12px;color:var(--ink)}
.tnav-mi:hover,.tnav-mi.on{background:var(--hover)}
.tnav-mi .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-hi);flex-shrink:0}
.tnav-mi b{display:block;font-size:13.5px}
.tnav-mi small{display:block;font-size:12px;color:var(--muted)}
.tnav-burger{display:none;margin-left:auto}
.only-sm{display:none}
.tnav-side{display:flex;align-items:center;gap:8px;height:56px;padding:0 8px;border-radius:18px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 8px 30px -12px rgba(var(--sh-rgb),.18)}
.tnav-bal{display:flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:11px;background:var(--green-soft);color:var(--green);font-weight:800;font-size:13.5px;white-space:nowrap}
.icon-btn.ghost{border-color:transparent}
.tnav-user{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;padding:4px 4px 4px 8px;border-radius:12px}
.tnav-user::-webkit-details-marker{display:none}
.tnav-user:hover{background:var(--hover)}
.tnav-user .txt{line-height:1.1;text-align:right}
.tnav-user .txt b{display:block;font-size:12.5px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tnav-user .txt span{font-size:11px;color:var(--muted)}
.avatar{background:var(--grad);color:#fff;border-radius:50%}
.tnav-user .avatar{width:32px;height:32px;font-size:13px}
.tnav-side .menu{width:280px;border-radius:16px;background:var(--panel);border-color:var(--line);box-shadow:0 24px 50px -16px rgba(var(--sh-rgb),.28)}
.who-row{display:flex;gap:10px;align-items:center}
.who-row .avatar{width:38px;height:38px}
.role-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:8px 10px;border-radius:10px;background:var(--hover);font-size:12px}
.tcontent{max-width:1240px;padding:30px 16px 40px;flex:1}
.tfoot{max-width:1240px;width:calc(100% - 32px);margin:0 auto;padding:18px 0 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}

/* page heading — big & bold */
.tcontent .page-head{margin-bottom:24px}
.tcontent .page-head h2{font-size:32px;font-weight:900;letter-spacing:-.025em;line-height:1.15}
.tcontent .page-head p{font-size:14.5px;max-width:720px}

/* softer, rounder surfaces */
.card{border-radius:var(--r-lg)}
.card-head h3{font-size:16px;font-weight:800}
.kpi .num,.kpi-val{font-weight:900}
.btn{font-family:var(--f-body);font-weight:800;border-radius:12px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 24px -10px rgba(var(--acc2-rgb),.7)}
.btn-primary:hover{filter:brightness(1.05)}
.tbl th{font-weight:800;color:var(--muted)}
.tbl thead th{background:var(--hover)}
.input{border-radius:12px}
.chip{font-weight:800}

@media (max-width:1180px){
  .tnav-link{padding:0 9px;font-size:13px}
  .tnav-link>i:first-child{display:none}
}
@media (max-width:1020px){
  .tnav-burger{display:grid}
  .tnav-links{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);flex-direction:column;align-items:stretch;gap:2px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 50px -16px rgba(var(--sh-rgb),.3);max-height:calc(100vh - 100px);overflow:auto}
  body.nav-open .tnav-links{display:flex}
  .tnav-links .tnav-link{height:42px}
  .tnav-link>i:first-child{display:inline-block;width:18px;text-align:center}
  .tnav-dd .tnav-menu{position:static;width:auto;box-shadow:none;border:0;padding:0 0 4px 18px}
  .tnav{position:relative}
  .only-sm{display:flex}
  .tnav-user .txt{display:none}
}
@media (max-width:560px){
  .tnav-bal{display:none}
  .tnav-wrap{width:calc(100% - 20px);gap:8px}
  .tcontent .page-head h2{font-size:26px}
}
.kpi-ic{border-radius:50%}
.kpi-ic.blue{background:var(--blue-soft);color:var(--blue)}
.kpi .kpi-ic{width:40px;height:40px;font-size:15px}
.code-box .bar span{font:700 11px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:#a1a1aa}
.code-box .bar .btn{color:#e4e4e7;border-color:#3f3f46;background:transparent}
.code-box .bar .btn:hover{background:rgba(255,255,255,.06)}
.code-box{border-color:#27272a;border-radius:14px}
.code-box .bar{background:#1f1f23;border-bottom-color:#27272a}
.nowrap{white-space:nowrap}
.tnav-brand,.tnav-brand img{flex-shrink:0}
.tnav-brand img{height:30px;width:96px;object-fit:contain}
.tnav-wrap,.tfoot{max-width:1280px}
.tcontent{max-width:1280px}
.tnav-link{padding:0 10px;font-size:13px;gap:6px}
@media (max-width:1440px){ .tnav-link>i:first-child{display:none} }
/* dashboard hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:center;padding:26px 26px 26px 30px;margin-bottom:18px;
  background:radial-gradient(600px 220px at 0% 0%,rgba(var(--acc-rgb),.10),transparent 70%),var(--panel)}
.eyebrow{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:999px;background:var(--accent-soft);border:1px solid rgba(var(--acc-rgb),.3);color:var(--accent-hi);font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.hero h2{font-size:34px;font-weight:900;letter-spacing:-.03em;line-height:1.12;margin-top:14px}
.hero p{color:var(--muted);margin:8px 0 0;max-width:560px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hero-today{border:1px solid var(--line);border-radius:18px;padding:18px;background:var(--panel);box-shadow:0 10px 30px -18px rgba(var(--sh-rgb),.35)}
.ht-top{display:flex;justify-content:space-between;align-items:center}
.ht-lbl{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ht-lbl .kpi-ic{width:28px;height:28px;font-size:12px}
.live{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;background:var(--green-soft);color:var(--green);font-size:11px;font-weight:800;text-transform:uppercase}
.live i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:gwpulse 1.6s infinite}
@keyframes gwpulse{0%,100%{opacity:1}50%{opacity:.3}}
.ht-val{font-size:34px;font-weight:900;margin:14px 0 14px;letter-spacing:-.02em}
.ht-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding-top:12px}
.ht-grid div+div{border-left:1px solid var(--line);padding-left:12px}
.ht-grid span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.ht-grid b{font-size:15px}
@media (max-width:900px){ .hero{grid-template-columns:1fr;padding:22px} .hero h2{font-size:28px} }
@media (prefers-reduced-motion:reduce){ .live i{animation:none} }
.code-box pre{scrollbar-width:thin;scrollbar-color:#3f3f46 transparent}
.code-box .bar .btn{height:26px;padding:0 10px;font-size:11.5px}

/* ===== Offer details / Promote modal (Zadfly-style) ===== */
.modal-box.od{max-width:860px}
.od-head{justify-content:center;position:relative}
.od-head h3{flex:1;text-align:center;font-size:16px;font-weight:900}
.od-top{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:18px;flex-wrap:wrap}
.od-top>img,.od-ph{width:62px;height:62px;border-radius:16px;object-fit:cover;flex-shrink:0;background:var(--raise);box-shadow:0 0 0 2px var(--panel),0 0 0 3px rgba(var(--acc-rgb),.5)}
.od-ph{display:grid;place-items:center;color:var(--accent-hi);font-size:22px}
.od-name{flex:1;min-width:200px}
.od-name h3{font-size:17px;font-weight:900;margin:0 0 6px;line-height:1.25}
.od-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:7px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;background:var(--hover);color:var(--muted);border:1px solid var(--line)}
.badge.green{background:var(--green-soft);color:var(--green);border-color:transparent}
.badge.blue{background:var(--blue-soft);color:var(--blue);border-color:transparent}
.badge.amber{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.od-tiles{display:flex;gap:8px}
.od-tiles .t{min-width:84px;padding:8px 12px;border-radius:12px;text-align:center;border:1px solid transparent}
.od-tiles small{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.od-tiles b{font-size:17px;font-weight:900}
.od-tiles b i{font-style:normal;font-size:11px;font-weight:700}
.od-tiles .green{background:var(--green-soft);color:var(--green);border-color:rgba(22,163,74,.25)}
.od-tiles .violet{background:var(--violet-soft);color:var(--violet);border-color:rgba(124,58,237,.2)}
.od-tiles .blue{background:var(--blue-soft);color:var(--blue);border-color:rgba(37,99,235,.2)}
.od-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:12px}
.od-side{display:flex;flex-direction:column;gap:12px}
.od-card{border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:var(--panel);min-width:0}
.od-card h4{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.od-card h4 i{color:var(--accent-hi)}
.od-wide{grid-column:1/3}
.od-desc{margin:0;font-size:13px;color:var(--ink2);white-space:pre-line;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.od-desc.open{display:block}
.od-more{border:0;background:none;color:var(--accent-hi);font:800 11.5px var(--f-body);text-transform:uppercase;letter-spacing:.06em;cursor:pointer;padding:6px 0 0}
.od-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:13px}
.od-kv dt{color:var(--muted)}.od-kv dd{margin:0;text-align:right;font-weight:800}
.od-chips{display:flex;gap:6px;flex-wrap:wrap}
.od-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border-radius:7px;background:var(--hover);border:1px solid var(--line);font-size:11.5px;font-weight:800}
.od-chip img{width:16px;height:auto;border-radius:2px}
.od-ev{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:12px;margin-bottom:6px}
.od-ev .n{width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent-hi);display:grid;place-items:center;font-size:11.5px;font-weight:900;flex-shrink:0}
.od-ev .t{flex:1;font-weight:700;font-size:13px;min-width:0}
.od-ev .pv{padding:3px 9px;border-radius:9px;background:var(--green-soft);color:var(--green);font-weight:900;font-size:13px;text-align:center}
.od-ev .pv.u{background:var(--violet-soft);color:var(--violet)}
.od-ev .pv small{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:800}
.od-actions{display:flex;justify-content:flex-end;margin-top:14px}
.btn-lg{height:46px;padding:0 22px;font-size:14.5px}
.od-mini{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;margin-bottom:16px}
.od-mini img{width:44px;height:44px;border-radius:12px;object-fit:cover}
.od-mini b{display:block}.od-mini span{font-size:12px;color:var(--muted)}
.od-out{margin-top:6px;padding:14px;border-radius:14px;background:var(--accent-soft);border:1px dashed rgba(var(--acc-rgb),.5)}
.od-out label{display:block;font-weight:800;font-size:12px;margin-bottom:8px}
.od-back{position:absolute;left:16px}
@media (max-width:820px){.od-grid{grid-template-columns:1fr}.od-wide{grid-column:auto}.od-tiles{width:100%}.od-tiles .t{flex:1}}

/* ===== Notifications ===== */
.bell>summary{position:relative;list-style:none}
.bell>summary::-webkit-details-marker{display:none}
.bell-n{position:absolute;top:2px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font:900 10px/17px var(--f-body);text-align:center;box-shadow:0 0 0 2px var(--panel)}
.notif-menu{width:360px!important;max-width:calc(100vw - 24px);padding:6px!important}
.notif-head{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.link-btn{border:0;background:none;color:var(--accent-hi);font:800 12px var(--f-body);cursor:pointer}
.notif{display:flex;gap:10px;padding:10px;border-radius:12px;color:var(--ink);position:relative}
.notif:hover{background:var(--hover)}
.notif.new::after{content:"";position:absolute;right:10px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.notif .ni,.pin-bar>i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:var(--accent-soft);color:var(--accent-hi)}
.lv-warning .ni,.pin-bar.lv-warning>i{background:var(--amber-soft);color:var(--amber)}
.lv-danger .ni,.pin-bar.lv-danger>i{background:var(--red-soft);color:var(--red)}
.lv-success .ni,.pin-bar.lv-success>i{background:var(--green-soft);color:var(--green)}
.lv-payment .ni,.pin-bar.lv-payment>i{background:var(--blue-soft);color:var(--blue)}
.notif .nt{min-width:0;padding-right:14px}
.notif .nt b{display:block;font-size:13px;line-height:1.3}
.notif .nt small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.notif .nt em{display:block;font-style:normal;color:var(--faint);font-size:11px;margin-top:3px}
.notif-empty{padding:26px 10px;text-align:center;color:var(--muted)}
.notif-empty i{display:block;font-size:22px;margin-bottom:6px;color:var(--faint)}
.notif-all{display:block;text-align:center;padding:10px;margin-top:4px;border-top:1px solid var(--line);font-weight:800;font-size:12.5px}
.pin-bar{display:flex;align-items:center;gap:12px;max-width:1248px;width:calc(100% - 32px);margin:14px auto 0;padding:10px 12px;border-radius:16px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.pin-bar.lv-warning{border-color:rgba(217,119,6,.35);background:linear-gradient(90deg,var(--amber-soft),var(--panel) 60%)}
.pin-bar.lv-danger{border-color:rgba(225,29,72,.35);background:linear-gradient(90deg,var(--red-soft),var(--panel) 60%)}
.pin-bar.lv-success{border-color:rgba(22,163,74,.3);background:linear-gradient(90deg,var(--green-soft),var(--panel) 60%)}
.pin-bar.lv-payment,.pin-bar.lv-info{border-color:rgba(var(--acc-rgb),.35);background:linear-gradient(90deg,var(--accent-soft),var(--panel) 60%)}
.pin-txt{flex:1;min-width:0;font-size:13.5px}
.pin-txt span{color:var(--ink2)}
.notice-list .notif{border:1px solid var(--line);margin-bottom:8px;background:var(--panel)}
/* animal avatar */
.avatar.pic{object-fit:cover;background:var(--accent-soft);padding:0}
.tnav-user .avatar.pic{width:34px;height:34px;box-shadow:0 0 0 2px var(--panel),0 0 0 3px rgba(var(--acc-rgb),.55)}
.who-row .avatar.pic{width:42px;height:42px}
.avatar-xl{width:72px;height:72px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--panel),0 0 0 5px rgba(var(--acc-rgb),.55);background:var(--accent-soft)}
.help-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}
.help-card{display:flex;gap:14px;padding:18px}
.help-card h3{font-size:15px;font-weight:900;margin:0 0 4px}
.help-card p{margin:0 0 12px;color:var(--muted);font-size:13px}
.hc-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;background:var(--accent-soft);color:var(--accent-hi);font-size:18px}
.hc-ic.violet{background:var(--violet-soft);color:var(--violet)}.hc-ic.blue{background:var(--blue-soft);color:var(--blue)}
@media (max-width:900px){.help-grid{grid-template-columns:1fr}}
.alltime{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px;padding:14px 20px;border:1.5px dashed var(--line2);border-radius:var(--r-lg);background:var(--panel)}
.at-title{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.at-title i{color:var(--accent-hi)}
.at-stats{display:flex;gap:0;flex-wrap:wrap}
.at-stats div{padding:0 18px;border-left:1px solid var(--line)}
.at-stats div:first-child{border-left:0}
.at-stats span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.at-stats b{font-size:17px;font-weight:900}
@media (max-width:720px){.at-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%}.at-stats div{border:0;padding:0}}
/* smooth page-to-page switch (same-origin navigations) */
@view-transition{navigation:auto}
.tnav-wrap{view-transition-name:gw-nav}
::view-transition-old(root),::view-transition-new(root){animation-duration:.12s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
.tnav-wrap{max-width:1380px}
@media (max-width:1460px){ .tnav-link>i:first-child{display:none} }
/* one-click copy for offer / placement IDs */
.copy-id{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:7px;border:1px dashed var(--line2);background:var(--hover);color:var(--muted);cursor:pointer;font:600 11.5px var(--f-mono);vertical-align:middle;transition:all .15s;max-width:100%}
.copy-id .mono{font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
.copy-id i{font-size:11px;opacity:.7}
.copy-id:hover{border-color:var(--accent);color:var(--accent-hi);background:var(--accent-soft)}
.copy-id.copied{border-style:solid;border-color:var(--green);color:var(--green);background:var(--green-soft);font-family:var(--f-body)}

/* ================= ADMIN: publishers / placements / tickets ================= */
.back-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:14px}
.back-link:hover{color:var(--ink)}
.mt-s{margin-top:10px}
.grow{flex:1;min-width:0}
.avatar.pic{object-fit:cover;background:var(--raise);padding:0}
.who-cell{display:flex;align-items:center;gap:12px;min-width:0;color:var(--ink)}
.who-cell .avatar{width:38px;height:38px;border-radius:11px}
.who-cell b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-cell small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.who-cell:hover b{color:var(--accent-hi)}
.tbl tr.row-hot td{background:rgba(var(--acc-rgb),.05)}
.tbl tr.row-off td{opacity:.62}
.tbl .cb,.cb{width:16px;height:16px;accent-color:#f97316;cursor:pointer;vertical-align:middle}
.bulk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);background:var(--bg2)}
.bulk-bar>span{margin-right:auto;font-size:12.5px;font-weight:600}
.bulk-bar:not(.has) .btn{opacity:.5;pointer-events:none}
.row-actions{display:inline-flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.row-actions form{margin:0}
.pub-hero{display:flex;align-items:center;gap:18px;padding:20px 22px;flex-wrap:wrap}
.pub-hero>.avatar{width:62px;height:62px;border-radius:18px}
.pub-hero-main{flex:1;min-width:240px}
.pub-hero-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pub-hero-name h2{font-size:22px;font-weight:800;margin:0;letter-spacing:-.01em}
.pub-hero-meta{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin-top:6px;font-size:13px;color:var(--muted)}
.pub-hero-meta .link-btn{font-size:13px;color:var(--muted)}
.pub-hero-acts{display:flex;gap:8px;flex-wrap:wrap}
.pub-hero-acts form{margin:0}
.note-box{padding:12px 14px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);font-size:13px}
.note-box p{margin:6px 0 0;color:var(--ink2);white-space:pre-wrap;line-height:1.55}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline-form select{width:auto;min-width:130px;padding-left:12px}
.pl-line{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pl-line:last-child{border-bottom:0}
.pl-line-main{flex:1;min-width:200px}
.pl-line-main b{display:block;font-size:13.5px}
.pl-line-main span{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:4px}
.pl-line form{margin:0}
.cap-form{display:flex;gap:6px;align-items:center;margin:0}
.cap-form .input{width:96px;height:30px;padding:0 10px}
.ticket-list{display:flex;flex-direction:column}
.ticket-row{display:flex;gap:14px;align-items:flex-start;padding:14px 20px;border-bottom:1px solid var(--line);color:var(--ink)}
.ticket-row:last-child{border-bottom:0}
.ticket-row:hover{background:var(--hover)}
.ticket-row.is-waiting{box-shadow:inset 3px 0 0 var(--accent)}
.ticket-row .avatar{width:38px;height:38px;border-radius:11px}
.ticket-main{flex:1;min-width:0}
.ticket-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ticket-top b,.ticket-row.mini b{font-size:14px}
.ticket-main p{margin:4px 0;color:var(--ink2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticket-main small{display:block;font-size:12px;color:var(--muted)}
.ticket-when{font-size:12px;color:var(--faint);white-space:nowrap}
.ticket-row.mini{padding:10px 20px}
.ticket-row.mini b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-box{padding:16px 20px;border-top:1px solid var(--line)}
.reply-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.reply-row input[type=file]{flex:1;min-width:200px}
.reply-row select{width:auto;padding-left:12px}
.check-inline{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer}
.check-inline input{accent-color:#f97316;width:16px;height:16px}
.imp-bar{display:flex;align-items:center;gap:12px;padding:10px 18px;background:#1c1917;color:#fafaf9;font-size:13px;flex-wrap:wrap}
.imp-bar>i{color:#f59e0b;font-size:16px}
.imp-bar .pin-txt{flex:1;min-width:200px}
.imp-bar .pin-txt span{color:#d6d3d1}
.imp-bar form{margin:0}
@media (max-width:760px){.pub-hero{padding:16px}.pub-hero-acts{width:100%}.pub-hero-acts .btn{flex:1}}

/* ================= ADMIN: campaigns ================= */
.camp-form{align-items:start}
.camp-form .field{margin-bottom:14px}
.camp-side{position:sticky;top:84px}
.form-grid.four{grid-template-columns:90px minmax(0,1fr) minmax(0,1.4fr) 130px}
.icon-pick{display:flex;gap:14px;align-items:flex-start}
.icon-pick .thumb{flex-shrink:0;border-radius:14px}
.chips-input{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:46px;padding:6px 8px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);cursor:text}
.chips-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.15)}
.chips-list{display:contents}
.chips-list .chip{cursor:default;gap:4px;padding-right:4px}
.chips-list .chip button{border:0;background:none;color:inherit;cursor:pointer;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;opacity:.6}
.chips-list .chip button:hover{opacity:1;background:var(--hover)}
.chips-type{flex:1;min-width:180px;border:0;background:none;outline:none;color:var(--ink);font:500 13.5px var(--f-body);height:30px}
.chip-presets{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;font-size:12px}
.chip-presets .chip{cursor:pointer}
.chip-presets .chip:hover{border-color:var(--accent);color:var(--ink)}
.margin-line{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);font-size:13px;margin:-2px 0 14px}
.margin-line b.good{color:var(--green)} .margin-line b.bad{color:var(--red)}
.toggle-row{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;border:1px solid var(--line);cursor:pointer}
.toggle-row input{width:18px;height:18px;accent-color:#f97316;margin-top:1px;flex-shrink:0}
.toggle-row b{display:block;font-size:13.5px}.toggle-row small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.goal-add{border-top:1px solid var(--line)}
.goal-add .field{margin-bottom:10px}
.goal-btns{display:flex;gap:8px}
.goal-add.editing{background:rgba(var(--acc-rgb),.05)}
@media (max-width:1100px){.camp-side{position:static}}
@media (max-width:760px){.form-grid.four{grid-template-columns:1fr 1fr}}
.btn[hidden],.icon-btn[hidden]{display:none!important}
.icon-btn.sm{width:30px;height:30px;font-size:12px;border-radius:8px}
.goals-tbl .row-actions{flex-wrap:nowrap}.goals-tbl td.mono{font-size:12px}
.two{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.two small{font-size:11.5px;color:var(--faint)}
.toolbar .input-wrap.grow{min-width:260px}
.tbl .row-actions{flex-wrap:nowrap}
.tbl .offer-cell .two{max-width:250px}
.tbl .offer-cell .offer-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.money-kv dd{font-variant-numeric:tabular-nums}
.big-money{font-size:20px;color:var(--green)}
.range-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.range-seg{flex-wrap:wrap}
.range-bar .daterange{margin:0}
.range-bar form{display:flex;align-items:center;gap:6px}
.report-tbl th a{color:inherit}
.report-tbl .total-row td{background:var(--bg2);border-bottom:2px solid var(--line)}
.grid.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.grid.g-3{grid-template-columns:1fr}}
.report-tbl th,.report-tbl td{padding-left:10px;padding-right:10px}
.em-preview{margin-top:12px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.em-preview iframe{width:100%;height:420px;border:0;display:block}
.em-progress{margin-top:14px}
.em-progress .bar{height:8px}
.em-progress .bar i{display:block;height:100%;width:0;background:var(--grad);border-radius:4px;transition:width .2s}
.em-progress-txt{font-size:12.5px;color:var(--muted);margin-top:8px;word-break:break-all}

/* import offers */
.net-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.net-card{display:flex;flex-direction:column;gap:14px;padding:16px;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.net-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.net-top{display:flex;align-items:center;gap:12px}
.net-mark{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font:700 14px/1 var(--f-head);letter-spacing:-.02em}
.net-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.net-n{font-size:12px;margin-left:auto}
.imp-bar-opts .input{height:34px}

a.todo-link{text-decoration:none;transition:background .12s}
a.todo-link:hover{background:var(--bg2)}
a.todo-link:hover .todo-go{color:var(--accent);transform:translateX(2px)}
.todo-go{color:var(--faint);font-size:11px;transition:transform .12s,color .12s}

/* paused offers in the publisher panel */
.badge-inactive{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:7px;background:var(--red-soft);color:var(--red);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;margin-left:4px}
tr.row-inactive .offer-cell img,tr.row-inactive .offer-cell .offer-ph{filter:grayscale(.85);opacity:.7}
tr.row-inactive td{background:color-mix(in srgb,var(--raise) 60%,transparent)}

/* "login as publisher": tiny way back, nothing else changes on the page */
.imp-back{position:fixed;left:14px;bottom:14px;z-index:90;margin:0}
.imp-back button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:999px;background:rgba(20,20,26,.82);color:#fff;font:700 12px/1 inherit;cursor:pointer;opacity:.55;box-shadow:0 6px 18px -8px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .15s}
.imp-back button:hover,.imp-back button:focus-visible{opacity:1}

.at-meta{display:block;margin-top:1px;font-size:11.5px;font-weight:600;color:var(--muted)}

.cb-reason{color:var(--red)!important;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}