:root { --bg:#0f1115; --panel:#171a21; --line:#2a2f3a; --ink:#e6e8ec; --mut:#9aa3b2; --acc:#6ea8fe; --bad:#e06c75; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui,sans-serif; background:var(--bg); color:var(--ink); }
.masthead { display:flex; align-items:baseline; gap:2rem; padding:1rem 1.5rem; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand-name { font-weight:700; font-size:1.2rem; }
.brand-sub { color:var(--mut); margin-left:.6rem; font-size:.9rem; }
.mainnav { display:flex; gap:1rem; }
.mainnav a { color:var(--mut); text-decoration:none; padding:.2rem .1rem; border-bottom:2px solid transparent; }
.mainnav a:hover { color:var(--ink); }
.mainnav a.active { color:var(--acc); border-bottom-color:var(--acc); }
.content { padding:1.5rem; max-width:1100px; }
h1 { margin:.2rem 0 .3rem; font-size:1.4rem; }
.intro { color:var(--mut); margin:.2rem 0 1rem; }
.empty { color:var(--mut); }
.banner { padding:.6rem 1rem; border-radius:6px; margin-bottom:1rem; }
.banner-error { background:#3a1f22; color:var(--bad); border:1px solid #5a2a2f; }
table.grid { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.grid th, .grid td { text-align:left; padding:.5rem .7rem; border-bottom:1px solid var(--line); }
.grid th { color:var(--mut); font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; }
.grid tr:last-child td { border-bottom:none; }
.grid td.num { text-align:right; font-variant-numeric:tabular-nums; }
.filters { display:flex; gap:1rem; align-items:flex-end; margin-bottom:1rem; flex-wrap:wrap; }
.filters label { display:flex; flex-direction:column; gap:.2rem; color:var(--mut); font-size:.85rem; }
.filters select, .filters button { padding:.4rem .6rem; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:6px; }
.ctl { display:flex; gap:.3rem; flex-wrap:wrap; }
.ctl button { padding:.25rem .5rem; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:5px; cursor:pointer; font-size:.85rem; }
.ctl button:hover { border-color:var(--acc); color:var(--acc); }
.pill { padding:.1rem .5rem; border-radius:999px; font-size:.8rem; border:1px solid var(--line); }
.pill.on { color:#98c379; border-color:#3a5a32; }
.pill.off { color:var(--mut); }
.banner-ok { background:#1f3a24; color:#98c379; border:1px solid #2f5a33; }
.banner-warn { background:#3a341f; color:#d8c07a; border:1px solid #5a4f2a; }

/* Stage 10 — public login surface + logout chrome. */
.masthead .session { margin-left:auto; display:flex; align-items:center; gap:.8rem; }
.masthead .navlink { color:var(--mut); text-decoration:none; border:1px solid var(--line); border-radius:6px; padding:.25rem .7rem; font-size:.85rem; }
.masthead .navlink:hover, .masthead .navlink.active { color:var(--acc); border-color:var(--acc); }
/* Stage 11 — in-dashboard password change reuses the login-form styling inside the content area. */
.pwchange { max-width:24rem; }
.pwform { margin-top:1rem; }
.pwform input[type="text"], .pwform input[type="password"] { padding:.5rem .6rem; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:6px; }
.login-form input[type="text"] { padding:.5rem .6rem; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:6px; }
.masthead .logout { color:var(--mut); text-decoration:none; border:1px solid var(--line); border-radius:6px; padding:.25rem .7rem; font-size:.85rem; }
.masthead .logout:hover { color:var(--acc); border-color:var(--acc); }
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; margin:0; }
.login { width:100%; max-width:22rem; padding:2rem; background:var(--panel); border:1px solid var(--line); border-radius:10px; }
.login-brand { margin-bottom:1.2rem; }
.login h1 { font-size:1.2rem; margin:.2rem 0 1rem; }
.login-form { display:flex; flex-direction:column; gap:.5rem; }
.login-form label { color:var(--mut); font-size:.85rem; }
.login-form input[type="password"] { padding:.5rem .6rem; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:6px; }
.login-form button { margin-top:.5rem; padding:.5rem .6rem; background:var(--acc); color:#0b0e14; border:none; border-radius:6px; font-weight:600; cursor:pointer; }
.login-form button:hover { filter:brightness(1.08); }
.login-note { color:var(--mut); font-size:.8rem; margin-top:1rem; line-height:1.4; }

/* Stage 13-2 — onboarding token mint page */
.tokens-form { display:flex; flex-direction:column; gap:.4rem; max-width:42rem; }
.tokens-form label { color:var(--mut); font-size:.85rem; }
.tokens-form input { padding:.5rem .6rem; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:6px; }
.tokens-form button { margin-top:.5rem; padding:.5rem .6rem; background:var(--acc); color:#0b0e14; border:none; border-radius:6px; font-weight:600; cursor:pointer; }
.tokens-form button:hover { filter:brightness(1.08); }
.mint-result { margin:1rem 0; padding:1rem; border:1px solid var(--line); border-radius:6px; background:var(--bg); }
.mint-result .mint-meta { margin:0 0 .6rem; color:var(--mut); font-size:.9rem; }
.wire-token { display:flex; flex-direction:column; gap:.2rem; margin-bottom:.6rem; }
.wire-token label { color:var(--mut); font-size:.8rem; }
.wire-token input { padding:.5rem .6rem; font-family:monospace; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:6px; }

/* c1 — read-only plan detail: step tree + journal timeline. */
h2 { margin:1.4rem 0 .5rem; font-size:1.1rem; }
.tree { list-style:none; margin:.2rem 0; padding-left:0; }
.tree .tree { margin:.2rem 0 .2rem 1.2rem; padding-left:.8rem; border-left:1px solid var(--line); }
.tree-node { margin:.3rem 0; }
.tree-row { display:flex; gap:.5rem; align-items:baseline; }
.tree-id { color:var(--mut); font-size:.8rem; }
.tree-title { font-weight:600; }
.tree-body { color:var(--mut); margin:.1rem 0 .2rem; white-space:pre-wrap; }
.timeline { list-style:none; margin:.2rem 0; padding-left:0; }
.timeline-entry { display:flex; gap:.6rem; align-items:baseline; padding:.4rem 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.timeline-entry:last-child { border-bottom:none; }
.timeline-entry .ts { color:var(--mut); font-size:.85rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.timeline-entry .entry-content { white-space:pre-wrap; }

/* Stage 16 — plan-step status badge + progress bars + owner (read-only dashboard). */
.bar { display:inline-block; width:7rem; height:.6rem; background:var(--line); border-radius:999px; overflow:hidden; vertical-align:middle; }
.bar > span { display:block; height:100%; background:var(--acc); }
.bar.overall { width:14rem; height:.8rem; }
.bar-label { color:var(--mut); font-size:.8rem; font-variant-numeric:tabular-nums; }
.badge { padding:.1rem .5rem; border-radius:999px; font-size:.75rem; border:1px solid var(--line); text-transform:uppercase; letter-spacing:.03em; }
.badge.status-open { color:var(--mut); }
.badge.status-in_progress { color:#d8c07a; border-color:#5a4f2a; }
.badge.status-done { color:#98c379; border-color:#3a5a32; }
.step-owner { color:var(--mut); font-size:.8rem; }
.plan-overall { display:flex; gap:.6rem; align-items:center; margin:.4rem 0 1rem; flex-wrap:wrap; }
.tree-row .bar, .tree-row .badge { flex:none; }