/* Scheme C — warm ivory, forest ink and sage. Shared by every page. */
:root {
  --primary:#416b4d; --primary-light:#66885d; --primary-dark:#2f523c; --primary-bg:#edf1e7;
  --success:#527552; --success-bg:#edf3e9; --warning:#b77e32; --warning-bg:#fbf2df;
  --danger:#c66550; --danger-bg:#fcf0e9; --info:#79865e; --info-bg:#f0f2e7;
  --bg:#f8f7f2; --bg-card:#fffefb; --bg-sidebar:#edf0e5;
  --bg-sidebar-hover:#e2e8d7; --bg-sidebar-active:#d9e2cb;
  --text:#183e35; --text-secondary:#637168; --text-muted:#7b8177;
  --text-sidebar:#3a5947; --text-sidebar-active:#193f30;
  --border:#e7e5da; --border-light:#f3f2eb;
  --shadow-sm:0 2px 8px #3e533503; --shadow:0 3px 12px #3e533508;
  --shadow-md:0 6px 22px #3e53350d; --shadow-lg:0 14px 45px #213d2520;
  --radius:10px; --radius-lg:14px; --sidebar-width:236px;
}
body { background: radial-gradient(ellipse at 85% 0%,#fffffb 0%,transparent 40%),var(--bg); }
.sidebar { border-right:1px solid #d9dfcf; background:var(--bg-sidebar) url('../assets/sage-botanical.svg') no-repeat left bottom 115px / 210px auto; }
.sidebar-brand { padding:30px 25px 14px; border:0; gap:10px; }
.brand-icon { color:#416c55; }
.brand-name { color:var(--text); font-size:17px; letter-spacing:0; white-space:nowrap; }
.brand-sub { color:var(--text); font-size:12px; letter-spacing:3px; margin-top:3px; }
.sidebar-motto { font-size:12px; color:#697d65; line-height:1.9; padding:0 26px 24px; }
.sidebar-nav { flex:0 1 auto; padding:8px 16px 8px 0; gap:10px; }
.nav-item { padding:14px 20px 14px 29px; border-radius:0 14px 14px 0; font-size:14px; gap:14px; }
.nav-item:hover { color:var(--text); }
.nav-item.active { font-weight:650; }
.nav-item.active:before { content:""; position:absolute; left:0; top:13px; bottom:13px; width:4px; border-radius:0 4px 4px 0; background:#46644a; }
.nav-item svg { width:19px; height:19px; }
.nav-badge { font-size:9px; padding:1px 5px; }
.badge-warning { background:#ede5d1; color:#88692c; }
.sidebar-footer { margin-top:auto; padding:18px 24px 24px; border:0; }
.sidebar-note { font-family:'Songti SC','SimSun',serif; font-size:14px; line-height:1.9; margin-bottom:18px; }
.sidebar-note span { color:#778372; font-size:12px; }
.auth-user-name { color:var(--text); }
.connection-status { color:#6d7a65; font-size:11px; margin-top:14px; }
.main-content { width:calc(100% - var(--sidebar-width)); max-width:none; min-width:0; padding:30px 30px 45px; }
.page { max-width:1500px; margin:auto; }
.page-header { margin-bottom:24px; }
.page-header h1 { font-family:'Songti SC','Noto Serif SC','SimSun',serif; font-size:33px; letter-spacing:1px; font-weight:700; }
.page-desc { color:#6c7e6d; font-size:13px; margin-top:7px; }
.dashboard-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:72px; }
.dashboard-meta { display:flex; align-items:center; gap:13px; font-size:12px; color:#747b70; }
.data-mode { background:#eee0c8; color:#745f38; padding:3px 10px; border-radius:20px; white-space:nowrap; font-size:11px; }
.sun-mark { font-size:39px; font-weight:300; line-height:1; color:#d4a663; padding-left:6px; }
.stats-grid { gap:16px; margin-bottom:18px; }
.stat-card { min-width:0; padding:23px 18px; gap:15px; min-height:145px; align-items:flex-start; border-color:var(--border); box-shadow:none; }
.stat-icon { width:49px; height:49px; border-radius:50%; margin-top:1px; }
.heart-icon,.bp-icon { background:#fbeadf; color:#df8c6b; }
.spo2-icon { background:#f6ead0; color:#cb9a49; }
.resp-icon { background:#e4eddf; color:#537456; }
.stat-label { font-size:13px; color:var(--text); letter-spacing:0; font-weight:600; }
.stat-info { min-width:0; gap:8px; }
.stat-value { font-size:clamp(24px,2.45vw,40px); font-weight:550; letter-spacing:-1.2px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.stat-value small { font-size:12px; color:var(--text-secondary); letter-spacing:0; }
.stat-trend { font-size:10px; color:var(--text-muted); margin-top:2px; }
.wellness-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr); gap:18px; align-items:start; }
.chart-card { box-shadow:none; min-width:0; }
.chart-header { padding:20px 21px 0; gap:12px; }
.chart-header h3 { font-size:16px; color:var(--text); font-weight:650; }
.section-symbol { font-size:23px; vertical-align:-2px; color:#8a9661; margin-right:3px; }
.coral { color:#de9273; }
.card-caption { margin:3px 0 0 29px; font-size:11px; color:var(--text-muted); }
.period-switch { display:flex; border:1px solid #dce1d2; border-radius:8px; overflow:hidden; flex-shrink:0; }
.period-switch button { border:0; background:transparent; color:var(--text-secondary); padding:6px 15px; font-size:12px; }
.period-switch button.active { color:white; background:var(--primary); }
.chart-badge { color:#667a57; background:#eef1e7; padding:3px 9px; }
.dashboard-heart-chart { height:270px; padding:18px 22px 0; }
.trend-footer { display:flex; justify-content:space-between; padding:7px 24px 19px; color:#7a8573; font-size:11px; }
.trend-footer i { display:inline-block; width:14px; height:2px; background:#68814c; vertical-align:middle; margin-right:6px; }
.overview-breath { align-self:stretch; }
.breath-quick-zone { width:calc(100% - 42px); margin:20px 21px 0; padding:20px 12px 17px; min-height:158px; border:1px dashed #b9c1ac; border-radius:11px; background:transparent; color:var(--primary); display:flex; align-items:center; flex-direction:column; gap:7px; transition:background .2s; }
.breath-quick-zone:hover { background:#f2f5ec; }
.breath-quick-zone strong { font-size:13px; font-weight:550; }
.breath-quick-zone span,.breath-quick-zone small { font-size:11px; color:#7f8478; }
.breath-quick-zone small { margin-top:6px; }
.breath-quick-action { display:flex; justify-content:center; padding:12px; }
.breath-quick-action .btn { min-width:190px; border-radius:30px; font-size:12px; padding:8px 21px; }
.breath-note { text-align:center; background:#f2f2e9; margin:0 20px 19px; padding:10px; border-radius:9px; color:#69785c; font-size:11px; }
.breath-note small { display:block; color:#858878; font-size:10px; margin-top:3px; }
.small-leaf { color:#849265; margin-right:5px; }
.text-link { border:0; background:transparent; color:var(--primary); font-size:11px; white-space:nowrap; padding:7px 0 7px 7px; }
.recent-table-wrap { padding:18px 20px 19px; overflow-x:auto; }
.recent-table { border-collapse:collapse; width:100%; text-align:left; font-size:11px; white-space:nowrap; }
.recent-table th { background:#f2f1ea; color:#536255; font-size:11px; font-weight:500; padding:12px 10px; }
.recent-table th small { font-size:9px; font-weight:400; }
.recent-table td { padding:15px 10px; border-bottom:1px solid #efeee6; color:#687265; }
.recent-table tr:last-child td { border:0; }
.recent-table td:first-child { color:#3c5547; }
.recent-table .empty-row { text-align:center; padding:45px 10px; }
.overview-secondary { display:grid; gap:16px; }
.dashboard-oxygen-chart { min-height:0; height:180px; padding:13px 18px 16px; }
.ai-tip-card { background:#f2f1e7; border:1px solid #e7e7d8; box-shadow:none; margin-bottom:0; padding:17px 20px; }
.ai-tip-header { gap:8px; margin-bottom:8px; }
.ai-tip-header h3 { color:var(--text); font-size:14px; }
.ai-icon { color:#bf944e; background:transparent; font-size:24px; }
.ai-tip-card p { font-size:11px; line-height:1.85; color:#697665; }
.ai-tip-time { color:#828a78; font-size:10px; }
.detail-heading { margin:26px 0 14px; display:flex; align-items:baseline; gap:14px; }
.detail-heading h2 { font-size:17px; font-weight:600; }
.detail-heading p { color:var(--text-muted); font-size:11px; }
.additional-charts { grid-template-columns:1fr 1fr; }
.btn { border-radius:8px; box-shadow:none; }
.btn-primary { background:var(--primary); }
.btn-primary:hover { background:var(--primary-dark); box-shadow:0 3px 10px #45694b15; }
.btn-outline { color:var(--primary); border-color:#cbd6bf; background:transparent; }
.btn-outline:hover { background:var(--primary-bg); }
input,select,textarea { accent-color:var(--primary); }
input:focus,select:focus,textarea:focus { border-color:#7f9b6c; outline-color:#7f9b6c; box-shadow:0 0 0 3px #7f9b6c18; }
button:focus-visible,a:focus-visible { outline:2px solid #678d53; outline-offset:4px; }
.upload-zone { border-color:#bfccb2; background:#f6f7f0; }
.upload-zone:hover,.upload-zone.dragover { background:#edf2e5; border-color:var(--primary); }
.dev-notice,.about-hero { background:#edf1e6; border-color:#d9e1cf; }
.ai-analysis-card { border-color:var(--border); }
.ai-analysis-header { background:#edf1e6; }
.mobile-header { background:#f5f6ee; color:var(--text); border-color:#dce1d2; }
.modal { background:var(--bg-card); }
@media(min-width:1600px) { .main-content { padding:36px 40px 50px; } .dashboard-heart-chart { height:305px; } }
@media(max-width:1250px) { :root { --sidebar-width:216px; } .main-content { padding:24px; } .stats-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .stat-card { padding:20px 12px; gap:9px; } .stat-icon { width:36px; height:36px; } .stat-icon svg { width:21px; } .stat-value { font-size:25px; } .wellness-grid { grid-template-columns:minmax(0,1.4fr) minmax(285px,1fr); } .chart-header { padding:17px 16px 0; } .card-caption { margin-left:0; } .dashboard-meta time { display:none; } }
@media(max-width:1050px) { .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .stat-card { padding:20px; } .stat-icon { width:46px; height:46px; } .stat-value { font-size:32px; } .wellness-grid { grid-template-columns:minmax(0,1fr); } .overview-breath { grid-row:2; } .overview-secondary { grid-template-columns:1fr; } .additional-charts { grid-template-columns:1fr; } }
@media(max-width:768px) { .main-content { width:100%; margin-left:0; margin-top:56px; padding:22px 16px 35px; } .sidebar { width:236px; } .dashboard-heading { align-items:flex-start; gap:8px; } .page-header h1 { font-size:28px; } .page-desc { font-size:11px; max-width:250px; } .dashboard-meta { gap:4px; padding-top:8px; } .sun-mark { display:none; } .stat-card { min-height:126px; padding:17px 13px; gap:10px; } .stat-value { font-size:28px; } .stat-icon { width:36px; height:36px; } .stat-value small { font-size:10px; } .stats-grid { gap:10px; } .wellness-grid { gap:14px; } .chart-header h3 { font-size:14px; } .period-switch button { padding:6px 10px; } .dashboard-heart-chart { height:230px; padding:15px 12px 0; } .recent-table-wrap { padding:14px 12px; } .detail-heading { flex-wrap:wrap; gap:5px; } }
@media(max-width:380px) { .stat-icon { display:none; } .stat-card { min-height:115px; } .dashboard-meta { display:none; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.auth-logout-btn { color:var(--primary)!important; border-color:#c5d0ba!important; }
.result-confidence { background:var(--primary-bg); color:var(--primary); }
@media(max-width:480px) {
  .stat-card { position:relative; padding:16px 13px; }
  .stat-icon { position:absolute; top:13px; right:12px; width:27px; height:27px; }
  .stat-icon svg { width:16px; height:16px; }
  .stat-info { width:100%; gap:12px; }
  .stat-label { max-width:calc(100% - 24px); font-size:12px; }
  .stat-value { font-size:27px; letter-spacing:-1px; }
}

.sync-panel {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 auto 20px;padding:12px 16px;max-width:1500px;background:#eef1e7;border:1px solid var(--border);border-radius:10px;font-size:12px;}
.sync-actions {display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.sync-actions [hidden] {display:none!important;}
.sync-panel[data-state="conflict"],.sync-panel[data-state="storage"],.sync-panel[data-state="invalid"] {background:#fff0df;}
.sync-actions select {max-width:230px;padding:6px;}

.saved-meta {padding:12px 20px;color:var(--text-secondary);font-size:12px;overflow-wrap:anywhere;}
.result-actions {display:flex;gap:10px;flex-wrap:wrap;padding:14px 20px;}
.breath-history-card {margin-top:22px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);}
.table-scroll {overflow-x:auto;padding:0 20px;}
.table-scroll td {max-width:220px;white-space:normal;overflow-wrap:anywhere;}
#reportBody h1 {font-size:22px;} #reportBody h2 {font-size:17px;margin:20px 0 8px;} #reportBody h3 {font-size:14px;}
#reportBody .meta {color:var(--text-muted);font-size:12px;overflow-wrap:anywhere;} #reportBody .notice {padding:12px;background:var(--primary-bg);border:1px solid var(--border);}
#reportBody td,#reportBody th {overflow-wrap:anywhere;} #reportBody .breath-entry {padding:12px 0;border-bottom:1px solid var(--border);}
@media print {body>*:not(.main-content){display:none!important}.main-content{margin:0!important;padding:0!important;width:100%!important}.main-content>*:not(#page-reports){display:none!important}#page-reports{display:block!important}#page-reports .page-header,#page-reports .report-config-card,#page-reports .report-history-card,#page-reports .past-reports-card,.report-actions{display:none!important}.reports-layout{display:block!important}#reportPreview{display:block!important;border:0;box-shadow:none}#reportBody table{font-size:10px}#reportBody tr{break-inside:avoid}#reportBody thead{display:table-header-group}}

#reportBody {overflow-x:auto;} @media print {#reportBody{overflow:visible;}}

.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.account-grid .about-card{margin:0}.account-grid h3,.account-danger h3{margin-bottom:12px}#page-account label,.record-edit-form label{display:flex;flex-direction:column;gap:5px;margin:12px 0;font-size:13px}#page-account input,.record-edit-form input,.record-edit-form select,.record-edit-form textarea{width:100%;padding:9px;border:1px solid var(--border);border-radius:7px;background:var(--bg-card);color:var(--text)}.account-help{font-size:12px;color:var(--text-secondary);line-height:1.8;margin:9px 0}.account-danger{border:1px solid #dab2a8;margin-top:20px}#recoveryCodeList{white-space:pre-wrap;word-break:break-all;font-size:12px;background:var(--primary-bg);padding:12px;margin:10px 0}.session-item{border-bottom:1px solid var(--border);padding:12px 0;overflow-wrap:anywhere;font-size:12px}.session-item p{margin:4px 0}.record-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}#accountContent[hidden],#accountGuest[hidden],#recoveryOutput[hidden]{display:none!important}@media(max-width:900px){.account-grid{grid-template-columns:1fr}}
/* Account API configuration and grounded report inputs. */
.ai-panel{margin:16px 24px;padding:20px;background:#f0f3e9;border:1px solid #d7dfce;border-radius:16px;line-height:1.7}
.ai-panel h3{margin-bottom:8px}.ai-panel p{margin:8px 0}.ai-panel input[type=file]{display:block;max-width:100%;margin:10px 0}
.ai-panel [hidden]{display:none!important}
.ai-consent{display:flex;gap:9px;align-items:flex-start;margin:12px 0}.ai-consent input{margin-top:7px;flex-shrink:0}
.ai-image-preview{display:flex;flex-wrap:wrap;gap:12px}.ai-image-preview figure{margin:0;width:130px}.ai-image-preview img{width:130px;height:100px;object-fit:contain;background:white;border-radius:8px}.ai-image-preview figcaption{font-size:12px;overflow-wrap:anywhere}
#aiServiceStatus,#aiStatus{overflow-wrap:anywhere}
@media(max-width:600px){.ai-panel{margin:12px;padding:14px}}
@media print{.ai-panel{display:none!important}}

/* Compact operator controls follow the existing card layout. */
#page-admin .manual-entry-card { padding:24px; }
#page-admin .form-row { gap:16px; align-items:center; flex-wrap:wrap; margin:12px 0; }
#page-admin .manual-entry-card > p { margin:12px 0; line-height:1.6; }
#page-admin h3 { margin-bottom:12px; }
#adminSearch { padding:9px 12px; border:1px solid var(--border); border-radius:8px; max-width:100%; }
#adminUsers .btn { margin:3px; }
#adminAudit { line-height:1.8; font-size:12px; }
