:root{
  --bg: #071227;
  --bg-elevated: #0b1b2e;
  --card: #081827;
  --accent: #3b82f6;
  --accent-2: #06b6d4;
  --accent-soft: rgba(59,130,246,0.12);
  --border: #173044;
  --text: #E6EEF8;
  --text-muted: #9AA6B2;
  --code-bg: #00121a;
  --success: #16A34A;
  --error: #EF4444;

  /* typography */
  --font-size-base: 1rem;      /* 16px */
  --line-height-base: 1.45;
  --h1-size: 2rem;
  --h2-size: 1.5rem;
  --h3-size: 1.125rem;
  --h4-size: 1rem;
  --nav-size: 1rem;
  --btn-size: 0.95rem;
  --muted-size: 0.875rem;
}

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    }

    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      background: radial-gradient(circle at top, #1f2937 0, #020617 55%);
      color: var(--text);
      padding: 24px;
      gap: 20px;
      overflow-x: hidden;
    }

/* Apply typographic scale and code styling */
h1 { font-size: var(--h1-size); line-height: 1.15; font-weight: 600; color: var(--text); }
h2 { font-size: var(--h2-size); line-height: 1.2; font-weight: 600; color: var(--text); }
h3 { font-size: var(--h3-size); line-height: 1.25; font-weight: 600; color: var(--text); }
h4 { font-size: var(--h4-size); line-height: 1.3; font-weight: 600; color: var(--text); }

body { font-size: var(--font-size-base); line-height: var(--line-height-base); }

nav a, .menu a { font-size: var(--nav-size); font-weight: 500; color: var(--text-muted); }
.menu a:hover, nav a:hover { color: var(--accent); }

button, .btn { font-size: var(--btn-size); font-weight: 600; }

code, pre, .monospace { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace; background: var(--code-bg); color: var(--text); font-size: 0.95rem; line-height: 1.5; border-radius: 8px; padding: 6px 8px; }
pre { padding: 12px; overflow: auto; }

footer, .footer-contact { font-size: var(--muted-size); color: var(--text-muted); }

    .card {
      width: 100%;
      max-width: 720px;
      background: linear-gradient(145deg, #020617, #020617);
      border-radius: 18px;
      padding: 26px 26px 22px;
      box-shadow: var(--shadow-soft);
      border: 1px solid rgba(148, 163, 184, 0.18);
      position: relative;
      overflow: hidden;
      margin: 20px auto;
    }

    .card::before {
      content: "";
      position: absolute;
      inset: -40%;
      background:
        radial-gradient(circle at 0 0, rgba(59, 130, 246, 0.18), transparent 55%),
        radial-gradient(circle at 100% 0, rgba(236, 72, 153, 0.12), transparent 55%);
      opacity: 0.7;
      pointer-events: none;
      z-index: 0;
    }

    /* Header / Menu / Footer layout */
    header {
      width: 100%;
      box-sizing: border-box;
    }

    header h1 {
      font-size: 1.4rem;
      margin: 0;
      color: var(--text);
    }

    /* Full-width menu bar with centered inner content */
    .menu {
      width: 100%;
      background-color: #111318;
      box-sizing: border-box;
      padding: 8px 24px;
    }
    .menu a {
      color: var(--text);
      display: inline-block;
      margin: 0 8px;
      padding: 8px 10px;
      text-decoration: none;
      border-radius: 6px;
    }
    .menu a:hover { color: var(--accent); background: rgba(255,255,255,0.02); }
    .menu a.active { background: rgba(255,255,255,0.03); }

    .site-header {
      width: 100%;
      box-sizing: border-box;
      background: transparent;
    }
    .site-header .header-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 24px;
    }
    .site-header h1 { font-size: 1.25rem; color: var(--text); }
    .site-header .tagline { color: var(--text-muted); font-size: .95rem }

    .site-footer {
      width: 100%;
      box-sizing: border-box;
      background: transparent;
    }
    footer.site-footer .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 10px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }
    .footer-left { color: var(--text); font-weight: 600 }
    .footer-right { display:flex; align-items:center; gap:10px }
    .footer-contact { color: var(--text-muted); font-size: 0.9rem }
    .linkedin-link { color: var(--text-muted); display:inline-flex; align-items:center }
    .linkedin-link .linkedin-icon { width:18px; height:18px; color: var(--accent); }

    @media (max-width: 720px) {
      .site-header .header-inner, footer.site-footer .footer-inner { flex-direction: column; gap:8px; align-items: center }
      .menu { padding-left: 12px; padding-right: 12px }
    }
    select {
      width: 100%;
      padding: 9px 11px;
      border-radius: 9px;
      border: 1px solid var(--border);
      background: radial-gradient(circle at 0 0, rgba(15, 23, 42, 0.9), var(--input-bg));
      color: var(--text);
      font-size: 0.9rem;
      outline: none;
      transition: border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast);
    }

    select option {
      background: #0b1b2e;
      color: var(--text);
      padding: 8px;
    }

    select option:hover {
      background: var(--accent);
    }

    select optgroup {
      background: #071227;
      color: var(--accent-2);
      font-weight: 600;
      font-style: normal;
    }

    select optgroup option {
      background: #0b1b2e;
      color: var(--text);
      padding-left: 16px;
    }

    .input::placeholder {
      color: #4b5563;
    }

    .input:focus,
    select:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5);
      background: radial-gradient(circle at 0 0, rgba(15, 23, 42, 1), #020617);
      transform: translateY(-1px);
    }

    .input[disabled],
    select[disabled] {
      opacity: 0.55;
      cursor: not-allowed;
      background: #020617;
    }

    .row {
      display: flex;
      gap: 10px;
    }

    .row > .field-group {
      flex: 1;
    }

    .hint {
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    .bandwidth-row {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    @media (min-width: 640px) {
      .bandwidth-row {
        flex-direction: row;
      }
      .bandwidth-row > .field-group {
        flex: 1;
      }
    }

    .footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
      gap: 10px;
      align-items: center;
    }

    .btn {
      border-radius: 999px;
      padding: 8px 16px;
      font-size: 0.85rem;
      border: 1px solid transparent;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
    }

    .btn-secondary {
      background: transparent;
      border-color: rgba(148, 163, 184, 0.5);
      color: var(--text-muted);
    }

    .btn-secondary:hover {
      border-color: rgba(148, 163, 184, 0.9);
      transform: translateY(-1px);
    }

    .btn-primary {
      background: linear-gradient(135deg, #2563eb, #4f46e5);
      color: white;
      box-shadow: 0 12px 30px rgba(37, 99, 235, 0.45);
    }

    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 16px 40px rgba(37, 99, 235, 0.6);
    }

    .btn-primary:active {
      transform: translateY(0);
      box-shadow: 0 8px 22px rgba(37, 99, 235, 0.5);
    }

    .error-text {
      font-size: 0.75rem;
      color: var(--error);
      margin-top: 2px;
      display: none;
    }

    .input.error,
    select.error {
      border-color: var(--error);
      box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.5);
    }
	.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 26px;
}

/* Reserve scrollbar space to avoid layout shifts causing horizontal overflow */
html { overflow-y: scroll; }

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #dc2626; /* red = shut */
  transition: .3s;
  border-radius: 26px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #16a34a; /* green = no shut */
}

input:checked + .slider:before {
  transform: translateX(26px);
}
.small-row {
  display: grid;
  grid-template-columns: 1fr 1fr 0.7fr;
  gap: 12px;
}

@media (max-width: 600px) {
  .small-row {
    grid-template-columns: 1fr;
  }
}

.medium-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.triple-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 12px;
}

@media (max-width: 600px) {
  .medium-row,
  .triple-row {
    grid-template-columns: 1fr;
  }
}
.output-card {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.output-card h2 {
  margin-bottom: 10px;
  font-size: 1rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.output-box {
  width: 100%;
  
height: auto;
overflow: hidden;
min-height: 50px;

  background: #0a0f1f;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  font-family: monospace;
  font-size: 0.9rem;
  resize: vertical;
}

.ipcalc-box {
  width: 100%;
  background: #0a0f1f;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  font-family: monospace;
  font-size: 0.9rem;
  white-space: pre;     /* keep spacing */
  overflow: hidden;     /* no scrollbars */
  min-height: 110px;    /* a nice default */
}

header {
  width: 100%;
  max-width: 720px;
  text-align: center;
  margin-bottom: 20px;
}

header h1 {
  font-size: 2rem;
  color: var(--text);
}

nav {
  width: 100%;


}

.site-header {
  position: relative;
  left: 0;
  margin: 0 auto 8px;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  padding-left: 24px;
  padding-right: 24px; /* compensate body padding */
}

.site-header .header-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  text-align: center;
}

.site-header h1 { font-size: 1.4rem; margin: 0; color: var(--text); }
.site-header .tagline { color: var(--text-muted); font-size: .95rem }

.site-footer {
  position: relative;
  left: 0;
  margin: 18px auto 0;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  padding-left: 24px;
  padding-right: 24px;
}

footer.site-footer .footer-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 12px;
  color: var(--text-muted);
  text-align: center;
}

footer.site-footer { margin-top: auto }

nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.3s;
}

nav a:hover {
  color: var(--accent);
}

footer {
  width: 100%;
  max-width: 720px;
  text-align: center;
  margin-top: 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Footer layout for contact info */
footer.site-footer .footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.footer-left { color: var(--text); font-weight: 600 }
.footer-right { display:flex; align-items:center; gap:10px }
.footer-contact { color: var(--text-muted); font-size: 0.9rem }
.linkedin-link { color: var(--text-muted); display:inline-flex; align-items:center }
.linkedin-link .linkedin-icon { width:18px; height:18px; color: var(--accent); }

@media (max-width: 720px) {
  footer.site-footer .footer-inner { flex-direction: column; gap:6px; text-align:center }
  .footer-right { justify-content:center }
}

/* ===== Aggregated styles: wantool.html (copied) ===== */
:root{
    --bg:#0f172a; --card:#0b1327; --fg:#e5e7eb; --muted:#9ca3af; --accent:#3b82f6;
    --border:#1f2937; --ok:#16a34a; --err:#ef4444;
  }
  body{
    margin:0; padding:24px; min-height:100vh;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    background:radial-gradient(circle at top,#1f2937 0,#020617 55%); color:var(--fg);
  }
  .card{
    margin:0 auto; max-width:1200px; background:var(--card);
    border:1px solid rgba(148,163,184,.2); border-radius:16px; padding:22px;
    box-shadow:0 18px 45px rgba(15,23,42,.6)
  }
  h1{font-size:1.2rem; margin:0 0 .5rem}
  .muted{color:var(--muted); font-size:.92rem}
  .row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:.6rem 0}
  .grow{flex:1 1 auto}
  .input, input[type="text"], input[type="tel"], input[type="email"], textarea {
    width:100%; padding:.6rem .75rem; border-radius:10px; border:1px solid var(--border);
    background:#0a0f1f; color:var(--fg); font-size:.95rem; outline:none;
    box-sizing: border-box;
  }
  .input:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus, textarea:focus{border-color:var(--accent); box-shadow:0 0 0 1px rgba(59,130,246,.45)}
  button{
    padding:.6rem 1rem; border-radius:999px; border:1px solid transparent;
    background:linear-gradient(135deg,#2563eb,#4f46e5); color:#fff; cursor:pointer;
    box-shadow:0 10px 26px rgba(37,99,235,.35);
    transition: all 0.2s ease;
  }
  button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(37,99,235,.5);
  }
  button:active {
    transform: translateY(0);
    box-shadow: 0 8px 20px rgba(37,99,235,.3);
  }
  button.secondary{background:transparent; border:1px solid rgba(148,163,184,.4); box-shadow:none}
  button.secondary:hover {
    border-color: rgba(148,163,184,.8);
    background: rgba(59,130,246,.1);
  }
  button.secondary:active {
    background: rgba(59,130,246,.2);
  }
  button:disabled{opacity:.6; cursor:not-allowed}
  label.chk{display:none; align-items:center; gap:8px; color:var(--muted); font-size:.9rem}
  .status{min-height:1.4em; margin-top:.3rem; font-size:.92rem; color:var(--muted)}
  .status.ok{color:var(--ok)} .status.err{color:var(--err)}
  .summary{margin-top:.6rem; font-size:.92rem; color:var(--muted)}
  .toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:.6rem}
  .results{margin-top:1rem}

  /* Hostname group */
  details.host{
    border:1px solid var(--border); border-radius:12px; background:#0a0f1f;
    margin-bottom:12px; overflow:hidden
  }
  summary.host-head{
    list-style:none; display:flex; align-items:center; justify-content:space-between;
    padding:.65rem .9rem; background:#0d1426; cursor:pointer; user-select:none
  }
  summary.host-head::-webkit-details-marker{display:none}
  .host-title{display:flex; align-items:center; gap:10px}
  .host-name{font-weight:700}
  .pill{
    font-size:.75rem; color:#bfdbfe; border:1px solid rgba(59,130,246,.5);
    border-radius:999px; padding:2px 8px
  }
  .host-meta{color:var(--muted); font-size:.85rem}

  /* File section inside a host group */
  .file-section{border-top:1px solid var(--border)}
  .file-head{
    padding:.45rem .9rem; background:#0d1426; border-top:1px solid var(--border);
    display:flex; justify-content:space-between; align-items:center
  }
  .file-name{font-weight:600}
  .file-meta{color:var(--muted); font-size:.85rem}

  /* Description group inside a file */
  .desc-group{border-top:1px dashed var(--border)}
  .desc-head{
    padding:.4rem .9rem; background:#0c1324; border-top:1px dashed var(--border);
    color:#dbeafe; font-weight:600; display:flex; justify-content:space-between; align-items:center
  }
  .desc-title{display:flex; gap:10px; align-items:center}
  .desc-pill{
    font-size:.72rem; color:#dbeafe;
    border:1px solid rgba(139,165,255,.5); border-radius:999px; padding:1px 8px
  }

  pre.code{
    margin:0; padding:10px .9rem;
    font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.92rem;
    white-space:pre-wrap; word-break:break-word
  }
  .shutdown{ color: var(--err); font-weight: 700; }

  /* Modal styles */
  .modal {
    display: none; position: fixed; z-index: 1000; left: 0; top: 0;
    width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);
  }
  .modal-content {
    background-color: var(--card); margin: 15% auto; padding: 20px;
    border: 1px solid var(--border); border-radius: 16px; width: 80%; max-width: 600px;
  }
  .close {
    color: var(--muted); float: right; font-size: 28px; font-weight: bold; cursor: pointer;
  }
  .close:hover { color: var(--fg); }
  #bwInput {
    width: 100%; height: 200px; margin: 10px 0; padding: 10px;
    border: 1px solid var(--border); border-radius: 10px; background: #0a0f1f; color: var(--fg);
    font-family: monospace; font-size: 0.9rem;
  }
  #bwSelect, #manualDownload, #manualUpload {
    margin: 10px 0; padding: 8px; border: 1px solid var(--border); border-radius: 10px;
    background: #0a0f1f; color: var(--fg);
  }
  .manual-bw { display: flex; gap: 10px; }
  .manual-bw input { flex: 1; }

/* ===== Aggregated styles: edge_template.html (copied) ===== */
/* Many rules were similar to existing ones; included for completeness */
/* (start of edge_template CSS) */
:root {
      --bg: #0f172a;
      --bg-elevated: #111827;
      --accent: #3b82f6;
      --accent-soft: rgba(59, 130, 246, 0.15);
      --border: #1f2937;
      --text: #e5e7eb;
      --text-muted: #9ca3af;
      --error: #f97373;
      --radius: 10px;
      --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.7);
      --transition-fast: 0.18s ease-out;
      --input-bg: #020617;
    }

    .card {
      width: 100%;
      max-width: 720px;
      background: linear-gradient(145deg, #020617, #020617);
      border-radius: 18px;
      padding: 26px 26px 22px;
      box-shadow: var(--shadow-soft);
      border: 1px solid rgba(148, 163, 184, 0.18);
      position: relative;
      overflow: hidden;
    }
    .card::before {
      content: "";
      position: absolute;
      inset: -40%;
      background:
        radial-gradient(circle at 0 0, rgba(59, 130, 246, 0.18), transparent 55%),
        radial-gradient(circle at 100% 0, rgba(236, 72, 153, 0.12), transparent 55%);
      opacity: 0.7;
      pointer-events: none;
      z-index: 0;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 18px;
      gap: 12px;
    }

    .title-block { display:flex; flex-direction:column; gap:4px }
    h1 { font-size:1.25rem; letter-spacing:.03em; display:flex; align-items:center; gap:8px; color:#9ca3af }
    .pill { font-size:.7rem; text-transform:uppercase; padding:3px 8px; border-radius:999px }
    .subtitle { font-size:.8rem; color:var(--text-muted) }
    .badge { padding:6px 10px; border-radius:999px; font-size:.75rem }
/* (end of edge_template CSS) */

/* menu.css content (migrated) */
.menu {
  overflow: hidden;
  background-color: #333;
  position: relative;
  left: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  padding-left: 24px;
  padding-right: 24px; /* align with body padding */
}
.menu a { display: inline-block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }
.menu a:hover { background-color: #ddd; color: black; }
.menu a.active { background-color: #4CAF50; color: white; }

/* ensure card can be large on some pages */
.card { max-width: 1200px; }