/* =========================================================
   DailyAccess — theme.css
   Light theme · light-blue accents · big type, few words
========================================================= */

:root{
  /* --- surfaces --- */
  --bg:#f1f6fc;
  --surface:#ffffff;
  --surface-2:#f4f8fd;
  --surface-3:#e5edf8;

  /* --- text --- */
  --ink:#14212e;
  --text:#1c2b3a;
  --muted:#78899c;
  --muted-2:#98a7b8;

  /* --- lines --- */
  --line:#e1eaf5;
  --line-soft:#eaf1f9;
  --line-strong:#d0e0f0;

  /* --- accent (light blue) --- */
  --accent:#4a9ee0;
  --accent-strong:#2f86cd;
  --accent-deep:#1c6cb0;
  --accent-soft:#e8f3fd;
  --accent-soft-2:#d6e9fb;
  --accent-ring:#bcdbf7;
  --on-accent:#ffffff;

  /* --- states --- */
  --good:#3aab77;
  --good-soft:#e5f6ee;
  --good-ring:#c3e9d5;
  --over:#e2795f;
  --over-soft:#fdeee9;
  --over-ring:#f6d3c8;

  /* --- elevation --- */
  --sh:0 1px 2px rgba(20,33,46,.04), 0 2px 8px rgba(20,33,46,.05);
  --sh-row:0 1px 2px rgba(20,33,46,.04), 0 4px 12px rgba(20,33,46,.05);
  --sh-card:0 1px 3px rgba(20,33,46,.04), 0 10px 26px rgba(20,33,46,.06);
  --sh-pop:0 20px 50px rgba(20,33,46,.16);
  --sh-accent:0 4px 14px rgba(74,158,224,.32);

  /* --- shape / motion --- */
  --radius:18px;
  --radius-sm:12px;
  --radius-xs:10px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --bb:150px;   /* bottom bar height (measured at runtime) */
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;color-scheme:light;accent-color:var(--accent);}
body{
  background:var(--bg);color:var(--text);
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:16px;-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:pan-y;
}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none;}
input,select,textarea{font-family:inherit;}

/* ===== Icons ===== */
.ico{width:22px;height:22px;display:inline-block;vertical-align:middle;flex:0 0 auto;stroke-width:1.9;}
.ico-accent{color:var(--accent);}

/* ===== Header ===== */
#apphead{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(12px + env(safe-area-inset-top)) 16px 10px;background:linear-gradient(180deg,var(--bg) 74%,rgba(241,246,252,0));}
.app-title{display:flex;align-items:center;gap:10px;font-size:1.34rem;font-weight:800;letter-spacing:-.035em;color:var(--ink);}
.app-title .ico{width:24px;height:24px;color:var(--accent);}
.icon-btn{width:44px;height:44px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--accent-strong);box-shadow:var(--sh);
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .18s,color .18s,border-color .18s;}
.icon-btn .ico{width:21px;height:21px;}
.icon-btn:hover{border-color:var(--accent-ring);background:var(--accent-soft);}
.icon-btn:active{transform:translateY(1px) scale(.97);box-shadow:none;}
.icon-btn.on,.icon-btn.signed{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:var(--sh-accent);}
.icon-btn.sm{width:38px;height:38px;border-radius:var(--radius-xs);}
.icon-btn.sm .ico{width:19px;height:19px;}
.icon-btn.soft{background:var(--accent-soft);border-color:var(--accent-ring);box-shadow:none;}
.head-btns{display:flex;align-items:center;gap:8px;}

/* auth bits */
.auth-tabs{display:flex;gap:5px;margin-bottom:18px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px;}
.auth-tabs button{flex:1;padding:10px;border-radius:9px;background:transparent;color:var(--muted);font-weight:800;font-size:.86rem;transition:background .18s,color .18s,box-shadow .18s;}
.auth-tabs button.active{background:var(--surface);color:var(--accent-strong);box-shadow:var(--sh);}
.acct-status{display:flex;align-items:center;gap:12px;background:var(--accent-soft);border:1px solid var(--accent-ring);border-radius:var(--radius-sm);padding:14px;margin-bottom:16px;}
.acct-status .ico{width:28px;height:28px;color:var(--accent-strong);flex:0 0 auto;}
.acct-status .as-name{font-weight:800;font-size:1.05rem;color:var(--ink);}
.acct-status .as-sub{font-size:.78rem;color:var(--accent-deep);font-weight:600;margin-top:2px;}
.auth-err{background:var(--over-soft);border:1px solid var(--over-ring);color:#b8462a;font-size:.86rem;font-weight:700;padding:11px 13px;border-radius:var(--radius-sm);margin-bottom:14px;display:none;}
.auth-err.show{display:block;}

/* ===== Bottom bar ===== */
#bottombar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:10px 16px max(12px,calc(env(safe-area-inset-bottom) - 16px));
  background:linear-gradient(180deg,rgba(241,246,252,0) 0,var(--bg) 22px,var(--bg) 100%);pointer-events:none;}
#bottombar>*{pointer-events:auto;}
/* iOS home-screen (web app) mode: the home indicator already floats over the
   page, so the full safe-area gap parks the menu far too high. Sit just above
   it instead. `.pwa` covers older iOS (navigator.standalone). */
@media all and (display-mode:standalone){
  #bottombar{gap:8px;padding-bottom:max(6px,calc(env(safe-area-inset-bottom) - 26px));}
}
html.pwa #bottombar{gap:8px;padding-bottom:max(6px,calc(env(safe-area-inset-bottom) - 26px));}
.datewrap{display:flex;flex-direction:column;align-items:center;gap:5px;}
.datewrap .dtag{font-size:.72rem;font-weight:800;color:var(--accent-strong);text-transform:uppercase;letter-spacing:.1em;}
.datenav{display:flex;align-items:center;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:4px 6px;box-shadow:var(--sh);}
.datenav .nav-arrow{width:32px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--accent-strong);transition:transform .12s,opacity .2s,background .18s;}
.datenav .nav-arrow:hover{background:var(--accent-soft);}
.datenav .nav-arrow:active{transform:scale(.86);}
.datenav .nav-arrow:disabled{opacity:.28;cursor:default;background:none;}
.datenav .nav-arrow .ico{width:18px;height:18px;}
.datenav .dd{width:130px;text-align:center;font-size:.88rem;font-weight:700;color:var(--ink);}
.seg{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:5px;gap:4px;box-shadow:var(--sh-row);}
.seg button{display:flex;flex-direction:column;align-items:center;gap:4px;width:84px;padding:9px 4px;border-radius:20px;color:var(--muted);
  font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;transition:color .2s,background .2s,transform .14s var(--ease);}
.seg button .ico{width:22px;height:22px;stroke-width:1.95;}
.seg button:active{transform:scale(.95);}
.seg button.active{color:var(--on-accent);background:var(--accent);box-shadow:var(--sh-accent);}

/* ===== Carousel ===== */
#viewport{position:fixed;inset:0;overflow:hidden;}
#track{display:flex;height:100%;will-change:transform;}
.page{flex:0 0 100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:var(--bg);}
.page::-webkit-scrollbar{display:none;}
.page-inner{padding:calc(64px + env(safe-area-inset-top)) 18px calc(var(--bb) + 24px);max-width:560px;margin:0 auto;}
.day-inner{min-height:100%;display:flex;flex-direction:column;padding-bottom:calc(var(--bb) - 4px);}

.sec-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.11em;color:var(--accent-deep);font-weight:800;margin:26px 2px 12px;}
.sec-label:first-child{margin-top:0;}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:26px 2px 12px;}
.sec-head:first-child{margin-top:0;}
.sec-head .sec-label{margin:0;}
.count-pill{font-size:.74rem;font-weight:800;color:var(--accent-strong);background:var(--accent-soft);border:1px solid var(--accent-ring);
  border-radius:999px;padding:5px 11px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh-card);padding:18px;}

/* ===== Switch ===== */
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);box-shadow:var(--sh);padding:13px 16px;margin-bottom:13px;}
.switch-row .sr-label{font-size:.95rem;font-weight:700;color:var(--ink);}
.switch{width:50px;height:30px;border-radius:20px;background:var(--surface-3);border:1px solid var(--line-strong);position:relative;flex:0 0 auto;transition:background .22s,border-color .22s;}
.switch .knob{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(20,33,46,.22);transition:transform .24s var(--ease);}
.switch.on{background:var(--accent);border-color:var(--accent);}
.switch.on .knob{transform:translateX(20px);}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:14px 17px;font-size:.98rem;font-weight:800;color:var(--ink);box-shadow:var(--sh);
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .18s,color .18s,border-color .18s;user-select:none;}
.btn:active{transform:translateY(1px);box-shadow:none;}
.btn .ico{width:19px;height:19px;}
.btn.accent{background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:var(--sh-accent);}
.btn.accent:hover{background:var(--accent-strong);}
.btn.ghost{background:var(--surface);color:var(--muted);}
.btn.ghost:hover{border-color:var(--accent-ring);color:var(--accent-strong);background:var(--accent-soft);}
.btn.full{width:100%;}
.btn:disabled{opacity:.5;pointer-events:none;}
.btn-add{width:100%;border:1.5px dashed var(--accent-ring);background:var(--accent-soft);color:var(--accent-strong);border-radius:var(--radius-sm);
  padding:16px;font-weight:800;font-size:.98rem;display:flex;align-items:center;justify-content:center;gap:9px;
  transition:transform .14s var(--ease),background .18s,border-color .18s;}
.btn-add .ico{width:20px;height:20px;}
.btn-add:active{transform:scale(.985);}
.btn-add:hover{background:var(--accent-soft-2);border-color:var(--accent);}

/* ===== Pills ===== */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:800;
  padding:7px 13px;border-radius:999px;background:var(--surface-2);color:var(--muted);border:1px solid var(--line);font-variant-numeric:tabular-nums;}
.pill .ico{width:14px;height:14px;stroke-width:2.4;}
.pill.ok{background:var(--good-soft);color:#2a8b62;border-color:var(--good-ring);}
.pill.info{background:var(--accent-soft);color:var(--accent-deep);border-color:var(--accent-ring);}
.pill.warn{background:var(--over-soft);color:#b8563a;border-color:var(--over-ring);}
.pill.pop{animation:pillPop .42s var(--ease);}
@keyframes pillPop{0%{transform:scale(.86);opacity:0;}55%{transform:scale(1.06);}100%{transform:scale(1);opacity:1;}}

/* ===== Wake card ===== */
.wake-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;
  background:linear-gradient(120deg,var(--accent-soft) 0,var(--surface) 62%);border-color:var(--accent-ring);}
.wake-label{font-size:1rem;color:var(--accent-deep);font-weight:800;display:flex;align-items:center;gap:9px;}
.wake-label .ico{width:22px;height:22px;}
.time-wrap{position:relative;display:inline-flex;align-items:center;}
.time-input{background:var(--surface);border:1px solid var(--accent-ring);border-radius:var(--radius-sm);color:var(--ink);
  font-size:1.55rem;font-weight:800;padding:8px 16px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:var(--sh);
  transition:border-color .18s,box-shadow .18s;}
.time-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.time-input::-webkit-calendar-picker-indicator{position:absolute;right:0;top:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;}

/* ===== Day timeline ===== */
/* One continuous rail drawn on the list — never breaks between rows.
   min-width:0 on .when is what keeps every dot on the line. */
.tasklist{position:relative;--when-w:62px;--rail-w:22px;}
.tasklist::before{content:"";position:absolute;left:calc(var(--when-w) + var(--rail-w)/2 - 1px);top:22px;bottom:var(--rail-tail,38px);
  width:2px;border-radius:2px;background:var(--line-strong);pointer-events:none;}
.tasklist:empty::before,.tasklist.no-rail::before{display:none;}
.task{display:flex;align-items:stretch;position:relative;transition:transform .18s var(--ease),opacity .18s;touch-action:pan-y;}
.task .when{flex:0 0 var(--when-w);min-width:0;max-width:var(--when-w);text-align:right;padding:14px 11px 0 0;overflow:hidden;}
.task .when .s{font-size:.95rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--accent-deep);}
.task .when .e{font-size:.74rem;color:var(--muted-2);margin-top:3px;line-height:1.1;font-variant-numeric:tabular-nums;font-weight:700;}
.task .rail{flex:0 0 var(--rail-w);min-width:0;position:relative;}
.task .rdot{position:absolute;left:50%;top:16px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--surface);
  border:2px solid var(--line-strong);z-index:1;transition:background .22s,border-color .22s,box-shadow .22s;}
.task.cur .rdot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--bg),0 0 0 6px var(--accent-ring);animation:pulse 2.6s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px var(--bg),0 0 0 6px var(--accent-ring);}50%{box-shadow:0 0 0 4px var(--bg),0 0 0 8px rgba(74,158,224,.18);}}
.task .tcard{flex:1;min-width:0;min-height:52px;margin:0 0 12px;padding:12px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-row);
  border-radius:var(--radius-sm);display:flex;align-items:center;gap:7px;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .25s,border-color .25s;}
.task.cur .tcard{border-color:var(--accent-ring);background:linear-gradient(120deg,var(--accent-soft) 0,var(--surface) 58%);
  box-shadow:0 2px 6px rgba(20,33,46,.05),0 10px 22px rgba(74,158,224,.18);}
.task.dragging{z-index:5;}
.task.dragging .tcard{box-shadow:var(--sh-pop);transform:scale(1.012);border-color:var(--accent-ring);}
.task .grip{color:var(--muted-2);cursor:grab;touch-action:none;padding:2px;display:flex;}
.task .grip .ico{width:19px;height:19px;}
.task .t-body{flex:1;min-width:0;}
.task .t-name{font-weight:700;font-size:1rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .25s;}
.task .done-check{display:none;align-items:center;justify-content:center;flex:0 0 auto;color:var(--accent-strong);}
.task .done-check .ico{width:20px;height:20px;stroke-width:2.6;}
.task.done .tcard{background:var(--accent-soft);border-color:var(--accent-ring);box-shadow:var(--sh);}
.task.done .t-name{color:var(--accent-deep);text-decoration:line-through;text-decoration-color:rgba(28,108,176,.42);}
.task.done .grip,.task.done .del-btn{color:#a9c9e8;}
.task.done [data-act="edit"]{display:none;}
.task.done .done-check{display:flex;}
.task.done .rdot{background:var(--accent);border-color:var(--accent);}
.task.done .when .s{color:var(--accent-strong);}
.tcard.pop{animation:taskPop .4s var(--ease);}
@keyframes taskPop{0%{transform:scale(1);}35%{transform:scale(1.03);}70%{transform:scale(.995);}100%{transform:scale(1);}}
.done-check.burst{animation:checkBurst .4s var(--ease);}
@keyframes checkBurst{0%{transform:scale(0) rotate(-25deg);opacity:0;}60%{transform:scale(1.25) rotate(0);}100%{transform:scale(1);opacity:1;}}
.del-btn{color:var(--muted-2);padding:5px;display:flex;border-radius:9px;transition:color .16s,background .16s,transform .12s;}
.del-btn:hover{color:var(--accent-strong);background:var(--accent-soft);}
.del-btn:active{transform:scale(.85);}
.del-btn .ico{width:18px;height:18px;}
.add-sticky{position:sticky;bottom:calc(var(--bb) - 4px);z-index:6;margin-top:auto;
  margin-left:-18px;margin-right:-18px;padding:26px 18px 8px;
  background:linear-gradient(180deg,rgba(241,246,252,0) 0,var(--bg) 24px,var(--bg) 100%);}
.day-actions{display:flex;gap:9px;margin-bottom:14px;}
.chip{width:46px;height:46px;flex:0 0 46px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--sh);
  color:var(--accent-strong);transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .18s,border-color .18s;}
.chip .ico{width:20px;height:20px;}
.chip:hover{background:var(--accent-soft);border-color:var(--accent-ring);}
.chip:active{transform:translateY(1px);box-shadow:none;}
#importFile,#foodPhoto{display:none;}

/* ===== Track ===== */
.hero{background:linear-gradient(135deg,var(--accent-soft) 0,var(--surface) 58%);border-color:var(--accent-ring);}
.hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.hero-num{font-size:2.9rem;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--accent-strong);font-variant-numeric:tabular-nums;}
.hero-num span{font-size:1.3rem;margin-left:2px;}
.hero-num span.unit{font-size:1rem;font-weight:800;color:var(--muted);margin-left:7px;letter-spacing:0;}
.hero-sub{font-size:.92rem;font-weight:700;color:var(--muted);margin-top:7px;}
.bigbar-wrap{position:relative;margin-top:18px;padding-top:22px;}
.bigbar-wrap.flat{padding-top:0;}          /* no stamps to make room for */
.bigbar{height:16px;background:var(--surface-3);border-radius:20px;overflow:hidden;}
.bigbar>span{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--accent),var(--accent-strong));transition:width .55s var(--ease);}
.bigbar.over>span{background:linear-gradient(90deg,#eda58f,var(--over));}
.bigbar.full>span{background:linear-gradient(90deg,#5cc79b,var(--good));}
.stamp{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;cursor:pointer;z-index:2;}
.stamp .stxt{font-size:.64rem;font-weight:800;color:var(--accent-deep);white-space:nowrap;margin-bottom:3px;text-transform:uppercase;letter-spacing:.05em;}
.stamp .stick{width:2px;height:24px;background:var(--accent-ring);border-radius:2px;}

.tracker{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh-card);padding:16px;margin-bottom:13px;}
.tracker.hit{border-color:var(--good-ring);}
.tk-top{display:flex;align-items:center;gap:12px;margin-bottom:13px;}
.tk-ico{width:44px;height:44px;flex:0 0 44px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);
  border:1px solid var(--accent-ring);border-radius:13px;color:var(--accent-strong);}
.tk-ico .ico{width:23px;height:23px;}
.tracker.hit .tk-ico{background:var(--good-soft);border-color:var(--good-ring);color:var(--good);}
.tk-main{flex:1;min-width:0;}
.tk-name{font-weight:800;font-size:1.08rem;letter-spacing:-.02em;color:var(--ink);display:flex;align-items:center;gap:7px;min-width:0;}
.tk-name .tk-done{width:18px;height:18px;stroke-width:2.6;color:var(--good);flex:0 0 auto;}
.tk-num{font-size:.9rem;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px;}
.tk-num b{color:var(--accent-strong);font-size:1.3rem;letter-spacing:-.02em;}
.tracker.hit .tk-num b{color:var(--good);}
.pbar{height:12px;background:var(--surface-3);border-radius:20px;overflow:hidden;}
.pbar>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-strong));border-radius:20px;transition:width .5s var(--ease);}
.tracker.hit .pbar>span{background:linear-gradient(90deg,#5cc79b,var(--good));}
.tk-controls{display:flex;gap:10px;align-items:center;margin-top:14px;}
.tk-controls .stp{flex:0 0 76px;height:52px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;color:var(--accent-strong);
  transition:transform .14s,background .18s,border-color .18s;}
.tk-controls .stp:hover{background:var(--accent-soft);border-color:var(--accent-ring);}
.tk-controls .stp:active{transform:translateY(1px);}
.tk-controls .stp.plus{flex:1;background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:var(--sh-accent);
  font-size:1rem;font-weight:800;gap:8px;}
.tk-controls .stp.plus:hover{background:var(--accent-strong);}
.tk-controls .stp .ico{width:22px;height:22px;stroke-width:2.4;}

/* ===== Meals ===== */
/* same hero card as Track — see .hero / .hero-num / .bigbar above */
.fuel-foot{display:flex;justify-content:flex-start;margin-top:12px;}

.mbar{height:14px;background:var(--surface-3);border-radius:20px;overflow:hidden;}
.mbar>span{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--accent),var(--accent-strong));transition:width .55s var(--ease),background .3s;}
.mbar.over>span{background:linear-gradient(90deg,#eda58f,var(--over));}
.mbar.full>span{background:linear-gradient(90deg,#5cc79b,var(--good));}
.mbar.sm{height:8px;}

.macro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;}
.macro{background:var(--surface);border:1px solid var(--accent-ring);border-radius:var(--radius-xs);padding:11px 11px 12px;}
.macro .m-head{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.macro .m-head .ico{width:15px;height:15px;color:var(--accent);}
.macro .m-name{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.macro .m-val{font-size:1.1rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:8px;letter-spacing:-.02em;}
.macro .m-val i{font-style:normal;font-size:.74rem;font-weight:700;color:var(--muted-2);}
.macro.over .m-val,.macro.over .m-head .ico{color:var(--over);}

.scan-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:var(--on-accent);
  border:1px solid var(--accent);border-radius:var(--radius-sm);padding:17px;font-size:1.05rem;font-weight:800;box-shadow:var(--sh-accent);
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .18s;}
.add-sticky .scan-btn{margin:0;padding:16px;font-size:1rem;}  /* matches Add task / New tracker */
.scan-btn .ico{width:22px;height:22px;}
.scan-btn:hover{background:var(--accent-strong);}
.scan-btn:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(74,158,224,.28);}
.scan-btn:disabled{opacity:.45;pointer-events:none;box-shadow:none;}

/* first-run setup */
.setup-card{text-align:center;background:linear-gradient(160deg,var(--accent-soft) 0,var(--surface) 55%);border-color:var(--accent-ring);padding:24px 20px 20px;}
.su-ico{width:60px;height:60px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;border-radius:20px;
  background:var(--surface);border:1px solid var(--accent-ring);color:var(--accent);box-shadow:var(--sh);}
.su-ico .ico{width:29px;height:29px;}
.su-title{font-weight:800;font-size:1.35rem;letter-spacing:-.03em;color:var(--ink);}
.su-sub{font-size:.95rem;color:var(--muted);font-weight:600;margin-top:6px;}
.steps{display:flex;flex-direction:column;gap:9px;margin:20px 0;text-align:left;}
.step{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;}
.st-n{width:30px;height:30px;flex:0 0 30px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--accent);color:var(--on-accent);font-size:.9rem;font-weight:800;}
.step b{display:block;font-size:.98rem;font-weight:800;color:var(--ink);}
.step i{display:block;font-style:normal;font-size:.8rem;font-weight:600;color:var(--muted);margin-top:1px;}

.keycard{display:flex;align-items:center;gap:13px;margin-top:14px;background:var(--accent-soft);border-color:var(--accent-ring);padding:14px 15px;}
.keycard>.ico{width:26px;height:26px;color:var(--accent-strong);flex:0 0 26px;}
.kc-txt{flex:1;min-width:0;}
.kc-txt b{display:block;font-size:.98rem;font-weight:800;color:var(--ink);}
.kc-txt i{display:block;font-style:normal;font-size:.8rem;font-weight:600;color:var(--accent-deep);margin-top:1px;}
.keycard .btn{padding:11px 18px;}

.meal{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--sh-row);padding:12px;margin-bottom:10px;transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .18s;}
.meal:active{transform:translateY(1px);box-shadow:var(--sh);}
.meal-ico{width:44px;height:44px;flex:0 0 44px;display:flex;align-items:center;justify-content:center;border-radius:13px;
  background:var(--accent-soft);border:1px solid var(--accent-ring);color:var(--accent-strong);}
.meal-ico .ico{width:23px;height:23px;}
.meal-body{flex:1;min-width:0;}
/* names wrap to two lines rather than getting chopped */
.meal-name{font-size:1rem;font-weight:700;color:var(--ink);line-height:1.25;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.meal-sub{font-size:.79rem;color:var(--muted);font-weight:600;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.meal-kcal{flex:0 0 auto;text-align:right;font-size:1.1rem;font-weight:800;color:var(--accent-strong);font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.02em;}
.meal-kcal span{display:block;font-size:.6rem;font-weight:800;color:var(--muted-2);text-transform:uppercase;letter-spacing:.09em;margin-top:2px;}

.scanning{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--accent-ring);border-radius:var(--radius-sm);
  box-shadow:var(--sh-row);padding:15px;margin-bottom:10px;}
.spinner{width:24px;height:24px;flex:0 0 24px;border-radius:50%;border:2.5px solid var(--accent-soft-2);border-top-color:var(--accent);animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.scanning .sc-txt{font-size:.98rem;font-weight:800;color:var(--ink);}
.scanning .sc-sub{font-size:.8rem;font-weight:600;color:var(--muted);margin-top:2px;}
.scan-thumb{width:100%;max-height:150px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--line);margin-bottom:16px;display:block;}
.key-row{display:flex;gap:9px;align-items:stretch;}
.key-row input{flex:1;min-width:0;}
.key-row .btn{flex:0 0 auto;padding:12px 17px;}
.key-status{display:flex;align-items:center;gap:8px;margin-top:11px;}
.hint{font-size:.78rem;color:var(--muted-2);font-weight:600;line-height:1.5;margin-top:9px;}

.empty{color:var(--muted);font-size:.95rem;text-align:center;padding:26px 16px;line-height:1.5;font-weight:600;}

/* ===== Fields ===== */
.field{margin-bottom:16px;}
.field label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800;margin-bottom:8px;}
.field input,.field textarea,.field select{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);
  font-size:1.05rem;padding:13px 15px;font-weight:700;transition:border-color .18s,box-shadow .18s,background .18s;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent-ring);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft);}
.field textarea{resize:vertical;line-height:1.45;min-height:90px;font-weight:500;}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.field-2 .field{margin-bottom:0;}

/* ===== Modal ===== */
#modal-bg{position:fixed;inset:0;z-index:100;background:rgba(26,46,68,.3);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;
  align-items:flex-start;justify-content:center;padding:max(7vh,40px) 16px 16px;overflow-y:auto;}
#modal-bg.open{display:flex;animation:fadeIn .2s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:22px;width:100%;max-width:420px;
  padding:24px 21px;animation:popIn .28s var(--ease);box-shadow:var(--sh-pop);}
@keyframes popIn{from{opacity:0;transform:scale(.95) translateY(12px);}to{opacity:1;transform:scale(1) translateY(0);}}
.modal h3{margin:0 0 6px;font-size:1.32rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);}
.modal .m-sub{color:var(--muted);font-size:.9rem;margin-bottom:20px;font-weight:600;line-height:1.5;}
.icon-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;overflow:hidden;}
.icon-grid button{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);transition:transform .12s,background .18s,color .18s,border-color .18s;}
.icon-grid button .ico{width:20px;height:20px;}
.icon-grid button.sel{background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:var(--sh-accent);}
.icon-grid button:active{transform:scale(.9);}
.modal-actions{display:flex;gap:10px;margin-top:10px;}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.modal-head h3{margin:0;}
.start-pill{font-size:1.05rem;font-weight:800;color:var(--accent-strong);font-variant-numeric:tabular-nums;background:var(--accent-soft);border:1px solid var(--accent-ring);border-radius:20px;padding:5px 13px;}
.dur-control{display:flex;gap:9px;align-items:stretch;}
.dur-modes{position:relative;flex:1;height:52px;}
.dd-select{position:absolute;left:0;right:0;top:0;width:100%;height:100%;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);color:var(--ink);font-size:1.05rem;font-weight:700;padding:0 13px;
  opacity:0;transform:translateY(7px);pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease),border-color .18s,box-shadow .18s;}
.dd-select:focus{outline:none;border-color:var(--accent-ring);box-shadow:0 0 0 3px var(--accent-soft);}
.dd-select.active{opacity:1;transform:none;pointer-events:auto;}
.mode-btn{flex:0 0 auto;display:flex;align-items:center;gap:7px;background:var(--accent);border:1px solid var(--accent);
  border-radius:var(--radius-sm);padding:0 16px;color:var(--on-accent);font-size:.84rem;font-weight:800;box-shadow:var(--sh-accent);transition:transform .14s var(--ease),background .18s;}
.mode-btn:active{transform:translateY(1px);}
.mode-btn .ico{width:17px;height:17px;}

/* ===== Overlays (history / frozen) ===== */
.overlay{position:fixed;inset:0;z-index:90;background:var(--bg);transform:translateX(100%);transition:transform .32s var(--ease);overflow-y:auto;scrollbar-width:none;}
.overlay::-webkit-scrollbar{display:none;}
.overlay.open{transform:translateX(0);}
.ov-head{position:sticky;top:0;z-index:5;background:linear-gradient(180deg,var(--bg) 78%,rgba(241,246,252,0));padding:calc(14px + env(safe-area-inset-top)) 16px 12px;display:flex;align-items:center;gap:12px;}
.ov-head .back{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--accent-strong);box-shadow:var(--sh);transition:transform .14s,box-shadow .14s,background .18s,border-color .18s;}
.ov-head .back:hover{background:var(--accent-soft);border-color:var(--accent-ring);}
.ov-head .back:active{transform:translateY(1px);box-shadow:none;}
.ov-head .back .ico{width:20px;height:20px;}
.ov-title{font-size:1.4rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);}
.ov-title .sub{font-size:.82rem;color:var(--muted);font-weight:600;}
.ov-body{padding:6px 16px 60px;max-width:560px;margin:0 auto;}
.frozen-tag{font-size:.62rem;background:var(--accent-soft);color:var(--accent-deep);border:1px solid var(--accent-ring);font-weight:800;padding:3px 9px;border-radius:20px;letter-spacing:.08em;text-transform:uppercase;}

.metric-row{display:flex;justify-content:center;margin:6px 0 10px;}
.filter-row{display:flex;justify-content:center;margin:0 0 20px;}
.filter-chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:10px 17px;font-size:.86rem;font-weight:800;color:var(--muted);box-shadow:var(--sh);
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .18s,color .18s,border-color .18s;}
.filter-chip .ico{width:16px;height:16px;stroke-width:2.2;}
.filter-chip:hover{border-color:var(--accent-ring);color:var(--accent-strong);background:var(--accent-soft);}
.filter-chip:active{transform:translateY(1px);box-shadow:none;}
.filter-chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:var(--sh-accent);}
.metric-toggle{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:4px;gap:3px;box-shadow:var(--sh);}
.metric-toggle button{display:flex;align-items:center;gap:7px;padding:10px 18px;border-radius:20px;font-size:.86rem;font-weight:800;color:var(--muted);transition:color .18s,background .18s;}
.metric-toggle button .ico{width:16px;height:16px;}
.metric-toggle button.active{background:var(--accent);color:var(--on-accent);box-shadow:var(--sh-accent);}

.chart-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh-card);padding:16px 14px 10px;}
.chart-card svg{width:100%;height:auto;display:block;}
.chart-x{display:flex;justify-content:space-between;font-size:.68rem;color:var(--muted-2);margin-top:6px;padding:0 2px;font-weight:700;}

.day-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--sh-row);padding:14px;margin-bottom:10px;transition:transform .14s,box-shadow .14s,border-color .18s;cursor:pointer;}
.day-row:hover{border-color:var(--accent-ring);}
.day-row:active{transform:translateY(1px);box-shadow:var(--sh);}
.day-row .dr-date{flex:0 0 auto;min-width:80px;}
.day-row .dr-date .dr-d{font-weight:800;font-size:.98rem;color:var(--ink);}
.day-row .dr-date .dr-w{font-size:.74rem;color:var(--muted);font-weight:600;}
.day-row .dr-bar{flex:1;height:9px;background:var(--surface-3);border-radius:20px;overflow:hidden;}
.day-row .dr-bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-strong));border-radius:20px;}
.day-row .dr-pct{flex:0 0 auto;font-size:.95rem;font-weight:800;color:var(--accent-strong);min-width:42px;text-align:right;font-variant-numeric:tabular-nums;}
.day-row .ico{color:var(--muted-2);width:18px;height:18px;}

/* ===== Toast ===== */
.toast{position:fixed;left:50%;bottom:calc(var(--bb) + 8px);transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font-size:.9rem;font-weight:700;
  box-shadow:0 10px 30px rgba(20,33,46,.28);z-index:200;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:86vw;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}