:root {
  --bg: #0f1530;
  --card: #18204a;
  --ink: #f6f1e4;
  --muted: #b8b3c9;
  --gold: #c9a45c;
  --ok: #7fc8a0;
  --bad: #ef8a80;
  --warn: #e6c46a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Tamil", sans-serif;
  padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
main { max-width: 560px; margin: 0 auto; }
h1 { margin: 0; font-size: 1.6rem; color: var(--gold); letter-spacing: .04em; }
h2 { font-size: 1.05rem; margin: 0 0 .4rem; }
section, header { background: var(--card); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.sub, .muted { color: var(--muted); font-size: .9rem; margin: .3rem 0 .7rem; }
.row { display: flex; gap: 10px; align-items: center; }
.label { font-weight: 600; margin: .8rem 0 .3rem; }
button {
  font: inherit; font-weight: 600; width: 100%; padding: 13px; margin-top: 8px;
  border: 0; border-radius: 10px; background: var(--gold); color: #1a1530;
}
button.secondary { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
button.danger { background: var(--bad); }
button:disabled { opacity: .45; }
select, input, textarea {
  font: inherit; color: var(--ink); background: #0b1026; border: 1px solid #39407a;
  border-radius: 10px; padding: 10px; width: 100%;
}
select { width: auto; flex: 1; }
textarea { font-family: ui-monospace, Menlo, monospace; font-size: .75rem; word-break: break-all; }
.results { list-style: none; padding: 0; margin: .6rem 0 0; }
.results li { padding: 6px 0; border-top: 1px solid #2a3263; font-size: .9rem; }
.results li::before { display: inline-block; width: 1.4em; font-weight: 700; }
.results li.pass::before { content: "✓"; color: var(--ok); }
.results li.fail::before { content: "✗"; color: var(--bad); }
.results li.info::before { content: "•"; color: var(--warn); }
.results li .detail { display: block; color: var(--muted); font-size: .8rem; padding-left: 1.4em; word-break: break-word; }
.code { font: 600 1.5rem/1.3 ui-monospace, Menlo, monospace; color: var(--gold); letter-spacing: .08em; margin: .2rem 0; }
.overlay { position: fixed; inset: 0; background: var(--bg); display: grid; place-items: center; padding: 24px; z-index: 10; }
.overlay .card { background: var(--card); border-radius: 14px; padding: 20px; max-width: 420px; }
[hidden] { display: none !important; }
details { margin-top: 14px; }
summary { color: var(--muted); }