/* kklab.me 站群統一 UI —— 唯一一份 token 與基礎元件(spec §1、§2)。
 *
 * 由 home 在 /theme.css 供應(home/server.py 的 do_GET,寫法同 /badge-notify.js);
 * 各站以站內絕對路徑 <link rel="stylesheet" href="/theme.css"> 掛載
 * ——各站有 <base href="/<前綴>/">,相對路徑會變成 /org/theme.css 而 404。
 *
 * 硬規則(由 repo 根的 test_theme.py 守住):
 *   1. 元件區不得出現任何字面 hex,顏色一律 var(--kk-*)。
 *   2. 深色與亮色兩組的 --kk-* 鍵集合必須完全相等。
 *   3. 尺規(fs/sp/radius/fw/lh/z/font/wrap)只定義一次在 :root:root,不隨主題翻。
 *   4. token 區塊的選擇器必須含 :root:root,才穩定勝過各站的 10 色 fallback。
 *
 * ponytail: 本檔只接管「顏色/字族/圓角/陰影/共用元件」。各站既有的 padding、
 * 13.5px 這類不落在 --kk-sp-*/--kk-fs-* 階上的 px 一律原樣留著 —— 目標是換皮,
 * 不是重寫版面。
 * 階段 ⑥ 已評估並決定**不收斂**那些 px:光 home/server.py 就有 17 個 5px、15 個 10px、
 * 12 個 14px 這類非階值,每一處都會改變外觀而沒有一處是壞的;收斂等於用一次大 diff
 * 換零功能收益。真的要做請另立階段、逐站附深/亮截圖比對,不要夾在別的改動裡。
 */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 尺規(兩個主題同值,只定義一次;spec §1.5)─────────────────────── */
:root:root {
  --kk-font-sans: 'Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
  --kk-font-serif: 'Noto Serif TC','Songti TC',serif;
  --kk-font-mono: 'JetBrains Mono','Noto Sans Mono',ui-monospace,monospace;

  --kk-fs-xs: 12px;  --kk-fs-sm: 14px;  --kk-fs-md: 16px;  --kk-fs-lg: 18px;
  --kk-fs-xl: 22px;  --kk-fs-2xl: 28px; --kk-fs-3xl: 34px;

  --kk-fw-regular: 400; --kk-fw-medium: 500; --kk-fw-semibold: 600; --kk-fw-bold: 700;

  --kk-lh-body: 1.7;  --kk-lh-ui: 1.45;

  --kk-sp-1: 4px;  --kk-sp-2: 8px;  --kk-sp-3: 12px; --kk-sp-4: 16px;
  --kk-sp-6: 24px; --kk-sp-8: 32px; --kk-sp-12: 48px;

  --kk-radius-sm: 4px;  --kk-radius-md: 8px;  --kk-radius-lg: 12px;
  --kk-radius-xl: 16px; --kk-radius-full: 9999px;

  --kk-wrap-narrow: 880px;
  --kk-wrap: 1120px;
  --kk-wrap-wide: 1180px;
  --kk-shell-h: 56px;

  --kk-z-shell: 100; --kk-z-drawer: 200; --kk-z-modal: 300; --kk-z-toast: 400;
}

/* ── 深色(預設)—— 值全部取自 home 現檔 ─────────────────────────── */
:root:root,
:root:root[data-theme="dark"] {
  --kk-bg-canvas:   #0e0d17;
  --kk-bg-surface:  #171527;
  --kk-bg-subtle:   #1d1a33;
  --kk-bg-inset:    #0e0d17;
  --kk-bg-glow:     radial-gradient(ellipse 80% 50% at 50% -10%, #2b2450 0%, transparent 60%);

  --kk-text-primary: #e8e6f2;
  --kk-text-heading: #c9c2f5;
  --kk-text-muted:   #a49fc0;
  --kk-text-faint:   #5f5a80;
  --kk-text-on-accent: #ffffff;

  --kk-line:         #2b2745;
  --kk-line-subtle:  #1f1c33;
  --kk-line-accent:  #9b8bffa1;

  --kk-accent:       #6d5ce8;
  --kk-accent-hi:    #9b8bff;
  --kk-accent-weak:  rgba(109,92,232,.16);
  --kk-accent-grad:  linear-gradient(135deg, #6d5ce8, #9b8bff);

  --kk-state-success: #5ee8a4;
  --kk-state-warning: #ffca7a;
  --kk-state-danger:  #ff9bb0;
  --kk-state-info:    #7cc5ff;
  --kk-state-success-weak: rgba(94,232,164,.14);
  --kk-state-warning-weak: rgba(255,202,122,.14);
  --kk-state-danger-weak:  #3d1b2b;
  --kk-state-danger-line:  #a3335a;
  --kk-state-info-weak:    rgba(124,197,255,.14);

  --kk-overlay: rgba(0,0,0,.55);

  --kk-focus: #9b8bff;

  --kk-chart-1: #9b8bff;  --kk-chart-2: #5ee8a4;
  --kk-chart-3: #ffca7a;  --kk-chart-4: #7cc5ff;
  --kk-chart-5: #ff9bb0;  --kk-chart-6: #6fe3d8;
  --kk-chart-7: #c8a2ff;  --kk-chart-8: #ffb570;

  --kk-shadow-sm:    0 1px 2px rgba(0,0,0,.45);
  --kk-shadow-md:    0 8px 24px rgba(0,0,0,.55);
  --kk-shadow-side: -8px 0 24px rgba(0,0,0,.55);
  --kk-shadow-focus: 0 0 0 3px rgba(155,139,255,.40);
}

/* ── 亮色 ──────────────────────────────────────────────────────────── */
:root:root[data-theme="light"] {
  --kk-bg-canvas:   #f7f6fb;
  --kk-bg-surface:  #ffffff;
  --kk-bg-subtle:   #edebf6;
  --kk-bg-inset:    #f2f0f9;
  --kk-bg-glow:     radial-gradient(ellipse 80% 50% at 50% -10%, #e4e0f7 0%, transparent 60%);

  --kk-text-primary: #1b1830;
  --kk-text-heading: #3d32a0;
  --kk-text-muted:   #565073;
  --kk-text-faint:   #6f6a8d;
  --kk-text-on-accent: #ffffff;

  --kk-line:         #d8d4ea;
  --kk-line-subtle:  #e8e5f3;
  --kk-line-accent:  #5a49d6b2;

  --kk-accent:       #5a49d6;
  --kk-accent-hi:    #4a3ac2;
  --kk-accent-weak:  rgba(90,73,214,.10);
  --kk-accent-grad:  linear-gradient(135deg, #5a49d6, #7b6ae8);

  --kk-state-success: #0f7a4a;
  --kk-state-warning: #8a5a00;
  --kk-state-danger:  #b3244a;
  --kk-state-info:    #1c6fb8;
  --kk-state-success-weak: #e3f4ec;
  --kk-state-warning-weak: #faf0dd;
  --kk-state-danger-weak:  #fbe9ee;
  --kk-state-danger-line:  #b3244a;
  --kk-state-info-weak:    #e6f1fb;

  --kk-overlay: rgba(27,24,48,.55);

  --kk-focus: #4a3ac2;

  --kk-chart-1: #5a49d6;  --kk-chart-2: #0f7a4a;
  --kk-chart-3: #b06a00;  --kk-chart-4: #1c6fb8;
  --kk-chart-5: #b3244a;  --kk-chart-6: #0f7a78;
  --kk-chart-7: #7a45b5;  --kk-chart-8: #a15200;

  --kk-shadow-sm:    0 1px 2px rgba(27,24,48,.10);
  --kk-shadow-md:    0 8px 24px rgba(27,24,48,.14);
  --kk-shadow-side: -8px 0 24px rgba(27,24,48,.14);
  --kk-shadow-focus: 0 0 0 3px rgba(74,58,194,.28);
}

/* ── reset(取代各站的 *{margin:0;padding:0;box-sizing:border-box} )──── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  font-family: var(--kk-font-sans);
  font-size: var(--kk-fs-md);
  line-height: var(--kk-lh-body);
  color: var(--kk-text-primary);
  background: var(--kk-bg-canvas);
  background-image: var(--kk-bg-glow);
  background-repeat: no-repeat;
}
a { color: inherit; text-decoration: none; }
img, svg { vertical-align: middle; }
code, kbd, pre, samp { font-family: var(--kk-font-mono); }
:focus-visible { outline: none; box-shadow: var(--kk-shadow-focus); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── 按鈕 ─────────────────────────────────────────────────────────── */
.kk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kk-sp-2);
  font-family: inherit; font-size: var(--kk-fs-sm); font-weight: var(--kk-fw-semibold);
  line-height: var(--kk-lh-ui); padding: var(--kk-sp-2) var(--kk-sp-4);
  border: 1px solid var(--kk-line); border-radius: var(--kk-radius-md);
  background: var(--kk-bg-subtle); color: var(--kk-text-heading);
  cursor: pointer; transition: border-color .15s, filter .15s, background .15s;
}
.kk-btn:hover { border-color: var(--kk-accent-hi); }
.kk-btn:focus-visible { box-shadow: var(--kk-shadow-focus); }
.kk-btn:disabled, .kk-btn.is-loading { opacity: .5; cursor: default; }
.kk-btn--primary {
  background: var(--kk-accent-grad); border-color: transparent;
  color: var(--kk-text-on-accent); font-weight: var(--kk-fw-bold);
}
.kk-btn--primary:hover { filter: brightness(1.1); }
.kk-btn--secondary { background: var(--kk-bg-surface); color: var(--kk-text-primary); }
.kk-btn--danger {
  color: var(--kk-state-danger); border-color: var(--kk-state-danger-line);
  background: var(--kk-state-danger-weak);
}
.kk-btn--ghost { background: transparent; border-color: transparent; color: var(--kk-accent-hi); }
.kk-btn--ghost:hover { background: var(--kk-accent-weak); }
.kk-btn--sm { font-size: var(--kk-fs-xs); padding: var(--kk-sp-1) var(--kk-sp-3); }
.kk-btn--lg { font-size: var(--kk-fs-lg); padding: var(--kk-sp-3) var(--kk-sp-8); border-radius: var(--kk-radius-lg); }
.kk-btn.is-loading { cursor: wait; }

/* ── 輸入 / 選單 ──────────────────────────────────────────────────── */
.kk-input, .kk-select {
  width: 100%; font-family: inherit; font-size: var(--kk-fs-sm); line-height: var(--kk-lh-ui);
  color: var(--kk-text-primary); background: var(--kk-bg-inset);
  border: 1.5px solid var(--kk-line); border-radius: var(--kk-radius-md);
  padding: var(--kk-sp-2) var(--kk-sp-3); outline: none;
}
.kk-input:focus, .kk-select:focus { border-color: var(--kk-accent); }
.kk-input:focus-visible, .kk-select:focus-visible { box-shadow: var(--kk-shadow-focus); }
.kk-input:disabled, .kk-select:disabled { opacity: .55; cursor: not-allowed; }
.kk-input[readonly] { color: var(--kk-text-muted); background: var(--kk-bg-subtle); }
.kk-input--invalid { border-color: var(--kk-state-danger); }
.kk-input::placeholder { color: var(--kk-text-faint); }

/* ── 勾選 ─────────────────────────────────────────────────────────── */
.kk-check { display: inline-flex; align-items: center; gap: var(--kk-sp-2); cursor: pointer; }
.kk-check__box {
  width: 16px; height: 16px; accent-color: var(--kk-accent);
  border: 1px solid var(--kk-line); border-radius: var(--kk-radius-sm);
  background: var(--kk-bg-inset);
}
.kk-check__box:focus-visible { box-shadow: var(--kk-shadow-focus); }
.kk-check__box:checked, .kk-check__box:indeterminate {
  background: var(--kk-accent); border-color: var(--kk-accent);
}
.kk-check__label { font-size: var(--kk-fs-sm); color: var(--kk-text-muted); }

/* ── 表格 ─────────────────────────────────────────────────────────── */
.kk-table { width: 100%; border-collapse: collapse; font-size: var(--kk-fs-sm); }
.kk-table th {
  color: var(--kk-text-muted); font-size: var(--kk-fs-xs); font-weight: var(--kk-fw-semibold);
  text-align: left; padding: var(--kk-sp-2) var(--kk-sp-3);
  border-bottom: 1px solid var(--kk-line);
}
.kk-table td {
  color: var(--kk-text-primary); padding: var(--kk-sp-2) var(--kk-sp-3);
  border-bottom: 1px solid var(--kk-line-subtle);
}
.kk-table--zebra tbody tr:nth-child(even) td { background: var(--kk-bg-subtle); }
.kk-table__num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--kk-font-mono); }
.kk-table__sort { cursor: pointer; user-select: none; }
.kk-table__sort:focus-visible { box-shadow: var(--kk-shadow-focus); }
.kk-table__sort.is-asc::after { content: ' \2191'; color: var(--kk-accent-hi); }
.kk-table__sort.is-desc::after { content: ' \2193'; color: var(--kk-accent-hi); }
.kk-table--scroll {
  overflow-x: auto; background: var(--kk-bg-surface);
  border: 1px solid var(--kk-line); border-radius: var(--kk-radius-lg);
  padding: var(--kk-sp-2) var(--kk-sp-3) var(--kk-sp-3);
}

/* ── 卡片 ─────────────────────────────────────────────────────────── */
.kk-card {
  background: var(--kk-bg-surface); border: 1px solid var(--kk-line);
  border-radius: var(--kk-radius-xl); padding: var(--kk-sp-6);
  transition: border-color .2s, transform .2s;
}
.kk-card__head { font-size: var(--kk-fs-md); font-weight: var(--kk-fw-bold); color: var(--kk-text-heading); }
.kk-card__body { color: var(--kk-text-muted); font-size: var(--kk-fs-sm); line-height: var(--kk-lh-body); }
.kk-card__foot { margin-top: var(--kk-sp-3); color: var(--kk-text-faint); font-size: var(--kk-fs-xs); }
.kk-card--hover:hover { border-color: var(--kk-accent); transform: translateY(-2px); }

/* ── KPI 磚 ───────────────────────────────────────────────────────── */
.kk-stat {
  background: var(--kk-bg-surface); border: 1px solid var(--kk-line);
  border-radius: var(--kk-radius-lg); padding: var(--kk-sp-3) var(--kk-sp-4); min-width: 110px;
}
.kk-stat__value {
  display: block; font-size: var(--kk-fs-xl); font-weight: var(--kk-fw-bold);
  color: var(--kk-text-primary); font-variant-numeric: tabular-nums;
}
.kk-stat__label { font-size: var(--kk-fs-xs); color: var(--kk-text-muted); letter-spacing: .06em; }
.kk-stat__delta { font-size: var(--kk-fs-xs); color: var(--kk-text-faint); }
.kk-stat__delta.is-up { color: var(--kk-state-success); }
.kk-stat__delta.is-down { color: var(--kk-state-danger); }

/* ── Modal ────────────────────────────────────────────────────────── */
.kk-modal { position: fixed; inset: 0; z-index: var(--kk-z-modal); display: none; }
.kk-modal.is-open { display: block; }
.kk-modal__overlay { position: absolute; inset: 0; background: var(--kk-overlay); }
.kk-modal__panel {
  position: relative; margin: 10vh auto 0; max-width: 560px; width: calc(100% - var(--kk-sp-8));
  background: var(--kk-bg-surface); border: 1px solid var(--kk-line);
  border-radius: var(--kk-radius-lg); box-shadow: var(--kk-shadow-md); padding: var(--kk-sp-6);
}
.kk-modal__title { font-size: var(--kk-fs-lg); color: var(--kk-text-heading); font-weight: var(--kk-fw-bold); }
.kk-modal__body { margin-top: var(--kk-sp-3); color: var(--kk-text-primary); }
.kk-modal__foot { margin-top: var(--kk-sp-6); display: flex; gap: var(--kk-sp-2); justify-content: flex-end; }

/* ── 抽屜 ─────────────────────────────────────────────────────────── */
.kk-drawer { position: fixed; inset: 0; z-index: var(--kk-z-drawer); display: none; }
.kk-drawer.is-open { display: block; }
.kk-drawer[hidden] { display: none; }
.kk-drawer__inner {
  position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 100%);
  background: var(--kk-bg-surface); border-left: 1px solid var(--kk-line);
  box-shadow: var(--kk-shadow-md); padding: var(--kk-sp-6); overflow-y: auto;
}

/* ── Toast ────────────────────────────────────────────────────────── */
.kk-toast__region {
  position: fixed; bottom: var(--kk-sp-6); right: var(--kk-sp-6); z-index: var(--kk-z-toast);
  display: flex; flex-direction: column; gap: var(--kk-sp-2);
}
.kk-toast {
  background: var(--kk-bg-surface); border: 1px solid var(--kk-line);
  border-left: 3px solid var(--kk-accent); border-radius: var(--kk-radius-md);
  box-shadow: var(--kk-shadow-md); padding: var(--kk-sp-3) var(--kk-sp-4);
  font-size: var(--kk-fs-sm); color: var(--kk-text-primary);
}
.kk-toast--success { border-left-color: var(--kk-state-success); background: var(--kk-state-success-weak); }
.kk-toast--warning { border-left-color: var(--kk-state-warning); background: var(--kk-state-warning-weak); }
.kk-toast--danger  { border-left-color: var(--kk-state-danger);  background: var(--kk-state-danger-weak); }
.kk-toast--info    { border-left-color: var(--kk-state-info);    background: var(--kk-state-info-weak); }

/* ── Tabs ─────────────────────────────────────────────────────────── */
.kk-tabs { display: flex; gap: var(--kk-sp-1); border-bottom: 1px solid var(--kk-line); }
.kk-tabs__tab {
  font-size: var(--kk-fs-sm); color: var(--kk-text-muted); background: none; border: 0;
  border-bottom: 2px solid transparent; padding: var(--kk-sp-2) var(--kk-sp-4); cursor: pointer;
}
.kk-tabs__tab:hover { color: var(--kk-text-primary); }
.kk-tabs__tab:focus-visible { box-shadow: var(--kk-shadow-focus); }
.kk-tabs__tab.is-current { color: var(--kk-accent-hi); border-bottom-color: var(--kk-accent); }

/* ── Badge / Pill / Tag ───────────────────────────────────────────── */
.kk-badge {
  display: inline-block; font-size: var(--kk-fs-xs); line-height: var(--kk-lh-ui);
  border-radius: var(--kk-radius-full); padding: var(--kk-sp-1) var(--kk-sp-3);
  color: var(--kk-accent-hi); border: 1px solid var(--kk-line-accent);
}
.kk-badge--success { color: var(--kk-state-success); border-color: color-mix(in srgb, var(--kk-state-success) 30%, transparent); }
.kk-badge--warning { color: var(--kk-state-warning); border-color: color-mix(in srgb, var(--kk-state-warning) 34%, transparent); }
.kk-badge--danger  { color: var(--kk-state-danger);  border-color: color-mix(in srgb, var(--kk-state-danger) 34%, transparent); }
.kk-badge--info    { color: var(--kk-state-info);    border-color: color-mix(in srgb, var(--kk-state-info) 34%, transparent); }
.kk-badge--neutral { color: var(--kk-text-muted);    border-color: var(--kk-line); }
.kk-pill { border-radius: var(--kk-radius-full); border: 1px solid var(--kk-line); padding: var(--kk-sp-1) var(--kk-sp-3); }
.kk-tag {
  display: inline-block; font-size: var(--kk-fs-xs); letter-spacing: .1em;
  color: var(--kk-state-warning); border: 1px solid color-mix(in srgb, var(--kk-state-warning) 34%, transparent);
  border-radius: var(--kk-radius-sm); padding: 2px var(--kk-sp-2);
}

/* ── 表單版面 ─────────────────────────────────────────────────────── */
.kk-form__row { margin-top: var(--kk-sp-4); }
.kk-form__label { display: block; font-size: var(--kk-fs-xs); color: var(--kk-text-muted); margin-bottom: var(--kk-sp-1); }
.kk-form__hint { font-size: var(--kk-fs-xs); color: var(--kk-text-faint); line-height: var(--kk-lh-body); }
.kk-form__error {
  font-size: var(--kk-fs-xs); color: var(--kk-state-danger);
  background: var(--kk-state-danger-weak); border: 1px solid var(--kk-state-danger-line);
  border-radius: var(--kk-radius-md); padding: var(--kk-sp-2) var(--kk-sp-3); margin-top: var(--kk-sp-2);
}
.kk-form--inline { display: flex; gap: var(--kk-sp-2); align-items: flex-end; flex-wrap: wrap; }

/* ── 樹 ───────────────────────────────────────────────────────────── */
.kk-tree { font-size: var(--kk-fs-sm); }
.kk-tree__node {
  display: flex; align-items: center; gap: var(--kk-sp-2);
  padding: var(--kk-sp-1) var(--kk-sp-2); border-radius: var(--kk-radius-md);
  color: var(--kk-text-muted); cursor: pointer;
}
.kk-tree__node:hover { background: var(--kk-bg-subtle); color: var(--kk-text-primary); }
.kk-tree__node.is-current { background: var(--kk-accent-weak); color: var(--kk-accent-hi); }
.kk-tree__caret { color: var(--kk-text-faint); transition: transform .15s; }
.kk-tree__caret.is-open { transform: rotate(90deg); }

/* ── 空狀態 ───────────────────────────────────────────────────────── */
.kk-empty { text-align: center; padding: var(--kk-sp-12) var(--kk-sp-4); color: var(--kk-text-muted); }
.kk-empty__icon { font-size: var(--kk-fs-3xl); line-height: 1; opacity: .7; }
.kk-empty__text { margin-top: var(--kk-sp-3); font-size: var(--kk-fs-sm); }
.kk-empty__action { margin-top: var(--kk-sp-4); }

/* ── Loading ──────────────────────────────────────────────────────── */
.kk-skeleton {
  background: linear-gradient(90deg, var(--kk-bg-subtle), var(--kk-bg-surface), var(--kk-bg-subtle));
  background-size: 200% 100%; border-radius: var(--kk-radius-md);
  animation: kk-shimmer 1.4s linear infinite;
}
.kk-skeleton--text { height: var(--kk-fs-md); margin: var(--kk-sp-1) 0; }
.kk-skeleton--block { height: 120px; }
@keyframes kk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.kk-spinner {
  display: inline-block; width: 18px; height: 18px; border-radius: var(--kk-radius-full);
  border: 2px solid var(--kk-line); border-top-color: var(--kk-accent-hi);
  animation: kk-spin .7s linear infinite;
}
.kk-spinner--sm { width: 12px; height: 12px; border-width: 1.5px; }
@keyframes kk-spin { to { transform: rotate(360deg); } }

/* ── 分頁 ─────────────────────────────────────────────────────────── */
.kk-pager { display: flex; gap: var(--kk-sp-1); align-items: center; }
.kk-pager__item {
  font-size: var(--kk-fs-sm); color: var(--kk-text-muted); background: var(--kk-bg-surface);
  border: 1px solid var(--kk-line); border-radius: var(--kk-radius-md);
  padding: var(--kk-sp-1) var(--kk-sp-3); cursor: pointer;
}
.kk-pager__item:hover { border-color: var(--kk-accent-hi); }
.kk-pager__item:focus-visible { box-shadow: var(--kk-shadow-focus); }
.kk-pager__item.is-current { color: var(--kk-text-on-accent); background: var(--kk-accent); border-color: var(--kk-accent); }
.kk-pager__item.is-disabled { opacity: .45; pointer-events: none; }

/* ── 統一頁首(spec §3.5;DOM 由 /theme.js 注入)───────────────────── */
.kk-shell {
  position: sticky; top: 0; z-index: var(--kk-z-shell); flex: none;
  display: flex; align-items: center; gap: var(--kk-sp-3);
  height: var(--kk-shell-h); padding: 0 var(--kk-sp-4);
  background: var(--kk-bg-surface); border-bottom: 1px solid var(--kk-line);
  font-size: var(--kk-fs-sm); color: var(--kk-text-primary);
}
.kk-shell__brand { display: flex; align-items: center; gap: var(--kk-sp-2); }
.kk-shell__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--kk-radius-md);
  background: var(--kk-accent-grad); color: var(--kk-text-on-accent);
  font-size: var(--kk-fs-xs); font-weight: var(--kk-fw-bold); letter-spacing: .04em;
}
.kk-shell__wordmark { font-weight: var(--kk-fw-bold); letter-spacing: .14em; color: var(--kk-text-heading); }
.kk-shell__site { color: var(--kk-text-muted); font-size: var(--kk-fs-xs); letter-spacing: .06em; }
.kk-shell__burger {
  display: none; background: none; border: 0; color: var(--kk-text-muted);
  padding: var(--kk-sp-1); cursor: pointer; border-radius: var(--kk-radius-md);
}
.kk-shell__nav { display: flex; align-items: center; gap: var(--kk-sp-1); margin-left: var(--kk-sp-4); }
.kk-shell__link {
  color: var(--kk-text-muted); font-size: var(--kk-fs-xs);
  padding: var(--kk-sp-1) var(--kk-sp-3); border-radius: var(--kk-radius-md);
  border: 1px solid transparent; white-space: nowrap; cursor: pointer;
}
.kk-shell__link:hover { color: var(--kk-text-primary); background: var(--kk-bg-subtle); }
.kk-shell__link:focus-visible { box-shadow: var(--kk-shadow-focus); }
.kk-shell__link.is-current { color: var(--kk-accent-hi); border-color: var(--kk-line-accent); background: var(--kk-accent-weak); }
/* 導覽項目上的件數徽記(目前只有出勤的待審數)。刻意沿用 .is-current 那組前景/背景:
   同一對顏色已在對比表上量過,新增一個計數不該順便帶進一組沒量過的配色。 */
.kk-shell__n { margin-left: var(--kk-sp-2); padding: 0 var(--kk-sp-2); border-radius: var(--kk-radius-full); background: var(--kk-accent-weak); color: var(--kk-accent-hi); font-size: var(--kk-fs-xs); font-weight: var(--kk-fw-bold); }
.kk-shell__more { position: relative; }
.kk-shell__more > summary { list-style: none; }
.kk-shell__more > summary::-webkit-details-marker { display: none; }
.kk-shell__menu {
  position: absolute; top: calc(100% + var(--kk-sp-1)); left: 0; min-width: 160px;
  display: flex; flex-direction: column; gap: 2px; padding: var(--kk-sp-1);
  background: var(--kk-bg-surface); border: 1px solid var(--kk-line);
  border-radius: var(--kk-radius-md); box-shadow: var(--kk-shadow-md);
}
.kk-shell__me { display: flex; align-items: center; gap: var(--kk-sp-2); margin-left: auto; }
.kk-shell__theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; background: none; color: var(--kk-text-muted);
  border: 1px solid var(--kk-line); border-radius: var(--kk-radius-md); cursor: pointer;
}
.kk-shell__theme:hover { color: var(--kk-accent-hi); border-color: var(--kk-accent-hi); }
.kk-shell__theme:focus-visible { box-shadow: var(--kk-shadow-focus); }
.kk-shell__profile { display: flex; align-items: center; gap: var(--kk-sp-2); }
.kk-shell__avatar {
  width: 28px; height: 28px; border-radius: var(--kk-radius-full); object-fit: cover;
  border: 1.5px solid var(--kk-line); background: var(--kk-bg-surface);
}
.kk-shell__nick { font-size: var(--kk-fs-xs); color: var(--kk-text-primary); font-weight: var(--kk-fw-semibold); }
.kk-shell__rank { font-size: var(--kk-fs-xs); color: var(--kk-text-faint); }
.kk-shell__login {
  font-size: var(--kk-fs-xs); color: var(--kk-accent-hi);
  border: 1px solid var(--kk-line-accent); border-radius: var(--kk-radius-md);
  padding: var(--kk-sp-1) var(--kk-sp-2);
}
.kk-shell__logout {
  font-size: var(--kk-fs-xs); color: var(--kk-text-muted);
  background: none; border: none; padding: 0;
  text-decoration: none;
}
.kk-shell__logout:hover, .kk-shell__logout:focus-visible {
  color: var(--kk-text-primary); text-decoration: underline;
}
.kk-shell__logout:focus-visible, .kk-shell__login:focus-visible { box-shadow: var(--kk-shadow-focus); }
@media (max-width: 640px) {
  .kk-shell__burger { display: inline-flex; }
  .kk-shell__nav {
    position: absolute; top: var(--kk-shell-h); left: 0; right: 0; margin-left: 0;
    flex-direction: column; align-items: stretch; display: none;
    padding: var(--kk-sp-2); background: var(--kk-bg-surface);
    border-bottom: 1px solid var(--kk-line); box-shadow: var(--kk-shadow-md);
  }
  .kk-shell__nav.is-open { display: flex; }
  .kk-shell__wordmark, .kk-shell__rank { display: none; }
}