/* dnslookuptool.net — single stylesheet, no framework */

:root{
  --bg:#0b1120;
  --bg-alt:#111a2e;
  --card:#141f38;
  --border:#22304f;
  --text:#e7ecf7;
  --text-dim:#a6b1c9;
  --accent:#4f8cff;
  --accent-2:#38d9a9;
  --danger:#ff6b6b;
  --warn:#ffb84f;
  --radius:10px;
  --max:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* Header */
.site-header{
  background:var(--bg-alt);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{font-weight:700;font-size:1.15rem;color:var(--text);white-space:nowrap}
.logo span{color:var(--accent)}

/* Nav: logo left, menu right */
.site-nav{display:flex;align-items:center;gap:4px}
.nav-link{
  padding:10px 14px;border-radius:8px;
  color:var(--text-dim);font-size:.92rem;font-weight:600;
  text-decoration:none;white-space:nowrap;
}
.nav-link:hover{background:var(--card);color:var(--text);text-decoration:none}

.nav-dropdown{position:relative}
.nav-dropdown summary{
  list-style:none;cursor:pointer;
  padding:10px 14px;border-radius:8px;
  color:var(--text-dim);font-size:.92rem;font-weight:600;
  display:flex;align-items:center;gap:6px;user-select:none;
  white-space:nowrap;
}
.nav-dropdown summary::-webkit-details-marker{display:none}
.nav-dropdown summary::marker{content:""}
.nav-dropdown summary::after{content:"";flex:none;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-top:-4px;opacity:.7}
.nav-dropdown summary:hover{background:var(--card);color:var(--text)}
.nav-dropdown[open] summary{background:var(--card);color:var(--text)}
.nav-dropdown[open] summary::after{transform:rotate(225deg) translateY(2px);margin-top:2px}

.dropdown-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:230px;
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:8px;box-shadow:0 16px 32px rgba(0,0,0,.4);z-index:200;
}
.dropdown-menu a{
  display:block;padding:10px 12px;border-radius:6px;
  color:var(--text-dim);font-size:.88rem;text-decoration:none;
  white-space:nowrap;
}
.dropdown-menu a:hover{background:var(--bg);color:var(--accent)}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;flex-shrink:0}
.nav-toggle span{width:24px;height:2px;background:var(--text)}

/* Hero / tool card */
.hero{padding:48px 0 8px;text-align:center}
.hero h1{font-size:clamp(1.6rem,3vw,2.4rem);margin:0 0 10px}
.hero p{color:var(--text-dim);max-width:640px;margin:0 auto}

.tool-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  margin:28px auto;
  max-width:720px;
}
.tool-card-wide{max-width:900px}
.lookup-form{display:flex;gap:10px;flex-wrap:wrap}
.lookup-form input[type=text]{
  flex:1 1 260px;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--text);
  font-size:1rem;
}
.lookup-form input[type=text]:focus{outline:2px solid var(--accent)}
select{
  padding:12px 14px;border-radius:8px;border:1px solid var(--border);
  background:var(--bg);color:var(--text);font-size:1rem;
}
button, .btn{
  padding:12px 20px;
  border-radius:8px;
  border:0;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  font-size:1rem;
}
button:hover, .btn:hover{background:#3d78ec;text-decoration:none}
.btn-secondary{background:var(--bg-alt);border:1px solid var(--border);color:var(--text)}
.btn-secondary:hover{background:var(--card)}
.field-hint{font-size:.82rem;color:var(--text-dim);margin-top:6px}

/* Record-type chip selector (DNS Lookup "ALL" mode) */
.type-selector{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.type-chip{
  padding:7px 14px;border-radius:99px;border:1px solid var(--border);
  background:var(--bg);color:var(--text-dim);font-size:.85rem;font-weight:600;
  cursor:pointer;text-decoration:none;display:inline-block;
}
.type-chip:hover{border-color:var(--accent);color:var(--text);text-decoration:none}
.type-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* Quick jump nav above multi-section results */
.jump-nav{
  display:flex;flex-wrap:wrap;gap:6px 14px;
  padding:12px 16px;margin-bottom:16px;
  background:var(--bg-alt);border:1px solid var(--border);border-radius:8px;
  font-size:.85rem;
}
.jump-nav span{color:var(--text-dim);margin-right:4px}
.jump-nav a{color:var(--accent)}

/* Long-form informational content (dns-info sections) */
.info-block{max-width:820px;margin:20px auto 0;color:var(--text-dim);font-size:.94rem}
.info-block h2{color:var(--text);font-size:1.3rem;margin:36px 0 12px}
.info-block h3{color:var(--text);font-size:1.05rem;margin:22px 0 8px}
.info-block p{margin:0 0 14px}
.info-block ul, .info-block ol{margin:0 0 14px;padding-left:22px}
.info-block li{margin-bottom:6px}
.info-block code{background:var(--bg-alt);border:1px solid var(--border);padding:1px 6px;border-radius:4px;font-size:.88em}
.faq-item{border-top:1px solid var(--border);padding:16px 0}
.faq-item:first-child{border-top:0}
.faq-item h3{margin:0 0 8px}

/* Results */
.results{margin-top:26px}
.result-block{
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:16px;
  overflow:hidden;
}
.result-block h2, .result-block h3{
  margin:0;padding:12px 16px;font-size:.95rem;
  background:#0f1830;border-bottom:1px solid var(--border);
}
table{width:100%;border-collapse:collapse;font-size:.88rem}
table td, table th{padding:10px 16px;border-bottom:1px solid var(--border);text-align:left;word-break:break-word}
table tr:last-child td{border-bottom:0}
.empty-note{padding:14px 16px;color:var(--text-dim);font-size:.88rem}

.badge{display:inline-block;padding:3px 9px;border-radius:99px;font-size:.72rem;font-weight:700}
.badge-ok{background:rgba(56,217,169,.15);color:var(--accent-2)}
.badge-warn{background:rgba(255,184,79,.15);color:var(--warn)}
.badge-bad{background:rgba(255,107,107,.15);color:var(--danger)}

.error-box{
  background:rgba(255,107,107,.1);
  border:1px solid rgba(255,107,107,.3);
  color:var(--danger);
  padding:12px 16px;border-radius:8px;margin-top:16px;font-size:.9rem;
}

.health-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:16px}
.health-item{background:var(--bg-alt);border:1px solid var(--border);border-radius:8px;padding:14px}
.health-item .label{font-size:.85rem;color:var(--text-dim);margin-bottom:6px}
.score-circle{
  width:90px;height:90px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;font-weight:700;margin:0 auto 10px;
  border:4px solid var(--accent-2);
}

/* Password tools */
.pw-output{
  display:flex;gap:8px;margin-top:16px;
}
.pw-output input{flex:1;font-family:ui-monospace,Menlo,Consolas,monospace}
.strength-bar{height:8px;border-radius:99px;background:var(--bg);margin-top:14px;overflow:hidden}
.strength-fill{height:100%;width:0;background:var(--danger);transition:width .25s,background .25s}
.strength-label{margin-top:8px;font-size:.9rem;color:var(--text-dim)}
.pw-options{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px;font-size:.9rem;color:var(--text-dim)}
.pw-options label{display:flex;align-items:center;gap:6px}
.range-row{display:flex;align-items:center;gap:12px;margin-top:14px}

/* Content / intro text below tools */
.about-block{max-width:720px;margin:36px auto 0;color:var(--text-dim);font-size:.93rem}
.about-block h2{color:var(--text);font-size:1.1rem}

/* Footer */
.site-footer{border-top:1px solid var(--border);margin-top:60px;padding:30px 0;background:var(--bg-alt)}
.footer-inner{text-align:center}
.footer-brand{font-weight:700;margin:0 0 6px}
.footer-note{color:var(--text-dim);font-size:.85rem;margin:0 0 14px}
.footer-links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.footer-links a{color:var(--text-dim);font-size:.85rem}
.footer-copy{color:var(--text-dim);font-size:.8rem;margin:0}

@media (max-width:760px){
  .site-nav{
    position:absolute;top:64px;left:0;right:0;
    background:var(--bg-alt);
    border-bottom:1px solid var(--border);
    flex-direction:column;align-items:stretch;gap:2px;
    padding:10px;
    display:none;
    max-height:calc(100vh - 64px);overflow-y:auto;
  }
  .site-nav.open{display:flex}
  .nav-toggle{display:flex}
  .nav-link{padding:12px}
  .nav-dropdown summary{padding:12px}
  .dropdown-menu{
    position:static;box-shadow:none;border:0;background:transparent;
    margin-top:0;padding:0 0 6px 14px;
  }
  .lookup-form{flex-direction:column}
  .lookup-form button{width:100%}
}