[hidden] { display: none !important; }
/* Layout: 魔王血條橫跨頂部 → 左欄懸賞榜與任務板、右欄個人面板；窄螢幕單欄堆疊 */
:root {
  --bg: #f3f4f8;
  --surface: #ffffff;
  --surface-2: #eceef5;
  --line: #d9dce8;
  --fg: #161a2e;
  --fg-muted: #5c6280;
  --accent: #3346c9;
  --boss: #b3263a;
  --boss-track: #f1d9dd;
  --r-common: #2f8a57;
  --r-rare: #2d6fd2;
  --r-epic: #8a3fc7;
  --r-legend: #d9741a;
  --ok: #2f8a57;
  --warn: #b7791f;
  --crit: #c2334a;
  --shadow: 0 1px 2px rgba(22, 26, 46, .06), 0 6px 18px rgba(22, 26, 46, .06);
  --f-display: "Chakra Petch", "Noto Sans TC", system-ui, sans-serif;
  --f-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1120; --surface: #171a2e; --surface-2: #1f2340; --line: #2c3156;
    --fg: #e8eaf6; --fg-muted: #9aa0c3; --accent: #8495ff;
    --boss: #ff6b81; --boss-track: #3a1d2a;
    --r-common: #4cc27f; --r-rare: #5b9bff; --r-epic: #b980f5; --r-legend: #ffa04d;
    --ok: #4cc27f; --warn: #f0b44c; --crit: #ff6b81;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1120; --surface: #171a2e; --surface-2: #1f2340; --line: #2c3156;
  --fg: #e8eaf6; --fg-muted: #9aa0c3; --accent: #8495ff;
  --boss: #ff6b81; --boss-track: #3a1d2a;
  --r-common: #4cc27f; --r-rare: #5b9bff; --r-epic: #b980f5; --r-legend: #ffa04d;
  --ok: #4cc27f; --warn: #f0b44c; --crit: #ff6b81;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 14px; line-height: 1.55; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 16px; padding-block: 20px 48px; display: grid; gap: 20px; }
h1, h2, h3 { font-family: var(--f-display); margin: 0; text-wrap: balance; }
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
button { font: inherit; cursor: pointer; }
button:focus-visible, .card:focus-visible, [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Header */
.top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
.eyebrow { font-size: 12px; letter-spacing: .08em; color: var(--fg-muted); text-transform: uppercase; }
.top h1 { font-size: 26px; font-weight: 700; }
.sample { font-size: 12px; color: var(--warn); border: 1px solid currentColor; border-radius: 4px; padding: 1px 6px; margin-left: 8px; vertical-align: middle; font-family: var(--f-body); }
.roles { display: inline-flex; background: var(--surface-2); border-radius: 8px; padding: 3px; gap: 3px; }
.roles button { border: 0; background: transparent; color: var(--fg-muted); padding: 6px 12px; border-radius: 6px; font-size: 13px; }
.roles button[aria-selected="true"] { background: var(--surface); color: var(--fg); box-shadow: var(--shadow); font-weight: 600; }

/* Boss bar */
.boss { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; display: grid; gap: 12px; }
.boss-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; }
.boss-head h2 { font-size: 18px; }
.boss-head h2 small { font-family: var(--f-body); font-weight: 400; color: var(--fg-muted); font-size: 13px; margin-left: 6px; }
.hp-read { font-size: 13px; color: var(--fg-muted); }
.hp-read b { color: var(--boss); font-size: 20px; font-family: var(--f-mono); }
.hp { position: relative; height: 22px; background: var(--boss-track); border-radius: 6px; overflow: hidden; }
.hp-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--boss), color-mix(in srgb, var(--boss) 70%, var(--r-legend))); border-radius: 6px 0 0 6px; }
.chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.chapters li { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 1px; font-size: 12.5px; min-width: 0; }
.chapters .n { font-family: var(--f-display); font-weight: 600; font-size: 12px; color: var(--fg-muted); }
.chapters .t { font-weight: 600; }
.chapters .s { font-size: 12px; color: var(--fg-muted); }
.chapters li.sealed { background: var(--surface-2); }
.chapters li.sealed .s { color: var(--ok); }
.chapters li.now { border-color: var(--boss); box-shadow: inset 0 0 0 1px var(--boss); }
.chapters li.now .s { color: var(--boss); font-weight: 600; }
.chapters li.fog { border-style: dashed; color: var(--fg-muted); background: repeating-linear-gradient(135deg, transparent 0 7px, var(--surface-2) 7px 14px); }
.hp-expect { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; background: var(--fg); border-radius: 2px; z-index: 1; }
.hp-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--fg-muted); }
.hp-legend i { display: inline-block; width: 3px; height: 12px; background: var(--fg); vertical-align: -2px; margin-right: 6px; border-radius: 1px; }
.hp-legend .behind { color: var(--warn); font-weight: 600; }
.hp-ticks { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); pointer-events: none; }
.hp-ticks span { border-right: 2px solid var(--surface); }
.hp-ticks span:last-child { border-right: 0; }
.boss-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--fg-muted); }
.boss-foot strong { color: var(--fg); font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--fg); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip.ok { color: var(--ok); } .chip.warn { color: var(--warn); }
.chip span.t { color: var(--fg); }

/* Main grid */
.main { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
@media (max-width: 960px) { .main { grid-template-columns: minmax(0, 1fr); } }
.col { display: grid; gap: 20px; min-width: 0; }

/* Section heads */
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.sec-head h2 { font-size: 17px; }
.sec-head p { margin: 0; color: var(--fg-muted); font-size: 13px; }

/* Bounty board */
.bounty { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.bounty-banner { display: flex; align-items: center; gap: 10px; }
.bounty-banner h2 { font-size: 19px; }
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 14px 12px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.card[data-rarity="epic"], .card[data-rarity="legend"] { border-color: transparent; background:
  linear-gradient(var(--surface), var(--surface)) padding-box,
  linear-gradient(var(--angle, 120deg), var(--rc), color-mix(in srgb, var(--rc) 25%, var(--surface)), var(--rc)) border-box;
  border-width: 1.5px; box-shadow: 0 0 0 0 transparent, 0 4px 20px color-mix(in srgb, var(--rc) 22%, transparent); }
.card[data-rarity="common"] { --rc: var(--r-common); }
.card[data-rarity="rare"] { --rc: var(--r-rare); }
.card[data-rarity="epic"] { --rc: var(--r-epic); }
.card[data-rarity="legend"] { --rc: var(--r-legend); }
@property --angle { syntax: "<angle>"; initial-value: 120deg; inherits: false; }
@keyframes shimmer { to { --angle: 480deg; } }
.card[data-rarity="legend"], .card[data-rarity="epic"] { animation: shimmer 6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .card { animation: none !important; } }

.card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rarity { font-size: 11px; letter-spacing: .06em; font-weight: 700; color: var(--rc); text-transform: uppercase; font-family: var(--f-display); }
.size { font-family: var(--f-mono); font-size: 11px; color: var(--fg-muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.card h3 { font-size: 15px; font-weight: 600; line-height: 1.35; font-family: var(--f-body); }
.card h3 .icons { margin-right: 4px; }
.card .quest { font-size: 12px; color: var(--fg-muted); }
.card .meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--fg-muted); }
.card .meta span { background: var(--surface-2); padding: 1px 7px; border-radius: 4px; }
.card .meta span.combo { color: var(--boss); background: color-mix(in srgb, var(--boss) 12%, transparent); font-weight: 600; }
.exp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.exp { font-family: var(--f-mono); font-weight: 700; font-size: 18px; color: var(--rc); }
.exp small { font-size: 11px; font-weight: 500; color: var(--fg-muted); margin-left: 2px; }
.overclock { display: none; font-size: 12px; font-weight: 600; color: var(--r-legend); background: color-mix(in srgb, var(--r-legend) 12%, transparent); padding: 1px 7px; border-radius: 4px; font-family: var(--f-mono); }
body[data-role="general"] .card.senior .overclock { display: inline-block; }
.btn { border: 1px solid var(--line); background: var(--surface-2); color: var(--fg); border-radius: 7px; padding: 5px 12px; font-size: 13px; font-weight: 600; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.claimed-by { font-size: 12px; color: var(--fg-muted); }
.note { font-size: 12px; color: var(--crit); margin: 0; }

/* Hover tooltip for general engineers on senior cards */
.tip { display: none; position: absolute; left: 10px; right: 10px; top: calc(100% - 6px); z-index: 5; background: var(--fg); color: var(--bg); font-size: 12.5px; line-height: 1.5; padding: 10px 12px; border-radius: 8px; box-shadow: var(--shadow); }
.tip::before { content: ""; position: absolute; top: -6px; left: 24px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--fg); }
body[data-role="general"] .card.senior:hover .tip,
body[data-role="general"] .card.senior:focus-within .tip { display: block; }

/* Quest board */
.board { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tabs button { border: 1px solid var(--line); background: transparent; color: var(--fg-muted); padding: 4px 10px; border-radius: 999px; font-size: 12.5px; }
.tabs button[aria-selected="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* Side panel */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; display: grid; gap: 16px; }
.who { display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); font-family: var(--f-display); font-weight: 700; font-size: 18px; color: var(--accent); }
.who h2 { font-size: 17px; }
.who p { margin: 0; font-size: 12.5px; color: var(--fg-muted); }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; }
.stat .l { font-size: 12px; color: var(--fg-muted); }
.stat .v { font-family: var(--f-mono); font-size: 22px; font-weight: 700; }
.stat .v small { font-size: 12px; color: var(--fg-muted); font-weight: 500; }
.share { display: grid; gap: 6px; }
.share .l { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--fg-muted); }
.bar { position: relative; height: 10px; background: var(--surface-2); border-radius: 5px; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--r-epic); border-radius: 5px; }
.bar .mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--fg); }
.bar .mark-l { position: absolute; top: 14px; transform: translateX(-50%); font-size: 11px; color: var(--fg-muted); white-space: nowrap; }
.panel h3 { font-size: 13.5px; font-family: var(--f-body); font-weight: 700; margin-bottom: 6px; }
.claim { border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 4px; font-size: 13px; }
.claim .t { font-weight: 600; }
.claim .s { font-size: 12px; color: var(--fg-muted); }
.claim .timer { color: var(--warn); font-family: var(--f-mono); font-size: 12px; }
.radar { width: 100%; height: auto; display: block; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 9px; border-radius: 6px; background: var(--surface-2); }
.badge.locked { opacity: .5; }
.badge .p { font-family: var(--f-mono); font-size: 11px; color: var(--fg-muted); }

/* Feed */
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.feed li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; }
.feed time { font-family: var(--f-mono); font-size: 11.5px; color: var(--fg-muted); padding-top: 2px; }

.rules { font-size: 12.5px; color: var(--fg-muted); margin: 0; padding-left: 18px; display: grid; gap: 3px; }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 9px 16px; border-radius: 8px; font-size: 13px; box-shadow: var(--shadow); max-width: calc(100% - 32px); }

/* 本機版新增：檢視身分選單、表單對話框、主管面板 */
.viewer { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-muted); }
select, input, textarea { font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; min-width: 0; }
textarea { width: 100%; min-height: 90px; resize: vertical; }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.card .status { font-size: 12px; font-weight: 600; color: var(--warn); }
.card .status.done { color: var(--ok); }
.card .updates { font-size: 12px; color: var(--fg-muted); margin: 0; padding-left: 16px; }
.card .accept { font-size: 12px; color: var(--fg-muted); }
dialog { border: 1px solid var(--line); border-radius: 12px; padding: 0; background: var(--surface); color: var(--fg); width: min(480px, calc(100% - 32px)); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(10, 12, 24, .45); }
dialog form { padding: 18px 20px; display: grid; gap: 12px; }
dialog h2 { font-size: 17px; }
.field { display: grid; gap: 4px; font-size: 13px; }
.field > span { color: var(--fg-muted); }
.field .hint, td .hint { font-size: 12px; color: var(--fg-muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.checks label { display: inline-flex; gap: 5px; align-items: center; }
.form-err { color: var(--crit); font-size: 13px; margin: 0; }
.admin { display: grid; gap: 8px; }
.admin .btn { text-align: left; }
.team { width: 100%; border-collapse: collapse; font-size: 13px; }
.team th, .team td { text-align: left; padding: 5px 4px; border-bottom: 1px solid var(--line); }
.team th { font-weight: 600; color: var(--fg-muted); font-size: 12px; }
.team td.n { font-family: var(--f-mono); text-align: right; }
.team .flag { color: var(--warn); font-weight: 600; }
.ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.ledger li { display: flex; justify-content: space-between; gap: 8px; }
.ledger .a { font-family: var(--f-mono); }
.ledger .a.neg { color: var(--crit); }
.empty { color: var(--fg-muted); font-size: 13px; }
.waiting { font-size: 13px; color: var(--fg-muted); border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; }
/* 登入 */
.account { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.who-chip { display: grid; font-weight: 600; font-size: 13.5px; text-align: right; }
.who-chip small { font-weight: 400; font-size: 12px; color: var(--fg-muted); }
.auth { display: grid; justify-items: center; padding-top: 24px; }
.auth-form { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px 20px; display: grid; gap: 12px; }
.auth-form h2 { font-size: 18px; }

/* 個人 OKR */
.okr-list { display: grid; gap: 10px; }
.okr-member { border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; }
.okr-member[open] { padding-bottom: 14px; }
.okr-member > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 0; cursor: pointer; font-weight: 600; }
.okr-member > summary .pct { margin-left: auto; font-family: var(--f-mono); font-size: 13px; }
.okr-member.mine { border-color: var(--accent); }
.okr-state { font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 4px; background: var(--surface-2); color: var(--fg-muted); }
.okr-state.locked { color: var(--ok); }
.okr-state.draft { color: var(--warn); }
.okr-body { display: grid; gap: 12px; }
.okr-obj { display: grid; gap: 6px; }
.okr-obj-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.okr-obj-head h3 { font-size: 14px; font-family: var(--f-body); font-weight: 700; }
.okr-obj-head .pct { margin-left: auto; font-family: var(--f-mono); font-size: 12.5px; }
.okr-krs { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--line); display: grid; gap: 8px; }
.okr-kr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; font-size: 13px; }
.okr-kr .src { grid-column: 1; font-size: 12px; color: var(--fg-muted); }
.okr-kr .pct { font-family: var(--f-mono); font-size: 12.5px; text-align: right; }
.okr-kr .okr-bar { grid-column: 1 / -1; }
.okr-bar { position: relative; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.okr-bar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 3px; }
.okr-bar.good i { background: var(--ok); }
.okr-private { border-top: 1px dashed var(--line); padding-top: 10px; display: grid; gap: 8px; font-size: 13px; }
.okr-private h4 { margin: 0; font-size: 12.5px; color: var(--fg-muted); font-weight: 600; }
.okr-comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.okr-comments li { background: var(--surface-2); border-radius: 8px; padding: 6px 10px; }
.okr-comments .by { font-size: 11.5px; color: var(--fg-muted); }
.okr-review { white-space: pre-wrap; margin: 0; }
.btn.sm { padding: 2px 8px; font-size: 12px; }
.btn-row.start { justify-content: flex-start; }

.setup { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; display: grid; gap: 10px; }

/* 團隊使命、本季重點、週期：首頁頂端一條 */
.team-banner { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 20px; display: grid; gap: 10px 24px; grid-template-columns: 2fr 2fr 1fr; align-items: start; }
.team-banner p { margin: 2px 0 0; }
.team-banner small { color: var(--fg-muted); }
.tb-l { font-size: 12px; color: var(--fg-muted); font-weight: 600; }
.tb-actions { grid-column: 1 / -1; }
@media (max-width: 720px) { .team-banner { grid-template-columns: 1fr; } }

/* 團隊 OKR：放在個人 OKR 上面 */
.team-okr { border: 1px solid var(--accent); border-radius: 10px; padding: 12px 14px; display: grid; gap: 10px; margin-bottom: 10px; background: var(--surface-2); }
.align-tag { font-size: 12px; font-weight: 500; color: var(--accent); white-space: nowrap; }

/* 服務管理員：各團隊彙總卡片 */
.sysadmin { display: grid; gap: 14px; }
.sysadmin > .admin { grid-template-columns: repeat(auto-fit, minmax(220px, max-content)); }
.sys-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.sys-team { gap: 10px; align-content: start; }
.sys-team.archived { opacity: .65; }
.sys-team .okr-obj-head h3 { margin: 0 auto 0 0; font-size: 16px; }
.sys-team .quote { margin: 0; color: var(--fg-muted); font-size: 13px; }
.sys-dl { display: grid; grid-template-columns: 5.5em 1fr; gap: 6px 10px; margin: 0; font-size: 13px; }
.sys-dl dt { color: var(--fg-muted); font-weight: 600; }
.sys-dl dd { margin: 0; min-width: 0; }
.sys-dl small { color: var(--fg-muted); }