:root {
    color-scheme: light;
    --bg:#f3f6fb; --surface:#fff; --surface-soft:#f8fafc; --border:#dce3ed;
    --text:#172033; --muted:#64748b; --input:#fff; --primary:#2563eb;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

html[data-theme="dark"] {
    color-scheme:dark;
    --bg:#0f172a; --surface:#1e293b; --surface-soft:#172033; --border:#334155;
    --text:#f1f5f9; --muted:#94a3b8; --input:#0f172a; --primary:#3b82f6;
}

* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font-size:14px; line-height:1.45; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px max(24px,calc((100vw - 1180px)/2)); background:var(--surface); border-bottom:1px solid var(--border); }
.eyebrow { color:var(--muted); font-size:11px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
h1 { margin:2px 0 0; font-size:21px; }
.header-actions { display:flex; align-items:center; gap:8px; }
.header-actions a,.header-actions button { min-height:34px; padding:7px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-soft); color:var(--text); text-decoration:none; font-size:13px; font-weight:600; line-height:1.2; cursor:pointer; }
main { display:flex; flex-direction:column; gap:20px; width:min(1180px,calc(100% - 32px)); margin:28px auto; }
.tool-card { padding:24px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:0 8px 28px rgb(15 23 42 / 7%); }
.tool-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:20px; }
h2 { margin:0 0 6px; font-size:18px; }
p { margin:0; color:var(--muted); }
.local-badge { padding:4px 9px; border-radius:999px; background:#dcfce7; color:#15803d; font-size:11px; font-weight:750; white-space:nowrap; }
label { display:block; margin-bottom:6px; font-size:12px; font-weight:700; }
textarea,select { width:100%; border:1px solid var(--border); border-radius:9px; outline:none; background:var(--input); color:var(--text); }
textarea { display:block; padding:12px; resize:vertical; font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; }
textarea:focus,select:focus { border-color:#60a5fa; box-shadow:0 0 0 3px rgb(96 165 250 / 15%); }
.input-actions,.output-toolbar { display:flex; align-items:center; gap:8px; margin-top:10px; }
.input-actions span { margin-right:auto; color:var(--muted); font-size:12px; }
button { border:0; border-radius:8px; padding:8px 13px; font-size:12px; font-weight:700; line-height:1.2; cursor:pointer; }
button:disabled { opacity:.5; cursor:default; }
.primary { color:#fff; background:var(--primary); }
.secondary { color:var(--text); background:var(--surface-soft); border:1px solid var(--border); }
.output-panel { margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }
.side-by-side { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.field-block { min-width:0; }
.field-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.field-toolbar label { margin:0; }
.compact { padding:5px 9px; }
#card-output { background:var(--surface-soft); }
.output-toolbar { margin:0 0 10px; }
.output-toolbar label { margin:0 auto 0 0; white-space:nowrap; }
#cookie-output { min-height:340px; background:var(--surface-soft); }
.hint { margin-top:8px; font-size:12px; }
code { color:var(--text); }
#toast { position:fixed; right:18px; bottom:18px; max-width:360px; padding:10px 13px; border-radius:9px; background:#172033; color:#fff; box-shadow:0 8px 30px #0003; opacity:0; transform:translateY(8px); pointer-events:none; transition:.18s; }
#toast.visible { opacity:1; transform:translateY(0); }
#toast.error { background:#b91c1c; }
@media (max-width:680px) { .topbar { align-items:flex-start; padding:14px 16px; } .header-actions { flex-direction:column; align-items:stretch; } main { margin:16px auto; } .tool-card { padding:16px; } .side-by-side { grid-template-columns:1fr; } .output-toolbar { align-items:stretch; flex-direction:column; } .output-toolbar label,.output-toolbar button { width:100%; } }