/* ===========================================================================
   Abdullah Health Dashboard
   styles.css — blue "command-center" theme. Mobile-first. No external fonts.
   =========================================================================== */
:root{
  --bg:#06080F; --bg2:#0A0E1A;
  --panel:rgba(20,27,46,0.55); --panel-solid:#121A2E;
  --line:rgba(120,150,210,0.14); --line-2:rgba(120,150,210,0.22);
  --blue:#4D9DFF; --blue-2:#2F7BE6; --cyan:#6FE0E8;
  --green:#5FE3C0; --green-2:#37C9A4;
  --flag:#E8978B; --flag-bg:rgba(224,133,122,0.12);
  --text:#EAF0FA; --muted:#8E9AB4; --faint2:#646F89;
  --glow-blue:rgba(77,157,255,0.45); --glow-green:rgba(95,227,192,0.40);
  --radius:22px; --radius-sm:15px;
  --tab-h:74px;
  --maxw:520px;
  --mono:"SF Mono",ui-monospace,"Roboto Mono",Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text); font-family:var(--sans);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; min-height:100vh;
}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; letter-spacing:.2px}

/* ---- futuristic background: aura + grid ---- */
.bg{position:fixed; inset:0; z-index:-2; background:
  radial-gradient(900px 600px at 78% -8%, rgba(77,157,255,0.20), transparent 60%),
  radial-gradient(760px 560px at -10% 18%, rgba(95,227,192,0.10), transparent 60%),
  radial-gradient(900px 700px at 50% 115%, rgba(47,123,230,0.14), transparent 60%),
  linear-gradient(180deg,#070A14,#05070E);}
.bg::before{content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(120,150,210,0.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,150,210,0.05) 1px,transparent 1px);
  background-size:42px 42px; mask-image:radial-gradient(circle at 50% 26%,#000,transparent 78%);
  animation:drift 26s linear infinite;}
@keyframes drift{from{background-position:0 0,0 0}to{background-position:42px 42px,42px 42px}}

/* ---- icons: explicit sizes so none can render oversized ---- */
.ic{width:20px; height:20px; flex:0 0 auto; display:inline-block; vertical-align:middle}
.ic.sm{width:16px; height:16px}
.ic.caret{width:16px; height:16px; color:var(--faint2); transition:transform .25s ease}

/* ---- layout ---- */
main{max-width:var(--maxw); margin:0 auto; padding:0 16px;
  padding-top:calc(env(safe-area-inset-top) + 8px);
  padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 28px);}
.view[hidden]{display:none}

/* ---- floating gear ---- */
#gearBtn{position:fixed; z-index:30; top:calc(env(safe-area-inset-top) + 14px); right:16px;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2);
  background:rgba(16,22,38,0.7); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:var(--text); display:grid; place-items:center; cursor:pointer; transition:.2s;}
#gearBtn:hover{border-color:var(--blue); color:var(--blue); box-shadow:0 0 18px var(--glow-blue)}
#gearBtn .ic{width:19px;height:19px}

/* ---- hero greeting ---- */
.hero{padding:22px 4px 6px}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:2.5px; color:var(--muted); text-transform:uppercase}
.eyebrow.date{margin-top:3px; letter-spacing:1.4px; color:var(--faint2); font-weight:600}
.greet{margin:14px 0 4px; font-size:58px; line-height:0.92; font-weight:800; letter-spacing:-2px; color:#F4F8FF}
.greet span{background:linear-gradient(110deg,var(--cyan),var(--blue) 55%,var(--blue-2));
  -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 22px var(--glow-blue))}

/* ---- cards ---- */
.card{position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px; margin:16px 0;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 40px -28px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.04);
  animation:rise .5s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(var(--i,0)*55ms);}
.card::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg,rgba(111,224,232,0.30),transparent 38%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.7}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.glowcard{border-color:rgba(77,157,255,0.35); box-shadow:0 0 36px -16px var(--glow-blue),0 18px 40px -28px #000}

/* card header */
.ch{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.ch h3{margin:0; font-size:16.5px; font-weight:700; letter-spacing:-.2px}
.ch .sub{font-size:12.5px; color:var(--muted); margin-top:2px}
.ch>div:nth-child(2){flex:1; min-width:0}
.cic{flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  color:var(--blue); background:rgba(77,157,255,0.12); border:1px solid rgba(77,157,255,0.28);
  box-shadow:inset 0 0 14px rgba(77,157,255,0.12)}
.cic.green{color:var(--green); background:rgba(95,227,192,0.12); border-color:rgba(95,227,192,0.3); box-shadow:inset 0 0 14px rgba(95,227,192,0.12)}
.cic .ic{width:21px;height:21px}

/* chips & buttons */
.chip{display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:999px;
  background:rgba(120,150,210,0.10); border:1px solid var(--line-2); color:var(--text);
  font-size:13px; font-weight:600; cursor:pointer; transition:.18s; white-space:nowrap}
.chip:hover{border-color:var(--blue); color:var(--blue)}
.chip.sm{padding:6px 11px; font-size:12.5px}
.chip.wide{width:100%; justify-content:center; margin-top:14px; padding:12px}
.chip.green:hover{border-color:var(--green); color:var(--green)}
.chip .ic{width:15px;height:15px}
.btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px;
  border-radius:14px; border:1px solid var(--line-2); background:rgba(120,150,210,0.08);
  color:var(--text); font-size:15px; font-weight:700; cursor:pointer; transition:.18s; font-family:inherit}
.btn:hover{border-color:var(--blue)}
.btn.primary{background:linear-gradient(120deg,var(--blue),var(--blue-2)); border:none; color:#04101F;
  box-shadow:0 10px 26px -10px var(--glow-blue)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.danger{color:var(--flag); border-color:rgba(224,133,122,0.4)}
.btn.danger:hover{background:var(--flag-bg)}
.btnrow{display:flex; gap:10px} .btnrow .btn{margin:0}
.iconbtn{flex:0 0 auto; width:34px; height:34px; border-radius:10px; border:1px solid var(--line);
  background:transparent; color:var(--muted); display:grid; place-items:center; cursor:pointer; transition:.15s}
.iconbtn:hover{color:var(--flag); border-color:rgba(224,133,122,0.4)}

/* rings */
.ring-wrap{display:flex; align-items:center; gap:18px; padding:6px 2px 2px}
.ring{width:118px; height:118px; flex:0 0 auto}
.ring .track{fill:none; stroke:rgba(120,150,210,0.13)}
.ring .prog{fill:none; stroke-linecap:round; transition:stroke-dashoffset 1s cubic-bezier(.3,.8,.3,1);
  filter:drop-shadow(0 0 6px var(--glow-blue))}
.ring-main{font-size:25px; font-weight:800; fill:var(--text); font-family:var(--sans)}
.ring-sub{font-size:10.5px; font-weight:600; fill:var(--muted); letter-spacing:.6px; text-transform:uppercase}
.ring-info{flex:1; min-width:0}
.metric{font-size:30px; font-weight:800; letter-spacing:-1px}
.metric small{font-size:14px; font-weight:600; color:var(--muted); margin-left:4px}
.delta{display:inline-block; margin-top:5px; font-size:12.5px; font-weight:700; padding:3px 9px; border-radius:999px}
.delta.good{color:var(--green); background:rgba(95,227,192,0.12)}
.delta.warn{color:var(--flag); background:var(--flag-bg)}
.delta.flat{color:var(--muted); background:rgba(120,150,210,0.08)}
.spark{width:100%; height:54px; margin-top:10px; display:block}
.spark .line{fill:none; stroke:var(--blue); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 4px var(--glow-blue))}
.spark .dot{fill:var(--cyan)}

/* bars / dividers */
.divider{height:1px; background:var(--line); margin:16px 0}
.bar-row{display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); margin-bottom:8px; font-weight:600}
.bar{height:8px; border-radius:999px; background:rgba(120,150,210,0.12); overflow:hidden}
.bar span{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--cyan),var(--blue));
  box-shadow:0 0 12px var(--glow-blue); transition:width 1s cubic-bezier(.3,.8,.3,1)}

/* pills */
.pill{flex:0 0 auto; font-size:11px; font-weight:800; letter-spacing:.6px; padding:5px 11px; border-radius:999px; text-transform:uppercase}
.pill.plan{color:var(--blue); background:rgba(77,157,255,0.12); border:1px solid rgba(77,157,255,0.28)}
.pill.free{color:var(--green); background:rgba(95,227,192,0.12); border:1px solid rgba(95,227,192,0.28)}

/* rows */
.row{display:flex; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--line)}
.row:first-of-type, .ch + .row{border-top:none}
.row.tap{cursor:pointer; width:100%; text-align:left; background:none; border-left:none; border-right:none; color:inherit;
  border-bottom:none; font-family:inherit; transition:.15s; border-radius:10px; padding-left:8px; padding-right:8px; margin:0 -8px}
.row.tap:hover{background:rgba(120,150,210,0.06)}
.time{flex:0 0 auto; width:62px; font-size:12.5px; font-weight:700; color:var(--blue)}
.body{flex:1; min-width:0}
.t{font-weight:600; font-size:14.5px; letter-spacing:-.1px}
.t.struck{text-decoration:line-through; color:var(--muted)}
.d{font-size:12.5px; color:var(--muted); margin-top:2px}
.d.wrap{white-space:normal}
.d.small{margin-top:5px}
.d .g{color:var(--green); font-weight:600} .d .b{color:var(--blue); font-weight:600}
.macros{flex:0 0 auto; text-align:right; font-size:11.5px; color:var(--muted); line-height:1.35}
.macros b{display:block; font-size:16px; color:var(--text); font-weight:800}
.macros span{display:block}
.row-actions{flex:0 0 auto; display:flex; flex-direction:column; gap:6px; align-items:flex-end}
.callist .row:first-of-type{border-top:1px solid var(--line)}
.empty{padding:16px 4px; font-size:13.5px; color:var(--muted); text-align:center}

/* checks (walk + strength) */
.check{display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line);
  border-radius:14px; margin-top:10px; background:rgba(120,150,210,0.04); transition:.18s}
.check.done{border-color:rgba(95,227,192,0.4); background:rgba(95,227,192,0.07)}
.check .box{flex:0 0 auto; width:30px; height:30px; border-radius:9px; border:2px solid var(--line-2);
  display:grid; place-items:center; cursor:pointer; color:transparent; transition:.18s}
.check.done .box{background:var(--green); border-color:var(--green); color:#04130F}
.check .box .ic{width:17px;height:17px}
.check .body{cursor:pointer}
.check .vid{flex:0 0 auto; width:34px; height:34px; border-radius:10px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--muted); text-decoration:none; transition:.15s}
.check .vid:hover{color:var(--blue); border-color:var(--blue)}

/* expandable day schedule */
details.day{border-top:1px solid var(--line)}
details.day:first-of-type{border-top:none}
details.day summary{display:flex; align-items:center; gap:10px; padding:13px 4px; cursor:pointer; list-style:none}
details.day summary::-webkit-details-marker{display:none}
.dname{flex:0 0 auto; width:38px; font-weight:800; font-size:13px; color:var(--blue)}
.dname.g{color:var(--green)}
.dsum{flex:1; min-width:0; font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
details.day[open] .caret{transform:rotate(90deg)}
.dbody{padding:4px 4px 14px 50px}
.dmeal{font-size:13px; color:var(--text); padding:5px 0; line-height:1.5}
.dmeal b{font-weight:700}
.dmeal.muted{color:var(--muted)}
.mini{font-size:11.5px; color:var(--faint2)}

/* meal bank */
.bank-h{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; letter-spacing:.4px;
  text-transform:uppercase; color:var(--muted); padding-bottom:6px}
.bank-h .ic{color:var(--blue)}
.count{margin-left:auto; font-size:11px; padding:3px 9px; border-radius:999px; background:rgba(77,157,255,0.12); color:var(--blue); font-weight:800}

/* grocery checklist */
.grocery h4{margin:16px 0 6px; font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--blue)}
.grocery h4:first-child{margin-top:2px}
.gitem{display:flex; align-items:center; gap:11px; padding:9px 4px; cursor:pointer; border-radius:9px; transition:.12s}
.gitem:hover{background:rgba(120,150,210,0.05)}
.gbox{flex:0 0 auto; width:22px; height:22px; border-radius:7px; border:2px solid var(--line-2);
  display:grid; place-items:center; color:transparent; transition:.15s}
.gitem.on .gbox{background:var(--green); border-color:var(--green); color:#04130F}
.gbox .ic{width:14px;height:14px}
.gtext{font-size:14px; transition:.15s}
.gitem.on .gtext{text-decoration:line-through; color:var(--muted)}
.brand{display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.4px; color:var(--cyan);
  background:rgba(111,224,232,0.10); padding:1px 7px; border-radius:6px; margin-right:5px; vertical-align:middle}

/* recipe modal */
.recipe h4{margin:18px 0 8px; font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--blue)}
.macros-strip{display:flex; flex-wrap:wrap; gap:8px}
.mp{font-size:12px; color:var(--muted); padding:6px 11px; border-radius:10px; background:rgba(120,150,210,0.08); border:1px solid var(--line)}
.mp b{color:var(--text); font-size:14px; font-weight:800; margin-right:3px}
.ing{list-style:none; padding:0; margin:0}
.ing li{padding:8px 0; border-bottom:1px solid var(--line); font-size:14px}
.recipe ol{margin:0; padding-left:20px}
.recipe ol li{padding:5px 0; font-size:14px; line-height:1.55}
.dressing{background:rgba(95,227,192,0.08); border:1px solid rgba(95,227,192,0.28); border-radius:13px; padding:12px 14px; font-size:13.5px; line-height:1.55; color:var(--text)}
.safety{margin-top:14px; background:var(--flag-bg); border:1px solid rgba(224,133,122,0.32); border-radius:13px; padding:12px 14px; font-size:13px; line-height:1.55; display:flex; gap:8px}
.safety .ic{color:var(--flag); margin-top:2px}
.why{margin-top:16px; background:rgba(77,157,255,0.08); border-left:3px solid var(--blue); border-radius:0 12px 12px 0; padding:12px 14px; font-size:13.5px; line-height:1.6; color:var(--text)}

/* motivating facts */
.fact{display:flex; gap:12px; padding:13px 0; border-top:1px solid var(--line)}
.fact:first-of-type{border-top:none}
.fbar{flex:0 0 auto; width:4px; border-radius:4px; background:linear-gradient(var(--cyan),var(--blue)); box-shadow:0 0 10px var(--glow-blue)}
.ftext{font-size:14px; line-height:1.55; color:var(--text)}
.fsrc{font-size:11.5px; color:var(--faint2); margin-top:5px; font-style:italic}

/* stats grid */
.stats{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.stat{background:rgba(120,150,210,0.05); border:1px solid var(--line); border-radius:14px; padding:13px}
.stat .lab{font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--muted)}
.stat .val{font-size:25px; font-weight:800; margin:5px 0 2px; letter-spacing:-.5px}
.stat .val small{font-size:13px; color:var(--muted); font-weight:600}
.stat .meta{font-size:11.5px; color:var(--faint2)}

/* lists */
.list{margin:0; padding-left:20px}
.list li{padding:5px 0; font-size:14px; line-height:1.55}
.flaglist{margin:0; padding-left:20px}
.flaglist li{padding:6px 0; font-size:13.5px; line-height:1.5; color:#F0CFC9}
.flaglist li::marker{color:var(--flag)}

/* medical reminders */
.med{display:flex; gap:13px; padding:13px 0; border-top:1px solid var(--line)}
.med:first-of-type{border-top:none}
.mic{flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  color:var(--blue); background:rgba(77,157,255,0.10); border:1px solid rgba(77,157,255,0.22)}
.mt{font-weight:700; font-size:14px}
.md{font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.5}

/* labels / notes / page heads */
.phead{padding:24px 4px 4px}
.phead h1{margin:0; font-size:34px; font-weight:800; letter-spacing:-1px}
.phead p{margin:6px 0 0; font-size:13.5px; color:var(--muted)}
.label{font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin:22px 4px 2px}
.label.flag{color:var(--flag)}
.note{font-size:14.5px; line-height:1.65; color:#DCE4F2}
.hint{font-size:12.5px; color:var(--muted); line-height:1.55}
.hint.center{text-align:center}
.tip{font-size:13.5px; line-height:1.6; color:#DCE4F2}
.tip .ic{color:var(--flag); vertical-align:-3px}
.disclaimer{font-size:11.5px; color:var(--faint2); line-height:1.6; padding:18px 6px 6px; text-align:center}

/* forms */
.field{margin-bottom:14px}
.field label{display:block; font-size:12px; font-weight:700; letter-spacing:.4px; color:var(--muted); margin-bottom:6px; text-transform:uppercase}
.field2{display:flex; gap:12px} .field2 .field{flex:1}
input,select{width:100%; padding:13px 14px; border-radius:13px; border:1px solid var(--line-2);
  background:rgba(8,12,22,0.7); color:var(--text); font-size:16px; font-family:inherit; outline:none; transition:.15s}
input:focus,select:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(77,157,255,0.16)}
select{appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%238E9AB4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8l4 4 4-4'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; padding-right:38px}
.unitwrap{position:relative} .unitwrap .unit{position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:13px; font-weight:600; pointer-events:none}

/* segmented scope control */
.seg{display:flex; background:rgba(8,12,22,0.6); border:1px solid var(--line); border-radius:13px; padding:4px; gap:4px}
.seg button{flex:1; padding:9px 6px; border:none; background:none; color:var(--muted); font-family:inherit; font-size:12.5px; font-weight:700; border-radius:10px; cursor:pointer; transition:.15s; white-space:nowrap}
.seg button.active{background:linear-gradient(120deg,var(--blue),var(--blue-2)); color:#04101F; box-shadow:0 6px 16px -8px var(--glow-blue)}

/* in-app doctor report */
.report{font-size:14px; line-height:1.55}
.r-title{margin:2px 0 4px; font-size:20px; font-weight:800; letter-spacing:-.4px}
.r-sub{font-size:11.5px; color:var(--muted); line-height:1.5; margin-bottom:6px}
.r-h{margin:18px 0 8px; font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--blue); padding-bottom:6px; border-bottom:1px solid var(--line)}
.r-p{margin:0 0 8px; font-size:13.5px; line-height:1.6; color:#DCE4F2}
.r-kv{display:flex; gap:12px; padding:5px 0; font-size:13.5px}
.r-k{flex:0 0 42%; font-weight:700; color:var(--text)}
.r-v{flex:1; color:var(--muted)}
.r-bullet{display:flex; gap:9px; padding:5px 0; font-size:13.5px; line-height:1.55; color:#DCE4F2}
.r-bullet span:first-child{color:var(--blue); font-weight:800}
.r-rule{height:1px; background:var(--line); margin:10px 0}
.r-small{font-size:11px; color:var(--faint2); line-height:1.55; margin-top:4px}

/* modal */
.overlay{position:fixed; inset:0; z-index:50; background:rgba(3,5,11,0.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:flex-end; justify-content:center; animation:fade .2s ease}
.overlay[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{width:100%; max-width:var(--maxw); max-height:90vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,#10182B,#0B1120); border:1px solid var(--line-2);
  border-radius:26px 26px 0 0; padding:8px 20px calc(env(safe-area-inset-bottom) + 24px);
  box-shadow:0 -20px 60px -20px #000; animation:slideup .32s cubic-bezier(.2,.8,.2,1)}
@keyframes slideup{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
.modal::before{content:""; display:block; width:42px; height:5px; border-radius:99px; background:var(--line-2); margin:8px auto 14px}
.mhead{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.mhead h2{flex:1; margin:0; font-size:21px; font-weight:800; letter-spacing:-.4px}
#mClose{flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2);
  background:rgba(120,150,210,0.08); color:var(--text); display:grid; place-items:center; cursor:pointer; transition:.15s}
#mClose:hover{color:var(--flag); border-color:rgba(224,133,122,0.4)}
#mBody{padding-top:8px}

/* toast */
#toast{position:fixed; left:50%; bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 18px); transform:translate(-50%,16px);
  z-index:60; background:linear-gradient(120deg,var(--blue),var(--blue-2)); color:#04101F; font-weight:700; font-size:13.5px;
  padding:12px 20px; border-radius:999px; box-shadow:0 14px 34px -10px var(--glow-blue); opacity:0; transition:.3s; pointer-events:none}
#toast.show{opacity:1; transform:translate(-50%,0)}
#toast[hidden]{display:none}

/* bottom tab bar */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:40; height:calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom); display:flex; max-width:var(--maxw); margin:0 auto;
  background:rgba(8,11,20,0.82); backdrop-filter:blur(20px) saturate(1.2); -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border-top:1px solid var(--line)}
.tab{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:none; border:none; color:var(--faint2); font-family:inherit; font-size:10.5px; font-weight:700; letter-spacing:.4px;
  cursor:pointer; padding-top:12px; transition:.18s; position:relative}
.tab .ic{width:23px; height:23px}
.tab.active{color:var(--blue)}
.tab.active .ic{filter:drop-shadow(0 0 9px var(--glow-blue))}
.tab.active::before{content:""; position:absolute; top:0; width:26px; height:3px; border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--cyan),var(--blue)); box-shadow:0 0 10px var(--glow-blue)}

@media (max-width:360px){ .greet{font-size:50px} .time{width:56px} }
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }

/* ===========================================================================
   v3 additions — trajectory chart · fasting mode · prep note · backup note
   =========================================================================== */
/* weight target-vs-actual trajectory */
.traj-wrap{margin-top:14px}
.traj{width:100%; height:82px; display:block}
.tlegend{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11px; color:var(--muted); margin-top:8px}
.tlegend .k{width:12px; height:12px; border-radius:3px; display:inline-block; vertical-align:middle}
.tlegend .k.blue{background:var(--blue)}
.tlegend .k.band{background:var(--green); opacity:.4; margin-left:8px}

/* fasting pill + banner + in-card note */
.pill.fast{color:#06241D; background:linear-gradient(120deg,var(--green),#86ECD6); border:1px solid var(--green)}
.fastbanner{display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 14px; border-radius:15px;
  background:linear-gradient(120deg,rgba(95,227,192,0.12),rgba(77,157,255,0.10)); border:1px solid rgba(95,227,192,0.30);
  font-size:13px; line-height:1.5; color:#DCE4F2}
.fastbanner .ic{color:var(--green); flex:0 0 auto}
.fastbanner b{color:#fff}
.fastline{display:flex; gap:9px; margin:12px 0 2px; padding:11px 13px; border-radius:13px;
  background:rgba(95,227,192,0.07); border:1px solid rgba(95,227,192,0.22); font-size:12.5px; line-height:1.55; color:var(--muted)}
.fastline .ic{color:var(--green); flex:0 0 auto; margin-top:1px}

/* prep & cleaning callout in recipe */
.prep{margin-top:14px; display:flex; gap:9px; background:rgba(77,157,255,0.08); border:1px solid rgba(77,157,255,0.25);
  border-radius:13px; padding:12px 14px; font-size:13px; line-height:1.55; color:var(--text)}
.prep .ic{color:var(--blue); flex:0 0 auto; margin-top:2px}

/* dismissible backup note */
.notecard{position:relative}
.noteclose{position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
  background:rgba(120,150,210,0.06); color:var(--muted); display:grid; place-items:center; cursor:pointer}
.noteclose:hover{color:var(--text); border-color:var(--line-2)}

/* tappable meal name in weekly schedule */
.linkmeal{background:none; border:none; color:var(--blue); font:inherit; font-weight:600; padding:0; cursor:pointer; text-align:left}
.linkmeal:hover{text-decoration:underline}

/* swap row with delete */
.pickrow{display:flex; align-items:center; gap:6px}
.pickrow .pickmain{flex:1; min-width:0}

/* build/version footer + larger tappable meal name */
.ver{text-align:center; color:var(--faint2); font-size:11px; letter-spacing:.4px; padding:10px 0 2px}
.linkmeal.big{font-size:15px; font-weight:700; color:var(--text); margin-bottom:2px}
.linkmeal.big:hover{color:var(--blue)}

/* ===========================================================================
   v3.1 fixes — number inputs · modal scrollbar · video links · protein · charts
   =========================================================================== */
/* hide native number spinners so the kg/kcal unit label sits cleanly */
input[type=number]{-moz-appearance:textfield; appearance:textfield}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
.unitwrap input{padding-right:50px}

/* tidy, inset modal scrollbar that respects the rounded corners */
.modal{scrollbar-width:thin; scrollbar-color:var(--line-2) transparent}
.modal::-webkit-scrollbar{width:10px}
.modal::-webkit-scrollbar-track{background:transparent; margin:16px 0}
.modal::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:99px; border:3px solid transparent; background-clip:padding-box}
.modal::-webkit-scrollbar-thumb:hover{background:var(--muted); background-clip:padding-box; border:3px solid transparent}

/* visible "watch video" link on moves + a follow-along list */
.vidlink{flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700;
  color:var(--blue); border:1px solid rgba(77,157,255,0.3); background:rgba(77,157,255,0.08);
  border-radius:10px; padding:7px 11px; text-decoration:none; white-space:nowrap}
.vidlink:hover{border-color:var(--blue); background:rgba(77,157,255,0.15)}
.vidrow{display:flex; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--line)}
.vidrow:first-of-type{border-top:none}
.vidrow .vbody{flex:1; min-width:0}
.vidrow .vt{font-weight:700; font-size:14px; color:var(--text)}
.vidrow .vd{font-size:12.5px; color:var(--muted); margin-top:2px}

/* protein bar on home */
.prorow{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--muted); margin:14px 0 7px}
.prorow .num{color:var(--text); font-weight:700}
.bar.pro span{background:linear-gradient(90deg,var(--green),var(--cyan))}

/* labeled reports chart */
.chart{width:100%; height:auto; display:block; margin-top:4px}
.chart .axt{fill:var(--faint2); font-size:9px}
.chart .axlabel{fill:var(--muted); font-size:10px; font-weight:700; letter-spacing:.3px}

/* v3.2 — meal checklist rows */
.check.meal{align-items:flex-start}
.check.meal .box{margin-top:1px}
.check.meal .body{flex:1; min-width:0}
.mealact{display:flex; gap:8px; margin-top:9px; flex-wrap:wrap}
.linkmeal.struck, .linkmeal.big.struck{text-decoration:line-through; color:var(--muted)}
.check.meal .body{cursor:default}

/* v3.x — dashboard weight chart line + glow */
.chart .aline{fill:none; stroke:var(--blue); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 5px var(--glow-blue))}

/* v3.3 — reports subheads (grouped cards) */
.subhead{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); margin:0 0 8px}
.subhead .ic{color:var(--blue)}
.subhead.good .ic{color:var(--green)}
.subhead.flag{color:var(--flag)}
.subhead.flag .ic{color:var(--flag)}
a.btn{text-decoration:none}