/* Liquid glass design system. The existing layout rules remain in style.css. */
:root,html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101827;--card:rgba(28,42,65,.55);--card2:rgba(42,60,86,.55);--card3:rgba(68,89,119,.54);
  --accent:#8cc9ff;--accent-strong:#79b8f7;--accent-ink:#092139;
  --text:#f4f8ff;--muted:#a9b9ce;--danger:#ff828c;--success:#78dfb0;
  --border:rgba(220,237,255,.16);--ring-track:rgba(173,206,239,.16);
  --overlay:rgba(5,12,25,.68);--shadow:rgba(2,9,25,.34);
  --glass-edge:rgba(255,255,255,.27);--glass-glow:rgba(214,236,255,.12);
  --surface-shadow:0 18px 46px rgba(2,9,25,.24),inset 0 1px 0 rgba(255,255,255,.16);
  --wash-a:rgba(66,121,190,.34);--wash-b:rgba(100,74,160,.28);--wash-c:rgba(34,161,168,.16);
  --pro:#83c4ff;--carb:#7fe2b4;--fat:#ffc484;--fib:#d7a9f8;
  --raw-icon:#a5d3ba;--cooked-icon:#e1bca0;
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#eaf0fb;--card:rgba(255,255,255,.58);--card2:rgba(245,249,255,.67);--card3:rgba(218,229,245,.73);
  --accent:#2365bd;--accent-strong:#2c70ce;--accent-ink:#fff;
  --text:#172942;--muted:#596d88;--danger:#c63148;--success:#16805c;
  --border:rgba(76,112,155,.19);--ring-track:rgba(83,125,177,.15);
  --overlay:rgba(30,47,74,.42);--shadow:rgba(51,75,112,.15);
  --glass-edge:rgba(255,255,255,.9);--glass-glow:rgba(255,255,255,.8);
  --surface-shadow:0 18px 48px rgba(69,94,139,.14),inset 0 1px 0 rgba(255,255,255,.9);
  --wash-a:rgba(145,191,248,.56);--wash-b:rgba(195,175,240,.39);--wash-c:rgba(148,227,217,.34);
  --pro:#246fce;--carb:#17906e;--fat:#b76c19;--fib:#8358bb;
  --raw-icon:#548a6b;--cooked-icon:#94745d;
}
html,body{background-color:var(--bg);color:var(--text)}
body{
  background-image:radial-gradient(ellipse 52% 42% at 3% 8%,var(--wash-a),transparent 100%),
    radial-gradient(ellipse 48% 46% at 100% 21%,var(--wash-b),transparent 100%),
    radial-gradient(ellipse 48% 48% at 55% 100%,var(--wash-c),transparent 100%);
  background-attachment:fixed;
}
button,input{font-family:inherit}
button{transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease}
button:not(:disabled):active{transform:scale(.97)}
button:focus-visible,input:focus-visible,.nav-item:focus-visible,.dc:focus-visible,.cal-day:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}
::selection{background:var(--accent);color:var(--accent-ink)}

/* App frame and floating navigation */
.app-header{
  position:relative;z-index:10;min-height:78px;
  padding:calc(.9rem + env(safe-area-inset-top)) max(1.25rem,calc((100vw - 1000px)/2)) .7rem;
  background:linear-gradient(180deg,var(--card),rgba(255,255,255,0));
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(28px) saturate(155%);-webkit-backdrop-filter:blur(28px) saturate(155%);
}
.hdr-title{display:flex;align-items:center;gap:.7rem;font-size:1.2rem;font-weight:760;letter-spacing:-.045em}
.brand-mark{
  width:40px;height:40px;display:grid;place-items:center;font-size:1.38rem;
  border-radius:14px;background:linear-gradient(145deg,var(--glass-edge),var(--card2));
  border:1px solid var(--glass-edge);box-shadow:var(--surface-shadow);
}
.hdr-user{padding:8px 12px;border:1px solid var(--border);border-radius:100px;background:var(--card);color:var(--text);font-weight:600}
.content{width:100%;max-width:1020px;margin:0 auto;padding-bottom:calc(110px + env(safe-area-inset-bottom));scrollbar-color:var(--border) transparent}
.page.active{animation:pageIn .35s ease both}
@keyframes pageIn{from{opacity:.55;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.bottom-nav{
  left:50%;right:auto;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);
  width:min(94vw,600px);padding:8px;align-items:stretch;
  border:1px solid var(--glass-edge);border-radius:26px;
  background:var(--card);box-shadow:0 20px 50px var(--shadow),inset 0 1px 0 var(--glass-edge);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
}
.nav-item{min-width:0;min-height:58px;justify-content:center;gap:3px;padding:6px 3px;border-radius:18px;font-size:.67rem;font-weight:650}
.nav-item.active{background:linear-gradient(150deg,var(--card3),var(--card2));color:var(--text);box-shadow:inset 0 1px 0 var(--glass-edge),0 5px 14px var(--shadow)}
.nav-item.active .nav-icon{color:var(--accent)}
.nav-icon{width:23px;height:23px}

/* Shared translucent surfaces */
.mc,.meal-section,.settings-card,.ring-area,.date-strip,.diary-date,.cal-hdr,.cal-grid,.lib-item,
.auth-panel,.amount-box,.goal-balance,.recipe-total,.ing-row,.ean-result,.toast{
  background:var(--card);border:1px solid var(--glass-edge);
  box-shadow:var(--surface-shadow);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
}
.mc,.meal-section,.settings-card,.ring-area,.date-strip,.diary-date,.cal-hdr,.cal-grid,.auth-panel{border-radius:24px}
.mc,.meal-section,.settings-card,.ring-area,.lib-item{position:relative;overflow:hidden}
.mc::before,.meal-section::before,.settings-card::before,.ring-area::before,.lib-item::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--glass-edge),transparent);
}

/* Sign in */
#auth-page{padding:1.5rem;overflow-y:auto}
.auth-panel{width:min(100%,440px);padding:2.4rem 2rem 2rem;text-align:center}
.auth-logo{width:76px;height:76px;margin:0 auto 1.1rem;display:grid;place-items:center;font-size:2.6rem;border-radius:25px;background:linear-gradient(145deg,var(--glass-edge),var(--card2));box-shadow:0 14px 30px var(--shadow),inset 0 1px 0 var(--glass-edge)}
.auth-title{font-size:2rem;letter-spacing:-.055em}
.auth-sub{margin-top:.35rem;margin-bottom:1.8rem}
.tab-switch,.form-tabs,.theme-seg{background:var(--card2);border:1px solid var(--border);border-radius:16px;padding:4px}
.tab-btn,.ft,.theme-opt{border-radius:12px}
.tab-btn.active,.ft.active,.theme-opt.active{
  background:var(--card);color:var(--text);border:1px solid var(--glass-edge);
  box-shadow:0 5px 14px var(--shadow),inset 0 1px 0 var(--glass-edge);
}
.auth-form{text-align:left}
.field label,.field-sm label{color:var(--muted);font-weight:700;letter-spacing:.09em}
input[type=text],input[type=password],input[type=number],input[type=time],input[type=date],.search-bar,.recipe-search{
  background:var(--card2);border:1px solid var(--border);border-radius:14px;color:var(--text);
  box-shadow:inset 0 1px 1px var(--shadow);outline:none;
}
input::placeholder{color:var(--muted);opacity:.8}
input:focus,.search-bar:focus,.recipe-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.btn-primary,.macro-add-btn,.fab,.meal-add,.fo-add-btn,.ms-btn.active,.lf-btn.active,.goal-balance-option.active,.cal-day.sel-cal,.dc.sel{
  background:linear-gradient(145deg,var(--accent),var(--accent-strong));color:var(--accent-ink);
  border:1px solid var(--glass-edge);box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary,.macro-add-btn{border-radius:16px;min-height:52px}
.btn-secondary,.account-btn-secondary,.pieces-button,.pkg-btn{background:var(--card2);color:var(--text);border:1px solid var(--border)}
.btn-secondary,.account-btn,.pieces-button,.pkg-btn{border-radius:14px}

/* Daily overview */
#page-dashboard{padding:12px 16px 4px}
.date-strip-wrap{padding:0!important}
.date-strip{gap:7px;margin:0 0 11px;padding:6px;justify-content:space-between}
.dc{flex:1;min-width:42px;border:1px solid transparent;border-radius:15px;padding:7px 3px}
.dc.today{border-color:var(--accent)}
.dc-d{font-size:.66rem;font-weight:700;letter-spacing:.04em}
.dc-n{font-size:1.03rem;font-weight:750}
.dc.sel .dc-d,.dc.sel .dc-n{color:var(--accent-ink)}
.ring-area{display:block;height:auto;min-height:0;padding:14px 16px 16px;margin-bottom:11px;
  background:linear-gradient(125deg,color-mix(in srgb,var(--accent) 11%,transparent),transparent 55%),var(--card)}
.calorie-header,.calorie-values{display:flex;align-items:center;justify-content:space-between;gap:8px}
.calorie-label{font-size:.82rem;font-weight:700;color:var(--text)}
.calorie-values{justify-content:flex-start;align-items:baseline;margin:4px 0 11px}
.ring-kcal{font-size:1.42rem;font-weight:780;line-height:1;letter-spacing:-.045em}
.ring-goal{font-size:.78rem;color:var(--muted)}
.ring-pct{margin:0;padding:4px 9px;font-size:.7rem;background:var(--card3)!important;color:var(--text)!important;border:1px solid var(--border)}
.calorie-track{height:9px;background:var(--ring-track);border-radius:100px;overflow:hidden;box-shadow:inset 0 1px 2px var(--shadow)}
.calorie-fill{height:100%;width:0;background:var(--progress-color,var(--accent));border-radius:100px;box-shadow:0 0 14px var(--progress-color,var(--accent));transition:width .5s ease,background-color .2s ease}
.macro-grid{gap:10px;padding:0 0 10px}
.mc{min-height:105px;padding:13px 14px}
.mc-label{font-size:.78rem;font-weight:650;color:var(--text)}
.mc-vals{font-size:1.09rem;letter-spacing:-.025em}
.mc-bar,.nut-bar-bg{height:7px;background:var(--ring-track);border-radius:100px}
.mc-fill,.nut-bar-fill{border-radius:100px}
.mc-bar{margin-top:10px}
.dashboard-actions{padding:0 0 12px!important;gap:12px!important}
.dashboard-actions .macro-add-btn{margin:0;box-shadow:0 9px 24px color-mix(in srgb,var(--accent) 26%,transparent)}

/* Diary, calendar and library */
#page-diary,#page-calendar,#page-foods,#page-settings{padding:18px 16px 10px}
.diary-date{min-height:58px;margin-bottom:14px;padding:9px 16px;justify-content:space-between}
.diary-date-label{font-size:.95rem;font-weight:700}
.diary-nav,.cal-nav{color:var(--accent);background:var(--card2);border:1px solid var(--border);border-radius:13px;min-width:37px;min-height:37px;display:grid;place-items:center;padding:0}
.meal-section{margin:0 0 12px}
.meal-hdr{padding:16px 18px}
.meal-name{font-size:.96rem}
.meal-add,.fo-add-btn{box-shadow:none}
.meal-items{padding:0 18px 12px}
.fi-thumb,.fi-thumb-ph,.fo-thumb,.fo-thumb-ph,.li-thumb,.li-thumb-ph{border-radius:13px}
.fi-kcal,.fo-kcal{color:var(--accent);font-weight:750}
.cal-hdr{padding:12px 16px;margin-bottom:12px}
.cal-grid{padding:14px;gap:5px}
.cal-day{border-radius:13px}
.cal-day.today-cal{border-color:var(--accent)}
.cal-day.sel-cal::after{background:var(--accent-ink)}
.lib-search{padding:0 0 12px}
.lib-filters{padding:0 0 16px;gap:8px}
.lf-btn,.ms-btn{background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:100px}
.lf-btn.active,.ms-btn.active{border-color:var(--glass-edge);color:var(--accent-ink)}
.lib-item{padding:13px 16px;margin-bottom:10px;border-radius:20px}
.li-thumb-ph{background:var(--card2)}
.fab{right:max(calc(20px + env(safe-area-inset-right)),calc((100vw - 980px)/2));bottom:calc(100px + env(safe-area-inset-bottom));width:56px;height:56px}
.fab[hidden]{display:none}
.fo-badge,.chip.pub,.chip.priv{background:var(--card3);color:var(--text);border:1px solid var(--border)}
.fo-badge.recipe,.fo-badge.priv{background:var(--card3);color:var(--text)}

/* Settings and forms */
.settings-card{margin:0 0 12px;padding:20px}
.settings-card-title{font-size:.73rem;letter-spacing:.13em;color:var(--accent);margin-bottom:14px}
.goal-balance,.amount-box,.recipe-total,.ing-row{background:var(--card2);border-color:var(--border);border-radius:17px;box-shadow:none}
.goal-balance-option{background:var(--card);border-radius:12px;color:var(--text)}
.goal-balance-option.active{color:var(--accent-ink)}
.theme-opt.active{color:var(--text)}
.theme-opt.active svg{color:var(--accent)}
.set-row,.toggle-row,.mt-row,.food-item,.food-opt,.nut-item{border-color:var(--border)}
.set-row{min-height:54px}
.tgl-track{background:var(--card3);border:1px solid var(--border)}
.tgl input:checked+.tgl-track{background:var(--accent)}
.tgl input:checked+.tgl-track::before{background:var(--accent-ink)}
.logout-btn{margin:8px 0 22px;width:100%;border-radius:16px;background:var(--card);border-color:color-mix(in srgb,var(--danger) 50%,transparent)}
#page-settings>div[style*="padding"]{padding:4px 0 12px!important}

/* Sheets, popups, scanning and feedback */
.overlay,.nut-popup{background:var(--overlay);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.sheet,.nut-sheet{
  background:var(--card);border:1px solid var(--glass-edge);border-bottom:0;
  box-shadow:0 -18px 60px var(--shadow),inset 0 1px 0 var(--glass-edge);
  backdrop-filter:blur(36px) saturate(165%);-webkit-backdrop-filter:blur(36px) saturate(165%);
  border-radius:28px 28px 0 0;
}
.sheet-title,.nut-title{font-size:1.12rem;letter-spacing:-.02em}
.sheet-handle{background:var(--border);height:5px;width:44px}
.sheet-close{color:var(--text);background:var(--card2);border:1px solid var(--border);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;line-height:1;margin-top:-4px}
.toast{top:calc(1rem + env(safe-area-inset-top));border-radius:100px;box-shadow:0 12px 30px var(--shadow)}
.ean-wrap{border:1px solid var(--glass-edge);border-radius:20px}
.ean-frame{border-color:var(--accent)}

@media(min-width:700px){
  #page-dashboard .macro-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  #page-dashboard .mc{min-height:116px;padding:17px}
  #page-dashboard .dashboard-actions{max-width:500px;margin:0 auto}
  #page-diary,#page-calendar,#page-foods,#page-settings{max-width:780px;margin:0 auto}
  .sheet,.nut-sheet{max-width:600px;margin:0 auto;border-radius:28px 28px 0 0}
}
@media(max-width:390px){
  .app-header{min-height:64px;padding-top:calc(.6rem + env(safe-area-inset-top));padding-bottom:.45rem}
  .brand-mark{width:36px;height:36px}
  .hdr-title{font-size:1.05rem}.hdr-user{font-size:.7rem;padding:7px 9px}
  #page-dashboard,#page-diary,#page-calendar,#page-foods,#page-settings{padding-left:12px;padding-right:12px}
  .nav-item{font-size:.58rem}.nav-icon{width:21px;height:21px}
  .date-strip{gap:2px;padding:6px}.dc{min-width:37px}
  .mc{min-height:99px;padding:11px 12px}
  .settings-card{padding:16px}
}
@media(max-height:700px) and (max-width:699px){
  #page-dashboard{padding-top:8px}
  .date-strip{margin-bottom:8px;padding:4px}
  .dc{padding-top:5px;padding-bottom:5px}
  .ring-area{padding:10px 14px 12px;margin-bottom:8px}
  .calorie-values{margin:2px 0 8px}
  .macro-grid{gap:8px;padding-bottom:8px}
  .mc{min-height:90px;padding:10px 12px}
  .mc-bar{margin-top:7px}
  .dashboard-actions{padding-bottom:0!important}
  .dashboard-actions .macro-add-btn{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-theme="dark"]{--card:#263650;--card2:#354763;--card3:#4b5f7c}
  html[data-theme="light"]{--card:#f8fbff;--card2:#edf3fc;--card3:#dce8f7}
}