/* ========= CSS Variables ========= */
:root{
  --blue:#2196F3; --blue-600:#1976D2;
  --green:#4CAF50; --green-700:#2E7D32;
  --bg:#0b1117; --card:#111827; --card-2:#0f1722;
  --text:#E5E7EB; --text-strong:#F9FAFB; --muted:#9CA3AF;
  --border:rgba(255,255,255,.12); --ring:rgba(33,150,243,.35);
  --shadow:0 10px 25px rgba(0,0,0,.35); --shadow-soft:0 6px 18px rgba(0,0,0,.25);
  --radius:14px; --radius-sm:10px; --focus:#FFB300;
}
[data-theme="light"]{
  --bg:#f5f7fb; --card:#ffffff; --card-2:#ffffff; --text:#1f2937; --text-strong:#0b1321; --muted:#6b7280;
  --border:rgba(2,6,23,.10); --shadow:0 10px 26px rgba(2,6,23,.08); --shadow-soft:0 6px 18px rgba(2,6,23,.06);
}
[data-contrast="high"]{ --ring:rgba(255,179,0,.6); --border:currentColor }

/* ========= Base ========= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1400px 600px at 10% -10%, rgba(33,150,243,.14), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(76,175,80,.10), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:8px }

/* ========= NAVBAR (Responsive + Dropdown) ========= */
.navbar{
  position:sticky; top:0; z-index:999;
  background: linear-gradient(180deg, rgba(0,0,0,.28), transparent),
              linear-gradient(90deg, rgba(33,150,243,.55), rgba(76,175,80,.45));
  border-bottom:1px solid var(--border); backdrop-filter:blur(6px);
}
.nav-inner{ max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; position:relative }
.brand{ color:#fff; text-decoration:none; font-weight:800 }

/* hamburger */
.hamburger{
  display:none; width:42px; height:36px; border:1px solid rgba(255,255,255,.35);
  background:transparent; color:#fff; border-radius:10px; cursor:pointer
}

/* links row */
.nav-links{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.nav-links a{
  color:#fff; text-decoration:none; padding:8px 10px; border-radius:10px; border:1px solid transparent; transition:.18s;
}
.nav-links a.active{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.25) }

/* dropdown */
.nav-dropdown{ position:relative }
.nav-dropbtn{
  padding:8px 10px; border-radius:10px; border:1px solid transparent; background:transparent; color:#fff;
  cursor:pointer; font-weight:700;
}
.nav-dropbtn:hover{ background:rgba(255,255,255,.12) }
.nav-dropdown-menu{
  display:none; position:absolute; top:110%; left:0; min-width:240px; z-index:1000;
  background:rgba(0,0,0,.6); backdrop-filter:blur(6px);
  border:1px solid var(--border); border-radius:12px; padding:6px; box-shadow:var(--shadow);
}
.nav-dropdown.open > .nav-dropdown-menu{ display:block }
.nav-dropdown-menu a{ display:block; padding:8px 10px; color:#fff; text-decoration:none; border-radius:8px }
.nav-dropdown-menu a:hover{ background:rgba(255,255,255,.16) }

/* actions (toggles) */
.nav-actions{ display:flex; align-items:center; gap:10px }
.switch{ position:relative; width:48px; height:26px; background:rgba(255,255,255,.35); border-radius:999px; cursor:pointer; outline:none; border:2px solid transparent }
.switch::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:999px; background:#fff; transition:left .18s ease, transform .18s ease }
.switch.on{ background:#111; border-color:#fff }
.switch.on::after{ left:25px }
.toggle-wrap{ display:flex; align-items:center; gap:6px; color:#fff; font-weight:700 }

/* Mobile: collapse menu */
@media (max-width:900px){
  .hamburger{ display:block }
  .nav-links{
    display:none; flex-direction:column; align-items:stretch;
    position:absolute; left:12px; right:12px; top:62px;
    background:rgba(0,0,0,.35); border:1px solid var(--border); border-radius:12px; padding:8px; z-index:999;
  }
  .nav-links.show{ display:flex }
  .nav-dropdown-menu{ position:static; min-width:unset; background:transparent; border:none; box-shadow:none; padding:4px 0; background-color: #000; }
}

/* ========= Layout / Panels / Cards (kept from previous) ========= */
main{ display:flex; justify-content:center; padding:16px }
.container{ width:100%; max-width:1200px; display:grid; gap:16px; grid-template-columns:1fr }
.row{ display:grid; gap:16px; grid-template-columns:1fr }
@media(min-width:980px){ .row{ grid-template-columns:2fr 1fr } }

.panel{ background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden }
.panel-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); border-bottom:1px solid var(--border) }
.panel-header h2{ margin:0; font-size:16px; color:var(--text-strong) }

.form{ display:grid; gap:12px; padding:14px }
@media(min-width:900px){ .form.grid-5{ grid-template-columns:2fr 1fr 1fr 1fr 1fr; align-items:end } }

label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px }
input[type="text"], select, textarea{
  width:100%; padding:11px 12px; border-radius:12px; background:var(--card-2); color:var(--text);
  border:1px solid var(--border); outline:none; transition:.2s ease;
}
input::placeholder, textarea::placeholder{ color:#9aa4b2 }
input:focus, select:focus, textarea:focus{ border-color:var(--blue); box-shadow:0 0 0 6px var(--ring) }

.actions{ display:flex; gap:10px; flex-wrap:wrap; padding:0 14px 14px }
.btn{ padding:11px 14px; border:none; border-radius:12px; cursor:pointer; font-weight:800; letter-spacing:.3px; display:inline-flex; align-items:center; gap:8px; transition:transform .08s ease, box-shadow .18s ease, background .18s ease }
.btn-primary{ background:linear-gradient(180deg, var(--blue), var(--blue-600)); color:#fff; box-shadow:0 10px 22px rgba(33,150,243,.35) }
.btn-primary:active{ transform: translateY(2px) scale(.98) }
.btn-secondary{ background:linear-gradient(180deg, var(--green), var(--green-700)); color:#fff; box-shadow:0 10px 22px rgba(76,175,80,.30) }
.btn-ghost{ background:var(--card-2); color:var(--text); border:1px solid var(--border) }

.pill{ display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; background:rgba(33,150,243,.14); color:#CFE8FF; border:1px solid rgba(33,150,243,.28); font-size:12px }
.error{ display:none; margin:0 14px 14px; padding:10px 12px; border-radius:10px; background:rgba(239,83,80,.12); color:#ffc6c4; border:1px solid rgba(239,83,80,.35); font-size:13px }
.error.show{ display:block }

.grid{ display:grid; gap:12px; padding:10px 10px 16px; grid-template-columns:1fr }
@media(min-width:720px){ .grid{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1060px){ .grid{ grid-template-columns:repeat(3,1fr) } }
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; box-shadow:var(--shadow-soft); position:relative }
.k{ font-size:12px; color:var(--muted) }
.v{ font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace; font-size:14px; color:var(--text-strong); word-break:break-word }
.copy{ position:absolute; top:10px; right:10px; font-size:12px; padding:4px 8px; border-radius:8px; border:1px solid var(--border); background:var(--card-2); color:#cfe8ff; cursor:pointer }
.copied{ animation:pop .32s ease }
@keyframes pop{ 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)} }

/* Bits grid */
.bits{ display:grid; grid-template-columns:repeat(32,1fr); gap:4px; padding:10px 12px }
.bit{ text-align:center; padding:6px 0; background:var(--card-2); border:1px solid var(--border); border-radius:8px; font:600 12px/1 ui-monospace, Menlo }
.bit.net{ background:linear-gradient(180deg, rgba(33,150,243,.35), rgba(33,150,243,.18)); color:#fff; border-color:rgba(33,150,243,.5) }
.bit.host{ background:linear-gradient(180deg, rgba(76,175,80,.28), rgba(76,175,80,.14)); border-color:rgba(76,175,80,.38) }

/* Footer */
footer{
  max-width:auto; margin:18px auto; padding:10px 14px; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
}
.shortcuts{ font-size:12px }
.help-links a{ margin-right:12px; color:var(--blue) }

/* Print */
@media print{
  body{ background:#fff; color:#000 }
  .navbar, .actions, .copy, .switch, .help-links{ display:none !important }
  .panel, .card{ box-shadow:none }
}
/* ===== Responsive Footer ===== */
.site-footer{
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.ft-inner{
  max-width:auto; margin:0 auto; padding:14px 14px;
  display:grid; gap:18px;
}
.ft-brand{ display:flex; flex-direction:column; gap:6px }
.ft-logo{ font-weight:900; color:var(--text-strong); text-decoration:none }
.ft-tagline{ margin:0; color:var(--muted); font-size:13px }

.ft-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(5, minmax(0,1fr));
}
@media (max-width:980px){ .ft-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:620px){ .ft-grid{ grid-template-columns:1fr } }

.ft-col{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px }
.ft-head{
  width:100%; text-align:left; background:transparent; color:var(--text-strong);
  border:none; font-weight:800; padding:8px; border-radius:10px; cursor:pointer;
  position:relative;
}
.ft-head::after{
  content:"▾"; position:absolute; right:10px; top:8px; transition:transform .18s ease;
}
.ft-head[aria-expanded="true"]::after{ transform:rotate(180deg) }
.ft-links{ list-style:none; margin:6px 0 0; padding:0; display:block }
.ft-links li{ margin:4px 0 }
.ft-links a{ color:var(--text); text-decoration:none; padding:6px 8px; display:inline-block; border-radius:8px }
.ft-links a:hover{ background:rgba(255,255,255,.08) }

/* Only collapse sections on small screens */
@media (max-width:620px){
  .ft-links{ display:none }
  .ft-col.open .ft-links{ display:block }
}

.ft-bottom{
  border-top:1px solid var(--border); padding-top:12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  color:var(--muted); font-size:13px;
}
.ft-social{ display:flex; gap:8px }
.ft-ico{ width:36px; height:36px; border-radius:999px; display:grid; place-items:center;
  color:#fff; background:rgba(255,255,255,.12); border:1px solid var(--border); text-decoration:none;
}
.ft-ico:hover{ background:rgba(255,255,255,.18) }

/* Back-to-top */
.back-to-top{
  position:fixed; right:16px; bottom:16px; width:44px; height:44px; border-radius:999px;
  border:1px solid var(--border); background:var(--card); color:var(--text-strong);
  box-shadow:var(--shadow-soft); cursor:pointer; display:none;
}
.back-to-top.show{ display:grid; place-items:center }

/* Print */
@media print{ .site-footer, .back-to-top{ display:none !important } }

/* Pills/Badges variants */
.pill-info{ background:rgba(33,150,243,.14); color:#cfe8ff; border:1px solid rgba(33,150,243,.28) }