/* ============================================================
   worklog — 客戶工時對帳平台
   Tokens 與元件樣式抽自視覺提案 mockup，驅動亮／暗雙主題。
   ============================================================ */

:root{
  --sans: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;

  --plane:        #eef1f4;
  --surface:      #ffffff;
  --surface-2:    #f6f8fa;
  --ink:          #14181d;
  --ink-2:        #566069;
  --muted:        #8b929b;
  --line:         #e3e7eb;
  --line-2:       #d3d9df;
  --grid:         #e6e9ec;

  --accent:       #0f4d5e;
  --accent-strong:#0b3c4a;
  --accent-ink:   #ffffff;
  --accent-soft:  #e5eef0;
  --accent-line:  #bcd6dc;

  --draft:        #a86800;
  --draft-bg:     #fdf4e3;
  --draft-line:   #e6a338;
  --confirmed:    #0f7a3d;
  --confirmed-bg: #e7f4ec;
  --confirmed-line:#8fce9f;

  --s-lake:   #2a78d6;
  --s-nhri:   #1baf7a;
  --s-isafe:  #eda100;
  --s-matt:   #008300;

  --chip-lake-bg:#e7f0fb; --chip-lake-fg:#1b5296;
  --chip-nhri-bg:#e0f2ea; --chip-nhri-fg:#0f6a48;
  --chip-isafe-bg:#f9efd3; --chip-isafe-fg:#835900;
  --chip-matt-bg:#e1f0e1; --chip-matt-fg:#0a5a0a;

  --st-new-bg:#eceff2; --st-new-fg:#4a5560;
  --st-acc-bg:#e7f0fb; --st-acc-fg:#1b5296;
  --st-prog-bg:#fdf4e3; --st-prog-fg:#9a5f00;
  --st-done-bg:#e7f4ec; --st-done-fg:#0f7a3d;
  --st-decl-bg:#f7e9e9; --st-decl-fg:#a33a3a;

  --shadow: 0 1px 2px rgba(16,24,32,.07), 0 4px 14px rgba(16,24,32,.05);
  --radius: 12px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --plane:#0c0e10; --surface:#16191d; --surface-2:#1c2025;
    --ink:#f2f4f6; --ink-2:#a9b1ba; --muted:#7c848d;
    --line:#282d33; --line-2:#363c43; --grid:#282d33;
    --accent:#3aa7bc; --accent-strong:#2f92a6; --accent-ink:#05242c;
    --accent-soft:#12333b; --accent-line:#1d525d;
    --draft:#e0a54a; --draft-bg:#2c2413; --draft-line:#6b4e1e;
    --confirmed:#4ec27e; --confirmed-bg:#12271b; --confirmed-line:#235f38;
    --s-lake:#3987e5; --s-nhri:#199e70; --s-isafe:#c98500; --s-matt:#1f9d42;
    --chip-lake-bg:#17293b; --chip-lake-fg:#9cc4f2;
    --chip-nhri-bg:#12291f; --chip-nhri-fg:#6fd3a6;
    --chip-isafe-bg:#2b2410; --chip-isafe-fg:#e2b45a;
    --chip-matt-bg:#142a14; --chip-matt-fg:#63c063;
    --st-new-bg:#23282e; --st-new-fg:#aab2bb;
    --st-acc-bg:#17293b; --st-acc-fg:#9cc4f2;
    --st-prog-bg:#2c2413; --st-prog-fg:#e0a54a;
    --st-done-bg:#12271b; --st-done-fg:#4ec27e;
    --st-decl-bg:#2c1717; --st-decl-fg:#d98686;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --plane:#0c0e10; --surface:#16191d; --surface-2:#1c2025;
  --ink:#f2f4f6; --ink-2:#a9b1ba; --muted:#7c848d;
  --line:#282d33; --line-2:#363c43; --grid:#282d33;
  --accent:#3aa7bc; --accent-strong:#2f92a6; --accent-ink:#05242c;
  --accent-soft:#12333b; --accent-line:#1d525d;
  --draft:#e0a54a; --draft-bg:#2c2413; --draft-line:#6b4e1e;
  --confirmed:#4ec27e; --confirmed-bg:#12271b; --confirmed-line:#235f38;
  --s-lake:#3987e5; --s-nhri:#199e70; --s-isafe:#c98500; --s-matt:#1f9d42;
  --chip-lake-bg:#17293b; --chip-lake-fg:#9cc4f2;
  --chip-nhri-bg:#12291f; --chip-nhri-fg:#6fd3a6;
  --chip-isafe-bg:#2b2410; --chip-isafe-fg:#e2b45a;
  --chip-matt-bg:#142a14; --chip-matt-fg:#63c063;
  --st-new-bg:#23282e; --st-new-fg:#aab2bb;
  --st-acc-bg:#17293b; --st-acc-fg:#9cc4f2;
  --st-prog-bg:#2c2413; --st-prog-fg:#e0a54a;
  --st-done-bg:#12271b; --st-done-fg:#4ec27e;
  --st-decl-bg:#2c1717; --st-decl-fg:#d98686;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
body.wl{
  font-family:var(--sans); color:var(--ink); background:var(--plane);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  min-height:100vh; margin:0;
}
.wl *:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){ .wl *{ transition:none !important; animation:none !important; } }
a{ color:var(--accent); }

.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

.stage{ max-width:1180px; margin:0 auto; padding:22px 20px 40px; }
.stage.narrow{ max-width:900px; }
.stage.tight{ max-width:440px; }

/* top bar */
.topbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 16px; box-shadow:var(--shadow);
}
.wordmark{ display:inline-flex; flex-direction:column; line-height:1; text-decoration:none; }
.wordmark b{
  font-size:19px; font-weight:700; letter-spacing:-.015em; color:var(--ink);
  border-bottom:2px solid var(--accent); padding-bottom:3px;
}
.wordmark b i{ font-style:normal; color:var(--accent); }
.wordmark small{ font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:5px; }

.seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:3px; gap:2px; }
.seg a, .seg button{
  font-family:var(--sans); font-size:13px; color:var(--ink-2); cursor:pointer; text-decoration:none;
  background:transparent; border:0; border-radius:6px; padding:5px 12px; display:inline-flex; align-items:center;
}
.seg a[aria-pressed="true"], .seg button[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); font-weight:600; }
.seg a:not([aria-pressed="true"]):hover, .seg button:not([aria-pressed="true"]):hover{ background:var(--line); }
.seg .seg-off{ font-family:var(--sans); font-size:13px; color:var(--muted); padding:5px 12px; border-radius:6px; cursor:not-allowed; opacity:.55; display:inline-flex; align-items:center; }

.month{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--mono);
  background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:5px 8px;
  font-size:13.5px; color:var(--ink);
}
.month a, .month button{ background:transparent; border:0; color:var(--ink-2); cursor:pointer; font-size:15px; line-height:1; padding:2px 6px; border-radius:5px; text-decoration:none; }
.month a:hover, .month button:hover{ background:var(--line); color:var(--ink); }
.grow{ flex:1 1 auto; }

.user{ display:inline-flex; align-items:center; gap:9px; }
.avatar{ width:32px; height:32px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-weight:700; font-size:14px; }
.user span{ font-size:13.5px; color:var(--ink-2); }

.theme-toggle{
  font-family:var(--sans); font-size:12.5px; color:var(--ink-2); cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:8px; padding:6px 10px;
}
.theme-toggle:hover{ background:var(--line); color:var(--ink); }

.btn{
  font-family:var(--sans); font-size:13.5px; cursor:pointer; border-radius:8px; text-decoration:none;
  padding:8px 14px; border:1px solid transparent; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
}
.btn-primary{ background:var(--accent); color:var(--accent-ink); font-weight:600; }
.btn-primary:hover{ background:var(--accent-strong); }
.btn-ghost{ background:var(--surface); color:var(--accent); border-color:var(--accent-line); font-weight:600; }
.btn-ghost:hover{ background:var(--accent-soft); }
.btn-soft{ background:var(--surface-2); color:var(--ink-2); border-color:var(--line-2); }
.btn-soft:hover{ background:var(--line); color:var(--ink); }
.btn-mini{ font-size:12.5px; padding:5px 10px; }

.section-head{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin:26px 2px 12px; }
.section-head h2{ font-size:16px; margin:0; letter-spacing:-.01em; }
.section-head p{ margin:0; color:var(--muted); font-size:12.5px; }

.toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:18px 0 12px; }

/* chips & badges */
.chip{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  padding:3px 9px 3px 8px; border-radius:20px; white-space:nowrap;
}
.chip::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--dot); flex:none; }
.chip.lake { --dot:var(--s-lake);  background:var(--chip-lake-bg);  color:var(--chip-lake-fg); }
.chip.nhri { --dot:var(--s-nhri);  background:var(--chip-nhri-bg);  color:var(--chip-nhri-fg); }
.chip.isafe{ --dot:var(--s-isafe); background:var(--chip-isafe-bg); color:var(--chip-isafe-fg); }
.chip.matt { --dot:var(--s-matt);  background:var(--chip-matt-bg);  color:var(--chip-matt-fg); }

.badge{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:20px; border:1px solid transparent; white-space:nowrap; }
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; }
.badge.confirmed{ background:var(--confirmed-bg); color:var(--confirmed); border-color:var(--confirmed-line); }
.badge.confirmed::before{ background:var(--confirmed); }
.badge.draft{ background:var(--draft-bg); color:var(--draft); border-color:var(--draft-line); }
.badge.draft::before{ background:var(--draft); }
.badge.off{ background:var(--st-new-bg); color:var(--st-new-fg); border-color:var(--line-2); }
.badge.off::before{ background:var(--muted); }

.pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; }
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85; }
.pill.st-new { background:var(--st-new-bg);  color:var(--st-new-fg); }
.pill.st-acc { background:var(--st-acc-bg);  color:var(--st-acc-fg); }
.pill.st-prog{ background:var(--st-prog-bg); color:var(--st-prog-fg); }
.pill.st-done{ background:var(--st-done-bg); color:var(--st-done-fg); }
.pill.st-decl{ background:var(--st-decl-bg); color:var(--st-decl-fg); }

/* ledger table (admin) */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.table-scroll{ overflow-x:auto; }
table.ledger{ width:100%; border-collapse:collapse; min-width:940px; font-size:13.5px; }
.ledger thead th{
  text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  font-weight:600; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface-2); white-space:nowrap;
}
.ledger td{ padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.ledger tbody tr:last-child td{ border-bottom:0; }
.ledger tbody tr.data:hover{ background:var(--surface-2); }
.ledger .c-num{ text-align:right; }
.ledger .item{ color:var(--ink); }
.ledger .empty{ color:var(--muted); }
.caret{ background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:12px; padding:2px 4px; border-radius:5px; }
.caret:hover{ color:var(--ink); background:var(--line); }

tr.is-draft td{ background:color-mix(in srgb, var(--draft-bg) 62%, var(--surface)); }
tr.is-draft td:first-child{ box-shadow: inset 3px 0 0 var(--draft-line); }
:root[data-theme="dark"] tr.is-draft td{ background:var(--draft-bg); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) tr.is-draft td{ background:var(--draft-bg); } }

.prog{ display:inline-flex; align-items:center; gap:8px; min-width:96px; }
.prog-track{ width:56px; height:6px; border-radius:4px; background:var(--line); overflow:hidden; }
.prog-track span{ display:block; height:100%; background:var(--accent); border-radius:4px; }
.prog em{ font-family:var(--mono); font-style:normal; font-size:11.5px; color:var(--ink-2); font-variant-numeric:tabular-nums; }

.row-actions{ display:inline-flex; gap:6px; white-space:nowrap; align-items:center; }
.lnk{ background:transparent; border:0; color:var(--accent); font-weight:600; cursor:pointer; font-size:12.5px; padding:4px 6px; border-radius:5px; font-family:var(--sans); text-decoration:none; display:inline-flex; align-items:center; }
.lnk:hover{ background:var(--accent-soft); }
.inline-form{ display:inline; }

tr.detail td{ background:var(--surface-2); padding:0; }
.detail-inner{ padding:14px 18px 16px 30px; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px 26px; border-left:3px solid var(--accent-line); }
.dfield{ display:flex; flex-direction:column; gap:3px; }
.dfield dt{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.dfield dd{ margin:0; font-size:13px; color:var(--ink); }

tfoot.totals td{ padding:13px 14px; border-top:2px solid var(--line-2); background:var(--surface-2); font-size:13px; }
.totals-wrap{ display:flex; gap:22px; flex-wrap:wrap; align-items:baseline; }
.totals-wrap b{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); }
.totals-wrap .lbl{ color:var(--muted); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; margin-right:6px; }

/* statement / client report */
.statement-head{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 24px; display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.statement-head .who{ display:flex; flex-direction:column; gap:4px; }
.statement-head .who .eyebrow{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.statement-head .who h1{ margin:0; font-size:26px; letter-spacing:-.02em; }
.statement-head .who .sub{ color:var(--ink-2); font-size:13px; }

.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:14px 0 6px; }
.tile{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 16px 15px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; }
.tile .t-label{ font-size:12px; color:var(--muted); }
.tile .t-value{ font-family:var(--mono); font-size:30px; font-weight:600; letter-spacing:-.01em; color:var(--ink); line-height:1; }
.tile .t-value small{ font-size:15px; color:var(--ink-2); margin-left:2px; font-weight:500; }
.tile .t-delta{ font-size:11.5px; color:var(--muted); font-family:var(--mono); }
.tile.hero{ border-color:var(--accent-line); background:linear-gradient(180deg,var(--accent-soft),var(--surface)); }
.tile.cond{ border-style:dashed; }

.chartcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px 16px; margin-top:12px; }
.chartcard .ch-title{ font-size:14px; font-weight:600; margin:0 0 2px; }
.chartcard .ch-sub{ font-size:12px; color:var(--muted); margin:0 0 16px; }
.barchart{ --label-w:112px; position:relative; }
.bc-grid{ position:absolute; left:var(--label-w); right:6px; top:0; bottom:22px; display:flex; justify-content:space-between; pointer-events:none; }
.bc-grid span{ width:1px; background:var(--grid); }
.bc-rows{ position:relative; display:flex; flex-direction:column; gap:13px; }
.bc-row{ display:grid; grid-template-columns:var(--label-w) 1fr; align-items:center; gap:10px; cursor:default; }
.bc-name{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink); }
.bc-name i{ width:9px; height:9px; border-radius:2px; flex:none; }
.bc-bar{ display:flex; align-items:center; gap:9px; }
.bc-fill{ height:16px; border-radius:0 4px 4px 0; min-width:2px; transition:filter .12s; }
.bc-row:hover .bc-fill{ filter:brightness(1.06); }
.bc-val{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--ink); font-weight:600; }
.bc-axis{ margin-left:var(--label-w); margin-top:8px; display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; color:var(--muted); }
.fill-lake{background:var(--s-lake)} .fill-nhri{background:var(--s-nhri)} .fill-isafe{background:var(--s-isafe)} .fill-matt{background:var(--s-matt)}
.dot-lake{background:var(--s-lake)} .dot-nhri{background:var(--s-nhri)} .dot-isafe{background:var(--s-isafe)} .dot-matt{background:var(--s-matt)}

#bc-tip{
  position:fixed; z-index:80; pointer-events:none; opacity:0; transform:translateY(-4px);
  background:var(--ink); color:var(--plane); font-size:12px; padding:8px 11px; border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.28); transition:opacity .1s; max-width:220px; line-height:1.4;
}
#bc-tip b{ font-family:var(--mono); }
#bc-tip .tt-name{ font-weight:600; display:block; margin-bottom:2px; }

.grp{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-top:12px; }
.grp-head{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.grp-head .grp-sub{ margin-left:auto; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--ink-2); }
.stmt-row{ display:grid; grid-template-columns:1fr auto auto; gap:8px 16px; padding:12px 16px; border-bottom:1px solid var(--line); align-items:baseline; }
.stmt-row.no-amt{ grid-template-columns:1fr auto; }
.stmt-row.solo{ grid-template-columns:1fr; }
.stmt-row:last-child{ border-bottom:0; }
.stmt-row .it{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.stmt-row .it b{ font-weight:600; font-size:13.5px; }
.stmt-row .it span{ color:var(--muted); font-size:12px; }
.stmt-row .hrs{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13px; color:var(--ink); white-space:nowrap; }
.stmt-row .amt{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13px; color:var(--ink-2); white-space:nowrap; text-align:right; min-width:78px; }
.stmt-row .amt.blank{ color:var(--muted); }
.grand{ display:flex; align-items:baseline; gap:16px; padding:15px 16px; background:var(--accent-soft); border-top:2px solid var(--accent-line); }
.grand .g-lbl{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.grand .g-val{ margin-left:auto; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:20px; font-weight:700; color:var(--ink); }
.grand .g-amt{ font-family:var(--mono); font-size:13px; color:var(--ink-2); }

/* requirements */
.req-grid{ display:grid; grid-template-columns:340px 1fr; gap:16px; align-items:start; }
.form-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; }
.form-card h3{ margin:0 0 14px; font-size:14px; }
.field{ display:flex; flex-direction:column; gap:5px; margin-bottom:13px; }
.field label{ font-size:12px; color:var(--ink-2); font-weight:600; }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:13.5px; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line-2); border-radius:8px; padding:9px 11px; width:100%; resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); background:var(--surface); }
.field textarea{ min-height:78px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field-note{ font-size:11.5px; color:var(--muted); line-height:1.45; }

/* 使用者授權勾選清單 / 一次性明碼 */
.grant-list{ display:flex; flex-wrap:wrap; gap:8px; }
.grant-item{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; background:var(--surface-2); border:1px solid var(--line-2); border-radius:8px; padding:7px 11px; font-size:13px; color:var(--ink-2); }
.grant-item input{ width:auto; margin:0; accent-color:var(--accent); }
.cred{ display:inline-block; font-family:var(--mono); font-size:17px; font-weight:700; letter-spacing:.04em; color:var(--ink); background:var(--surface-2); border:1px dashed var(--line-2); border-radius:8px; padding:11px 14px; user-select:all; }

.req-list{ display:flex; flex-direction:column; gap:10px; }
.req-item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.req-top{ display:flex; align-items:center; gap:12px; padding:13px 16px; cursor:pointer; }
.req-top .req-title{ font-weight:600; font-size:13.5px; flex:1 1 auto; min-width:0; }
.req-top .req-date{ font-family:var(--mono); font-size:11.5px; color:var(--muted); white-space:nowrap; }
.req-top .caret2{ color:var(--muted); font-size:12px; }
.req-body{ padding:0 16px 16px 16px; border-top:1px solid var(--line); }
.req-desc{ font-size:13px; color:var(--ink-2); margin:13px 0 16px; }
.thread{ display:flex; flex-direction:column; gap:12px; }
.msg{ display:flex; gap:11px; }
.msg .m-av{ width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:12px; font-weight:700; }
.msg.client .m-av{ background:var(--chip-lake-bg); color:var(--chip-lake-fg); }
.msg.dev .m-av{ background:var(--accent); color:var(--accent-ink); }
.m-bubble{ background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:9px 12px; }
.m-meta{ font-size:11px; color:var(--muted); margin-bottom:3px; }
.m-meta b{ color:var(--ink); font-weight:600; }
.m-meta .num{ margin-left:6px; }
.m-text{ font-size:13px; color:var(--ink); white-space:pre-wrap; }
.reply-box{ display:flex; gap:8px; margin-top:14px; }
.reply-box input{ flex:1 1 auto; font-family:var(--sans); font-size:13px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:8px; padding:9px 11px; color:var(--ink); }
.status-form{ display:inline-flex; gap:6px; align-items:center; margin-left:auto; }
.status-form select{ font-family:var(--sans); font-size:12.5px; color:var(--ink); background:var(--surface-2); border:1px solid var(--line-2); border-radius:7px; padding:5px 8px; }

/* login */
.login-wrap{ min-height:62vh; display:grid; place-items:center; padding:30px 0; }
.login-card{ width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:34px 30px 28px; }
.login-brand{ display:flex; flex-direction:column; align-items:center; gap:7px; margin-bottom:26px; }
.login-brand b{ font-size:27px; font-weight:700; letter-spacing:-.02em; border-bottom:2.5px solid var(--accent); padding-bottom:5px; }
.login-brand b i{ font-style:normal; color:var(--accent); }
.login-brand small{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.login-card .btn-primary{ width:100%; justify-content:center; padding:11px; margin-top:6px; font-size:14.5px; }
.login-hint{ text-align:center; font-size:11.5px; color:var(--muted); margin-top:16px; }

/* flash / alerts */
.alert{ border-radius:10px; padding:10px 13px; font-size:13px; margin-bottom:14px; border:1px solid transparent; }
.alert-error{ background:var(--st-decl-bg); color:var(--st-decl-fg); border-color:var(--st-decl-fg); }
.alert-ok{ background:var(--confirmed-bg); color:var(--confirmed); border-color:var(--confirmed-line); }

.form-page{ max-width:640px; }
.form-actions{ display:flex; gap:10px; margin-top:8px; }
.empty-state{ background:var(--surface); border:1px dashed var(--line-2); border-radius:var(--radius); padding:30px; text-align:center; color:var(--muted); font-size:13.5px; }

@media (max-width:720px){
  .stage{ padding:16px 13px 34px; }
  .req-grid{ grid-template-columns:1fr; }
  .barchart{ --label-w:96px; }
  .topbar{ padding:11px 13px; }
  .statement-head .who h1{ font-size:22px; }
  .field-row{ grid-template-columns:1fr; }
}