/* ===== RankForge PBN — Design System v3 (vivid neon, app-like, mobile first) ===== */
:root{
 --bg:#05071a; --bg-2:#0a0f2b; --card:#111838; --card-2:#18204a;
 --line:#26307a; --fg:#eef3ff; --muted:#96a5d6;
 --primary:#00f5b0; --primary-2:#22a7ff; --accent:#ffc93c; --violet:#8b5cff; --pink:#ff4d9d; --danger:#ff4364;
 --grad:linear-gradient(120deg,#00f5b0 0%,#22a7ff 45%,#8b5cff 100%);
 --grad-2:linear-gradient(120deg,#ffc93c,#ff4d9d);
 --grad-3:linear-gradient(120deg,#8b5cff,#22a7ff);
 --shadow:0 18px 50px rgba(3,6,25,.6); --glow:0 0 34px rgba(0,245,176,.4);
 --r:16px; --r-lg:22px;
 --font:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.6}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
 radial-gradient(60% 40% at 12% 0%,rgba(0,245,176,.20),transparent 62%),
 radial-gradient(52% 42% at 92% 4%,rgba(34,167,255,.22),transparent 62%),
 radial-gradient(44% 34% at 50% 100%,rgba(139,92,255,.22),transparent 62%),
 radial-gradient(40% 30% at 85% 78%,rgba(255,77,157,.12),transparent 65%)}
a{color:var(--primary-2);text-decoration:none}
img,video,svg,table{max-width:100%}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(1.85rem,5.4vw,3.4rem);font-weight:900}
h2{font-size:clamp(1.35rem,4vw,2.2rem);font-weight:800}
.muted{color:var(--muted)}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 18px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* nav */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px);background:rgba(5,7,26,.86);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:12px 18px;max-width:1180px;margin:0 auto}
.logo{font-weight:900;font-size:1.15rem;display:flex;align-items:center;gap:8px;color:var(--fg)}
.logo i{width:30px;height:30px;border-radius:9px;background:var(--grad);display:grid;place-items:center;font-style:normal;color:#04121a;font-weight:900;box-shadow:var(--glow)}
.nav-links{display:flex;gap:20px;align-items:center}
.nav-links a{color:var(--muted);font-weight:600;font-size:.94rem}
.nav-links a:hover{color:var(--fg)}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--fg);border-radius:12px;padding:8px 11px;font-size:1.1rem}
@media(max-width:900px){.nav-links{display:none}.nav-links.open{display:flex;position:absolute;top:60px;left:0;right:0;flex-direction:column;background:var(--bg-2);padding:18px;border-bottom:1px solid var(--line)}.burger{display:block}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--card-2);color:var(--fg);
 padding:11px 18px;border-radius:999px;font-weight:700;cursor:pointer;font-size:.95rem;transition:.18s;font-family:inherit;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--grad);color:#03121a;border:0;box-shadow:var(--glow)}
.btn-warn{background:var(--grad-2);color:#1a0b00;border:0}
.btn-ghost{background:transparent}
.btn-lg{padding:15px 28px;font-size:1.03rem;width:100%}
.btn-sm{padding:7px 13px;font-size:.82rem}
.btn-danger{background:rgba(255,67,100,.16);border-color:var(--danger);color:#ffb3c2}
/* cards, layout blocks */
.card{background:linear-gradient(180deg,rgba(24,32,74,.92),rgba(17,24,56,.92));border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.card.feat i{font-style:normal;font-size:1.5rem;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--grad-3);margin-bottom:10px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:14px}
.sec{padding:56px 18px}
.sec-head{text-align:center;max-width:720px;margin:0 auto 30px}
.pill{display:inline-block;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(0,245,176,.08);color:var(--primary);font-size:.8rem;font-weight:800;letter-spacing:.04em}
.badge{display:inline-block;padding:4px 11px;border-radius:999px;font-size:.74rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.b-ok{background:rgba(0,245,176,.16);color:var(--primary)}
.b-warn{background:rgba(255,201,60,.16);color:var(--accent)}
.b-bad{background:rgba(255,67,100,.16);color:#ff8098}
.alert{background:rgba(34,167,255,.1);border:1px solid var(--line);border-left:4px solid var(--primary-2);border-radius:12px;padding:13px 15px;margin-bottom:16px}
.alert.err{background:rgba(255,67,100,.1);border-left-color:var(--danger)}
/* hero */
.hero{padding:64px 18px 34px;text-align:center}
.hero .lead{max-width:790px;margin:16px auto 26px;font-size:clamp(1rem,2.4vw,1.16rem);color:var(--muted)}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:38px}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:rgba(17,24,56,.7);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-align:center}
.stat b{display:block;font-size:1.6rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.78rem;color:var(--muted)}
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(10,15,43,.7);padding:11px 0;white-space:nowrap}
.marquee span{display:inline-block;animation:mq 34s linear infinite;font-weight:700;font-size:.86rem;color:var(--muted)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* pricing */
.plan{position:relative;display:flex;flex-direction:column;gap:12px}
.plan.pop{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),var(--glow)}
.plan .price{font-size:2rem;font-weight:900}
.plan .price small{font-size:.8rem;color:var(--muted);font-weight:600}
.plan ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;font-size:.9rem;color:var(--muted)}
.plan li::before{content:"✓ ";color:var(--primary);font-weight:900}
.ribbon{position:absolute;top:-12px;right:14px;background:var(--grad-2);color:#1a0b00;padding:4px 12px;border-radius:999px;font-size:.7rem;font-weight:900}
/* tables */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:rgba(17,24,56,.6)}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
th{background:#0d1436;text-align:left;padding:12px;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.05em}
td{padding:12px;border-top:1px solid var(--line);vertical-align:middle}
tr:hover td{background:rgba(34,167,255,.05)}
/* forms */
label{display:flex;flex-direction:column;gap:6px;font-size:.86rem;font-weight:700;color:var(--muted)}
input,select,textarea{width:100%;background:#0c1230;border:1px solid var(--line);color:var(--fg);border-radius:12px;padding:12px 14px;font-family:inherit;font-size:.95rem;font-weight:500}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,245,176,.15)}
textarea{min-height:110px;resize:vertical}
.code{background:#080d24;border:1px dashed var(--line);border-radius:12px;padding:12px;overflow-x:auto}
.code code{color:var(--primary);font-size:.82rem;word-break:break-all}
.meter{height:9px;border-radius:999px;background:#0c1230;overflow:hidden}
.meter i{display:block;height:100%;background:var(--grad)}
/* auth */
.auth-body{min-height:100vh;display:grid;place-items:center;padding:26px 18px}
.auth-card{width:100%;max-width:420px;background:linear-gradient(180deg,rgba(24,32,74,.95),rgba(17,24,56,.95));border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
/* panel shell */
.shell{display:grid;grid-template-columns:246px 1fr;min-height:100vh}
.side{background:rgba(8,12,34,.94);border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side a{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;color:var(--muted);font-weight:700;font-size:.9rem}
.side a span{width:20px;text-align:center}
.side a:hover{background:var(--card-2);color:var(--fg)}
.side a.active{background:var(--grad);color:#03121a}
.main{padding:24px 22px 34px;min-width:0}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
/* floating support + mobile tabbar */
.fab{position:fixed;right:14px;bottom:80px;display:flex;flex-direction:column;gap:10px;z-index:60}
.fab a{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;background:var(--grad);color:#03121a;box-shadow:var(--glow);text-decoration:none}
.tabbar{display:none}
@media(max-width:900px){
 .shell{grid-template-columns:1fr}
 .side{display:none}
 .main{padding:16px 14px 96px}
 .sec{padding:40px 14px}
 .page-head{align-items:flex-start}
 .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(8,12,34,.97);
   border-top:1px solid var(--line);backdrop-filter:blur(14px);padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
 .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.66rem;font-weight:800;color:var(--muted);padding:5px 2px;border-radius:12px}
 .tabbar a span{font-size:1.16rem}
 .tabbar a.active{color:#03121a;background:var(--grad)}
 .fab{bottom:88px;right:12px}
 .fab a{width:46px;height:46px;font-size:1.15rem}
 table{min-width:560px}
}
/* live instant status bar */
.live{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(0,245,176,.08);border:1px solid var(--line);
 border-left:4px solid var(--primary);border-radius:12px;padding:12px 14px;margin-bottom:16px;font-weight:700;font-size:.9rem}
.live .dot{width:10px;height:10px;border-radius:50%;background:var(--primary);box-shadow:var(--glow);animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.footer{border-top:1px solid var(--line);background:rgba(8,12,34,.7);padding:38px 0 26px;margin-top:30px}
.footer b{display:block;margin-bottom:8px}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--primary)}