:root {
  --green: #7FD83A; --green-dark: #5EB82A;
  --black: #000000; --card: #1A1A1A; --border: #2A2A2A;
  --white: #ffffff; --muted: #9A9A9A; --gold: #ffd166;
  --amber: #FFA94D; --red: #FF6B6B;
  /* Legacy compat aliases used in inline JS/HTML */
  --pd: #000000; --gb: #7FD83A; --gm: #5EB82A; --ct: #1A1A1A; --mu: #9A9A9A;
  --pr: #7FD83A; --pl: #5EB82A;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background: #000000; color: #fff; min-height: 100vh; overflow-x: hidden; }
.app { position:relative; z-index:1; max-width:430px; margin:0 auto; min-height:100vh; padding:52px 20px 64px; }

/* Topbar */
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; animation:fadeDown .45s ease both; }
.brand  { display:flex; align-items:center; }
.brand img, .brand-logo { max-height:60px; width:auto; display:block; object-fit:contain; }
.zip-pill { display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:10px 16px; font-size:14px; font-weight:700; backdrop-filter:blur(8px); cursor:pointer; }

/* Fuel button */
.fuel-btn { width:100%; border:0; border-radius:999px; padding:22px 20px; font-family:'Plus Jakarta Sans',sans-serif; font-size:26px; font-weight:900; letter-spacing:-.01em; color:#000000; background:linear-gradient(90deg,#7FD83A,#5EB82A); box-shadow:0 16px 40px rgba(127,216,58,.35); cursor:pointer; position:relative; overflow:hidden; transition:transform .15s,box-shadow .15s; margin-bottom:20px; animation:fadeUp .45s .08s ease both; }
.fuel-btn::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,transparent 55%); border-radius:inherit; pointer-events:none; }
.fuel-btn:hover { transform:translateY(-2px); box-shadow:0 22px 50px rgba(127,216,58,.48); }
.fuel-btn.scanning { background:linear-gradient(90deg,#3a3a3a,#555555); color:white; animation:pulse-scan 1.3s ease-in-out infinite; }
@keyframes pulse-scan { 0%,100%{box-shadow:0 16px 40px rgba(127,216,58,.25)} 50%{box-shadow:0 22px 60px rgba(127,216,58,.5)} }

/* Subtext */
.subtext { text-align:center; margin-bottom:24px; animation:fadeUp .45s .14s ease both; }
.subtext-main { font-size:17px; font-weight:600; color:rgba(255,255,255,.9); }
.mode-badge { display:inline-block; background:rgba(127,216,58,.12); border:1px solid rgba(127,216,58,.28); color:#7FD83A; border-radius:999px; padding:4px 14px; font-size:13px; font-weight:700; margin-top:6px; }

/* Scan */
.scan-overlay { display:none; flex-direction:column; align-items:center; gap:12px; padding:20px 0 14px; }
.scan-overlay.active { display:flex; animation:fadeUp .3s ease both; }
.scan-ring { width:52px; height:52px; border-radius:50%; border:3px solid rgba(127,216,58,.2); border-top-color:#7FD83A; animation:spin .85s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.scan-label { font-size:15px; font-weight:600; color:rgba(255,255,255,.8); }
.scan-step  { font-size:13px; font-weight:700; color:#7FD83A; }

/* Pick card */
.section-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:20px; font-weight:900; letter-spacing:-.01em; margin-bottom:14px; }
.pick-card { background:#1A1A1A; color:#ffffff; border-radius:28px; overflow:hidden; margin-bottom:16px; box-shadow:0 20px 56px rgba(0,0,0,.6); animation:fadeUp .45s .22s ease both; border:1px solid #2A2A2A; }
.pick-card-top { padding:20px 20px 0; }
.pick-label { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(90deg,#fff3e0,#ffe4cc); border-radius:999px; padding:5px 13px; font-size:11px; font-weight:800; color:#c4430a; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; }
.pick-header { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.pick-name  { font-family:'Plus Jakarta Sans',sans-serif; font-size:21px; font-weight:900; letter-spacing:-.01em; line-height:1.1; margin-bottom:4px; color:#ffffff; }
.pick-place { font-size:13px; font-weight:600; color:#9A9A9A; margin-bottom:10px; }
.macro-row  { display:flex; gap:8px; flex-wrap:wrap; }
.macro-pill { display:flex; flex-direction:column; align-items:center; background:#2A2A2A; border-radius:14px; padding:8px 12px; min-width:60px; border:1px solid #333333; }
.macro-pill.protein { background:rgba(127,216,58,.12); border:1.5px solid rgba(127,216,58,.35); }
.macro-val { font-family:'Plus Jakarta Sans',sans-serif; font-size:17px; font-weight:900; color:#ffffff; letter-spacing:-.01em; line-height:1; }
.macro-pill.protein .macro-val { color:#7FD83A; }
.macro-key  { font-size:10px; font-weight:700; color:#9A9A9A; text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }
.meal-photo { width:96px; height:96px; border-radius:20px; background:#2A2A2A; flex-shrink:0; display:grid; place-items:center; font-size:38px; border:1px solid #333333; }
.card-divider { height:1px; background:#2A2A2A; margin:16px 0; }
.instructions-wrap { padding:0 20px; }
.instructions-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:#9A9A9A; margin-bottom:10px; }
.instructions-list { list-style:none; display:grid; gap:8px; }
.instructions-list li { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:rgba(255,255,255,.85); }
.instr-num { width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,#7FD83A,#5EB82A); color:#000000; font-size:11px; font-weight:800; display:grid; place-items:center; flex-shrink:0; }
.why-box { margin:16px 20px 0; background:#222222; border-radius:16px; padding:14px 16px; border-left:3px solid #7FD83A; }
.why-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:#7FD83A; margin-bottom:5px; }
.why-text   { font-size:13px; color:#C9C9C9; line-height:1.55; font-weight:500; }
.pick-footer { display:flex; gap:8px; flex-wrap:wrap; padding:14px 20px; }
.tag { display:inline-flex; align-items:center; gap:5px; background:#2A2A2A; border-radius:999px; padding:5px 12px; font-size:12px; font-weight:700; color:rgba(255,255,255,.7); border:1px solid #333333; }
.tag.green { background:rgba(127,216,58,.12); color:#7FD83A; border-color:rgba(127,216,58,.3); }
.pick-actions { display:flex; gap:10px; padding:0 20px 20px; }
.btn-log { flex:1; border:0; border-radius:14px; padding:13px; background:#7FD83A; color:#000000; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:700; cursor:pointer; }
.btn-log:hover { background:#8FE84A; }
.btn-back { border:1.5px solid #2A2A2A; border-radius:14px; padding:13px 16px; background:transparent; color:#9A9A9A; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:700; cursor:pointer; flex-shrink:0; transition:.15s; }
.btn-back:hover { background:#2A2A2A; color:#fff; }
.btn-another { flex:1; border:1.5px solid #2A2A2A; border-radius:14px; padding:13px; background:transparent; color:#9A9A9A; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:700; cursor:pointer; }
.btn-another:hover { background:#2A2A2A; color:#fff; }

/* Backup cards */
.backup-card { background:rgba(255,255,255,.04); border:1px solid #2A2A2A; border-radius:22px; padding:16px 18px; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; gap:14px; cursor:pointer; transition:background .2s; animation:fadeUp .45s ease both; }
.backup-card:hover { background:rgba(255,255,255,.07); }
.backup-label  { font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; margin-bottom:5px; color:#9A9A9A; }
.backup-name   { font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; font-weight:800; letter-spacing:-.02em; line-height:1.2; margin-bottom:3px; }
.backup-place  { font-size:12px; color:#9A9A9A; margin-bottom:6px; }
.backup-macros { font-size:13px; font-weight:700; color:rgba(255,255,255,.65); }
.backup-macros span { color:#7FD83A; }
.backup-dist   { font-size:12px; color:#9A9A9A; margin-top:4px; }
.backup-photo  { width:76px; height:76px; border-radius:16px; background:#2A2A2A; flex-shrink:0; display:grid; place-items:center; font-size:28px; border:1px solid #333333; }
.filtered-card { background:rgba(255,255,255,.02); border:1px solid #2A2A2A; border-radius:16px; padding:12px 14px; margin-bottom:8px; }
.filtered-name   { font-size:14px; font-weight:700; color:#9A9A9A; }
.filtered-reason { font-size:12px; color:rgba(255,255,255,.5); margin-top:3px; }

/* Onboarding */
.ob-card { background:#1A1A1A; border:1px solid #2A2A2A; border-radius:28px; padding:24px 20px; box-shadow:0 20px 48px rgba(0,0,0,.5); margin-top:8px; animation:fadeUp .4s ease both; }
.ob-card.hero { background:#111111; border-color:rgba(127,216,58,.2); }
.step-dots { display:flex; gap:6px; margin-bottom:18px; }
.dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.15); transition:.25s; }
.dot.active { background:#7FD83A; width:22px; border-radius:4px; }
.dot.done   { background:rgba(127,216,58,.4); }
.ob-eye   { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#7FD83A; margin-bottom:8px; }
.ob-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:22px; font-weight:900; letter-spacing:-.01em; line-height:1.15; margin-bottom:4px; }
.ob-sub   { font-size:14px; color:#C9C9C9; margin-bottom:14px; }
.choice-grid { display:grid; gap:10px; margin-top:12px; }
.choice { border:1px solid #2A2A2A; border-radius:16px; padding:14px 16px; background:rgba(255,255,255,.03); cursor:pointer; font-weight:700; font-size:15px; transition:.15s; display:flex; align-items:center; gap:10px; color:white; }
.choice:hover { background:rgba(255,255,255,.07); border-color:#3A3A3A; }
.choice.selected { border-color:#7FD83A; background:rgba(127,216,58,.08); box-shadow:0 0 0 1px #7FD83A inset; }
.check-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.check-item { display:flex; align-items:center; gap:10px; border:1px solid #2A2A2A; border-radius:14px; padding:12px 14px; background:rgba(255,255,255,.03); font-weight:600; font-size:14px; cursor:pointer; color:white; }
.check-item input { width:17px; height:17px; cursor:pointer; accent-color:#7FD83A; }
.input-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.field label { display:block; font-size:13px; font-weight:700; color:#C9C9C9; margin-bottom:6px; }
.field input,.field select { width:100%; background:rgba(255,255,255,.05); color:white; border:1px solid #2A2A2A; padding:12px 14px; border-radius:14px; font-size:15px; font-family:'Plus Jakarta Sans',sans-serif; outline:none; }
.field input:focus,.field select:focus { border-color:#7FD83A; background:rgba(255,255,255,.08); }
.field select option { background:#1A1A1A; color:white; }
.field textarea { width:100%; background:rgba(255,255,255,.05); color:white; border:1px solid #2A2A2A; padding:12px 14px; border-radius:14px; font-size:14px; font-family:'Plus Jakarta Sans',sans-serif; min-height:58px; outline:none; resize:vertical; }
.field textarea:focus { border-color:#7FD83A; }
.ob-btn { width:100%; border:0; border-radius:16px; padding:15px; font-family:'Plus Jakarta Sans',sans-serif; font-size:17px; font-weight:900; letter-spacing:-.02em; background:linear-gradient(90deg,#7FD83A,#5EB82A); color:#000000; cursor:pointer; margin-top:20px; transition:.15s; box-shadow:0 12px 28px rgba(127,216,58,.28); }
.ob-btn:hover { transform:translateY(-1px); }
.ob-btn:disabled { opacity:0.55; cursor:not-allowed; box-shadow:none; transform:none; }
.ob-btn:disabled:hover { transform:none; }
.ob-btn-row { display:flex; gap:10px; margin-top:20px; }
.ob-btn-row .ob-btn { margin-top:0; flex:1; }
.ob-back-btn { border:1px solid rgba(255,255,255,.15); background:transparent; border-radius:16px; padding:15px 18px; font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:rgba(255,255,255,.55); cursor:pointer; transition:.15s; white-space:nowrap; }
.ob-back-btn:hover { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.28); color:rgba(255,255,255,.8); }
.bf-notice { margin-top:12px; background:rgba(255,209,102,.08); border:1px solid rgba(255,209,102,.25); border-radius:14px; padding:12px 14px; font-size:13px; color:rgba(255,255,255,.8); line-height:1.5; }
.bf-notice strong { color:var(--gold); }
.targets-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.target-box { background:rgba(255,255,255,.05); border:1px solid #2A2A2A; border-radius:18px; padding:16px; text-align:center; }
.target-box.hl { background:rgba(127,216,58,.08); border-color:rgba(127,216,58,.3); }
.target-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:#9A9A9A; margin-bottom:6px; }
.target-val   { font-family:'Plus Jakarta Sans',sans-serif; font-size:28px; font-weight:900; letter-spacing:-.02em; line-height:1; }
.target-box.hl .target-val { color:#7FD83A; }
.target-why { font-size:13px; color:#C9C9C9; line-height:1.55; margin-top:14px; }

/* Mission */
.mission-card { background:#1A1A1A; border:1px solid #2A2A2A; border-radius:24px; padding:20px; margin-bottom:14px; animation:fadeUp .45s .06s ease both; }
.mission-hdr   { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.mission-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); }
.mission-date  { font-size:12px; color:#9A9A9A; }
.prog-wrap { display:grid; gap:10px; }
.prog-item { background:rgba(255,255,255,.03); border:1px solid #2A2A2A; border-radius:16px; padding:12px 14px; }
.prog-item.pro { border-color:rgba(127,216,58,.28); background:rgba(127,216,58,.04); }
.prog-top  { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.prog-lw   { display:flex; align-items:center; gap:8px; }
.prog-icon { font-size:16px; }
.prog-name { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:#9A9A9A; }
.prog-item.pro .prog-name { color:#7FD83A; }
.prog-nums { font-size:18px; font-weight:800; letter-spacing:-.02em; }
.prog-left { font-size:12px; color:#9A9A9A; font-weight:700; }
.prog-bar  { height:8px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.06); }
.prog-fill { height:100%; width:0%; border-radius:999px; transition:width .6s cubic-bezier(.4,0,.2,1); }
.pro-fill  { background:linear-gradient(90deg,#7FD83A,#8FE84A); }
.cal-fill  { background:linear-gradient(90deg,#FFA94D,#FFD08A); }
.log-toggle { background:rgba(255,255,255,.06); border:1px solid #2A2A2A; border-radius:14px; padding:10px 18px; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:700; color:rgba(255,255,255,.6); cursor:pointer; margin-top:12px; box-shadow:none; width:auto; display:inline-block; }
.log-panel  { background:rgba(255,255,255,.04); border:1px solid #2A2A2A; border-radius:18px; padding:16px; margin-top:12px; }
.meal-log-item { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.meal-log-item:last-child { border-bottom:none; }
.meal-log-name { font-size:13px; font-weight:600; color:rgba(255,255,255,.85); }
.meal-log-macros { font-size:12px; color:#9A9A9A; margin-top:2px; }
.meal-log-del { background:none; border:none; color:rgba(255,255,255,.2); cursor:pointer; font-size:16px; padding:0 4px; }
.meal-log-del:hover { color:#FF6B6B; }
.log-history-btn { background:rgba(255,255,255,.04); border:1px solid #2A2A2A; border-radius:12px; padding:8px 14px; font-size:13px; font-weight:700; color:#9A9A9A; cursor:pointer; margin-top:10px; display:inline-block; }
.log-row    { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.log-actions { display:flex; gap:10px; margin-top:12px; }
.log-save   { flex:1; border:0; border-radius:13px; padding:12px; background:#7FD83A; color:#000000; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:700; cursor:pointer; }
.log-cancel { flex:1; border:1px solid #2A2A2A; border-radius:13px; padding:12px; background:transparent; color:#C9C9C9; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:700; cursor:pointer; }

/* Settings */
.settings-card { background:#1A1A1A; border:1px solid #2A2A2A; border-radius:22px; padding:18px 20px; margin-bottom:14px; }
.settings-hdr   { display:flex; justify-content:space-between; align-items:center; }
.settings-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; font-weight:800; }
.settings-toggle { background:rgba(255,255,255,.06); border:1px solid #2A2A2A; border-radius:12px; padding:7px 14px; font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:700; color:rgba(255,255,255,.6); cursor:pointer; box-shadow:none; }
.reset-link { font-size:13px; font-weight:700; color:#9A9A9A; cursor:pointer; text-decoration:underline; margin-top:10px; display:inline-block; }
.reset-link:hover { color:rgba(255,255,255,.6); }
.settings-body { background:rgba(255,255,255,.03); border:1px solid #2A2A2A; border-radius:22px; padding:20px; margin-bottom:14px; display:grid; gap:12px; }
.settings-row  { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Misc */
@keyframes fadeDown { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp   { from{opacity:0;transform:translateY(18px)}  to{opacity:1;transform:translateY(0)} }
.backup-card:nth-child(1){animation-delay:.30s} .backup-card:nth-child(2){animation-delay:.38s} .backup-card:nth-child(3){animation-delay:.46s}

/* ── Strategy cards ── */
.strategy-section { margin-top:14px; }
.strategy-section-label {
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  color:#9A9A9A; margin-bottom:8px; padding-left:2px;
}
.strategy-divider {
  height:1px; background:#2A2A2A; margin-bottom:12px;
}
.strategy-cards-grid { display:grid; gap:8px; }
.strategy-card {
  background:rgba(255,255,255,.03); border:1px solid #2A2A2A;
  border-radius:16px; padding:12px 14px; cursor:pointer; transition:background .18s;
}
.strategy-card:hover { background:rgba(255,255,255,.06); border-color:#3A3A3A; }
.strategy-card.expanded { background:rgba(255,255,255,.05); border-color:#3A3A3A; }
.strategy-card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.strategy-label-row { display:flex; align-items:center; gap:5px; margin-bottom:3px; }
.strategy-icon { font-size:13px; }
.strategy-label { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:#9A9A9A; }
.strategy-name { font-size:14px; font-weight:700; line-height:1.2; margin-bottom:5px; color:rgba(255,255,255,.9); }
.strategy-macros { display:flex; gap:8px; font-size:12px; font-weight:700; flex-wrap:wrap; }
.strategy-protein { color:#7FD83A; }
.strategy-cal { color:#C9C9C9; }
.strategy-reason { font-size:12px; color:#C9C9C9; margin-top:5px; line-height:1.45; font-style:italic; }
.strategy-chevron { color:rgba(255,255,255,.4); font-size:14px; flex-shrink:0; margin-top:2px; transition:transform .2s; }
.strategy-card.expanded .strategy-chevron { transform:rotate(180deg); color:rgba(255,255,255,.45); }
.strategy-mods { display:none; margin-top:10px; padding-top:10px; border-top:1px solid #2A2A2A; }
.strategy-card.expanded .strategy-mods { display:block; }
.strategy-mods-label { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:#9A9A9A; margin-bottom:8px; }
.strategy-mods ol { padding-left:16px; display:grid; gap:5px; margin:0; }
.strategy-mods ol li { font-size:13px; color:#ffffff; }
.strategy-log-btn { display:block; width:100%; margin-top:10px; border:1px solid #2A2A2A; border-radius:12px; padding:9px; background:transparent; color:#C9C9C9; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; transition:.15s; }
.strategy-log-btn:hover { background:rgba(255,255,255,.06); color:white; }

/* ── Macro completion celebrations ── */
.macro-done { animation: macro-pop .4s ease both; }
@keyframes macro-pop { 0%{transform:scale(1)} 50%{transform:scale(1.04)} 100%{transform:scale(1)} }
.prog-fill.done-flash { animation: done-glow 1s ease both; }
@keyframes done-glow { 0%{filter:brightness(1)} 50%{filter:brightness(1.6)} 100%{filter:brightness(1)} }
.macro-badge { display:inline-block; font-size:10px; font-weight:800; color:#7FD83A; margin-left:6px; animation:fadeUp .3s ease both; }

/* ── Post-log celebration overlay ── */
.log-celebration {
  position:fixed; inset:0; z-index:9998;
  background:#000000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px; text-align:center;
  animation:fadeIn .25s ease both;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes fadeOut { from{opacity:1} to{opacity:0} }
.celebration-emoji { font-size:72px; margin-bottom:20px; animation:bounce .6s ease both; }
@keyframes bounce { 0%{transform:scale(0)} 60%{transform:scale(1.15)} 100%{transform:scale(1)} }
.celebration-title { font-family:inherit; font-size:28px; font-weight:900; letter-spacing:-.02em; margin-bottom:8px; }
.celebration-sub { font-size:16px; color:rgba(255,255,255,.6); margin-bottom:28px; line-height:1.5; }
.celebration-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:320px; margin-bottom:28px; }
.celebration-stat { background:rgba(255,255,255,.06); border-radius:16px; padding:14px; border:1px solid #2A2A2A; }
.celebration-stat-val { font-size:22px; font-weight:900; color:#7FD83A; }
.celebration-stat-label { font-size:11px; font-weight:700; color:#9A9A9A; text-transform:uppercase; letter-spacing:.08em; margin-top:3px; }
.celebration-next { background:rgba(255,255,255,.04); border:1px solid #2A2A2A; border-radius:20px; padding:16px 20px; width:100%; max-width:320px; margin-bottom:20px; text-align:left; }
.celebration-next-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:#9A9A9A; margin-bottom:10px; }
.celebration-next-item { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; margin-bottom:6px; }
.celebration-next-item:last-child { margin-bottom:0; }
.cnext-done { color:#7FD83A; }
.cnext-todo { color:rgba(255,255,255,.65); }
.celebration-btn { border:0; border-radius:999px; padding:16px 40px; font-size:18px; font-weight:900; background:linear-gradient(90deg,#7FD83A,#5EB82A); color:#000000; cursor:pointer; font-family:inherit; }

/* ── Mission complete ── */
.mission-complete-banner { background:rgba(127,216,58,.08); border:1px solid rgba(127,216,58,.25); border-radius:20px; padding:16px 18px; margin-top:12px; display:flex; align-items:center; gap:12px; animation:fadeUp .4s ease both; }
.mc-emoji { font-size:28px; }
.mc-text { font-size:14px; font-weight:700; color:#7FD83A; }
.mc-sub { font-size:12px; color:rgba(255,255,255,.45); margin-top:2px; }

.hidden { display:none !important; }
.status-msg { font-size:13px; color:#9A9A9A; margin-top:8px; text-align:center; }
.status-msg.bad { color:#FF6B6B; }

/* ── Streak ── */
.streak-wrap { display:flex; gap:6px; margin-top:14px; flex-wrap:wrap; }
.streak-day { display:flex; flex-direction:column; align-items:center; gap:3px; }
.streak-circle { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.05); border:1.5px solid #2A2A2A; display:grid; place-items:center; font-size:14px; transition:.2s; }
.streak-circle.done { background:linear-gradient(135deg,#FFA94D,#FFD08A); border-color:#FFA94D; box-shadow:0 4px 12px rgba(255,169,77,.3); }
.streak-circle.today { background:rgba(127,216,58,.12); border-color:#7FD83A; animation:streak-pulse 2s ease-in-out infinite; }
@keyframes streak-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(127,216,58,.3)} 50%{box-shadow:0 0 0 6px rgba(127,216,58,0)} }
.streak-num { font-size:10px; font-weight:700; color:#9A9A9A; }
.streak-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.streak-title { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:#9A9A9A; }
.streak-count { font-size:13px; font-weight:800; color:var(--gold); }

@media(max-width:420px) { .input-row,.check-grid,.settings-row,.log-row { grid-template-columns:1fr } }

/* ── Exceeds-Macros Warning Modal ─────────────────────────────────────── */
.warning-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; }
.warning-modal-overlay.hidden { display:none; }
.warning-modal-card { background:#1A1A1A; border:2px solid #FFA94D; border-radius:20px; padding:28px 24px; max-width:480px; width:100%; }
.warning-modal-icon { font-size:36px; text-align:center; margin-bottom:10px; }
.warning-modal-title { font-size:20px; font-weight:800; color:#FFA94D; text-align:center; margin-bottom:10px; }
.warning-modal-body { font-size:14px; color:#FFFFFF; margin-bottom:12px; }
.warning-overages-list { list-style:none; margin-bottom:12px; display:flex; flex-direction:column; gap:8px; }
.warning-overages-list li { background:rgba(255,169,77,.08); border:1px solid rgba(255,169,77,.2); border-radius:12px; padding:10px 14px; font-size:13px; color:#FFFFFF; }
.warning-overages-list li strong { color:#FFA94D; }
.warning-modal-hint { font-size:12px; color:#9A9A9A; margin-bottom:20px; }
.warning-modal-actions { display:flex; gap:10px; }
.warning-btn-cancel { flex:1; padding:14px; background:#2A2A2A; border:1px solid #9A9A9A; color:#FFFFFF; border-radius:14px; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; }
.warning-btn-override { flex:1; padding:12px; background:#FFA94D; border:none; color:#000; border-radius:14px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; }
.warning-btn-cancel:hover { background:#3A3A3A; }
.warning-btn-override:hover { background:#FFB86C; }

/* ── Day Complete Card ─────────────────────────────────────────────────── */
.day-complete-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:9998; display:flex; align-items:center; justify-content:center; padding:20px; }
.day-complete-overlay.hidden { display:none; }
.day-complete-card { background:#1A1A1A; border:2px solid #7FD83A; border-radius:24px; padding:36px 28px; max-width:400px; width:100%; text-align:center; box-shadow:0 0 40px rgba(127,216,58,.2); }
.day-complete-check { font-size:48px; color:#7FD83A; margin-bottom:12px; font-weight:900; }
.day-complete-title { font-size:28px; font-weight:900; color:#FFFFFF; margin-bottom:4px; }
.day-complete-sub { font-size:16px; font-weight:700; color:#7FD83A; margin-bottom:20px; }
.day-complete-stats { background:rgba(127,216,58,.06); border:1px solid rgba(127,216,58,.15); border-radius:16px; padding:16px; margin-bottom:20px; display:flex; flex-direction:column; gap:8px; }
.day-complete-stat-row { display:flex; justify-content:space-between; font-size:14px; color:#C9C9C9; }
.day-complete-stat-row span:last-child { color:#7FD83A; font-weight:700; }
.day-complete-footer { font-size:14px; color:#9A9A9A; font-style:italic; }

/* ── Phase 3.16: Goal+diet soft warning card ────────────────────────────── */
.goal-diet-warning { background:#1C1C1C; border:1px solid rgba(127,216,58,.35); border-radius:22px; padding:18px 20px; margin-bottom:14px; animation:fadeUp .4s ease both; }
.gdw-title { font-size:15px; font-weight:800; color:#7FD83A; margin-bottom:8px; }
.gdw-body { font-size:13px; color:#E0E0E0; line-height:1.55; margin-bottom:10px; }
.gdw-disclaimer { font-size:11px; color:#9A9A9A; margin-bottom:14px; }
.gdw-dismiss { width:100%; padding:11px; background:#2A2A2A; border:1px solid #3A3A3A; color:#FFFFFF; border-radius:12px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:background .15s; }
.gdw-dismiss:hover { background:#3A3A3A; }

/* ── Progress chart macro toggle pills (Phase 4.2b) ── */
.chart-pill-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.chart-pill { flex:0 0 calc(33.333% - 4px); background:rgba(255,255,255,.06); border:1px solid #2A2A2A; border-radius:12px; padding:6px 10px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; color:rgba(255,255,255,.6); cursor:pointer; text-align:center; transition:background .15s,border-color .15s,color .15s; }
.chart-pill:hover { background:rgba(255,255,255,.1); color:rgba(255,255,255,.85); }
.chart-pill.active { background:rgba(127,216,58,.15); border-color:rgba(127,216,58,.5); color:#7FD83A; }

/* ── Progress chart scale toggles (Phase 4.2c) ── */
.chart-scale-row { display:flex; gap:6px; margin-bottom:14px; }
.chart-scale-btn { flex:1; background:rgba(255,255,255,.06); border:1px solid #2A2A2A; border-radius:12px; padding:7px 0; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; color:rgba(255,255,255,.5); cursor:pointer; text-align:center; transition:background .15s,border-color .15s,color .15s; }
.chart-scale-btn:hover { background:rgba(255,255,255,.1); color:rgba(255,255,255,.8); }
.chart-scale-btn.active { background:rgba(127,216,58,.15); border-color:rgba(127,216,58,.5); color:#7FD83A; }

/* ── Streak display (Phase 4.2c) ── */
.streak-count { font-size:13px; font-weight:700; color:#3de87a; margin-bottom:8px; min-height:18px; }
.streak-grid { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:14px; }

/* ── Streak tile (Patch 17 — standalone dashboard tile) ── */
.streak-tile { background:#1A1A1A; border:1px solid #2A2A2A; border-radius:24px; padding:16px 20px; margin-bottom:14px; }
.streak-tile-header { color:#3de87a; font-weight:600; font-size:14px; margin-bottom:10px; }
.streak-tile-header.empty { color:#9A9A9A; font-weight:500; }
.streak-tile-grid { display:flex; gap:6px; flex-wrap:wrap; align-items:flex-end; }
.streak-tile-day { display:flex; flex-direction:column; align-items:center; gap:3px; }
.streak-tile-square { width:32px; height:32px; border-radius:6px; border:1px solid transparent; box-sizing:border-box; }
.streak-tile-square.complete { background:rgba(61,232,122,.15); border-color:rgba(61,232,122,.35); }
.streak-tile-square.missed { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); }
.streak-tile-square.pending { background:rgba(255,209,102,.15); border-color:rgba(255,209,102,.35); }
.streak-tile-label { font-size:9px; color:#9A9A9A; }

/* ── Bar chart CSS divs (Phase 4.2c) ── */
.bars-row { display:flex; align-items:flex-end; gap:3px; height:120px; margin-bottom:6px; }
.bar-col { display:flex; flex-direction:column; align-items:center; flex:1; height:100%; }
.bar-track { flex:1; width:100%; display:flex; align-items:flex-end; background:rgba(255,255,255,.04); border-radius:4px; overflow:hidden; }
.bar-fill { width:100%; border-radius:4px 4px 0 0; }
.bar-label { font-size:9px; color:rgba(255,255,255,.35); margin-top:4px; text-align:center; white-space:nowrap; overflow:hidden; }

/* ── Year heatmap (Phase 4.2c) ── */
.heatmap-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.heatmap-grid { display:flex; gap:2px; padding-bottom:4px; }
.heatmap-week-col { display:flex; flex-direction:column; gap:2px; }
.heatmap-cell { width:11px; height:11px; border-radius:2px; }
.heatmap-future { background:rgba(255,255,255,.03) !important; border:1px solid rgba(255,255,255,.06); box-sizing:border-box; }
#streakGrid:empty { display:none; }

/* ── Auth Overlay ────────────────────────────────────────────────────────── */
.auth-overlay { position:fixed;inset:0;background:rgba(0,0,0,.88);backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:flex-end;justify-content:center; }
.auth-overlay.hidden { display:none; }
.auth-card { background:#1A1A1A;border:1px solid #2A2A2A;border-radius:28px 28px 0 0;padding:28px 24px 40px;width:100%;max-width:430px;position:relative;box-shadow:0 -20px 60px rgba(0,0,0,.6);animation:slideUp .3s ease both; }
.auth-close-btn { position:absolute;top:16px;right:16px;background:rgba(255,255,255,.08);border:none;color:rgba(255,255,255,.6);border-radius:50%;width:32px;height:32px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center; }
.auth-close-btn:hover { background:rgba(255,255,255,.14);color:#fff; }
.auth-error { background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.3);border-radius:12px;padding:10px 14px;font-size:14px;color:#FF6B6B;margin-top:10px; }
.auth-switch-link { color:#7FD83A;font-weight:700;cursor:pointer;text-decoration:underline; }
.auth-logout-link { font-size:13px;font-weight:700;color:#9A9A9A;cursor:pointer;text-decoration:underline;padding:7px 0; }
.auth-logout-link:hover { color:rgba(255,255,255,.7); }
.plan-btn { display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:16px 20px;background:transparent;border:2px solid #7FD83A;border-radius:16px;cursor:pointer;transition:background .15s; }
.plan-btn:hover { background:rgba(127,216,58,.08); }
.plan-btn:disabled { opacity:.5;cursor:not-allowed; }
.plan-price { font-size:18px;font-weight:800;color:#FFFFFF; }
.plan-sub { font-size:13px;color:rgba(255,255,255,.5);margin-top:3px; }
.landing-login-row { margin-top:14px; text-align:center; font-size:13px; color:#9A9A9A; }
.landing-login-row a { color:#7FD83A; font-weight:700; text-decoration:underline; cursor:pointer; }
.legal-links { margin-top:18px; text-align:center; font-size:12px; }
.legal-links a { color:rgba(255,255,255,.5); margin:0 8px; text-decoration:none; }
.legal-links a:hover { color:#7FD83A; }
.site-footer { text-align:center; padding:24px 16px; font-size:12px; color:rgba(255,255,255,.4); }
.site-footer a { color:rgba(255,255,255,.55); margin:0 10px; text-decoration:none; }
.site-footer a:hover { color:#7FD83A; }
.footer-copy { display:block; margin-top:8px; }
@keyframes slideUp { from{transform:translateY(60px);opacity:0} to{transform:translateY(0);opacity:1} }