:root { --color-bg:#f4f7fb; --color-surface:#fff; --color-text:#172033; --color-muted:#64748b; --color-border:#dfe6ef; --color-primary:#3157d5; --color-success:#14945f; --color-danger:#d74747; --radius:14px; --shadow:0 8px 24px rgba(25,39,70,.07); }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--color-bg); color:var(--color-text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:14px; }
a { color:inherit; }
.statusbar { position:sticky !important; top:0; z-index:100; min-height:68px; display:flex; align-items:center; gap:20px; padding:8px 22px; background:rgba(255,255,255,.97) !important; color:var(--color-text) !important; border-bottom:1px solid var(--color-border); box-shadow:0 2px 14px rgba(25,39,70,.05); }
.brand { display:flex; align-items:center; gap:10px; flex:0 0 auto; }.brand-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:#fff; background:var(--color-primary); font-size:18px; font-weight:800; }.brand strong,.brand small { display:block; }.brand strong { font-size:16px; }.brand small { color:var(--color-muted); font-size:10px; }
.status-group { display:flex; align-items:flex-start; gap:17px; min-width:0; }.system-status-group { padding:7px 14px; background:var(--color-bg); border-radius:11px; }.account-status-group { justify-content:flex-end; margin-left:auto; }.status-item { min-width:70px; display:flex; flex-direction:column; justify-content:flex-start; }.status-label { display:block; height:14px; margin-bottom:2px; color:var(--color-muted); font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.status-value { display:flex; align-items:center; min-height:30px; gap:6px; white-space:nowrap; font-style:normal; font-weight:650; }.status-item > strong { display:flex; align-items:center; min-height:30px; }.status-item img { width:15px; height:15px; object-fit:contain; }.status-item input { width:105px; height:30px; padding:5px 9px; border:1px solid var(--color-border); border-radius:8px; }.status-item.token input { width:145px; }.header-clock { position:absolute; left:50%; transform:translateX(-50%); color:var(--color-text); text-align:center; font-variant-numeric:tabular-nums; }.header-clock em { white-space:nowrap; font-size:20px; font-style:normal; font-weight:750; line-height:30px; }.toggle-item { min-width:54px; }.connection-toggle { margin:0; }.compat-up { position:absolute; width:0 !important; height:0 !important; opacity:0; pointer-events:none; }.status-dot { width:8px; height:8px; border-radius:50%; background:var(--color-danger); }.watch-online .status-dot { background:var(--color-success); }
.dashboard-shell { display:grid; grid-template-columns:220px minmax(540px,1fr) 270px; align-items:start; gap:16px; max-width:1920px; margin:0 auto; padding:16px 18px; }
.dashboard-sidebar.sidenav { position:sticky !important; top:84px; width:auto !important; height:calc(100vh - 100px); margin:0 !important; padding:16px 13px; overflow-y:auto; background:#19243a; border-radius:var(--radius); box-shadow:var(--shadow); }.dashboard-sidebar a { display:block; padding:8px 10px; color:#cbd5e1; font-size:13px !important; text-decoration:none; border-radius:8px; }.dashboard-sidebar a:hover,.dashboard-sidebar a.active { color:#fff !important; background:rgba(255,255,255,.1); text-decoration:none !important; }.dashboard-sidebar section + section { margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.12); }
.eyebrow { margin:0 0 7px; color:var(--color-primary); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }.dashboard-sidebar .eyebrow { padding:0 10px; color:#8fa8ff; }.recording { color:#e2e8f0; }.recording > label { display:flex; justify-content:space-between; margin:0 10px 6px; font-size:12px; }.unit { color:#94a3b8; }.recording input[type=number] { width:calc(100% - 20px); margin:0 10px 12px; padding:8px 10px; color:var(--color-text); background:#fff; border:0; border-radius:8px; }.record-row { display:flex; align-items:center; justify-content:space-between; margin:0 10px; }.sensor-toggles { display:flex; gap:16px; margin:12px 10px 0; color:#cbd5e1; }.sensor-toggles input { accent-color:var(--color-primary); }
.watch-dialog-button { width:calc(100% - 20px); margin:18px 10px 0; padding:9px 12px; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:8px; cursor:pointer; font-weight:650; }.watch-dialog-button:hover { background:rgba(255,255,255,.16); }.compat-controls { display:none !important; visibility:hidden !important; position:absolute !important; width:0 !important; height:0 !important; overflow:hidden !important; pointer-events:none !important; }.watch-messages { display:none; }
.dashboard-main { min-width:0; }.section-heading { display:flex; align-items:flex-end; justify-content:space-between; margin:2px 0 12px; }.section-heading h1 { margin:0; font-size:23px; }.live-time { text-align:right; }.live-time span { display:block; color:var(--color-muted); font-size:10px; text-transform:uppercase; }.live-time strong { font-size:13px; }
.sensor-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:9px; margin:0 0 14px !important; padding:0 !important; width:auto !important; }.sensor-card { min-width:0; min-height:104px; padding:11px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:11px; box-shadow:var(--shadow); }.sensor-card h2 { margin:0 0 8px; overflow:hidden; color:var(--color-text) !important; font-size:12px; text-overflow:ellipsis; }.sensor-card dl { margin:0; }.sensor-card dl div { display:flex; justify-content:space-between; gap:6px; min-width:0; padding:2px 0; }.sensor-card dt { color:var(--color-muted); font-size:12px; font-weight:500; }.sensor-card dd { min-width:0; margin:0; overflow:hidden; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; text-overflow:ellipsis; }
.dashboard-card,.graph-card { min-width:0; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow); }.watch-card { margin-bottom:14px; overflow:hidden; }.card-heading { display:flex; justify-content:space-between; align-items:center; padding:13px 16px 0; }.card-heading h2 { margin:0; font-size:16px; }.watch-layout { display:grid; grid-template-columns:minmax(0,3fr) minmax(210px,1fr); align-items:stretch; gap:12px; padding:0 16px 14px; }.watch-viewport { min-width:0; }.watch-card canvas { display:block; width:100%; height:280px; margin:0 auto; }.orientation-reference { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; margin-top:12px; padding:14px; background:var(--color-bg); border:1px solid var(--color-border); border-radius:10px; }.orientation-reference strong { color:var(--color-muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }.orientation-reference svg { display:block; width:min(100%,220px); height:auto; overflow:visible; }.orientation-reference path[class^="axis-"] { fill:none; stroke-width:6; stroke-linecap:round; }.axis-x { stroke:#20a462; }.axis-y { stroke:#e05252; }.axis-z { stroke:#3878db; }.orientation-reference text { font-size:20px; font-weight:800; }.axis-x-label { fill:#20a462; }.axis-y-label { fill:#e05252; }.axis-z-label { fill:#3878db; }
.graph-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; min-width:0; }.graph-card { min-width:0; overflow:hidden; }.ppg-graph-card { grid-column:1 / -1; }.graph-card > summary { display:flex; align-items:center; justify-content:space-between; padding:12px 15px; cursor:pointer; font-weight:700; }.graph-card[open] summary { border-bottom:1px solid var(--color-border); }.core-graph-card > div[id$="Graph"] { width:100% !important; min-width:0; height:350px; min-height:0; overflow:hidden; }.graph-card details > div,.graph-card .js-plotly-plot,.graph-card .plot-container,.graph-card .svg-container { width:100% !important; max-width:100% !important; }.core-graph-card .plot-container,.core-graph-card .svg-container { height:100% !important; }.graph-card[open] #ppgSensorNone { height:1400px; }
.graph-card-toolbar { display:flex; justify-content:flex-end; min-height:34px; padding:7px 12px 0; }.ppg-graph-card .graph-card-toolbar { border-bottom:1px solid var(--color-border); padding-bottom:7px; }.sensor-hour-button { padding:4px 9px; color:var(--color-primary); background:#f4f7ff; border:1px solid #ccd6fa; border-radius:7px; cursor:pointer; font-size:12px; font-weight:750; }.sensor-hour-button:hover,.sensor-hour-button:focus-visible { background:#e8edff; border-color:var(--color-primary); outline-offset:2px; }
.time-window-toolbar { display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 18px; margin:0 0 12px; padding:11px 16px; }.time-window-toolbar .eyebrow { margin-bottom:2px; }.time-window-toolbar label { font-size:13px; font-weight:750; }.time-window-toolbar output { color:var(--color-primary); font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; }.time-window-toolbar input { grid-column:1 / -1; width:100%; height:18px; margin:0; accent-color:var(--color-primary); cursor:pointer; }
.labeling-panel.sidelab { position:sticky !important; top:84px; width:auto !important; height:auto; margin:0 !important; padding:18px; overflow:hidden; background:var(--color-surface); color:var(--color-text); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow); }.labeling-panel h2 { margin:0 0 16px; font-size:19px; }.labeling-panel a { display:inline-flex; padding:0; color:var(--color-primary); font-size:13px; text-decoration:none; }.labeling-panel > label { display:block; margin:15px 0 6px; color:var(--color-muted); font-size:11px; font-weight:700; }.labeling-panel select { width:100%; min-height:38px; padding:7px; border:1px solid var(--color-border); border-radius:8px; }.label-clock { padding:11px; background:var(--color-bg); border-radius:10px; overflow:hidden; }.label-clock span,.label-clock strong,.label-clock small { display:block; }.label-clock span { color:var(--color-muted); font-size:10px; }.label-clock strong { font-size:17px; }.label-clock small { overflow:hidden; color:var(--color-muted); text-overflow:ellipsis; }.label-action { display:flex; align-items:center; justify-content:space-between; margin:15px 0; padding:12px 0; border-block:1px solid var(--color-border); }.label-times { margin:0 0 16px; }.label-times div { display:flex; justify-content:space-between; gap:8px; padding:6px 0; }.label-times dt { color:var(--color-muted); font-weight:500; }.label-times dd { min-width:0; margin:0; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }.labeling-panel .primary-button { width:100%; justify-content:center; padding:10px 14px; color:#fff; background:var(--color-primary); border-radius:8px; }.success-feedback { display:block; margin:10px 0; color:var(--color-success); font-weight:700; }
.history-drawer { height:auto !important; max-width:calc(1920px - 36px); margin:0 auto 20px; overflow:visible; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow); }.history-drawer > summary { display:flex; align-items:center; gap:14px; padding:17px 20px; cursor:pointer; }.history-drawer > summary > span:first-child { margin-right:auto; }.history-drawer summary strong,.history-drawer summary small { display:block; }.history-drawer summary strong { font-size:17px; }.history-drawer summary small { margin-top:3px; color:var(--color-muted); }.history-drawer summary > span:last-child { color:var(--color-primary); font-weight:700; }.history-content { padding:18px 20px 20px; border-top:1px solid var(--color-border); }.history-presets { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }.history-preset,.history-toolbar button,.history-pager button,.history-actions button { padding:7px 11px; color:var(--color-text); background:#fff; border:1px solid var(--color-border); border-radius:8px; cursor:pointer; font-weight:650; }.history-preset:hover,.history-preset.active { color:#fff; background:var(--color-primary); border-color:var(--color-primary); }.history-toolbar { display:flex; align-items:center; gap:12px; padding:0 0 14px; }.history-toolbar input { display:none; width:240px; padding:8px 10px; border:1px solid var(--color-border); border-radius:8px; }.history-toolbar span { flex:1; color:var(--color-muted); font-size:12px; }.history-state { padding:28px; color:var(--color-muted); text-align:center; background:var(--color-bg); border:1px dashed var(--color-border); border-radius:10px; }.history-state.loading { padding:18px; }.history-table-region { max-height:620px; overflow:auto; border:1px solid var(--color-border); border-radius:10px; }.history-table { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:13px; }.history-table th { position:sticky; top:0; z-index:1; padding:11px 13px; color:var(--color-muted); background:#f8fafc; border-bottom:1px solid var(--color-border); text-align:left; white-space:nowrap; }.history-table th.sortable { cursor:pointer; }.history-table th.sortable:hover { color:var(--color-primary); }.history-table td { padding:11px 13px; border-bottom:1px solid var(--color-border); white-space:nowrap; }.history-table tbody tr:nth-child(even) { background:#fbfcfe; }.history-table tbody tr:hover { background:#f2f6ff; }.history-table tbody tr:last-child td { border-bottom:0; }.history-table .numeric { text-align:right; font-variant-numeric:tabular-nums; }.history-table .history-col-label { width:16%; }.history-table .history-col-user { width:7%; text-align:center; }.history-table .history-col-start,.history-table .history-col-end { width:22%; }.history-table .history-col-duration { width:10%; }.history-table .history-col-datapoints { width:12%; }.history-table .history-col-actions { width:11%; text-align:center; }.history-table .history-col-duration,.history-table .history-col-datapoints { text-align:right; font-variant-numeric:tabular-nums; }.history-actions { display:inline-flex; justify-content:center; gap:6px; }.history-actions button { padding:5px 8px; }.history-pager { display:flex; align-items:center; justify-content:flex-end; gap:14px; padding-top:14px; color:var(--color-muted); font-size:12px; }

.graph-card > summary,.history-drawer > summary { list-style:none; }
.graph-card > summary::-webkit-details-marker,.history-drawer > summary::-webkit-details-marker { display:none; }
.graph-card > summary::after,.history-drawer > summary::after { content:""; flex:0 0 auto; width:8px; height:8px; margin:0 3px 4px 8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .2s ease; }
.graph-card[open] > summary::after,.history-drawer[open] > summary::after { transform:rotate(-135deg); }
.legacy-compat,.legacy-compat .spinnerLoader,.legacy-compat #realDBTimeHeader { position:absolute !important; inset:auto !important; display:none !important; width:0 !important; height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border:0 !important; animation:none !important; }
.watch-dialog { width:min(560px,calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:20px; color:var(--color-text); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:0 24px 70px rgba(15,23,42,.3); }.watch-dialog::backdrop { background:rgba(15,23,42,.55); }.dialog-heading { display:flex; align-items:start; justify-content:space-between; margin-bottom:14px; }.dialog-heading h2 { margin:0; font-size:20px; }.dialog-heading button { width:34px; height:34px; padding:0; color:var(--color-muted); background:var(--color-bg); border:0; border-radius:50%; cursor:pointer; font-size:24px; line-height:1; }.watch-status-grid { display:grid; grid-template-columns:70px 1fr 1fr; gap:0; overflow:hidden; border:1px solid var(--color-border); border-radius:10px; }.watch-status-grid > * { display:flex; align-items:center; justify-content:space-between; min-width:0; padding:7px 10px; border-bottom:1px solid var(--color-border); }.watch-status-grid > :nth-last-child(-n+3) { border-bottom:0; }.watch-status-grid > strong { color:var(--color-muted); background:var(--color-bg); font-size:10px; text-transform:uppercase; }.watch-status-grid img { width:13px; height:13px; object-fit:contain; }
.sensor-hour-dialog { width:min(96vw,1800px); max-width:96vw; max-height:85vh; padding:20px; color:var(--color-text); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:0 24px 70px rgba(15,23,42,.3); overflow:hidden; }.sensor-hour-dialog::backdrop { background:rgba(15,23,42,.55); }.sensor-hour-heading { margin-bottom:8px; }.sensor-hour-status { margin:6px 0 0; color:var(--color-muted); font-size:12px; }.live-badge { margin-left:7px; padding:2px 6px; color:#087747; background:#dcfce7; border-radius:999px; letter-spacing:.04em; }.sensor-hour-content { max-height:calc(85vh - 105px); overflow-y:auto; overflow-x:hidden; }.sensor-hour-empty { margin:30px 0; padding:45px 20px; color:var(--color-muted); background:var(--color-bg); border:1px dashed var(--color-border); border-radius:10px; text-align:center; }.sensor-hour-dialog #sensorHourPlot { width:100%; min-width:0; height:560px; }.sensor-hour-dialog-ppg #sensorHourPlot { height:1500px; }
@media (min-width:1921px) {
  .dashboard-shell { width:100%; max-width:none; grid-template-columns:220px minmax(0,1fr) 270px; padding-inline:clamp(18px,1.2vw,36px); }
  .watch-layout { grid-template-columns:minmax(0,1fr) minmax(220px,280px); }
  .history-drawer { width:auto; max-width:none; margin-inline:clamp(18px,1.2vw,36px); }
  .sensor-hour-dialog { width:96vw; max-width:96vw; }
}
@media (max-width:1500px) { .dashboard-shell { grid-template-columns:205px minmax(500px,1fr) 250px; }.sensor-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.status-group { gap:12px; }.brand small { display:none; } }
@media (max-width:1280px) { .dashboard-shell { grid-template-columns:205px minmax(500px,1fr); }.labeling-panel.sidelab { position:relative !important; top:auto; grid-column:2; }.status-item.token { display:none; }.sensor-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:900px) { .statusbar { position:relative !important; flex-wrap:wrap; }.status-group { flex-wrap:wrap; }.header-clock { position:static; transform:none; order:3; }.dashboard-shell { grid-template-columns:1fr; }.dashboard-sidebar.sidenav,.labeling-panel.sidelab { position:relative !important; top:auto; grid-column:auto; height:auto; }.sensor-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.graph-grid { grid-template-columns:1fr; } }
@media (max-width:760px) { .watch-layout { grid-template-columns:1fr; }.orientation-reference { margin-top:0; }.orientation-reference svg { width:min(100%,200px); } }
@media (max-width:560px) { .sensor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.watch-card canvas { height:260px; }.core-graph-card > div[id$="Graph"] { height:320px; }.watch-status-grid { grid-template-columns:52px 1fr 1fr; }.watch-status-grid > * { padding:6px; font-size:11px; }.history-content { padding:14px 12px; }.history-toolbar { align-items:stretch; flex-direction:column; }.history-toolbar span { order:-1; }.history-pager { justify-content:space-between; gap:6px; } }

/* V6 label history: two-thirds history and one-third aggregate overview. */
.history-state.error { color:var(--color-danger); }
.history-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:16px; }
.history-main,.history-summary { min-width:0; }
.history-main h3,.history-summary h3 { margin:0 0 9px; font-size:14px; }
.history-layout .history-table { font-size:12px; }
.history-layout .history-table th,.history-layout .history-table td { padding:9px 8px; }
.history-main .history-table { min-width:780px; }
.history-table tbody tr.history-row-replaying,.history-table tbody tr.history-row-replaying:nth-child(even),.history-table tbody tr.history-row-replaying:hover { background:#e8f4ff; }
.history-actions button:disabled { opacity:.4; cursor:not-allowed; }
.history-action-tooltip { display:inline-flex; }
.history-summary { align-self:start; overflow:hidden; padding:13px; background:var(--color-bg); border:1px solid var(--color-border); border-radius:10px; }
.history-summary #labelSummary { max-height:574px; overflow:auto; border:1px solid var(--color-border); border-radius:8px; background:#fff; }
.summary-table .summary-col-label { width:58%; text-align:left; }
.summary-table .summary-col-count { width:18%; }
.summary-table .summary-col-datapoints { width:24%; }
.summary-table .summary-col-count,.summary-table .summary-col-datapoints { text-align:right; font-variant-numeric:tabular-nums; }
.summary-table td:first-child { max-width:190px; overflow:hidden; text-overflow:ellipsis; }
.history-replay-hint { margin:11px 2px 0; color:var(--color-muted); font-size:11px; }
.history-replay-status { margin:0 0 12px; padding:9px 12px; color:var(--color-primary); background:#eef2ff; border-radius:8px; font-weight:700; }
@media (max-width:900px) { .history-layout { grid-template-columns:1fr; } }