@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --bg-body: #0b0e14;
  --bg-sidebar: #0f1219;
  --bg-card: #111622;
  --bg-card-2: #151b2b;
  --bg-input: #0d1018;
  --bg-hover: rgba(139,92,246,0.04);
  --border: rgba(255,255,255,0.05);
  --border-2: rgba(255,255,255,0.08);
  --border-3: rgba(255,255,255,0.12);
  --text-0: #f1f1f4;
  --text-1: #d1d5e0;
  --text-2: #8b92a5;
  --text-3: #5a6178;
  --text-4: #454558;
  --neon: #8b5cf6;
  --neon-2: #a78bfa;
  --neon-3: #c4b5fd;
  --neon-glow: 0 0 12px rgba(139,92,246,0.35), 0 0 40px rgba(139,92,246,0.1);
  --neon-glow-sm: 0 0 8px rgba(139,92,246,0.25);
  --neon-glow-lg: 0 0 20px rgba(139,92,246,0.4), 0 0 60px rgba(139,92,246,0.12);
  --green: #34d399;
  --green-neon: 0 0 10px rgba(52,211,153,0.35);
  --red: #f87171;
  --red-neon: 0 0 10px rgba(248,113,113,0.35);
  --yellow: #fbbf24;
  --yellow-neon: 0 0 10px rgba(251,191,36,0.3);
  --blue: #60a5fa;
  --blue-neon: 0 0 10px rgba(96,165,250,0.35);
  --cyan: #22d3ee;
  --r: 14px;
  --r-sm: 10px;
  --r-xs: 6px;
  --sidebar-w: 260px;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Inter',sans-serif;background:var(--bg-body);color:var(--text-1);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;font-size:13.5px;}
a{color:var(--text-2);text-decoration:none;transition:color .2s;}
a:hover{color:var(--neon-2);}
code,.mono{font-family:'JetBrains Mono','Consolas',monospace;font-size:11px;}

/* ═══ AUTH ═══ */
.auth-container{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;background:var(--bg-body);}
.auth-card{width:100%;max-width:400px;background:var(--bg-card);border:1px solid var(--border-2);border-radius:16px;padding:44px 36px;box-shadow:var(--neon-glow-sm);}
.auth-card .logo{text-align:center;margin-bottom:36px;}
.auth-card .logo h1{font-size:26px;font-weight:800;color:var(--text-0);display:flex;align-items:center;justify-content:center;gap:10px;}
.auth-card .logo p{color:var(--text-4);font-size:11px;margin-top:8px;letter-spacing:2px;text-transform:uppercase;}
.auth-footer{text-align:center;margin-top:24px;font-size:12px;color:var(--text-4);}
.auth-footer a{color:var(--neon-2);}

/* ═══ FORMS ═══ */
.form-group{margin-bottom:18px;}
.form-group label{display:block;font-size:12px;font-weight:500;color:var(--text-2);margin-bottom:8px;}
.form-input,.form-select{width:100%;padding:11px 14px;background:var(--bg-input);border:1px solid var(--border-2);border-radius:var(--r-sm);color:var(--text-1);font-size:13.5px;font-family:inherit;outline:none;transition:all .25s;}
.form-input:focus,.form-select:focus{border-color:var(--neon);box-shadow:var(--neon-glow-sm);}
.form-input::placeholder{color:var(--text-4);}
.form-select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%233c4256' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right 10px center;background-repeat:no-repeat;background-size:14px;padding-right:32px;}
.form-select option{background:var(--bg-card);color:var(--text-1);}
textarea.form-input{resize:vertical;min-height:72px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.form-hint{font-size:11px;color:var(--text-4);margin-top:5px;}

/* ═══ BUTTONS ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 20px;font-size:13px;font-weight:600;font-family:inherit;border:none;border-radius:var(--r-sm);cursor:pointer;transition:all .25s;text-decoration:none;white-space:nowrap;}
.btn-primary{background:var(--neon);color:#fff;box-shadow:var(--neon-glow-sm);}
.btn-primary:hover{background:var(--neon-2);box-shadow:var(--neon-glow);transform:translateY(-1px);}
.btn-full{width:100%;}
.btn-secondary{background:var(--bg-card-2);color:var(--text-2);border:1px solid var(--border-2);}
.btn-secondary:hover{border-color:var(--neon);color:var(--text-0);box-shadow:var(--neon-glow-sm);}
.btn-danger{background:rgba(239,68,68,0.1);color:var(--red);border:1px solid rgba(239,68,68,0.15);}
.btn-danger:hover{box-shadow:var(--red-neon);}
.btn-sm{padding:8px 16px;font-size:12px;}
.btn-xs{padding:5px 12px;font-size:11px;}
.btn-icon{padding:8px;background:transparent;border:none;color:var(--text-4);cursor:pointer;transition:all .2s;display:flex;align-items:center;border-radius:var(--r-xs);}
.btn-icon:hover{color:var(--neon-2);background:rgba(139,92,246,0.06);}

/* ═══ ALERTS ═══ */
.alert{padding:12px 16px;border-radius:var(--r-sm);font-size:13px;margin-bottom:16px;}
.alert-error{background:rgba(239,68,68,0.08);color:var(--red);border:1px solid rgba(239,68,68,0.12);}
.alert-success{background:rgba(34,197,94,0.08);color:var(--green);border:1px solid rgba(34,197,94,0.12);}

/* ═══ LAYOUT ═══ */
.layout{display:flex;min-height:100vh;}

/* ═══ SIDEBAR (TailAdmin style + neon) ═══ */
.sidebar{width:var(--sidebar-w);background:var(--bg-sidebar);border-right:1px solid var(--border);position:fixed;top:0;left:0;bottom:0;z-index:100;overflow-y:auto;display:flex;flex-direction:column;}
.sidebar-logo{padding:24px 20px 20px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);}
.sidebar-logo .logo-img{width:32px;height:32px;filter:drop-shadow(0 0 8px rgba(139,92,246,0.4));}
.sidebar-logo h2{font-size:18px;font-weight:800;color:var(--text-0);letter-spacing:-0.3px;}
.sidebar-nav{flex:1;padding:16px 12px;}
.nav-section{margin-bottom:6px;}
.nav-section-title{font-size:10px;font-weight:700;color:var(--text-4);text-transform:uppercase;letter-spacing:1.5px;padding:16px 12px 8px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);color:var(--text-3);font-size:13.5px;font-weight:500;transition:all .2s;margin-bottom:2px;}
.nav-item:hover{color:var(--text-1);background:var(--bg-hover);}
.nav-item.active{color:var(--neon-2);background:rgba(139,92,246,0.08);box-shadow:inset 0 0 0 1px rgba(139,92,246,0.12);text-shadow:var(--neon-glow-sm);}
.nav-item svg{width:18px;height:18px;flex-shrink:0;opacity:.5;}
.nav-item.active svg{opacity:1;color:var(--neon-2);filter:drop-shadow(0 0 4px rgba(139,92,246,0.4));}
.sidebar-footer{padding:14px 16px;border-top:1px solid var(--border);}
.user-info{display:flex;align-items:center;gap:10px;}
.user-avatar{width:34px;height:34px;border-radius:10px;background:var(--neon);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;box-shadow:var(--neon-glow-sm);}
.user-details{flex:1;min-width:0;}
.user-name{font-size:13px;font-weight:600;color:var(--text-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-role{font-size:10px;color:var(--text-4);text-transform:uppercase;letter-spacing:0.5px;}

/* ═══ MAIN ═══ */
.main-content{flex:1;margin-left:var(--sidebar-w);padding:28px 32px;min-height:100vh;}
.page-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;}
.page-title{font-size:24px;font-weight:800;color:var(--text-0);letter-spacing:-0.3px;}
.page-subtitle{font-size:12px;color:var(--text-3);margin-top:3px;}

/* ═══ STAT LIST CARDS ═══ */
.stat-list-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:0;margin-bottom:16px;overflow:hidden;}
.stat-list-card .slc-header{padding:16px 20px;border-bottom:1px solid var(--border);font-size:14px;font-weight:700;color:var(--text-0);display:flex;align-items:center;justify-content:space-between;}
.stat-list-item{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);transition:background .15s;}
.stat-list-item:last-child{border-bottom:none;}
.stat-list-item:hover{background:var(--bg-hover);}
.stat-list-item .sli-left{display:flex;align-items:center;gap:12px;}
.stat-list-item .sli-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.stat-list-item .sli-icon.neon{background:rgba(139,92,246,0.1);color:var(--neon-2);box-shadow:var(--neon-glow-sm);}
.stat-list-item .sli-icon.green{background:rgba(34,197,94,0.1);color:var(--green);box-shadow:var(--green-neon);}
.stat-list-item .sli-icon.red{background:rgba(239,68,68,0.1);color:var(--red);box-shadow:var(--red-neon);}
.stat-list-item .sli-icon.yellow{background:rgba(234,179,8,0.1);color:var(--yellow);box-shadow:var(--yellow-neon);}
.stat-list-item .sli-icon.blue{background:rgba(59,130,246,0.1);color:var(--blue);box-shadow:var(--blue-neon);}
.stat-list-item .sli-icon.cyan{background:rgba(6,182,212,0.1);color:var(--cyan);}
.stat-list-item .sli-title{font-size:13px;color:var(--text-2);}
.stat-list-item .sli-value{font-size:20px;font-weight:800;color:var(--text-0);letter-spacing:-0.5px;}

/* ═══ CARDS ═══ */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);margin-bottom:16px;overflow:hidden;transition:box-shadow .3s;}
.card:hover{box-shadow:var(--neon-glow-sm);}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
.card-title{font-size:15px;font-weight:700;color:var(--text-0);}
.card-body{padding:20px;}
.card-body.no-pad{padding:0;}

/* ═══ CHART CARD ═══ */
.chart-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:22px;margin-bottom:16px;}
.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.chart-title{font-size:15px;font-weight:700;color:var(--text-0);}
.chart-subtitle{font-size:11px;color:var(--text-4);margin-top:2px;}

/* ═══ TABLES ═══ */
.table-wrapper{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
table th{text-align:left;padding:12px 20px;font-size:11px;font-weight:600;color:var(--text-4);text-transform:uppercase;letter-spacing:0.6px;border-bottom:1px solid var(--border);white-space:nowrap;}
table td{padding:12px 20px;font-size:13px;border-bottom:1px solid var(--border);color:var(--text-2);}
table tr:last-child td{border-bottom:none;}
table tr:hover td{background:var(--bg-hover);}

/* ═══ BADGES ═══ */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:600;}
.badge-success{background:rgba(34,197,94,0.1);color:var(--green);box-shadow:var(--green-neon);}
.badge-danger{background:rgba(239,68,68,0.1);color:var(--red);box-shadow:var(--red-neon);}
.badge-warning{background:rgba(234,179,8,0.1);color:var(--yellow);}
.badge-info{background:rgba(59,130,246,0.1);color:var(--blue);}
.badge-accent{background:rgba(139,92,246,0.1);color:var(--neon-2);box-shadow:var(--neon-glow-sm);}
.badge-muted{background:rgba(255,255,255,0.04);color:var(--text-4);}
.badge-dot::before{content:'';width:6px;height:6px;border-radius:50%;display:inline-block;}
.badge-dot.badge-success::before{background:var(--green);box-shadow:var(--green-neon);}
.badge-dot.badge-danger::before{background:var(--red);box-shadow:var(--red-neon);}

/* ═══ STATUS ═══ */
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.status-dot.active,.status-dot.online{background:var(--green);box-shadow:var(--green-neon);}
.status-dot.inactive,.status-dot.offline{background:var(--text-4);}
.status-dot.warning{background:var(--yellow);box-shadow:var(--yellow-neon);}

/* ═══ PROGRESS ═══ */
.progress{height:6px;background:rgba(255,255,255,0.04);border-radius:3px;overflow:hidden;}
.progress-fill{height:100%;border-radius:3px;transition:width .8s cubic-bezier(.4,0,.2,1);}
.progress-fill.green{background:var(--green);box-shadow:var(--green-neon);}
.progress-fill.red{background:var(--red);box-shadow:var(--red-neon);}
.progress-fill.accent{background:var(--neon);box-shadow:var(--neon-glow-sm);}
.progress-fill.yellow{background:var(--yellow);}

/* ═══ DIST BAR ═══ */
.dist-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:rgba(255,255,255,0.03);}
.dist-bar > div{transition:width .8s cubic-bezier(.4,0,.2,1);}
.dist-legend{display:flex;gap:20px;margin-top:12px;}
.dist-legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);}
.dist-legend-dot{width:8px;height:8px;border-radius:3px;flex-shrink:0;}

/* ═══ GRID CARDS (streams) ═══ */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:20px;}
.g-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:20px;transition:all .3s;position:relative;overflow:hidden;}
.g-card:hover{border-color:rgba(139,92,246,0.2);box-shadow:var(--neon-glow-sm);}
.g-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.g-card-title{font-size:15px;font-weight:700;color:var(--text-0);}
.g-card-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:14px;border-top:1px solid var(--border);}
.g-card-stat{text-align:center;}
.g-card-stat-val{font-size:20px;font-weight:800;letter-spacing:-0.3px;}
.g-card-stat-lbl{font-size:9px;color:var(--text-4);text-transform:uppercase;letter-spacing:0.8px;margin-top:2px;font-weight:600;}

/* ═══ NODE MAP ═══ */
.node-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:20px;}
.node-block{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:18px;position:relative;overflow:hidden;transition:all .3s;}
.node-block:hover{box-shadow:0 4px 20px rgba(0,0,0,0.3);}
.node-block.online{border-color:rgba(34,197,94,0.15);box-shadow:inset 0 0 0 1px rgba(34,197,94,0.05);}
.node-block.online .nb-name{text-shadow:var(--green-neon);}
.node-block.offline{opacity:0.7;}
.node-block .nb-name{font-size:15px;font-weight:700;color:var(--text-0);}
.node-block .nb-domain{font-size:12px;color:var(--neon-2);margin-top:4px;word-break:break-all;font-weight:500;}
.node-block .nb-ip{font-size:11px;color:var(--text-4);font-family:'JetBrains Mono',monospace;margin-top:2px;}
.node-block .nb-meta{display:flex;gap:14px;margin-top:10px;font-size:11px;color:var(--text-3);}
.node-block .nb-streams{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px;}
.node-block .nb-stream-tag{font-size:10px;padding:3px 10px;background:rgba(139,92,246,0.1);color:var(--neon-2);border-radius:20px;font-weight:500;box-shadow:var(--neon-glow-sm);}

/* ═══ SECTIONS ═══ */
.section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:20px;margin-bottom:14px;}
.section-title{font-size:14px;font-weight:700;color:var(--text-0);margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;}

/* ═══ CONFIG ═══ */
.config-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);}
.config-row:last-child{border-bottom:none;}
.config-label{font-size:13px;color:var(--text-2);}

/* ═══ SETTINGS ═══ */
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px;}
.settings-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:24px;}
.settings-section h3{font-size:16px;font-weight:700;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border);color:var(--text-0);}

/* ═══ TOGGLE ═══ */
.toggle-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:rgba(255,255,255,0.06);border:1px solid var(--border-2);border-radius:24px;transition:.3s;}
.toggle-slider::before{position:absolute;content:"";height:18px;width:18px;left:2px;bottom:2px;background:var(--text-4);border-radius:50%;transition:.3s;}
.toggle-switch input:checked+.toggle-slider{background:rgba(139,92,246,0.15);border-color:rgba(139,92,246,0.3);box-shadow:var(--neon-glow-sm);}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(18px);background:var(--neon);box-shadow:var(--neon-glow-sm);}

/* ═══ CODE ═══ */
.code-box{background:var(--bg-body);border:1px solid var(--border);border-radius:var(--r-sm);padding:16px;position:relative;}
.code-box pre{color:var(--green);font-family:'JetBrains Mono','Consolas',monospace;font-size:11.5px;line-height:1.7;white-space:pre-wrap;word-break:break-all;}
.key-display{background:var(--bg-body);border:1px solid var(--border);border-radius:var(--r-xs);padding:8px 12px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-3);word-break:break-all;}

/* ═══ TABS ═══ */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:22px;}
.tab{padding:12px 22px;font-size:13px;font-weight:600;color:var(--text-4);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit;}
.tab:hover{color:var(--text-1);}
.tab.active{color:var(--neon-2);border-bottom-color:var(--neon);text-shadow:var(--neon-glow-sm);}
.tab-content{display:none;}
.tab-content.active{display:block;}

/* ═══ METHOD CARDS ═══ */
.method-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px;}
.method-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:24px;cursor:pointer;transition:all .3s;text-align:center;}
.method-card:hover{border-color:rgba(139,92,246,0.15);}
.method-card.selected{border-color:rgba(139,92,246,0.3);box-shadow:var(--neon-glow-sm);}
.method-card h4{font-size:16px;font-weight:700;color:var(--text-0);margin-bottom:4px;}
.method-card p{font-size:12px;color:var(--text-4);}

/* ═══ EMPTY ═══ */
.empty-state{text-align:center;padding:60px 20px;color:var(--text-4);}
.empty-state p{font-size:13px;margin-top:8px;}

/* ═══ MODAL ═══ */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(5,5,10,.85);backdrop-filter:blur(8px);z-index:1000;align-items:center;justify-content:center;}
.modal-overlay.active{display:flex;}
.modal{background:var(--bg-card);border:1px solid var(--border-2);border-radius:16px;padding:32px;width:100%;max-width:520px;max-height:80vh;overflow-y:auto;box-shadow:var(--neon-glow);}
.modal h2{font-size:20px;font-weight:800;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border);color:var(--text-0);}

/* ═══ ACTIONS ═══ */
.actions-row{display:flex;gap:8px;align-items:center;}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(139,92,246,0.15);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:rgba(139,92,246,0.3);}

/* ═══ ANIMATION ═══ */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .35s ease;}
@keyframes neonPulse{0%,100%{box-shadow:var(--neon-glow-sm)}50%{box-shadow:var(--neon-glow)}}
.neon-pulse{animation:neonPulse 2s ease-in-out infinite;}

/* ═══ RESPONSIVE ═══ */
@media(max-width:768px){.sidebar{display:none;}.main-content{margin-left:0;padding:16px;}.grid-cards,.node-map{grid-template-columns:1fr;}.settings-grid,.form-row,.form-row-3,.method-cards{grid-template-columns:1fr;}}