:root{
  --primary:#1a56c4;
  --primary-dark:#0d3a8f;
  --danger:#e0334f;
  --warning:#f4a53a;
  --success:#2fae66;
  --bg:#f4f6fa;
  --card:#ffffff;
  --border:#e5e9f0;
  --text:#1c1f26;
  --muted:#7b8496;
  --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);}
.app-shell{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;padding-bottom:70px;}

/* header */
.app-header{padding:16px 16px 8px;background:linear-gradient(135deg,#eaf1ff,#fdeef0);}
.patient-row{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;}
.avatar{width:34px;height:34px;border-radius:50%;background:#ffe1b0;color:#a05a00;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}

/* tab nav */
.tab-nav{display:flex;gap:6px;margin-top:14px;overflow-x:auto;}
.tab-btn{flex:1;text-align:center;background:none;border:none;padding:10px 4px;font-size:12.5px;color:var(--muted);cursor:pointer;border-radius:12px 12px 0 0;white-space:nowrap;}
.tab-btn .icon{display:block;font-size:18px;margin-bottom:2px;}
.tab-btn.active{color:var(--danger);border-bottom:3px solid var(--danger);font-weight:600;background:#fff;}

/* content */
.tab-content{padding:16px;display:none;}
.tab-content.active{display:block;}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:0 1px 2px rgba(20,30,60,.04);}
.card h3{margin:0 0 10px;font-size:15px;}
.section-title{font-size:16px;font-weight:700;margin:18px 0 10px;}

/* pill toggle */
.pill-toggle{display:flex;background:#eef1f6;border-radius:999px;padding:4px;margin-bottom:14px;}
.pill-toggle button{flex:1;border:none;background:none;padding:10px;border-radius:999px;font-weight:600;color:var(--muted);cursor:pointer;}
.pill-toggle button.active{background:#fff;color:var(--danger);box-shadow:0 1px 3px rgba(0,0,0,.08);}

.chip-row{display:flex;gap:8px;overflow-x:auto;margin-bottom:14px;}
.chip{border:1px solid var(--border);background:#fff;border-radius:999px;padding:8px 14px;font-size:13px;white-space:nowrap;cursor:pointer;color:var(--text);}
.chip.active{background:#fff0f1;border-color:var(--danger);color:var(--danger);}

/* dose grid, matches medication screenshot */
.dose-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:10px 0;}
.dose-cell{padding:10px 4px;text-align:center;font-size:12px;border-right:1px solid var(--border);}
.dose-cell:last-child{border-right:none;}
.dose-cell.am{background:#fdeee0;}
.dose-cell.pm{background:#eef1ff;}
.dose-cell .lbl{color:var(--muted);display:block;margin-bottom:4px;}
.dose-cell .val{font-size:16px;font-weight:700;}
.freq-note{background:#f5f6f9;border-radius:10px;padding:10px 12px;font-size:12.5px;color:#444;margin-top:4px;}

.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;}
.badge.high{background:#fde4e7;color:var(--danger);}
.badge.low{background:#fff3da;color:#a3720c;}
.badge.normal{background:#e5f7ec;color:var(--success);}

.list-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);}
.list-row:last-child{border-bottom:none;}
.list-row .name{font-weight:600;font-size:14px;}
.list-row .sub{font-size:12px;color:var(--muted);}
.list-row .value{font-weight:700;font-size:15px;}
.list-row .value.high{color:var(--danger);}
.list-row .value.low{color:#a3720c;}

.row-actions{display:flex;gap:10px;margin-top:4px;}
.row-actions button{border:none;background:none;color:var(--primary);font-size:12px;cursor:pointer;padding:0;}
.row-actions button.danger{color:var(--danger);}

.fab{position:fixed;right:calc(50% - 240px + 20px);bottom:80px;width:52px;height:52px;border-radius:50%;background:var(--primary);color:#fff;border:none;font-size:26px;box-shadow:0 4px 10px rgba(0,0,0,.2);cursor:pointer;z-index:40;}
@media (max-width:520px){.fab{right:20px;}}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);display:flex;max-width:480px;margin:0 auto;}
.bottom-nav a{flex:1;text-align:center;padding:8px 0 10px;font-size:11px;color:var(--muted);text-decoration:none;}
.bottom-nav a.active{color:var(--primary);font-weight:700;}

/* modal (reusable add/edit component) */
.modal-overlay{position:fixed;inset:0;background:rgba(15,20,35,.45);display:none;align-items:flex-end;justify-content:center;z-index:100;}
.modal-overlay.open{display:flex;}
.modal-sheet{background:#fff;width:100%;max-width:480px;border-radius:18px 18px 0 0;max-height:88vh;overflow-y:auto;padding:18px 18px 24px;}
.modal-sheet h3{margin-top:0;}
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;font-weight:600;}
.form-group select,.form-group input,.form-group textarea{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:10px;font-size:14px;background:#fafbfd;}
.form-row{display:flex;gap:10px;}
.form-row .form-group{flex:1;}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;border:none;font-weight:700;font-size:14px;cursor:pointer;}
.btn-primary{background:var(--primary);color:#fff;width:100%;}
.btn-secondary{background:#eef1f6;color:var(--text);}
.modal-actions{display:flex;gap:10px;margin-top:8px;}
.close-x{position:absolute;top:14px;right:18px;background:none;border:none;font-size:20px;color:var(--muted);cursor:pointer;}

.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.toolbar .btn-secondary{padding:8px 12px;font-size:12.5px;}

.gauge-wrap{display:flex;align-items:center;gap:16px;}
.insight{border-left:4px solid var(--muted);background:#f7f8fb;border-radius:10px;padding:10px 12px;margin-bottom:10px;font-size:13px;}
.insight.warning{border-color:var(--warning);background:#fff8ec;}
.insight.critical{border-color:var(--danger);background:#fdeef0;}
.insight.info{border-color:var(--primary);background:#eef3ff;}

@media print{
  .bottom-nav,.tab-nav,.fab,.app-header,.no-print{display:none !important;}
  .app-shell{max-width:100%;padding:0;}
  .card{break-inside:avoid;border:1px solid #999;}
}

/* ---------------- Visual identification: food / medicine icons ---------------- */
.visual-picker{display:flex;flex-wrap:wrap;gap:10px;max-height:260px;overflow-y:auto;padding:4px 2px;}
.visual-option{display:flex;flex-direction:column;align-items:center;gap:4px;width:78px;padding:10px 6px;
  border:2px solid var(--border);border-radius:12px;background:#fafbfd;cursor:pointer;}
.visual-option .vp-icon{font-size:28px;line-height:1;}
.visual-option .vp-img{width:40px;height:40px;border-radius:8px;object-fit:contain;}
.visual-option .vp-label{font-size:10.5px;text-align:center;color:var(--text);line-height:1.2;}
.visual-option.selected{border-color:var(--primary);background:#eef3ff;box-shadow:0 0 0 2px rgba(26,86,196,.15);}

.row-icon{font-size:30px;line-height:1;width:40px;text-align:center;flex-shrink:0;}
.row-icon-img{width:40px;height:40px;border-radius:10px;object-fit:contain;flex-shrink:0;}

.med-visual{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.pill-swatch{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:22px;border:1px solid rgba(0,0,0,.08);flex-shrink:0;}
.med-photo{width:46px;height:46px;border-radius:12px;object-fit:cover;border:1px solid var(--border);flex-shrink:0;}

/* ---------------- Simple / Large-text mode (for elderly & low-literacy users) ---------------- */
body.simple-mode{font-size:18px;}
body.simple-mode .card{padding:20px;}
body.simple-mode .tab-btn{font-size:14px;padding:14px 4px;}
body.simple-mode .tab-btn .icon{font-size:22px;}
body.simple-mode .btn,body.simple-mode .row-actions button{font-size:15px;padding:12px 16px;}
body.simple-mode .dose-cell .val{font-size:20px;}
body.simple-mode .dose-cell .lbl{font-size:13px;}
body.simple-mode .list-row .name{font-size:17px;}
body.simple-mode .list-row .sub{font-size:14px;}
body.simple-mode .visual-option{width:92px;padding:12px 8px;}
body.simple-mode .visual-option .vp-icon{font-size:34px;}
body.simple-mode .visual-option .vp-img{width:52px;height:52px;}
body.simple-mode .visual-option .vp-label{font-size:12px;}
body.simple-mode .row-icon{font-size:36px;width:48px;}
body.simple-mode .row-icon-img{width:52px;height:52px;}
body.simple-mode .pill-swatch,body.simple-mode .med-photo{width:56px;height:56px;}

/* Read-aloud / photo action buttons need generous tap targets, especially in row-actions */
.row-actions button{min-height:36px;padding:6px 10px;font-size:12.5px;border-radius:8px;background:#f2f4f8;}
.row-actions button.danger{background:#fdeef0;}

/* ---------------- Responsive polish ---------------- */
@media (min-width:600px){
  .app-shell{max-width:600px;box-shadow:0 0 30px rgba(20,30,60,.06);min-height:100vh;}
}
@media (min-width:900px){
  .app-shell{max-width:640px;margin:20px auto;border-radius:20px;overflow:hidden;min-height:auto;}
}
@media (max-width:360px){
  .card{padding:12px;}
  .dose-cell{padding:8px 2px;font-size:11px;}
  .visual-option{width:70px;}
}
/* Ensure every tappable control meets a comfortable minimum touch target */
.tab-btn,.chip,.btn,.pill-toggle button,.close-x{min-height:40px;}
input,select,textarea{min-height:44px;}
textarea{min-height:70px;}

/* ---------------- Recipes ---------------- */
.recipe-card{cursor:pointer;}
.recipe-cover{width:100%;height:150px;object-fit:cover;border-radius:10px;background:#eee;display:block;}
.recipe-cover-wrap{position:relative;}
.play-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.55);
  color:#fff;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;}
.recipe-cover-placeholder{display:flex;align-items:center;justify-content:center;font-size:48px;background:#f4f6fa;height:150px;}
.recipe-thumb{width:90px;height:90px;object-fit:cover;border-radius:8px;flex-shrink:0;background:#eee;}
.recipe-thumb-lg{width:150px;height:150px;object-fit:cover;border-radius:10px;flex-shrink:0;background:#eee;}

/* ---------------- Diabetic Food Guide ---------------- */
.food-guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.food-guide-item{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);
  border-radius:10px;padding:8px 10px;}
.food-guide-item .fg-name{font-size:12.5px;line-height:1.25;}

/* ---------------- Quick-log confirmation toast ---------------- */
.toast-confirm{position:fixed;left:50%;bottom:90px;transform:translate(-50%,10px);background:#1c1f26;color:#fff;
  padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;transition:all .25s ease;z-index:200;
  box-shadow:0 4px 14px rgba(0,0,0,.25);white-space:nowrap;}
.toast-confirm.show{opacity:1;transform:translate(-50%,0);}
.quick-log-btn{background:#e5f7ec !important;color:var(--success) !important;font-weight:700 !important;}