
/* ReconElevens app — dark / neon-green (matches landing) */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#050505;--bg-2:#161616;--card:#0d0d0d;--ink:#fff;--ink-2:#e4e4e4;--muted:#9a9a9a;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.15);
--brand:#8cff2e;--brand-d:#b6ff6e;--brand-2:rgba(140,255,46,.12);--glow:rgba(140,255,46,.22);
--ok:#8cff2e;--ok-bg:rgba(140,255,46,.1);--bad:#ff6b57;--bad-bg:rgba(255,107,87,.1);--warn:#ffb347;--warn-bg:rgba(255,179,71,.1);--info:#6aa9ff;--info-bg:rgba(106,169,255,.1);
--sans:Manrope,system-ui,sans-serif;--mono:Manrope,system-ui,sans-serif;--serif:Manrope,system-ui,sans-serif;
--shadow:none;--shadow-lg:0 30px 80px rgba(0,0,0,.6)}
html,body{background:#050505!important;color:#fff;font-family:Manrope,system-ui,sans-serif}
body{background:radial-gradient(900px 420px at 55% -10%,rgba(140,255,46,.10),transparent 70%),#050505!important}
::selection{background:#8cff2e;color:#071300}
h1,h2,h3{font-weight:600;letter-spacing:-.03em}
em.s,.serif{font-family:Manrope,sans-serif!important;font-style:normal!important;font-weight:600}
.mono,.eyebrow,th,.kpi .l,.side h4,.gap-box .l,.src .tx b small{font-family:Manrope,sans-serif!important;letter-spacing:.04em;font-weight:700}
.eyebrow{color:#8cff2e;font-size:12.5px;text-transform:none;letter-spacing:.01em}.eyebrow::before{border-radius:50%;box-shadow:0 0 10px #8cff2e}
/* rail + top */
.rail{background:#080808;border-right:1px solid var(--line)}
.rail a,.rail button{color:#8b8b8b}.rail a:hover,.rail button:hover{background:rgba(255,255,255,.07);color:#fff}
.rail .on{background:rgba(140,255,46,.14);color:#8cff2e}
.rail [data-tip]:hover::after{background:#1b1b1b;border:1px solid var(--line-2)}
.top{background:rgba(5,5,5,.8);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.crumb .sep{color:#4a4a4a}.crumb b{color:#fff}
.pill{background:rgba(140,255,46,.1);color:#8cff2e;border:1px solid rgba(140,255,46,.3)}
/* buttons */
.btn{background:#161616;color:#fff;border:1px solid var(--line-2);border-radius:999px;font-weight:600}
.btn:hover{border-color:rgba(255,255,255,.3);background:#1d1d1d}
.btn.brand,.btn.primary{background:#8cff2e!important;color:#071300!important;border-color:#8cff2e!important;box-shadow:0 8px 30px -8px rgba(140,255,46,.5)}
.btn.brand:hover,.btn.primary:hover{box-shadow:0 10px 40px -4px rgba(140,255,46,.75)}
.btn:disabled,.btn[disabled]{background:#1a2410!important;color:#5d7a3a!important;border-color:#26361a!important;box-shadow:none!important;opacity:1}
/* setup */
.setup h1{font-size:clamp(30px,4vw,44px);font-weight:600}.setup h1 em{color:#8cff2e}
.setup .lead{color:#a8a8a8;font-size:16px}
.panel{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)),#0d0d0d;border:1px solid var(--line-2);border-radius:22px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 80px -50px #8cff2e}
.panel-h,.panel-f{background:rgba(255,255,255,.02);border-color:var(--line)}
.panel-h h2{font-size:15px}
.src{border-color:var(--line)}.src.over{background:rgba(140,255,46,.07);box-shadow:inset 0 0 0 2px #8cff2e}
.src .ic{background:#161616;border:1px solid var(--line-2);color:#e8e8e8;border-radius:12px;font:700 12px Manrope}
.src .tx b small{background:rgba(255,255,255,.05);border-color:var(--line-2);color:#bdbdbd;border-radius:99px;padding:2px 9px;font-size:10.5px}
.src.done .ic{background:#8cff2e;border-color:#8cff2e;color:#071300}.src.done .tx span{color:#8cff2e}
.src.err .ic{background:var(--bad-bg);border-color:rgba(255,107,87,.5);color:var(--bad)}
.src .x{background:#161616;border-color:var(--line-2);color:#bbb}
.opt-row{border-color:var(--line)}
.stepper{background:#111;border-color:var(--line-2);border-radius:99px}.stepper button{color:#ddd}.stepper button:hover{background:#1c1c1c}.stepper input{color:#fff}
.how div{border:1px dashed rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.015);color:#9a9a9a}.how b{color:#fff}
/* results */
.side{background:#080808;border-color:var(--line)}
.side h4{color:#7a7a7a}.nav-i{color:#d2d2d2;border-radius:10px}.nav-i:hover{background:#151515}
.nav-i.on{background:rgba(140,255,46,.12);color:#8cff2e}
.nav-i .n{background:#1c1c1c;color:#ddd}.nav-i .n.bad{background:var(--bad);color:#1a0500}.nav-i .n.warn{background:#ffb347;color:#1a0f00}.nav-i .n.ok{background:#8cff2e;color:#071300}
.kpi{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),#0d0d0d;border:1px solid var(--line);border-radius:16px;box-shadow:none!important;position:relative}
.kpi::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:#333}
.kpi.k-ok::before{background:#8cff2e;box-shadow:0 0 14px #8cff2e}.kpi.k-bad::before{background:var(--bad)}.kpi.k-warn::before{background:var(--warn)}
.kpi .l{color:#8b8b8b;font-size:11px}.kpi .v{font-size:28px;font-weight:600}.kpi.k-bad .v{color:var(--bad)}.kpi.k-ok .v{color:#8cff2e}.kpi .s{color:#808080}
.tblw{background:#0d0d0d;border-color:var(--line);border-radius:18px 18px 0 0}
.tb{border-color:var(--line)}
.srch{background:#111;border-color:var(--line-2);border-radius:99px}.srch:focus-within{border-color:#8cff2e;box-shadow:0 0 0 3px rgba(140,255,46,.15)}.srch input{color:#fff}
.sel{background:#111;border-color:var(--line-2);color:#fff;border-radius:99px}
th{background:#0a0a0a;color:#8b8b8b;border-color:var(--line)}th.sorted{color:#8cff2e}
td{border-color:rgba(255,255,255,.05);color:#e6e6e6}
tbody tr:hover td{background:#131313}tbody tr.sel td{background:rgba(140,255,46,.08)}
td.o b{color:#fff}td.note{color:#9a9a9a}td.neg{color:var(--bad)}
.foot-r{background:#0a0a0a;border-color:var(--line);color:#8b8b8b}.more{color:#8cff2e}
.tag{border:1px solid;font-weight:700;border-radius:99px}
.tag.bad{color:var(--bad);border-color:rgba(255,107,87,.4);background:var(--bad-bg)}.tag.warn{color:var(--warn);border-color:rgba(255,179,71,.4);background:var(--warn-bg)}
.tag.ok{color:#8cff2e;border-color:rgba(140,255,46,.4);background:var(--ok-bg)}.tag.info{color:var(--info);border-color:rgba(106,169,255,.4);background:var(--info-bg)}
/* drawer */
.scrim{background:rgba(0,0,0,.6)}
.drawer{background:#0b0b0b;border-left:1px solid var(--line-2);box-shadow:-30px 0 80px -20px rgba(0,0,0,.8)}
.dr-h{border-color:var(--line)}.dr-h button{background:#161616;border-color:var(--line-2);color:#bbb}
.gap-box{background:#111;border:1px solid var(--line);border-radius:16px}
.act-box{border-color:var(--line);background:rgba(255,255,255,.02);border-radius:16px}.act-box p{color:#9a9a9a}
dt{color:#8b8b8b}
.toast{background:#8cff2e;color:#071300}
.empty{color:#8b8b8b}
@media(max-width:860px){
 .nav-i{background:#111;border-color:var(--line-2)}.nav-i.on{background:#8cff2e;color:#071300;border-color:#8cff2e}
 .panel-f{background:rgba(8,8,8,.94);box-shadow:0 -10px 40px -10px #000}
 .top{background:rgba(5,5,5,.92)}}

.kpi,.kpi.k-bad,.kpi.k-ok,.kpi.k-warn{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),#0d0d0d!important;box-shadow:none!important}
.kpi.k-bad{border-color:rgba(255,107,87,.3)}
.gap-box{background:linear-gradient(160deg,rgba(255,107,87,.12),#0f0f0f)!important;border:1px solid rgba(255,107,87,.3)!important}
.gap-box .v{color:#fff}
.rail .mk{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;margin-bottom:16px}.rail .mk svg{width:36px;height:36px}.rail .mk:hover{background:none}
tbody tr:hover td{background:#131313!important}
.setup h1 em{color:#8cff2e}
