*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#F4F7FA;color:#0B1F3A}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
.screen{display:none}.screen.active{display:block}
#nav{position:sticky;top:0;z-index:50;background:#1A3557;border-bottom:1px solid rgba(255,255,255,0.08)}
.nav-top{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;padding-top:max(10px, env(safe-area-inset-top));gap:10px}
.nav-logo{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-logo span{color:#fff;font-weight:800;font-size:15px}
.nav-signout{flex-shrink:0;display:flex;align-items:center;gap:6px;background:#fff;color:#0B1F3A;border:none;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:700;min-height:44px;box-shadow:0 1px 3px rgba(0,0,0,0.2);transition:background 0.15s}
.nav-signout:hover,.nav-signout:active{background:#E8EDF3}
.nav-signout-icon{font-size:15px;line-height:1}
.nav-tabs{display:flex;align-items:center;flex-wrap:wrap;row-gap:2px;column-gap:2px;padding:0 8px 6px 8px}
#nav-user{color:#7A9BBF;font-size:12px;white-space:nowrap;padding:8px 8px 8px 4px;flex-shrink:0}
.nav-btn{background:none;border:none;padding:10px 14px;color:#7A9BBF;font-weight:400;font-size:13px;border-bottom:2px solid transparent;display:flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0;min-height:44px;transition:all 0.15s}
.nav-btn.active{color:#fff;font-weight:700;border-bottom-color:#1D8A8A}
.card{background:#fff;border-radius:12px;border:1px solid #D0DCE8;padding:20px;box-shadow:0 1px 4px rgba(11,31,58,0.06)}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:600;color:#6B7C93;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.06em}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid #D0DCE8;border-radius:8px;font-size:15px;color:#0B1F3A;background:#fff;outline:none}
.field input:disabled{background:#EEF3F9;color:#6B7C93;cursor:not-allowed}
.field .hint{font-size:11px;color:#6B7C93;margin-top:4px}
.dob-trigger{width:100%;text-align:left;padding:10px 12px;border:1px solid #D0DCE8;border-radius:8px;font-size:15px;background:#fff;color:#0B1F3A;cursor:pointer}
.dob-trigger.placeholder{color:#6B7C93}
.dob-trigger:hover{border-color:#1D8A8A}
.dob-picker{margin:-8px 0 16px 0;border:1px solid #D0DCE8;border-radius:8px;padding:12px;background:#F4F7FA}
.dob-picker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dob-picker-header button{background:none;border:none;font-size:16px;cursor:pointer;color:#1D8A8A;padding:4px 12px;border-radius:6px}
.dob-picker-header button:hover:not(:disabled){background:#E8F5F5}
.dob-picker-header button:disabled{opacity:0.3;cursor:not-allowed}
.dob-picker-title{font-weight:700;font-size:14px;color:#0B1F3A}
.dob-picker-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.dob-picker-grid.months{grid-template-columns:repeat(3,1fr)}
.dob-picker-grid.days{grid-template-columns:repeat(7,1fr)}
.dob-cell{padding:9px 4px;text-align:center;border-radius:6px;font-size:13px;cursor:pointer;background:#fff;border:1px solid #D0DCE8;color:#0B1F3A}
.dob-cell:hover{background:#E8F5F5;border-color:#1D8A8A}
.dob-cell.weekday-label{background:none;border:none;font-weight:700;color:#6B7C93;cursor:default;font-size:11px;padding:2px 4px}
.dob-cell.empty{background:none;border:none;cursor:default}
.portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.portal-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px 12px;border:1px solid #D0DCE8;border-radius:14px;background:#fff;cursor:pointer;transition:all 0.15s}
.portal-card:hover{border-color:#1D8A8A;background:#E8F5F5;transform:translateY(-1px)}
.portal-card:active{transform:translateY(0)}
.portal-icon{font-size:30px;line-height:1}
.portal-label{font-size:14px;font-weight:700;color:#0B1F3A;letter-spacing:0.01em}
.btn{border:none;border-radius:8px;font-weight:600;padding:10px 20px;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;transition:all 0.15s}
.btn-lg{padding:14px 28px;font-size:16px}
.btn-sm{padding:6px 14px;font-size:13px}
.btn-primary{background:#1D8A8A;color:#fff}
.btn-secondary{background:#F4F7FA;color:#0B1F3A;border:1px solid #DDE4EC}
.btn-danger{background:#C0392B;color:#fff}
.btn-ghost{background:transparent;color:#1D8A8A;border:1px solid #1D8A8A}
.btn-full{width:100%;justify-content:center}

/* Medication reminders — large, high-contrast, elderly-friendly tap targets,
   per the feature spec ("clean, large buttons, easy for elderly users"). */
.med-dose-card{background:#fff;border:1px solid #DDE4EC;border-radius:14px;padding:16px 18px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.med-dose-card.overdue{border-color:#C0392B;background:#FBEAEA}
.med-dose-name{font-weight:700;font-size:16px;color:#0B1F3A}
.med-dose-time{font-size:14px;color:#4A5A70;margin-top:2px}
.med-dose-actions{display:flex;gap:10px}
.med-action-btn{min-width:96px;min-height:52px;border-radius:12px;font-size:15px;font-weight:700;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.med-action-taken{background:#1A7A4A;color:#fff}
.med-action-skip{background:#F4F7FA;color:#4A5A70;border:1px solid #DDE4EC}
.med-empty-state{text-align:center;padding:32px 16px;color:#4A5A70}
.med-card-row{background:#fff;border:1px solid #DDE4EC;border-radius:12px;padding:14px 16px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.med-adherence-score{font-size:28px;font-weight:800;color:#0B1F3A}
.med-adherence-msg{font-size:14px;color:#4A5A70;margin-top:4px}
.med-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.med-calendar-dot{width:100%;aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;font-weight:700}
.med-dot-green{background:#1A7A4A}
.med-dot-red{background:#C0392B}
.med-dot-pending{background:#DDE4EC;color:#7A8AA0}
.med-low-stock-card{background:#FBF3E6;border:1px solid #E9D9BC;border-radius:12px;padding:14px 16px;margin-bottom:10px;color:#8A6320;font-size:14px}
.btn-mt{margin-top:8px}
.btn:disabled{opacity:0.4;cursor:not-allowed}
.badge-high{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:700;background:#FDECEA;color:#C0392B;border:1px solid #F1948A}
.badge-low{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:700;background:#E9F7EF;color:#1A7A4A;border:1px solid #82E0AA}
.err{color:#C0392B;font-size:13px;margin-bottom:12px}
.alert-note{background:#E8F5F5;border:1px solid #1D8A8A;border-radius:12px;padding:16px;margin-bottom:16px;display:flex;gap:12px}
.alert-amber{background:#FEF9E7;border:1px solid #F0B27A;border-radius:10px;padding:14px;margin-bottom:20px;display:flex;gap:10px;align-items:center}
.alert-green{background:#E9F7EF;border:1px solid #82E0AA;border-radius:12px;padding:16px;margin-bottom:16px}
.consent-text{background:#F4F7FA;border-radius:8px;padding:14px;font-size:12px;line-height:1.7;max-height:200px;overflow-y:auto;margin-bottom:16px;border:1px solid #D0DCE8}
.consent-item{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-bottom:10px;padding:10px 12px;border-radius:8px;background:#F4F7FA}
.consent-item.optional{background:#E8F5F5}
.consent-item input{margin-top:2px;accent-color:#1D8A8A;width:16px;height:16px;flex-shrink:0}
.consent-item span{font-size:13px;line-height:1.5}
.consent-tag{display:inline-block;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;padding:2px 6px;border-radius:4px;background:#D0DCE8;color:#6B7C93;margin-left:6px;vertical-align:middle}
.consent-tag.opt{background:#1D8A8A;color:#fff}
.progress-bar{background:#1A3557;height:4px}
.progress-fill{height:4px;background:#1D8A8A;transition:width 0.4s}
.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.metric-tile{background:#fff;border:2px solid #D0DCE8;border-radius:12px;padding:16px 14px;cursor:pointer;text-align:left;transition:all 0.15s}
.metric-tile:hover{border-color:#1D8A8A;background:#E8F5F5}
.metric-tile.done{background:#E9F7EF;border-color:#82E0AA;cursor:default}
.metric-icon{font-size:24px;margin-bottom:6px}
.metric-name{font-size:13px;font-weight:700;color:#0B1F3A}
.metric-hint{font-size:11px;color:#6B7C93;margin-top:2px}
.metric-tile.done .metric-name{color:#1A7A4A}
.metric-tile.done .metric-hint{color:#1A7A4A}
.saved-row{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#fff;border-radius:8px;border:1px solid #D0DCE8;margin-bottom:6px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.stat-card{background:#fff;border-radius:12px;border:1px solid #D0DCE8;padding:14px;box-shadow:0 1px 4px rgba(11,31,58,0.06)}
.stat-num{font-size:26px;font-weight:800}
.stat-label{font-size:12px;color:#6B7C93;margin-top:2px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;border:1px solid #D0DCE8;font-size:13px}
thead tr{background:#EEF3F9}
th{padding:10px 14px;text-align:left;font-size:11px;font-weight:700;color:#6B7C93;text-transform:uppercase;letter-spacing:0.06em;white-space:nowrap}
td{padding:12px 14px;border-top:1px solid #D0DCE8}
tr:nth-child(even) td{background:#F4F7FA}
.modal-overlay{position:fixed;inset:0;background:rgba(11,31,58,0.65);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal-box{width:100%;max-width:460px;background:#fff;border-radius:12px;border:1px solid #D0DCE8;padding:20px;box-shadow:0 1px 4px rgba(11,31,58,0.06)}
.toggle-group{display:flex;gap:8px;margin-bottom:14px}
.toggle-btn{flex:1;padding:8px 6px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;transition:all 0.15s;border:2px solid #D0DCE8;background:#fff;color:#6B7C93}
.toggle-btn.active{border-color:#1D8A8A;background:#E8F5F5;color:#1D8A8A}
.section-label{font-size:12px;font-weight:600;color:#6B7C93;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px}
.smoking-row{display:flex;gap:10px}
.smoking-btn{flex:1;padding:20px;border-radius:10px;font-weight:700;font-size:15px;cursor:pointer;transition:all 0.15s;border:2px solid #D0DCE8;background:#fff;color:#0B1F3A}
.smoking-btn.yes-active{border-color:#C0392B;background:#FDECEA;color:#C0392B}
.smoking-btn.no-active{border-color:#1A7A4A;background:#E9F7EF;color:#1A7A4A}
.tab-group{display:flex;gap:8px;background:#1A3557;border-radius:8px;padding:4px}
.tab-btn{padding:6px 14px;border-radius:6px;border:none;cursor:pointer;font-size:12px;font-weight:600;background:transparent;color:#7A9BBF;transition:all 0.15s}
.tab-btn.active{background:#1D8A8A;color:#fff}
.csv-preview{overflow-x:auto}
.csv-preview pre{font-size:10px;color:#0B1F3A;line-height:1.7;font-family:monospace;white-space:pre}
.hash-box{margin-top:14px;padding:12px;background:#fff;border-radius:8px;border:1px solid #D0DCE8}
.hash-label{font-size:11px;color:#6B7C93;font-weight:600;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.06em}
.hash-val{font-size:11px;color:#0B1F3A;word-break:break-all;font-family:monospace}
.bmi-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.bmi-result{background:#E8F5F5;border-radius:10px;padding:16px;text-align:center;margin-bottom:16px;border:1px solid #1D8A8A}
.bmi-result .bmi-num{font-size:36px;font-weight:800;color:#1D8A8A}
.bmi-result .bmi-cat{font-size:13px;color:#1D8A8A;margin-top:4px;font-weight:600}
.bmi-result.high{background:#FDECEA;border-color:#C0392B}
.bmi-result.high .bmi-num{color:#C0392B}
.bmi-result.high .bmi-cat{color:#C0392B}
.q-progress{display:flex;gap:6px;margin-bottom:20px}
.q-dot{width:10px;height:10px;border-radius:50%;background:#D0DCE8;transition:all 0.2s}
.q-dot.active{background:#1D8A8A;transform:scale(1.2)}
.q-dot.done{background:#1A7A4A}
.q-question{font-size:16px;font-weight:600;color:#0B1F3A;line-height:1.5;margin-bottom:20px;padding:16px;background:#F4F7FA;border-radius:10px;border-left:4px solid #1D8A8A}
.q-options{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.q-option{padding:14px 16px;border-radius:10px;border:2px solid #D0DCE8;background:#fff;cursor:pointer;text-align:left;font-size:14px;font-weight:500;color:#0B1F3A;transition:all 0.15s;display:flex;justify-content:space-between;align-items:center}
.q-option:hover{border-color:#1D8A8A;background:#E8F5F5}
.q-option.selected{border-color:#1D8A8A;background:#E8F5F5;color:#1D8A8A;font-weight:700}
.q-score-badge{font-size:12px;font-weight:700;color:#6B7C93;background:#EEF3F9;padding:2px 8px;border-radius:10px}
.q-option.selected .q-score-badge{background:#1D8A8A;color:#fff}
.q-total{background:#E8F5F5;border-radius:10px;padding:16px;text-align:center;margin-bottom:16px;border:1px solid #1D8A8A}
.q-total.high{background:#FDECEA;border-color:#C0392B}
.q-total .score-num{font-size:36px;font-weight:800;color:#1D8A8A}
.q-total.high .score-num{color:#C0392B}
.mt4{margin-top:4px}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}
.mb4{margin-bottom:4px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb20{margin-bottom:20px}
.flex{display:flex}.gap8{gap:8px}.gap10{gap:10px}
.bold{font-weight:700}.muted{color:#6B7C93}.red{color:#C0392B}.green{color:#1A7A4A}.amber{color:#D68910}.white{color:#fff}
tr.row-high{background:#FDECEA}
tr.row-high td{border-color:#F5C6C0}
.f11{font-size:11px}.f12{font-size:12px}.f13{font-size:13px}.f15{font-size:15px}.f16{font-size:16px}.f17{font-size:17px}
.inner{max-width:680px;margin:0 auto;padding:20px}
.inner-wide{max-width:960px;margin:0 auto;padding:20px}
.inner-med{max-width:720px;margin:0 auto;padding:20px}
.header-bar{background:#0B1F3A;padding:16px 20px;display:flex;align-items:center;justify-content:space-between}
.teal-info{background:#E8F5F5;border-radius:8px;padding:12px;margin-bottom:12px;font-size:14px;color:#1D8A8A;font-weight:600}
.amber-note{background:#FEF9E7;border:1px solid #F0B27A;border-radius:8px;padding:12px;margin-bottom:16px;font-size:13px;color:#D68910}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.scheme-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:700;color:#fff}
.portable-id-box{background:#0B1F3A;border-radius:12px;padding:16px 20px;color:#fff;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.history-metric-block{margin-bottom:24px}
.history-metric-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin-bottom:10px}
.history-entry{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.history-date{width:88px;font-size:11px;color:#6B7C93;flex-shrink:0}
.history-bar-track{flex:1;background:#EEF3F9;border-radius:6px;height:20px;overflow:hidden}
.history-bar-fill{height:100%;border-radius:6px;transition:width 0.3s}
.history-val{width:100px;text-align:right;font-size:12px;font-weight:700;flex-shrink:0}
.insight-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.insight-bar-label{width:150px;font-size:12px;font-weight:600;flex-shrink:0}
.insight-bar-track{flex:1;background:#EEF3F9;border-radius:6px;height:16px;overflow:hidden}
.insight-bar-fill{height:100%;background:#C0392B;border-radius:6px}
.insight-bar-pct{width:44px;text-align:right;font-size:12px;font-weight:700;flex-shrink:0}
.device-row{margin-bottom:16px;padding:12px;background:#EFF7F7;border:1px dashed #1D8A8A;border-radius:10px}
.btn-device{width:100%;padding:10px;background:#fff;border:1px solid #1D8A8A;color:#1D8A8A;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer}
.btn-device:hover:not(:disabled){background:#1D8A8A;color:#fff}
.btn-device:disabled{opacity:0.5;cursor:not-allowed}
.device-status{margin-top:8px;font-size:12px;color:#0B1F3A;min-height:14px}
.device-status.err{color:#C0392B}
.device-status.ok{color:#1D8A8A;font-weight:600}
.toast{position:fixed;bottom:20px;right:20px;background:#0B1F3A;color:#fff;padding:12px 18px;border-radius:8px;font-size:13px;z-index:200;box-shadow:0 4px 14px rgba(0,0,0,0.25)}