:root{
  --bg:#f7f6f2; --surface:#f9f8f5; --surface2:#fbfbf9; --offset:#f3f0ec;
  --border:#d4d1ca; --text:#28251d; --muted:#7a7974; --faint:#bab9b4;
  --primary:#01696f; --primary-hover:#0c4e54; --primary-hl:#cedcd8;
  --warn:#964219; --warn-hl:#ddcfc6; --err:#a12c7b; --err-hl:#e0ced7;
  --success:#437a22; --success-hl:#d4dfcc;
  --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.75rem; --radius-xl:1rem; --radius-full:9999px;
  --sh-sm:0 1px 2px rgba(40,37,29,.06); --sh-md:0 4px 12px rgba(40,37,29,.08); --sh-lg:0 12px 32px rgba(40,37,29,.12);
}
[data-theme="dark"]{
  --bg:#171614; --surface:#1c1b19; --surface2:#201f1d; --offset:#1d1c1a;
  --border:#393836; --text:#cdccca; --muted:#797876; --faint:#5a5957;
  --primary:#4f98a3; --primary-hover:#227f8b; --primary-hl:#313b3b;
  --warn:#bb653b; --warn-hl:#564942; --err:#d163a7; --err-hl:#4c3d46;
  --success:#6daa45; --success-hl:#3a4435;
  --sh-sm:0 1px 2px rgba(0,0,0,.2); --sh-md:0 4px 12px rgba(0,0,0,.3); --sh-lg:0 12px 32px rgba(0,0,0,.4);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
body{min-height:100dvh;font-family:'Work Sans',system-ui,sans-serif;font-size:16px;line-height:1.6;color:var(--text);background:var(--bg);}
a,button{transition:color .18s cubic-bezier(.16,1,.3,1),background .18s cubic-bezier(.16,1,.3,1),border-color .18s cubic-bezier(.16,1,.3,1),box-shadow .18s cubic-bezier(.16,1,.3,1);}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--radius-sm);}

.wrap{max-width:1400px;margin-inline:auto;padding:clamp(1.5rem,4vw,3rem) clamp(1rem,4vw,2rem);}
header{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:.6rem;}
.brand svg{color:var(--primary);}
h1{font-size:clamp(1.4rem,3vw,1.8rem);font-weight:700;letter-spacing:-0.01em;}
.subtitle{color:var(--muted);font-size:.9rem;margin-top:.15rem;}

.theme-toggle{width:40px;height:40px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);}
.theme-toggle:hover{background:var(--offset);}

.status-bar{display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border);font-size:.85rem;color:var(--muted);flex:1;min-width:220px;justify-content:center;}
.dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--faint);flex-shrink:0;}
.dot.ok{background:var(--success);}
.dot.loading{background:var(--warn);animation:pulse 1.2s infinite;}
.dot.error{background:var(--err);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:1rem;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;box-shadow:var(--sh-sm);}
.card h2{font-size:.95rem;font-weight:600;display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem;color:var(--text);}
.card h2 svg{color:var(--primary);width:18px;height:18px;flex-shrink:0;}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;padding:.45rem 0;border-bottom:1px solid var(--border);font-size:.88rem;}
.row:last-child{border-bottom:none;}
.row .label{color:var(--muted);flex-shrink:0;}
.row .value{font-family:'JetBrains Mono',monospace;text-align:right;word-break:break-all;color:var(--text);}
.row .value.skeleton{width:60%;height:1em;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--offset) 25%,var(--border) 50%,var(--offset) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;}
@keyframes shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}

.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .65rem;border-radius:var(--radius-full);font-size:.78rem;font-weight:600;}
.badge.success{background:var(--success-hl);color:var(--success);}
.badge.warn{background:var(--warn-hl);color:var(--warn);}
.badge.error{background:var(--err-hl);color:var(--err);}
.badge.neutral{background:var(--offset);color:var(--muted);}

.error-banner{display:none;align-items:flex-start;gap:.75rem;background:var(--err-hl);border:1px solid var(--err);color:var(--err);border-radius:var(--radius-md);padding:1rem;margin-bottom:1.5rem;font-size:.9rem;}
.error-banner.show{display:flex;}
.error-banner svg{flex-shrink:0;margin-top:2px;}
.retry-btn{margin-left:auto;padding:.4rem .9rem;border-radius:var(--radius-md);background:var(--err);color:#fff;font-size:.82rem;font-weight:600;flex-shrink:0;}
.retry-btn:hover{opacity:.88;}

footer{margin-top:2rem;text-align:center;color:var(--faint);font-size:.78rem;}
footer a{color:var(--muted);}

.speed-card{display:flex;flex-direction:column;}
.speed-progress{width:100%;height:6px;border-radius:var(--radius-full);background:var(--offset);overflow:hidden;margin-top:.75rem;}
.speed-progress-bar{height:100%;width:0%;background:var(--primary);border-radius:var(--radius-full);transition:width .3s ease;}
.speed-status{font-size:.8rem;color:var(--muted);margin-top:.6rem;min-height:1.2em;}
.speed-btn{margin-top:.75rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1rem;border-radius:var(--radius-md);background:var(--primary);color:#fff;font-size:.85rem;font-weight:600;width:100%;}
.speed-btn:hover{background:var(--primary-hover);}
.speed-btn:disabled{opacity:.5;cursor:not-allowed;}
.speed-btn svg{flex-shrink:0;}

.whois-form{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.5rem;}
.whois-input{flex:1;min-width:200px;padding:.65rem .9rem;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:.9rem;font-family:'JetBrains Mono',monospace;}
.whois-input:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.whois-btn{width:auto;margin-top:0;padding:.65rem 1.1rem;flex-shrink:0;}
.whois-status{font-size:.85rem;color:var(--muted);margin-top:.6rem;min-height:1.2em;}
.whois-status.error{color:var(--err);}
.whois-results{margin-top:.75rem;border-top:1px solid var(--border);padding-top:.5rem;}
.subnet-form{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:.5rem;}
.subnet-inputs{display:flex;align-items:center;gap:.4rem;flex:1;min-width:200px;}
.subnet-ip{flex:2;min-width:120px;}
.subnet-prefix{flex:0 0 60px;min-width:50px;text-align:center;}
.subnet-slash{font-family:'JetBrains Mono',monospace;font-size:1.1rem;color:var(--muted);font-weight:600;}
.subnet-output{font-family:'JetBrains Mono',monospace;font-size:.85rem;line-height:1.7;white-space:pre;color:var(--text);background:var(--offset);border-radius:var(--radius-md);padding:.8rem 1rem;overflow-x:auto;}

@media (max-width:480px){
  .subnet-form{flex-direction:column;}
  .subnet-inputs{width:100%;}
  .whois-form{flex-direction:column;}
  .whois-btn{width:100%;}
  .row{flex-direction:column;align-items:flex-start;gap:.15rem;}
  .row .value{text-align:left;}
}