:root { --bg:#0f1320; --card:#1a2032; --ink:#e8ecf6; --muted:#8b94ad; --line:#2a3147;
  --accent:#5b8cff; --pos:#3ecf8e; --neg:#ff6b6b; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, "Noto Sans TC", sans-serif; background:var(--bg); color:var(--ink); }
a { color:var(--accent); text-decoration:none; }
.nav { display:flex; justify-content:space-between; align-items:center; padding:14px 22px;
  background:#141a2b; border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:18px; color:#9cc2ff; }
.nav nav { display:flex; gap:16px; align-items:center; }
.who { color:var(--muted); }
.seeall { float:right; font-size:13px; font-weight:400; }
main { max-width:1100px; margin:24px auto; padding:0 16px; }
.site-footer { max-width:1100px; margin:32px auto 24px; padding:18px 16px 0;
  border-top:1px solid var(--line); text-align:center; color:var(--muted);
  font-size:13px; line-height:1.9; }
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; }
.card.wide { grid-column:1 / -1; }
.card.login { max-width:380px; margin:8vh auto; }
h1 { font-size:22px; margin:.2em 0; } h2 { font-size:16px; margin:0 0 12px; }
h3 { font-size:14px; color:var(--muted); margin:16px 0 8px; }
.big { font-size:34px; font-weight:700; margin:6px 0; }
.muted { color:var(--muted); font-size:13px; }
.error { color:var(--neg); }
label { display:block; font-size:13px; color:var(--muted); margin:10px 0 0; }
input, select { width:100%; margin-top:4px; padding:9px 10px; border-radius:9px;
  border:1px solid var(--line); background:#0e1322; color:var(--ink); font-size:14px; }
/* inside tables, controls size to content (don't collapse in auto-width cells) */
td select, td input { width:auto; min-width:88px; margin-top:0; }
button { margin-top:12px; padding:9px 14px; border-radius:9px; border:1px solid var(--line);
  background:#222a40; color:var(--ink); cursor:pointer; font-size:14px; }
button.primary { background:var(--accent); border-color:var(--accent); color:#0b0f1a; font-weight:600; }
button.link { background:none; border:none; color:var(--accent); padding:4px 6px;
  font:inherit; cursor:pointer; }
button.link.danger { color:var(--neg); }
/* logout lives in a <form>; display:contents removes that wrapper box so the
   button becomes a direct flex sibling of the nav links and aligns with them */
.nav nav form.inline { display:contents; }
.nav nav a, .nav nav .who, .nav nav button.link {
  display:inline-flex; align-items:center; line-height:1; padding:0; margin:0; }
.inline { display:inline; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:600; }
.pos { color:var(--pos); } .neg { color:var(--neg); }
.settle { list-style:none; padding:0; }
.settle li { padding:8px 0; border-bottom:1px solid var(--line); }
tr.inactive { opacity:.45; }
.actions a, .actions button { margin-right:8px; }
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.filters { display:flex; gap:14px 22px; align-items:center; flex-wrap:wrap; margin:10px 0 18px; }
/* each filter is "label control" inline with a little breathing room */
.filters label { margin:0; display:inline-flex; align-items:center; gap:6px; }
.filters select { width:auto; min-width:120px; }
/* date inputs default to width:100% and would wrap to their own line; size
   them to content so they sit inline with the other filter controls */
.filters input { width:auto; }
.filters .primary { margin-top:0; }
.aa-bar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.stat-row { display:flex; gap:28px; flex-wrap:wrap; }
.chart-box { height:130px; margin-top:10px; }
.switch { display:inline-flex; align-items:center; gap:8px; margin:0; color:var(--ink); font-size:15px; }
.switch input { width:auto; margin:0; }
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex;
  align-items:center; justify-content:center; z-index:1000; }
.modal { background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:20px; width:min(92vw,520px); max-height:80vh; overflow:auto; }
.cand-list { display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.cand { text-align:left; width:100%; }
.modal-actions { display:flex; justify-content:space-between; margin-top:10px; }
@media (max-width:720px){
  .grid { grid-template-columns:1fr; gap:12px; }
  main { margin:16px auto; }

  /* nav wraps: brand on its own line (bigger + centered), links underneath */
  .nav { padding:12px 14px; flex-wrap:wrap; }
  .nav nav { width:100%; margin-top:14px; gap:16px; flex-wrap:wrap; row-gap:8px; }
  .brand { width:100%; text-align:center; font-size:24px; margin-bottom:4px; }
  /* nickname stays left; push 登出 to the far right of the row */
  .nav nav button.link { margin-left:auto; }

  .card { padding:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .card.login { margin:6vh auto; }
  .big { font-size:28px; }

  /* 16px inputs stop iOS from zooming in on focus */
  input, select { font-size:16px; }

  /* primary action buttons span the card for easy tapping */
  .card > button.primary { width:100%; }

  /* wide tables scroll horizontally instead of squashing the layout */
  .card table { white-space:nowrap; }
  th, td { padding:8px; }

  /* roomier tap targets for inline row actions */
  .actions a, .actions button { display:inline-block; padding:6px 8px; margin:2px 6px 2px 0; }

  .modal-overlay { padding:14px; }
  .modal-actions { flex-direction:column; gap:8px; }
  .modal-actions button { width:100%; }
}