/* Shieldome Tools - shared design system */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --bg:     #0d1117;
  --bg2:    #161b22;
  --bg3:    #1c2128;
  --border: #30363d;
  --bd2:    #21262d;
  --t1:     #e6edf3;
  --t2:     #8b949e;
  --t3:     #484f58;
  --acc:    #6366f1;
  --acc2:   #4f46e5;
  --green:  #22c55e;
  --yellow: #f59e0b;
  --red:    #ef4444;
  --orange: #fb923c;
  --blue:   #3b82f6;
  --purple: #a78bfa;
  --teal:   #2dd4bf;
}
body { background:var(--bg); color:var(--t1); font-family:'Inter',sans-serif; min-height:100vh; margin:0; padding:0; font-size:14px; line-height:1.5; }

/* ── Topbar ── */
.topbar { display:flex; align-items:center; justify-content:space-between; padding:.65rem 1.25rem; border-bottom:1px solid var(--bd2); background:var(--bg2); position:sticky; top:0; z-index:20; gap:1rem; }
.topbar .logo { display:flex; align-items:center; gap:.35rem; text-decoration:none; color:var(--t1); font-weight:700; font-size:.95rem; flex-shrink:0; }
.topbar .logo span { color:var(--acc); }
.tool-nav { display:flex; gap:.15rem; align-items:center; overflow-x:auto; scrollbar-width:none; flex:1; }
.tool-nav::-webkit-scrollbar { display:none; }
.tool-nav a { color:var(--t2); text-decoration:none; font-size:.8rem; font-weight:500; padding:.3rem .55rem; border-radius:5px; white-space:nowrap; transition:color .12s, background .12s; }
.tool-nav a:hover { color:var(--t1); background:var(--bg3); }
.tool-nav a.active { color:var(--acc); background:#1e1f3a; }
.tool-nav .sep { color:var(--t3); padding:0 .25rem; font-size:.7rem; }
.topbar .cta { background:var(--acc); color:#fff; text-decoration:none; padding:.32rem .85rem; border-radius:6px; font-size:.8rem; font-weight:600; white-space:nowrap; transition:background .12s; flex-shrink:0; }
.topbar .cta:hover { background:var(--acc2); }

/* ── Page wrap ── */
.wrap { max-width:860px; margin:0 auto; padding:2.25rem 1.25rem 4rem; }

/* ── Hero ── */
.hero { text-align:center; margin-bottom:2.25rem; }
.hero h1 { font-size:1.9rem; font-weight:700; margin:0 0 .45rem; letter-spacing:-.02em; }
.hero p  { color:var(--t2); max-width:540px; margin:0 auto; font-size:.9rem; }

/* ── Search / input row ── */
.search-box  { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.1rem .9rem; margin-bottom:1.75rem; }
.search-row  { display:flex; gap:.65rem; }
.t-input     { flex:1; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:.65rem .9rem; color:var(--t1); font-size:.92rem; font-family:'JetBrains Mono',monospace; }
.t-input:focus { outline:none; border-color:var(--acc); }
.t-input::placeholder { color:var(--t3); font-family:'Inter',sans-serif; }
.t-btn { background:var(--acc); color:#fff; border:none; border-radius:8px; padding:.65rem 1.4rem; font-weight:600; cursor:pointer; white-space:nowrap; font-size:.88rem; transition:background .12s; }
.t-btn:hover    { background:var(--acc2); }
.t-btn:disabled { opacity:.55; cursor:not-allowed; }
.search-hint { color:var(--t3); font-size:.76rem; margin-top:.5rem; }

/* ── States ── */
.t-loading { text-align:center; padding:2.5rem 1rem; color:var(--t2); }
.dots span { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--acc); animation:dotpulse 1.2s ease-in-out infinite; margin:0 3px; }
.dots span:nth-child(2) { animation-delay:.2s; }
.dots span:nth-child(3) { animation-delay:.4s; }
@keyframes dotpulse { 0%,80%,100%{transform:scale(.7);opacity:.35} 40%{transform:scale(1.1);opacity:1} }
.t-error { background:#1e0c0c; border:1px solid #f8717140; border-radius:10px; padding:.9rem 1.1rem; color:#f87171; font-size:.88rem; }

/* ── Info cards ── */
.card { background:var(--bg2); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.card-title { padding:.55rem 1rem; border-bottom:1px solid var(--bd2); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--t2); }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(360px,1fr)); gap:1rem; }
.kv { display:flex; align-items:flex-start; padding:.45rem 1rem; border-bottom:1px solid var(--bd2); gap:1rem; }
.kv:last-child { border-bottom:none; }
.kv-k { color:var(--t2); font-size:.8rem; min-width:130px; flex-shrink:0; padding-top:1px; }
.kv-v { color:var(--t1); font-size:.83rem; word-break:break-all; font-family:'JetBrains Mono',monospace; line-height:1.5; }
.kv-v.sans { font-family:'Inter',sans-serif; }

/* ── Color helpers ── */
.ok   { color:var(--green)  !important; }
.warn { color:var(--yellow) !important; }
.bad  { color:var(--red)    !important; }
.mute { color:var(--t3)     !important; }
.accent { color:var(--acc)  !important; }

/* ── Pills ── */
.pill { display:inline-flex; align-items:center; gap:.25rem; padding:.18rem .55rem; border-radius:99px; font-size:.73rem; font-weight:600; }
.pill-yes  { background:#052e16; color:var(--green); }
.pill-no   { background:#1e0c0c; color:#f87171; }
.pill-warn { background:#1c1604; color:var(--yellow); }
.pill-mute { background:var(--bg3); color:var(--t3); }
.pill-acc  { background:#1e1f3a; color:var(--acc); }

/* ── Issues strip ── */
.issues { display:flex; flex-direction:column; gap:.35rem; margin-bottom:1.5rem; }
.issue  { display:flex; align-items:flex-start; gap:.55rem; padding:.5rem .8rem; border-radius:8px; font-size:.83rem; }
.issue.critical { background:#1e0c0c; color:#f87171; border:1px solid #f8717128; }
.issue.high     { background:#1e0e08; color:#fb923c; border:1px solid #fb923c28; }
.issue.medium   { background:#1c1604; color:#fbbf24; border:1px solid #fbbf2428; }
.issue.low      { background:var(--bg2); color:var(--t2); border:1px solid var(--bd2); }
.issue-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; margin-top:5px; }
.issue.critical .issue-dot { background:#f87171; }
.issue.high     .issue-dot { background:#fb923c; }
.issue.medium   .issue-dot { background:#fbbf24; }
.issue.low      .issue-dot { background:var(--t3); }

/* ── Tabs ── */
.tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:1.5rem; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab-btn { background:none; border:none; color:var(--t2); font-size:.86rem; font-weight:500; cursor:pointer; padding:.6rem 1rem; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; transition:color .12s, border-color .12s; font-family:'Inter',sans-serif; }
.tab-btn:hover { color:var(--t1); }
.tab-btn.active { color:var(--acc); border-bottom-color:var(--acc); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ── Table ── */
.t-table { width:100%; border-collapse:collapse; font-size:.84rem; }
.t-table th { text-align:left; padding:.45rem .85rem; color:var(--t2); font-size:.71rem; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--border); font-weight:600; }
.t-table td { padding:.5rem .85rem; border-bottom:1px solid var(--bd2); vertical-align:middle; }
.t-table tr:last-child td { border-bottom:none; }
.t-table tr:hover td { background:var(--bg3); }

/* ── Record type badges ── */
.rtype { display:inline-block; padding:.15rem .5rem; border-radius:4px; font-size:.7rem; font-weight:700; letter-spacing:.04em; font-family:'JetBrains Mono',monospace; }
.rtype-A    { background:#1a1f2e; color:#60a5fa; }
.rtype-AAAA { background:#1e1a2e; color:#a78bfa; }
.rtype-MX   { background:#1e1a0e; color:#fbbf24; }
.rtype-NS   { background:#0e1e12; color:#4ade80; }
.rtype-TXT  { background:#1e180a; color:#fb923c; }
.rtype-CNAME{ background:#0e1a1e; color:#2dd4bf; }
.rtype-SOA  { background:#1c1a22; color:#94a3b8; }
.rtype-CAA  { background:#1e100e; color:#f87171; }

/* ── Status code badges ── */
.sc { display:inline-block; padding:.15rem .55rem; border-radius:5px; font-family:'JetBrains Mono',monospace; font-size:.8rem; font-weight:700; }
.sc-2 { background:#052e16; color:var(--green); }
.sc-3 { background:#1c1604; color:var(--yellow); }
.sc-4 { background:#1e0e08; color:var(--orange); }
.sc-5 { background:#1e0c0c; color:var(--red); }

/* ── SEO section ── */
.seo { color:var(--t2); font-size:.88rem; line-height:1.7; border-top:1px solid var(--bd2); padding-top:2rem; margin-top:1.5rem; }
.seo h2 { color:var(--t1); font-size:1rem; margin:1.25rem 0 .35rem; }
.seo ul { padding-left:1.4rem; }
.seo li { margin-bottom:.3rem; }

/* ── Footer ── */
.t-footer { text-align:center; padding:1.25rem 1rem; color:var(--t3); font-size:.78rem; border-top:1px solid var(--bd2); margin-top:2rem; }
.t-footer a { color:var(--acc); text-decoration:none; }

/* ── Grade circle ── */
.grade-hero { display:flex; align-items:center; gap:1.5rem; background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:1.25rem 1.5rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.grade-circle { width:82px; height:82px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; font-weight:800; }
.g-letter { font-size:2.2rem; line-height:1; }
.g-lbl    { font-size:.58rem; text-transform:uppercase; letter-spacing:.06em; opacity:.75; }
.gA-plus  { background:#052e16; border:3px solid var(--green);  color:var(--green); }
.gA       { background:#052e16; border:3px solid #4ade80;       color:#4ade80; }
.gA-minus { background:#1c2604; border:3px solid #a3e635;       color:#a3e635; }
.gB       { background:#1c1a04; border:3px solid var(--yellow); color:var(--yellow); }
.gC       { background:#1c1004; border:3px solid var(--orange); color:var(--orange); }
.gD       { background:#1e100a; border:3px solid #f97316;       color:#f97316; }
.gF       { background:#1e0c0c; border:3px solid var(--red);    color:var(--red); }

/* ── Chip list ── */
.chip-list { display:flex; flex-wrap:wrap; gap:.3rem; padding:.75rem 1rem; }
.chip { background:var(--bg3); border:1px solid var(--bd2); border-radius:5px; padding:.15rem .5rem; font-size:.74rem; font-family:'JetBrains Mono',monospace; color:var(--t2); word-break:break-all; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .hero h1 { font-size:1.5rem; }
  .card-grid { grid-template-columns:1fr; }
  .kv-k { min-width:90px; }
  .topbar .logo-txt { display:none; }
  .grade-hero { gap:1rem; }
}