* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif; }
:root {
  --bg:#F2F2F7; --bg2:#FFFFFF; --fill:rgba(120,120,128,.12); --fill2:rgba(120,120,128,.2);
  --label:#000; --label2:rgba(60,60,67,.6); --label3:rgba(60,60,67,.3);
  --sep:rgba(60,60,67,.12); --teal:#2A9D8F; --teal-bg:rgba(42,157,143,.12);
  --blue:#007AFF; --red:#FF3B30; --red-bg:rgba(255,59,48,.12);
  --orange:#FF9500; --orange-bg:rgba(255,149,0,.12);
  --green:#34C759; --green-bg:rgba(52,199,89,.12);
  --r:12px;
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#000; --bg2:#1C1C1E; --fill:rgba(120,120,128,.24); --fill2:rgba(120,120,128,.36);
    --label:#FFF; --label2:rgba(235,235,245,.6); --label3:rgba(235,235,245,.18);
    --sep:rgba(84,84,88,.65); --teal:#40C9BB; --teal-bg:rgba(64,201,187,.15);
    --blue:#0A84FF; --red:#FF453A; --red-bg:rgba(255,69,58,.15);
    --orange:#FF9F0A; --orange-bg:rgba(255,159,10,.15);
    --green:#30D158; --green-bg:rgba(48,209,88,.15);
  }
}
html,body{height:100%;background:var(--bg);}
body{color:var(--label);min-height:100vh;padding-bottom:84px;font-size:17px;-webkit-font-smoothing:antialiased;}

/* LOADING */
#loadingOverlay{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999;gap:16px;transition:opacity .3s;}
#loadingOverlay.fade{opacity:0;pointer-events:none;}
.loading-spinner{width:36px;height:36px;border:3px solid var(--fill2);border-top-color:var(--teal);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-label{font-size:15px;color:var(--label2);}
.sync-dot{position:fixed;top:env(safe-area-inset-top,48px);right:16px;width:8px;height:8px;border-radius:50%;background:var(--teal);opacity:0;transition:opacity .3s;z-index:200;}
.sync-dot.active{opacity:1;animation:pulse 1s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* HEADER */
.header{background:var(--bg2);padding:env(safe-area-inset-top,48px) 16px 12px;position:sticky;top:0;z-index:100;border-bottom:.5px solid var(--sep);}
.header-row{display:flex;justify-content:space-between;align-items:center;padding-top:8px;}
.header-title{font-size:28px;font-weight:700;letter-spacing:-.5px;}
.header-date{font-size:13px;color:var(--label2);margin-top:2px;}
.pain-ring{width:52px;height:52px;border-radius:50%;background:var(--teal-bg);border:2px solid var(--teal);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:opacity .15s;border:none;}
.pain-ring:active{opacity:.7;}
.pr-num{font-size:18px;font-weight:700;color:var(--teal);line-height:1;letter-spacing:-.5px;}
.pr-lbl{font-size:8px;font-weight:600;color:var(--teal);text-transform:uppercase;letter-spacing:.06em;margin-top:1px;}
.pain-ring{background:var(--teal-bg);border:2px solid var(--teal);}
.pain-ring.lvl-mid{background:var(--orange-bg);border-color:var(--orange);}
.pain-ring.lvl-mid .pr-num,.pain-ring.lvl-mid .pr-lbl{color:var(--orange);}
.pain-ring.lvl-high{background:var(--red-bg);border-color:var(--red);}
.pain-ring.lvl-high .pr-num,.pain-ring.lvl-high .pr-lbl{color:var(--red);}

/* TAB BAR */
.tabbar{position:fixed;bottom:0;left:0;right:0;background:var(--bg2);border-top:.5px solid var(--sep);display:flex;padding:8px 0 env(safe-area-inset-bottom,12px);z-index:100;}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;cursor:pointer;padding:4px 2px;transition:opacity .1s;}
.tab:active{opacity:.6;}
.tab-icon{font-size:24px;line-height:1;}
.tab-label{font-size:10px;font-weight:500;color:var(--label3);letter-spacing:.02em;}
.tab.active .tab-label{color:var(--teal);}

/* SECTIONS */
.section{display:none;}.section.active{display:block;}
.page{padding:20px 16px;}

/* GROUPS */
.group{margin-bottom:32px;}
.group-label{font-size:13px;font-weight:400;color:var(--label2);text-transform:uppercase;letter-spacing:.06em;padding:0 16px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;}
.group-label-action{font-size:15px;font-weight:600;color:var(--teal);cursor:pointer;background:none;border:none;text-transform:none;letter-spacing:normal;}
.list{background:var(--bg2);border-radius:var(--r);overflow:hidden;}
.list-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:.5px solid var(--sep);min-height:48px;}
.list-row:last-child{border-bottom:none;}
.list-row:active{background:var(--fill);}
.row-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.row-icon.teal{background:var(--teal-bg);}
.row-icon.green{background:var(--green-bg);}
.row-icon.orange{background:var(--orange-bg);}
.row-body{flex:1;min-width:0;}
.row-title{font-size:17px;font-weight:400;color:var(--label);}
.row-sub{font-size:13px;color:var(--label2);margin-top:1px;}
.row-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.row-val{font-size:15px;color:var(--label2);}
.row-check{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--label3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;flex-shrink:0;font-size:11px;background:transparent;}
.row-check.sq{border-radius:6px;}
.row-check.done{background:var(--teal);border-color:var(--teal);color:white;}

/* TILES */
.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:32px;}
.tile{background:var(--bg2);border-radius:var(--r);padding:16px;min-height:96px;display:flex;flex-direction:column;justify-content:space-between;}
.tile-top{display:flex;justify-content:space-between;align-items:flex-start;}
.tile-icon{font-size:20px;}
.tile-badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px;letter-spacing:.02em;}
.badge-green{background:var(--green-bg);color:var(--green);}
.badge-orange{background:var(--orange-bg);color:var(--orange);}
.badge-red{background:var(--red-bg);color:var(--red);}
.badge-neutral{background:var(--fill);color:var(--label2);}
.tile-val{font-size:34px;font-weight:300;letter-spacing:-1px;line-height:1;margin-top:8px;}
.tile-lbl{font-size:13px;color:var(--label2);margin-top:4px;}

/* PAIN GRID */
.pain-wrap{background:var(--bg2);border-radius:var(--r);padding:16px;margin-bottom:8px;}
.pain-num-row{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;}
.pnum{aspect-ratio:1;border-radius:50%;border:none;background:var(--fill);font-size:19px;font-weight:600;color:var(--label2);cursor:pointer;transition:transform .1s, background .15s;display:flex;align-items:center;justify-content:center;}
.pnum:active{transform:scale(.92);opacity:.8;}
.pnum.sel{color:white;transform:scale(1.08);box-shadow:0 2px 8px rgba(0,0,0,.12);}
.pnum.sel-low{background:var(--green);}
.pnum.sel-mid{background:var(--orange);}
.pnum.sel-high{background:var(--red);}
.pain-desc{text-align:center;font-size:15px;font-weight:500;color:var(--teal);margin-top:10px;min-height:20px;}

/* CHIPS */
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 16px;}
.chip{padding:8px 14px;border-radius:16px;background:var(--fill);color:var(--label);font-size:15px;font-weight:400;cursor:pointer;transition:transform .1s, background .15s;border:none;min-height:36px;}
.chip.on{background:var(--teal);color:white;}
.chip:active{transform:scale(.94);opacity:.85;}

/* SLEEP */
.sleep-row{display:flex;gap:10px;padding:12px 16px 16px;}
.sleep-tile{flex:1;background:var(--fill);border-radius:10px;padding:14px 8px;text-align:center;cursor:pointer;border:1.5px solid transparent;transition:all .15s;}
.sleep-tile .si{font-size:26px;display:block;margin-bottom:5px;}
.sleep-tile .sl{font-size:10px;font-weight:600;color:var(--label2);text-transform:uppercase;letter-spacing:.05em;}
.sleep-tile.on-good{background:var(--green-bg);border-color:var(--green);}
.sleep-tile.on-ok{background:var(--orange-bg);border-color:var(--orange);}
.sleep-tile.on-bad{background:var(--red-bg);border-color:var(--red);}

/* TEXTAREA */
.textarea-wrap{padding:8px 16px 16px;}
.tarea{width:100%;border:none;border-radius:10px;padding:12px;font-size:15px;color:var(--label);resize:none;background:var(--fill);outline:none;height:70px;font-family:-apple-system,sans-serif;}
.tarea:focus{background:var(--fill2);}
.tarea::placeholder{color:var(--label3);}

/* BUTTONS */
.btn-primary{display:block;width:calc(100% - 32px);margin:0 16px 12px;padding:14px;background:var(--teal);color:white;border:none;border-radius:14px;font-size:17px;font-weight:600;cursor:pointer;transition:opacity .15s;}
.btn-primary:active{opacity:.8;}
.btn-secondary{display:block;width:calc(100% - 32px);margin:0 16px 16px;padding:14px;background:var(--fill);color:var(--teal);border:none;border-radius:14px;font-size:17px;font-weight:600;cursor:pointer;transition:opacity .15s;}
.btn-secondary:active{opacity:.7;}

/* SECTION HEADS */
.section-head{padding:8px 0 20px;}
.section-head h2{font-size:34px;font-weight:700;letter-spacing:-.5px;}
.inline-title{font-size:22px;font-weight:700;letter-spacing:-.3px;padding:24px 16px 12px;}

/* TONIGHT */
.tonight{background:linear-gradient(145deg,var(--teal) 0%,#1A7A6E 100%);border-radius:var(--r);padding:16px;margin-bottom:32px;}
.tonight h3{font-size:13px;font-weight:700;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;}
.tn-row{display:flex;gap:10px;margin-bottom:8px;}
.tn-row:last-child{margin-bottom:0;}
.tn-time{font-size:11px;font-weight:600;color:rgba(255,255,255,.5);width:52px;flex-shrink:0;padding-top:2px;text-transform:uppercase;}
.tn-text{font-size:15px;color:rgba(255,255,255,.9);line-height:1.4;}

/* REMINDER */
.reminder{background:var(--orange-bg);border-radius:var(--r);padding:14px 16px;margin-bottom:20px;display:flex;align-items:center;gap:12px;border:.5px solid rgba(255,149,0,.3);}
.reminder-body{flex:1;}
.reminder-title{font-size:15px;font-weight:600;color:var(--orange);}
.reminder-sub{font-size:13px;color:var(--label2);margin-top:2px;}
.reminder-x{background:none;border:none;font-size:18px;cursor:pointer;color:var(--label3);}

/* PROGRESS */
.prog-row{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:.5px solid var(--sep);}
.prog-row:last-child{border-bottom:none;}
.prog-label{font-size:15px;color:var(--label);width:90px;flex-shrink:0;}
.prog-track{flex:1;height:4px;background:var(--fill2);border-radius:2px;overflow:hidden;}
.prog-fill{height:100%;border-radius:2px;background:var(--teal);transition:width .5s;}
.prog-pct{font-size:15px;font-weight:500;color:var(--teal);width:36px;text-align:right;flex-shrink:0;}

/* WEEK CHART */
.week-chart{display:flex;align-items:flex-end;gap:4px;height:48px;padding:0 2px;}
.wday{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;}
.wbar{width:100%;border-radius:3px 3px 2px 2px;min-height:3px;transition:height .4s;}

/* SET DOTS */
.set-dots{display:flex;gap:5px;margin-top:6px;}
.sdot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--label3);background:transparent;cursor:pointer;transition:all .12s;}
.sdot.on{background:var(--teal);border-color:var(--teal);}

/* TOGGLE */
.toggle{width:51px;height:31px;border-radius:16px;background:var(--label3);border:none;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0;}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:white;transition:transform .2s;box-shadow:0 2px 6px rgba(0,0,0,.25);}
.toggle.on{background:var(--teal);}
.toggle.on::after{transform:translateX(20px);}

/* REP TOGGLE ROW */
.rep-row{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:.5px solid var(--sep);}
.rep-row:last-child{border-bottom:none;}
.rep-lbl{font-size:17px;color:var(--label);}

/* SETTINGS */
.set-row{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:.5px solid var(--sep);}
.set-row:last-child{border-bottom:none;}
.set-name{font-size:17px;color:var(--label);}
.set-sub{font-size:13px;color:var(--label2);margin-top:1px;}
.set-rm{background:none;border:none;font-size:15px;font-weight:500;color:var(--red);cursor:pointer;}

/* ADD FORM */
.add-form{padding:0 16px 8px;}
.add-input{width:100%;border:none;border-radius:10px;padding:13px;font-size:17px;color:var(--label);background:var(--fill);outline:none;margin-bottom:8px;font-family:-apple-system,sans-serif;}
.add-input:focus{background:var(--fill2);}
.add-input::placeholder{color:var(--label3);}
.add-select{width:100%;border:none;border-radius:10px;padding:13px;font-size:17px;color:var(--label);background:var(--fill);outline:none;margin-bottom:8px;-webkit-appearance:none;font-family:-apple-system,sans-serif;}

/* FLARE */
.flare-item{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:.5px solid var(--sep);}
.flare-item:last-child{border-bottom:none;}
.flare-dot{width:10px;height:10px;border-radius:50%;background:var(--red);flex-shrink:0;margin-top:5px;}
.flare-body{flex:1;}
.flare-time{font-size:13px;color:var(--label2);}
.flare-pain{font-size:17px;font-weight:600;color:var(--red);}
.flare-tags{font-size:13px;color:var(--label2);margin-top:2px;}

/* HIST */
.hist-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:.5px solid var(--sep);}
.hist-item:last-child{border-bottom:none;}
.hist-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.hist-body{flex:1;}
.hist-time{font-size:13px;color:var(--label2);}
.hist-main{font-size:15px;color:var(--label);margin-top:1px;}
.hist-note{font-size:13px;color:var(--label2);margin-top:1px;}
.hist-val{font-size:22px;font-weight:300;letter-spacing:-.5px;}

/* TREND */
.trend-wrap{height:60px;padding:8px 16px;}
.trend-svg{width:100%;height:100%;}

/* APPT */
.appt-item{padding:13px 16px;border-bottom:.5px solid var(--sep);}
.appt-item:last-child{border-bottom:none;}
.appt-date{font-size:13px;color:var(--teal);font-weight:600;}
.appt-name{font-size:17px;color:var(--label);margin-top:1px;}
.appt-sub{font-size:13px;color:var(--label2);margin-top:2px;}

/* INFO / WARN */
.info-box{background:var(--teal-bg);border-radius:var(--r);padding:14px 16px;font-size:15px;color:var(--teal);line-height:1.6;margin-bottom:20px;}
.warn-box{background:var(--red-bg);border-radius:var(--r);padding:14px 16px;font-size:15px;color:var(--red);line-height:1.6;margin-bottom:20px;}

/* CALENDAR */
.cal-header{display:flex;justify-content:space-between;align-items:center;padding:16px;}
.cal-month{font-size:17px;font-weight:600;color:var(--label);}
.cal-nav{background:none;border:none;font-size:20px;color:var(--teal);cursor:pointer;padding:4px 10px;}
.cal-grid{padding:0 12px 16px;}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:6px;}
.cal-dow span{text-align:center;font-size:12px;font-weight:600;color:var(--label3);padding:4px 0;}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-day{aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;font-size:15px;font-weight:400;color:var(--label);transition:all .12s;border:none;background:transparent;}
.cal-day:active{opacity:.7;}
.cal-day.empty{pointer-events:none;}
.cal-day.today{font-weight:700;color:var(--teal);}
.cal-day.selected{background:var(--teal);color:white;font-weight:600;}
.cal-day.selected.today{color:white;}
.cal-day.has-data::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--teal);}
.cal-day.selected.has-data::after{background:rgba(255,255,255,.7);}
.cal-day.has-high::after{background:var(--red);}
.cal-day.has-mid::after{background:var(--orange);}
.cal-day.future{color:var(--label3);pointer-events:none;}

/* SELECTED DAY VIEW */
.day-view{background:var(--bg2);border-radius:var(--r);margin-bottom:32px;overflow:hidden;}
.day-view-header{padding:16px;border-bottom:.5px solid var(--sep);display:flex;justify-content:space-between;align-items:center;}
.day-view-date{font-size:17px;font-weight:600;color:var(--label);}
.day-view-badge{font-size:13px;font-weight:500;padding:4px 10px;border-radius:20px;}
.day-section{border-bottom:.5px solid var(--sep);}
.day-section:last-child{border-bottom:none;}
.day-section-title{font-size:13px;font-weight:600;color:var(--label2);text-transform:uppercase;letter-spacing:.06em;padding:12px 16px 6px;}
.day-entry{padding:8px 16px 12px;border-bottom:.5px solid var(--sep);}
.day-entry:last-child{border-bottom:none;}
.day-entry-time{font-size:12px;color:var(--label3);}
.day-entry-main{font-size:15px;color:var(--label);margin-top:2px;}
.day-entry-sub{font-size:13px;color:var(--label2);margin-top:2px;}
.day-empty{padding:16px;font-size:15px;color:var(--label2);}

/* MODAL */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;align-items:flex-end;}
.overlay.open{display:flex;}
.modal{background:var(--bg2);border-radius:20px 20px 0 0;padding:24px 0 env(safe-area-inset-bottom,20px);width:100%;max-height:88vh;overflow-y:auto;}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:0 16px 20px;}
.modal-title{font-size:20px;font-weight:700;letter-spacing:-.3px;}
.modal-close{background:var(--fill);border:none;border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:14px;color:var(--label2);display:flex;align-items:center;justify-content:center;}

/* LAST-LOG HINT */
.last-log{font-size:13px;color:var(--label2);text-align:center;padding:0 16px 10px;min-height:18px;}
.last-log.fresh{color:var(--teal);font-weight:500;}

/* FLOATING UNDO BAR — sits above the tab bar on any screen */
.undo-float{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,12px));transform:translateX(-50%) translateY(6px);background:rgba(50,50,52,.95);backdrop-filter:blur(10px);color:#fff;border-radius:var(--r);padding:10px 8px 10px 16px;display:flex;gap:10px;align-items:center;box-shadow:0 4px 16px rgba(0,0,0,.22);z-index:250;opacity:0;pointer-events:none;transition:opacity .22s, transform .22s;max-width:calc(100vw - 32px);}
.undo-float.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.undo-float-text{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw;}
.undo-float-btn{background:rgba(255,255,255,.14);border:none;color:#fff;font-size:14px;font-weight:600;cursor:pointer;padding:6px 12px;border-radius:999px;}
.undo-float-btn:active{opacity:.7;}

/* QUICK LOG (dashboard) */
.quick-log{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px;}
.ql-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 6px;background:var(--bg2);border-radius:14px;border:none;cursor:pointer;transition:transform .1s, opacity .15s;min-height:78px;}
.ql-btn:active{transform:scale(.96);}
.ql-btn:disabled{opacity:.4;pointer-events:none;}
.ql-btn.alert{background:var(--red-bg);}
.ql-btn.alert .ql-lbl{color:var(--red);font-weight:600;}
.ql-btn.alert .ql-icon{animation:qlPulse 1.6s ease-in-out infinite;}
@keyframes qlPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
.ql-icon{font-size:26px;line-height:1;}
.ql-lbl{font-size:13px;font-weight:500;color:var(--label);text-align:center;line-height:1.2;}

/* SEGMENTED CONTROL (Care tab) */
.seg{display:flex;background:var(--fill);border-radius:10px;padding:3px;margin:0 0 24px;gap:2px;}
.seg-btn{flex:1;padding:9px 4px;background:none;border:none;border-radius:8px;font-size:13px;font-weight:500;color:var(--label2);cursor:pointer;transition:background .15s, color .15s;}
.seg-btn.active{background:var(--bg2);color:var(--label);box-shadow:0 1px 3px rgba(0,0,0,.08);font-weight:600;}
.seg-btn:active{opacity:.7;}
.care-pane{display:none;}
.care-pane.active{display:block;}

/* TODAY LOGS INLINE */
.today-log-row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:.5px solid var(--sep);}
.today-log-row:last-child{border-bottom:none;}
.today-log-time{font-size:13px;color:var(--label2);}
.today-log-pain{font-size:17px;font-weight:500;}
.today-log-tags{font-size:13px;color:var(--label2);margin-top:2px;}

/* TOAST */
.toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%) translateY(10px);background:rgba(50,50,52,.92);backdrop-filter:blur(10px);color:white;padding:10px 20px;border-radius:20px;font-size:15px;font-weight:500;opacity:0;transition:all .25s;z-index:300;white-space:nowrap;pointer-events:none;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}