:root{
  --bg1:#0b1224;--bg2:#0f172a;--card:#1e293b;--ink:#e8eefc;--mut:#94a3b8;--line:#334155;
  --accent:#6366f1;--accent2:#22d3ee;--good:#22c55e;--warn:#f59e0b;--pill:#a855f7;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{
  font-family:'Segoe UI',system-ui,Arial,sans-serif;
  background:linear-gradient(160deg,var(--bg1),var(--bg2));color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
.view{display:none;min-height:100vh;flex-direction:column}
.view.active{display:flex}

/* role select */
#view-role{align-items:center;justify-content:center;text-align:center;padding:32px 22px;gap:8px}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{font-size:44px}
.brand h1{margin:0;font-size:38px;font-weight:800;background:linear-gradient(90deg,#818cf8,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sub{color:var(--mut);font-size:18px;margin:6px 0 20px}
.role-grid{display:grid;gap:16px;width:100%;max-width:460px}
.role-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 20px;cursor:pointer;color:var(--ink);text-align:center;transition:.15s}
.role-card:active{transform:scale(.98)}
.role-card.caregiver{border-color:rgba(99,102,241,.5)}
.role-card.parent{border-color:rgba(34,211,238,.5)}
.role-card.self{border-color:rgba(16,185,129,.55)}
.role-card .ic{font-size:46px}
.role-card .rt{font-size:22px;font-weight:700;margin-top:8px}
.role-card .rd{color:var(--mut);font-size:14px;margin-top:4px}
.ghost{margin-top:22px;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:10px 18px;font-size:14px;cursor:pointer}
.ver{color:var(--mut);font-size:11px;margin-top:18px;letter-spacing:.04em}

/* bars */
.bar{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);background:rgba(21,32,54,.6);position:sticky;top:0;backdrop-filter:blur(6px)}
.bar h2{margin:0;font-size:20px}
.back{background:transparent;border:none;color:var(--ink);font-size:26px;cursor:pointer;line-height:1;padding:0 4px}
.pad{padding:18px;display:flex;flex-direction:column;gap:16px;max-width:560px;width:100%;margin:0 auto}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.card.center{text-align:center}
.card h3{margin:0 0 10px;font-size:17px}
.muted{color:var(--mut);font-size:14px;margin:4px 0 12px}
.empty{color:var(--mut);font-size:14px;padding:14px 0;text-align:center}
.scaffold-note{color:#c084fc;font-size:12px;background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.35);border-radius:8px;padding:8px 10px;margin:12px 0 0}
.scaffold-note.center{text-align:center}
code{font-family:Consolas,monospace;background:#0b1224;border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:12px;color:#93c5fd}

/* buttons */
button.primary,button.secondary{width:100%;border:none;border-radius:12px;padding:14px;font-size:16px;font-weight:700;cursor:pointer;margin-top:8px}
button.primary{background:linear-gradient(90deg,#6366f1,#4f46e5);color:#fff}
button.secondary{background:#0b1224;color:var(--ink);border:1px solid var(--line)}
button.big{font-size:19px;padding:18px}
.bio-unlock,.bio-setup{border-color:rgba(34,211,238,.55)!important;color:#a5f3fc!important}

/* caregiver stats */
.stat-row{display:flex;gap:10px}
.stat{flex:1;background:#0b1224;border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.stat .n{font-size:26px;font-weight:800}
.stat .l{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.code{font-family:Consolas,monospace;font-size:30px;letter-spacing:4px;text-align:center;background:#0b1224;border:1px dashed var(--line);border-radius:12px;padding:16px;margin-bottom:6px;color:var(--accent2)}

/* parent pairing */
.big-ic{font-size:56px}
.pair-input{width:100%;font-size:28px;text-align:center;letter-spacing:6px;text-transform:uppercase;padding:14px;border-radius:12px;border:1px solid var(--line);background:#0b1224;color:var(--ink);margin:6px 0 14px;font-family:Consolas,monospace}

/* parent dose hero (elderly-first: huge, two buttons) */
.dose-hero{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px 22px;text-align:center}
.dose-time{font-size:20px;color:var(--accent2);font-weight:700}
.dose-name{font-size:34px;font-weight:800;margin:8px 0 2px}
.dose-hint{color:var(--mut);font-size:16px;margin-bottom:24px}
.dose-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dose-actions button{border:none;border-radius:16px;padding:26px 10px;font-size:22px;font-weight:800;cursor:pointer}
.taken{background:linear-gradient(90deg,#22c55e,#16a34a);color:#04210f}
.snooze{background:#0b1224;color:var(--ink);border:1px solid var(--line)!important}

/* bar action (sign out / unpair) */
.bar{justify-content:space-between}
.bar h2{flex:1;margin-left:4px}
.bar-action{background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:9px;padding:7px 12px;font-size:13px;cursor:pointer;white-space:nowrap}

/* auth tabs */
.tabs{display:flex;gap:8px;margin-bottom:14px}
.tab{flex:1;background:#0b1224;border:1px solid var(--line);color:var(--mut);border-radius:10px;padding:11px;font-size:15px;font-weight:600;cursor:pointer}
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* form fields */
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:13px;color:var(--mut)}
.fld span{font-weight:600;letter-spacing:.02em}
.fld input,.fld select{background:#0b1224;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:12px;font-size:16px;font-family:inherit}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--accent)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.subform{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}

/* times editor */
.times-wrap{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.time-row{display:flex;gap:8px;align-items:center}
.time-row input{flex:1;background:#0b1224;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:11px;font-size:16px}
.chip-rm{background:#2a1520;border:1px solid #7f1d1d;color:#fca5a5;border-radius:8px;width:40px;font-size:18px;cursor:pointer}
.chip-add{background:transparent;border:1px dashed var(--line);color:var(--accent2);border-radius:8px;padding:8px 12px;font-size:13px;cursor:pointer;margin-bottom:6px}

/* row buttons (parents) */
.rowbtn{display:flex;justify-content:space-between;align-items:center;width:100%;background:#0b1224;border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:14px;margin-bottom:8px;font-size:16px;cursor:pointer}
.rowbtn:active{transform:scale(.99)}
.pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.pill.ok{background:rgba(34,197,94,.15);color:#4ade80;border:1px solid rgba(34,197,94,.4)}
.pill.wait{background:rgba(245,158,11,.15);color:#fbbf24;border:1px solid rgba(245,158,11,.4)}

/* medicine cards */
.med{background:#0b1224;border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:10px}
.med-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:16px}
.med-stock{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:var(--mut);margin-top:4px}
.mini{background:#111a30;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer}
.mini.ok{background:rgba(34,197,94,.15);color:#4ade80;border-color:rgba(34,197,94,.4)}

/* refill alert rows */
.alert-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.alert-row:last-child{border-bottom:none}
.alert-btns{display:flex;gap:6px;flex-shrink:0}

/* parent skip link */
.skip-link{background:transparent;border:none;color:var(--mut);font-size:14px;margin-top:16px;cursor:pointer;text-decoration:underline}

/* adherence view */
.adh-ring{width:130px;height:130px;margin:6px auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:800;background:#0b1224;border:6px solid var(--line);color:var(--ink)}
.adh-ring span{font-size:18px;font-weight:700;margin-left:2px}
.adh-ring.good{border-color:var(--good);color:#4ade80}
.adh-ring.warn{border-color:var(--warn);color:#fbbf24}
.adh-ring.bad{border-color:#ef4444;color:#f87171}
.adh-streak{margin-top:10px;font-size:16px;font-weight:700;color:var(--pill)}
.adh-days{display:flex;gap:6px;align-items:flex-end;justify-content:space-between;padding-top:8px}
.adh-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.adh-bar-wrap{height:70px;width:100%;max-width:26px;background:#0b1224;border:1px solid var(--line);border-radius:6px;display:flex;align-items:flex-end;overflow:hidden}
.adh-bar{width:100%;border-radius:0 0 5px 5px}
.adh-bar.good{background:var(--good)}
.adh-bar.warn{background:var(--warn)}
.adh-bar.bad{background:#ef4444}
.adh-bar.none{background:transparent}
.adh-day-l{font-size:10px;color:var(--mut)}
.pill.bad{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.4)}

/* Agent 3 module mount slots */
.cc-slot:empty{display:none}
.cc-slot{margin-top:10px}

/* modal */
.modal{position:fixed;inset:0;background:rgba(3,7,18,.7);display:flex;align-items:center;justify-content:center;z-index:60;padding:20px}
.modal[hidden]{display:none}
.modal-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;width:100%;max-width:400px}
.modal-card h3{margin:0 0 14px}
.modal-actions{display:flex;gap:10px;margin-top:8px}
.modal-actions button{margin-top:0}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(30px);background:#111a30;border:1px solid var(--accent);color:var(--ink);padding:12px 18px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;max-width:90%;text-align:center;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== actionable daypart dose cards (patient) ===== */
.daypart{margin-top:4px}
.daypart h4{margin:10px 2px 8px;font-size:13px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.dose-card{display:flex;align-items:center;gap:12px;background:#0b1224;border:1px solid var(--line);border-radius:12px 12px 0 0;padding:14px;border-bottom:none}
.dose-card .dot{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.dose-card .dose-main{flex:1;min-width:0}
.dose-card .nm{font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dose-card .sub{font-size:13px;color:var(--mut);margin-top:2px}
.dose-when{font-size:15px;font-weight:700;color:var(--accent2);white-space:nowrap}
.dose-card.done{opacity:.55}
.dose-row-actions{display:flex;gap:8px;align-items:center;background:#0b1224;border:1px solid var(--line);border-top:none;border-radius:0 0 12px 12px;padding:0 12px 12px;margin-bottom:12px}
.dose-row-actions button{flex:1;border:1px solid var(--line);background:#111a30;color:var(--ink);border-radius:10px;padding:14px 8px;font-size:16px;font-weight:700;cursor:pointer}
.dose-row-actions .da-taken{background:rgba(34,197,94,.15);color:#4ade80;border-color:rgba(34,197,94,.4)}
.dose-row-actions .da-skip{flex:0 0 auto;background:transparent;color:#fca5a5;border-color:transparent;text-decoration:underline;padding:14px 8px}
.dose-row-actions .da-change{flex:0 0 auto;background:transparent;color:var(--accent2);border-color:transparent;text-decoration:underline;margin-left:auto;padding:10px 6px;font-weight:700}
.dose-row-actions .pill{font-size:12px}