:root { --ink:#123e39; --teal:#176d64; --teal-dark:#0f4943; --mint:#eaf6f3; --line:#cfe3de; --coral:#b9534e; --soft:#f5faf8; --muted:#68827d; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--soft); font-family:ui-sans-serif,system-ui,-apple-system,"Noto Sans TC",sans-serif; }
button,input { font:inherit; } button { cursor:pointer; }
.mobile-nav,.history-toast { display:none; }
.history-toolbar { position:sticky; top:0; z-index:20; min-height:64px; padding:10px max(18px,calc((100% - 1240px)/2)); display:flex; align-items:center; gap:9px; color:#fff; background:var(--teal-dark); box-shadow:0 2px 12px rgba(7,55,49,.15); }
.history-toolbar h1 { flex:1; margin:0; font-size:18px; letter-spacing:0; }
.history-toolbar button,.history-toolbar a { display:inline-grid; place-items:center; min-width:38px; min-height:38px; border:1px solid rgba(255,255,255,.28); border-radius:7px; padding:7px 10px; color:#fff; background:transparent; text-decoration:none; font-size:12px; font-weight:800; }
.history-toolbar button:hover,.history-toolbar a:hover { background:rgba(255,255,255,.1); }
.history-toolbar .history-locale { min-width:124px; color:rgba(255,255,255,.8); }
.history-toolbar .history-locale select { height:38px; border-color:rgba(255,255,255,.34); color:#fff; background:#164e48; }
.history-desktop-nav{display:flex;align-items:center;gap:3px}.history-desktop-nav[hidden]{display:none}.history-desktop-nav a{min-width:0;min-height:34px;border-color:transparent;padding:6px 8px;font-size:10px}.history-desktop-nav a[aria-current=page]{background:rgba(255,255,255,.14)}
.history-main { width:min(1240px,calc(100% - 32px)); margin:24px auto 52px; }
.page-intro { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:16px; }.page-intro h2 { margin:0; font-size:25px; }.page-intro p { margin:5px 0 0; color:var(--muted); font-size:13px; }.subject-control { display:grid; grid-template-columns:minmax(150px,210px) minmax(190px,270px); align-items:center; gap:5px 9px; }.subject-control label { grid-column:1/-1; color:var(--muted); font-size:11px; font-weight:800; }.subject-control input,.subject-control select { min-width:0; min-height:40px; border:1px solid #bdd5d1; border-radius:6px; padding:7px 10px; color:var(--ink); background:#fff; font:inherit; font-size:13px; font-weight:750; }.subject-control select { padding-right:32px; }.subject-control input:focus-visible,.subject-control select:focus-visible { outline:3px solid rgba(23,109,100,.16); border-color:var(--teal); }.local-pill { grid-column:1/-1; justify-self:start; padding:5px 7px; border-radius:6px; color:#236a61; background:#dff1ed; font-size:10.5px; font-weight:800; }
.trend-summary { margin-bottom:16px; border:1px solid var(--line); border-radius:8px; padding:15px 16px; background:#fff; box-shadow:0 7px 20px rgba(21,76,69,.05); }.summary-head { display:flex; align-items:start; justify-content:space-between; gap:12px; }.summary-head p { margin:0; color:var(--teal); font-size:10px; font-weight:900; }.summary-head h2 { margin:3px 0 0; font-size:17px; }.summary-head span { padding:5px 7px; border-radius:5px; color:#236a61; background:#dff1ed; font-size:10px; font-weight:800; }.summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:12px; }.summary-group { min-width:0; padding:10px 11px; border-left:3px solid #9bbdb6; background:#f7fbfa; }.summary-group.attention { border-color:#c35b55; background:#fff7f6; }.summary-group.improvement { border-color:#2d8a6f; background:#f1fbf6; }.summary-group h3 { margin:0; font-size:12px; }.summary-group ul { margin:6px 0 0; padding-left:16px; color:#52726d; font-size:11.5px; line-height:1.5; }.summary-disclaimer { margin:10px 0 0; color:#718984; font-size:10.5px; line-height:1.4; }
.history-grid { display:grid; gap:16px; }.panel { border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; box-shadow:0 7px 20px rgba(21,76,69,.05); }.panel-head { padding:12px 15px; border-bottom:1px solid var(--line); background:var(--mint); }.panel-head h2 { margin:0; font-size:15px; }
#historyList { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.history-row { display:grid; grid-template-columns:minmax(125px,.85fr) minmax(260px,1.5fr) auto; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid #e7f0ee; }.history-row:nth-child(odd) { border-right:1px solid #e7f0ee; }.history-date time { display:block; font-size:14px; font-weight:900; }.history-date span { display:block; margin-top:2px; color:#718984; font-size:11px; overflow-wrap:anywhere; }.reading-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(54px,1fr)); gap:5px; }.reading-grid span { min-width:0; padding:5px 6px; border:1px solid transparent; border-radius:5px; color:#52726d; background:#f4f9f8; font-size:9px; }.reading-grid b { display:block; margin-top:1px; color:var(--ink); font-size:13px; }.reading-grid .metric-status-normal { color:#397066; border-color:#c5dfd7; background:#eff8f4; }.reading-grid .metric-status-normal b { color:#176d64; }.reading-grid .metric-status-info { color:#356b8c; border-color:#bed4e4; background:#f1f7fb; }.reading-grid .metric-status-info b { color:#245d80; }.reading-grid .metric-status-high { color:#8a5c08; border-color:#e9cb83; background:#fff8e9; }.reading-grid .metric-status-high b { color:#9a6200; }.reading-grid .metric-status-danger { color:#a34c47; border-color:#e6b1ad; background:#fff1f0; }.reading-grid .metric-status-danger b { color:#b43f3b; }.reading-grid .metric-status-unmeasured { color:#788985; border-color:#dfe8e5; background:#f7f9f8; }.reading-grid .metric-status-unmeasured b { color:#788985; }.row-actions { display:flex; gap:5px; }.icon-btn { width:32px; height:32px; border:1px solid #c9ddda; border-radius:6px; color:var(--teal); background:#fff; font-weight:900; }.icon-btn:hover,.icon-btn:focus-visible { border-color:var(--teal); background:var(--mint); }.icon-btn.danger { color:var(--coral); border-color:#efd3d1; background:#fff7f6; }.empty { padding:38px 24px; color:#6c827e; text-align:center; }.empty strong { display:block; margin-bottom:5px; color:var(--ink); font-size:15px; }
.chart-stack { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.chart-panel { min-width:0; border:1px solid var(--line); border-radius:8px; padding:14px; background:#fff; box-shadow:0 7px 20px rgba(21,76,69,.04); }.chart-head { display:flex; align-items:start; justify-content:space-between; gap:10px; }.chart-head h2 { margin:0; font-size:15px; }.chart-head p { margin:3px 0 0; color:#718984; font-size:10.5px; }.expand-chart { flex:0 0 auto; }.chart-plot { position:relative; height:280px; margin-top:6px; outline:none; touch-action:pan-y; }.chart-plot:focus-visible { border-radius:6px; box-shadow:0 0 0 3px rgba(23,109,100,.16); }.chart-plot canvas { width:100%!important; height:100%!important; }
.chart-head .chart-description { max-width:620px; margin-top:6px; color:#52726d; font-size:10.5px; line-height:1.45; }
.chart-values { min-height:53px; margin-top:8px; padding:8px 9px; border-top:1px solid #e2ece9; color:var(--muted); }.chart-values>strong { display:block; margin-bottom:6px; color:var(--ink); font-size:11px; }.chart-values>div { display:flex; flex-wrap:wrap; gap:6px 12px; }.chart-values span { display:grid; grid-template-columns:7px auto auto auto; align-items:center; gap:4px; font-size:10px; }.chart-values i { width:7px; height:7px; border-radius:50%; }.chart-values small { color:var(--muted); }.chart-values b { color:var(--ink); font-size:12px; }.chart-values em { color:#80928f; font-size:9px; font-style:normal; }
.chart-status-key { display:flex; flex-wrap:wrap; gap:4px 9px; margin-top:6px; }.chart-status-key span { display:inline-flex; align-items:center; gap:4px; color:#69817c; font-size:9px; font-weight:750; }.chart-status-key i { width:7px; height:7px; border-radius:50%; background:#8a9a96; }.chart-status-key .metric-status-normal i { background:#2d8a6f; }.chart-status-key .metric-status-info i { background:#3c74a4; }.chart-status-key .metric-status-high i { background:#c78318; }.chart-status-key .metric-status-danger i { background:#c34f49; }
.chart-values span { grid-template-columns:7px minmax(62px,auto) auto; padding:5px 7px; border-left:3px solid #d8e4e1; border-radius:4px; background:#f8fbfa; }.chart-values em { grid-column:2/-1; }.chart-values .metric-status-normal { border-color:#2d8a6f; }.chart-values .metric-status-info { border-color:#3c74a4; }.chart-values .metric-status-high { border-color:#c78318; background:#fffaf0; }.chart-values .metric-status-danger { border-color:#c34f49; background:#fff5f4; }
dialog { border:0; border-radius:8px; padding:0; box-shadow:0 24px 64px rgba(3,38,33,.3); } dialog::backdrop { background:rgba(3,38,33,.58); backdrop-filter:blur(5px); }.edit-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; color:#fff; background:var(--teal-dark); }.edit-head h2 { margin:0; font-size:18px; }.edit-head button,.fullscreen-close { width:36px; height:36px; border:1px solid rgba(255,255,255,.25); border-radius:6px; color:#fff; background:transparent; font-size:21px; }.edit-body { padding:18px; }.edit-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.edit-body label { display:grid; gap:5px; color:#52726d; font-size:12px; font-weight:800; }.edit-body input { width:100%; min-height:40px; border:1px solid #c9ddda; border-radius:6px; padding:8px; color:var(--ink); }.metric-editor { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid #e0ece9; }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }.dialog-actions button { border:0; border-radius:6px; padding:10px 13px; font-size:13px; font-weight:800; }.dialog-actions .save { color:#fff; background:var(--teal); }.dialog-actions .cancel { color:var(--teal); background:var(--mint); }
.chart-dialog { width:min(1180px,calc(100vw - 28px)); height:min(860px,calc(100vh - 28px)); max-width:none; max-height:none; background:#f7fbfa; }.chart-dialog:fullscreen { width:100vw; height:100vh; border-radius:0; }.chart-dialog-shell { height:100%; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }.chart-dialog header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 16px; color:#fff; background:var(--teal-dark); }.chart-dialog header p { margin:0; opacity:.72; font-size:10px; font-weight:800; }.chart-dialog header h2 { margin:2px 0 0; font-size:18px; }.fullscreen-plot { min-height:0; padding:18px; outline:none; touch-action:pan-y; }.fullscreen-plot canvas { width:100%!important; height:100%!important; }.chart-dialog .chart-values { margin:0; padding:11px 16px 14px; background:#fff; }
@media (max-width:1050px) { #historyList { grid-template-columns:1fr; }.history-row:nth-child(odd) { border-right:0; } }
@media (max-width:900px) { .chart-stack { grid-template-columns:1fr; }.summary-grid { grid-template-columns:1fr; }.chart-plot { height:300px; } }
@media (max-width:760px) { .history-desktop-nav{display:none!important}.history-main { margin-bottom:calc(102px + env(safe-area-inset-bottom)); }.mobile-nav { position:fixed; left:0; right:0; bottom:0; z-index:25; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); min-height:70px; padding:7px 5px max(8px,env(safe-area-inset-bottom)); border-top:1px solid #cbdedb; background:rgba(255,255,255,.97); box-shadow:0 -6px 22px rgba(10,70,64,.13); backdrop-filter:blur(12px); }.mobile-nav-item { min-width:0; min-height:54px; border:0; padding:4px 2px; display:grid; place-items:center; align-content:center; gap:3px; color:#637b77; background:transparent; text-decoration:none; font-size:9.5px; font-weight:800; line-height:1.1; }.mobile-nav-item svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }.mobile-nav-item[aria-current="page"] { color:var(--teal); background:#eaf5f3; border-radius:8px; }.history-toast { position:fixed; left:50%; bottom:calc(82px + env(safe-area-inset-bottom)); z-index:26; display:block; max-width:calc(100% - 24px); padding:10px 14px; border-radius:8px; color:#fff; background:#153f3b; box-shadow:0 12px 30px rgba(0,0,0,.2); font-size:12px; text-align:center; opacity:0; pointer-events:none; transform:translateX(-50%) translateY(12px); transition:.2s ease; }.history-toast.show { opacity:1; transform:translateX(-50%) translateY(0); } }
@media (max-width:620px) { .history-toolbar { min-height:56px; padding:8px 10px; flex-wrap:wrap; }.history-toolbar h1 { font-size:15px; }.history-toolbar .history-locale{order:5;flex:1 1 100%;}.history-main { width:calc(100% - 18px); margin-top:16px; }.page-intro { align-items:stretch; flex-direction:column; }.page-intro h2 { font-size:22px; }.subject-control { grid-template-columns:1fr; width:100%; }.subject-control input,.subject-control select { width:100%; }.local-pill { grid-column:1; }.trend-summary { padding:13px; }.summary-head h2 { font-size:15px; }.history-row { grid-template-columns:1fr auto; }.reading-grid { grid-column:1 / -1; grid-row:2; }.row-actions { grid-column:2; grid-row:1; }.chart-panel { padding:12px 10px; }.chart-plot { height:260px; }.chart-values>div { gap:5px 9px; }.metric-editor { grid-template-columns:1fr 1fr; }.edit-grid { grid-template-columns:1fr; }.chart-dialog { width:100vw; height:100vh; border-radius:0; }.fullscreen-plot { padding:10px 6px; } }