/* 登入、帳號頁面:沿用儀表板(reference.html)的設計變數 */
:root {
  --font-anthropic-sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-anthropic-serif: "Noto Serif TC", "Songti TC", Georgia, serif;
  --cds-font-size-caption: 12px; --cds-font-size-body: 14px; --cds-font-size-heading: 16px; --cds-font-size-title: 30px;
  --cds-font-weight-medium: 600;
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 16px; --cds-gap-lg: 24px;
  --cds-pad-xs: 4px; --cds-pad-sm: 8px; --cds-pad-lg: 20px;
  --cds-radius: 10px;
  --color-bg: #f7f6f2; --color-panel: #ffffff; --color-fg: #1f1e1b; --color-fg-muted: #6b6a64;
  --color-border-line: #e4e2db; --color-ok: #2f7d4f; --color-warn: #b26a00; --color-bad: #c0392b;
  --color-accent: #3b7dd8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1b1a18; --color-panel: #252421; --color-fg: #ecebe6; --color-fg-muted: #a3a29b;
    --color-border-line: #383631; --color-ok: #5fbf85; --color-warn: #e0a346; --color-bad: #ef6b5e;
    --color-accent: #6aa0ea;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-anthropic-sans); font-size: var(--cds-font-size-body); }
.page { max-width: 1000px; margin: 0 auto; padding: 32px 16px 48px; }
.page.narrow { max-width: 420px; padding-top: 12vh; }
h1 { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); margin: 0 0 var(--cds-gap-xs); }
h2 { font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); margin: 0 0 var(--cds-gap-md); }
.muted { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
.card { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-lg); margin-top: var(--cds-gap-md); }
.stack { display: flex; flex-direction: column; gap: var(--cds-gap-md); }
.row { display: flex; flex-wrap: wrap; gap: var(--cds-gap-sm); align-items: end; }
.row > label { flex: 1 1 12rem; }
label { display: block; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
input, select { display: block; width: 100%; margin-top: var(--cds-gap-xs); padding: 8px 10px; font: inherit; font-size: 16px; color: var(--color-fg); background: var(--color-bg); border: 1px solid var(--color-border-line); border-radius: 8px; }
input:focus, select:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; }
button { font: inherit; cursor: pointer; border-radius: 8px; padding: 8px 14px; border: 1px solid var(--color-border-line); background: var(--color-panel); color: var(--color-fg); }
button.primary { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); }
button.small { padding: 3px 8px; font-size: var(--cds-font-size-caption); }
button:disabled { opacity: .5; cursor: default; }
a { color: var(--color-accent); }
.msg { border-radius: 8px; padding: 8px 12px; font-size: var(--cds-font-size-body); }
.msg.error { background: color-mix(in srgb, var(--color-bad) 12%, transparent); color: var(--color-bad); }
.msg.ok { background: color-mix(in srgb, var(--color-ok) 12%, transparent); color: var(--color-ok); }
.topbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--cds-gap-sm); margin-bottom: var(--cds-gap-lg); }
.topbar nav { display: flex; flex-wrap: wrap; gap: var(--cds-gap-md); font-size: var(--cds-font-size-caption); }
.topbar nav a, .topbar nav button { color: var(--color-fg-muted); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; font-size: var(--cds-font-size-caption); }
.wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: left; font-weight: var(--cds-font-weight-medium); font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); padding: 4px 8px; border-bottom: 1px solid var(--color-border-line); white-space: nowrap; }
td { padding: 6px 8px; border-bottom: 1px solid var(--color-border-line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td .actions { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { display: inline-block; font-size: var(--cds-font-size-caption); border: 1px solid var(--color-border-line); border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.tag.off { color: var(--color-bad); }