:root { --bg:#f6f3ee; --card:#fff; --fg:#222; --muted:#666; --acc:#b4451f; --line:#ddd; --err:#b00020; --ok:#1b7f3b; }
@media (prefers-color-scheme: dark) { :root { --bg:#171513; --card:#24211e; --fg:#eee; --muted:#aaa; --line:#3a3530; --acc:#e07a4f; --err:#ff6b6b; --ok:#5fd68a; } }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, "Noto Sans Devanagari", sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); }
nav button { margin-right:4px; }
nav button.on { background:var(--acc); color:#fff; }
.card { background:var(--card); margin:16px; padding:16px; border:1px solid var(--line); border-radius:10px; }
.narrow { max-width:380px; margin:40px auto; }
h1 { font-size:22px; margin-top:0; } h2 { font-size:18px; margin-top:0; }
label { display:block; margin:8px 0; }
.row { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.row label { margin:4px 0; }
input, select, button { font:inherit; padding:7px 10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); }
label > input:not([type=checkbox]), label > select { display:block; width:100%; margin-top:2px; }
.row label > input:not([type=checkbox]) { width:auto; }
button { cursor:pointer; background:var(--acc); color:#fff; border:0; }
button.link { background:none; color:var(--acc); text-decoration:underline; padding:4px; }
.msg { margin:8px 16px; min-height:1.5em; }
.msg.err { color:var(--err); } .msg.ok { color:var(--ok); }
table { border-collapse:collapse; width:100%; margin-top:12px; }
th, td { border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; white-space:nowrap; }
.scroll { overflow-x:auto; }
.hint { color:var(--muted); font-size:13px; }