/* 服務支出分析 — 樣式基準：tasks/integration/2026-08-04-project-hours-dashboard/site/index.html
 * （AW design tokens 同款 inline；版面語彙 topbar/seg/tabs/stat/chart/donut/dlg 全部照該頁） */
: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-600:#13BC64;--green-800:#187F45;--orange-500:#EE8101;--orange-100:#FFEFD7;--orange-900:#A13710;
  --red-500:#D92C2C;--red-600:#C02525;--red-100:#FEEAED;--red-800:#821919;
  --blue-500:#316DFD;--blue-100:#EBF2FD;
  --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)}
code{font-family:var(--font-mono);font-size:12px;background:var(--gray-100);padding:1px 5px;border-radius:4px}

/* ── 登入閘門（照參考頁 gate）── */
.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{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-btn{display:flex;justify-content:center;min-height:44px;margin-top:24px}
.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;flex:none}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block}
.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);flex-wrap:wrap}
.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)}
.warn-chip{background:var(--orange-100);border-color:transparent;color:var(--orange-900);font-weight:600}
.warn-chip:hover{background:#FFE3BC}

/* ── Layout ── */
.container{max-width:1120px;margin:0 auto;padding:24px 24px 48px;display:flex;flex-direction:column;gap:20px}
#dashboard{display:flex;flex-direction:column;gap:20px} /* 卡片在 #dashboard 內，吃不到 .container 的 gap——比照基準頁的 20px 直落節奏 */
.controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* ── seg / tabs（照參考頁）── */
.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);white-space:nowrap}
.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)}
@media (max-width:760px){.seg-desc{display:none}}
.chart-ctl{display:flex;gap:8px;align-items:center}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border-primary);margin-left:auto}
.tab{position:relative;padding:8px 12px 10px;font-size:14px;font-weight:500;color:var(--text-secondary);border-radius:var(--radius-md) var(--radius-md) 0 0;white-space:nowrap;transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.tab:hover{color:var(--text-primary);background:var(--violet-50)}
.tab.active{color:var(--violet-900);font-weight:600}
.tab.active::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--violet-700)}

/* ── Cards / stats（照參考頁）── */
.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}
.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-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)}
.drill-name{font-family:var(--font-mono);font-size:13px;color:var(--violet-700);margin-left:8px;font-weight:500}

/* ── 趨勢圖（照參考頁 chart 引擎樣式）── */
.chart-box{position:relative}
.chart-x{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);margin-top:6px;padding:0 2px}
.chart-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px}
.chart-legend .lg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)}
.chart-legend .lg .dot{width:9px;height:9px;border-radius:3px;flex:none}
.chart-legend .lg b{font-family:var(--font-mono);font-weight:500;color:var(--text-primary)}
.chart-legend .lg.click{cursor:pointer;border-radius:var(--radius-md);padding:2px 6px;margin:-2px -2px;transition:background var(--dur-fast) var(--ease)}
.chart-legend .lg.click:hover{background:var(--violet-50);color:var(--violet-900)}
.chart-legend .lg.dim{opacity:.38}
.pt-label{position:absolute;transform:translate(-50%,-130%);font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);pointer-events:none;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.9),0 -1px 0 rgba(255,255,255,.9)}
.chart-tip{position:absolute;z-index:20;pointer-events:none;background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:8px 10px;font-size:12px;display:none;min-width:150px}
.chart-tip .tt{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);margin-bottom:5px}
.chart-tip .tr{display:flex;align-items:center;gap:6px;line-height:1.7}
.chart-tip .tr .dot{width:8px;height:8px;border-radius:2px;flex:none}
.chart-tip .tr .nm{flex:1;padding-right:10px;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.chart-tip .tr b{font-family:var(--font-mono);font-weight:500}
.chart-tip .tr .pc{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);min-width:36px;text-align:right}
.chart-tip .tr.muted{color:var(--text-tertiary)}
.empty{padding:32px;text-align:center;color:var(--text-tertiary);font-size:14px}

/* ── Donut（照參考頁 pie）── */
.pie-flex{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.pie-svg{width:220px;height:220px;flex:none}
.pie-legend{flex:1;min-width:260px;display:flex;flex-direction:column;gap:8px;max-height:280px;overflow:auto}
.pie-row{display:flex;align-items:center;gap:10px;font-size:14px;width:100%;text-align:left}
.pie-row.click{cursor:pointer;border-radius:var(--radius-md);padding:3px 6px;margin:-3px -6px;transition:background var(--dur-fast) var(--ease)}
.pie-row.click:hover{background:var(--violet-50)}
.pie-dot{width:10px;height:10px;border-radius:3px;flex:none}
.pie-row .nm{flex:1}
.pie-row .hv{font-family:var(--font-mono);font-size:13px}
.pie-row .pc{font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary);width:52px;text-align:right}

/* ── 表格（照參考頁）── */
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}
tbody tr:hover td{background:var(--gray-50)}
.mono{font-family:var(--font-mono);font-size:13px}
.muted{color:var(--text-tertiary)}
.share-track{width:110px;height:6px;border-radius:var(--radius-full);background:var(--gray-100);overflow:hidden;display:inline-block;vertical-align:middle}
.share-fill{height:100%;border-radius:var(--radius-full)}
.share-pc{font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary);margin-left:8px}
.cat-row{cursor:pointer}
.cat-row .cat-name{font-weight:600;display:inline-flex;align-items:center;gap:8px}
.cat-row .dot{width:10px;height:10px;border-radius:3px;flex:none}
.cat-row .caret{display:inline-block;transition:transform var(--dur-normal) var(--ease);color:var(--text-tertiary);font-size:11px;width:12px}
.cat-row.open .caret{transform:rotate(90deg)}
.svc-row td{background:var(--gray-50)}
.svc-row .svc-name{padding-left:30px;font-size:13.5px}
.svc-row .badge-low{font-size:11px;border-radius:var(--radius-full);padding:1px 8px;background:var(--orange-100);color:var(--orange-900);font-weight:600;margin-left:6px}
.delta-up{color:var(--red-600);font-weight:600;font-family:var(--font-mono)}
.delta-down{color:var(--green-800);font-weight:600;font-family:var(--font-mono)}
tr.total-row td{border-top:1px solid var(--border-secondary);font-weight:600}

/* ── banner / dropzone ── */
#banner{border-radius:var(--radius-md);padding:10px 16px;font-size:14px}
#banner.info{background:var(--blue-100);border:1px solid #D2E1FA;color:var(--navy-700)}
#banner.warn{background:var(--orange-100);border:1px solid #FFCCB0;color:var(--orange-900)}
#banner.error{background:var(--red-100);border:1px solid #FDCBCC;color:var(--red-800)}
.dropzone{text-align:center;padding:64px 24px;border-style:dashed;border-width:2px}
.dropzone.dragover{border-color:var(--violet-600);background:var(--violet-50)}
.dropzone h2{font-family:var(--font-display);font-size:20px;letter-spacing:-.02em;margin-bottom:10px}
.gate-sub{font-size:14px;color:var(--text-secondary)}

/* ── 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:860px;max-width:100%;max-height:82vh;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}
.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)}
.btn-sec-sm{font-size:12px;font-weight:600;color:var(--violet-900);background:transparent;border:1px solid var(--violet-900);border-radius:var(--radius-md);padding:4px 12px;transition:background var(--dur-fast) var(--ease)}
.btn-sec-sm:hover{background:var(--violet-50)}
.btn-sec-sm:active{background:var(--violet-100);transform:translateY(1px)}
.map-raw{font-family:var(--font-mono);font-size:12.5px;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-stat{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);white-space:nowrap}
#map-rows select,#map-rows input[type="text"]{font:inherit;font-size:13px;color:var(--text-primary);border:1px solid var(--border-secondary);border-radius:var(--radius-md);padding:6px 8px;background:var(--bg-primary)}
#map-rows input.in-vendor{width:130px}
#map-rows input.in-product{width:120px}
.badge-src{font-size:11px;border-radius:var(--radius-full);padding:1px 8px;font-weight:600;white-space:nowrap}
.badge-src.user{background:#F0F8F4;color:var(--green-800)}
.badge-src.model{background:var(--gray-100);color:var(--text-secondary)}
.badge-src.low{background:var(--orange-100);color:var(--orange-900)}

/* ── Footer ── */
.footnote{font-size:12px;color:var(--text-tertiary);line-height:1.65}

@media (max-width:880px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .tabs{margin-left:0;width:100%;overflow-x:auto}
  .share-track{width:56px}
}