:root{--bg:#0f1218;--panel:#171b23;--panel2:#1d222c;--line:#2a303c;--text:#e8ecf2;--dim:#9aa3b2;--accent:#b39ae6;--on-accent:#1a0d33;--good:#34c759;--bad:#ff6b6b}
/* Theme: dark by default; light when the system is light (unless chosen dark), or when chosen light. */
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--bg:#f4f6fa;--panel:#fff;--panel2:#f7f8fb;--line:#e3e7ee;--text:#18202c;--dim:#5c6778;--accent:#2e1350;--on-accent:#fff;--good:#1f9d49;--bad:#d64545}}
:root[data-theme="light"]{--bg:#f4f6fa;--panel:#fff;--panel2:#f7f8fb;--line:#e3e7ee;--text:#18202c;--dim:#5c6778;--accent:#2e1350;--on-accent:#fff;--good:#1f9d49;--bad:#d64545}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;border-bottom:1px solid var(--line);background:var(--panel)}
.brand{font-weight:700;letter-spacing:-.01em}.brand span{color:var(--accent)}
.wrap{max-width:1240px;margin:0 auto;padding:24px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
h1{font-size:24px;margin:0}h2{font-size:15px;margin:0 0 12px;color:var(--dim);font-weight:600}
.btn,button{display:inline-block;border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:8px 14px;border-radius:9px;font:inherit;cursor:pointer}
.btn.primary,button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.seg a{padding:7px 13px;color:var(--dim);white-space:nowrap}.seg a.on{background:var(--accent);color:var(--on-accent)}.seg a:hover{text-decoration:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-bottom:22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
.kpi .label{color:var(--dim);font-size:13px}.kpi .value{font-size:26px;font-weight:700;margin:4px 0 2px;letter-spacing:-.02em}
.kpi .delta{font-size:13px}.up{color:var(--good)}.down{color:var(--bad)}.flat{color:var(--dim)}
.charts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(520px,100%),1fr));gap:14px}@media(max-width:620px){.charts{grid-template-columns:1fr}}
.chart{height:260px;position:relative}
.status{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.pill{border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:12px;color:var(--dim);background:var(--panel)}
.pill.ok{border-color:color-mix(in srgb,var(--good) 50%,var(--line));color:var(--good)}.pill.err{border-color:color-mix(in srgb,var(--bad) 50%,var(--line));color:var(--bad)}
.notice{background:color-mix(in srgb,var(--accent) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));padding:10px 14px;border-radius:10px;margin-bottom:16px;font-size:14px}
.err-text{color:var(--bad);font-size:13px;margin-top:6px}
form.stack{display:grid;gap:14px;max-width:640px}label{display:grid;gap:5px;font-size:13px;color:var(--dim)}
input{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:9px 11px;font:inherit}
.login{min-height:100vh;display:grid;place-items:center;padding:16px}.login .card{width:100%;max-width:380px;padding:26px}
.list a.card{display:block;color:var(--text)}.list a.card:hover{border-color:var(--accent);text-decoration:none}
small,.dim{color:var(--dim)}
/* client shell with sidebar */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 57px)}
.side{border-right:1px solid var(--line);background:var(--panel);padding:18px 12px;position:sticky;top:0;align-self:start;min-height:calc(100vh - 57px)}
.side .client{font-weight:700;padding:4px 10px 12px}
.side a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;color:var(--text);font-size:14px}
.side a:hover{background:var(--panel2);text-decoration:none}.side a.on{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-weight:600}
.side a.off{color:var(--dim);opacity:.6;pointer-events:none}.side .sep{height:1px;background:var(--line);margin:10px 4px}
.side small{display:block;padding:0 10px;margin-top:2px}
@media(max-width:860px){.shell{grid-template-columns:1fr}.side{position:static;min-height:0;display:flex;gap:4px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px}.side .client,.side .sep,.side small{display:none}.side a{white-space:nowrap}}
.main{min-width:0;max-width:1440px;margin:0}
.tables{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr));gap:14px;margin-bottom:22px}@media(max-width:620px){.tables{grid-template-columns:1fr}}
.ranked{width:100%;border-collapse:collapse;font-size:14px}.ranked td{padding:6px 4px;position:relative}.ranked th{color:var(--dim);font-weight:500;font-size:12px;text-align:left;padding:0 4px 6px}
.ranked td.n,.ranked th.n{text-align:right;white-space:nowrap}.ranked td.l{max-width:0;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranked .bar{position:absolute;inset:3px auto 3px 0;background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:5px;z-index:0}
.ranked td span{position:relative;z-index:1}.ranked .pct{color:var(--dim);width:48px}
.scroll{overflow-x:auto}.data{width:100%;border-collapse:collapse;font-size:13.5px}
.data th{position:sticky;top:0;background:var(--panel);text-align:right;color:var(--dim);font-weight:500;font-size:12px;padding:8px 10px;border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap;user-select:none}
.data th:first-child,.data td:first-child{text-align:left}.data th:hover{color:var(--text)}
.data td{text-align:right;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}.data td:first-child{white-space:normal;min-width:220px}
.data tr:hover td{background:var(--panel2)}.data tfoot td{font-weight:600;border-top:2px solid var(--line)}
.tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:999px;border:1px solid var(--line);color:var(--dim);margin-left:6px}
.tag.ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,var(--line))}
.heat{display:grid;grid-template-columns:40px repeat(24,1fr);gap:3px;font-size:11px;color:var(--dim)}
.heat div{aspect-ratio:1;border-radius:4px;background:var(--accent)}.heat span{display:flex;align-items:center;justify-content:center}
.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap}
.toolbar input{min-width:240px}
.ad{display:flex;gap:12px;align-items:flex-start}.ad img{width:56px;height:56px;object-fit:cover;border-radius:8px;flex:none;background:var(--panel2)}
.ad .t{font-size:12px;color:var(--dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.warn{background:color-mix(in srgb,var(--bad) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--bad) 35%,var(--line));padding:10px 14px;border-radius:10px;margin-bottom:16px;font-size:14px}
.live{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--good)}.live:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--good)}
section{margin-bottom:22px}
.picker{position:relative}.picker summary{list-style:none;cursor:pointer}.picker summary::-webkit-details-marker{display:none}
.picker-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:min(420px,calc(100vw - 32px));display:grid;gap:12px;box-shadow:0 12px 40px rgba(0,0,0,.18)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.two[hidden]{display:none}
select{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:8px 10px;font:inherit}
.adgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:14px}
.sad{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--panel2);display:grid;gap:6px}
.sad .sp{font-size:12px;color:var(--dim)}.sad .sp b{color:var(--text);font-weight:600}
.sad .h{color:#1a0dab;font-size:18px;line-height:1.3}.sad .d{font-size:13.5px;color:var(--text)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sad .h{color:#8ab4f8}}
:root[data-theme="dark"] .sad .h{color:#8ab4f8}
.sad .m{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--dim);border-top:1px solid var(--line);padding-top:8px;margin-top:4px}.sad .m b{color:var(--text)}
.sad details summary{font-size:12px;color:var(--accent);cursor:pointer}.sad details ul{margin:6px 0 0;padding-left:18px;font-size:12.5px;color:var(--dim)}
.imgs{display:flex;gap:6px;overflow-x:auto}.imgs img{height:84px;border-radius:8px;flex:none;background:var(--panel)}
.back{display:inline-block;margin-bottom:6px;font-size:13px}
.facts{display:flex;gap:8px;flex-wrap:wrap;margin:-8px 0 18px}
.side .heading{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);padding:4px 10px}
@media(max-width:860px){.side .heading{display:none}}
textarea{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:9px 11px;font:inherit;resize:vertical}
.source-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:28px 0 12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.source-head h2{margin:0;font-size:17px;color:var(--text)}
.brand{display:inline-flex;align-items:center;gap:8px}.brand:hover{text-decoration:none}
.logo-itraa{height:34px;width:auto;display:block}
.logo-client{max-width:150px;max-height:40px;display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-itraa{filter:brightness(0) invert(1)}}
:root[data-theme="dark"] .logo-itraa{filter:brightness(0) invert(1)}
.credit{text-align:center;font-size:12px;color:var(--dim);padding:18px 16px 24px}.credit a{color:var(--dim);text-decoration:underline}
.brand span{font-family:Figtree,sans-serif;text-transform:uppercase;letter-spacing:.08em;font-weight:700}

/* phones */
@media(max-width:620px){
  .wrap{padding:16px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi .value{font-size:21px}.card{padding:13px}
  .seg a{padding:7px 10px}
  .row{gap:10px}.row>div:last-child{width:100%}
  .chart{height:220px}
  .data td:first-child{min-width:160px}
  .toolbar input{min-width:0;width:100%}
  .top{padding:10px 16px}
}
a.card.kpi{color:var(--text);display:block;transition:border-color .15s}a.card.kpi:hover{border-color:var(--accent);text-decoration:none}

/* theme switch */
.top-right{display:flex;align-items:center;gap:12px}
.theme{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel2)}
.theme button{border:0;border-radius:0;background:none;padding:6px 8px;color:var(--dim);display:flex;align-items:center}
.theme button:hover{color:var(--text)}.theme button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.theme svg{width:16px;height:16px}
.login-theme{position:fixed;top:12px;right:16px}
/* Umami heatmap */
.hm-stage{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--panel2);margin-top:8px}
.hm-inner{position:absolute;top:0;left:0;transform-origin:0 0}
.hm-inner iframe,.hm-inner canvas{position:absolute;top:0;left:0;border:0;pointer-events:none}
.hm-inner iframe{background:#fff}
.hm-meta{font-size:13px}
.hm-bar{display:grid;grid-template-columns:48px 1fr 48px;gap:10px;align-items:center;font-size:13px;margin:4px 0}
.hm-bar div{background:var(--panel2);border-radius:6px;height:12px;overflow:hidden}.hm-bar i{display:block;height:100%;background:var(--accent)}
.hm-bar b{text-align:right;font-weight:600}