*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0a;--card:#161616;--border:#222;
  --lime:#d4f53c;--lime-faint:rgba(212,245,60,0.08);
  --white:#fff;--grey:#a3a3a3;--dim:#444;--red:#ff4d4d;--teal:#2dd4bf
}
body{background:var(--bg);color:var(--white);font-family:'Inter',system-ui,sans-serif;min-height:100vh}
header{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(10,10,10,.95);backdrop-filter:blur(12px);z-index:50}
.hd-left{display:flex;align-items:center;gap:14px}
.hd-divider{width:1px;height:20px;background:var(--border)}
.hd-label{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--grey);text-transform:uppercase}
.hd-right{display:flex;align-items:center;gap:12px}
.date-badge{font-size:12px;color:var(--grey);background:var(--card);border:1px solid var(--border);border-radius:8px;padding:6px 12px}
.btn-sm{font-size:12px;font-weight:600;background:var(--lime);color:#000;border:none;border-radius:8px;padding:7px 14px;cursor:pointer}
.live-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;animation:pulse 2s infinite;display:inline-block;margin-right:5px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.main{padding:24px 28px;max-width:1400px;margin:0 auto}
.section-title{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--grey);text-transform:uppercase;margin-bottom:14px}
.campaign-bar{display:flex;align-items:center;gap:8px;margin-bottom:28px;overflow-x:auto;padding-bottom:4px}
.campaign-tab{font-size:12px;font-weight:600;padding:7px 16px;border-radius:999px;border:1px solid var(--border);color:var(--grey);cursor:pointer;white-space:nowrap;transition:.15s;background:none}
.campaign-tab:hover{border-color:var(--lime);color:var(--white)}
.campaign-tab.active{background:var(--lime);color:#000;border-color:var(--lime)}
.utm-badge{font-size:10px;font-weight:500;padding:4px 10px;border-radius:999px;background:var(--card);border:1px solid var(--border);color:var(--dim);white-space:nowrap}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:28px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px}
.stat-card.hl{border-color:var(--lime);background:var(--lime-faint)}
.stat-label{font-size:11px;color:var(--grey);font-weight:500;margin-bottom:6px}
.stat-value{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1}
.stat-value.lime{color:var(--lime)}
.stat-delta{font-size:11px;margin-top:5px;color:var(--grey)}
.up{color:#22c55e}.dn{color:var(--red)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:28px}
@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px}
.panel-title{font-size:12px;font-weight:700;color:var(--white);margin-bottom:16px;display:flex;align-items:center;justify-content:space-between}
.panel-sub{font-size:11px;color:var(--grey);font-weight:400}
.funnel{display:flex;flex-direction:column;gap:5px}
.funnel-row{display:flex;align-items:center;gap:8px}
.funnel-label{font-size:10px;color:var(--grey);width:175px;flex-shrink:0;line-height:1.3}
.funnel-bar-wrap{flex:1;background:#1a1a1a;border-radius:4px;height:22px;overflow:hidden}
.funnel-bar{height:100%;border-radius:4px;display:flex;align-items:center;padding-left:8px;font-size:10px;font-weight:700;color:#000;white-space:nowrap}
.funnel-pct{font-size:10px;color:var(--grey);width:32px;text-align:right;flex-shrink:0}
.funnel-drop{font-size:10px;width:38px;text-align:right;flex-shrink:0}
/* daily bar chart now rendered as SVG inline */
.legend-key{font-size:11px;color:var(--grey);display:flex;align-items:center;gap:6px}
.legend-key::before{content:'';width:10px;height:10px;border-radius:2px;background:var(--c);display:inline-block}
.donut-wrap{display:flex;align-items:center;gap:16px}
.donut-legend{display:flex;flex-direction:column;gap:6px;flex:1}
.legend-row{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--grey)}
.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.legend-val{margin-left:auto;font-weight:700;color:var(--white);font-size:12px}
.hbar-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.hbar-label{font-size:11px;color:var(--grey);flex:0 0 185px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-outer{flex:1;height:6px;background:#1a1a1a;border-radius:3px;overflow:hidden}
.hbar-inner{height:100%;border-radius:3px;background:var(--lime)}
.hbar-pct{font-size:11px;font-weight:700;color:var(--lime);width:28px;text-align:right}
.prog-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.prog-row:last-child{border-bottom:none}
.prog-rank{font-size:11px;font-weight:700;color:var(--dim);width:16px;flex-shrink:0}
.prog-name{font-size:13px;font-weight:600;flex:1}
.prog-coach{font-size:11px;color:var(--grey)}
.prog-bar-outer{width:70px;height:5px;background:#1a1a1a;border-radius:3px;overflow:hidden}
.prog-bar-inner{height:100%;border-radius:3px;background:var(--lime)}
.prog-pct{font-size:11px;font-weight:700;color:var(--lime);width:28px;text-align:right}
.attr-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.attr-row:last-child{border-bottom:none}
.attr-source{font-size:12px;font-weight:600;flex:1}
.attr-bar-outer{width:80px;height:5px;background:#1a1a1a;border-radius:3px;overflow:hidden}
.attr-bar-inner{height:100%;border-radius:3px;background:var(--teal)}
.attr-n{font-size:11px;color:var(--grey);width:44px;text-align:right}
.attr-rate{font-size:11px;font-weight:700;width:34px;text-align:right}
.seg-table{width:100%;font-size:12px;border-collapse:collapse}
.seg-table th{color:var(--grey);font-weight:600;text-align:left;padding:0 8px 10px;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.seg-table td{padding:8px;border-top:1px solid var(--border);color:var(--white)}
.seg-table td.dim{color:var(--grey);font-size:11px}
.rate-cell{font-size:11px;font-weight:700;padding:2px 6px;border-radius:6px}
.insight-panel{border-color:var(--lime);background:var(--lime-faint)}
.insight-title{font-size:13px;font-weight:800;color:var(--lime);margin-bottom:6px}
.insight-body{font-size:12px;color:var(--grey);line-height:1.7}
#imp-btn{position:fixed;bottom:24px;right:24px;background:var(--card);border:1px solid var(--lime);border-radius:999px;padding:10px 16px;font-size:12px;font-weight:700;color:var(--lime);cursor:pointer;z-index:200;box-shadow:0 4px 24px rgba(0,0,0,.6)}
#imp-panel{position:fixed;bottom:72px;right:24px;width:300px;background:#181818;border:1px solid var(--lime);border-radius:16px;padding:20px;z-index:200;display:none}
#imp-panel.open{display:block;animation:slideup .2s ease}
@keyframes slideup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#imp-panel h4{font-size:13px;font-weight:800;color:var(--lime);margin-bottom:12px}
#imp-panel ol{list-style:none;display:flex;flex-direction:column;gap:9px;counter-reset:ic}
#imp-panel li{font-size:12px;color:var(--grey);padding-left:22px;position:relative;line-height:1.5;counter-increment:ic}
#imp-panel li::before{content:counter(ic);position:absolute;left:0;top:0;font-size:11px;font-weight:800;color:var(--lime)}
#imp-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--grey);font-size:16px;cursor:pointer}

/* ── TABS ───────────────────────────────────────────────────────── */
.tab-nav{display:flex;gap:4px;margin-bottom:20px;border-bottom:1px solid var(--border);padding-bottom:0}
.tab-btn{padding:8px 18px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--grey);font-size:13px;font-weight:600;cursor:pointer;margin-bottom:-1px;transition:color .15s,border-color .15s}
.tab-btn.active{color:#fff;border-bottom-color:var(--lime)}
.tab-btn:hover:not(.active){color:#ccc}

/* ── DATE PICKER ────────────────────────────────────────────────── */
.date-badge{position:relative}
.date-opt{padding:7px 12px;font-size:12px;color:var(--grey);border-radius:6px;cursor:pointer;transition:background .1s,color .1s}
.date-opt:hover{background:#1a1a1a;color:#fff}
.date-opt.active-sel{color:var(--lime);font-weight:600}

/* ── DRAG & DROP ────────────────────────────────────────────────── */
.drag-section{transition:opacity .15s}
.drag-section.drag-over{opacity:.5;outline:2px dashed var(--lime);outline-offset:4px;border-radius:12px}
.drag-handle{cursor:grab;user-select:none}
.drag-handle::before{content:'⠿ ';font-size:11px;color:#333;margin-right:2px}
.drag-section.dragging{opacity:.3}

/* ── FLAT PANEL GRID (drag-reorderable) ─────────────────────────── */
#panel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
#panel-grid .panel { margin-bottom: 0 }
.panel-wide { grid-column: 1 / -1 }
@media (max-width: 700px) {
  #panel-grid { grid-template-columns: 1fr }
  .panel-wide { grid-column: 1 }
}

/* drag states on individual panels */
.draggable-panel { transition: opacity .15s, box-shadow .15s }
.draggable-panel.drag-over {
  outline: 2px dashed var(--lime);
  outline-offset: 3px;
  border-radius: 12px;
  background: rgba(212,245,60,.04);
}
.draggable-panel.dragging { opacity: .3; box-shadow: none }