/* Mrgn design system — Project Helper 各頁共用（tokens、登入閘門、topbar、layout、seg、dropdown、card、表格、dialog、按鈕）。
   頁面自己的樣式寫在各頁 <style>，載入順序在本檔之後。 */
/* ── Mrgn design tokens（來源：claude.ai/design a9aa67f4 tokens/*.css）── */
:root{
  --navy-500:#3457B7;--navy-700:#1B306A;--navy-800:#0E1A39;--navy-900:#081330;
  --violet-50:#F7F5FA;--violet-100:#EDE7F3;--violet-200:#D9CCE5;--violet-400:#9C80B7;
  --violet-500:#7B5B98;--violet-600:#674785;--violet-700:#52356E;--violet-800:#3E2654;--violet-900:#2C193E;
  --gray-50:#F9FAFA;--gray-100:#F1F2F3;--gray-200:#E3E5E8;--gray-300:#CDCFD5;--gray-400:#ACB0B9;
  --gray-500:#8B909C;--gray-600:#6C717F;--gray-700:#50535E;--gray-900:#26272C;
  --green-400:#73D88D;--green-600:#13BC64;--orange-400:#FFA026;--red-500:#D92C2C;--blue-500:#316DFD;
  --primary:var(--violet-900);--primary-hover:var(--violet-800);
  --text-primary:var(--gray-900);--text-secondary:var(--gray-600);--text-tertiary:var(--gray-400);
  --bg-primary:#FFF;--bg-secondary:var(--gray-50);
  --border-primary:var(--gray-200);--border-secondary:var(--gray-300);
  --brand-gradient:linear-gradient(105deg,var(--violet-700) 0%,var(--violet-900) 32%,var(--navy-800) 72%,var(--navy-900) 100%);
  --font-display:'Quicksand',ui-rounded,'Noto Sans TC','Segoe UI',sans-serif;
  --font-sans:'DM Sans','Noto Sans TC',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'DM Mono',ui-monospace,'SF Mono','Menlo',monospace;
  --radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;
  --shadow-sm:0 1px 3px rgba(8,19,48,.08),0 1px 2px rgba(8,19,48,.06);
  --shadow-lg:0 12px 28px rgba(8,19,48,.14),0 4px 8px rgba(8,19,48,.06);
  --shadow-xl:0 24px 48px rgba(8,19,48,.18);
  --shadow-focus:0 0 0 3px rgba(103,71,133,.28);
  --ease:cubic-bezier(.2,0,0,1);--dur-fast:120ms;--dur-normal:200ms;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);font-size:15px;line-height:1.5;color:var(--text-primary);background:var(--bg-secondary)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* ── 登入閘門 ── */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.gate-card{background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:40px;max-width:400px;width:100%;text-align:center}
.gate-mark{width:56px;height:56px;margin:0 auto 18px}
.gate-mark img,.brand-mark img{width:100%;height:100%;object-fit:contain;display:block}
.gate-title{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--navy-900)}
.gate-sub{font-size:14px;color:var(--text-secondary);margin:8px 0 24px}
.gate-btn{display:flex;justify-content:center;min-height:44px}
.gate-msg{font-size:13px;color:var(--text-secondary);margin-top:16px;line-height:1.65}
.gate-msg.error{color:var(--red-500)}

/* ── Topbar ── */
.topbar{background:var(--bg-primary);border-bottom:1px solid var(--border-primary)}
.topbar-inner{max-width:1120px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:12px}
.brand-mark{width:32px;height:32px}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--navy-900)}
.brand-sub{font-size:13px;color:var(--text-secondary);margin-top:1px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:12px;color:var(--text-tertiary)}
.topbar-right b{color:var(--text-secondary);font-weight:500;font-family:var(--font-mono)}
.signout{font-size:12px;color:var(--text-secondary);padding:5px 10px;border:1px solid var(--border-secondary);border-radius:var(--radius-md);transition:background var(--dur-fast) var(--ease)}
.signout:hover{background:var(--gray-100)}
.signout:disabled{opacity:.6;cursor:default}

/* ── Layout ── */
.container{max-width:1120px;margin:0 auto;padding:24px 24px 48px;display:flex;flex-direction:column;gap:20px}
.controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* ── 模式切換（成員/專案）── */
.seg{display:flex;background:var(--gray-100);border-radius:var(--radius-md);padding:3px;gap:2px}
.seg-btn{padding:6px 16px;font-size:14px;font-weight:500;color:var(--text-secondary);border-radius:6px;transition:all var(--dur-fast) var(--ease)}
.seg-btn.active{background:var(--bg-primary);color:var(--violet-900);font-weight:600;box-shadow:var(--shadow-sm)}
.seg.mini .seg-btn{padding:3px 10px;font-size:12px}
.seg-desc{font-size:12px;color:var(--text-tertiary);margin-left:10px}
@media (max-width:760px){.seg-desc{display:none}}
.chart-ctl{display:flex;gap:8px;align-items:center}

/* ── Dropdown ── */
.dd{position:relative}
.dd-btn{display:flex;align-items:center;gap:10px;min-width:260px;background:var(--bg-primary);border:1px solid var(--border-secondary);border-radius:var(--radius-md);padding:8px 12px;transition:border-color var(--dur-fast) var(--ease)}
.dd-btn:hover{border-color:var(--violet-400)}
.avatar{width:26px;height:26px;border-radius:var(--radius-full);background:var(--brand-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.dd-name{font-weight:600;font-size:14px}
.dd-role{font-size:12px;color:var(--text-tertiary)}
.dd-caret{margin-left:auto;color:var(--text-tertiary);transition:transform var(--dur-normal) var(--ease)}
.dd.open .dd-caret{transform:rotate(180deg)}
.dd-panel{position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:320px;max-height:420px;overflow:auto;background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:6px;display:none}
.dd.open .dd-panel{display:block}
.dd-search{width:calc(100% - 12px);margin:4px 6px 6px;padding:7px 10px;font:inherit;font-size:13px;border:1px solid var(--border-secondary);border-radius:var(--radius-md)}
.dd-group{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-tertiary);padding:8px 10px 4px}
.dd-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 10px;border-radius:var(--radius-md);font-size:14px;transition:background var(--dur-fast) var(--ease)}
.dd-item:hover,.dd-item.kb{background:var(--gray-100)}
.dd-item.sel{background:var(--violet-50);color:var(--violet-900);font-weight:600}
.dd-item.sel.kb{background:var(--violet-100)}
.dd-item .check{margin-left:auto;color:var(--violet-700);visibility:hidden;flex:none}
.dd-item.sel .check{visibility:visible}
.dd-item .n-proj{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary)}
.dd-item.sel .n-proj{display:none}


/* ── Cards ── */
.card{background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:24px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stats.five{grid-template-columns:repeat(5,1fr)}
.stats.five .stat-value{font-size:24px}
.stat{padding:18px 20px}
.stat-label{font-size:13px;color:var(--text-secondary);font-weight:500}
.stat-value{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.02em;margin-top:6px;white-space:nowrap}
.stat-value .unit{font-size:15px;font-weight:600;color:var(--text-tertiary);margin-left:2px}
.stat-note{font-size:12px;color:var(--text-tertiary);margin-top:8px}
.card-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.card-title{font-size:15px;font-weight:600}
.card-hint{font-size:12px;color:var(--text-tertiary)}

/* ── 專案表 ── */
table{width:100%;border-collapse:collapse}
th{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--text-tertiary);text-align:left;padding:0 10px 10px;border-bottom:1px solid var(--border-primary)}
th.num,td.num{text-align:right}
td{padding:9px 10px;border-bottom:1px solid var(--gray-100);font-size:14px;vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--gray-50)}
.proj-name{font-weight:500}
.mono{font-family:var(--font-mono);font-size:13px}
.share-track{width:110px;height:6px;border-radius:var(--radius-full);background:var(--gray-100);overflow:hidden}
.share-fill{height:100%;border-radius:var(--radius-full);background:var(--violet-500);transition:width var(--dur-normal) var(--ease)}
.muted{color:var(--text-tertiary)}
.empty{padding:32px;text-align:center;color:var(--text-tertiary);font-size:14px}

/* ── Alias 設定 dialog ── */
.dlg-scrim{position:fixed;inset:0;z-index:50;background:rgba(8,19,48,.44);backdrop-filter:blur(2px);display:none;align-items:flex-start;justify-content:center;padding:8vh 16px}
.dlg-scrim.show{display:flex}
.dlg{background:var(--bg-primary);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);width:720px;max-width:100%;max-height:80vh;display:flex;flex-direction:column}
.dlg-head{padding:20px 24px 12px}
.dlg-title{font-size:16px;font-weight:600}
.dlg-sub{font-size:12px;color:var(--text-tertiary);margin-top:4px;line-height:1.6}
.dlg-body{padding:8px 24px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.dlg-sec{font-size:13px;font-weight:600;margin-top:10px}
.dlg-sec:first-child{margin-top:0}
.dlg-sec .hint{display:block;font-size:12px;font-weight:400;color:var(--text-tertiary);line-height:1.6;margin-top:2px}
.alias-row{display:flex;align-items:center;gap:8px}
.alias-row select{flex:1;min-width:0;font:inherit;font-size:13px;padding:7px 8px;border:1px solid var(--border-secondary);border-radius:var(--radius-md);background:var(--bg-primary)}
.alias-eq{color:var(--text-tertiary);font-size:13px;flex:none}
.dlg-foot{padding:16px 24px 20px;display:flex;gap:10px;justify-content:flex-end;align-items:center}
.dlg-foot .msg{margin-right:auto;font-size:12px;color:var(--text-tertiary)}
.btn{padding:8px 16px;font-size:14px;font-weight:600;border-radius:var(--radius-md);transition:background var(--dur-fast) var(--ease)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{opacity:.6}
.btn-ghost{color:var(--text-secondary)}
.btn-ghost:hover{background:var(--gray-100)}