:root {
  --bg: #070a0d;
  --surface: #0b1016;
  --panel: #0e1620;
  --border: #1a3040;
  --accent: #00c8f0;
  --accent2: #00f0a0;
  --warn: #ff5533;
  --purple: #b060ff;
  --text: #bdd4e0;
  --muted: #3a5a6a;
  --glow: 0 0 18px rgba(0,200,240,0.35);
  --glow2: 0 0 18px rgba(0,240,160,0.35);
  --glowp: 0 0 18px rgba(176,96,255,0.35);
}

/* ── THEMES ── */
body.theme-amber {
  --bg: #0a0800;
  --surface: #110e00;
  --panel: #181200;
  --border: #3a2e00;
  --accent: #ffb700;
  --accent2: #ff6f00;
  --warn: #ff3322;
  --purple: #ff9500;
  --text: #e8d49a;
  --muted: #5a4a10;
  --glow: 0 0 18px rgba(255,183,0,0.35);
  --glow2: 0 0 18px rgba(255,111,0,0.35);
  --glowp: 0 0 18px rgba(255,149,0,0.35);
}
body.theme-green {
  --bg: #020a04;
  --surface: #040f06;
  --panel: #061409;
  --border: #0a3015;
  --accent: #00ff41;
  --accent2: #39ff14;
  --warn: #ff4444;
  --purple: #00e5ff;
  --text: #a8d8b0;
  --muted: #1a5028;
  --glow: 0 0 18px rgba(0,255,65,0.35);
  --glow2: 0 0 18px rgba(57,255,20,0.35);
  --glowp: 0 0 18px rgba(0,229,255,0.35);
}
body.theme-red {
  --bg: #0a0202;
  --surface: #100404;
  --panel: #160606;
  --border: #3a0a0a;
  --accent: #ff2244;
  --accent2: #ff6600;
  --warn: #ff9900;
  --purple: #cc00ff;
  --text: #e8b4b4;
  --muted: #5a1a1a;
  --glow: 0 0 18px rgba(255,34,68,0.35);
  --glow2: 0 0 18px rgba(255,102,0,0.35);
  --glowp: 0 0 18px rgba(204,0,255,0.35);
}
body.theme-slate {
  --bg: #0a0b10;
  --surface: #10121a;
  --panel: #161824;
  --border: #2a2d40;
  --accent: #7b8cde;
  --accent2: #a78bfa;
  --warn: #f87171;
  --purple: #38bdf8;
  --text: #c4c9e8;
  --muted: #3a3f60;
  --glow: 0 0 18px rgba(123,140,222,0.35);
  --glow2: 0 0 18px rgba(167,139,250,0.35);
  --glowp: 0 0 18px rgba(56,189,248,0.35);
}
body.theme-grey {
  --bg: #111111;
  --surface: #1a1a1a;
  --panel: #222222;
  --border: #333333;
  --accent: #cccccc;
  --accent2: #aaaaaa;
  --warn: #ff5533;
  --purple: #888888;
  --text: #dddddd;
  --muted: #555555;
  --glow: 0 0 18px rgba(200,200,200,0.2);
  --glow2: 0 0 18px rgba(170,170,170,0.2);
  --glowp: 0 0 18px rgba(136,136,136,0.2);
}

/* ── SETTINGS OVERLAY ── */
.settings-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.7);
  display: none; align-items: flex-start; justify-content: flex-end;
  padding-top: 64px; padding-right: 20px;
}
.settings-overlay.open { display: flex; }
.settings-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  width: 320px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  animation: slidein .2s ease;
  position: relative;
}
@keyframes slidein { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:none} }
.settings-panel::before { content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--accent); box-shadow:var(--glow); }
.settings-hdr {
  font-family:'Orbitron',monospace; font-size:11px; letter-spacing:4px;
  color:var(--accent); padding:18px 20px 14px;
  border-bottom: 1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
}
.settings-close {
  background:none; border:none; color:var(--muted); font-size:16px;
  cursor:pointer; padding:0; line-height:1; letter-spacing:0; box-shadow:none;
  min-width:0;
}
.settings-close:hover { color:var(--warn); background:none; box-shadow:none; }
.settings-section { padding:16px 20px; border-bottom:1px solid var(--border); }
.settings-section:last-child { border-bottom:none; }
.settings-section-title { font-size:9px; letter-spacing:3px; color:var(--muted); text-transform:uppercase; margin-bottom:12px; }

/* Theme swatches */
.theme-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.theme-swatch {
  padding:10px 12px; border-radius:1px; cursor:pointer;
  border:1px solid transparent; font-size:11px; letter-spacing:1px;
  display:flex; align-items:center; gap:8px; transition:all .15s;
  background:var(--panel);
}
.theme-swatch:hover { border-color:var(--accent); }
.theme-swatch.active { border-color:var(--accent); box-shadow:var(--glow); }
.swatch-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* API key input */
.api-key-wrap { position:relative; }
.api-key-wrap input { width:100%; padding-right:40px; font-size:11px; }
.api-key-toggle {
  position:absolute; right:0; top:0; bottom:0;
  background:none; border:none; border-left:1px solid var(--border);
  color:var(--muted); font-size:13px; padding:0 10px;
  cursor:pointer; letter-spacing:0; min-width:0; box-shadow:none;
}
.api-key-toggle:hover { color:var(--accent); background:none; box-shadow:none; }
.api-status { font-size:10px; margin-top:6px; letter-spacing:1px; }
.api-status.ok { color:var(--accent2); }
.api-status.missing { color:var(--warn); }

/* Cogwheel button */
.cog-btn {
  background:none; border:1px solid var(--border); color:var(--muted);
  width:34px; height:34px; padding:0; display:flex; align-items:center;
  justify-content:center; font-size:16px; cursor:pointer; border-radius:1px;
  transition:all .2s; letter-spacing:0; min-width:0; box-shadow:none;
}
.cog-btn:hover { border-color:var(--accent); color:var(--accent); box-shadow:var(--glow); background:none; }
.cog-btn.active { border-color:var(--accent); color:var(--accent); animation:cogspin 2s linear infinite; }
@keyframes cogspin { to{transform:rotate(360deg)} }

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: 'Share Tech Mono', monospace; min-height: 100vh; overflow-x: hidden; }
body::before { content:''; position:fixed; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.07) 2px,rgba(0,0,0,0.07) 4px); pointer-events:none; z-index:999; }

header { border-bottom:1px solid var(--border); padding:18px 36px; display:flex; align-items:center; gap:18px; position:relative; overflow:hidden; }
header::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),var(--purple),transparent); animation:scanline 5s linear infinite; }
@keyframes scanline { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
.header-inner { max-width:1100px; width:100%; margin:0 auto; display:flex; align-items:center; gap:18px; padding:0 20px; }
.logo { font-family:'Orbitron',monospace; font-weight:900; font-size:26px; letter-spacing:6px; color:var(--accent); text-shadow:var(--glow); }
.logo span { color:var(--accent2); }
.logo-sub { font-size:10px; color:var(--muted); letter-spacing:4px; margin-top:2px; }
.header-right { margin-left:auto; display:flex; gap:20px; align-items:center; font-size:11px; color:var(--muted); }
.offline-badge { background:rgba(0,240,160,0.08); border:1px solid rgba(0,240,160,0.3); color:var(--accent2); padding:4px 10px; font-size:10px; letter-spacing:3px; }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent2); box-shadow:var(--glow2); animation:pulse 2s ease-in-out infinite; margin-right:5px; vertical-align:middle; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
/* ── Navigation ── */
nav { border-bottom:1px solid var(--border); position:relative; z-index:100; }
.nav-inner { max-width:1100px; margin:0 auto; display:flex; padding:0 20px; }

.menu-item { position:relative; }

.menu-label {
  font-family:'Orbitron',monospace; font-size:10px; letter-spacing:3px;
  color:var(--muted); padding:14px 22px; cursor:pointer;
  border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
  text-transform:uppercase; display:flex; align-items:center; gap:7px;
  user-select:none; white-space:nowrap;
}
.menu-label::after { content:'▾'; font-size:9px; opacity:.5; transition:transform .2s; display:inline-block; }
.menu-item:hover .menu-label::after { transform:rotate(-180deg); }
.menu-item:hover > .menu-label { color:var(--text); }
.menu-item.active > .menu-label { color:var(--accent); border-bottom-color:var(--accent); }

.dropdown {
  position:absolute; top:calc(100% + 1px); left:0; min-width:190px;
  background:var(--surface); border:1px solid var(--border);
  border-top:2px solid var(--accent); display:none; z-index:500;
  box-shadow:0 14px 40px rgba(0,0,0,0.75);
  animation:dropin .15s ease;
}
@keyframes dropin { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
.menu-item:hover .dropdown { display:block; }

.dropdown-item {
  font-size:11px; letter-spacing:1.5px; color:var(--muted);
  padding:11px 18px; cursor:pointer;
  border-left:2px solid transparent;
  border-bottom:1px solid rgba(26,48,64,0.4);
  transition:all .15s; text-transform:uppercase;
}
.dropdown-item:last-child { border-bottom:none; }
.dropdown-item:hover { color:var(--text); background:rgba(0,200,240,0.05); border-left-color:var(--accent); padding-left:22px; }
.dropdown-item.active { color:var(--accent); border-left-color:var(--accent); }

main { max-width:1100px; margin:0 auto; padding:36px 20px; }
.page { display:none; animation:fadein .3s ease; }
.page.active { display:block; }
@keyframes fadein { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

.card { background:var(--surface); border:1px solid var(--border); border-radius:2px; padding:28px; position:relative; margin-bottom:20px; transition:border-color .2s; }
.card::before { content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--accent); box-shadow:var(--glow); }
.card.green::before { background:var(--accent2); box-shadow:var(--glow2); }
.card.purple::before { background:var(--purple); box-shadow:var(--glowp); }
.card-title { font-family:'Orbitron',monospace; font-size:11px; letter-spacing:4px; color:var(--accent); text-transform:uppercase; margin-bottom:4px; }
.card.green .card-title { color:var(--accent2); }
.card.purple .card-title { color:var(--purple); }
.card-subtitle { font-size:11px; color:var(--muted); margin-bottom:22px; letter-spacing:1px; }

.input-group { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
input[type=text], select, textarea { flex:1; min-width:120px; background:var(--panel); border:1px solid var(--border); color:var(--text); font-family:'Share Tech Mono',monospace; font-size:13px; padding:10px 14px; outline:none; border-radius:1px; transition:border-color .2s,box-shadow .2s; }
input[type=text]:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(0,200,240,0.1); }
input[type=text]::placeholder, textarea::placeholder { color:var(--muted); }
select { cursor:pointer; }
select option { background:var(--panel); }
textarea { resize:vertical; min-height:90px; }
.card.green input:focus,.card.green select:focus,.card.green textarea:focus { border-color:var(--accent2); box-shadow:0 0 0 2px rgba(0,240,160,0.1); }
.card.purple input:focus,.card.purple select:focus,.card.purple textarea:focus { border-color:var(--purple); box-shadow:0 0 0 2px rgba(176,96,255,0.1); }

button { background:transparent; border:1px solid var(--accent); color:var(--accent); font-family:'Share Tech Mono',monospace; font-size:12px; letter-spacing:2px; padding:10px 20px; cursor:pointer; text-transform:uppercase; transition:all .2s; border-radius:1px; white-space:nowrap; }
button:hover { background:rgba(0,200,240,0.1); box-shadow:var(--glow); }
button:disabled { opacity:.4; cursor:not-allowed; }
.card.green button { border-color:var(--accent2); color:var(--accent2); }
.card.green button:hover { background:rgba(0,240,160,0.1); box-shadow:var(--glow2); }
.card.purple button { border-color:var(--purple); color:var(--purple); }
.card.purple button:hover { background:rgba(176,96,255,0.1); box-shadow:var(--glowp); }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }

.output { background:var(--panel); border:1px solid var(--border); border-radius:1px; padding:18px; display:none; margin-top:12px; font-size:13px; line-height:1.9; }
.output.visible { display:block; }
.out-row { display:flex; gap:12px; align-items:baseline; margin-bottom:2px; }
.out-label { color:var(--muted); font-size:11px; letter-spacing:2px; min-width:160px; text-transform:uppercase; }
.out-value { color:var(--accent); font-size:14px; }
.card.green .out-value { color:var(--accent2); }
.divider { border:none; border-top:1px solid var(--border); margin:10px 0; }

.ai-response { background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--purple); padding:18px; border-radius:1px; font-size:13px; line-height:1.8; white-space:pre-wrap; word-break:break-word; display:none; margin-top:12px; }
.ai-response.visible { display:block; }
.ai-label { font-family:'Orbitron',monospace; font-size:9px; letter-spacing:4px; color:var(--purple); margin-bottom:10px; display:block; }

.code-block { background:#040710; border:1px solid var(--border); border-left:3px solid var(--accent2); padding:20px; border-radius:1px; font-size:12px; line-height:1.7; white-space:pre; overflow-x:auto; display:none; margin-top:12px; position:relative; }
.code-block.visible { display:block; }
.code-label { font-family:'Orbitron',monospace; font-size:9px; letter-spacing:4px; color:var(--accent2); margin-bottom:14px; display:block; }
.copy-btn { position:absolute; top:12px; right:12px; font-size:10px; padding:5px 12px; letter-spacing:1px; border-color:var(--accent2); color:var(--accent2); }
.copy-btn:hover { background:rgba(0,240,160,0.1); }

.loading { display:none; align-items:center; gap:10px; color:var(--muted); font-size:12px; margin-top:10px; }
.loading.visible { display:flex; }
.spinner { width:14px; height:14px; border:2px solid var(--border); border-top-color:var(--purple); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

.hint { font-size:11px; color:var(--muted); margin-top:10px; letter-spacing:1px; }

/* Netplan form */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-field { display:flex; flex-direction:column; gap:6px; }
.form-field label { font-size:11px; color:var(--muted); letter-spacing:2px; text-transform:uppercase; }
.form-field.full { grid-column:1/-1; }
.iface-section { background:var(--panel); border:1px solid var(--border); padding:18px; margin-bottom:14px; border-radius:1px; position:relative; }
.field-hint { font-size:10px; color:var(--muted); letter-spacing:1px; margin-top:3px; }
.iface-section::before { content:''; position:absolute; top:0; left:0; width:2px; height:100%; background:var(--purple); }
.iface-hdr { font-family:'Orbitron',monospace; font-size:10px; letter-spacing:3px; color:var(--purple); margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; }
.rm-btn { font-size:10px; padding:4px 10px; border-color:var(--warn); color:var(--warn); letter-spacing:1px; }
.rm-btn:hover { background:rgba(255,85,51,0.1); box-shadow:0 0 10px rgba(255,85,51,0.2); }
.section-hdr { font-family:'Orbitron',monospace; font-size:10px; letter-spacing:3px; color:var(--purple); margin:20px 0 12px; }

/* Data tables (VLAN planner, DNS, SSL, etc.) */
.data-table { width:100%; border-collapse:collapse; font-size:12px; }
.data-table th { color:var(--muted); font-size:10px; letter-spacing:2px; text-transform:uppercase; padding:8px 12px; border-bottom:1px solid var(--border); text-align:left; font-weight:normal; }
.data-table td { padding:8px 12px; border-bottom:1px solid rgba(26,48,64,0.4); color:var(--text); vertical-align:top; word-break:break-all; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:rgba(0,200,240,0.04); }
.card.green .data-table tr:hover td { background:rgba(0,240,160,0.04); }
.card.purple .data-table tr:hover td { background:rgba(176,96,255,0.04); }
.td-accent { color:var(--accent); }
.card.green .td-accent { color:var(--accent2); }
.card.purple .td-accent { color:var(--purple); }

/* DNS / Intel section headers */
.result-section { margin-bottom:18px; }
.result-section:last-child { margin-bottom:0; }
.result-section-title { font-family:'Orbitron',monospace; font-size:9px; letter-spacing:3px; color:var(--accent2); margin-bottom:8px; display:block; }

/* SSH host sections reuse .iface-section — no extra CSS needed */

/* Sub-tab switcher (VPN/SSH page) */
.subtab-row { display:flex; gap:0; margin-bottom:20px; border-bottom:1px solid var(--border); }
.subtab { font-family:'Orbitron',monospace; font-size:10px; letter-spacing:2px; color:var(--muted); padding:10px 18px; cursor:pointer; border-bottom:2px solid transparent; transition:all .2s; }
.subtab.active { color:var(--purple); border-bottom-color:var(--purple); }
.subtab:hover { color:var(--text); }
.subpage { display:none !important; }
.subpage.active { display:block !important; }

@media(max-width:700px) {
  .form-grid { grid-template-columns:1fr; }
  .form-field.full { grid-column:1; }
  header { padding:10px 0; }
  .header-inner { padding:0 12px; }
  .nav-inner { padding:0 4px; overflow-x:auto; }
  .menu-label { padding:12px 10px; font-size:9px; letter-spacing:2px; }
  main { padding:16px 10px; }
  .logo { font-size:18px; }
}