:root {
  --blue: #006379;       /* dark blue: authority, primary */
  --blue-light: #008197; /* light blue */
  --orange: #eb4123;     /* dark orange: actions */
  --orange-light: #ed5a29;
  --gray: #ebe8e6;
  --bg: #ebe8e6; --card: #fff; --ink: #1d2a2e; --muted: #5d6b6f; --line: #d6d2cf;
  --nav-bg: #006379; --nav-ink: #fff; --accent: #006379; --on-accent: #fff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1f24; --card: #16303a; --ink: #ebe8e6; --muted: #9db3b8; --line: #254552;
    --nav-bg: #006379; --accent: #4cc3d9; --on-accent: #0d1f24;
  }
}
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui,sans-serif; background:var(--bg); color:var(--ink); }
nav { display:flex; flex-wrap:wrap; gap:6px 22px; align-items:center; padding:12px 20px; background:var(--nav-bg); color:var(--nav-ink); }
nav strong { letter-spacing:.02em; }
nav a { color:rgba(255,255,255,.75); text-decoration:none; }
nav a:hover { color:#fff; }
nav a.active { color:#fff; font-weight:600; border-bottom:2px solid var(--orange); }
main { padding:20px; max-width:1400px; margin:0 auto; }
h1 { margin:0 0 16px; font-size:22px; color:var(--accent); }
h2 { color:var(--accent); }
a { color:var(--accent); }
.board { display:grid; grid-auto-flow:column; grid-auto-columns:260px; gap:12px; overflow-x:auto; padding-bottom:8px; }
.col h2 { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px; margin-bottom:8px; }
.card .meta, .meta { color:var(--muted); font-size:13px; }
input, select, button, textarea { font:inherit; color:inherit; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:6px 10px; }
textarea { width:100%; }
button { cursor:pointer; background:var(--orange); color:#fff; border-color:var(--orange); font-weight:600; }
button:hover { background:var(--orange-light); border-color:var(--orange-light); }
button:disabled { opacity:.6; cursor:default; }
button.ghost { background:none; color:var(--accent); border-color:var(--accent); }
button.ghost:hover { background:var(--accent); color:var(--on-accent); }
summary { cursor:pointer; color:var(--accent); font-size:13px; margin-top:8px; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:8px; }
th, td { text-align:left; padding:8px 12px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:500; font-size:13px; }
td a { text-decoration:none; font-weight:500; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.section { margin-top:22px; }
.empty { color:var(--muted); }
.avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; font-weight:600; flex:none; }
.who { display:flex; align-items:center; gap:10px; }
.newform { margin-bottom:14px; }
.newform summary { display:inline-block; list-style:none; background:var(--orange); color:#fff; padding:6px 12px; border-radius:6px; font-weight:600; margin:0; }
.newform summary::-webkit-details-marker { display:none; }
.newform[open] summary { margin-bottom:10px; }
.formbody { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px; display:grid; gap:10px; max-width:520px; }
.field { display:grid; gap:4px; }
.field input, .field select { width:100%; }
.chip { display:inline-flex; align-items:center; gap:4px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:2px 4px 2px 10px; }
.chip a { text-decoration:none; font-weight:500; }
.chip-x { background:none; border:none; color:var(--muted); padding:0 6px; font-size:16px; line-height:1; font-weight:400; }
.chip-x:hover { background:none; color:var(--orange); }