/* DreamFruit design tokens — lifted from dreamfruit.pro production CSS */
:root {
  --bg: hsl(220 10% 7%);
  --bg-card: hsl(220 14% 10%);
  --bg-raised: hsl(220 14% 14%);
  --border: hsl(220 14% 18%);
  --lime: hsl(72 98% 54%);
  --lime-soft: hsla(72, 98%, 54%, 0.12);
  --lime-border: hsla(72, 98%, 54%, 0.4);
  --pink: #d6336c; /* dragonfruit accent from the badge logo */
  --pink-soft: rgba(214, 51, 108, 0.15);
  --amber: #ffb347;
  --text: hsl(210 20% 98%);
  --text-dim: hsl(218 11% 65%);
  --radius: 14px;
  font-size: 16px;
}

@font-face {
  font-family: "TT Octosquares";
  src: url("tt-octosquares.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Dark base on the root so iOS rubber-band overscroll at the top/bottom shows the
   theme colour, not a white gap. */
html {
  background: var(--bg);
}

body {
  background-color: var(--bg);
  background-image: radial-gradient(1200px 600px at 80% -10%, hsl(220 14% 12%) 0%, var(--bg) 55%);
  color: var(--text);
  font-family: "Rajdhani", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, .brand-name, .big-date {
  font-family: "TT Octosquares", "Rajdhani", sans-serif;
  font-style: italic;
  letter-spacing: 0.5px;
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: hsla(220, 12%, 8%, 0.62);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 42px; height: 42px; border-radius: 50%; }
.brand-name { display: block; font-weight: 600; font-size: 1.25rem; color: var(--lime); line-height: 1.1; }
.brand-tag { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-dim); }

.tabs { display: flex; flex: 1; justify-content: center; }
/* Liquid-glass rail: frosted, translucent, content blurs through it */
.tab-rail {
  position: relative; /* anchors the sliding .tab-glide capsule */
  overflow: hidden;   /* clip the glide + blur inside the pill (iOS smear bug) */
  isolation: isolate;
  -webkit-transform: translateZ(0);
  transform: translateZ(0); /* own compositing layer — stops iOS repainting the blur wrong */
  display: inline-flex;
  gap: 3px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 1px rgba(0, 0, 0, 0.25),
    0 8px 26px rgba(0, 0, 0, 0.4);
  flex-wrap: nowrap;
  justify-content: center;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 12px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: color 0.25s ease, transform 0.18s ease;
  position: relative;
  white-space: nowrap;
  min-width: 74px;
  z-index: 1; /* above the sliding glass capsule */
}
.tab:active { transform: scale(0.93); } /* tactile press, Apple-style */
.tab-ic { position: relative; display: inline-flex; }
.tab-ic .ic { width: 1.7rem; height: 1.7rem; }
.tab-label { font-size: 0.74rem; letter-spacing: 0.2px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--lime); }
/* The liquid-glass capsule that GLIDES between tabs (Apple Music-style). One element,
   positioned by JS (moveTabGlide); a springy ease gives the fluid overshoot feel. */
.tab-glide {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    var(--lime-soft);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.42s cubic-bezier(0.3, 1.35, 0.55, 1),
    width 0.42s cubic-bezier(0.3, 1.35, 0.55, 1),
    opacity 0.2s ease;
  will-change: transform, width;
  pointer-events: none;
  z-index: 0;
}
.tab-glide.off { opacity: 0; }

.badge {
  background: var(--lime);
  color: hsl(220 14% 10%);
  border-radius: 999px;
  font-size: 0.7rem;
  padding: 1px 7px;
  margin-left: 4px;
  vertical-align: middle;
}
/* badge sits on the tab icon in the bottom bar */
.tab-ic .badge { position: absolute; top: -6px; right: -10px; margin: 0; font-size: 0.58rem; min-width: 16px; padding: 0 4px; text-align: center; line-height: 1.45; box-shadow: 0 0 0 2px var(--bg-card); }
.hidden { display: none !important; }

/* ---------- Fixed bottom tab bar ---------- */
.topbar { justify-content: space-between; }
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: center;
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.bottom-nav .tab-rail { pointer-events: auto; max-width: calc(100% - 20px); }
/* clear space so content/footer isn't hidden behind the fixed bar */
body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.logged-out .bottom-nav { display: none !important; }

.user-area { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.user-email { color: var(--text-dim); font-size: 0.88rem; }
.user-email strong { color: var(--text); font-weight: 600; }
.studio-link { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; padding: 5px 11px; border: 1px solid var(--lime-border); border-radius: 999px; background: var(--lime-soft); }
.studio-link .ic { width: 0.9rem; height: 0.9rem; }
.studio-link:hover { border-color: var(--lime); }

/* ---------- Layout ---------- */
main { flex: 1; width: 100%; max-width: 1020px; margin: 0 auto; padding: 28px 20px 60px; }
.view { display: none; animation: fadeIn 0.25s ease; }
.view.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.hero h1 { font-size: 1.8rem; margin-bottom: 4px; }
.hero-sub { color: var(--text-dim); margin-bottom: 22px; font-size: 1.05rem; }
.view-head { margin-bottom: 18px; }
.view-head h2 { font-size: 1.55rem; margin-bottom: 4px; }
.muted { color: var(--text-dim); font-size: 0.92rem; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
/* dashboard: left column stacks Next delivery → This week's fuel; columns top-aligned */
.dash-grid { align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
}
.card-label {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-bottom: 12px;
  font-weight: 700;
}
.divider { height: 1px; background: var(--border); margin: 16px 0; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------- Banners ---------- */
.banner {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  font-size: 0.98rem;
}
.banner-warn { background: rgba(255, 179, 71, 0.1); border: 1px solid rgba(255, 179, 71, 0.4); color: var(--amber); }
/* Pick-your-own vs leave-it-to-us, offered as two equal choices */
.pkg-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 12px; }
.pkg-mode-opt { display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  padding: 11px 13px; border-radius: 12px; font: inherit; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border); }
.pkg-mode-opt strong { font-size: .92rem; display: flex; align-items: center; gap: 6px; }
.pkg-mode-opt .muted { font-size: .76rem; line-height: 1.3; }
.pkg-mode-opt:hover { border-color: var(--dim); }
.pkg-mode-opt.on { border-color: var(--lime); background: rgba(198, 255, 0, 0.08); }
.pkg-mode-opt.on strong { color: var(--lime); }
@media (max-width: 520px) { .pkg-mode { grid-template-columns: 1fr; } }

/* Out of season: still on the shelf so the range reads as the range, visibly not for
   sale. Dimmed rather than hidden — an athlete should see what's coming back. */
.addon-card.out-of-season, .pkg-pal-item.out-of-season { opacity: .42; filter: grayscale(0.85); }
.addon-card.out-of-season:hover, .pkg-pal-item.out-of-season:hover { opacity: .58; }
.addon-card.out-of-season .addon-img { filter: grayscale(1); }
.season-flag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(0,0,0,.72); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 9px; font-size: .7rem; font-weight: 700; letter-spacing: .03em;
}
.season-note { color: var(--text-dim); font-size: .86rem; font-weight: 600; }

/* Home's fruit box: one folded line, opened on demand — a 21-fruit list would
   otherwise push the rest of the card off the screen */
.box-fold { border: none; }
.box-fold-head { cursor: pointer; list-style: none; align-items: center; }
.box-fold-head::-webkit-details-marker { display: none; }
.box-fold-caret { display: inline-flex; margin-left: 10px; color: var(--muted); transition: transform .18s ease; }
.box-fold[open] .box-fold-caret { transform: rotate(90deg); }
.box-fold-body { padding-left: 14px; border-left: 2px solid var(--border); margin: 2px 0 2px 26px; }
.box-fold-item .box-item-title { font-weight: 600; }

/* Newest unread alert, surfaced on Home instead of hiding behind the bell */
.banner-alert { background: rgba(120, 160, 255, 0.08); border: 1px solid rgba(120, 160, 255, 0.35); color: var(--text);
  display: flex; align-items: flex-start; gap: 8px; }
.banner-alert .ic { flex: 0 0 auto; margin-top: 2px; color: #7ea0ff; }
.banner-alert strong { color: #9fb8ff; }
.alert-banner-acts { margin-left: auto; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.banner-x { background: none; border: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.banner-x:hover { color: var(--text); }
/* Unspent box room — an opportunity, not a warning, so it wears the brand lime */
.banner-room { background: rgba(198, 255, 0, 0.08); border: 1px solid rgba(198, 255, 0, 0.35); color: var(--text); }
.banner-room .ic { vertical-align: -3px; margin-right: 6px; color: var(--lime); }
.banner-room strong { color: var(--lime); }
.link-btn { background: none; border: none; color: var(--lime); cursor: pointer; font-family: inherit; font-weight: 700; text-decoration: underline; font-size: inherit; }

/* Consumption-driven box recommendation — a footer inside the tracker card */
.fuel-reco { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.fuel-reco.upsell .boxreco-ic { color: var(--amber); }
/* carousel when both recommendations are active (swipe / tap dots) */
.fuel-reco-carousel { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); overflow: hidden; }
.reco-track { display: flex; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.reco-slide { flex: 0 0 100%; min-width: 0; }
.reco-slide .fuel-reco { margin-top: 0; padding-top: 0; border-top: 0; }
.reco-dots { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; }
.reco-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); border: 0; padding: 0; cursor: pointer; transition: background .2s, transform .2s; }
.reco-dot:hover { background: var(--text-dim); }
.reco-dot.on { background: var(--lime); transform: scale(1.25); }
.reco-hint { margin-left: 8px; font-size: 0.68rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.box-reco { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 16px; border-radius: var(--radius); background: linear-gradient(120deg, var(--lime-soft), rgba(110, 168, 255, 0.08)); border: 1px solid var(--lime-border); }
.boxreco-ic { display: inline-flex; color: var(--lime); }
.boxreco-ic .ic { width: 1.5rem; height: 1.5rem; }
.boxreco-text { flex: 1; min-width: 180px; }
.boxreco-title { font-weight: 700; font-size: 0.96rem; }
.boxreco-sub { color: var(--text-dim); font-size: 0.85rem; line-height: 1.4; }
.boxreco-actions { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; }
.boxreco-actions .btn { white-space: nowrap; padding: 9px 16px; }

/* Box package picker (Subscriptions) */
.box-profiles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8px; }
.boxprof { text-align: left; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 14px; padding: 14px; cursor: pointer; font: inherit; color: var(--text); transition: border-color .2s, background .2s, box-shadow .2s; }
.boxprof:hover { border-color: var(--lime-border); }
.boxprof.on { border-color: var(--lime-border); background: var(--lime-soft); box-shadow: 0 0 0 2px var(--lime-border); }
.box-confirm { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.box-confirm-note { font-size: 0.92rem; }
.box-confirm-actions { display: inline-flex; align-items: center; gap: 16px; }

/* Soft tier upsell on the dashboard plan card (Professional only) */
.plan-compare { margin-top: 6px; }
.plan-compare-link { font-size: 0.85rem; font-weight: 600; }
.boxprof-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.boxprof-name { font-weight: 700; font-size: 1rem; }
.boxprof-current { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--lime); white-space: nowrap; }
.boxprof-current .ic { width: 0.9rem; height: 0.9rem; }
.boxprof-desc { color: var(--text-dim); font-size: 0.82rem; line-height: 1.4; margin-bottom: 12px; min-height: 2.3em; }
.boxprof-counts { display: flex; gap: 14px; }
.boxprof-count { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--text-dim); }
.boxprof-count img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; object-position: center 26%; }
.boxprof-count strong { color: var(--text); font-size: 1.05rem; }
.boxprof-count.focus strong { color: var(--lime); }
@media (max-width: 560px) { .box-profiles-grid { grid-template-columns: 1fr; } .boxprof-desc { min-height: 0; } }

.reco-banner {
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
  background: linear-gradient(120deg, var(--lime-soft), rgba(214, 51, 108, 0.08));
  border: 1px solid var(--lime-border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
/* Branded inline icons — inherit text colour, scale with font-size */
.ic { width: 1em; height: 1em; vertical-align: -0.16em; flex-shrink: 0; }
.reco-banner .reco-emoji { display: inline-flex; color: var(--lime); }
.reco-banner .reco-emoji .ic { width: 1.4rem; height: 1.4rem; }
.reco-banner .reco-text { flex: 1; min-width: 0; }
.reco-banner .reco-title { font-weight: 700; margin-bottom: 1px; font-size: 0.95rem; }
.reco-banner .reco-sub { color: var(--text-dim); font-size: 0.82rem; line-height: 1.35; }
.reco-banner .reco-btn { padding: 9px 16px; font-size: 0.9rem; white-space: nowrap; flex-shrink: 0; }
@media (max-width: 420px) {
  .reco-banner .reco-sub { display: none; }
}

/* Showcase: a slow rotation through the range. Crossfade only — no sliding or
   scaling, which is what made the earlier carousel look glitchy. */
.reco-showcase { cursor: default; }
.reco-showcase .reco-shot {
  width: 46px; height: 58px; border-radius: 9px; flex-shrink: 0;
  object-fit: contain; background: rgba(0, 0, 0, 0.25);
}
.reco-showcase.reco-in { animation: recoFade 0.45s ease both; }
@keyframes recoFade { from { opacity: 0.15; } to { opacity: 1; } }
.reco-dots { display: inline-flex; gap: 4px; flex-shrink: 0; }
.reco-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--border); display: block; }
.reco-dots i.on { background: var(--lime); }
@media (prefers-reduced-motion: reduce) { .reco-showcase.reco-in { animation: none; } }
@media (max-width: 420px) { .reco-dots { display: none; } }

/* ---------- Delivery card ---------- */
.big-date { font-size: 1.6rem; font-weight: 600; }
.countdown { color: var(--lime); font-weight: 700; margin: 2px 0 12px; font-size: 0.95rem; }

.tracker { display: flex; flex-direction: column; margin-bottom: 12px; }
.step { display: flex; gap: 12px; align-items: flex-start; }
.step .dotcol { display: flex; flex-direction: column; align-items: center; }
.step .dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--bg-card); flex-shrink: 0;
}
.step .line { width: 2px; height: 13px; background: var(--border); }
.step.done .dot { background: var(--lime); border-color: var(--lime); }
.step.done .line { background: var(--lime); }
.step.current .dot { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 0 4px var(--lime-soft); }
.step .step-label { font-size: 0.92rem; padding-bottom: 9px; }
.step.current .step-label { font-weight: 700; color: var(--lime); }
.step.todo .step-label { color: var(--text-dim); }

.scan-history { margin: 0 0 4px 26px; padding-left: 12px; border-left: 1px dashed var(--border); }
.scan { display: flex; gap: 10px; padding: 3px 0; font-size: 0.8rem; }
.scan-time { color: var(--text-dim); white-space: nowrap; min-width: 92px; }
.scan-desc { color: var(--text); }
.scan-loc { color: var(--text-dim); }
.scan-source { margin-top: 8px; font-size: 0.72rem; color: var(--text-dim); }
.track-paused { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.track-paused svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--text-dim); }
.track-paused div { display: flex; flex-direction: column; gap: 2px; }
.track-paused .muted { font-size: 0.85rem; }
.track-schedule { padding: 4px 2px 2px; }
.track-count { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.track-count svg { width: 18px; height: 18px; color: var(--accent, var(--lime, #a3e635)); }
.track-schedule .muted { font-size: 0.86rem; line-height: 1.5; }

.defrost-tip {
  background: var(--lime-soft);
  border: 1px solid var(--lime-border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.88rem;
}

/* ---------- Plan ---------- */
.plan-row { display: flex; align-items: center; gap: 14px; }
.plan-logo { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; }
.plan-name { font-weight: 700; font-size: 1.05rem; }
.plan-detail { color: var(--text-dim); font-size: 0.86rem; }
.plan-row .pill { margin-left: auto; }
.plan-perk {
  display: flex; align-items: center; gap: 9px;
  margin-top: 14px; padding: 10px 13px;
  background: var(--lime-soft); border: 1px solid var(--lime-border);
  border-radius: 10px; font-size: 0.88rem; color: var(--text);
}
.plan-perk .ic { width: 1.1rem; height: 1.1rem; color: var(--lime); flex-shrink: 0; }
.plan-perk strong { color: var(--lime); }
.pill {
  padding: 4px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
}
.pill.active { background: var(--lime-soft); color: var(--lime); border: 1px solid var(--lime-border); }
.pill.paused { background: rgba(255, 179, 71, 0.12); color: var(--amber); border: 1px solid rgba(255, 179, 71, 0.4); }

.box-contents { margin-bottom: 14px; }
/* Amazon order-history style rows: square thumbnail + title/subtitle */
.box-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.box-item:last-child { border-bottom: none; }
.box-thumb {
  width: 60px; height: 60px; flex-shrink: 0;
  border-radius: 8px; object-fit: cover; object-position: center 45%;
  background: var(--bg-raised); border: 1px solid var(--border);
}
.box-thumb-icon { display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.box-thumb-icon .ic { width: 1.7rem; height: 1.7rem; }
.box-item-text { flex: 1; min-width: 0; }
.box-item-title { font-weight: 700; font-size: 0.95rem; }
.box-item-sub { color: var(--text-dim); font-size: 0.84rem; margin-top: 2px; }
.box-item-logos { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.plan-mix-logo { height: 13px; width: auto; display: block; flex-shrink: 0; }
.box-item-tag { flex-shrink: 0; font-size: 0.78rem; font-weight: 700; }
.box-item-tag.addon-tag { color: var(--lime); }
.cutoff-note { font-size: 0.84rem; color: var(--amber); margin: 4px 0 12px; }

/* ---------- Phase picker ---------- */
.phase-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.phase-btn {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 14px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.phase-btn .ic { width: 1.2em; height: 1.2em; }
.phase-btn:hover { border-color: var(--lime); }
.phase-btn.selected { background: var(--lime-soft); border-color: var(--lime); color: var(--lime); }

/* ---------- Add-ons ---------- */
.cutoff-bar {
  background: var(--bg-raised);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  padding: 12px 18px;
  margin-bottom: 18px;
  font-weight: 700;
  color: var(--amber);
  font-size: 0.98rem;
}
.addon-filter-label { font-size: 0.82rem; font-weight: 600; color: var(--text); margin-bottom: 9px; }
.addon-filter-label .muted { font-weight: 400; }
.addon-filter, .history-toggle { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.history-toggle { margin-bottom: 18px; }
.filter-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.15s;
}
.filter-pill:hover { color: var(--text); border-color: var(--lime); }
.filter-pill.active { background: var(--lime-soft); color: var(--lime); border-color: var(--lime-border); }
.filter-count {
  font-size: 0.74rem;
  background: var(--bg-raised);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 1px 7px;
  font-weight: 700;
}
.filter-pill.active .filter-count { background: var(--lime); color: hsl(220 14% 10%); }

.search-wrap { position: relative; margin-bottom: 18px; }
.search-ic {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-dim); pointer-events: none;
}
/* .search-wrap prefix lifts specificity above the generic input[type=text] rule */
.search-wrap .addon-search {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px 12px 44px;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
}
.search-wrap .addon-search:focus { outline: none; border-color: var(--lime); }
.addon-search:focus + .search-ic, .search-wrap:focus-within .search-ic { color: var(--lime); }
.addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-bottom: 18px; }
/* phones: two efficient columns instead of one tall stack */
@media (max-width: 640px) {
  .addon-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .addon-card { padding: 12px; gap: 6px; }
  /* height stays auto — the aspect-ratio box keeps the whole artwork visible on a
     phone too; a fixed height here would crop it again at exactly the size that
     matters most */
  .addon-card h3 { font-size: 0.96rem; }
  .addon-card .addon-desc { font-size: 0.8rem; }
  .addon-card .addon-price { font-size: 1rem; }
}
.addon-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.addon-card.recommended { border-color: var(--lime); }
.addon-card .rec-flag {
  position: absolute; top: -10px; right: 12px;
  background: var(--lime); color: hsl(220 14% 10%);
  font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  padding: 3px 10px; border-radius: 999px;
}
.addon-card .addon-emoji { display: flex; align-items: center; color: var(--text-dim); }
.addon-card .addon-emoji .ic { width: 2.2rem; height: 2.2rem; }
/* DreamFruit posters are tall; frame a banner cropped to the fruit (which sits
   in the lower-middle of each poster). object-position is tunable per taste. */
/* The artwork is a designed card — the fruit name, the origin, the icons are all part
   of the picture. Cropping it to a short landscape strip cut the name off the bottom,
   so the box is the artwork's own portrait shape and the whole thing is shown. Two
   ratios are in circulation (bundled 493×700, Studio uploads 1080×1350); `contain`
   fits either without cutting, and the raised background fills the difference. */
.addon-card .addon-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
  background: var(--bg-raised);
}
.phase-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.phase-chip {
  font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--bg-raised); color: var(--text-dim); border: 1px solid var(--border);
}
.phase-chip.on { background: var(--lime-soft); color: var(--lime); border-color: var(--lime-border); }
.catalog-source { font-size: 0.78rem; margin-top: 4px; }
.addon-card h3 { font-size: 1.05rem; }
.addon-card h3 .variant-count {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-dim); background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 7px; vertical-align: 2px; margin-left: 4px;
}
.addon-card .addon-desc { color: var(--text-dim); font-size: 0.86rem; flex: 1; }
.addon-card .addon-price { font-weight: 800; font-size: 1.1rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.addon-price-was { font-size: 0.82rem; font-weight: 600; color: var(--text-dim); text-decoration: line-through; }
.addon-price-off {
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.5px;
  color: var(--lime); background: var(--lime-soft); border: 1px solid var(--lime-border);
  border-radius: 999px; padding: 1px 7px;
}
.variant-row { margin: 0; }
.variant-select {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.variant-select:focus { outline: none; border-color: var(--lime); }
.variant-select:hover { border-color: var(--lime); }
.addon-card .qty-row { display: flex; align-items: center; gap: 10px; }
.qty-row .qty { min-width: 24px; text-align: center; font-weight: 700; }
.qty-btn {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--bg-raised); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; font-size: 1rem; font-weight: 700;
}
.qty-btn:hover { border-color: var(--lime); }

/* Order summary: a slim basket bar that's always present once fruit is added,
   expanding to the full order only when tapped — so it never blocks shopping. */
.cart-card {
  position: sticky;
  bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  margin-top: 16px;
  z-index: 30;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.55);
  animation: cartPop 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cartPop { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.cart-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 13px 16px;
  background: none; border: 0; cursor: pointer; font: inherit; color: var(--text);
}
.cart-bar-info { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.cart-bar-info > .ic { width: 1.25rem; height: 1.25rem; color: var(--lime); flex-shrink: 0; }
.cart-bar-info strong { font-size: 1.02rem; }
.cart-bar-total { color: var(--text-dim); font-weight: 600; }
.cart-bar-cta { display: inline-flex; align-items: center; gap: 5px; color: var(--lime); font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.cart-bar-cta .chev { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.cart-card.expanded .cart-bar-cta .chev { transform: rotate(180deg); }
.cart-card.expanded .cart-bar { border-top: 1px solid var(--border); order: 2; }
.cart-details { display: none; padding: 18px 16px 4px; max-height: 56vh; overflow-y: auto; }
.cart-card.expanded { display: flex; flex-direction: column; }
/* Behind the open order: dim the page so the sheet is plainly a layer above it.
   Collapsed, the bar is a small strip and needs no scrim. */
.cart-scrim {
  position: fixed; inset: 0; z-index: 55;   /* over the bottom nav (50) too, so the
                                               whole screen recedes behind the sheet */
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: scrimIn 0.2s ease;
}
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
/* Raised and outlined while open — flush against the grid it read as the same surface */
.cart-card.expanded {
  z-index: 60;
  border-color: var(--lime);
  box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(198, 255, 0, 0.18);
}
.cart-card.expanded .cart-details { display: block; order: 1; }
#cart-lines .cart-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 0.94rem; border-bottom: 1px dashed var(--border); }
.cart-line-price { white-space: nowrap; font-weight: 600; }
/* order-level frequency segmented control */
.order-freq { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.order-freq-label { font-weight: 700; font-size: 0.92rem; }
.order-freq-opts { display: inline-flex; gap: 4px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.order-freq-btn {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-family: inherit; font-size: 0.8rem; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  transition: all 0.15s;
}
.order-freq-btn:hover { color: var(--text); }
.order-freq-btn.active { background: var(--lime); color: hsl(220 14% 10%); }
.cart-summary { padding: 4px 0 2px; }
.cart-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 0.98rem; }
.cart-row strong { font-weight: 800; }
.cart-row.cart-discount { color: var(--lime); font-weight: 600; font-size: 0.9rem; }
.cart-note { color: var(--text-dim); font-size: 0.8rem; margin-top: 6px; }
.cart-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fineprint { color: var(--text-dim); font-size: 0.78rem; margin-top: 10px; }

/* ---------- Buttons ---------- */
.btn {
  border: none;
  border-radius: 10px;
  padding: 11px 18px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: filter 0.15s, transform 0.05s;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--lime); color: hsl(220 14% 10%); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost { background: var(--bg-raised); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--lime); }
.btn-warn { background: rgba(255, 179, 71, 0.14); color: var(--amber); border: 1px solid rgba(255, 179, 71, 0.4); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Forms ---------- */
form label, .pref { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 0.9rem; font-weight: 600; }
input[type="text"], select {
  background: hsl(220 14% 14%);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.98rem;
}
input[type="text"]:focus, select:focus { outline: none; border-color: var(--lime); }
.prefs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 600px) { .prefs-grid { grid-template-columns: 1fr; } }
.toggle-row { flex-direction: row; align-items: center; justify-content: space-between; }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--lime); }

/* ---------- Choose Your Plan ---------- */
.choose-plan { margin-top: 34px; }
.choose-plan h2 { font-size: 1.9rem; margin-bottom: 4px; }
.billing-toggle { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 26px 0; }
.bt-label { color: var(--text-dim); font-weight: 600; font-size: 1.02rem; }
.bt-label.active { color: var(--text); }
.bt-label small { color: var(--text-dim); font-weight: 500; }
.switch {
  width: 52px; height: 28px; border-radius: 999px;
  background: var(--bg-raised); border: 1px solid var(--border);
  cursor: pointer; position: relative; transition: background 0.2s;
}
.switch .knob {
  position: absolute; top: 3px; left: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--text-dim); transition: all 0.2s;
}
.switch[aria-checked="true"] { background: var(--lime-soft); border-color: var(--lime-border); }
.switch[aria-checked="true"] .knob { left: 26px; background: var(--lime); }

.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.tier-card.tier-highlight { animation: tierHighlight 2.6s ease; }
@keyframes tierHighlight {
  0%, 100% { box-shadow: none; border-color: var(--border); }
  15%, 70% { box-shadow: 0 0 0 2px var(--lime-border), 0 10px 34px rgba(0,0,0,0.4); border-color: var(--lime); }
}
.tier-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  position: relative;
}
.tier-card.current { border-color: var(--lime); }
.tier-card.tier-recommended { border-color: var(--lime); box-shadow: 0 0 26px hsla(72, 98%, 54%, 0.22); }
.tier-card .current-flag,
.tier-card .tier-rec-flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--lime); color: hsl(220 14% 10%);
  font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  padding: 3px 12px; border-radius: 999px; white-space: nowrap;
}

/* Data-driven "running out" upsell banner (Plans tab) */
.plan-upsell {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(100deg, hsla(72, 98%, 54%, 0.12), var(--bg-card) 72%);
  border: 1px solid hsla(72, 98%, 54%, 0.45); border-radius: 14px;
  padding: 14px 16px; margin: 16px 0 8px;
}
.plan-upsell-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: hsla(72, 98%, 54%, 0.16); display: flex; align-items: center; justify-content: center; }
.plan-upsell-ic .ic { width: 1.2rem; height: 1.2rem; color: var(--lime); }
.plan-upsell-txt { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 3px; }
.plan-upsell-txt strong { font-size: 0.96rem; font-weight: 700; }
.plan-upsell-txt span { font-size: 0.82rem; color: var(--text-dim); line-height: 1.35; }
.plan-upsell-cta { flex-shrink: 0; }
.tier-card h3 { font-family: "TT Octosquares", "Rajdhani", sans-serif; font-style: italic; font-size: 1.35rem; font-weight: 600; }
.tier-card .tier-tagline { color: var(--lime); font-weight: 700; font-size: 0.92rem; margin-top: -6px; }
.tier-card .tier-stats { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.tier-card .tier-stat {
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; font-size: 0.8rem; color: var(--text-dim);
}
.tier-card .tier-stat strong { color: var(--text); }
.tier-card .tier-desc { color: var(--text-dim); font-size: 0.86rem; text-align: left; flex: 1; line-height: 1.45; }
/* price kept legible but no longer the hero — value (days/bottles) leads */
.tier-card .tier-price { font-size: 1.2rem; font-weight: 700; color: var(--text-dim); }
.tier-card .tier-price small { font-size: 0.8rem; color: var(--text-dim); font-weight: 500; }
/* downgrade is a quiet link, not an equal-weight button */
.tier-downgrade {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-family: inherit; font-size: 0.82rem; font-weight: 600; text-decoration: underline;
  padding: 11px 0; text-underline-offset: 3px;
}
.tier-downgrade:hover { color: var(--text); }
.tier-card.tier-lower { opacity: 0.82; }
.tier-card.tier-lower:hover { opacity: 1; }
.dg-compare { font-size: 0.95rem; line-height: 1.5; margin-bottom: 14px; }
.dg-compare strong { color: var(--lime); }

/* ---------- Invoices ---------- */
.invoice-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.invoice-table th {
  text-align: left; color: var(--text-dim); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 1.5px; padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.invoice-table td { padding: 12px 10px; border-bottom: 1px solid var(--border); }
.invoice-table tr:last-child td { border-bottom: none; }
.inv-status { color: var(--lime); font-weight: 700; }

/* ---------- Fruit order history ---------- */
.order-history { display: flex; flex-direction: column; gap: 16px; }
.order-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.order-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.order-date { font-weight: 700; font-size: 0.95rem; }
.order-status {
  flex-shrink: 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 4px 11px; border-radius: 999px;
}
.order-status.active { background: var(--lime-soft); color: var(--lime); border: 1px solid var(--lime-border); }
.order-status.scheduled { background: rgba(255, 179, 71, 0.12); color: var(--amber); border: 1px solid rgba(255, 179, 71, 0.4); }
.order-status.done { background: var(--bg-raised); color: var(--text-dim); border: 1px solid var(--border); }
.order-items { padding: 4px 0; }
.order-items .box-item { border-bottom: 1px dashed var(--border); }
.order-items .box-item:last-child { border-bottom: none; }
.order-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.order-foot strong { font-size: 1.05rem; }
.order-reorder { padding: 8px 16px; font-size: 0.85rem; }

/* ---------- Notifications ---------- */
.notif-feed { display: flex; flex-direction: column; gap: 12px; }
.notif {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.notif.unread { border-left: 3px solid var(--lime); }
.notif .notif-emoji { display: inline-flex; color: var(--lime); }
.notif .notif-emoji .ic { width: 1.4rem; height: 1.4rem; }
.notif .notif-title { font-weight: 700; margin-bottom: 2px; font-size: 1rem; }
.notif .notif-body { color: var(--text-dim); font-size: 0.9rem; }
.notif .notif-meta { margin-left: auto; text-align: right; flex-shrink: 0; }
.notif .notif-time { color: var(--text-dim); font-size: 0.78rem; }
.notif .notif-channel { display: block; font-size: 0.68rem; color: var(--lime); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

/* ---------- Stripe checkout overlay ---------- */
.sc-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(8, 6, 12, 0.72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}
.sc-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%; max-width: 400px;
  padding: 26px 24px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
.sc-merchant { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 18px; color: var(--text-dim); }
.sc-merchant img { width: 30px; height: 30px; border-radius: 50%; }
.sc-amount { font-family: "TT Octosquares", "Rajdhani", sans-serif; font-style: italic; font-size: 2.4rem; font-weight: 600; }
.sc-sub { color: var(--text-dim); font-size: 0.88rem; margin-bottom: 18px; }
.sc-lines { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 8px 0; margin-bottom: 16px; }
.sc-line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.94rem; }
.sc-line.sc-discount { color: var(--lime); font-weight: 600; }
.sc-freq { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--lime); background: var(--lime-soft); border: 1px solid var(--lime-border); border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.sc-recurring { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--text-dim); margin: -6px 0 14px; }
.sc-recurring .ic { width: 1rem; height: 1rem; color: var(--lime); flex-shrink: 0; }
.break-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; }
.break-cal {
  background: var(--bg-raised, rgba(255,255,255,0.04)); border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 12px; padding: 12px 12px 14px; margin-bottom: 16px;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-title { font-weight: 600; font-size: 0.95rem; }
.cal-nav {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: transparent; color: var(--text); font-size: 1.2rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.cal-nav:hover:not(:disabled) { border-color: var(--lime); color: var(--lime); }
.cal-nav:disabled { opacity: 0.3; cursor: default; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.cal-dow-c { text-align: center; font-size: 0.68rem; letter-spacing: 0.04em; color: var(--text-dim); font-weight: 600; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-empty { aspect-ratio: 1; }
.cal-day {
  aspect-ratio: 1; border: none; border-radius: 8px; background: transparent; color: var(--text);
  font: inherit; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.cal-day:hover:not(:disabled):not(.cal-sel) { background: rgba(255,255,255,0.08); }
.cal-day:disabled { color: var(--text-dim); opacity: 0.3; cursor: default; }
.cal-sel { background: var(--lime); color: #0d0a14; font-weight: 700; }
.cal-sel:hover { background: var(--lime); }
.sc-pay-to { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 16px; }
.sc-modal .btn { margin-bottom: 10px; }
.track-eta { font-size: 0.95rem; color: var(--text-dim); margin-bottom: 16px; }
.track-eta strong { color: var(--text); }
.sc-modal .scan-history { margin-top: 4px; }
.track-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; }
.track-btn .ic { width: 1rem; height: 1rem; }
/* condensed Next delivery: info on the left, Track order button on the right */
.next-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; }
.next-card .next-info { min-width: 0; }
.next-card .card-label { margin-bottom: 4px; }
.next-card .big-date { font-size: 1.3rem; line-height: 1.1; }
.next-card .countdown { margin: 3px 0 0; font-size: 0.84rem; }
.next-card .track-btn { margin-top: 0; flex-shrink: 0; padding: 9px 15px; }
.sc-demo-note { font-size: 0.74rem; color: var(--amber); margin: 6px 0 14px; line-height: 1.45; }
.sc-demo-note code { background: var(--bg-raised); padding: 1px 5px; border-radius: 4px; font-size: 0.95em; }
.sc-powered { text-align: center; font-size: 0.78rem; color: var(--text-dim); }

/* ---------- Consumption tracker (Cal AI-style) ---------- */
.ring-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ring-wrap svg { display: block; }
.ring-bg { stroke: var(--bg-raised); }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1; }

.fuel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fuel-head .card-label { margin: 0; }
.fuel-head-actions { display: inline-flex; align-items: center; gap: 8px; }
.fuel-edit { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-raised); color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.fuel-edit:hover { border-color: var(--lime-border); color: var(--lime); }
.fuel-edit .ic { width: 1rem; height: 1rem; }
.box-total { font-size: 0.92rem; color: var(--text-dim); margin: 4px 0 16px; }
.box-total strong { color: var(--text); font-size: 1.05rem; }
.box-total.off strong { color: var(--amber); }
.fuel-streak { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 0.95rem; color: var(--lime); background: var(--lime-soft); border: 1px solid var(--lime-border); border-radius: 999px; padding: 4px 12px; }
.fuel-streak .ic { width: 1rem; height: 1rem; }

.fuel-today-logo { height: 23px; width: auto; display: block; margin-bottom: 8px; }

/* Fixed 7-day window — no horizontal scroll, so it can't fight the page swipe. */
.fuel-strip { display: flex; gap: 8px; margin-bottom: 16px; }
.fday { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.fday-wk { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); }
.fday .ring-center span { font-size: 0.82rem; font-weight: 600; color: var(--text-dim); }
.fday .ring-center .ic { width: 0.95rem; height: 0.95rem; color: var(--lime); }
.fday.today { position: relative; }
.fday.today .fday-wk { color: var(--text); font-weight: 700; }
.fday.today .ring-wrap { background: var(--bg-raised); border-radius: 50%; box-shadow: 0 0 0 2px var(--lime-border); }
.fday.today .ring-center span { color: var(--text); }
.fday.done .ring-center span { color: var(--lime); }
.fday.future { opacity: 0.4; }
/* tappable days (backfill) */
button.fday { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
button.fday:hover .ring-wrap, button.fday:focus-visible .ring-wrap { box-shadow: 0 0 0 2px var(--lime-border); border-radius: 50%; }

/* Backfill sheet (reuses the shared modal) */
.day-log-hint { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 14px; }
.day-log-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.day-log-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; font: inherit; color: var(--text); text-align: left; transition: background .15s, border-color .15s; }
.day-log-row:hover { border-color: var(--lime-border); }
.day-log-row.on { background: var(--lime-soft); border-color: var(--lime-border); }
.day-log-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; object-position: center 24%; flex-shrink: 0; }
.day-log-name { font-weight: 700; flex: 1; display: flex; flex-direction: column; }
.day-log-allow { font-size: 0.72rem; color: var(--text-dim); font-weight: 600; }
.day-log-check { display: inline-flex; align-items: center; gap: 4px; font-size: 0.76rem; font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.day-log-row.on .day-log-check { color: var(--lime); }
.day-log-check .ic { width: 1rem; height: 1rem; }
.day-log-step { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.day-log-c { min-width: 16px; text-align: center; font-weight: 800; font-size: 1.05rem; }
.qbtn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-size: 1.2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qbtn:hover:not(:disabled) { border-color: var(--lime-border); color: var(--lime); }
.qbtn:disabled { opacity: 0.35; cursor: default; }

.fuel-today { display: flex; align-items: center; gap: 16px; padding: 2px 0 14px; }
.fuel-big-num { font-family: "TT Octosquares", "Rajdhani", sans-serif; font-style: italic; font-weight: 700; font-size: 1.9rem; color: var(--text); }
.fuel-big-num span { font-size: 1.1rem; font-style: normal; color: var(--text-dim); font-weight: 600; }
.fuel-big-cap { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin-top: 4px; }
.fuel-today-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; }
.fuel-today-sub { font-size: 0.88rem; color: var(--text-dim); line-height: 1.4; }

.fuel-prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 86%; margin: 0 auto; }
.fuel-prod { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 5px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color .2s, background .2s, transform .1s, box-shadow .2s; font: inherit; }
.fuel-prod:hover { border-color: var(--lime-border); }
.fuel-prod:active { transform: scale(0.97); }
.fuel-prod.on { background: var(--lime-soft); border-color: var(--lime-border); box-shadow: 0 0 0 1px var(--lime-border), 0 6px 18px rgba(0,0,0,0.35); }
.fuel-poster-wrap { position: relative; width: 100%; }
/* condensed: a short cropped thumbnail (wordmark + bottle) instead of the full poster */
.fuel-poster { width: 100%; height: auto; aspect-ratio: 700 / 993; display: block; border-radius: 8px; transition: opacity .2s; cursor: pointer; }
.fuel-poster:active { transform: scale(0.97); }
.fuel-prod:not(.on) .fuel-poster { opacity: 0.72; }
.fuel-check { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: #0b0d07; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.45); }
.fuel-check .ic { width: 14px; height: 14px; }
.fuel-prod.on .fuel-check { display: flex; }
/* count + remove for per-bottle allowances */
.fuel-dec { position: absolute; top: 5px; left: 5px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border); background: rgba(8,6,12,0.78); color: var(--text); font-size: 1.15rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.fuel-dec:hover { border-color: var(--lime-border); color: var(--lime); }
.fuel-prod-count { font-weight: 800; font-size: 1.05rem; }
.fuel-prod-count span { color: var(--text-dim); font-weight: 600; font-size: 0.8rem; }
.fuel-prod.on .fuel-prod-count { color: var(--lime); }
.fuel-prod-bar { width: 100%; height: 5px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.fuel-prod-bar span { display: block; height: 100%; background: var(--lime); border-radius: 999px; transition: width .3s ease; }
/* today's box of 3 (any mix) */
.fuel-qty { position: absolute; top: 5px; right: 5px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--lime); color: #0b0d07; font-weight: 800; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.45); }
.fuel-poster.dim { opacity: 0.4; }
/* Today's pips, folded into the ring block — the standalone "Today's box" bar told
   the same story a third time in its own boxed row */
.fuel-today-line { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.ftb-pips { display: inline-flex; gap: 5px; }
.ftb-pip { width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); transition: background .2s; }
.ftb-pip.on { background: var(--lime); border-color: var(--lime); }
.ftb-status { font-weight: 700; font-size: 0.82rem; color: var(--text-dim); display: inline-flex; align-items: center; gap: 5px; }
.fuel-today-line.done .ftb-status { color: var(--lime); }
.ftb-status .ic { width: 0.95rem; height: 0.95rem; }
/* the week's payoff: the whole ring block glows once the box is fully logged */
.fuel-today.week-done { background: var(--lime-soft); border: 1px solid var(--lime-border);
  border-radius: 14px; padding: 10px 12px 12px; margin-bottom: 12px; }
.fuel-today.week-done .fuel-today-title { color: var(--lime); }

/* The fuel score, visible on page one — and the tap into the profile page */
/* The score, directly under the ring — cause above, effect below. Deliberately LOWER
   contrast and shorter than the ring block: two hero numbers on one card and the
   athlete stops knowing which one is theirs. */
.fuel-score-row { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 8px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-raised); cursor: pointer; font: inherit; text-align: left;
  transition: border-color .2s ease, background .2s ease; }
.fuel-score-row:hover { border-color: var(--lime-border); }
.fsr-radar { flex: none; width: 66px; height: 66px; display: block; }
.fsr-radar .fp-radar { width: 100%; height: 100%; }
/* scaled to ~0.63, so strokes need thickening or the chart reads as a faint smudge
   instead of a shape — the shape is the point of keeping it here */
.fp-radar.mini .fp-grid { stroke-width: 1.6; }
.fp-radar.mini .fp-spoke { stroke-width: 1.4; }
.fp-radar.mini .fp-area { stroke-width: 2.6; fill: hsla(72, 98%, 54%, 0.3); }
.fsr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.fsr-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.fsr-top b { font-size: 1.32rem; font-weight: 800; color: var(--lime); line-height: 1;
  font-variant-numeric: tabular-nums; }
.fsr-top em { font-style: normal; font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  color: var(--text); }
.fsr-cap { font-size: .66rem; color: var(--text-dim); letter-spacing: .02em; margin-left: auto; }
.fuel-score-row .fp-tierbar { display: flex; align-items: center; gap: 8px; margin: 0; }
.fuel-score-row .fp-tierbar-lbl { font-size: .68rem; }
.fsr-chev { flex: none; color: var(--text-dim); display: flex; }
.fsr-chev .ic { width: 1rem; height: 1rem; }
/* mini radar: no labels, so it fills its box rather than reserving label margins */
.fp-radar.mini { overflow: visible; }

/* process fact, not a health claim — cold pressing is a genuine differentiator and the
   reason the enzyme/polyphenol story holds up at all */
.fp-process { display: flex; align-items: flex-start; gap: 6px; margin: -2px 0 10px;
  font-size: .7rem; line-height: 1.5; color: var(--text-dim); }
.fp-process .ic { width: .85rem; height: .85rem; flex: none; margin-top: 2px; color: var(--lime); }

/* the estimate note reads as a formal disclaimer, not a passing footnote */
.fp-disc { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--border); font-size: .58rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim); vertical-align: 1px; }

/* quiet "talk to us" under a plan's Subscribe button — available, never in the way */
.tier-ask { display: block; width: 100%; margin-top: 7px; padding: 6px; background: none;
  border: 0; font: inherit; font-size: .74rem; font-weight: 600; color: var(--text-dim);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tier-ask:hover { color: var(--lime); }

/* Guest "start your fuel" block, in place of This week's box */
.guest-box-lead { font-size: .84rem; line-height: 1.55; color: var(--text-dim); margin: 4px 0 12px; }
#guest-box-block .btn-block + .btn-block { margin-top: 8px; }

/* Prospect panel — stands in for billing/address cards when there's no subscription */
.prospect-card { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.prospect-card .prospect-lead { font-size: .92rem; margin: 0; }
.prospect-card .muted { font-size: .82rem; margin: 0; }
.prospect-card .btn { margin-top: 4px; }

/* An image that hasn't arrived should read as "loading", never as a hole in the
   layout. A faint shimmer sits behind every img; the image paints on top of it and
   .is-loaded switches it off, so a real gap only ever looks intentional. */
img { background-color: hsla(0,0%,100%,.035); }
img.is-loaded, img[src$=".svg"] { background-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  img:not(.is-loaded) { animation: imgShimmer 1.4s ease-in-out infinite; }
}
@keyframes imgShimmer { 0%, 100% { background-color: hsla(0,0%,100%,.03); }
                        50% { background-color: hsla(0,0%,100%,.075); } }

/* Locked fuel system — the real card frosted behind glass, the unlock pitch on top.
   The point is that it's visibly REAL and just out of reach, not a greyed-out stub. */
.fuel-card.fuel-locked { position: relative; overflow: hidden; }
.fuel-card.fuel-locked .fuel-pager,
.fuel-card.fuel-locked .fuel-dots { filter: blur(4px) saturate(.75); pointer-events: none; user-select: none; }
.fuel-lock-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center;
  justify-content: center; padding: 22px; text-align: center;
  background: linear-gradient(180deg, hsla(220,15%,8%,.25), hsla(220,15%,8%,.78)); border-radius: inherit; }
.fuel-lock-inner { max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.fuel-lock-badge { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: var(--lime); background: var(--lime-soft);
  border: 1px solid var(--lime-border); }
.fuel-lock-badge .ic { width: 1.3rem; height: 1.3rem; }
.fuel-lock-inner strong { font-size: 1.06rem; letter-spacing: .02em; }
.fuel-lock-inner p { font-size: .8rem; line-height: 1.55; color: var(--text-dim); margin: 0; }

/* Next match — the club schedule beside the delivery card, FIFA-calendar spirit */
.match-card .match-line { display: flex; align-items: center; gap: 9px; margin: 4px 0 2px; }
.match-mono { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: .78rem; font-weight: 800;
  color: var(--lime); background: var(--lime-soft); border: 1px solid var(--lime-border); }
.match-opp { font-size: 1.14rem; font-weight: 800; letter-spacing: .01em; }
.match-ha { font-size: .58rem; font-weight: 800; letter-spacing: .1em; padding: 2px 7px;
  border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); }
.pkg-delivery-note { font-size: .78rem; color: var(--text-dim); margin: 6px 0 0; }
/* Always-there way to reach a human. Quiet by design — the concierge is no longer the
   lead route to buying, it's the safety net beside it. */
.help-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; margin-right: 4px;
  border-radius: 999px; border: 1px solid var(--border); background: transparent;
  color: var(--text-dim); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: color .18s ease, border-color .18s ease; }
.help-btn:hover { color: var(--lime); border-color: var(--lime-border); }
.help-btn .ic { width: .95rem; height: .95rem; }
@media (max-width: 560px) { .help-btn-txt { display: none; } .help-btn { padding: 5px 8px; } }

/* the free-delivery hook — a quiet inline nudge at the moment the fee is charged,
   never a banner. It's a concrete benefit, so it only needs stating once per place. */
.cart-free-hint { font-size: .72rem; color: var(--lime); text-decoration: underline;
  text-underline-offset: 2px; padding: 0; margin-left: 4px; }

.cart-free { color: var(--lime); font-size: .82rem; }

/* A live fruit package should announce itself the way the DragonAid plan card does —
   a member glancing at the fork had no signal that one of these two is already theirs. */
.addon-fork-opt.is-active { border-color: var(--lime-border); box-shadow: 0 0 0 1px var(--lime-border) inset; }
.addon-fork-opt { position: relative; }
.fork-status { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex;
  align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #0c0e10; background: var(--lime); }
.fork-status .ic { width: .7rem; height: .7rem; stroke-width: 3.4; }

/* the matchday protocol line — fixture list translated into fuelling */
.md-line { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; padding: 9px 12px;
  border-radius: 11px; border: 1px solid var(--lime-border); background: var(--lime-soft);
  font-size: .8rem; line-height: 1.45; }
.md-line strong { color: var(--lime); }
.md-line.hit { border-style: solid; }
.md-ball { flex: none; }

/* matchday marker on the week strip — opponent monogram under the day ring */
.fday { position: relative; }
.fday-md { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  font-size: .52rem; font-weight: 800; letter-spacing: .04em; padding: 1px 5px;
  border-radius: 6px; color: #0c0e10; background: var(--lime); white-space: nowrap; }
.fday.matchday .fday-wk { color: var(--lime); }
/* a played match stays on the calendar — it's a record of the week, not a countdown */
.fday-md.played { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
.fday.md-played .fday-wk { color: var(--text-dim); }

/* contribution framing over the radar — EFSA's verb, so no axis reads as a promise */
.fp-contrib-cap { text-align: center; font-size: .66rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-dim); margin: 2px 0 -6px; }
/* the exact authorised claim each shorthand abbreviates */
.fp-arow-claim { font-size: .66rem; color: var(--text-dim); line-height: 1.45; margin: -4px 0 8px; }
.fp-arow-claim small { opacity: .75; }

/* Fuel progress — the score's history as a line, matchdays ringed */
.fp-trend { margin-top: 14px; }
/* touch-action none is what stops a horizontal scrub also swiping the fuel pager */
.fp-trend-svg { width: 100%; height: auto; display: block; margin-top: 4px; touch-action: none; cursor: crosshair; }
.fp-scrub-line { stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 2 3; }
.fp-tr-dot.scrubbed { r: 4.5; }
.fp-tr-md.scrubbed { stroke-width: 3; }
.fp-scrub-out { font-size: .74rem; line-height: 1.5; min-height: 1.2em; margin-top: 6px; }
.fp-scrub-out .fp-scrub-score { color: var(--lime); font-size: .9rem; }
.fp-scrub-out em { font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .06em; color: var(--text-dim); }
.fp-scrub-md { color: var(--amber, #ffb347); }
.fp-tr-line { fill: none; stroke: var(--lime); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fp-tr-dot { fill: var(--lime); }
.fp-tr-md { fill: none; stroke: var(--amber, #ffb347); stroke-width: 2; }
.fp-tr-grid { stroke: var(--border); stroke-width: .5; stroke-dasharray: 3 4; }
.fp-trend-x { display: flex; align-items: center; justify-content: space-between; font-size: .66rem; color: var(--text-dim); margin-top: 2px; }
.fp-trend-ranges { display: inline-flex; gap: 4px; }
.fp-range { font: inherit; font-size: .66rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text-dim); cursor: pointer; }
.fp-range.on { color: var(--lime); border-color: var(--lime-border); background: var(--lime-soft); }
.fp-deltas { display: flex; gap: 8px; margin-top: 8px; }
.fp-delta { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 4px; border-radius: 10px; background: var(--bg-raised); font-size: .68rem; color: var(--text-dim); }
.fp-delta b { font-size: .95rem; color: var(--text); font-variant-numeric: tabular-nums; }
.fp-delta b.up { color: var(--lime); }
.fp-delta b.down { color: var(--amber, #ffb347); }
.fp-trend-empty { font-size: .78rem; }

/* Routine — the day in training windows (Morning / Pre-training / Recovery) */
.fp-routine { display: flex; gap: 7px; margin-top: 10px; }
.fp-win { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 4px; border-radius: 10px; border: 1px dashed var(--border);
  font-size: .7rem; font-weight: 700; color: var(--text-dim); letter-spacing: .02em; white-space: nowrap; }
.fp-win.on { border-style: solid; border-color: var(--lime-border); background: var(--lime-soft); color: var(--lime); }
.fp-win .ic { width: .8rem; height: .8rem; }
.fp-win b { font-weight: 800; font-variant-numeric: tabular-nums; }
/* science rows carry the real nutrient name beside the performance label */
.fp-arow-name small { display: block; font-size: .62rem; font-weight: 400; color: var(--text-dim); }

/* The full set is reachable on drinks alone — said plainly, so the fruit block below
   never reads as "the juice is the lesser half" */
.fp-powers-note { font-size: .74rem; line-height: 1.5; margin-top: 8px; }

/* From your fruit box — the box's contribution, deliberately apart from the earned
   profile above it */
.fp-fruitbox { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--border);
  border-radius: 14px; background: var(--bg-raised); }
.fp-fruitbox .fp-chead { margin: 0 0 6px; }
.fp-fruit-what { font-size: .76rem; line-height: 1.5; margin-bottom: 7px; }
.fp-fruit-fibre { display: flex; align-items: center; gap: 6px; font-size: .84rem; margin-bottom: 8px; }
.fp-fruit-fibre .ic { width: .95rem; height: .95rem; color: var(--lime); }
.fp-fruit-powers { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-badge.box { cursor: default; color: var(--text); border-style: dashed; background: transparent; }

/* The fuel record — lifetime numbers under the live gauge, so the days visibly add
   up to something. This is the strip that makes the page worth coming back to. */
.fp-record { display: flex; gap: 8px; margin: 10px 0 12px; }
.fp-rec-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 9px 6px 8px; border-radius: 12px; background: var(--bg-raised); border: 1px solid var(--border); }
.fp-rec-num { font-weight: 800; font-size: 1.15rem; color: var(--lime); font-variant-numeric: tabular-nums; }
.fp-rec-num small { font-size: .75rem; color: var(--text-dim); font-weight: 700; }
.fp-rec-lbl { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }

/* Today's intake — vertical rows (the user's preference), newest first, in a
   fixed-height scroll area so logging never changes the card's height */
.fuel-intake { margin-bottom: 12px; }
.fintake-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 7px; }
.fintake-label .ic { width: 0.9rem; height: 0.9rem; }
.fintake-list {
  display: flex; flex-direction: column; gap: 5px;
  height: 123px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; scrollbar-width: thin;
}
.fintake-list::-webkit-scrollbar { width: 4px; }
.fintake-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.fintake-list.empty { align-items: center; justify-content: center; gap: 8px; flex-direction: row; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--border); background: var(--bg-raised); color: var(--text-dim); font-size: 0.8rem; text-align: center; overflow: hidden; }
.fintake-list.empty .ic { width: 1rem; height: 1rem; flex-shrink: 0; }
.fintake-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--bg-raised); border: 1px solid var(--border); }
.fintake-logo { height: 15px; width: auto; display: block; flex-shrink: 0; }
.fintake-time { margin-left: auto; font-size: 0.85rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* "Fully Powered Up" celebration when a day's box is completed */
.fuel-card { position: relative; overflow: hidden; }
.fuel-powered { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 6;
  background: radial-gradient(circle at center, rgba(9,7,13,0.82), rgba(9,7,13,0.95));
  -webkit-backdrop-filter: blur(4px) saturate(70%); backdrop-filter: blur(4px) saturate(70%);
  animation: poweredFade 1.7s ease forwards; }
.fuel-powered-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--lime); animation: poweredPop 0.6s cubic-bezier(.22,1,.36,1); }
.fuel-powered-inner .ic { width: 3.4rem; height: 3.4rem; fill: hsla(72,98%,54%,0.35); filter: drop-shadow(0 0 18px hsla(72,98%,54%,0.95)); }
.fuel-powered-inner span { font-family: "TT Octosquares","Rajdhani",sans-serif; font-style: italic; font-weight: 700; font-size: 1.45rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--lime); text-shadow: 0 0 22px hsla(72,98%,54%,0.85), 0 2px 6px rgba(0,0,0,0.6); }
@keyframes poweredPop { 0% { transform: scale(.55); opacity: 0; } 55% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes poweredFade { 0% { opacity: 0; } 12% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 480px) {
  .fuel-today { gap: 12px; padding-bottom: 12px; }
  .fuel-big-num { font-size: 1.9rem; }
  .fuel-strip { margin-bottom: 12px; }
}

/* ---------- Milestones / rewards ---------- */
.fuel-streak { cursor: pointer; font: inherit; line-height: 1; }
.fuel-streak:hover { background: var(--lime-border); }
.fuel-streak .ic:last-child { width: 0.92rem; height: 0.92rem; opacity: 0.8; }

.ms-overlay { position: fixed; inset: 0; z-index: 200; background: var(--bg); overflow-y: auto; animation: fadeIn .2s ease; }
body.ms-open { overflow: hidden; }
.ms-sheet { max-width: 760px; margin: 0 auto; padding: 18px 18px 60px; }
.ms-topbar { display: flex; align-items: center; gap: 14px; padding: 8px 0 18px; position: sticky; top: 0; background: var(--bg); z-index: 2; }
.ms-topbar h2 { font-size: 1.9rem; margin: 0; }
.ms-close { width: 42px; height: 42px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); }
.ms-close:hover { border-color: var(--lime-border); }
.ms-close .ic { width: 1.25rem; height: 1.25rem; }

.ms-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: center; margin: 6px 0 18px; }
.ms-hero-label { font-weight: 700; font-size: 1.05rem; margin-top: 8px; }
.ms-flame { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ms-flame .ic { width: 92px; height: 92px; color: var(--amber); fill: rgba(255,179,71,0.18); }
.ms-flame span { position: absolute; bottom: 8px; font-family: "TT Octosquares","Rajdhani",sans-serif; font-style: italic; font-weight: 700; font-size: 1.6rem; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.ms-octagon { width: 92px; height: 92px; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-family: "TT Octosquares","Rajdhani",sans-serif; font-style: italic; font-weight: 700; font-size: 1.8rem; color: var(--bg); background: linear-gradient(150deg, hsl(72 98% 64%), hsl(72 98% 44%)); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); box-shadow: 0 8px 22px rgba(0,0,0,0.4); }

.ms-stat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
.ms-stat-card { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.ms-stat-card > .ic { width: 1.7rem; height: 1.7rem; color: var(--amber); flex-shrink: 0; }
.ms-stat-card strong { display: block; font-size: 1.05rem; }
.ms-stat-card span { color: var(--text-dim); font-size: 0.84rem; }
.ms-mini-oct { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; color: var(--bg); background: linear-gradient(150deg, hsl(72 98% 64%), hsl(72 98% 44%)); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }

.ms-prog { height: 6px; border-radius: 999px; background: var(--bg-raised); overflow: hidden; margin-top: 8px; width: 100%; }
.ms-prog span { display: block; height: 100%; background: var(--lime); border-radius: 999px; }
.ms-prog-wide { margin-top: 6px; }

.ms-section-label { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin: 6px 2px 12px; }

/* Swipeable fuel-tracker pages (week tracker ⇆ heat map) */
.fuel-pager { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; align-items: flex-start; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.fuel-pager::-webkit-scrollbar { display: none; }
/* scroll-snap-stop stops a quick flick carrying THROUGH a page and rubber-banding
   back — that overshoot is what made the swipe feel loose. */
.fuel-page { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.fuel-page-back { width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--border); background: var(--bg-raised); color: var(--text-dim); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-right: 10px; }
.fuel-page-back:hover { border-color: var(--lime-border); color: var(--text); }
.fuel-page-back .ic { width: 1rem; height: 1rem; }
.fuel-dots { display: flex; align-items: center; gap: 7px; justify-content: center; margin-top: 14px; }
.fuel-dot { width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; background: var(--border); cursor: pointer; transition: background 0.15s, width 0.15s; }
.fuel-dot.on { background: var(--lime); width: 18px; border-radius: 4px; }
.fuel-dots-hint { font-size: 0.68rem; color: var(--text-dim); margin-left: 8px; transition: opacity 0.2s; }

/* Fuelling heat map */
.heat { margin-bottom: 4px; }
.heat-panel {
  background: radial-gradient(130% 120% at 50% 0%, hsla(72, 98%, 54%, 0.07), rgba(7, 6, 10, 0) 62%);
  border: 1px solid var(--border); border-radius: 16px; padding: 16px 16px 13px;
}
.heat-grid { display: grid; grid-template-columns: 64px repeat(7, 1fr); gap: 5px; align-items: center; max-width: 372px; margin: 0 auto; }
.heat-dow { text-align: center; font-size: 0.64rem; font-weight: 600; color: var(--text-dim); }
.heat-band { font-size: 0.64rem; font-weight: 600; color: var(--text-dim); text-align: right; padding-right: 5px; white-space: nowrap; }
.heat-corner { width: 64px; }
.heat-cell {
  aspect-ratio: 1; border-radius: 6px; opacity: 1;
  animation: heatPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
@keyframes heatPop { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: scale(1); } }
.heat-cell.empty { background: rgba(255, 255, 255, 0.035); border: 1px solid var(--border); }
.heat-cell.hot { box-shadow: 0 0 10px hsla(72, 98%, 54%, 0.55); }
.heat-cell.peak { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92), 0 0 16px hsla(72, 98%, 54%, 0.75); }
.heat-cell:hover { transform: scale(1.16); box-shadow: 0 0 14px hsla(72, 98%, 54%, 0.8); position: relative; z-index: 2; }
.heat-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 0.68rem; color: var(--text-dim); margin-top: 14px; }
.heat-legend .heat-cell { width: 13px; height: 13px; aspect-ratio: auto; border-radius: 3px; animation: none; }
.heat-legend .heat-cell:hover { transform: none; box-shadow: none; }
.heat-insight { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 11px 13px; background: linear-gradient(100deg, hsla(72, 98%, 54%, 0.08), var(--bg-raised) 70%); border: 1px solid hsla(72, 98%, 54%, 0.3); border-radius: 12px; font-size: 0.82rem; color: var(--text-dim); }
.heat-insight .ic { width: 1.05rem; height: 1.05rem; color: var(--lime); flex-shrink: 0; }
.heat-insight strong { color: var(--text); }
.heat-empty { font-size: 0.84rem; margin-bottom: 22px; }

.ms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ms-badge { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 16px 10px 14px; text-align: center; }
.ms-emblem { position: relative; width: 76px; height: 84px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.ms-emblem .ic { width: 2rem; height: 2rem; }
.ms-emblem-num { position: absolute; bottom: 12px; font-family: "TT Octosquares","Rajdhani",sans-serif; font-style: italic; font-weight: 700; font-size: 0.86rem; }
.ms-badge-name { font-weight: 700; font-size: 0.96rem; }
.ms-badge-req { font-size: 0.78rem; color: var(--text-dim); margin-top: 2px; min-height: 2.1em; }
.ms-earned-tag { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 0.74rem; font-weight: 700; color: var(--lime); text-transform: uppercase; letter-spacing: 0.5px; }
.ms-earned-tag .ic { width: 0.85rem; height: 0.85rem; }

/* locked */
.ms-badge.locked .ms-emblem { background: var(--bg-raised); color: hsl(218 11% 40%); }
.ms-badge.locked .ms-emblem-num { color: hsl(218 11% 45%); }
.ms-badge.locked .ms-badge-name { color: var(--text-dim); }
/* earned tiers */
.ms-badge.earned .ms-emblem { color: #1a1205; box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
.ms-badge.earned .ms-emblem-num { color: #1a1205; }
.tier-bronze .ms-emblem { background: linear-gradient(150deg, #e29a5a, #a4632c); }
.tier-silver .ms-emblem { background: linear-gradient(150deg, #e8edf2, #aeb6bf); }
.tier-gold .ms-emblem   { background: linear-gradient(150deg, #ffe07a, #e0a92e); }
.tier-elite .ms-emblem  { background: linear-gradient(150deg, hsl(72 98% 70%), hsl(72 98% 42%)); }

@media (max-width: 560px) {
  .ms-grid { grid-template-columns: repeat(2, 1fr); }
  .ms-topbar h2 { font-size: 1.5rem; }
}

/* ---------- Toast & footer ---------- */
/* ---------- DragonAid Wrapped ---------- */
.wr-launch {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: linear-gradient(110deg, rgba(13,10,20,0.92), rgba(20,40,12,0.92));
  border: 1px solid hsla(72, 98%, 54%, 0.45); border-radius: 14px;
  padding: 10px 12px; margin-bottom: 16px; cursor: pointer; position: relative;
  box-shadow: 0 0 24px hsla(72, 98%, 54%, 0.12); animation: fadeIn 0.3s ease;
}
.wr-launch:hover { border-color: var(--lime); box-shadow: 0 0 30px hsla(72, 98%, 54%, 0.22); }
.wr-launch-thumb { width: 46px; height: 58px; flex-shrink: 0; border-radius: 8px; overflow: hidden; border: 1px solid hsla(72,98%,54%,0.4); }
.wr-launch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wr-launch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wr-launch-text strong { font-size: 0.98rem; font-weight: 700; letter-spacing: 0.01em; }
.wr-launch-yr { color: var(--lime); font-weight: 700; }
.wr-launch-text span { font-size: 0.8rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-launch-go { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; font-size: 0.85rem; font-weight: 700; color: var(--lime); }
.wr-launch-go .ic { width: 1rem; height: 1rem; }
.wr-launch-x {
  position: absolute; top: 4px; right: 6px; width: 22px; height: 22px; border: none; background: transparent;
  color: var(--text-dim); font-size: 1.15rem; line-height: 1; cursor: pointer; border-radius: 50%;
}
.wr-launch-x:hover { color: var(--text); background: rgba(255,255,255,0.1); }

.wr-overlay { position: fixed; inset: 0; z-index: 300; background: #07060a; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.2s ease; }
.wr-stage {
  position: relative; width: 100%; height: 100%; max-width: 480px; max-height: 100vh;
  background: radial-gradient(circle at 50% 38%, #14260c, #07060a 72%);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* two stacked layers crossfade between slides; the inner img does the Ken Burns push-in */
.wr-stack { position: absolute; inset: 0; }
.wr-layer {
  position: absolute; inset: 0; opacity: 0; display: flex; align-items: center; justify-content: center;
  will-change: opacity, transform; backface-visibility: hidden;
}
.wr-img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  user-select: none; -webkit-user-drag: none; will-change: transform; transform-origin: center;
}
.wr-bars { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 6; display: flex; gap: 5px; }
.wr-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.28); overflow: hidden; }
.wr-bar-fill { display: block; height: 100%; width: 0; background: var(--lime); border-radius: 3px; box-shadow: 0 0 6px hsla(72,98%,54%,0.7); }
.wr-bar.done .wr-bar-fill { width: 100%; }
.wr-bar.active .wr-bar-fill { width: 100%; transition: width 0.5s ease; }
.wr-close {
  position: absolute; top: 22px; right: 14px; z-index: 7; width: 38px; height: 38px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.35); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.wr-close .ic { width: 1.25rem; height: 1.25rem; }
.wr-close:hover { background: rgba(0,0,0,0.6); }
.wr-zone { position: absolute; top: 0; bottom: 0; z-index: 5; border: none; background: transparent; cursor: pointer; padding: 0; }
.wr-prev-zone { left: 0; width: 32%; }
.wr-next-zone { right: 0; width: 68%; }

.wr-replay {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin-top: 16px;
  background: linear-gradient(110deg, rgba(13,10,20,0.9), rgba(20,40,12,0.9));
  border: 1px solid hsla(72,98%,54%,0.4); border-radius: 12px; padding: 10px 12px; cursor: pointer; color: var(--text);
}
.wr-replay:hover { border-color: var(--lime); }
.wr-replay-thumb { width: 40px; height: 50px; flex-shrink: 0; border-radius: 7px; overflow: hidden; border: 1px solid hsla(72,98%,54%,0.4); }
.wr-replay-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wr-replay-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wr-replay-text strong { font-size: 0.92rem; }
.wr-replay-text span { font-size: 0.78rem; color: var(--text-dim); }
.wr-replay > .ic { width: 1.1rem; height: 1.1rem; color: var(--lime); flex-shrink: 0; }
body.wr-open { overflow: hidden; }

/* ---------- Community tab ---------- */
.cm-wrapped {
  display: block; width: 100%; text-align: left; position: relative; padding: 0; cursor: pointer;
  border: 1px solid hsla(72,98%,54%,0.45); border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5;
  max-width: 420px; margin: 0 auto; background: #0d0a14; box-shadow: 0 0 28px hsla(72,98%,54%,0.14);
}
.cm-wrapped:hover { border-color: var(--lime); }
/* poster is 4:5 — matching the card ratio shows it whole, uncropped */
.cm-wrapped-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cm-wrapped-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,6,10,0.97) 0%, rgba(7,6,10,0.85) 9%, rgba(7,6,10,0.3) 22%, transparent 36%); pointer-events: none; }
.cm-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lime); background: hsla(72,98%,54%,0.18); border: 1px solid hsla(72,98%,54%,0.5); padding: 3px 9px; border-radius: 999px; backdrop-filter: blur(4px); }
.cm-tag .ic { width: 0.85rem; height: 0.85rem; }
.cm-tag-float { position: absolute; top: 12px; left: 12px; z-index: 2; }
.cm-play { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 6px; font-size: 0.92rem; font-weight: 700; color: #0d0a14; background: var(--lime); padding: 9px 20px; border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.cm-play .ic { width: 1rem; height: 1rem; }

.cm-head { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 2px 12px; }
.cm-head h3 { font-size: 1.05rem; font-weight: 700; }
.cm-head-note { font-size: 0.78rem; color: var(--text-dim); }
.cm-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cm-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.cm-stat .ic { width: 1.1rem; height: 1.1rem; color: var(--lime); margin-bottom: 4px; }
.cm-stat strong { font-size: 1.45rem; font-weight: 800; color: var(--lime); line-height: 1; }
.cm-stat span { font-size: 0.78rem; color: var(--text-dim); }

.cm-spotlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cm-spot { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.cm-spot-soon { opacity: 0.7; border-style: dashed; }
.cm-spot-ph { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-raised); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cm-spot-ph .ic { width: 1.3rem; height: 1.3rem; color: var(--text-dim); }
.cm-spot-img { width: 100%; height: 100%; object-fit: cover; }
.cm-spot-name { font-size: 0.82rem; font-weight: 700; }
.cm-spot-role { font-size: 0.68rem; color: var(--lime); font-weight: 600; }
.cm-spot-sub { font-size: 0.72rem; color: var(--text-dim); line-height: 1.35; }

/* Prominent photo-forward spotlight cards */
.cm-spotlights.feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 12px; }
.cm-spotlights.feature .cm-spot { padding: 0; overflow: hidden; text-align: left; border-radius: 16px; box-shadow: 0 6px 22px rgba(0,0,0,0.28); }
.cm-spot-photo { position: relative; aspect-ratio: 4 / 3; background: var(--bg-raised); }
.cm-spot-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-spot-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 35%, hsla(72,98%,54%,0.12), var(--bg-raised) 70%); }
.cm-spot-noimg .ic { width: 2.4rem; height: 2.4rem; color: var(--text-dim); }
.cm-spot-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 14px 12px; background: linear-gradient(to top, rgba(7,6,10,0.96), rgba(7,6,10,0.45) 55%, transparent); text-align: left; }
.cm-spotlights.feature .cm-spot-name { font-size: 1.15rem; font-weight: 800; line-height: 1.1; }
.cm-spotlights.feature .cm-spot-role { font-size: 0.8rem; color: var(--lime); font-weight: 700; margin-top: 2px; }
.cm-spotlights.feature .cm-spot-sub { padding: 11px 14px 14px; font-size: 0.86rem; color: var(--text-dim); line-height: 1.4; }
.cm-foot { margin-top: 16px; font-size: 0.8rem; text-align: center; }

/* Powered by DragonAid — prominent player promo carousel */
.cm-powered { position: relative; margin: 0 -16px; }
.cm-pw-track {
  display: flex; gap: 14px; padding: 4px 16px 14px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.cm-pw-track::-webkit-scrollbar { display: none; }
.cm-pcard {
  flex: 0 0 76%; max-width: 320px; scroll-snap-align: center; padding: 0; border: 0; cursor: pointer;
  background: var(--bg-raised); border-radius: 18px; overflow: hidden; aspect-ratio: 9 / 16;
  box-shadow: 0 10px 34px rgba(0,0,0,0.45); border: 1px solid hsla(72,98%,54%,0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.cm-pcard:active { transform: scale(0.985); }
.cm-pcard:hover { border-color: hsla(72,98%,54%,0.55); box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 0 26px hsla(72,98%,54%,0.18); }
.cm-pcard img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.cm-pw-arrow {
  position: absolute; top: calc(50% - 14px); transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
  background: rgba(13,10,20,0.72); backdrop-filter: blur(6px); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cm-pw-arrow .ic { width: 1.2rem; height: 1.2rem; }
.cm-pw-arrow:hover { border-color: var(--lime); color: var(--lime); }
.cm-pw-prev { left: 8px; } .cm-pw-next { right: 8px; }
.cm-pw-count {
  position: absolute; right: 18px; bottom: 20px; z-index: 3; font-size: 0.74rem; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; background: rgba(13,10,20,0.7); backdrop-filter: blur(6px);
  color: var(--text-dim); letter-spacing: 0.02em;
}
.cm-pw-count [data-pw-cur] { color: var(--lime); }

/* Full-screen player viewer */
.pv-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(5,4,8,0.94); backdrop-filter: blur(8px); display: flex; animation: pvIn 0.2s ease; }
@keyframes pvIn { from { opacity: 0; } to { opacity: 1; } }
.pv-track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pv-track::-webkit-scrollbar { display: none; }
.pv-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; padding: 48px 16px; box-sizing: border-box; }
.pv-slide img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px; box-shadow: 0 18px 60px rgba(0,0,0,0.6); }
.pv-close, .pv-arrow {
  position: absolute; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: rgba(13,10,20,0.7); backdrop-filter: blur(6px); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pv-close { top: 16px; right: 16px; }
.pv-close:hover, .pv-arrow:hover { border-color: var(--lime); color: var(--lime); }
.pv-arrow { top: 50%; transform: translateY(-50%); }
.pv-prev { left: 12px; } .pv-next { right: 12px; }
.pv-count { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 3; font-size: 0.82rem; font-weight: 700; color: var(--text-dim); }
.pv-count .pv-cur { color: var(--lime); }

/* Reactions */
.cm-reacts { display: flex; gap: 8px; margin-top: 10px; }
.cm-react {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text); font: inherit;
  font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: transform 0.08s ease, border-color 0.15s ease;
}
.cm-react:hover { border-color: hsla(72,98%,54%,0.5); }
.cm-react:active { transform: scale(0.92); }
.cm-react.on { border-color: var(--lime); background: hsla(72,98%,54%,0.12); color: var(--lime); }
.cm-react-emo { font-size: 1rem; line-height: 1; }

/* Leaderboard */
.cm-board { display: flex; flex-direction: column; gap: 6px; }
.cm-row { display: flex; align-items: center; gap: 11px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; }
.cm-row-you { border-color: var(--lime); background: hsla(72,98%,54%,0.07); }
.cm-rank { width: 20px; flex-shrink: 0; text-align: center; font-weight: 700; font-size: 0.9rem; color: var(--text-dim); }
.cm-rank-top { color: var(--lime); }
.cm-ava { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; color: #0d0a14; }
.cm-row-name { flex: 1; min-width: 0; font-size: 0.92rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-you-tag { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: #0d0a14; background: var(--lime); padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.cm-streak { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-weight: 700; font-size: 0.9rem; color: var(--amber, #ffb347); }
.cm-streak .ic { width: 0.95rem; height: 0.95rem; }
/* tenure is the tiebreak now — smaller and dimmer than the fuelled-days rank metric */
.cm-tenure { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-weight: 700; font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; }
.cm-tenure .ic { width: 0.8rem; height: 0.8rem; }
/* fuelled days — the number the board ranks by */
.cm-fuelled { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-weight: 800; font-size: 0.88rem; color: var(--amber, #ffb347); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cm-fuelled .ic { width: 0.95rem; height: 0.95rem; }
/* tier emblem next to the name — display only, never affects rank */
.cm-tier { display: inline-flex; align-items: center; gap: 3px; margin-left: 7px; padding: 2px 7px; border-radius: 999px; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.05em; color: var(--text-dim); border: 1px solid var(--border); vertical-align: 2px; }
.cm-tier .ic { width: 0.6rem; height: 0.6rem; }
.cm-tier.t-peak { color: var(--lime); border-color: var(--lime-border); background: var(--lime-soft); }
.cm-tier.t-primed { color: var(--lime); border-color: var(--border); }
.cm-board-msg { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 16px; text-align: center; font-size: 0.86rem; color: var(--text-dim); display: flex; align-items: center; justify-content: center; gap: 8px; }
.cm-board-msg .ic { width: 1rem; height: 1rem; color: var(--lime); }
.cm-optin { display: flex; align-items: center; gap: 12px; justify-content: space-between; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; font-size: 0.84rem; color: var(--text-dim); }
.cm-optin.on { border-color: var(--lime-border, var(--border)); }
.cm-optin span { display: flex; align-items: center; gap: 8px; }
.cm-optin .ic { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--lime); }
.cm-optin-btn { flex: 0 0 auto; border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 9px; padding: 7px 12px; cursor: pointer; font-size: 0.82rem; white-space: nowrap; }
.cm-optin-btn.primary { background: var(--lime, #a3e635); color: #0d0a14; border-color: transparent; font-weight: 700; }
.cm-optin-btn:hover { border-color: var(--lime-border, var(--border)); }
.cm-cheer {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; min-width: 52px; justify-content: center;
  padding: 5px 9px; border-radius: 999px; background: var(--bg-raised); border: 1px solid var(--border);
  color: var(--text-dim); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: transform 0.08s ease;
}
.cm-cheer:hover { border-color: hsla(72,98%,54%,0.5); }
.cm-cheer:active { transform: scale(0.9); }
.cm-cheer.on { border-color: var(--lime); background: hsla(72,98%,54%,0.14); color: var(--lime); }
.cm-cheer-self { background: transparent; border-color: transparent; cursor: default; }

.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-raised);
  border: 1px solid var(--lime);
  color: var(--lime);
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  z-index: 50;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
/* ---------- Auth gate (logged-out landing) ---------- */
.auth-gate {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  background: radial-gradient(1000px 600px at 50% -10%, hsl(220 14% 13%) 0%, var(--bg) 60%);
}
/* pre-paint class hides the app + reveals the gate, no JS flash */
.logged-out .topbar, .logged-out #app, .logged-out .footer, .logged-out .install-prompt { display: none !important; }
.logged-out .auth-gate { display: flex; }
.auth-card {
  width: 100%; max-width: 400px; text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 36px 28px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
.auth-logo { width: 64px; height: 64px; border-radius: 50%; }
.auth-title { font-size: 1.7rem; color: var(--lime); margin-top: 14px; }
.auth-tag { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 3px; color: var(--text-dim); margin-bottom: 16px; }
.auth-product-logo { height: 40px; width: auto; display: block; margin: 0 auto 16px; }
.auth-lead { color: var(--text-dim); font-size: 0.92rem; line-height: 1.5; margin-bottom: 22px; }
#gate-form { display: flex; flex-direction: column; gap: 10px; }
#gate-email {
  width: 100%; background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; color: var(--text); font-family: inherit; font-size: 1rem;
}
#gate-email:focus { outline: none; border-color: var(--lime); }
.auth-demo { display: inline-block; margin-top: 18px; }
.gate-msg { margin-top: 14px; font-size: 0.9rem; }
.gate-msg strong { color: var(--lime); }

/* Install / Add to Home Screen banner — glass, floating bottom-centre */
.install-prompt {
  position: fixed;
  left: 50%;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 45;
  width: calc(100% - 32px);
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 40px rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.3s ease;
}
.install-logo { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.install-text strong { font-size: 0.95rem; }
.install-text span { color: var(--text-dim); font-size: 0.82rem; line-height: 1.35; }
.install-text .ic { width: 1.05em; height: 1.05em; vertical-align: -0.18em; color: var(--lime); }
.install-actions .btn { padding: 9px 14px; white-space: nowrap; }
.install-actions .ic { width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 2px; }
.install-close {
  position: absolute; top: 6px; right: 10px;
  background: none; border: none; color: var(--text-dim);
  font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 2px 6px;
}
.install-close:hover { color: var(--text); }
@media (max-width: 460px) {
  .install-prompt { flex-wrap: wrap; }
  .install-actions { width: 100%; }
  .install-actions .btn { width: 100%; }
}

.footer {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.78rem;
  padding: 18px;
  border-top: 1px solid var(--border);
}

@media (max-width: 1240px) {
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .user-area { order: 2; margin-left: auto; }
  .tabs { order: 3; flex: none; width: 100%; justify-content: center; }
}
/* If the rail is wider than the screen, scroll it horizontally rather than wrap —
   keeps every tab on one consistent line. */
@media (max-width: 600px) {
  .tabs { justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-rail { margin: 0 auto; }
}
@media (max-width: 640px) {
  .user-email { display: none; }
}

/* §3.9 non-bottle-plan state — shown in place of the fuel tracker */
.fuel-noplan { display: flex; gap: 14px; align-items: flex-start; }
.fuel-noplan-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(163,230,53,.12); color: var(--lime); }
.fuel-noplan-ic .ic { width: 22px; height: 22px; }
.fuel-noplan strong { display: block; margin-bottom: 4px; }
.fuel-noplan p { margin: 0; }

/* Current-plan panel — shown above the plan options (esp. custom Stripe plans) */
.current-plan-panel { border: 1px solid rgba(163,230,53,.35); background: linear-gradient(180deg, rgba(163,230,53,.06), transparent); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; text-align: left; }
.cpp-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cpp-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cpp-tag { color: #0d0a14; background: var(--lime); border-radius: 5px; padding: 1px 7px; font-size: .62rem; letter-spacing: .03em; }
.cpp-tag-season { background: rgba(110,168,255,.18); color: #a0c8ff; border: 1px solid rgba(110,168,255,.5); }
.cpp-name { font-size: 1.25rem; font-weight: 800; margin-top: 4px; }
.cpp-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; color: var(--dim); font-size: .9rem; }
.cpp-meta strong { color: var(--text); }
.cpp-note { margin: 12px 0 0; font-size: .85rem; color: var(--dim); line-height: 1.45; }

/* Bespoke admin-set box mix (read-only) */
.boxprof-fixed { border-color: rgba(163,230,53,.4); cursor: default; }
.boxprof-lbl { display: block; font-size: .68rem; color: var(--dim); font-style: normal; margin-top: 2px; }

/* Bespoke mix option sits among the focus profiles (admin-set, still switchable) */
.boxprof-bespoke { border-color: rgba(163,230,53,.45); }
.boxprof-badge { font-size: .58rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: #0d0a14; background: var(--lime); border-radius: 5px; padding: 1px 6px; margin-left: auto; }

/* Recurring add-on manage card */
.recurring-card { border-color: var(--lime-border); }
.recurring-items { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 14px; }
.recurring-item { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; }
.recurring-item .box-thumb { width: 34px; height: 34px; }

/* ---------- Fuel Profile (nutrient radar + compound grid) ---------- */
.fp-msg { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 40px 16px; color: var(--text-dim); font-size: .86rem; }
.fp-msg .ic { width: 1rem; height: 1rem; }
.fp-radar { width: 100%; max-width: 320px; display: block; margin: 0 auto 6px; overflow: visible; }
.fp-grid { fill: none; stroke: var(--border); stroke-width: 1; }
.fp-spoke { stroke: var(--border); stroke-width: 1; }
.fp-area { fill: hsla(72, 98%, 54%, 0.22); stroke: var(--lime); stroke-width: 2; stroke-linejoin: round; }
.fp-dot { fill: var(--lime); }
.fp-axis-label { fill: var(--text-dim); font-size: 11px; font-weight: 600; font-family: inherit; }
.fp-scope { display: flex; gap: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 3px; margin-bottom: 10px; }
.fp-scope-btn { flex: 1 1 0; border: none; background: transparent; color: var(--text-dim); font: inherit; font-size: .78rem; font-weight: 700; padding: 7px 10px; border-radius: 999px; cursor: pointer; }
.fp-scope-btn.on { background: var(--bg-raised); color: var(--text); }
.fp-goal { text-align: center; font-size: .84rem; color: var(--text-dim); padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; }
.fp-goal strong { color: var(--text); }
.fp-goal small { display: block; font-size: .68rem; color: var(--text-dim); margin-top: 3px; }
.fp-goal.hit { border-color: var(--lime-border); background: var(--lime-soft); color: var(--lime); }
.fp-goal.hit small { color: var(--text-dim); }

/* --- game layer --- */
.fp-hero { position: relative; }
.fp-score-num { fill: var(--text); font-size: 46px; font-weight: 800; font-family: "TT Octosquares", "Rajdhani", sans-serif; font-style: italic; }
.fp-score-tier { fill: var(--lime); font-size: 12px; font-weight: 800; letter-spacing: 2px; font-family: inherit; }
.fp-hero.complete .fp-score-num { fill: var(--lime); }
.fp-complete { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: .82rem; font-weight: 700; color: var(--lime); background: var(--lime-soft); border: 1px solid var(--lime-border); border-radius: 999px; padding: 7px 14px; margin: -6px auto 10px; width: fit-content; animation: fpPop .45s cubic-bezier(.3,1.4,.5,1); }
.fp-complete .ic { width: .95rem; height: .95rem; }
@keyframes fpPop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.fp-tierbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fp-tierbar-track { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--bg-raised); overflow: hidden; border: 1px solid var(--border); }
.fp-tierbar-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, hsla(72,98%,54%,.55), var(--lime)); transition: width .6s cubic-bezier(.3,1.2,.5,1); }
.fp-tierbar-lbl { flex: 0 0 auto; font-size: .74rem; color: var(--text-dim); }
.fp-tierbar-lbl strong { color: var(--lime); letter-spacing: .5px; }
.fp-tierbar.maxed { justify-content: center; gap: 7px; color: var(--lime); font-size: .82rem; padding: 7px; border: 1px solid var(--lime-border); background: var(--lime-soft); border-radius: 999px; }
.fp-tierbar.maxed .ic { width: 1rem; height: 1rem; }

.fp-stats { display: flex; gap: 6px; margin-bottom: 14px; }
.fp-stat { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: .74rem; color: var(--text-dim); background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; padding: 8px 4px; white-space: nowrap; }
.fp-stat strong { color: var(--text); font-size: .95rem; }
.fp-stat .ic { width: .9rem; height: .9rem; color: var(--lime); }

.fp-nudge { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-raised); }
.fp-nudge-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; font-size: .84rem; }
.fp-nudge-txt .muted { font-size: .74rem; line-height: 1.4; }
.fp-nudge .btn { flex: 0 0 auto; }
.fp-badge-mark { margin-right: 5px; opacity: .85; font-size: .72rem; }
/* the emoji IS the icon — the visual layer that replaced tick/dot marks */
.fp-badge-emoji { margin-right: 6px; font-size: .95rem; line-height: 1; }
.fp-badge:not(.on):not(.week) .fp-badge-emoji { font-size: .78rem; opacity: .8; }
.fp-sci-toggle { width: 100%; margin-top: 12px; border: none; background: transparent; color: var(--text-dim); font: inherit; font-size: .76rem; font-weight: 600; padding: 8px; cursor: pointer; text-align: center; }
.fp-sci-toggle:hover { color: var(--text); }
.fp-science { border-top: 1px solid var(--border); padding-top: 12px; }
.fp-goal-note { font-size: .72rem; color: var(--text-dim); margin-bottom: 8px; }
.fp-note-slim { text-align: center; font-size: .66rem; margin: 0; }
.fp-goal.hit strong { color: var(--lime); }
.fp-goal .ic { width: 1rem; height: 1rem; }
.fp-axes { display: flex; flex-direction: column; gap: 7px; margin: 10px 0 8px; }
.fp-arow.met .fp-arow-name { color: var(--text); }
.fp-arow { display: flex; align-items: center; gap: 10px; font-size: .82rem; }
.fp-arow-name { flex: 0 0 84px; color: var(--text-dim); }
.fp-arow-bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--bg-raised); overflow: hidden; }
.fp-arow-bar i { display: block; height: 100%; border-radius: 999px; background: var(--lime); transition: width .5s ease; }
.fp-arow-val { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; min-width: 82px; }
.fp-arow-val small { display: block; font-weight: 400; font-size: .68rem; color: var(--text-dim); }
.fp-note { font-size: .7rem; color: var(--text-dim); line-height: 1.5; margin-bottom: 12px; }
.fp-chead { display: flex; align-items: baseline; justify-content: space-between; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: 8px; }
.fp-chead .muted { text-transform: none; letter-spacing: 0; font-weight: 600; }
.fp-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-badge { border: 1px solid var(--border); background: var(--bg-raised); color: var(--text-dim); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: .76rem; font-weight: 600; cursor: pointer; transition: all .2s ease; }
.fp-badge.week { color: var(--text); border-color: hsla(72,98%,54%,0.25); }
.fp-badge.on { color: var(--lime); border-color: var(--lime-border); background: var(--lime-soft); }
.fp-badge:hover { border-color: var(--lime-border); }
.fp-detail { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--lime-border); border-radius: 12px; background: var(--bg-raised); font-size: .82rem; }
.fp-detail .fp-sci { color: var(--lime); font-size: .76rem; }
.fp-detail .muted { font-size: .76rem; }
.fp-state { font-size: .72rem; color: var(--text-dim); margin-top: 3px; }

/* Header bell (Alerts moved out of the tab bar) */
.bell-btn { position: relative; border: none; background: transparent; color: var(--text-dim); cursor: pointer; padding: 6px; border-radius: 10px; display: inline-flex; }
.bell-btn:hover { color: var(--text); background: var(--bg-raised); }
.bell-btn .ic { width: 20px; height: 20px; }
.bell-btn .badge { position: absolute; top: 0; right: 0; margin: 0; font-size: 0.58rem; min-width: 15px; padding: 0 4px; text-align: center; line-height: 1.5; }

/* "Manage" segmented switcher (My plan | Orders & billing under one tab) */
.manage-seg { display: flex; gap: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 4px; margin-bottom: 16px; }
.mseg { flex: 1 1 0; border: none; background: transparent; color: var(--text-dim); font: inherit; font-weight: 600; padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.mseg.active { background: var(--bg-raised); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.25); }

/* Per-kind push choices, nested under the master toggle */
/* one notifications switch — the per-type rows are gone; what gets sent is
   decided once in Studio, for everyone */
.pref-note { font-size: .78rem; line-height: 1.45; margin: 2px 0 8px 2px; }

/* 6-digit sign-in code entry (iOS Home-Screen app can't use the emailed link) */
.gate-code { display: flex; gap: 8px; margin: 14px 0 4px; }
.gate-code input { flex: 1 1 auto; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-size: 1.15rem; letter-spacing: 6px; text-align: center; font-variant-numeric: tabular-nums; }
.gate-code button { flex: 0 0 auto; }

/* Editable "My fruit order" */
.fruit-order .fo-rows { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.fo-row { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.fo-row .box-thumb { width: 40px; height: 40px; flex: 0 0 auto; }
.fo-name { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.25; font-weight: 600; font-size: .95rem; min-width: 0; }
.fo-name .fo-line { font-weight: 400; font-size: .78rem; }
.fo-stepper { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.fo-step { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elev, var(--bg-card)); color: var(--text); font-size: 1.1rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.fo-step:hover { border-color: var(--lime-border); }
.fo-qty { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Read-only row: a package box is shown here but edited in the builder */
.fo-qty-view { margin-left: auto; font-weight: 700; color: var(--lime); font-variant-numeric: tabular-nums; }
.fo-remove { flex: 0 0 auto; width: 30px; height: 30px; border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.fo-remove:hover { color: #e5484d; background: rgba(229,72,77,.1); }
.fo-remove svg { width: 16px; height: 16px; }
.fo-add { display: flex; gap: 8px; margin: 4px 0 12px; }
.fo-add select { flex: 1 1 auto; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); }
.fo-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.fo-cadence { font-size: .85rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.fo-cadence select { padding: 7px 9px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); }
.fo-total { font-size: .9rem; color: var(--muted); }
.fo-total strong { font-size: 1.1rem; color: var(--text); margin-left: 4px; }
.fo-actions { display: flex; gap: 8px; margin-top: 4px; }
.fo-actions .btn { flex: 1 1 auto; }
.fo-skip { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); padding: 8px 0; flex-wrap: wrap; }
.fo-skip svg { width: 14px; height: 14px; }
.fo-skip-btn { border: 1px solid var(--border); background: transparent; color: var(--text); padding: 6px 12px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; }
.fo-skip-btn:hover { border-color: var(--lime-border); }

.fp-nudge.plan { border-color: var(--lime-border); background: var(--lime-soft); }
.fp-nudge.plan .fp-nudge-txt strong { display: flex; align-items: center; gap: 6px; color: var(--lime); }
.fp-nudge.plan .ic { width: .9rem; height: .9rem; }

/* Fruit-package weekly allowance bar */
.fo-allow { margin: 10px 0 4px; }
.fo-allow-bar { height: 8px; border-radius: 999px; background: var(--bg-raised); border: 1px solid var(--border); overflow: hidden; }
.fo-allow-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, hsla(72,98%,54%,.55), var(--lime)); transition: width .45s cubic-bezier(.3,1.2,.5,1); }
.fo-allow.over .fo-allow-bar i { background: linear-gradient(90deg, #ffb347, #ff8c42); }
.fo-allow-txt { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: .78rem; flex-wrap: wrap; }
.fo-allow-txt .muted { font-size: .74rem; }
.fo-allow.over .fo-allow-txt .muted { color: var(--amber); }

/* ---- Two ways to buy fruit: one-off vs package (Orders) ---- */
.compare-card, .package-card { margin-bottom: 14px; }
.pkg-compare { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .7rem 0 .2rem; }
.pkg-opt { border: 1px solid var(--border); border-radius: 14px; padding: .7rem .75rem; background: rgba(255,255,255,.02); }
.pkg-opt.current { border-color: rgba(255,255,255,.22); }
.pkg-opt-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .15rem; }
.pkg-opt-head strong { font-size: .92rem; }
.pkg-opt-rate { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .3rem; }
.pkg-opt p { font-size: .78rem; line-height: 1.45; margin: 0; }
.pkg-verdict { border-radius: 14px; padding: .7rem .8rem; margin-top: .6rem;
  background: rgba(255,255,255,.04); font-size: .84rem; line-height: 1.5; }
.pkg-verdict.good { background: rgba(122,224,150,.10); border: 1px solid rgba(122,224,150,.22); }
@media (max-width: 420px) { .pkg-compare { grid-template-columns: 1fr; } }
.pkg-carry { font-size: .78rem; line-height: 1.5; margin: .5rem 0 0; opacity: .85; }
.pkg-carry .ic { width: 13px; height: 13px; vertical-align: -2px; }

/* ---- Add-on journey: pick a ready-made box, or build one ---- */
.addon-fork { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0 0 16px; }
.addon-fork-opt { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
  text-align: left; padding: 1rem .9rem; border-radius: 16px; border: 1px solid var(--border);
  background: var(--bg-raised); color: inherit; cursor: pointer; font: inherit;
  overflow: hidden; padding-top: 0; }
/* Real fruit, real athletes — the photo does the selling the copy can't. Shown WHOLE:
   the box takes the shots' own 3:4 portrait shape and `contain` guarantees nothing is
   cut even if a future photo arrives at a different ratio. Taller cards are the price
   of showing the entire picture, which is the point. */
.fork-shot { width: calc(100% + 1.8rem); margin: 0 -.9rem .55rem; aspect-ratio: 3 / 4;
  object-fit: contain; display: block; background: var(--bg-card); }
.addon-fork-opt:hover { border-color: rgba(255,255,255,.28); }
.addon-fork-opt:hover .fork-shot { filter: brightness(1.06); }
.addon-fork-opt strong { font-size: .95rem; }
.addon-fork-opt .muted { font-size: .78rem; line-height: 1.45; }
.addon-fork-ic .ic { width: 22px; height: 22px; margin-bottom: .2rem; }
.addon-back { margin-bottom: 12px; }
.addon-box { margin-bottom: 12px; }
.addon-box-items { display: flex; flex-wrap: wrap; gap: 6px; margin: .6rem 0 .8rem; }
@media (max-width: 420px) { .addon-fork { grid-template-columns: 1fr; } }

.addon-stats { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: 2px 0 14px;
  font-size: .78rem; color: var(--text-dim); }
.addon-stats strong { color: var(--text); }
.pkg-pick-label { font-size: .78rem; margin: .7rem 0 .45rem; }
.pkg-pick { display: flex; flex-wrap: wrap; gap: .4rem; }
.pkg-tier { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px; padding: .55rem .7rem; font-weight: 700; line-height: 1.2; }
.pkg-tier .muted { font-size: .68rem; font-weight: 500; }
.pkg-tier.suggested { border-color: rgba(163,230,53,.45); }
.addon-fork.single { grid-template-columns: 1fr; }
.addon-fork-rate { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.ready-head { font-size: .8rem; margin: 0 0 .5rem; }
.ready-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin: 0 0 14px;
  scrollbar-width: none; }
.ready-row::-webkit-scrollbar { display: none; }
.ready-row .addon-box { flex: 0 0 auto; width: 260px; margin: 0; }
.pkg-tier.asked { border-color: rgba(163,230,53,.55); background: rgba(163,230,53,.08); }

/* ---- Like-for-like swaps inside a package box ---- */
.fo-swap { background: none; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 999px; padding: 3px 10px; font: inherit; font-size: .72rem; cursor: pointer; }
.fo-swap:hover { color: var(--text); border-color: rgba(255,255,255,.3); }
.fo-swaps { border: 1px solid var(--border); border-radius: 14px; padding: .6rem .7rem;
  margin: 0 0 .5rem; background: rgba(255,255,255,.02); }
.fo-swaps-head { font-size: .76rem; line-height: 1.45; margin-bottom: .55rem; }
.fo-swaps-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.fo-swaps-list::-webkit-scrollbar { display: none; }
.fo-swap-opt { flex: 0 0 auto; width: 92px; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: .5rem .35rem; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-raised); color: inherit; font: inherit; cursor: pointer; }
.fo-swap-opt:hover:not(:disabled) { border-color: rgba(255,255,255,.3); }
.fo-swap-opt:disabled { opacity: .38; cursor: not-allowed; }
.fo-swap-opt .box-thumb { width: 40px; height: 40px; }
.fo-swap-name { font-size: .66rem; line-height: 1.2; text-align: center; max-height: 2.4em; overflow: hidden; }
.fo-swap-delta { font-size: .68rem; font-weight: 700; color: var(--text-dim); }
.fo-swap-delta.up { color: #fbbf24; }
.fo-swap-delta.down { color: #a3e635; }

/* ---- Is the box the right size? ---- */
.fo-fit { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  border-radius: 12px; padding: .55rem .7rem; margin: .1rem 0 .6rem; font-size: .8rem; line-height: 1.45; }
.fo-fit .ic { width: 15px; height: 15px; flex: 0 0 auto; }
.fo-fit span { flex: 1 1 160px; }
.fo-fit.ok { background: rgba(163,230,53,.08); color: var(--text-dim); }
.fo-fit.under { background: rgba(56,189,248,.10); }
.fo-fit.over { background: rgba(251,113,133,.12); }
.fo-fit-btn { border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06);
  color: inherit; border-radius: 999px; padding: .3rem .8rem; font: inherit; font-size: .76rem;
  font-weight: 600; cursor: pointer; white-space: nowrap; }
.fo-fit-btn:hover { border-color: rgba(255,255,255,.45); }
.rate-wait { display: inline-block; width: 4.2rem; height: 1em; border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.13), rgba(255,255,255,.06));
  background-size: 200% 100%; animation: rate-shimmer 1.1s linear infinite; }
@keyframes rate-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.rate-wait.wide { width: 6.5rem; height: 1.1em; }
.fork-wait { border-radius: 16px; min-height: 126px; border: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.07), rgba(255,255,255,.03));
  background-size: 200% 100%; animation: rate-shimmer 1.1s linear infinite; }
.fork-rate-sub { font-size: .82rem; font-weight: 600; opacity: .7; }
.pkg-tier.current { border-color: rgba(163,230,53,.5); background: rgba(163,230,53,.07); opacity: 1; }
.pkg-tier.current:disabled { cursor: default; }

/* ---- A package member's own page ---- */
.pkg-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: .8rem 0 .2rem; }
.pkg-facts div { display: flex; flex-direction: column; gap: 1px; }
.pkg-facts strong { font-size: 1.15rem; letter-spacing: -.02em; }
.pkg-facts .muted { font-size: .68rem; line-height: 1.25; }

/* Tiles are the artwork. 4:5 to match the product cards, and big enough to read the
   fruit from across the room — these are the thing being dragged. */
.pkg-box-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: .7rem .55rem; margin: .7rem 0 .2rem; align-items: start; }
.pkg-box-item, .pkg-pal-item { position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-raised);
  display: flex; align-items: center; justify-content: center; }
/* contain, not cover: the tile is already 4/5 like the artwork, and the fruit's name
   is printed on the picture — cropping it loses the label the tile depends on */
.pkg-box-item img, .pkg-pal-item img { width: 100%; height: 100%; object-fit: contain;
  -webkit-user-drag: none; user-select: none; }
.tile-label { padding: .4rem; font-size: .72rem; font-weight: 600; line-height: 1.25;
  text-align: center; color: var(--text-dim); }
.tile-qty { position: absolute; top: 6px; left: 6px; padding: 1px 7px; border-radius: 999px;
  background: rgba(0,0,0,.65); font-size: .68rem; font-weight: 700; }
@media (max-width: 520px) { .pkg-facts { grid-template-columns: repeat(2, 1fr); row-gap: .7rem; } }
/* ---- Drag a fruit onto your box to swap it ---- */
.pkg-dd-hint { font-size: .78rem; line-height: 1.5; margin: .1rem 0 .7rem; }
.pkg-box-item { transition: border-color .12s, background .12s, opacity .12s; }
.pkg-box-item.drop-ok { border-color: rgba(163,230,53,.45); }
.pkg-box-item.drop-no { opacity: .35; }
.pkg-box-item.drop-hot { border-color: #a3e635; background: rgba(163,230,53,.14);
  box-shadow: 0 0 0 2px rgba(163,230,53,.25); }
.pkg-palette { margin: .9rem 0 .2rem; display: flex; flex-direction: column; gap: .7rem; }
.pkg-pal-head { display: flex; align-items: center; gap: .4rem; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: .35rem; }
.pkg-pal-head span { font-size: .68rem; opacity: .6; letter-spacing: 0; }
.pkg-pal-row { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.pkg-pal-row::-webkit-scrollbar { display: none; }
.pkg-pal-item { flex: 0 0 auto; width: 96px; cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none; }
.pkg-pal-item:active { cursor: grabbing; }
.pkg-pal-item.dragging { opacity: .35; }

.pkg-drag-ghost { position: fixed; left: 0; top: 0; z-index: 999; width: 96px; aspect-ratio: 4 / 5;
  pointer-events: none; overflow: hidden; border: 2px solid rgba(163,230,53,.75); border-radius: 14px;
  background: var(--bg-raised); box-shadow: 0 14px 34px rgba(0,0,0,.55); opacity: .96;
  display: flex; align-items: center; justify-content: center; }
.pkg-drag-ghost img { width: 100%; height: 100%; object-fit: cover; }
.pkg-box-item.empty { border-style: dashed; border-color: rgba(255,255,255,.18); background: transparent; }
.tile-plus { font-size: 1.6rem; font-weight: 300; color: var(--text-dim); opacity: .6; }

/* ---- Click-to-build palette: variant dropdown + quantity ---- */
/* align-items:center is inherited from the shared tile rule above; in a column that
   shrinks every child to its content, which is why placeholder frames collapsed to
   28x35 and some images to 2x3 while others sat at the full 132x165. */
.pkg-pal-item { flex: 0 0 auto; width: 132px; display: flex; flex-direction: column; gap: 5px;
  align-items: stretch; padding: 0; border: none; background: none; cursor: default;
  aspect-ratio: auto; }
.pkg-pal-art { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--border); background: var(--bg-raised);
  display: flex; align-items: center; justify-content: center; }
.pkg-pal-art img { width: 100%; height: 100%; object-fit: cover; }
.pkg-pal-name { font-size: .74rem; font-weight: 600; line-height: 1.2; height: 2.4em;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Reserved whether or not this family has varieties, so a row of cards lines up
   instead of stepping wherever a dropdown happens to be. */
.pkg-pal-varslot { height: 26px; }
.pkg-pal-var { width: 100%; font: inherit; font-size: .7rem; padding: .25rem .4rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-raised); color: inherit; }
.pkg-pal-foot { display: flex; align-items: center; gap: 5px; }
.pkg-qty { display: flex; align-items: center; gap: 2px; border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 3px; }
.pkg-qty button { width: 20px; height: 20px; border: none; background: none; color: inherit;
  font: inherit; font-size: .88rem; line-height: 1; cursor: pointer; border-radius: 50%; }
.pkg-qty button:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.pkg-qty span { min-width: 14px; text-align: center; font-size: .74rem; font-weight: 700; }
.pkg-add { flex: 1; padding: .3rem .5rem; border-radius: 999px; border: 1px solid rgba(163,230,53,.45);
  background: rgba(163,230,53,.14); color: var(--text); font: inherit; font-size: .72rem;
  font-weight: 700; cursor: pointer; }
.pkg-add:hover:not(:disabled) { background: rgba(163,230,53,.24); }
.pkg-add:disabled { opacity: .4; cursor: not-allowed; border-color: var(--border); background: none; }
/* Under the artwork, not over it — the picture is what the fruit is chosen by. */
.pkg-box-cell { display: flex; flex-direction: column; gap: 5px; }
.pkg-box-cell .pkg-box-item { width: 100%; }
.tile-steps { display: flex; align-items: center; gap: 2px;
  padding: 2px 4px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-raised); }
.tile-steps span { flex: 1; text-align: center; }
/* Sits beside the stepper rather than on the artwork — a separate action, and the
   picture stays whole. */
.tile-remove { margin-left: 2px; padding: 0; display: flex; align-items: center; justify-content: center;
  border-left: 1px solid var(--border); border-radius: 0; width: 24px; height: 20px; }
.tile-remove .ic { width: 13px; height: 13px; opacity: .65; }
.tile-remove:hover .ic { opacity: 1; color: #fb7185; }
.tile-steps button { width: 22px; height: 22px; border: none; background: none; color: inherit;
  font: inherit; font-size: .95rem; line-height: 1; cursor: pointer; border-radius: 50%; }
.tile-steps button:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.tile-steps button:disabled { opacity: .3; cursor: not-allowed; }
.tile-steps span { font-size: .74rem; font-weight: 700; }

/* ---- Scroll arrows on the band rows ---- */
.pkg-pal-scroller { position: relative; }
.pal-arrow { position: absolute; top: 38%; z-index: 3; width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(16,18,22,.92); color: var(--text);
  cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.45); transition: opacity .15s; }
.pal-arrow:hover { border-color: rgba(255,255,255,.35); }
.pal-arrow.prev { left: -4px; }
.pal-arrow.next { right: -4px; }
.pal-arrow.hidden { display: none; }
.pal-arrow .ic { width: 16px; height: 16px; }
/* Fade the edge the row continues past, so the arrow isn't the only hint. */
.pkg-pal-row { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent 100%); scroll-behavior: smooth; }
.tile-none .ic { width: 26px; height: 26px; opacity: .3; }

/* ---- Bands your tier doesn't reach: shown, not hidden ---- */
.pkg-pal-group.locked .pkg-pal-art { opacity: .42; filter: saturate(.5); }
.pkg-pal-group.locked .pkg-pal-name { opacity: .55; }
.pkg-pal-group.locked .pkg-pal-item { cursor: default; }
.pal-lock { margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(251,191,36,.35);
  background: rgba(251,191,36,.12); color: #fbbf24; font: inherit; font-size: .64rem;
  font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; }
.pal-lock:hover { border-color: rgba(251,191,36,.6); }
.pal-lock .ic { width: 11px; height: 11px; }
.pkg-pal-head { display: flex; align-items: center; gap: .4rem; }
/* Says a card is hiding more than it shows — otherwise the other varieties only
   exist for someone who thinks to open the dropdown. */
.pal-types { position: absolute; top: 6px; right: 6px; padding: 2px 7px; border-radius: 999px;
  background: rgba(0,0,0,.72); backdrop-filter: blur(6px); font-size: .6rem; font-weight: 700;
  letter-spacing: .02em; color: #fff; }

/* ---- Tier-change confirmation ---- */
.tier-confirm h3 { margin: 0 0 .9rem; font-size: 1.1rem; }
.tier-cmp { display: flex; align-items: stretch; gap: .6rem; }
.tier-cmp-col { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: .7rem .8rem;
  border: 1px solid var(--border); border-radius: 14px; font-size: .8rem; }
.tier-cmp-col strong { font-size: 1.25rem; letter-spacing: -.02em; }
.tier-cmp-col.to { border-color: rgba(163,230,53,.45); background: rgba(163,230,53,.07); }
.tier-cmp-arrow { align-self: center; }
.tier-cmp-arrow .ic { width: 18px; height: 18px; opacity: .6; }
.tier-delta { font-size: .88rem; line-height: 1.5; margin: .8rem 0 .2rem; }
.tier-note { font-size: .76rem; margin: .3rem 0 .9rem; }
.cart-min { display: flex; align-items: center; gap: .45rem; border-radius: 12px;
  padding: .5rem .7rem; margin-top: .45rem; font-size: .8rem; line-height: 1.45;
  background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.3); }
.cart-min .ic { width: 14px; height: 14px; flex: 0 0 auto; }
.min-banner { display: flex; align-items: center; gap: .5rem; border-radius: 12px;
  padding: .55rem .75rem; margin: 0 0 12px; font-size: .8rem; line-height: 1.45;
  background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--text-dim); }
.min-banner .ic { width: 14px; height: 14px; flex: 0 0 auto; }
.min-banner strong { color: var(--text); }