*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#0d1117;
--surface:#161b22;
--surface2:#1c2128;
--surface3:#21262d;
--border:#21262d;
--border2:#30363d;
--text:#c9d1d9;
--text-dim:#8b949e;
--text-bright:#f0f6fc;
--accent:#58a6ff;
--accent-bg:rgba(88,166,255,.1);
--accent-border:rgba(88,166,255,.3);
--ok:#3fb950;
--ok-bg:rgba(63,185,80,.08);
--warn:#d29922;
--danger:#f85149;
--danger-bg:rgba(248,81,73,.08);
--sans:'Plus Jakarta Sans',sans-serif;
--mono:'Fira Code',monospace;
--topbar:50px;
--sidebar:210px;
--mobile-nav:58px;
--radius:8px;
--radius-sm:5px;
--shadow-lg:0 4px 20px rgba(0,0,0,.5);
}

html,body{height:100%;overflow:hidden;font-size:14px}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.5}

/* ── Topbar ── */
.topbar{
height:var(--topbar);display:flex;align-items:center;justify-content:space-between;
padding:0 18px;background:var(--surface);border-bottom:1px solid var(--border);
box-shadow:0 1px 0 rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.2);
position:fixed;top:0;left:0;right:0;z-index:100;
}
.topbar-left{display:flex;align-items:center;gap:10px}
.brand-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;box-shadow:0 0 6px rgba(88,166,255,.5)}
.brand-name{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--text-bright);letter-spacing:.14em}
.brand-ver{font-family:var(--mono);font-size:10px;color:var(--text-dim);background:var(--surface2);border:1px solid var(--border2);padding:1px 6px;border-radius:3px}
.topbar-right{display:flex;align-items:center;gap:10px}
.user-label{font-size:12px;color:var(--text-dim)}
.btn-logout{
font-family:var(--sans);font-size:12px;font-weight:500;color:var(--text-dim);
background:none;border:1px solid var(--border2);padding:5px 12px;border-radius:var(--radius-sm);
cursor:pointer;text-decoration:none;transition:all .15s;
}
.btn-logout:hover{color:var(--danger);border-color:rgba(248,81,73,.4);background:var(--danger-bg)}

/* ── Layout ── */
.layout{display:flex;height:calc(100vh - var(--topbar));margin-top:var(--topbar);overflow:hidden}

/* ── Sidebar ── */
.sidebar{
width:var(--sidebar);flex-shrink:0;
background:var(--surface);border-right:1px solid var(--border);
display:flex;flex-direction:column;padding:10px 0;
}
.nav{display:flex;flex-direction:column;gap:1px;padding:0 8px;flex:1}
.nav-item{
display:flex;align-items:center;gap:9px;padding:8px 10px;
background:none;border:none;border-left:2px solid transparent;
color:var(--text-dim);font-family:var(--sans);font-size:13px;font-weight:500;
cursor:pointer;text-align:left;
border-radius:0 var(--radius-sm) var(--radius-sm) 0;
margin-left:-1px;padding-left:11px;
transition:all .15s;white-space:nowrap;
}
.nav-item svg{flex-shrink:0;opacity:.7;transition:opacity .15s}
.nav-item:hover{color:var(--text);background:var(--surface2)}
.nav-item:hover svg{opacity:1}
.nav-item.active{color:var(--text-bright);background:var(--accent-bg);border-left-color:var(--accent)}
.nav-item.active svg{color:var(--accent);opacity:1}
.nav-divider{height:1px;background:var(--border);margin:6px 8px}
.sidebar-status{
padding:10px 14px;border-top:1px solid var(--border);
display:flex;align-items:center;gap:6px;
font-family:var(--mono);font-size:10px;color:var(--text-dim);
}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0;animation:blink 2s infinite;transition:background .3s}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

/* ── Main ── */
.main-content{flex:1;overflow-y:auto;padding:20px;min-width:0}

/* ── Views ── */
.view{display:none}
.view.active{display:block}

/* ── Page Header ── */
.page-header{
display:flex;align-items:flex-start;justify-content:space-between;
gap:12px;margin-bottom:20px;flex-wrap:wrap;
padding-bottom:16px;border-bottom:1px solid var(--border);
}
.page-title-wrap{flex:1;min-width:0}
.page-title{font-size:17px;font-weight:700;color:var(--text-bright);letter-spacing:-.01em}
.page-sub{font-size:12px;color:var(--text-dim);margin-top:3px}
.controls{display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:nowrap}

/* ── Controls ── */
.ctrl-select{
background:var(--surface2);border:1px solid var(--border2);
color:var(--text);font-family:var(--sans);font-size:12px;font-weight:500;
padding:6px 10px;border-radius:var(--radius-sm);outline:none;cursor:pointer;transition:border-color .15s;
}
.ctrl-select:focus{border-color:var(--accent)}
.ctrl-btn{
background:var(--surface2);border:1px solid var(--border2);
color:var(--text);font-family:var(--sans);font-size:12px;font-weight:500;
padding:6px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;white-space:nowrap;
}
.ctrl-btn:hover{background:var(--surface3);border-color:var(--border2);color:var(--text-bright)}
.ctrl-btn.primary{background:var(--accent);color:#0d1117;border-color:var(--accent);font-weight:600;box-shadow:0 1px 4px rgba(88,166,255,.25)}
.ctrl-btn.primary:hover{opacity:.9;box-shadow:0 2px 8px rgba(88,166,255,.35)}
.ctrl-btn:disabled{opacity:.4;cursor:not-allowed}
.ctrl-search{
background:var(--surface2);border:1px solid var(--border2);
color:var(--text-bright);font-family:var(--sans);font-size:12px;
padding:6px 10px;border-radius:var(--radius-sm);outline:none;
width:170px;min-width:100px;transition:border-color .15s;
}
.ctrl-search:focus{border-color:var(--accent)}
.ctrl-search::placeholder{color:var(--text-dim)}
.date-range-wrap{display:flex;align-items:center;gap:4px}
.ctrl-date{
background:var(--surface2);border:1px solid var(--border2);
color:var(--text);font-family:var(--sans);font-size:12px;font-weight:500;
padding:5px 8px;border-radius:var(--radius-sm);outline:none;cursor:pointer;
color-scheme:dark;transition:border-color .15s;
}
.ctrl-date:focus{border-color:var(--accent)}
.date-sep{font-size:12px;color:var(--text-dim);flex-shrink:0}

/* ── Stat Cards ── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.stats-grid-4{grid-template-columns:repeat(4,1fr)}
.stat-card{
background:var(--surface);border:1px solid var(--border);
padding:14px 16px;border-radius:var(--radius);
transition:border-color .15s;
}
.stat-card:hover{border-color:var(--border2)}
.stat-lbl{font-size:10px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.stat-val{font-family:var(--mono);font-size:26px;font-weight:500;color:var(--text-bright);line-height:1.1}
.stat-val.accent{color:var(--accent)}
.stat-note{font-size:11px;color:var(--text-dim);margin-top:6px}
.sk .sk-lbl{height:10px;background:var(--surface2);border-radius:3px;width:50%;margin-bottom:14px;animation:shimmer 1.4s infinite}
.sk .sk-val{height:26px;background:var(--surface2);border-radius:3px;width:65%;animation:shimmer 1.4s infinite}
@keyframes shimmer{0%,100%{opacity:.3}50%{opacity:.7}}

/* ── Two col ── */
.two-col{display:flex;gap:10px}
.flex-1{flex:1;min-width:0}
.flex-2{flex:2;min-width:0}

/* ── Panel ── */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
.panel-head{
display:flex;align-items:center;
padding:10px 14px;border-bottom:1px solid var(--border);
font-size:11px;font-weight:600;color:var(--text-dim);
text-transform:uppercase;letter-spacing:.07em;
background:linear-gradient(180deg,var(--surface2) 0%,var(--surface3) 100%);
}
.panel-body{padding:0}
.panel-body.scroll-x{overflow-x:auto}
.panel-body.no-pad{padding:0}
.panel-foot{
padding:8px 14px;border-top:1px solid var(--border);
display:flex;align-items:center;gap:5px;flex-wrap:wrap;
background:var(--surface);
}

/* ── Table ── */
table{width:100%;border-collapse:collapse;font-size:12px}
th{
padding:9px 12px;text-align:left;
font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
color:var(--text-dim);border-bottom:1px solid var(--border2);white-space:nowrap;
background:linear-gradient(180deg,var(--surface2) 0%,var(--surface3) 100%);
}
td{padding:9px 12px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .1s}
tbody tr:hover td{background:rgba(88,166,255,.04)}
.td-ref{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-dim);font-family:var(--mono);font-size:11px}
.td-ip{color:var(--text-dim);font-family:var(--mono);font-size:11px;white-space:nowrap}
.td-time{color:var(--text-dim);font-family:var(--mono);font-size:11px;white-space:nowrap}
.td-num{text-align:right;font-family:var(--mono);font-size:12px}
.td-money{text-align:right;font-family:var(--mono);font-size:12px;color:var(--ok)}
.td-roi-pos{color:var(--ok);font-family:var(--mono);font-size:12px;text-align:right}
.td-roi-neg{color:var(--danger);font-family:var(--mono);font-size:12px;text-align:right}
.td-roi-zero{color:var(--text-dim);font-family:var(--mono);font-size:12px;text-align:right}

/* ── Loading / Empty ── */
.loading{color:var(--text-dim);font-size:12px;padding:24px 14px;text-align:center}
.empty-state{padding:36px 20px;text-align:center;color:var(--text-dim);font-size:13px}
.empty-state::before{content:'—';display:block;font-size:24px;color:var(--border2);margin-bottom:8px;letter-spacing:.2em}

/* ── Tags ── */
.tag{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.04em;padding:2px 7px;border-radius:3px;text-transform:uppercase}
.tag-active{background:var(--ok-bg);color:var(--ok);border:1px solid rgba(63,185,80,.2)}
.tag-paused{background:rgba(210,153,34,.08);color:var(--warn);border:1px solid rgba(210,153,34,.2)}
.tag-deleted{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(248,81,73,.15)}
.tag-approved{background:var(--ok-bg);color:var(--ok);border:1px solid rgba(63,185,80,.2)}
.tag-pending{background:rgba(210,153,34,.08);color:var(--warn);border:1px solid rgba(210,153,34,.2)}
.tag-declined{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(248,81,73,.15)}
.tag-real{background:var(--surface2);color:var(--text-dim);border:1px solid var(--border2)}
.tag-bot{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(248,81,73,.15)}
.tag-unique{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border)}
.tag-conv{background:var(--ok-bg);color:var(--ok);border:1px solid rgba(63,185,80,.2)}
.tag-noconv{background:var(--surface2);color:var(--text-dim);border:1px solid var(--border2)}
.tag-return{background:var(--surface2);color:var(--text-dim);border:1px solid var(--border2)}

/* ── CLKID cell ── */
.clkid-cell{
font-family:var(--mono);font-size:10px;color:var(--text-dim);
letter-spacing:.02em;max-width:120px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:color .15s;
}
.clkid-cell:hover{color:var(--accent)}

/* ── Copy button ── */
.copy-btn{
background:none;border:1px solid var(--border2);color:var(--text-dim);
font-family:var(--mono);font-size:10px;padding:2px 7px;
border-radius:3px;cursor:pointer;transition:all .15s;white-space:nowrap;
}
.copy-btn:hover{color:var(--accent);border-color:var(--accent-border);background:var(--accent-bg)}

/* ── Link cell ── */
.link-cell{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:10px;color:var(--text-dim)}

/* ── Top Campaigns ── */
.tp-item{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--border);transition:background .1s}
.tp-item:last-child{border-bottom:none}
.tp-item:hover{background:rgba(255,255,255,.02)}
.tp-url{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--text);font-weight:500}
.tp-count{font-family:var(--mono);font-size:11px;color:var(--text-dim);width:28px;text-align:right;flex-shrink:0}

/* ── Live badge ── */
.live-badge{
font-family:var(--mono);font-size:10px;color:var(--ok);
background:var(--ok-bg);border:1px solid rgba(63,185,80,.25);
padding:1px 8px;border-radius:10px;margin-left:8px;
}

/* ── Chart ── */
.chart-wrap-lg{position:relative;height:260px;padding:14px 16px 10px}

/* ── Pagination ── */
.pg-btn{
background:var(--surface2);border:1px solid var(--border2);
color:var(--text-dim);font-family:var(--mono);font-size:11px;
padding:4px 9px;border-radius:3px;cursor:pointer;transition:all .15s;
}
.pg-btn:hover{color:var(--text-bright);background:var(--surface3)}
.pg-btn.cur{color:var(--accent);border-color:var(--accent-border);background:var(--accent-bg);font-weight:600}
.pg-info{font-family:var(--mono);font-size:11px;color:var(--text-dim);margin-right:6px}

/* ── Action buttons ── */
.act-btn{
background:none;border:1px solid var(--border2);color:var(--text-dim);
font-family:var(--sans);font-size:11px;font-weight:500;
padding:3px 9px;border-radius:3px;cursor:pointer;transition:all .15s;
}
.act-btn:hover{color:var(--text-bright);background:var(--surface2)}
.act-btn.del:hover{color:var(--danger);border-color:rgba(248,81,73,.4);background:var(--danger-bg)}
.act-row{display:flex;gap:5px}

/* ── Forms ── */
.form-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.form-field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:160px}
label{font-size:12px;font-weight:600;color:var(--text-dim)}
.hint{font-size:11px;font-weight:400;color:var(--text-dim)}
input[type=text]{
background:var(--surface2);border:1px solid var(--border2);
color:var(--text-bright);font-family:var(--sans);font-size:13px;
padding:8px 10px;border-radius:var(--radius-sm);outline:none;width:100%;
transition:border-color .15s;
}
input[type=text]:focus{border-color:var(--accent)}
input[readonly]{color:var(--text-dim);cursor:default}
.form-actions{display:flex;align-items:center;gap:8px}
.form-error{font-size:12px;color:var(--danger)}
.hidden{display:none!important}

/* ── Code block ── */
.code-block{
background:var(--bg);border:1px solid var(--border2);border-radius:var(--radius-sm);
padding:10px 12px;font-family:var(--mono);font-size:11px;color:var(--accent);
overflow-x:auto;white-space:pre;line-height:1.6;
}

/* ── Modal ── */
.modal{
position:fixed;inset:0;background:rgba(0,0,0,.7);
display:flex;align-items:center;justify-content:center;
z-index:200;padding:20px;backdrop-filter:blur(2px);
}
.modal-box{
background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);
padding:20px;width:100%;max-width:680px;
max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
box-shadow:var(--shadow-lg);
}
.modal-head{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:14px;flex-shrink:0;
padding-bottom:12px;border-bottom:1px solid var(--border);
}
.modal-head span{font-size:14px;font-weight:700;color:var(--text-bright)}
.modal-close{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:3px;transition:all .15s}
.modal-close:hover{color:var(--text-bright);background:var(--surface2)}

/* ── Toast ── */
#toast{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast-item{
background:rgba(22,27,34,.97);border:1px solid var(--border2);
color:var(--text-bright);font-family:var(--sans);font-size:13px;font-weight:500;
padding:10px 16px;border-radius:var(--radius);
box-shadow:var(--shadow-lg);
animation:toast-in .2s ease;pointer-events:none;
display:flex;align-items:center;gap:8px;
}
.toast-item.ok{border-color:rgba(63,185,80,.35);color:var(--ok)}
.toast-item.err{border-color:rgba(248,81,73,.35);color:var(--danger)}
@keyframes toast-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes toast-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(6px)}}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}
*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}

/* ── Focus ring ── */
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Mobile nav ── */
.mobile-nav{display:none}

/* ── Pixel view ── */
.px-step{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--border)}
.px-step-num{
flex-shrink:0;width:24px;height:24px;background:var(--accent);color:#0d1117;
border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:700;margin-top:2px;
box-shadow:0 0 8px rgba(88,166,255,.3);
}
#px-output{border-radius:0 0 var(--radius) var(--radius)}

/* ── Responsive ── */
@media(max-width:768px){
.sidebar{display:none}
.layout{margin-top:var(--topbar)}
.main-content{padding:14px 12px 80px}
.stats-grid{grid-template-columns:repeat(2,1fr)}
.stats-grid-4{grid-template-columns:repeat(2,1fr)}
.two-col{flex-direction:column}
.td-ref{display:none}
.mobile-nav{
display:flex;position:fixed;bottom:0;left:0;right:0;
background:var(--surface);border-top:1px solid var(--border);
box-shadow:0 -2px 10px rgba(0,0,0,.3);
z-index:100;height:var(--mobile-nav);
}
.mobile-nav-item{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:3px;background:none;border:none;color:var(--text-dim);font-family:var(--sans);
font-size:10px;font-weight:500;cursor:pointer;transition:color .15s;
}
.mobile-nav-item.active{color:var(--accent)}
.mobile-nav-item svg{flex-shrink:0}
.page-header{flex-direction:column;align-items:flex-start}
.controls{flex-wrap:wrap;flex-shrink:1}
.form-row{flex-direction:column}
.form-field{min-width:unset}
}

@media(max-width:480px){
.stats-grid{grid-template-columns:repeat(2,1fr);gap:8px}
.stat-val{font-size:22px}
.brand-name{font-size:11px}
.main-content{padding:12px 10px 80px}
}