:root {
  --bg:      #0a0a0f;
  --bg2:     #0f0f17;
  --bg3:     #14141e;
  --bg4:     #1a1a26;
  --border:  #1e1e2e;
  --green:   #00ff88;
  --cyan:    #00d4ff;
  --orange:  #ff6b35;
  --purple:  #a855f7;
  --red:     #ff4455;
  --yellow:  #ffd700;
  --text:    #e8e8f0;
  --muted:   #55556a;
  --sidebar: 220px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Inter','Segoe UI',sans-serif;display:flex;min-height:100vh;overflow-x:hidden}

/* ── Sidebar ─────────────────────────── */
.sidebar{width:var(--sidebar);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;height:100vh;z-index:100;overflow-y:auto}
.sidebar-logo{padding:22px 20px;border-bottom:1px solid var(--border)}
.logo-badge{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,rgba(0,255,136,.15),rgba(0,212,255,.1));border:1px solid rgba(0,255,136,.2);border-radius:10px;padding:8px 12px}
.logo-badge svg{color:var(--cyan)}
.logo-title{font-size:15px;font-weight:800;background:linear-gradient(135deg,#00ff88,#00d4ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.5px}
.logo-sub{font-size:10px;color:var(--muted);margin-top:1px}
.sidebar-section{padding:14px 16px 4px;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted)}
.sidebar a{display:flex;align-items:center;gap:10px;padding:9px 20px;color:#777;text-decoration:none;font-size:13px;transition:all .2s;position:relative}
.sidebar a:hover{color:var(--text);background:var(--bg3)}
.sidebar a.active{color:var(--green);background:rgba(0,255,136,.06)}
.sidebar a.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--green);border-radius:0 2px 2px 0}
.sidebar-bottom{margin-top:auto;padding:16px 20px;border-top:1px solid var(--border);font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px}

/* ── Main ────────────────────────────── */
.main{margin-left:var(--sidebar);flex:1;display:flex;flex-direction:column;min-height:100vh}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;border-bottom:1px solid var(--border);background:var(--bg2);position:sticky;top:0;z-index:50;gap:12px}
.topbar-left{display:flex;align-items:center;gap:12px}
.topbar-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.topbar-right{display:flex;align-items:center;gap:8px}
.content{padding:22px 28px;flex:1}

/* ── Account Tabs ────────────────────── */
.account-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.account-tab{padding:7px 16px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--bg2);color:var(--muted);transition:all .2s;letter-spacing:.3px}
.account-tab:hover{color:var(--text);border-color:#333}
.account-tab.active[data-color="#00ff88"]{background:rgba(0,255,136,.12);border-color:rgba(0,255,136,.4);color:#00ff88;box-shadow:0 0 20px rgba(0,255,136,.12)}
.account-tab.active[data-color="#00d4ff"]{background:rgba(0,212,255,.12);border-color:rgba(0,212,255,.4);color:#00d4ff;box-shadow:0 0 20px rgba(0,212,255,.12)}
.account-tab.active[data-color="#ff6b35"]{background:rgba(255,107,53,.12);border-color:rgba(255,107,53,.4);color:#ff6b35;box-shadow:0 0 20px rgba(255,107,53,.12)}
.account-tab.active[data-color="#a855f7"]{background:rgba(168,85,247,.12);border-color:rgba(168,85,247,.4);color:#a855f7;box-shadow:0 0 20px rgba(168,85,247,.12)}

/* ── KPI Cards ───────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.kpi-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:16px 18px;position:relative;overflow:hidden;transition:border-color .2s,transform .15s}
.kpi-card:hover{border-color:#2a2a3e;transform:translateY(-1px)}
.kpi-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--accent,linear-gradient(90deg,var(--green),var(--cyan)))}
.kpi-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin-bottom:8px}
.kpi-value{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.5px}
.kpi-sub{font-size:11px;color:var(--muted);margin-top:3px}

/* ── Stats bar ───────────────────────── */
.stats-bar{display:flex;gap:24px;align-items:center;padding:12px 20px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;margin-bottom:18px;flex-wrap:wrap}
.stats-bar-item{font-size:12px;color:var(--muted)}
.stats-bar-item b{color:var(--text)}
.stats-bar-item b.green{color:var(--green)}
.stats-bar-item b.cyan{color:var(--cyan)}

/* ── Tabs nav ─────────────────────────── */
.tab-nav{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.tab-nav::-webkit-scrollbar{display:none}
.tab-btn{padding:10px 16px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;display:flex;align-items:center;gap:6px}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--cyan);border-bottom-color:var(--cyan)}
.tab-panel{display:none}.tab-panel.active{display:block}

/* ── Acquisition Funnel ──────────────── */
.funnel-section{margin-bottom:24px}
.funnel-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-bottom:14px}
.funnel-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.gauge-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:18px 12px;text-align:center;transition:border-color .2s}
.gauge-card:hover{border-color:#2a2a3e}
.gauge-wrap{position:relative;width:96px;height:96px;margin:0 auto 10px}
.gauge-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);text-align:center}
.gauge-val{font-size:14px;font-weight:800;color:var(--text);line-height:1}
.gauge-pct{font-size:9px;color:var(--muted);margin-top:2px}
.gauge-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:3px}
.gauge-sub{font-size:10px;color:#444;font-style:italic}

/* ── Metrics strip ───────────────────── */
.metrics-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(85px,1fr));gap:8px;margin-bottom:20px}
.metric-chip{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px 10px;text-align:center;transition:border-color .2s}
.metric-chip:hover{border-color:#2a2a3e}
.metric-chip .val{font-size:13px;font-weight:800;color:var(--text)}
.metric-chip .lbl{font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-top:3px}

/* ── Charts ──────────────────────────── */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.chart-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px}
.chart-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:8px}

/* ── Campaign cards (Top / Fuga) ─────── */
.camp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.camp-section{background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.camp-section-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px}
.camp-item{padding:14px 18px;border-bottom:1px solid var(--border);transition:background .15s}
.camp-item:hover{background:var(--bg3)}
.camp-item:last-child{border-bottom:none}
.camp-item-name{font-size:13px;font-weight:700;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camp-meta{display:flex;gap:16px;margin-bottom:8px}
.camp-meta-item{font-size:11px;color:var(--muted)}.camp-meta-item b{color:var(--text)}
.camp-meta-item b.green{color:var(--green)}.camp-meta-item b.red{color:var(--red)}.camp-meta-item b.orange{color:var(--orange)}
.camp-actions{display:flex;gap:6px;margin-top:6px}

/* ── Creative cards ──────────────────── */
.creative-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.creative-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:16px}
.creative-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.creative-body{display:flex;gap:12px;align-items:flex-start}
.creative-thumb{width:60px;height:60px;border-radius:8px;background:var(--bg3);border:1px solid var(--border);object-fit:cover;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px}
.creative-info{flex:1;min-width:0}
.creative-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.creative-camp{font-size:11px;color:var(--muted);margin-bottom:8px}
.score-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700}
.score-good{background:rgba(0,255,136,.15);color:var(--green)}
.score-bad{background:rgba(255,68,85,.15);color:var(--red)}
.creative-stats{display:flex;gap:12px;margin-top:8px}
.creative-stat{font-size:11px;color:var(--muted)}.creative-stat b{color:var(--text)}

/* ── Smart Alerts ────────────────────── */
.alerts-section{background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:20px}
.alerts-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.alerts-head h3{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;display:flex;align-items:center;gap:8px}
.alerts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0}
.alert-chip{padding:14px 18px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.alert-chip:last-child{border-right:none}
.alert-chip-type{font-size:10px;font-weight:700;display:flex;align-items:center;gap:5px;margin-bottom:6px}
.alert-chip-type.warn{color:var(--orange)}.alert-chip-type.danger{color:var(--red)}.alert-chip-type.info{color:var(--cyan)}
.alert-chip-text{font-size:11px;color:var(--muted);margin-bottom:4px}
.alert-chip-val{font-size:14px;font-weight:800}
.alert-chip-val.orange{color:var(--orange)}.alert-chip-val.red{color:var(--red)}

/* ── Table ───────────────────────────── */
.table-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:20px}
.table-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.table-head h3{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}
table{width:100%;border-collapse:collapse}
thead th{padding:10px 14px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);border-bottom:1px solid var(--border);font-weight:600}
tbody tr{border-bottom:1px solid rgba(30,30,46,.6);transition:background .12s}
tbody tr:hover{background:var(--bg3)}
tbody td{padding:11px 14px;font-size:12px}
tbody tr:last-child{border-bottom:none}
.status-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700}
.status-badge.active{background:rgba(0,255,136,.1);color:var(--green)}
.status-badge.paused{background:rgba(255,68,85,.1);color:var(--red)}
.status-badge.other{background:rgba(100,100,120,.1);color:var(--muted)}

/* ── Buttons ─────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;border:none;transition:all .15s;letter-spacing:.3px}
.btn-green{background:var(--green);color:#000}.btn-green:hover{box-shadow:0 0 20px rgba(0,255,136,.35);transform:translateY(-1px)}
.btn-cyan{background:var(--cyan);color:#000}.btn-cyan:hover{box-shadow:0 0 20px rgba(0,212,255,.35)}
.btn-red{background:rgba(255,68,85,.12);color:var(--red);border:1px solid rgba(255,68,85,.3)}.btn-red:hover{background:rgba(255,68,85,.2)}
.btn-orange{background:rgba(255,107,53,.12);color:var(--orange);border:1px solid rgba(255,107,53,.3)}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}.btn-ghost:hover{color:var(--text);border-color:#333}
.btn-sm{padding:5px 10px;font-size:11px}
.btn-xs{padding:3px 8px;font-size:10px;border-radius:5px}

/* ── Live/Sync ───────────────────────── */
.live-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;font-size:11px;font-weight:700;background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.25);color:var(--green);cursor:default}
.sync-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;font-size:11px;font-weight:600;background:var(--bg3);border:1px solid var(--border);color:var(--muted);cursor:pointer;transition:all .2s}
.sync-badge:hover{color:var(--text);border-color:#444}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,255,136,.5)}60%{box-shadow:0 0 0 5px rgba(0,255,136,0)}}

/* ── Form ────────────────────────────── */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:10px;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.8px;font-weight:600}
.form-control{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:8px 11px;border-radius:8px;font-size:12px;transition:border-color .15s}
.form-control:focus{outline:none;border-color:rgba(0,212,255,.4)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* ── Period select ───────────────────── */
.period-select{background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:6px 11px;border-radius:8px;font-size:12px;cursor:pointer}
.period-select:focus{outline:none}

/* ── Toast ───────────────────────────── */
#toast{position:fixed;bottom:24px;right:24px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:12px 18px;font-size:12px;z-index:9999;display:none;gap:8px;align-items:center;max-width:320px;box-shadow:0 8px 32px rgba(0,0,0,.5)}
#toast.show{display:flex}
#toast.success{border-color:rgba(0,255,136,.4);color:var(--green)}
#toast.error{border-color:rgba(255,68,85,.4);color:var(--red)}
#toast.warn{border-color:rgba(255,107,53,.4);color:var(--orange)}

/* ── Spinner ─────────────────────────── */
.spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--cyan);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Modal ───────────────────────────── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:200;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:24px;width:400px;max-width:95vw}
.modal h3{margin-bottom:18px;font-size:15px}
.modal-actions{display:flex;gap:8px;margin-top:18px}
.modal-actions .btn{flex:1}

/* ── Utils ───────────────────────────── */
.text-green{color:var(--green)}.text-cyan{color:var(--cyan)}.text-red{color:var(--red)}.text-orange{color:var(--orange)}.text-yellow{color:var(--yellow)}.text-muted{color:var(--muted)}
.fw-bold{font-weight:700}.fw-800{font-weight:800}
.hidden{display:none!important}
.flex{display:flex}.items-center{align-items:center}.gap-8{gap:8px}.gap-12{gap:12px}
.badge-count{background:var(--red);color:#fff;border-radius:20px;padding:1px 7px;font-size:10px;font-weight:700}

@media(max-width:900px){
  .sidebar{width:56px}
  .logo-title,.logo-sub,.sidebar-section,.sidebar a span,.sidebar-bottom span:not(.live-dot){display:none}
  .main{margin-left:56px}
  .funnel-grid{grid-template-columns:repeat(3,1fr)}
  .charts-grid,.camp-grid,.creative-grid{grid-template-columns:1fr}
  .form-grid,.form-grid-3{grid-template-columns:1fr}
}