/* The prototype's palette: parchment ground, ink, godown green. */
:root { --bg:#F3EFE1; --card:#FFFFFF; --line:#E7E1CE; --ink:#0A2033; --muted:#6E7987; --mono:#44586A;
        --green:#2E7C22; --green-soft:#E4EEDA; --green-line:#9EC58C; --red:#B3261E; --red-soft:#FBE9E7; --pill:#E3ECEE; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color:var(--green); text-decoration:none; } a:hover { text-decoration:underline; }
code { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.92em; color:var(--mono); }
h1 { font-size:1.6rem; margin:0 0 .6rem; letter-spacing:-.01em; } h2 { font-size:1.1rem; margin:0 0 .6rem; } h3 { font-size:1rem; margin:1.2rem 0 .4rem; }
main { max-width:1100px; margin:0 auto; padding:20px 16px 48px; }
footer { text-align:center; color:var(--muted); font-size:.8rem; padding:12px; }
.top { display:flex; align-items:center; gap:24px; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { color:var(--ink); font-weight:500; display:flex; align-items:center; gap:8px; } .brand b { color:var(--green); }
.mark { width:14px; height:14px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--green-soft); display:inline-block; }
.top nav { display:flex; gap:4px; } .top nav a { padding:6px 10px; border-radius:8px; color:var(--ink); }
.top nav a.on, .top nav a:hover { background:var(--green-soft); text-decoration:none; }
.who { margin-left:auto; display:flex; gap:10px; align-items:center; color:var(--muted); font-size:.9rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin:0 0 16px; }
.narrow { max-width:420px; margin:40px auto; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:760px) { .grid2 { grid-template-columns:1fr; } }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .between { justify-content:space-between; }
.muted { color:var(--muted); } .num { text-align:right; font-variant-numeric: tabular-nums; }
.pill { display:inline-block; background:var(--pill); color:var(--mono); border-radius:999px; padding:1px 8px; font-size:.75rem; vertical-align:middle; }
.pill.green { background:var(--green-soft); color:var(--green); }
table { width:100%; border-collapse:collapse; } th { text-align:left; font-weight:500; color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; }
th, td { padding:8px 8px; border-bottom:1px solid var(--line); vertical-align:top; } tr:last-child td { border-bottom:0; }
table.compact th, table.compact td { padding:6px 8px; } tr.done td { color:var(--muted); }
dl { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0; } dt { color:var(--muted); } dd { margin:0; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin:0 0 16px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; color:var(--ink); display:flex; flex-direction:column; }
.tile b { font-size:1.6rem; font-weight:600; } .tile span { color:var(--muted); font-size:.85rem; }
.tile.ok b { color:var(--green); } .tile.bad { border-color:var(--red); } .tile.bad b { color:var(--red); }
.cols { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px 16px; }
.field { display:flex; flex-direction:column; gap:4px; } .field .label { font-size:.82rem; color:var(--muted); } .field em { color:var(--red); font-style:normal; }
input, select { font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); width:100%; }
input:focus, select:focus { outline:2px solid var(--green-line); border-color:var(--green); }
.field.bad input, .field.bad select { border-color:var(--red); } .note { color:var(--red); font-size:.8rem; } .hint { color:var(--muted); font-size:.78rem; }
.check { display:flex; gap:6px; align-items:center; align-self:end; padding-bottom:8px; } .check input { width:auto; }
button, .button { font:inherit; padding:8px 14px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; display:inline-block; }
.button:hover { text-decoration:none; background:var(--green-soft); }
button.primary { background:var(--green); border-color:var(--green); color:#fff; } button.primary:hover { filter:brightness(1.05); }
.button.plain { border-color:transparent; } button.link { border:0; background:none; color:var(--green); padding:0; } button.link.danger { color:var(--red); }
form.inline { display:flex; gap:12px; align-items:end; flex-wrap:wrap; margin-top:12px; } form.inline .field { min-width:220px; }
.flash { padding:10px 14px; border-radius:10px; margin:0 0 14px; border:1px solid; }
.flash.ok { background:var(--green-soft); border-color:var(--green-line); color:var(--green); }
.flash.error { background:var(--red-soft); border-color:#E7B4AE; color:var(--red); }
.dev { background:#FFF6D6; border:1px solid #F0D98A; border-radius:8px; padding:8px 12px; }
.tabs { display:flex; gap:4px; margin:0 0 12px; flex-wrap:wrap; } .tabs a { padding:6px 12px; border-radius:999px; color:var(--ink); border:1px solid var(--line); background:#fff; }
.tabs a.on { background:var(--green); border-color:var(--green); color:#fff; }