:root{
  --bg:#0b1220;--bg-2:#0f1a33;--card:#111c3a;--border:#1e2a4a;
  --accent:#5b7cff;--text:#e8eefc;--muted:#9fb0d0;
  --gap:14px;--radius:14px;--shadow:0 10px 24px rgba(0,0,0,.25);
  --danger:#ff9c9c;--ok:#9cff9c;--warn:#ffd27d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans";background:var(--bg);color:var(--text);overflow-x:hidden}
a{color:var(--accent);text-decoration:none}
header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,var(--bg-2),rgba(15,26,51,.9));backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);padding:16px clamp(12px,3vw,48px)}
header h1{margin:0 0 6px 0;font-size:clamp(18px,2.6vw,28px)}
header p{margin:0;color:var(--muted);font-size:clamp(12px,1.8vw,14px)}
main{padding:16px clamp(12px,3vw,48px);display:grid;gap:var(--gap);grid-template-columns:1fr;max-width:1400px;margin:0 auto}
/* Card group container (maintain internal structure) */
.cards{display:grid;gap:var(--gap);grid-template-columns:1fr}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.section-title{margin:0 0 8px 0;font-size:18px}
.row{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:start}
.row > div{display:flex;flex-direction:column}
label{display:block;font-size:13px;color:#a8b3cf;margin:0 0 6px}
input[type="text"],input[type="number"],select,button,details summary{
  width:100%;padding:11px 12px;border-radius:10px;border:1px solid #2a3a63;background:#0b1530;color:var(--text);outline:none
}
/* Override generic button style for tab buttons */
.tab, .subtab{ width:auto; background:transparent; border:none; border-bottom:3px solid transparent; border-radius:0; padding:10px 2px; }
input:focus,select:focus,button:focus{border-color:var(--accent);outline:2px solid rgba(91,124,255,0.3);outline-offset:2px}
button{cursor:pointer;font-weight:600;letter-spacing:.2px;background:linear-gradient(180deg,#2a45a8,#243b8b);border:1px solid #3b55c7;box-shadow:0 3px 6px rgba(0,0,0,0.3);transition:all 0.2s ease}
button.secondary{background:#0b1530;border:1px solid #2a3a63;box-shadow:0 3px 6px rgba(0,0,0,0.2)}
button.ghost{background:transparent;border:1px dashed #2a3a63;box-shadow:0 2px 4px rgba(0,0,0,0.1)}
button:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,0.4);border-color:var(--accent)}
button.secondary:hover{box-shadow:0 6px 12px rgba(0,0,0,0.3);border-color:#3b55c7}
button.ghost:hover{box-shadow:0 4px 8px rgba(0,0,0,0.2);border-color:#3b55c7}
button:active{transform:translateY(0);box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.copy:active{transform:scale(1);box-shadow:0 1px 3px rgba(0,0,0,0.3)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Monaco,"Liberation Mono",monospace}
.muted{color:var(--muted)}
.hint{font-size:12px;color:#8aa1cc;margin-top:6px;min-height:18px}
.scroll{max-height:380px;overflow:auto;border:1px solid var(--border);border-radius:10px}
table{width:100%;border-collapse:collapse;table-layout:auto}
th,td{padding:9px;border-bottom:1px solid #20305a;text-align:left;vertical-align:top;word-break:break-word}
th{color:#a8b3cf;font-weight:600}
.copy{cursor:pointer;font-size:12px;padding:3px 8px;border-radius:999px;border:1px solid #2a3a63;background:#0b1530;transition:all 0.2s ease}
.copy:hover{background:#1a2540;border-color:#3b55c7;transform:scale(1.05)}
.danger{color:var(--danger)} .ok{color:var(--ok)} .warn{color:var(--warn)}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid #2a3a63;background:#0b1530;font-size:12px}

/* Security notice styling */
.security-notice{
  background:linear-gradient(135deg,#1a2332,#0f1a2e);
  border:1px solid #2a4a63;
  border-left:4px solid var(--warn);
  border-radius:var(--radius);
  padding:12px 16px;
  margin:10px 0;
  font-size:13px;
  color:var(--muted);
}
.security-notice strong{
  color:var(--warn);
  font-weight:600;
}
.security-notice ul{
  margin:8px 0 0 16px;
  padding:0;
}
.security-notice li{
  margin:4px 0;
}
.grid-2{display:grid;gap:var(--gap);grid-template-columns:1fr}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.highlight{outline:2px solid var(--accent);outline-offset:-2px;background:rgba(91,124,255,.12)}
footer{padding:12px clamp(12px,3vw,48px);color:#7f93bd}
.presetbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.presetbar button{flex:1 1 140px;font-weight:700;background:linear-gradient(135deg,#2a45a8,#1e3689);border:1px solid #4a65d7;box-shadow:0 4px 8px rgba(0,0,0,0.25)}
.presetbar button:hover{background:linear-gradient(135deg,#3b55c7,#2a45a8);box-shadow:0 6px 14px rgba(0,0,0,0.35);transform:translateY(-2px)}

/* Action buttons (Run, Start, etc.) get extra prominence */
button#dnsRun, button#pingRun, button#traceRun, button#scanRun,
button#calculateSubnets, button#calculateIPv6Subnets,
button#ipv6Generate, button#ipv6CalculateDelegation {
  background:linear-gradient(135deg,var(--accent),#3b55c7);
  border:1px solid #6a89ff;
  font-weight:700;
  box-shadow:0 4px 10px rgba(91,124,255,0.3);
}
button#dnsRun:hover, button#pingRun:hover, button#traceRun:hover, button#scanRun:hover,
button#calculateSubnets:hover, button#calculateIPv6Subnets:hover,
button#ipv6Generate:hover, button#ipv6CalculateDelegation:hover {
  background:linear-gradient(135deg,#6a89ff,var(--accent));
  box-shadow:0 6px 16px rgba(91,124,255,0.4);
  border-color:#8aa9ff;
}

/* === CONSISTENT SPACING & LAYOUT === */
#panelSubnet, #panelIPv6, #panelTools, #panelMAC, #panelVRRP { 
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}

/* All direct children have consistent spacing */
#panelSubnet > *, #panelIPv6 > *, #panelTools > *, #panelMAC > * { 
  margin: 0; 
}

/* Cards container also gets consistent gap */
.cards { 
  display: grid; 
  gap: var(--gap); 
  grid-template-columns: 1fr; 
}

/* Reset all margins on cards to prevent double spacing */
.card { 
  margin: 0; 
}

/* Grid-2 sections get proper gap */
.grid-2 { 
  display: grid; 
  gap: var(--gap); 
  grid-template-columns: 1fr; 
}

/* === IP TOOLS LAYOUT FIXES === */
#panelTools {
  grid-template-columns: 1fr; /* Force single column for IP tools */
}

/* IP Tools sections should be full width */
#panelTools .card {
  width: 100%;
  max-width: none;
}

/* Subtabs container - make sure it's full width and properly positioned */
.subtabs { 
  display: flex; 
  align-items: flex-end; 
  gap: 14px; 
  border-bottom: 1px solid var(--border); 
  padding: 0 0 4px 0; 
  margin: 4px 0 14px 0; 
  flex-wrap: wrap;
  width: 100%;
}

/* Individual tool sections should be full width */
.tool {
  width: 100% !important;
  max-width: none !important;
}

/* Make sure IP tools don't create side-by-side layout */
@media (min-width: 980px) {
  #panelTools { 
    grid-template-columns: 1fr; /* Keep single column even on large screens */
  }
}

/* Terminal-like output */
.terminal { background:#0a0f1f; border:1px solid #22325a; border-radius:10px; padding:10px; height:220px; overflow:auto; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px; color:#d0e0ff; }
.terminal .line { white-space:pre-wrap; }

/* SSH Terminal specific */
.ssh-tool{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.ssh-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:0;margin:0;border:none;background:none}
.ssh-target-info{flex:1 1 auto;font-size:13px;color:#aab6d8;line-height:1.35;white-space:normal}
.ssh-target-info strong{display:inline-flex;align-items:center;font-size:12px;text-transform:uppercase;letter-spacing:.35px;color:#dbe6ff;margin-right:10px;margin-bottom:0}
.ssh-info-text{display:inline;color:#8ea2d3}
.ssh-buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto}
.ssh-buttons .btn{padding:10px 18px;border-radius:12px;min-width:140px;text-align:center;width:auto;flex:0 0 auto}
.ssh-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:4px 0}
.ssh-meta-label{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:#7f8cb8}
.ssh-status{padding:4px 14px;border-radius:999px;border:1px solid #2a3a63;background:transparent;font-weight:600;font-size:12px;
  letter-spacing:.35px;text-transform:uppercase;color:#9fb0d0}
.ssh-status[data-state="connecting"]{border-color:#ffd27d;color:#ffd27d}
.ssh-status[data-state="connected"]{border-color:#2ecc71;color:#9cff9c}
.ssh-status[data-state="error"]{border-color:#ff6b6b;color:#ff9c9c}
.ssh-active-target{padding:4px 12px;border-radius:8px;border:1px dashed #2a3a63;background:transparent;color:#b5c3e9;font-size:13px}
.ssh-term-wrap{padding:0;border:none;background:transparent;margin-top:12px}
.ssh-terminal-container{height:420px;border-radius:0;background:transparent;overflow:hidden;border:none;box-shadow:none}
.ssh-terminal-container .xterm{padding:0}
.xterm-viewport{background:transparent}

/* Subtabs inside IP Tools */
/* IP-Tools Subtabs as real tabs */
.subtabs{ display:flex; align-items:flex-end; gap:14px; border-bottom:1px solid var(--border); padding:0 0 4px 0; margin:4px 0 14px; flex-wrap:wrap }
.subtab{ width:auto; background:transparent; border:none; border-bottom:3px solid transparent; border-radius:0; padding:8px 2px; cursor:pointer; font-size:13px; font-weight:600; color:var(--muted) }
.subtab:hover{ color:var(--text); border-bottom-color:#3b55c7 }
.subtab.active{ color:var(--text); border-bottom-color:var(--accent) }

/* Resolver tiles */
.tile-grid { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.tile { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; padding:12px 14px; min-width:140px; border:1px solid #2a3a63; border-radius:12px; background:linear-gradient(180deg,#0b1530,#0b1738); transition: border-color .15s, box-shadow .15s; word-break:break-word; }
.tile span.mono{white-space:nowrap}
.tile:hover{ border-color:#3b55c7; box-shadow:0 0 0 2px rgba(91,124,255,.15) inset; }
.small-tiles .tile{ padding:10px 12px; border-radius:10px; }
.small-tiles .tile label{ font-size:12px }
#dnsResolverTabs .chip{ font-size:12px }
.tile input { width:auto; }
.tile .status { font-size:11px; color:#8aa1cc; }
.tile.ok .status { color: var(--ok); }
.tile.err .status { color: var(--danger); }
.tile.run .status { color: var(--warn); }

/* Selectable tiles (no checkboxes) */
.selectable-tiles .tile{ cursor:pointer; user-select:none; }
.selectable-tiles .tile.active{ border-color:#3b55c7; background:linear-gradient(180deg,#2a45a8,#243b8b); }
.selectable-tiles .tile.busy{ border-color:#ffd27d; box-shadow:0 0 0 2px rgba(255,210,125,.15) inset; }
.selectable-tiles .tile.ok{ border-color:#2ecc71; }
.selectable-tiles .tile.err{ border-color:#e74c3c; }
.actions-center{ display:flex; justify-content:center; margin-top:10px; }

/* Preset chips for portscan */
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { padding:6px 10px; border-radius:999px; border:1px solid #2a3a63; background:#0b1530; cursor:pointer; user-select:none; font-size:12px }
.chip.active { border-color:#3b55c7; background:linear-gradient(180deg,#2a45a8,#243b8b); }

/* Top-level tabs as real tabs */
.tabs{ display:flex; align-items:flex-end; gap:18px; border-bottom:1px solid var(--border); padding:0 0 4px 0; margin-bottom:12px; flex-wrap:wrap }
.tab{ width:auto; background:transparent; border:none; border-bottom:3px solid transparent; border-radius:0; padding:10px 2px; cursor:pointer; font-weight:600; color:var(--muted) }
.tab:hover{ color:var(--text); border-bottom-color:#3b55c7 }
.tab.active{ color:var(--text); border-bottom-color:var(--accent) }

/* Remove adjacent margin rule; flex gap ensures uniform vertical spacing */

/* Responsive card tables */
@media (max-width: 600px){
  .scroll{max-height:none}
  #subnetTable thead, #vlsmTable thead{display:none}
  #subnetTable tbody tr, #vlsmTable tbody tr{
    display:grid;grid-template-columns: 1fr 1fr;border:1px solid #20305a;border-radius:10px;margin:8px 0;padding:6px
  }
  #subnetTable tbody tr td, #vlsmTable tbody tr td{border-bottom:none;padding:6px 8px}
  #subnetTable tbody tr td::before, #vlsmTable tbody tr td::before{
    content: attr(data-label); display:block; font-size:11px; color:#a8b3cf; margin-bottom:2px
  }
}