:root {
  --bg:     #0a0d0f;
  --bg2:    #0f1417;
  --bg3:    #141b20;
  --border: #1e2d35;
  --border2:#243642;
  --accent: #00d4aa;
  --accent2:#00a882;
  --accent3:#ff6b35;
  --text:   #c8d8e0;
  --text2:  #7a9aaa;
  --text3:  #4a6a7a;
  --green:  #39d353;
  --yellow: #f0c040;
  --red:    #ff5555;
  --blue:   #58a6ff;
  --purple: #bc8cff;
  --mono:   'JetBrains Mono', monospace;
  --sans:   'Syne', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:var(--mono); font-size:14px; line-height:1.6; min-height:100vh; }
body::before { content:''; position:fixed; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px); pointer-events:none; z-index:1; }

header { border-bottom:1px solid var(--border); padding:1rem 2rem; display:flex; align-items:center; justify-content:space-between; background:var(--bg2); position:sticky; top:0; z-index:100; }
.logo { font-family:var(--mono); font-weight:700; font-size:1.05rem; line-height:1.5; color:var(--accent); letter-spacing:-0.02em; display:flex; align-items:baseline; gap:8px; text-decoration:none; }
.logo:hover { color:var(--accent); }
.logo-dot { color:var(--accent3); }
.logo-sub { font-family:var(--mono); font-size:0.7rem; color:var(--text3); font-weight:300; }
.header-tag { font-size:0.7rem; color:var(--text3); border:1px solid var(--border2); padding:2px 8px; border-radius:2px; }

.tab-bar { display:flex; border-bottom:1px solid var(--border); background:var(--bg2); padding:0 2rem; overflow-x:auto; }
.tab { padding:12px 20px; font-family:var(--mono); font-size:0.75rem; color:var(--text3); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition:all 0.15s; user-select:none; letter-spacing:0.05em; text-transform:uppercase; text-decoration:none; }
.tab:hover { color:var(--text); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }

.subtab-bar { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:1.5rem; overflow-x:auto; }
.subtab { padding:8px 14px; font-family:var(--mono); font-size:0.68rem; color:var(--text3); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition:all 0.15s; user-select:none; letter-spacing:0.05em; text-transform:uppercase; opacity:0.75; text-decoration:none; }
.subtab:hover { color:var(--text2); opacity:1; }
.subtab.active { color:var(--accent); border-bottom-color:var(--accent); opacity:1; }
.subpanel { display:none; }
.subpanel.active { display:block; }

.content { max-width:1100px; margin:0 auto; padding:2rem; }
.panel { display:none; }
.panel.active { display:block; }

.section-title { font-family:var(--sans); font-size:0.65rem; font-weight:700; color:var(--text3); letter-spacing:0.15em; text-transform:uppercase; margin-bottom:1rem; display:flex; align-items:center; gap:8px; }
.section-title::after { content:''; flex:1; height:1px; background:var(--border); }

.card { background:var(--bg2); border:1px solid var(--border); border-radius:4px; padding:1.5rem; margin-bottom:1.5rem; }

.form-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; margin-bottom:1rem; }
.form-group { display:flex; flex-direction:column; gap:4px; }
label { font-size:0.7rem; color:var(--text3); letter-spacing:0.08em; text-transform:uppercase; }
input, select, textarea { background:var(--bg3); border:1px solid var(--border2); color:var(--text); font-family:var(--mono); font-size:0.85rem; padding:8px 10px; border-radius:3px; outline:none; transition:border-color 0.15s; }
input:focus, select:focus, textarea:focus { border-color:var(--accent); }
input::placeholder, textarea::placeholder { color:var(--text3); }
select option { background:var(--bg3); }
textarea { resize:vertical; min-height:80px; }

.btn { font-family:var(--mono); font-size:0.75rem; padding:8px 16px; border:none; border-radius:3px; cursor:pointer; letter-spacing:0.05em; text-transform:uppercase; transition:all 0.15s; }
.btn-primary { background:var(--accent); color:var(--bg); font-weight:700; }
.btn-primary:hover { background:var(--accent2); }
.btn-copy { background:transparent; border:1px solid var(--border2); color:var(--text2); padding:4px 8px; font-size:0.65rem; }
.btn-copy:hover { border-color:var(--accent); color:var(--accent); }
.btn-copy.copied { border-color:var(--green); color:var(--green); }

.result-box { background:var(--bg3); border:1px solid var(--border2); border-left:3px solid var(--accent); border-radius:3px; padding:1rem 1.25rem; margin-top:1rem; }
.result-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0.75rem; }
.result-item { display:flex; flex-direction:column; gap:4px; }
.result-label { font-size:0.65rem; color:var(--text3); text-transform:uppercase; letter-spacing:0.1em; }
.result-row { display:flex; align-items:center; gap:6px; }
.result-value { font-size:0.9rem; color:var(--accent); font-weight:500; }
.result-value.green { color:var(--green); }
.result-value.yellow { color:var(--yellow); }
.result-value.blue { color:var(--blue); }

.cmd-output { background:var(--bg3); border:1px solid var(--border2); border-left:3px solid var(--accent3); border-radius:3px; padding:1rem 1.25rem; margin-top:1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.cmd-text { font-size:0.9rem; color:var(--accent3); word-break:break-all; flex:1; }
.cmd-prompt { color:var(--text3); margin-right:6px; }

.cidr-table { width:100%; border-collapse:collapse; font-size:0.8rem; }
.cidr-table th { text-align:left; padding:8px 12px; font-size:0.65rem; color:var(--text3); text-transform:uppercase; letter-spacing:0.1em; border-bottom:1px solid var(--border); font-weight:400; }
.cidr-table td { padding:7px 12px; border-bottom:1px solid var(--border); font-family:var(--mono); }
.cidr-table tr:hover td { background:var(--bg3); }
.cidr-table tr.rfc1918 td { color:var(--green); }
.cidr-table .cidr-col { color:var(--accent); font-weight:500; }
.cidr-table .hosts-col { color:var(--text2); }

.rfc-badge { font-size:0.6rem; background:rgba(57,211,83,0.1); color:var(--green); border:1px solid rgba(57,211,83,0.3); padding:1px 5px; border-radius:2px; margin-left:6px; vertical-align:middle; }

.cmd-group { margin-bottom:1.5rem; }
.cmd-group-title { font-size:0.65rem; color:var(--accent3); text-transform:uppercase; letter-spacing:0.15em; margin-bottom:0.75rem; padding-bottom:4px; border-bottom:1px solid var(--border); }
.cmd-row { display:flex; align-items:flex-start; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(30,45,53,0.5); gap:1rem; }
.cmd-row:last-child { border-bottom:none; }
.cmd-info { flex:1; }
.cmd-desc { font-size:0.75rem; color:var(--text2); margin-bottom:3px; }
.cmd-snippet { font-size:0.8rem; color:var(--accent3); }

.search-bar { display:flex; gap:0.5rem; margin-bottom:1rem; }
.search-bar input { flex:1; }

.ip-tools-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }

.range-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.range-card { background:var(--bg3); border:1px solid var(--border2); border-radius:3px; padding:1rem; }
.range-card h4 { font-size:0.7rem; color:var(--text3); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:0.5rem; }
.range-value { font-size:0.9rem; color:var(--green); margin-bottom:2px; }
.range-detail { font-size:0.75rem; color:var(--text3); }

.check-row { display:flex; align-items:center; gap:8px; margin-bottom:0.5rem; }
.check-row input[type="checkbox"] { width:14px; height:14px; accent-color:var(--accent); padding:0; }
.check-row label { text-transform:none; letter-spacing:0; font-size:0.8rem; color:var(--text2); }

.speedtest-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.25rem; }
.speedtest-card { background:var(--bg2); border:1px solid var(--border); border-radius:4px; padding:1.25rem; display:flex; flex-direction:column; gap:0.75rem; transition:border-color 0.15s; }
.speedtest-card:hover { border-color:var(--border2); }
.speedtest-header { display:flex; align-items:center; gap:10px; }
.speedtest-icon { width:32px; height:32px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.speedtest-name { font-family:var(--sans); font-weight:700; font-size:0.95rem; color:var(--text); }
.speedtest-url { font-size:0.7rem; color:var(--text3); }
.speedtest-desc { font-size:0.78rem; color:var(--text2); line-height:1.6; flex:1; }
.speedtest-tags { display:flex; gap:6px; flex-wrap:wrap; }
.tag { font-size:0.6rem; padding:2px 7px; border-radius:2px; border:1px solid var(--border2); color:var(--text3); text-transform:uppercase; letter-spacing:0.08em; }
.tag.green { border-color:rgba(57,211,83,0.3); color:var(--green); background:rgba(57,211,83,0.05); }
.tag.blue { border-color:rgba(88,166,255,0.3); color:var(--blue); background:rgba(88,166,255,0.05); }
.tag.orange { border-color:rgba(255,107,53,0.3); color:var(--accent3); background:rgba(255,107,53,0.05); }
.btn-launch { display:inline-block; font-family:var(--mono); font-size:0.75rem; padding:8px 14px; border-radius:3px; cursor:pointer; letter-spacing:0.05em; text-transform:uppercase; transition:all 0.15s; text-decoration:none; text-align:center; background:transparent; border:1px solid var(--border2); color:var(--text2); }
.btn-launch:hover { border-color:var(--accent); color:var(--accent); }

/* Home tool grid */
.home-hero { margin-bottom:1.5rem; }
.home-hero h1 { font-family:var(--sans); font-weight:800; font-size:1.6rem; color:var(--text); letter-spacing:-0.02em; margin-bottom:0.5rem; }
.home-hero h1 .dot { color:var(--accent3); }
.home-hero h1 .accent { color:var(--accent); }
.home-hero p { font-size:0.85rem; color:var(--text2); line-height:1.7; max-width:760px; }
.site-map { display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem 2.5rem; margin-bottom:2rem; }
.site-map-col { display:flex; flex-direction:column; gap:0.25rem; }
.site-map-header { font-family:var(--sans); font-size:0.75rem; font-weight:700; color:var(--accent); letter-spacing:0.15em; text-transform:uppercase; padding:0.6rem 0; border-top:1px solid var(--border); cursor:pointer; transition:color 0.15s; text-decoration:none; display:block; }
.site-map-header:hover { color:var(--accent2); }
.site-map-link { font-family:var(--mono); font-size:0.85rem; color:var(--text); padding:0.4rem 0; cursor:pointer; transition:color 0.15s; display:block; text-decoration:none; }
.site-map-link:hover { color:var(--accent); }
.site-map-note { font-family:var(--mono); font-size:0.75rem; color:var(--text3); padding:0.4rem 0; line-height:1.6; }
@media (max-width: 900px) { .site-map { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 600px) { .site-map { grid-template-columns:1fr; } }

/* AdSense slots */
.ad-slot { background:var(--bg2); border:1px dashed var(--border2); border-radius:4px; padding:1rem; text-align:center; color:var(--text3); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:1.5rem; min-height:90px; display:flex; align-items:center; justify-content:center; }

/* Feature request */
.captcha-box { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.captcha-question { color:var(--accent3); font-size:0.9rem; }
.captcha-input { width:80px; }
.submit-msg { margin-top:0.75rem; font-size:0.8rem; display:none; }
.submit-msg.success { color:var(--green); display:block; }
.submit-msg.error { color:var(--red); display:block; }

.status-dot { display:inline-block; width:6px; height:6px; background:var(--green); border-radius:50%; margin-right:4px; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

footer { border-top:1px solid var(--border); padding:1.5rem 2rem; text-align:center; font-size:0.7rem; color:var(--text3); margin-top:3rem; display:flex; flex-direction:column; align-items:center; gap:0.4rem; }
.footer-tagline { color:var(--text3); }
.footer-links { color:var(--text3); }
.footer-links a { color:var(--text3); text-decoration:none; }
.footer-links a:hover { text-decoration:underline; color:var(--text2); }
@media(min-width:700px) {
  footer { flex-direction:row; justify-content:center; gap:1rem; }
}

@media(max-width:700px) {
  .ip-tools-grid { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  header { padding:0 1rem; }
  .tab-bar { padding:0 1rem; }
  .content { padding:1rem; }
  .logo-sub { display:none; }
}