:root {
  --bg: #070a10;
  --panel: rgba(18, 23, 32, .78);
  --panel-strong: #111720;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);
  --text: #f5f7fb;
  --muted: #929cab;
  --green: #59f0a9;
  --green-dark: #1ca66c;
  --blue: #6ba4ff;
  --red: #ff6c7c;
  --amber: #ffbd66;
  --radius: 20px;
  --shadow: 0 26px 70px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: radial-gradient(circle at 35% -20%, #182434 0, var(--bg) 38%), var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.015em;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.glass { border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(24px); box-shadow: var(--shadow); }
.ambient { position: fixed; pointer-events: none; filter: blur(85px); opacity: .14; border-radius: 999px; z-index: -1; }
.ambient-one { width: 460px; height: 460px; background: var(--green); top: -260px; right: 9%; }
.ambient-two { width: 400px; height: 400px; background: #346ef1; bottom: -260px; left: 18%; }

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.8rem, 3vw, 2.65rem); letter-spacing: -.055em; }
h2 { margin-bottom: 0; font-size: 1.15rem; letter-spacing: -.025em; }
.muted { color: var(--muted); line-height: 1.55; }
.eyebrow { margin-bottom: 8px; color: #758294; font-size: .68rem; font-weight: 800; letter-spacing: .16em; }
.right { text-align: right; }

.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(460px, 100%); padding: 44px; border-radius: 28px; text-align: center; }
.auth-card h1 { margin: 22px 0 12px; }
.auth-card .muted { margin-bottom: 28px; }
.auth-foot { color: #687382; margin: 28px 0 0; font-size: .78rem; }
.brand-mark { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, var(--green), #1aabff); color: #03130d; font-weight: 950; box-shadow: 0 10px 30px rgba(89, 240, 169, .2); }
.brand-mark.large { width: 64px; height: 64px; border-radius: 20px; font-size: 1.25rem; margin: auto; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px 1fr; }
.sidebar { position: fixed; inset: 16px auto 16px 16px; width: 232px; padding: 18px; border-radius: 22px; display: flex; flex-direction: column; z-index: 10; }
.brand { display: flex; align-items: center; gap: 12px; padding: 6px 6px 22px; }
.brand strong { display: block; font-size: 1rem; }
.brand small { color: var(--muted); font-size: .7rem; }
nav { display: grid; gap: 6px; }
.nav-item { appearance: none; border: 0; background: transparent; border-radius: 12px; padding: 12px 13px; color: #8e98a7; text-align: left; cursor: pointer; transition: .18s ease; }
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.04); }
.nav-item.active { color: #06140e; background: var(--green); font-weight: 800; box-shadow: 0 10px 30px rgba(89,240,169,.15); }
.nav-icon { display: inline-grid; width: 24px; font-size: 1rem; }
.sidebar-foot { margin-top: auto; display: grid; gap: 16px; }
.health-dot { color: var(--muted); font-size: .75rem; display: flex; align-items: center; gap: 8px; padding: 0 6px; }
.health-dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); }

.main { grid-column: 2; min-width: 0; padding: 34px 38px 60px 24px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.top-actions, .toolbar, .form-actions { display: flex; align-items: center; gap: 10px; }
.clock { color: var(--muted); font-size: .8rem; }
.button, .icon-button, .modal-close { border: 1px solid transparent; border-radius: 11px; cursor: pointer; transition: .18s ease; }
.button { padding: 10px 14px; font-size: .82rem; font-weight: 750; }
.button:hover, .icon-button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.button.primary { color: #03130d; background: var(--green); box-shadow: 0 8px 22px rgba(89,240,169,.14); }
.button.ghost { color: #bbc4d0; background: rgba(255,255,255,.035); border-color: var(--line); }
.button.danger { color: white; background: #d94c60; }
.button.wide { width: 100%; }
.button:disabled { opacity: .45; cursor: progress; transform: none; }
.icon-button { width: 40px; height: 40px; border-color: var(--line); background: rgba(255,255,255,.035); font-size: 1.2rem; }

.view { display: none; }
.view.active { display: block; animation: reveal .22s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(5px); } }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.metric-card { position: relative; overflow: hidden; border-radius: var(--radius); padding: 22px; min-height: 154px; }
.metric-card::after { content:""; position:absolute; right:-34px; bottom:-48px; width:130px; height:130px; border-radius:50%; background: rgba(255,255,255,.035); }
.metric-card strong { display: block; margin: 16px 0 5px; font-size: 2.2rem; letter-spacing: -.06em; }
.metric-card span { color: var(--muted); font-size: .75rem; }
.metric-label { color: #c8d0db; font-size: .77rem; font-weight: 700; }
.metric-card.accent-green strong { color: var(--green); }
.metric-card.accent-blue strong { color: var(--blue); }
.metric-card.accent-red strong { color: var(--red); }
.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.panel { border-radius: var(--radius); padding: 22px; }
.span-two { grid-column: span 2; }
.panel-head, .section-intro { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.section-intro { margin: 4px 0 22px; }
.section-intro .muted { margin: 7px 0 0; }
.route-callout { display:flex; align-items:center; gap:18px; margin:-8px 0 20px; padding:15px 18px; border-radius:14px; border-color:rgba(89,240,169,.2); }
.route-callout strong { flex:0 0 auto; color:var(--green); font-size:.75rem; }
.route-callout span { color:var(--muted); font-size:.72rem; line-height:1.5; }
.channel-list { display: grid; gap: 7px; }
.channel-row { display: grid; grid-template-columns: minmax(160px, 1.4fr) 1fr 110px auto; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid transparent; border-radius: 13px; background: rgba(255,255,255,.025); }
.channel-row:hover { border-color: var(--line); background: rgba(255,255,255,.045); }
.channel-name { display:flex; align-items:center; gap:11px; min-width:0; }
.channel-logo { width: 36px; height: 36px; border-radius: 10px; display:grid; place-items:center; background: #1a222e; color:var(--green); font-weight:850; }
.channel-name strong, .channel-name span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.channel-name small { display:block; color:var(--muted); font-size:.68rem; margin-top:3px; }
.status-pill { display:inline-flex; align-items:center; gap:6px; width:max-content; border-radius:999px; padding:5px 9px; font-size:.65rem; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.status-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status-pill.live, .status-pill.running { color: var(--green); background: rgba(89,240,169,.1); }
.status-pill.extracting { color:var(--blue); background:rgba(107,164,255,.12); }
.status-pill.ready { color: var(--blue); background: rgba(107,164,255,.1); }
.status-pill.error { color: var(--red); background: rgba(255,108,124,.1); }
.status-pill.idle { color: #96a0ae; background: rgba(255,255,255,.06); }
.route-tag { display:inline-flex; padding:5px 9px; border-radius:8px; color:#b9c7dc; background:rgba(75,113,173,.12); font-size:.69rem; }
.gauge-wrap { display:flex; align-items:center; gap:16px; margin:22px 0 28px; }
.gauge { --value: 0; width:86px; height:86px; border-radius:50%; display:grid; place-items:center; background: conic-gradient(var(--green) calc(var(--value) * 1%), #232c38 0); position:relative; }
.gauge::after { content:""; position:absolute; inset:8px; border-radius:50%; background:#111720; }
.gauge span { position:relative; z-index:1; font-weight:850; }
.gauge-wrap p { margin:3px 0 0; font-size:.75rem; }
.health-row { display:flex; justify-content:space-between; align-items:center; margin:13px 0 8px; font-size:.78rem; }
.health-row span { color:var(--muted); }
.progress { height:5px; border-radius:10px; background:#232c38; overflow:hidden; }
.progress i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--green-dark),var(--green)); border-radius:inherit; transition:width .3s ease; }

.search, input, select, textarea { width:100%; color:var(--text); background:#0b1017; border:1px solid var(--line-strong); border-radius:10px; outline:none; transition:.16s ease; }
input, select { height:42px; padding:0 12px; }
textarea { padding:11px 12px; resize:vertical; line-height:1.5; }
input:focus, select:focus, textarea:focus { border-color:rgba(89,240,169,.65); box-shadow:0 0 0 3px rgba(89,240,169,.08); }
.search { width:230px; }
label { color:#aeb8c6; font-size:.74rem; font-weight:700; display:grid; gap:7px; }
select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,#7e8998 50%),linear-gradient(135deg,#7e8998 50%,transparent 50%); background-position:calc(100% - 17px) 18px,calc(100% - 12px) 18px; background-size:5px 5px; background-repeat:no-repeat; }

.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th { padding:11px 12px; color:#657183; font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; text-align:left; border-bottom:1px solid var(--line); }
td { padding:13px 12px; font-size:.76rem; border-bottom:1px solid rgba(255,255,255,.045); vertical-align:middle; }
tbody tr:hover { background:rgba(255,255,255,.018); }
.actions { display:flex; justify-content:flex-end; gap:6px; }
.watch-button { padding:7px 11px; color:#03130d; background:var(--green); font-size:.7rem; line-height:1; box-shadow:0 6px 18px rgba(89,240,169,.16); }
.action-btn { width:32px; height:32px; border:1px solid var(--line); border-radius:9px; color:#aab4c2; background:rgba(255,255,255,.025); cursor:pointer; }
.action-btn:hover { color:var(--text); border-color:var(--line-strong); background:rgba(255,255,255,.06); }
.action-btn.start { color:var(--green); }
.action-btn.stop, .action-btn.delete { color:var(--red); }
.source-type { font-weight:750; text-transform:capitalize; }
.source-url { display:block; max-width:240px; margin-top:4px; color:#657183; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.65rem; }
.empty-state { min-height:180px; display:grid; place-content:center; justify-items:center; gap:7px; color:var(--muted); text-align:center; }
.empty-state strong { color:#c6cfda; }
.empty-state span { font-size:.78rem; }

.vpn-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.vpn-card { border-radius:var(--radius); padding:20px; position:relative; overflow:hidden; }
.vpn-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.flag { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--blue); background:rgba(107,164,255,.1); font-size:1.35rem; font-weight:900; }
.vpn-card h3 { margin:16px 0 4px; font-size:1rem; }
.vpn-card .country { color:var(--muted); font-size:.74rem; }
.assignment-count { display:flex; align-items:baseline; gap:7px; margin-top:15px; }
.assignment-count strong { color:var(--green); font-size:1.2rem; }
.assignment-count span { color:var(--muted); font-size:.68rem; }
.assigned-list { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; min-height:24px; }
.assigned-list > span { padding:4px 7px; border-radius:7px; color:#aebcce; background:rgba(255,255,255,.04); font-size:.63rem; }
.vpn-meta { display:grid; gap:8px; margin:20px 0; }
.vpn-meta div { display:flex; justify-content:space-between; gap:12px; font-size:.7rem; }
.vpn-meta span { color:var(--muted); }
.vpn-meta code { max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#b8c5d5; }
.vpn-actions { display:flex; gap:7px; }

.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.stack { display:grid; gap:14px; }
.stack.compact { max-width:500px; }
.copy-field { display:flex; align-items:center; gap:8px; margin:18px 0; padding:9px; border-radius:12px; background:#090e14; border:1px solid var(--line); }
.copy-field code { flex:1; min-width:0; color:var(--green); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem; }
.notice { padding:13px; border-left:3px solid var(--blue); border-radius:4px 10px 10px 4px; color:#8e9db0; background:rgba(107,164,255,.06); font-size:.73rem; line-height:1.5; }
.pipeline { display:flex; align-items:center; gap:12px; overflow:auto; }
.pipeline > div { min-width:180px; flex:1; padding:15px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.02); }
.pipeline b { width:24px; height:24px; display:grid; place-items:center; border-radius:7px; color:#06130e; background:var(--green); font-size:.68rem; margin-bottom:16px; }
.pipeline strong, .pipeline span { display:block; }
.pipeline span { color:var(--muted); margin-top:4px; font-size:.68rem; }
.pipeline i { color:#536071; font-style:normal; }

.modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:22px; background:rgba(1,3,7,.78); backdrop-filter:blur(14px); }
.modal-card { width:min(610px,100%); max-height:calc(100vh - 44px); overflow:auto; border-radius:24px; padding:24px; }
.large-modal { width:min(820px,100%); }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }
.modal-close { width:34px; height:34px; color:#9da7b5; background:rgba(255,255,255,.04); border-color:var(--line); font-size:1.4rem; }
.form-grid, .form-subgrid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.form-subgrid { padding:16px; border:1px solid var(--line); border-radius:14px; background:rgba(0,0,0,.12); }
.route-picker small { display:block; min-height:30px; margin-top:7px; color:#718096; font-size:.64rem; font-weight:500; line-height:1.45; }
.route-picker select { border-color:rgba(107,164,255,.28); }
.field-help { display:block; margin-top:7px; color:#718096; font-size:.64rem; font-weight:500; line-height:1.45; }
.toggle-row { display:flex; align-items:center; gap:10px; }
.toggle-row input { appearance:none; width:42px; height:23px; border-radius:999px; padding:0; position:relative; cursor:pointer; }
.toggle-row input::after { content:""; position:absolute; width:15px; height:15px; border-radius:50%; top:3px; left:4px; background:#697585; transition:.18s ease; }
.toggle-row input:checked { background:rgba(89,240,169,.18); border-color:rgba(89,240,169,.4); }
.toggle-row input:checked::after { transform:translateX(17px); background:var(--green); }
.form-actions { justify-content:flex-end; margin-top:7px; }
.player-card { width:min(960px,100%); }
.player-stage { position:relative; overflow:hidden; border-radius:14px; background:#000; }
#videoPlayer { width:100%; aspect-ratio:16/9; background:black; border-radius:14px; }
.player-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#dce5ef; background:radial-gradient(circle at center,rgba(15,29,46,.72),rgba(0,0,0,.88)); pointer-events:none; }
.player-loading > span { width:36px; height:36px; border:3px solid rgba(255,255,255,.18); border-top-color:var(--green); border-radius:50%; animation:playerSpin .8s linear infinite; }
.player-loading strong { font-size:.78rem; letter-spacing:.04em; }
.player-loading > small { color:#8f9dae; font-size:.7rem; text-align:center; max-width:80%; }
.player-loading.failed > span { border-color:rgba(255,108,124,.24); border-top-color:var(--red); animation:none; }
.extraction-steps { width:min(680px,88%); display:grid; gap:5px; margin-top:5px; }
.extraction-step { display:grid; grid-template-columns:20px 1fr; gap:8px; align-items:start; padding:5px 8px; border-radius:8px; color:#8795a6; background:rgba(255,255,255,.025); text-align:left; font-size:.64rem; }
.extraction-step i { width:17px; height:17px; display:grid; place-items:center; border-radius:50%; color:#04130e; background:var(--green); font-size:.58rem; font-style:normal; }
.extraction-step.active { color:#dce5ef; background:rgba(107,164,255,.09); }
.extraction-step.active i { background:#6ba4ff; box-shadow:0 0 0 4px rgba(107,164,255,.1); }
.extraction-step span { display:grid; grid-template-columns:86px 1fr; gap:8px; line-height:1.35; }
.extraction-step b { color:inherit; text-transform:uppercase; letter-spacing:.06em; }
.player-message { margin:12px 2px 0; color:#8794a5; font-size:.74rem; }
@keyframes playerSpin { to { transform:rotate(360deg); } }
.player-meta { display:flex; align-items:center; gap:10px; margin-top:13px; }
.player-meta code { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#7e8a9a; font-size:.7rem; }
.confirm-card { max-width:440px; }
.confirm-card p { margin:12px 0 24px; }
.form-error { color:#ff9aa6; background:rgba(255,108,124,.08); border:1px solid rgba(255,108,124,.18); padding:11px 12px; border-radius:10px; font-size:.78rem; }

.toast-stack { position:fixed; right:22px; bottom:22px; display:grid; gap:8px; z-index:200; }
.toast { width:min(390px,calc(100vw - 44px)); padding:13px 15px; border-radius:12px; color:#dbe3ed; background:#151c26; border:1px solid var(--line-strong); box-shadow:var(--shadow); animation:toastIn .2s ease both; font-size:.78rem; }
.toast.success { border-left:3px solid var(--green); }
.toast.error { border-left:3px solid var(--red); }
@keyframes toastIn { from { opacity:0; transform:translateY(8px); } }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns:repeat(2,1fr); }
  .vpn-grid { grid-template-columns:repeat(2,1fr); }
  .channel-row { grid-template-columns:1.4fr 1fr auto; }
  .channel-row .route-tag { display:none; }
}
@media (max-width: 820px) {
  .app-shell { display:block; }
  .sidebar { position:sticky; inset:0; width:auto; margin:0; border-radius:0; flex-direction:row; align-items:center; padding:10px 14px; }
  .sidebar .brand small, .sidebar-foot, .nav-item { font-size:0; }
  .sidebar-foot { display:block; width:40px; margin-left:4px; }
  .sidebar-foot .health-dot { display:none; }
  #logoutButton { width:40px; min-width:40px; padding:10px; font-size:0; }
  #logoutButton::before { content:"↪"; font-size:1rem; }
  .sidebar .brand { padding:0; margin-right:auto; }
  .sidebar nav { display:flex; }
  .nav-item { padding:10px; }
  .nav-icon { font-size:1rem; width:auto; }
  .main { padding:24px 16px 50px; }
  .topbar { align-items:flex-start; }
  .clock { display:none; }
  .dashboard-grid, .settings-grid { grid-template-columns:1fr; }
  .span-two { grid-column:auto; }
  .vpn-grid { grid-template-columns:1fr; }
  .responsive-head, .section-intro { align-items:flex-start; flex-direction:column; }
  .route-callout { align-items:flex-start; flex-direction:column; gap:7px; }
  .toolbar { width:100%; }
  .search { flex:1; width:auto; }
}
@media (max-width: 580px) {
  .ambient { left:0; right:0; max-width:100vw; margin-inline:auto; }
  .sidebar .brand strong { display:none; }
  .sidebar .brand { gap:0; }
  .sidebar nav { gap:2px; }
  .metric-grid { grid-template-columns:1fr; }
  .top-actions .button { display:none; }
  .form-grid, .form-subgrid { grid-template-columns:1fr; }
  .form-grid .span-two, .form-subgrid .span-two { grid-column:auto; }
  .auth-card { padding:30px 22px; }
  .modal { padding:0; align-items:end; }
  .modal-card { border-radius:22px 22px 0 0; max-height:92vh; }
  .player-meta { flex-wrap:wrap; }
  .player-meta code { flex-basis:calc(100% - 70px); }
  .player-meta .button { width:100%; }
  .player-loading { gap:7px; }
  .extraction-steps { width:94%; gap:3px; }
  .extraction-step { padding:3px 6px; font-size:.56rem; }
  .extraction-step:nth-last-child(n+4) { display:none; }
  .extraction-step span { grid-template-columns:62px 1fr; gap:5px; }
  .pipeline { align-items:stretch; flex-direction:column; }
  .pipeline i { display:none; }
}