:root {
  --bg:    #080a0f;
  --bg1:   #0d1117;
  --bg2:   #111520;
  --bg3:   #171c2e;
  --bg4:   #1e2538;
  --b0:    #232b42;
  --b1:    #2c3554;
  --b2:    #3a4468;
  --t0:    #eef0f8;
  --t1:    #8892b0;
  --t2:    #4a5578;
  --t3:    #2e3a55;
  --acc:   #6366f1;
  --acc2:  rgba(99,102,241,.15);
  --acc3:  rgba(99,102,241,.07);
  --grd:   linear-gradient(135deg,#6366f1,#8b5cf6);
  --up:    #22d3a4;
  --upd:   rgba(34,211,164,.12);
  --dn:    #f43f5e;
  --dnd:   rgba(244,63,94,.12);
  --yn:    #f59e0b;
  --ynd:   rgba(245,158,11,.12);
  --sw:    230px;
  --th:    54px;
  --r:     10px;
  --rs:    6px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; }
body { font-family:'Geist',sans-serif; background:var(--bg); color:var(--t0); font-size:13px; display:flex; flex-direction:column; }
.topbar { height:var(--th); background:var(--bg1); border-bottom:1px solid var(--b0); display:flex; align-items:center; padding:0 16px 0 0; flex-shrink:0; z-index:200; }
.topbar-logo { width:var(--sw); flex-shrink:0; display:flex; align-items:center; padding:0 18px; gap:10px; border-right:1px solid var(--b0); height:100%; }
.logo-mark { width:28px; height:28px; background:var(--grd); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; box-shadow:0 0 20px rgba(99,102,241,.4); flex-shrink:0; }
.logo-name { font-size:14px; font-weight:700; letter-spacing:-.4px; }
.logo-name em { color:var(--t2); font-style:normal; font-size:10px; font-weight:400; margin-left:2px; }
.topbar-filters { flex:1; display:flex; align-items:center; gap:5px; padding:0 14px; overflow-x:auto; }
.topbar-filters::-webkit-scrollbar { display:none; }
.f-group { display:flex; align-items:center; background:var(--bg3); border:1px solid var(--b0); border-radius:var(--rs); overflow:hidden; flex-shrink:0; }
.f-label { font-size:10.5px; color:var(--t2); padding:0 9px; font-weight:600; border-right:1px solid var(--b0); height:28px; display:flex; align-items:center; white-space:nowrap; text-transform:uppercase; letter-spacing:.4px; }
.f-select { background:transparent; border:none; outline:none; color:var(--t1); font-size:12px; font-family:inherit; padding:0 26px 0 9px; height:28px; cursor:pointer; appearance:none; min-width:80px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234a5578'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 7px center; }
.f-select option { background:#171c2e; }
.f-div { width:1px; height:18px; background:var(--b0); flex-shrink:0; }
.topbar-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.btn { display:inline-flex; align-items:center; gap:5px; padding:0 13px; height:30px; border-radius:var(--rs); font-size:12px; font-weight:500; cursor:pointer; border:none; font-family:inherit; transition:all .15s; white-space:nowrap; }
.btn-acc { background:var(--grd); color:#fff; box-shadow:0 0 14px rgba(99,102,241,.3); }
.btn-acc:hover { opacity:.88; }
.btn-ghost { background:var(--bg3); border:1px solid var(--b0); color:var(--t1); }
.btn-ghost:hover { border-color:var(--b2); color:var(--t0); }
.btn-sm { height:26px; font-size:11.5px; padding:0 10px; }
.btn-danger { background:var(--dnd); border:1px solid var(--dn); color:var(--dn); }
.upd-badge { font-size:11px; color:var(--t2); font-family:'Geist Mono',monospace; white-space:nowrap; }
.upd-dot { display:inline-block; width:6px; height:6px; background:var(--up); border-radius:50%; margin-right:5px; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.body-wrap { display:flex; flex:1; overflow:hidden; }
.sidebar { width:var(--sw); flex-shrink:0; background:var(--bg1); border-right:1px solid var(--b0); display:flex; flex-direction:column; overflow-y:auto; }
.sidebar::-webkit-scrollbar { width:3px; }
.sidebar::-webkit-scrollbar-thumb { background:var(--b1); }
.main { flex:1; overflow-y:auto; }
.main::-webkit-scrollbar { width:4px; }
.main::-webkit-scrollbar-thumb { background:var(--b1); border-radius:2px; }
.nav-section { padding:16px 12px 5px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.9px; color:var(--t3); }
.nav-item { display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:var(--rs); cursor:pointer; color:var(--t1); font-size:13px; margin:1px 7px; transition:all .12s; position:relative; }
.nav-item:hover { background:var(--bg3); color:var(--t0); }
.nav-item.active { background:var(--acc2); color:var(--acc); font-weight:500; }
.nav-item.active::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px; background:var(--grd); border-radius:0 3px 3px 0; }
.nav-item i { width:15px; font-size:12px; text-align:center; }
.nav-badge { margin-left:auto; background:var(--bg4); color:var(--t1); font-size:10px; font-weight:600; padding:1px 7px; border-radius:20px; }
.sidebar-bottom { margin-top:auto; padding:10px 7px; border-top:1px solid var(--b0); }
.user-row { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--rs); cursor:pointer; transition:background .12s; }
.user-row:hover { background:var(--bg3); }
.u-av { width:28px; height:28px; border-radius:8px; background:var(--grd); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; }
.u-name { font-size:12.5px; font-weight:500; }
.u-role { font-size:11px; color:var(--t2); }
.page { display:none; padding:22px; animation:fadeIn .2s ease; }
.page.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
.kpi-grid { display:grid; gap:12px; margin-bottom:18px; }
.kpi-4 { grid-template-columns:repeat(4,1fr); }
.kpi-5 { grid-template-columns:repeat(5,1fr); }
.kpi { background:var(--bg2); border:1px solid var(--b0); border-radius:var(--r); padding:18px 20px; position:relative; overflow:hidden; transition:all .2s; }
.kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--grd); opacity:0; transition:opacity .2s; }
.kpi:hover { border-color:var(--b2); }
.kpi:hover::before { opacity:1; }
.kpi-label { font-size:11.5px; color:var(--t1); font-weight:500; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.kpi-val { font-size:22px; font-weight:700; letter-spacing:-.8px; font-family:'Geist Mono',monospace; line-height:1; margin-bottom:8px; }
.kpi-val.sm { font-size:18px; }
.kpi-foot { display:flex; align-items:center; gap:6px; }
.kpi-sub { font-size:11px; color:var(--t2); }
.kpi-hero { background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(139,92,246,.1)); border-color:rgba(99,102,241,.3); }
.kpi-hero .kpi-val { background:var(--grd); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.card { background:var(--bg2); border:1px solid var(--b0); border-radius:var(--r); overflow:hidden; margin-bottom:14px; }
.card-h { padding:14px 18px; border-bottom:1px solid var(--b0); display:flex; align-items:center; justify-content:space-between; }
.card-title { font-size:13px; font-weight:600; }
.card-actions { display:flex; align-items:center; gap:6px; }
.card-b { padding:18px; }
.card-b.tight { padding:14px 17px; }
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.g3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.g21 { display:grid; grid-template-columns:2fr 1fr; gap:14px; }
.ch { position:relative; }
.ch-160{height:160px} .ch-180{height:180px} .ch-200{height:200px}
.ch-220{height:220px} .ch-240{height:240px} .ch-260{height:260px}
.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--t2); padding:10px 14px; border-bottom:1px solid var(--b0); white-space:nowrap; }
.tbl td { padding:10px 14px; font-size:12.5px; color:var(--t1); border-bottom:1px solid var(--b0); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:var(--bg3); }
.tbl td.bold { color:var(--t0); font-weight:600; }
.tbl td.mono { font-family:'Geist Mono',monospace; font-size:12px; }
.tag { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; }
.tag-up { background:var(--upd); color:var(--up); }
.tag-dn { background:var(--dnd); color:var(--dn); }
.tag-nt { background:var(--bg4); color:var(--t2); }
.tag-acc { background:var(--acc2); color:var(--acc); }
.tag-yn { background:var(--ynd); color:var(--yn); }
.rank-n { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:5px; font-size:11px; font-weight:700; }
.rank-1{background:rgba(245,158,11,.15);color:var(--yn)} .rank-2{background:rgba(180,180,200,.1);color:#aaa} .rank-3{background:rgba(180,100,50,.1);color:#c87040} .rank-o{background:var(--bg4);color:var(--t2)}
.src-list { display:flex; flex-direction:column; gap:10px; }
.src-row { display:flex; align-items:center; gap:10px; }
.src-icon { width:28px; height:28px; border-radius:7px; background:var(--bg4); display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.src-info { flex:1; min-width:0; }
.src-name { font-size:12.5px; font-weight:500; margin-bottom:4px; }
.src-bar { height:3px; background:var(--bg4); border-radius:2px; overflow:hidden; }
.src-fill { height:100%; border-radius:2px; background:var(--grd); }
.src-val { font-size:12.5px; font-weight:700; font-family:'Geist Mono',monospace; white-space:nowrap; }
.fg { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.fg label { font-size:11px; font-weight:700; color:var(--t2); text-transform:uppercase; letter-spacing:.4px; }
.fg input, .fg select, .fg textarea { background:var(--bg3); border:1px solid var(--b0); border-radius:var(--rs); padding:8px 12px; font-size:12.5px; color:var(--t0); font-family:inherit; outline:none; transition:all .15s; }
.fg input:focus, .fg select:focus { border-color:var(--acc); box-shadow:0 0 0 3px var(--acc3); }
.fg input::placeholder { color:var(--t3); }
.fg select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234a5578'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
.fg select option { background:#171c2e; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(4px); z-index:1000; display:none; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal { background:var(--bg2); border:1px solid var(--b0); border-radius:14px; width:100%; max-width:520px; max-height:90vh; overflow-y:auto; box-shadow:0 25px 60px rgba(0,0,0,.5); }
.modal::-webkit-scrollbar { width:3px; }
.modal::-webkit-scrollbar-thumb { background:var(--b1); }
.modal-h { padding:18px 22px; border-bottom:1px solid var(--b0); display:flex; align-items:center; justify-content:space-between; }
.modal-title { font-size:14px; font-weight:700; }
.modal-close { background:none; border:none; color:var(--t2); cursor:pointer; font-size:16px; transition:color .1s; }
.modal-close:hover { color:var(--t0); }
.modal-b { padding:22px; }
.toast { position:fixed; bottom:24px; right:24px; background:var(--bg3); border:1px solid var(--b0); border-radius:10px; padding:12px 18px; font-size:12.5px; display:none; z-index:9999; align-items:center; gap:8px; box-shadow:0 8px 30px rgba(0,0,0,.4); }
.toast.show { display:flex; }
.toast.ok { border-color:rgba(34,211,164,.3); color:var(--up); }
.toast.err { border-color:rgba(244,63,94,.3); color:var(--dn); }
.toast.nt { border-color:rgba(245,158,11,.3); color:var(--yn); }
.pb { height:5px; background:var(--bg4); border-radius:3px; overflow:hidden; margin-top:6px; }
.pb-fill { height:100%; border-radius:3px; background:var(--grd); transition:width .4s ease; }
.tipo-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.tipo-organico  { background:var(--upd); color:var(--up); }
.tipo-pago      { background:var(--acc2); color:var(--acc); }
.tipo-comercial { background:var(--ynd); color:var(--yn); }
.tipo-afiliado  { background:rgba(168,85,247,.12); color:#a855f7; }
.tipo-orderbump { background:rgba(251,146,60,.12); color:#fb923c; }
.upload-zone { border:2px dashed var(--b1); border-radius:var(--r); padding:32px; text-align:center; cursor:pointer; transition:all .2s; }
.upload-zone:hover, .upload-zone.drag { border-color:var(--acc); background:var(--acc3); }
.loading-sm { padding:24px; text-align:center; color:var(--t2); font-size:12.5px; }
code { font-family:'Geist Mono',monospace; font-size:11px; background:var(--bg4); padding:2px 7px; border-radius:4px; color:var(--acc); }
.divider { height:1px; background:var(--b0); margin:14px 0; }
.wh-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.wh-dot.on { background:var(--up); box-shadow:0 0 7px var(--up); }
.wh-dot.warn { background:var(--yn); }
.wh-dot.off { background:var(--dn); }
.cat-block { background:var(--bg2); border:1px solid var(--b0); border-radius:var(--r); margin-bottom:10px; overflow:hidden; }
.cat-block-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; cursor:pointer; transition:background .12s; }
.cat-block-header:hover { background:var(--bg3); }
.cat-block-title { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; }
.cat-block-body { border-top:1px solid var(--b0); }
.cat-block-body.hidden { display:none; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--b1); border-radius:2px; }