:root{
  /* Light theme */
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --accent:#2563eb;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --danger:#ef4444;
  --ok:#16a34a;
}

html[data-theme="dark"]{
  --bg:#0b1220;
  --card:#0f172a;
  --text:#e5e7eb;
  --muted:#9aa4b2;
  --line:#1f2937;
  --accent:#60a5fa;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --danger:#f87171;
  --ok:#22c55e;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text);
}
.container{max-width:900px; margin:0 auto; padding:0 16px}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{position:static; width:auto; height:auto; margin:8px; padding:8px 12px; background:#fff; box-shadow:var(--shadow); border-radius:8px}

.site-header{
  background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.nav-container{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px}
.brand-mark{color:var(--ok); font-size:22px}
.brand-name{font-weight:700; color:var(--text)}
.right-tools{display:flex; align-items:center; gap:10px}
.top-link{padding:6px 10px; border-radius:8px}
.theme-toggle{
  background:transparent; border:1px solid var(--line); color:var(--text);
  padding:6px 10px; border-radius:999px; cursor:pointer;
}
.theme-toggle:hover{background:rgba(148,163,184,.12)}
.theme-toggle .icon-sun{display:none}
html[data-theme="light"] .theme-toggle .icon-sun{display:inline}
html[data-theme="light"] .theme-toggle .icon-moon{display:none}
html[data-theme="dark"] .theme-toggle .icon-moon{display:inline}
html[data-theme="dark"] .theme-toggle .icon-sun{display:none}

.main{padding:20px 0 40px}

.hero h1{margin:0 0 6px}
.muted{color:var(--muted)}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:16px; margin-top:14px;
}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
input[type="text"]{
  background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:10px; outline:none;
}
input[type="text"]:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.actions{display:flex; align-items:center; gap:10px}
.btn{
  border:1px solid var(--line); background:var(--card); color:var(--text);
  padding:8px 12px; border-radius:10px; cursor:pointer;
}
.btn.primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn[disabled]{opacity:.6; cursor:not-allowed}
.tag{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background:rgba(148,163,184,.2); color:var(--text); font-size:12px}
.hidden{display:none}

.alert{border-radius:12px; padding:12px; margin:14px 0}
.alert-error{background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.35); color:var(--danger)}
.alert-ok{background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.35); color:var(--ok)}

.result-grid{
  display:grid; gap:12px; grid-template-columns:repeat(2,1fr);
}
.result-grid .label{font-size:12px; color:var(--muted)}
.result-grid .value{font-weight:600}

.raw{margin-top:10px}
.raw pre{max-height:280px; overflow:auto; background:rgba(148,163,184,.08); padding:10px; border-radius:10px; border:1px solid var(--line)}

.site-footer{border-top:1px solid var(--line); background:var(--card)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 0}
.footer-inner a{color:var(--muted)}

/* Responsive */
@media (max-width: 640px){
  .result-grid{grid-template-columns:1fr}
}