:root {
  color-scheme: light;
  --bg:#fff; --surface:#f7f7fa; --surface2:#f1eef8; --line:#e2e0ea; --line2:#cfc8e0;
  --text:#15151a; --muted:#63636f;
  --purple:#8a25d4; --purple-soft:#f4edfc;
  --green:#14882f;  --green-soft:#ecf8ee;
  --red:#cf2128;    --red-soft:#fdeded;
  --amber:#9a6a00;  --amber-soft:#fcf4e4;
  --ink:#0b0b0b;    --on-ink:#fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#0e0e12; --surface:#17171e; --surface2:#1d1a27; --line:#2a2a35; --line2:#3c3550;
    --text:#ececf2; --muted:#9b9bab;
    --purple:#b67ae8; --purple-soft:#241a33;
    --green:#58c96f;  --green-soft:#15251a;
    --red:#ef6a6f;    --red-soft:#2a1618;
    --amber:#d9a441;  --amber-soft:#2a2114;
    --ink:#000;       --on-ink:#fff;
  }
}
*,*::before,*::after { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
.wrap { max-width:840px; margin:0 auto; padding:0 16px 56px; }

.top { background:var(--ink); color:var(--on-ink); margin:0 -16px; padding:18px 16px 16px; }
.brand { font-size:21px; font-weight:700; }
.brand .dot { color:#d8232a; }
.sub { font-size:12px; letter-spacing:1.4px; color:#a9a9b8; margin-top:3px; text-transform:uppercase; }
.stripe { display:flex; height:4px; margin:0 -16px 18px; }
.stripe i { display:block; height:100%; }
.stripe .g { background:#189B33; width:34%; }
.stripe .p { background:#8A25D4; width:52%; }
.stripe .r { background:#D8232A; width:14%; }

.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:0 -16px 18px; padding:0 16px; }
.tabs a { text-decoration:none; color:var(--muted); font-weight:600; font-size:14px;
  padding:12px 10px; border-bottom:3px solid transparent; }
.tabs a.on { color:var(--purple); border-bottom-color:var(--purple); }

h2 { font-size:13px; text-transform:uppercase; letter-spacing:.8px; color:var(--purple); margin:22px 0 10px; }
label { display:block; font-size:13px; font-weight:600; margin:14px 0 5px; }
.hint { font-weight:400; color:var(--muted); font-size:12px; margin-top:2px; }

input[type=text], input[type=email], input[type=date], input[type=password], select, textarea {
  width:100%; padding:9px 11px; font:inherit; font-size:14px;
  background:var(--surface); color:var(--text); border:1px solid var(--line2); border-radius:7px;
}
textarea { min-height:120px; resize:vertical; }
.row { display:flex; gap:12px; flex-wrap:wrap; }
.row > div { flex:1 1 190px; min-width:0; }

.check { display:flex; gap:9px; align-items:flex-start; background:var(--red-soft);
  border:1px solid var(--line2); border-left:4px solid var(--red); border-radius:7px;
  padding:11px 12px; margin-top:14px; }
.check input { margin-top:3px; flex:0 0 auto; }
.check span { font-size:13px; }

.btn { font:inherit; font-weight:600; font-size:14px; cursor:pointer;
  border-radius:7px; padding:10px 16px; border:1px solid transparent; }
.btn.primary { background:var(--purple); color:#fff; }
.btn.ok      { background:var(--green);  color:#fff; }
.btn.warn    { background:var(--red);    color:#fff; }
.btn.ghost   { background:var(--surface);color:var(--text); border-color:var(--line2); }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; align-items:center; }
.actions input[type=text] { flex:1 1 220px; }

.card { background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:14px 15px; margin-bottom:12px; }
.meta { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
.pill { font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  padding:3px 8px; border-radius:20px; }
.pill.plat     { background:var(--surface2);   color:var(--text); }
.pill.pillar   { background:var(--purple-soft);color:var(--purple); }
.pill.pending  { background:var(--amber-soft); color:var(--amber); }
.pill.approved { background:var(--green-soft); color:var(--green); }
.pill.changes  { background:var(--red-soft);   color:var(--red); }
.pill.posted   { background:var(--purple-soft);color:var(--purple); }
.who { font-size:12px; color:var(--muted); margin-left:auto; }
.copy { white-space:pre-wrap; margin:6px 0 10px; }
.tags { color:var(--purple); font-size:13px; }
.detail { font-size:12.5px; color:var(--muted); margin-top:8px; display:flex; gap:14px; flex-wrap:wrap; }
.detail span { margin-right:14px; }   /* fallback where flex gap is unsupported */
.meta > * { margin-right:2px; }
.fb { background:var(--red-soft); border-left:3px solid var(--red); padding:9px 11px;
  border-radius:6px; margin-top:10px; font-size:13.5px; }
.fb.okfb { background:var(--green-soft); border-left-color:var(--green); }

.note { background:var(--surface2); border-left:4px solid var(--purple); border-radius:7px;
  padding:11px 13px; font-size:13.5px; margin:14px 0; }
.err  { background:var(--red-soft);  border-left:4px solid var(--red);   border-radius:7px;
  padding:11px 13px; font-size:13.5px; margin:14px 0; }
.ok   { background:var(--green-soft);border-left:4px solid var(--green); border-radius:7px;
  padding:11px 13px; font-size:13.5px; margin:14px 0; }
.empty { text-align:center; color:var(--muted); padding:34px 16px; font-size:14px; }
.gate { max-width:420px; margin:36px auto; }
.stats { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:9px;
  padding:10px 14px; font-size:13px; }
.stat b { display:block; font-size:20px; color:var(--purple); }