:root{
  --bg:#eef2f6;
  --text:#0f172a;
  --muted:#64748b;
  --card-bg:#ffffff;
  --border:#e5e7eb;
  --input-border:#cbd5e1;
  --focus:#2563eb;
  --btn-bg:#2563eb;
  --result-bg:#f8fafc;
  --result-danger-bg:#fee2e2;
  --result-danger-border:#f87171;
  --shadow:0 8px 28px rgba(15,23,42,.08);
  --seg-bg:#f1f5f9;
  --seg-active:#dbeafe;
}
.dark{
  --bg:#0b1220;
  --text:#e6e8ec;
  --muted:#9aa7bd;
  --card-bg:#0f172a;
  --border:#1f2a44;
  --input-border:#2a3a5f;
  --focus:#4f7cff;
  --btn-bg:#4f7cff;
  --result-bg:#0b1220;
  --result-danger-bg:#2a1212;
  --result-danger-border:#ff5c5c;
  --shadow:0 8px 28px rgba(0,0,0,.25);
  --seg-bg:#0b1220;
  --seg-active:#1f2a44;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,'Noto Sans',sans-serif}
.card{max-width:800px;margin:48px auto;background:var(--card-bg);border-radius:12px;padding:28px 24px;border:1px solid var(--border);box-shadow:var(--shadow);position:relative}
.topbar{display:flex;justify-content:flex-end}
.theme-btn{background:transparent;border:1px solid var(--input-border);border-radius:999px;padding:6px 10px;cursor:pointer;color:var(--text)}
h1{margin:8px 0 16px 0;font-size:2rem;text-align:center}
.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:720px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field{display:flex;flex-direction:column;gap:6px}
label{font-weight:600;color:var(--text)}
input,select{padding:10px 12px;border:1px solid var(--input-border);border-radius:10px;background:var(--card-bg);color:var(--text);outline:none}
input:focus,select:focus{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in oklab, var(--focus) 25%, transparent)}

.segmented{display:flex;gap:0;margin:12px 0}
.seg{flex:1;padding:8px 12px;background:var(--seg-bg);border:1px solid var(--input-border);cursor:pointer;border-radius:8px 0 0 8px;font-weight:700;color:var(--text)}
.seg + .seg{border-left:none;border-radius:0 8px 8px 0}
.seg.active{background:var(--seg-active);border-color:var(--input-border)}

.btn{width:100%;margin-top:6px;background:var(--btn-bg);border:none;color:#fff;padding:12px 14px;border-radius:10px;font-weight:800;cursor:pointer}
.btn:hover{filter:brightness(1.05)}

.result{margin-top:14px;padding:16px 18px;border:1px dashed var(--input-border);border-radius:12px;background:var(--result-bg);font-weight:800;font-size:1.35rem;line-height:1.25;color:var(--text)}
.result.danger{background:var(--result-danger-bg);border-color:var(--result-danger-border);box-shadow:0 8px 20px color-mix(in srgb, var(--result-danger-border) 25%, transparent)}

.muted{color:var(--muted);margin-top:8px;display:block}
.row{display:flex;align-items:center;gap:10px;margin-top:10px}
.ghost{background:var(--card-bg);border:1px solid var(--input-border);color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer}
.hidden-submit{position:absolute;left:-9999px;opacity:0}

.disclaimer{max-width:800px;margin:12px auto 48px;background:var(--card-bg);border:1px dashed var(--input-border);border-radius:12px;padding:14px 16px;color:var(--muted);line-height:1.5}
.disclaimer h2{margin:0 0 8px 0;font-size:1rem;color:var(--text)}
.disclaimer p{margin:6px 0}