:root { --ink:#14205d; --body:#66708b; --navy:#111b78; --blue:#5462c6; --line:#e7eaf2; --surface:#fff; --ground:#f7f8fc; --mint:#e4f4e8; --yellow:#fff3cf; --peach:#ffebe4; --shadow:0 18px 50px rgba(25,39,100,.08); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ground); color:var(--ink); font-family:"DM Sans",sans-serif; }
button,a { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; }
i { display:inline-flex; width:20px; height:20px; } svg { width:100%; height:100%; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.app-shell { min-height:100vh; }.sidebar { width:262px; position:fixed; inset:0 auto 0 0; z-index:30; padding:31px 20px 22px; background:#fff; border-right:1px solid #edf0f5; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:12px; margin:0 12px 55px; }.brand-mark { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff; background:var(--navy); box-shadow:0 7px 16px rgba(17,27,120,.2); }.brand-mark i{width:21px;height:21px}.brand strong { display:block; font:700 22px/1 "Outfit",sans-serif; letter-spacing:-.5px; }.brand small { display:block; margin-top:5px; color:#8991a5; font-size:11px; }
.nav-list { display:grid; gap:8px; }.nav-link { min-height:48px; padding:0 13px; border-radius:11px; color:#727c92; display:flex; align-items:center; gap:14px; font-size:14px; font-weight:600; transition:.2s ease; }.nav-link:hover { color:var(--navy); background:#f4f6ff; }.nav-link.active { background:#edf0ff; color:var(--navy); }.nav-link i { width:19px; height:19px; }.nav-count { margin-left:auto; background:#fff0cc; color:#9b6817; width:21px; height:21px; border-radius:50%; display:grid; place-items:center; font-size:11px; }
.sidebar-bottom { margin-top:auto; }
main { margin-left:262px; min-height:100vh; }.topbar { height:80px; padding:0 50px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #edf0f5; background:rgba(255,255,255,.8); backdrop-filter:blur(10px); position:sticky; top:0; z-index:20; }.page-title span { font:600 18px "Outfit",sans-serif; }.page-title small { display:block;color:#9299aa;font-size:11px;margin-top:3px; }.topbar-actions { display:flex;align-items:center;gap:18px; }.icon-button,.menu-button,.add-button { border:0;background:transparent;color:#616b83;display:grid;place-items:center; }.icon-button { position:relative;width:38px;height:38px;border-radius:50%; }.icon-button:hover { background:#f1f3fa;color:var(--navy); }.notification b { position:absolute;top:7px;right:8px;min-width:7px;width:auto;height:auto;padding:1px 4px;background:#e95b51;border:2px solid #fff;border-radius:9px;font-size:8px;font-weight:700;color:#fff;line-height:1.3;display:none;place-items:center; }.topbar-actions { position:relative; }.notifications-panel { position:absolute;top:calc(100% + 12px);right:0;width:350px;max-width:calc(100vw - 24px);background:#fff;border:1px solid #edf0f5;border-radius:16px;box-shadow:0 18px 45px rgba(15,22,68,.16);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s;z-index:60;overflow:hidden }.notifications-panel.open { opacity:1;visibility:visible;transform:translateY(0) }.notifications-head { display:flex;justify-content:space-between;align-items:center;padding:15px 17px;border-bottom:1px solid #edf0f5 }.notifications-head strong { font:700 15px "Outfit",sans-serif }.notifications-mark { border:0;background:transparent;color:#5362c4;font-size:11px;font-weight:700;cursor:pointer;padding:4px 6px;border-radius:6px }.notifications-mark:hover { background:#eef0ff }.notifications-list { max-height:min(380px,65vh);overflow-y:auto;padding:7px }.notification-item { display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:0;background:transparent;padding:11px 10px;border-radius:11px;cursor:pointer }.notification-item:hover { background:#f5f7fd }.notification-icon { flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#eef0ff;color:#5362c4 }.notification-icon i { width:17px;height:17px }.notification-icon.medicine { background:#e8f5ec;color:#3f9a62 }.notification-icon.appointment { background:#fff1d6;color:#c08a22 }.notification-icon.reminder { background:#fbe4e2;color:#cf5a50 }.notification-icon.goal { background:#eef0ff;color:#5362c4 }.notification-body { flex:1;min-width:0 }.notification-body strong,.notification-body small { display:block }.notification-body strong { font-size:12.5px;color:#2b3a8e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }.notification-body small { margin-top:3px;color:#7a8498;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }.notification-dot { flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#e95b51 }.notification-item.unread { background:#f7f8ff }.notifications-empty { padding:34px 16px;text-align:center;color:#8a93a6;font-size:12px }.notification { position:relative }.profile { display:flex;align-items:center;gap:8px;border:0;background:transparent;color:#6c7488; }.profile span { width:35px;height:35px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,#596ad1,#273385);font-size:12px;font-weight:700; }.profile i { width:14px;height:14px; }.menu-button { display:none; }
.content { max-width:1340px; padding:50px; margin:0 auto; }.welcome-row { display:flex;justify-content:space-between;align-items:end;margin:0 2px 34px; }.eyebrow { margin:0 0 9px;color:#7884a0;font-size:10px;letter-spacing:1.4px;font-weight:700; }.welcome-row h1 { margin:0;color:var(--ink);font:700 38px/1.13 "Outfit",sans-serif;letter-spacing:-1.2px; }.wave { font-size:30px; }.welcome-copy { margin:10px 0 0;color:var(--body);font-size:15px; }.primary-button,.outline-button,.soft-button,.text-button { border:0;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px; }.primary-button { padding:13px 18px;border-radius:10px;color:white;background:var(--navy);box-shadow:0 9px 18px rgba(17,27,120,.16);font-size:13px;transition:.2s; }.primary-button:hover{transform:translateY(-2px);background:#1d2a96}.primary-button i{width:18px;height:18px}
.summary-card { position:relative;overflow:hidden;border-radius:20px;min-height:260px;padding:37px 42px;background:linear-gradient(112deg,#edf0ff,#e3e7fb);display:flex;justify-content:space-between;align-items:center;isolation:isolate; }.summary-copy { max-width:620px;position:relative;z-index:2; }.soft-tag { background:#d4eadb;color:#417056;border-radius:30px;padding:7px 12px;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700; }.soft-tag i { width:14px;height:14px; }.summary-card h2 { margin:17px 0 10px;font:700 30px/1.17 "Outfit",sans-serif;letter-spacing:-.6px; }.summary-card p { margin:0;color:#59647b;line-height:1.6;font-size:14px;max-width:545px; }.text-button { margin-top:20px;padding:0;background:none;color:var(--navy);font-size:13px; }.text-button i { width:17px;height:17px; }.progress-area { margin-right:35px;display:flex;align-items:center;gap:16px;position:relative;z-index:2; }.progress-ring { width:116px;height:116px;border-radius:50%;background:conic-gradient(var(--navy) 0deg 180deg,#c8cfeb 180deg 360deg);display:grid;place-items:center;box-shadow:0 12px 25px rgba(45,59,129,.12); }.progress-ring>div { width:94px;height:94px;background:#f0f2ff;border-radius:50%;display:grid;place-content:center;text-align:center; }.progress-ring strong { font:700 27px/1 "Outfit",sans-serif; }.progress-ring span { color:#74809b;font-size:10px;margin-top:4px; }.progress-legend { max-width:100px; }.progress-legend strong { font:700 13px "Outfit",sans-serif;display:block; }.progress-legend span { display:block;color:#6d7891;line-height:1.4;margin-top:5px;font-size:10px; }.summary-decoration { position:absolute;border-radius:50%;z-index:1; }.deco-one { width:265px;height:265px;right:-108px;top:-128px;border:35px solid rgba(255,255,255,.31); }.deco-two { width:220px;height:220px;right:140px;bottom:-190px;background:rgba(101,119,203,.08); }
.dashboard-grid { margin-top:24px;display:grid;grid-template-columns:1.08fr 1.65fr 1.03fr;gap:24px;align-items:start; }.card { background:var(--surface);border:1px solid #eef0f5;border-radius:17px;padding:26px;box-shadow:0 7px 25px rgba(27,42,105,.025); }.appointment-card { grid-row:span 2;min-height:442px; }.appointment-card,.appointment-card .outline-button{color:white}.appointment-card{background:linear-gradient(135deg,#101a78,#3444a6);border-color:transparent}.appointment-card .heading-icon.lavender{color:#dbe1ff;background:rgba(255,255,255,.13)}.appointment-card .chip{color:#f3f4ff;background:rgba(255,255,255,.13)}.appointment-card .date-label{color:#b3beff}.appointment-card .muted{color:#dbe1ff}.appointment-card .location{color:#f3f4ff;border-top-color:rgba(255,255,255,.13)}.appointment-card .location i{color:#b3beff}.appointment-card .location small{color:#b3beff}.appointment-card .outline-button{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08)}.appointment-card .outline-button:hover{background:rgba(255,255,255,.18)}
.card-heading,.card-topline { display:flex;justify-content:space-between;align-items:start; }.heading-icon { width:42px;height:42px;border-radius:12px;display:grid;place-items:center; }.heading-icon i{width:20px;height:20px}.lavender{color:#535fc0;background:#e6e9ff}.chip { border-radius:30px;padding:6px 9px;color:#696587;background:#f1f0fa;font-size:10px;font-weight:700; }.date-label { margin:45px 0 8px;color:#6875c4;font-size:11px;letter-spacing:1px;font-weight:700; }.card h2 { margin:0;font:700 22px/1.2 "Outfit",sans-serif;letter-spacing:-.4px; }.muted { color:#747e93;font-size:13px;margin:8px 0 27px; }.location { display:flex;gap:11px;padding:14px 0;border-top:1px solid var(--line);color:#4c5771;font-size:12px;line-height:1.45; }.location i {color:#6976c7;width:18px;height:18px;flex:0 0 auto}.location small { color:#9299aa;font-size:11px; }.outline-button { width:100%;margin-top:29px;border:1px solid #d9deef;border-radius:9px;min-height:42px;color:var(--navy);background:white;font-size:12px; }.outline-button:hover{background:#f3f5ff}.outline-button i{width:15px;height:15px}
.medicine-card { min-height:312px; }.card-topline h2 { font-size:21px; }.compact { margin:3px 0 0;font-size:12px; }.medicine-list { margin-top:19px;display:grid;gap:7px; }.medicine-item { width:100%;border:1px solid transparent;border-radius:12px;background:#fafbfe;padding:12px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:11px;text-align:left;transition:.2s; }.medicine-item:hover {border-color:#d5dcf7;background:#f5f7ff}.medicine-item.due { border-color:#d4daf7;background:#f4f6ff; }.medicine-icon { width:37px;height:37px;border-radius:11px;display:grid;place-items:center; }.medicine-icon i{width:18px;height:18px}.blue{background:#e0e7ff;color:#4051b5}.yellow{background:#fff0c5;color:#a96e13}.coral{background:#ffe3df;color:#bd654f}.medicine-name strong,.medicine-name small,.medicine-time strong,.medicine-time small { display:block; }.medicine-name strong,.medicine-time strong { font-size:13px;color:#27345f; }.medicine-name small { margin-top:3px;color:#9098a9;font-size:10px; }.medicine-time { text-align:right; }.medicine-time strong { font-size:11px; }.medicine-time small { color:#929aad;font-size:10px;margin-top:3px; }.complete .medicine-time small {color:#4b9a6d;display:flex;justify-content:end;gap:2px;align-items:center}.complete .medicine-time small i{width:12px;height:12px}.due .medicine-time small{color:#d17649;font-weight:700}
.wellbeing-card { grid-column:3;min-height:203px; }.leaf-icon { width:25px;height:25px;color:#65a57a; }.wellbeing-stat { display:flex;align-items:center;gap:10px;margin:14px 0 12px;color:#718097;font-size:12px;line-height:1.4; }.stat-number { color:#285e4d;font:700 35px/1 "Outfit",sans-serif; }.water-track { display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin-bottom:14px; }.water-track span { height:7px;border-radius:5px;background:#e3eee6;transition:background .2s ease; }.water-track span:nth-child(-n+4){background:#83c5a2}.soft-button { padding:9px 11px;border-radius:8px;color:#397250;background:#e6f5eb;font-size:11px; }.soft-button i{width:14px;height:14px}.soft-button:hover{background:#d6f0df}
.wellbeing-title-link { cursor:pointer; display:inline-flex; align-items:center; gap:4px; transition:color .2s; }
.wellbeing-title-link:hover { color:#2e6c4e; }
.wellbeing-title-link i { width:15px; height:15px; }
.wellbeing-icon-btn { border:0; background:transparent; padding:4px; border-radius:8px; cursor:pointer; transition:background .2s; }
.wellbeing-icon-btn:hover { background:#e8f4ec; }
.wellbeing-tabs { display:flex; gap:4px; background:#f2f5f3; padding:3px; border-radius:10px; margin:12px 0 14px; }
.wb-tab { flex:1; border:0; background:transparent; border-radius:7px; padding:6px 4px; font-size:11px; font-weight:700; color:#67776f; display:inline-flex; align-items:center; justify-content:center; gap:4px; transition:all .2s; }
.wb-tab i { width:13px; height:13px; }
.wb-tab:hover { color:#285e4d; background:rgba(255,255,255,.5); }
.wb-tab.active { background:#fff; color:#285e4d; box-shadow:0 2px 6px rgba(40,94,77,.1); }
.wb-panel { display:none; }
.wb-panel.active { display:block; animation:wbFadeIn .2s ease; }
@keyframes wbFadeIn { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
.stat-meta { display:block; color:#285e4d; font-size:12px; }
.stat-subtext { display:block; color:#788b81; font-size:10px; margin-top:2px; }
.wb-action-row { display:flex; gap:6px; margin-top:14px; }
.wb-action-row .soft-button { flex:1; }
.soft-button.secondary { background:#f0f4f2; color:#5c6e64; flex:0 0 auto!important; }
.soft-button.secondary:hover { background:#e2e9e5; color:#285e4d; }
.soft-button.width-full { width:100%; margin-top:12px; }
.mind-stat { display:flex; align-items:center; gap:10px; margin:10px 0 12px; }
.mind-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:20px; background:#e4f4e8; color:#285e4d; font-size:13px; }
.mind-badge i { width:15px; height:15px; }
.muted-sm { color:#75857c; font-size:11px; margin:0; }
.mind-preview-card { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:#f5faf7; border:1px solid #e1eee6; }
.mind-sparkle { font-size:22px; }
.mind-preview-card strong { display:block; font-size:12px; color:#254a3e; }
.mind-preview-card small { display:block; font-size:10px; color:#6e8277; }
.rest-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
.rest-item { padding:8px; border-radius:9px; background:#f4f8f5; text-text-align:center; text-align:center; }
.rest-item small { display:block; font-size:9px; font-weight:700; color:#7a8e83; letter-spacing:.5px; }
.rest-item strong { display:block; font-size:13px; color:#254a3e; margin-top:3px; }
.gratitude-preview { font-style:italic; font-size:11px; color:#596e62; background:#f7faf8; padding:8px 10px; border-radius:8px; margin:8px 0 0; line-height:1.4; border-left:3px solid #83c5a2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wellbeing-dialog { max-width:540px; }
.wb-dialog-content { text-align:left; padding:32px; }
.wb-dialog-header { display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:20px; }
.dialog-icon.green { background:#e4f4e8; color:#285e4d; }
.wb-dialog-sections { display:grid; gap:18px; }
.wb-section { padding:18px; border-radius:14px; background:#f8faf9; border:1px solid #e6eeea; }
.wb-section h3 { margin:0 0 6px; font:700 16px "Outfit",sans-serif; color:#214438; display:flex; align-items:center; gap:8px; }
.wb-section h3 i { width:18px; height:18px; color:#3d8362; }
.wb-section p { margin:0 0 14px; font-size:12px; color:#657b70; line-height:1.45; }
.breath-widget { display:flex; flex-direction:column; align-items:center; text-align:center; padding:8px 0; }
.breath-circle-wrap { width:110px; height:110px; margin:8px 0 14px; display:grid; place-items:center; position:relative; }
.breath-circle { width:90px; height:90px; border-radius:50%; background:linear-gradient(135deg,#a4dbb8,#5cb182); color:#fff; display:grid; place-items:center; font-weight:700; font-size:12px; box-shadow:0 0 20px rgba(92,177,130,.3); transition:all 0.6s ease; }
.breath-circle.inhale { transform:scale(1.22); background:linear-gradient(135deg,#65c48f,#25744a); box-shadow:0 0 35px rgba(37,116,74,.4); }
.breath-circle.hold { transform:scale(1.22); background:linear-gradient(135deg,#489c6f,#1a5938); }
.breath-circle.exhale { transform:scale(0.88); background:linear-gradient(135deg,#b2e4c4,#74be95); }
.breath-timer-display { font:700 24px "Outfit",sans-serif; color:#214438; margin-bottom:12px; }
.compact-btn { padding:9px 16px; font-size:12px; }
.compact-field { max-width:240px; margin-top:4px; }
.goal-adjust-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.margin-top-md { margin-top:24px; }
.notes-card { grid-column:2 / span 2; }.add-button { width:30px;height:30px;border-radius:9px;color:#fff;background:var(--navy); }.add-button:hover{background:#27379e}.add-button i{width:17px;height:17px}.notes-list { margin-top:19px;display:grid;grid-template-columns:1fr 1fr;gap:11px; }.note { padding:14px 15px 13px;border-radius:10px;border-left:4px solid; }.note p{margin:0;color:#405446;font-size:12px;font-weight:600;line-height:1.45}.note small{display:block;margin-top:8px;color:#789080;font-size:10px}.mint{background:#edf8f0;border-color:#81bc92}.peach{background:#fff1ed;border-color:#eba184}.peach p{color:#765445}.peach small{color:#aa877a}
.mobile-scrim { display:none; }.toast { position:fixed;left:50%;bottom:25px;z-index:100;transform:translate(-50%,100px);padding:12px 17px;border-radius:10px;background:#24305f;color:white;box-shadow:var(--shadow);font-size:13px;transition:transform .25s ease; }.toast.show{transform:translate(-50%,0)} dialog { border:0;border-radius:18px;padding:0;box-shadow:0 25px 80px rgba(18,30,85,.25);max-width:390px;width:calc(100% - 36px); } dialog::backdrop{background:rgba(13,21,62,.38);backdrop-filter:blur(2px)}.dialog-content { position:relative;padding:33px;text-align:center; }.dialog-close{position:absolute;right:12px;top:9px;border:0;background:none;font-size:25px;color:#788199}.dialog-icon{width:48px;height:48px;margin:auto;display:grid;place-items:center;border-radius:14px;background:#e9edff;color:var(--navy)}.dialog-icon i{width:25px;height:25px}.dialog-content h2{margin:11px 0 8px;font:700 24px Outfit,sans-serif}.dialog-content>p:not(.eyebrow){color:#727c92;font-size:13px;line-height:1.5}.mood-row{display:flex;gap:8px;margin-top:24px}.mood-row button{flex:1;padding:11px 4px;border:1px solid #e6e9f2;border-radius:10px;background:#fff;font-size:21px}.mood-row span{display:block;margin-top:4px;color:#5f6981;font-size:10px;font-weight:700}.mood-row button:hover{background:#f1f3ff;border-color:#b7c0ed}.mood-row button.selected{background:#edf0ff;border-color:#5262c4;box-shadow:0 0 0 3px #e4e8ff}.mood-row button.selected span{color:#1d2b6b}
@media (max-width:1150px){.content{padding:38px 30px}.topbar{padding:0 30px}.dashboard-grid{grid-template-columns:1fr 1.5fr}.wellbeing-card{grid-column:1;grid-row:3}.notes-card{grid-column:2;grid-row:3}.appointment-card{grid-row:span 2}.progress-area{margin-right:0}.summary-card{padding:32px}.summary-card h2{font-size:27px}}
@media (max-width:800px){.sidebar{transform:translateX(-101%);transition:transform .25s ease;box-shadow:15px 0 45px rgba(15,22,68,.1)}.sidebar.open{transform:translateX(0)}.mobile-scrim.visible{display:block;position:fixed;inset:0;background:rgba(13,20,53,.34);z-index:25}main{margin-left:0}.menu-button{display:grid;width:38px;height:38px}.topbar{height:68px;padding:0 18px}.page-title small{display:none}.content{padding:30px 18px}.welcome-row{align-items:start;margin-bottom:27px}.welcome-row h1{font-size:31px}.welcome-copy{font-size:13px}.primary-button span{display:none}.primary-button{width:43px;height:43px;padding:0;border-radius:12px}.summary-card{padding:28px;display:block}.summary-card h2{font-size:25px}.summary-card p{font-size:13px}.progress-area{margin:28px 0 0}.dashboard-grid{grid-template-columns:1fr;gap:16px}.appointment-card,.medicine-card,.wellbeing-card,.notes-card{grid-column:auto;grid-row:auto;min-height:0}.appointment-card{padding-bottom:23px}.date-label{margin-top:34px}.notes-list{grid-template-columns:1fr}.topbar-actions{gap:4px}.notifications-panel{position:fixed;top:64px;right:12px;left:12px;width:auto;max-width:none}.notes-card .add-button{width:26px;height:26px}.card{padding:20px;border-radius:15px}.appointment-card{padding:26px}.wellbeing-card .stat-number{font-size:30px}.water-track{gap:3px}}
@media (max-width:420px){.profile i{display:none}.summary-card{padding:24px;border-radius:16px}.progress-legend{display:none}.progress-ring{width:95px;height:95px}.progress-ring>div{width:77px;height:77px}.progress-ring strong{font-size:22px}.summary-card h2{font-size:22px}.card{padding:16px;border-radius:13px}.appointment-card{padding:22px}.dashboard-grid{gap:12px}}

/* Shared secondary pages */
.subpage .content { padding-top:42px; }.subpage-header { display:flex; justify-content:space-between; align-items:end; margin-bottom:28px; }.subpage-header h1 { margin:0; font:700 38px/1.15 "Outfit",sans-serif; letter-spacing:-1px; }.subpage-header p { margin:9px 0 0; color:var(--body); font-size:15px; }.page-grid { display:grid; gap:24px; }.section-card { padding:27px; }.section-title { display:flex; align-items:center; gap:10px; margin:0 0 36px; font:700 21px "Outfit",sans-serif; }.section-title i { color:#5262c4; }.page-button { border:0; border-radius:10px; padding:12px 16px; min-height:44px; background:var(--navy); color:white; font-size:13px; font-weight:700; display:inline-flex; gap:8px; align-items:center; justify-content:center; }.page-button:hover{background:#25349d}.page-button i{width:17px}.page-button.secondary{background:#eef0ff;color:var(--navy)}.page-button.secondary:hover{background:#dde2ff}.action-row{display:flex;gap:10px;flex-wrap:wrap}.input-label{display:block;margin:0 0 7px;color:#626e86;font-size:12px;font-weight:700}.field{width:100%;height:48px;padding:0 13px;border:1px solid #dce1ed;border-radius:9px;background:#fbfcff;color:#26325d;font:inherit;font-size:13px;outline:none}.field:focus{border-color:#5160c5;box-shadow:0 0 0 3px #e4e8ff}.field-area{height:92px;padding-top:12px;resize:vertical}.field-grid{display:grid;gap:15px}.page-dialog{max-width:470px}.page-dialog form{padding:29px}.page-dialog h2{margin:0 0 20px;font:700 24px Outfit,sans-serif}.dialog-actions{display:flex;gap:10px;margin-top:20px}.dialog-actions button{flex:1}
.meds-layout{grid-template-columns:minmax(0,1.65fr) minmax(270px,.85fr)}.week-card{display:flex;justify-content:space-between;gap:25px;align-items:center;background:linear-gradient(125deg,#edf0ff,#f8f9ff)}.week-card h2{margin:0;font:700 24px Outfit,sans-serif}.week-card p{margin:7px 0 0;color:#66708b;font-size:13px}.week-progress{height:6px;margin-top:14px;background:#dde1f3;border-radius:20px;overflow:hidden;min-width:120px}.week-progress b{display:block;height:100%;width:0;border-radius:20px;background:linear-gradient(90deg,#101a78,#3444a6);transition:width .4s ease}.week-days{display:flex;gap:8px}.week-days span{width:38px;height:40px;border-radius:15px;background:white;display:grid;place-content:center;text-align:center;color:#8891a4;font-size:9px;font-weight:700;transition:transform .15s ease}.week-days span:hover{transform:translateY(-2px)}.week-days b{display:block;margin-top:3px;font-size:11px;color:#3d4966}.week-days .today{background:var(--navy);color:white}.week-days .today b{color:white}.week-days .done{background:#e2f3e8;color:#378156}.week-days .done b{color:#378156}.week-days .partial{background:#fff1d6;color:#b5791b}.week-days .partial b{color:#b5791b}.week-days .missed{background:#fbe4e2;color:#b4534b}.week-days .missed b{color:#b4534b}.week-days .future{background:#f0f2fa;color:#b3b9cb}.week-days .future b{color:#c0c5d6}.week-days .today.done{background:linear-gradient(135deg,#101a78,#3444a6);box-shadow:inset 0 0 0 2px #378156;color:white}.week-days .today.done b{color:#d6f0df}.week-days .today.partial{background:linear-gradient(135deg,#101a78,#3444a6);box-shadow:inset 0 0 0 2px #b5791b;color:white}.week-days .today.partial b{color:#ffe3b0}.week-days .today.missed{background:linear-gradient(135deg,#101a78,#3444a6);box-shadow:inset 0 0 0 2px #b4534b;color:white}.week-days .today.missed b{color:#ffd0cd}.schedule-list{display:grid;gap:11px;padding:8px 0;min-height:100px}.schedule-med{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:13px;padding:14px;border-radius:12px;background:#fafbfe;border:1px solid #edf0f5}.schedule-med.done{opacity:.65}.schedule-med.done .schedule-name strong{text-decoration:line-through}.schedule-med .medicine-icon{width:42px;height:42px}.schedule-name strong,.schedule-name small{display:block}.schedule-name strong{font-size:14px}.schedule-name small{margin-top:4px;color:#818a9e;font-size:11px}.schedule-time{color:#69748c;font-size:11px;font-weight:700}.check-pill{width:42px;height:42px;border:1px solid #cbd2e5;border-radius:50%;background:#fff;color:#6875c4;display:grid;place-items:center}.check-pill:hover,.check-pill.checked{background:#e2f3e8;border-color:#85b89a;color:#378156}.check-pill i{width:20px}.med-side{display:grid;gap:24px}.side-stat{padding:23px;text-align:center}.side-stat h3{margin:0;color:#62708f;font-size:11px;letter-spacing:1px}.side-stat strong{display:block;margin:8px 0;color:var(--navy);font:700 45px/1 Outfit,sans-serif}.side-stat p{margin:0;color:#758098;font-size:12px}.adherence{height:8px;margin:16px 0;background:#e6e9f4;border-radius:20px;overflow:hidden}.adherence b{display:block;width:86%;height:100%;background:#76bd91;border-radius:20px}.mini-list{display:grid;gap:2px;margin-top:8px}.medicine-side-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid #edf0f5}.medicine-side-item:last-child{border-bottom:0;padding-bottom:0}.medicine-side-info strong{display:block;font-size:13px;color:#27345f}.medicine-side-info span{display:block;margin-top:2px;color:#818a9e;font-size:10px}.medicine-side-actions{display:flex;gap:6px;flex:0 0 auto}.medicine-side-actions button{width:30px;height:30px;border:0;border-radius:7px;display:grid;place-items:center;color:#3648ae;background:#e9edff}.medicine-side-actions button:last-child{color:#b6534a;background:#fff0ee}.medicine-side-actions button i{width:15px;height:15px}.medicine-empty{padding:20px;text-align:center;color:#7a8498;font-size:12px}
.appointments-layout{grid-template-columns:minmax(0,1.6fr) minmax(280px,.85fr)}.next-appointment{color:white;background:linear-gradient(150deg,#182255 0%,#2f3d8f 55%,#4a62c4 100%);overflow:hidden;position:relative;border-radius:18px;padding:30px;margin:0 -27px;isolation:isolate}.next-appointment::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% -8%,rgba(255,255,255,.20),transparent 55%)}.next-appointment .deco{position:absolute;border-radius:50%;z-index:-1}.next-appointment .deco-one{width:250px;height:250px;right:-95px;top:-120px;border:32px solid rgba(255,255,255,.09)}.next-appointment .deco-two{width:220px;height:220px;left:-80px;bottom:-150px;background:rgba(255,255,255,.07)}.next-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:30px;background:rgba(255,255,255,.16);color:#eef1ff;font:700 10px "DM Sans",sans-serif;letter-spacing:1.2px;text-transform:uppercase;width:max-content;margin-bottom:16px}.next-chip i{width:13px;height:13px}.next-appointment-header{display:flex;align-items:center;gap:16px;position:relative;z-index:2}.provider-avatar{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#ffffff,#d9e0ff);color:#1d2a6b;font:700 17px Outfit,sans-serif;flex:0 0 auto;box-shadow:0 8px 18px rgba(9,16,46,.25);border:2px solid rgba(255,255,255,.40)}.provider-info h2{margin:0;color:#fff;font:700 22px/1.15 Outfit,sans-serif}.provider-info p{margin:6px 0 0;color:#c3cbf6;font-size:13px;line-height:1.4}.next-appointment .appointment-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;position:relative;z-index:2}.appointment-meta span{display:flex;align-items:center;gap:9px;color:#dde2ff;font-size:12px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);border-radius:11px;padding:11px 12px;min-width:0}.appointment-meta span i{width:16px;height:16px;flex:0 0 auto;color:#aab1ff}.reminder-toggle{position:absolute;top:16px;right:16px;z-index:3;border:1px solid rgba(255,255,255,.18);border-radius:10px;width:34px;height:34px;display:grid;place-items:center;background:rgba(255,255,255,.14);color:white;cursor:pointer}.reminder-toggle:hover{background:rgba(255,255,255,.28)}.reminder-toggle.on{background:#ffd9d2;color:#8a2f24;border-color:transparent}.reminder-toggle i{width:16px;height:16px}.next-appointment .muted{color:#dbe1ff;font-size:13px}.appointment-list{display:grid;gap:12px;margin-top:8px}.appointment-row{display:grid;grid-template-columns:52px 1fr auto;gap:13px;align-items:center;padding:13px;border-radius:12px;background:#fafbfe}.date-block{border-radius:10px;background:#e9edff;text-align:center;color:#4758bb;padding:6px;font-size:9px;font-weight:700}.date-block b{display:block;color:#1f2c70;font:700 19px/1 Outfit,sans-serif;margin:2px 0}.appointment-info strong,.appointment-info span{display:block}.appointment-info strong{font-size:14px}.appointment-info span{margin-top:4px;color:#7d879b;font-size:11px}.appointment-row .switch{margin-left:auto}.switch{border:0;width:40px;height:23px;border-radius:20px;padding:3px;background:#cfd4e1}.switch span{display:block;width:17px;height:17px;border-radius:50%;background:#fff;transition:.2s}.switch.enabled{background:#5362c4}.switch.enabled span{transform:translateX(17px)}.past-section .section-title{font-size:17px;opacity:.85}.past-count{margin-left:auto;padding:3px 9px;border-radius:20px;background:#eef0f7;color:#7a8498;font-size:10px;font-weight:700}.past-appointment-list{display:grid;gap:8px;margin-top:6px}.past-appointment-list .appointment-row{background:#f3f4f8;opacity:.8;grid-template-columns:46px 1fr auto;padding:10px}.past-appointment-list .date-block{background:#e8eaf2;color:#8b93a8}.past-appointment-list .date-block b{color:#a3a9bb}.past-appointment-list .appointment-info strong{font-size:13px}.past-appointment-list .appointment-info span{font-size:10px}.past-appointment-list .switch{display:none}.past-appointment-list .appointment-edit,.past-appointment-list .appointment-delete{width:26px;height:26px}.past-appointment-list .note-empty{padding:18px}.calendar-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 16px;padding:10px 12px;border-radius:10px;background:#f4f6fc}.calendar-head button{border:0;background:transparent;border-radius:7px;width:30px;height:30px;display:grid;place-items:center;color:#546297;cursor:pointer}.calendar-head button:hover{background:#e3e7ff;color:#1f2d7a}.calendar-head button:first-child i{transform:rotate(90deg)}.calendar-head button:last-child i{transform:rotate(-90deg)}.calendar-head span{font:700 16px Outfit,sans-serif;color:#1a2666}.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}.month-grid .wk{font-weight:600;color:#6f7a95;font-size:9px;letter-spacing:.5px;padding:6px 0 4px}.month-grid .day{display:grid;place-items:center;height:34px;border-radius:8px;color:#6a7490;font-size:12px;font-weight:500;cursor:pointer;transition:.15s;position:relative}.month-grid .day:hover{background:#eef1f9}.month-grid .today{background:linear-gradient(135deg,#101a78,#3444a6);color:white;font-weight:700}.month-grid .today:hover{background:linear-gradient(135deg,#101a78,#3444a6)}.month-grid .marked{font-weight:600;color:#1d2b6b}.month-grid .marked::after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:#5462c6}.month-grid .today.marked::after{background:rgba(255,255,255,.7)}.month-grid .selected{background:#e3e7ff;color:#1a2670;font-weight:700}.month-grid .selected:hover{background:#d6dcff}
.notes-toolbar{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:24px}.search-field{position:relative;flex:1;max-width:560px}.search-field i{position:absolute;left:14px;top:14px;color:#8d96aa}.search-field input{padding-left:43px}.notes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.note-card{min-height:220px;display:flex;flex-direction:column;padding:21px;transition:.2s}.note-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.note-card.reminder{border-left:4px solid #5362c4}.note-card.overdue{border-left:4px solid #df7664}.note-top{display:flex;justify-content:space-between;gap:8px;align-items:start}.note-tag{padding:5px 8px;border-radius:20px;background:#edf0ff;color:#4a59ba;font-size:9px;font-weight:700}.note-tag.general{background:#eef0f4;color:#677188}.note-tag.journal{background:#e8f5e9;color:#3f7854}.note-card time{color:#8992a5;font-size:10px;white-space:nowrap}.note-card h2{margin:17px 0 8px;font:700 18px Outfit,sans-serif}.note-card p,.note-card li{color:#657088;font-size:12px;line-height:1.55}.note-card p{margin:0}.note-card ul{padding-left:16px;margin:0}.note-actions{margin-top:auto;padding-top:15px;display:flex;gap:6px}.note-actions button{border:0;background:transparent;color:#737e94;padding:6px;border-radius:7px}.note-actions button:hover{background:#eef0f7;color:#2b3a8e}.note-actions .delete:hover{background:#ffeceb;color:#be554a}.note-actions i{width:17px;height:17px}.note-empty{grid-column:1/-1;text-align:center;padding:45px;color:#7a8498}
.settings-layout{grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr)}.settings-layout .section-card:first-child .section-title{margin-bottom:44px}.profile-card{display:flex;gap:24px;align-items:start}.profile-avatar-wrap{flex:0 0 auto;position:relative}.profile-avatar{width:80px;height:80px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#7180dc,#293783);color:white;font:700 26px Outfit,sans-serif;box-shadow:0 6px 16px rgba(41,55,131,.15)}.avatar-upload{position:absolute;right:-4px;bottom:-4px;width:28px;height:28px;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:white;cursor:pointer;box-shadow:0 2px 6px rgba(17,27,120,.2)}.avatar-upload:hover{background:#25349d}.avatar-upload i{width:13px;height:13px}.profile-fields{flex:1;min-width:0}.save-profile{margin-top:18px}.settings-stack{display:grid;gap:24px}.setting-row{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:14px 0;border-bottom:1px solid #edf0f5}.setting-row:last-child{border-bottom:0;padding-bottom:0}.setting-row strong,.setting-row span{display:block}.setting-row strong{font-size:13px}.setting-row span{margin-top:4px;color:#7d879b;font-size:11px}.toggle-input{appearance:none;width:43px;height:24px;border-radius:20px;background:#cfd4e1;position:relative;cursor:pointer;transition:.2s;flex:0 0 auto}.toggle-input::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}.toggle-input:checked{background:#5362c4}.toggle-input:checked::after{transform:translateX(19px)}.font-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:5px;border-radius:10px;background:#f2f4fa}.font-buttons button{border:0;border-radius:7px;padding:9px 4px;color:#677188;background:transparent;font-size:10px;font-weight:700}.font-buttons button.active{background:#fff;color:var(--navy);box-shadow:0 2px 6px rgba(27,42,105,.1)}.high-contrast{background:#fff!important;color:#000!important}.high-contrast .card{border:2px solid #000!important;box-shadow:none}.high-contrast .nav-link.active,.high-contrast .page-button{background:#000!important;color:#fff!important}.font-large{font-size:18px}.font-extra-large{font-size:21px}
@media(max-width:1150px){.notes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-layout,.appointments-layout,.meds-layout{grid-template-columns:1fr}.med-side{grid-template-columns:1fr 1fr}.subpage-header h1{font-size:34px}}
@media(max-width:800px){.subpage .content{padding-top:30px}.subpage-header{align-items:start}.subpage-header h1{font-size:29px}.subpage-header p{font-size:13px}.subpage-header .page-button span{display:none}.subpage-header .page-button{width:43px;height:43px;padding:0}.notes-toolbar{align-items:stretch;flex-direction:column}.notes-grid{grid-template-columns:1fr}.week-card{display:block}.week-days{margin-top:23px}.med-side{grid-template-columns:1fr}.profile-card{flex-direction:column;align-items:center}.profile-fields{width:100%}.page-dialog form{padding:24px}.section-card{padding:20px}.next-appointment{margin:0 -20px;padding:20px;border-radius:15px}.schedule-med{padding:12px;gap:10px}.appointment-row{padding:11px;gap:10px}.reminder-toggle{right:16px;bottom:16px;width:28px;height:28px}}
@media(max-width:600px){.section-card{padding:16px}.next-appointment{margin:0 -16px;padding:16px;border-radius:12px}.next-appointment-header{gap:10px;margin-bottom:12px}.provider-avatar{width:36px;height:36px;font-size:12px}.provider-info h2{font-size:18px}.provider-info p{font-size:11px}.next-appointment .appointment-meta{gap:10px;font-size:11px}.reminder-toggle{right:12px;bottom:12px;width:24px;height:24px}.reminder-toggle i{width:13px;height:13px}.schedule-med{grid-template-columns:36px 1fr auto;padding:10px;gap:8px;border-radius:10px}.schedule-med .medicine-icon{width:34px;height:34px}.schedule-name strong{font-size:12px}.schedule-name small{font-size:10px}.schedule-time{font-size:10px}.check-pill{width:34px;height:34px}.appointment-row{grid-template-columns:44px 1fr;padding:10px;gap:8px;border-radius:10px}.appointment-row .switch{margin-left:0}.date-block{padding:4px;font-size:8px}.date-block b{font-size:16px}.appointment-info strong{font-size:13px}.appointment-info span{font-size:10px}.appointment-actions{gap:4px}.appointment-actions .switch{width:34px;height:20px;padding:2px}.appointment-actions .switch span{width:14px;height:14px}.appointment-actions .switch.enabled span{transform:translateX(14px)}.appointment-edit,.appointment-delete{width:28px;height:28px}.calendar-head{padding:6px 8px;gap:6px;margin-bottom:12px}.calendar-head span{font-size:14px}.calendar-head button{width:26px;height:26px}.month-grid{gap:4px}.month-grid .day{height:26px;font-size:11px;border-radius:6px}.month-grid .wk{font-size:8px;padding:4px 0 2px}.month-grid .marked::after{width:3px;height:3px;bottom:4px}.side-stat{padding:14px}.side-stat strong{font-size:34px}.side-stat p{font-size:11px}.adherence{height:6px;margin:12px 0}.week-card{gap:14px;padding:18px}.week-card h2{font-size:20px}.week-card p{font-size:12px}.week-days{gap:5px;margin-top:16px}.week-days span{width:34px;height:34px;font-size:8px;border-radius:12px}.week-days b{font-size:10px;margin-top:2px}.med-side{gap:14px}.mini-list .medicine-side-item{padding:8px;gap:6px}.mini-list .medicine-side-info strong{font-size:12px}.mini-list .medicine-side-info span{font-size:10px}.medicine-side-actions button{width:26px;height:26px}.card{padding:18px;border-radius:14px}.appointment-card{padding:26px}.note-card{padding:16px;min-height:160px}.note-card h2{font-size:16px}.note-card p{font-size:11px}.note-actions{gap:4px}.note-actions button{padding:4px}.note-empty{padding:30px 20px}.wellbeing-card .stat-number{font-size:28px}.water-track{gap:4px}.eyebrow{font-size:9px}.subpage-header{margin-bottom:20px}.subpage-header h1{font-size:25px}.subpage-header p{font-size:12px}.dialog-actions button{font-size:12px}.field{height:42px;font-size:12px}.field-area{height:76px}.page-dialog form{padding:20px}.page-dialog h2{font-size:20px;margin-bottom:16px}.field-grid{gap:12px}}

/* Appointment page – mobile refinements */
@media (max-width:600px){
  .next-appointment .appointment-meta{grid-template-columns:1fr;gap:8px}
  .appointment-row{grid-template-columns:44px 1fr}
  .appointment-actions{grid-column:1/-1;justify-content:flex-end;padding-top:9px;border-top:1px solid #f0f2f8}
}
@media (max-width:420px){
  .provider-avatar{width:34px;height:34px;font-size:12px}
  .provider-info h2{font-size:16px}
  .calendar-head span{font-size:12px}
}

/* Next-appointment entrance + touch float */
.next-appointment .deco-three{width:130px;height:130px;right:110px;bottom:-45px;border:18px solid rgba(255,255,255,.12)}
@keyframes nextReveal{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.next-appointment.reveal{animation:nextReveal .6s ease-out}
@media (pointer:coarse){
  .next-appointment .deco{animation:decoDrift 8s ease-in-out infinite alternate}
  .next-appointment .deco-two{animation-duration:11s;animation-direction:alternate-reverse}
  .next-appointment .deco-three{animation-duration:14s}
}
@keyframes decoDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(10px,-10px,0)}}
@media (prefers-reduced-motion:reduce){.next-appointment.reveal{animation:none}.next-appointment .deco{animation:none}}

/* Next-appointment hero sinks beneath its card and is clipped at the rounded bottom */
.next-zone{overflow:hidden;border-radius:18px;margin-bottom:14px}
.next-zone .section-title{margin-bottom:10px}
.next-zone .next-appointment{padding-bottom:58px;margin:0 -40px -58px}
@media (max-width:800px){.next-zone .next-appointment{margin:0 -20px -58px;padding-bottom:56px}}
@media (max-width:600px){.next-zone{border-radius:15px}.next-zone .next-appointment{margin:0 -16px -58px;padding-bottom:52px}}