:root {
  --navy: #102a43; --navy-2: #183f5b; --ink: #172b3a; --muted: #68808f;
  --teal: #0f9f95; --teal-dark: #087a73; --teal-soft: #dff5f2;
  --gold: #f2a93b; --red: #e16262; --blue: #2c7be5; --sky: #5bb7d7;
  --bg: #f2f6f8; --card: #fff; --line: #dfe8ec; --shadow: 0 8px 28px rgba(25, 59, 75, .07);
}
* { box-sizing: border-box; }
.file-input-proxy { position: fixed; left: 2px; top: 2px; z-index: 99; width: 2px; height: 2px; opacity: .001; overflow: hidden; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; color: var(--ink); font-family: "DM Sans", "Noto Sans TC", sans-serif; background: var(--bg); }
button, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 236px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; background: linear-gradient(178deg, #102d43 0%, #0d2639 70%, #0a2132 100%); color: white; padding: 28px 18px 22px; display: flex; flex-direction: column; z-index: 5; }
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 12px; padding: 0 10px 31px; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand-mark { width: 33px; height: 33px; display: flex; gap: 3px; align-items: end; padding: 5px; border: 1px solid rgba(255,255,255,.35); border-radius: 9px; }
.brand-mark i { display: block; width: 6px; border-radius: 4px; background: #42d2c6; }
.brand-mark i:nth-child(1) { height: 10px; }.brand-mark i:nth-child(2) { height: 19px; }.brand-mark i:nth-child(3) { height: 14px; }
.brand b { display: block; font-size: 14px; letter-spacing: .12em; }.brand small { display: block; color: #8bb2c8; font-size: 8px; letter-spacing: .16em; margin-top: 3px; }
.nav-list { padding-top: 26px; display: grid; gap: 8px; }
.nav-item { width: 100%; border: 0; background: transparent; color: #9db5c4; padding: 12px 14px; border-radius: 9px; display: flex; align-items: center; gap: 13px; text-align: left; transition: .2s ease; }
.nav-item:hover { color: white; background: rgba(255,255,255,.06); }.nav-item.active { color: white; background: rgba(45, 204, 190, .16); box-shadow: inset 3px 0 #39c6b9; }
.nav-icon { width: 20px; font-size: 18px; text-align: center; }
.sidebar-foot { margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; }
.data-health { display: flex; align-items: center; gap: 10px; padding: 10px; }.data-health b,.data-health small { display: block; }.data-health b { font-size: 11px; }.data-health small { color: #789bae; font-size: 10px; margin-top: 3px; }
.pulse { width: 8px; height: 8px; background: #37d4a0; border-radius: 50%; box-shadow: 0 0 0 5px rgba(55,212,160,.12); }
.help-link { background: none; border: 0; color: #8ba8b9; font-size: 11px; padding: 9px 10px; }
main { min-width: 0; padding: 29px 32px 40px; }
.topbar { display: flex; justify-content: space-between; gap: 30px; align-items: center; }
.eyebrow,.section-kicker { color: var(--teal-dark); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
h1 { margin: 6px 0 3px; font-size: clamp(22px, 2.2vw, 31px); line-height: 1.25; color: #163246; letter-spacing: -.025em; }
.topbar p { color: var(--muted); margin: 0; font-size: 13px; }.top-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.source-pill { height: 47px; display: flex; align-items: center; gap: 9px; padding: 6px 13px 6px 7px; background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 3px 12px rgba(21,50,65,.04); }
.source-icon { width: 32px; height: 32px; display: grid; place-items: center; background: #177c59; color: white; border-radius: 6px; font-size: 12px; font-weight: 700; }.source-pill small,.source-pill b { display: block; max-width: 118px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.source-pill small { color: #8ba0ad; font-size: 9px; }.source-pill b { color: #274455; font-size: 10px; margin-top: 2px; }
.btn { min-height: 40px; border-radius: 8px; padding: 0 14px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 600; transition: .18s; }
.btn:hover { transform: translateY(-1px); }.btn-primary { color: white; background: var(--teal-dark); box-shadow: 0 6px 16px rgba(8,122,115,.18); }.btn-ghost { color: #456170; background: white; border-color: #dbe6ea; }.btn.small { min-height: 32px; }
.btn-sync { color:white; background:#285a78; box-shadow:0 6px 16px rgba(40,90,120,.16); }.btn:disabled { opacity:.46; cursor:not-allowed; transform:none; box-shadow:none; }
.filterbar { margin: 24px 0 18px; min-height: 64px; background: white; border: 1px solid var(--line); border-radius: 11px; display: flex; align-items: center; gap: 0; padding: 9px 13px; box-shadow: 0 4px 18px rgba(18,50,68,.035); }
.filterbar label { padding: 0 16px; min-width: 150px; border-right: 1px solid #e4ebee; }.filterbar label span { display: block; font-size: 9px; color: #8aa0ad; margin-bottom: 2px; }.filterbar select { width: 100%; border: 0; outline: 0; color: #294656; background: transparent; font-size: 12px; font-weight: 600; padding: 2px 20px 2px 0; }
.clear-filter { border: 0; background: none; color: var(--teal-dark); font-size: 11px; margin-left: 9px; }.updated { margin-left: auto; padding: 0 8px 0 18px; font-size: 10px; color: #8ba0ad; white-space: nowrap; }.updated > span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #38c48f; margin-right: 6px; }.updated b { color: #56717f; }
.view { display: none; }.view.active { display: block; animation: fade .25s ease; } @keyframes fade { from { opacity: 0; transform: translateY(3px); } }
.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 13px; margin-bottom: 13px; }
.kpi-card { position: relative; min-height: 126px; background: white; border: 1px solid var(--line); border-radius: 11px; padding: 17px 18px 14px; box-shadow: var(--shadow); overflow: hidden; }
.kpi-card::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--accent, var(--teal)); transform:scaleX(.34); transform-origin:left; }.kpi-label { display:flex; justify-content:space-between; color:#78909d; font-size:10px; font-weight:600; }.kpi-glyph { color:var(--accent); font-size:14px; }.kpi-value { font-size:clamp(20px, 1.8vw, 28px); font-weight:700; color:#183849; margin:10px 0 7px; letter-spacing:-.03em; }.kpi-sub { display:flex; align-items:center; gap:6px; font-size:9px; color:#8da1ad; }.delta { border-radius:20px; padding:2px 6px; font-weight:700; }.delta.up { background:#e0f5ee; color:#1a8a68; }.delta.down { background:#fee8e8; color:#c95555; }.delta.neutral { background:#edf2f4; color:#687e8a; }
.dashboard-grid { display:grid; grid-template-columns: minmax(0, 1.63fr) minmax(290px, .87fr); gap:13px; }.panel { background:white; border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow); padding:18px 19px; min-width:0; }.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }.panel h2 { font-size:14px; margin:4px 0 0; color:#244456; }.legend { display:flex; align-items:center; gap:12px; font-size:9px; color:#708793; margin-top:5px; }.legend span { display:flex; align-items:center; gap:5px; }.dot { width:7px; height:7px; border-radius:2px; display:inline-block; }.dot.revenue { background:var(--teal); }.dot.cost { background:#bfd2da; }.line { width:12px; height:2px; display:inline-block; }.line.profit { background:var(--gold); }.badge { font-size:9px; color:#66808f; border:1px solid #dce6ea; padding:4px 7px; border-radius:5px; }.chart { height:235px; margin-top:12px; }.chart svg { width:100%; height:100%; overflow:visible; }.grid-line { stroke:#e9eff2; stroke-width:1; }.axis-label { fill:#879ba6; font-size:9px; }.bar-revenue { fill:#119f96; }.bar-cost { fill:#c8d9df; }.profit-line { fill:none; stroke:#efa331; stroke-width:2.2; }.profit-dot { fill:#efa331; stroke:white; stroke-width:2; }
.donut-wrap { display:flex; gap:22px; align-items:center; min-height:235px; }.donut { --segments: conic-gradient(var(--teal) 0 40%, var(--blue) 40% 70%, var(--gold) 70% 90%, #a5bac5 90%); width:144px; aspect-ratio:1; border-radius:50%; background:var(--segments); position:relative; flex:0 0 auto; }.donut::after { content:""; position:absolute; inset:20px; background:white; border-radius:50%; }.donut > div { position:absolute; inset:0; z-index:1; display:grid; place-content:center; text-align:center; }.donut strong { display:block; color:#193a4b; font-size:20px; }.donut small { color:#8ba0ab; font-size:9px; }.mix-legend { flex:1; display:grid; gap:11px; }.mix-row { display:grid; grid-template-columns:8px minmax(74px,1fr) auto; align-items:center; gap:7px; font-size:10px; }.mix-row i { width:7px; height:7px; border-radius:2px; }.mix-row span { color:#6f8692; }.mix-row b { color:#294858; }
.branch-bars { display:grid; gap:15px; margin-top:20px; }.branch-line { display:grid; grid-template-columns:90px 1fr 42px; gap:10px; align-items:center; }.branch-line span,.branch-line b { font-size:10px; }.branch-line span { color:#5e7784; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.branch-line b { color:#29495a; text-align:right; }.bar-track { height:7px; background:#eaf0f2; border-radius:8px; overflow:hidden; }.bar-fill { height:100%; border-radius:8px; background:linear-gradient(90deg, #0d8c85, #43c9bc); }
.spark-icon { width:31px; height:31px; border-radius:8px; background:#e1f5f2; color:var(--teal-dark); display:grid; place-items:center; }.insights { margin-top:13px; display:grid; gap:8px; }.insight { display:grid; grid-template-columns:27px 1fr; gap:9px; padding:10px; background:#f7fafb; border-radius:8px; }.insight-icon { width:27px; height:27px; border-radius:7px; display:grid; place-items:center; font-size:12px; background:var(--tone-bg); color:var(--tone); }.insight b { display:block; font-size:10px; color:#315061; }.insight p { margin:3px 0 0; font-size:9px; line-height:1.45; color:#78909c; }
.risk-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:13px; }.risk-card { background:white; border:1px solid var(--line); border-radius:11px; padding:18px; box-shadow:var(--shadow); }.risk-card small { color:#7c929e; font-size:10px; }.risk-card strong { display:block; margin-top:9px; font-size:25px; color:#1b3b4c; }.risk-card em { display:block; margin-top:6px; font-size:9px; color:#8aa0ac; font-style:normal; }.table-panel { padding:0; overflow:hidden; }.table-panel .panel-head { padding:18px 19px 14px; }.table-wrap { overflow:auto; max-height:520px; border-top:1px solid #e8eef1; } table { width:100%; border-collapse:collapse; white-space:nowrap; } th { position:sticky; top:0; z-index:1; background:#f5f8f9; color:#718894; text-align:left; font-size:9px; letter-spacing:.04em; padding:11px 14px; border-bottom:1px solid #dfe8ec; } td { font-size:10px; color:#4b6674; padding:12px 14px; border-bottom:1px solid #edf2f4; } tbody tr:hover { background:#f7fbfb; }.num { text-align:right; }.risk-tag { display:inline-flex; min-width:42px; justify-content:center; padding:3px 7px; border-radius:10px; font-size:9px; font-weight:700; }.risk-tag.high { color:#bf4c4c; background:#fee8e8; }.risk-tag.mid { color:#a86d10; background:#fff2d9; }.risk-tag.low { color:#177c61; background:#e1f4ee; }.detail-table { max-height:610px; }.table-foot { display:flex; justify-content:space-between; padding:10px 16px; color:#8196a1; font-size:9px; border-top:1px solid #e8eef1; }
.toast { position:fixed; right:24px; bottom:24px; z-index:20; background:#133247; color:white; padding:12px 16px; border-radius:9px; box-shadow:0 12px 36px rgba(6,31,48,.26); font-size:11px; opacity:0; transform:translateY(10px); pointer-events:none; transition:.25s; }.toast.show { opacity:1; transform:none; }
dialog { width:min(620px, calc(100vw - 32px)); border:0; border-radius:14px; padding:26px; color:#29495a; box-shadow:0 24px 80px rgba(14,45,63,.28); } dialog::backdrop { background:rgba(9,31,45,.48); backdrop-filter:blur(3px); }.dialog-close { position:absolute; top:14px; right:14px; border:0; background:#edf3f5; width:30px; height:30px; border-radius:50%; color:#55717f; }.required-fields { margin:16px 0; display:flex; gap:7px; flex-wrap:wrap; }.required-fields span { padding:5px 8px; background:#edf7f5; color:#16766f; border-radius:6px; font-size:10px; }.guide-note { display:grid; gap:5px; background:#f2f6f8; border-left:3px solid var(--teal); padding:13px; font-size:11px; line-height:1.55; }
@media (max-width: 1180px) { .app-shell { grid-template-columns:82px minmax(0,1fr); }.sidebar { padding-inline:12px; }.brand { justify-content:center; padding-inline:0; }.brand > span:last-child,.nav-item span:last-child,.data-health div,.help-link { display:none; }.nav-item { justify-content:center; }.kpi-grid { grid-template-columns:repeat(3,1fr); }.topbar { align-items:flex-start; }.source-pill { display:none; } }
@media (max-width: 850px) { main { padding:22px 18px 34px; }.topbar { display:block; }.top-actions { justify-content:flex-start; margin-top:17px; }.filterbar { flex-wrap:wrap; padding:8px; }.filterbar label { width:50%; min-width:0; border:0; padding:7px 10px; }.updated { width:100%; margin:8px 0 0; padding:8px 10px 2px; border-top:1px solid #edf2f4; }.dashboard-grid { grid-template-columns:1fr; }.kpi-grid { grid-template-columns:repeat(2,1fr); }.risk-summary { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px) { .app-shell { display:block; }.sidebar { position:fixed; inset:auto 0 0; width:100%; height:62px; padding:7px 13px; flex-direction:row; z-index:10; }.brand,.sidebar-foot { display:none; }.nav-list { padding:0; width:100%; display:flex; justify-content:space-around; }.nav-item { width:auto; display:grid; gap:1px; justify-items:center; padding:5px 14px; font-size:9px; }.nav-item span:last-child { display:block; }.nav-icon { font-size:15px; }.nav-item.active { box-shadow:inset 0 -2px #39c6b9; } main { padding:19px 13px 83px; }.top-actions { gap:7px; }.btn { flex:1; }.filterbar label { width:100%; border-bottom:1px solid #edf2f4; }.clear-filter { padding:10px; }.kpi-grid { grid-template-columns:1fr; }.kpi-card { min-height:110px; }.risk-summary { grid-template-columns:1fr; }.donut-wrap { flex-direction:column; align-items:flex-start; }.mix-legend { width:100%; }.legend { display:none; } }
.guide-download { display:inline-flex; align-items:center; justify-content:center; margin-top:14px; min-height:38px; padding:0 14px; border-radius:8px; background:var(--teal-dark); color:white; text-decoration:none; font-size:11px; font-weight:700; }
.login-dialog { width:min(460px, calc(100vw - 32px)); }.login-dialog p { color:#718894; font-size:11px; line-height:1.65; }.password-field { display:grid; gap:6px; margin-top:18px; }.password-field span { color:#4d6876; font-size:10px; font-weight:700; }.password-field input { width:100%; height:43px; border:1px solid #d6e2e7; border-radius:8px; padding:0 12px; color:#1f4052; outline:none; }.password-field input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,159,149,.11); }.login-submit { width:100%; margin-top:8px; }.login-error { min-height:18px; margin:5px 0 0!important; color:#c34e54!important; }.privacy-note { display:grid; gap:4px; margin-top:16px; padding:11px 12px; border-radius:8px; background:#f2f6f8; color:#78909c; font-size:9px; line-height:1.5; }.privacy-note b { color:#3c5a69; }