/* ==========================================================
   Diet Tracker shell — colors come from CSS variables that
   are generated by theme_css() (load_config + wladmin).
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --sidebar-w: 248px;
  --topbar-h: 60px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.4,0,.2,1);
}

html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary-text); }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }

/* ---------- Buttons & inputs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .65rem 1.1rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: filter .15s, background .15s;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { filter: brightness(1.07); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.btn-block { width: 100%; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  border: 0; background: transparent; color: inherit; cursor: pointer;
}
.icon-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .9rem; }
.field .hint { color: var(--muted); font-size: .82rem; margin-top: .3rem; }
input[type=text], input[type=email], input[type=url], input[type=tel], input[type=search], input[type=password], input[type=file], input[type=number], input[type=date], select, textarea {
  width: 100%; padding: .65rem .8rem; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, .icon-btn:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; }
.check input { margin-top: .25rem; width: 1rem; height: 1rem; accent-color: var(--primary); }

.alert { padding: .75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .92rem; border: 1px solid; }
.alert-error   { background: color-mix(in srgb, #d64545 12%, transparent); border-color: color-mix(in srgb, #d64545 40%, transparent); }
.alert-success { background: color-mix(in srgb, var(--primary) 12%, transparent); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.alert-info    { background: color-mix(in srgb, var(--muted) 12%, transparent); border-color: var(--border); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow);
}
.card + .card { margin-top: 1.25rem; }
.muted { color: var(--muted); }

/* ---------- Auth layout ---------- */
.auth-wrap { min-height: 100%; display: grid; place-items: center; padding: 2rem 1rem; }
.auth-card {
  width: 100%; max-width: 420px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 2rem; box-shadow: var(--shadow);
}
.auth-brand { text-align: center; margin-bottom: 1.5rem; }
.auth-brand .brand-logo { max-height: 80px; max-width: 100%; }
.auth-card h2 { font-size: 1.35rem; text-align: center; }
.auth-foot { text-align: center; margin-top: 1.25rem; font-size: .92rem; color: var(--muted); }
.brand-text { font-weight: 800; font-size: 1.4rem; letter-spacing: -.01em; }

/* ---------- App shell ---------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 40;
  background: var(--sidebar); color: var(--sidebar-text);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: transform .25s var(--ease);
}
.sidebar-brand {
  height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between;
  padding: 0 1rem 0 1.25rem; border-bottom: 1px solid var(--border);
}
.sidebar-brand .brand-slot { display: flex; align-items: center; min-width: 0; height: 100%; }
.sidebar-brand .brand-logo { display: block; max-height: 48px; max-width: 200px; object-fit: contain; }   /* block: no text-line gap under it, so it sits centered */
.sidebar-close { display: none; }
.sidebar-nav { padding: .75rem; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.nav-link {
  display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem;
  border-radius: var(--radius-sm); color: inherit; text-decoration: none; font-weight: 500;
}
.nav-link > :not(.nav-badge) { opacity: .85; }   /* dim the label and icon, never the red count */
.nav-link:hover { background: color-mix(in srgb, currentColor 8%, transparent); opacity: 1; }
.nav-link:is(:hover, .active) > * { opacity: 1; }
.nav-link.active {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--sidebar-accent, var(--primary)); opacity: 1; font-weight: 600;
  box-shadow: inset 3px 0 0 var(--primary);
}

.main { margin-left: var(--sidebar-w); min-height: 100%; display: flex; flex-direction: column; transition: margin .25s var(--ease); }
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h);
  display: flex; align-items: center; gap: .75rem; padding: 0 1rem;
  background: color-mix(in srgb, var(--topbar-color, var(--surface)) 90%, transparent);   /* Site Settings → Top bar */
  color: var(--topbar-ink, var(--text));
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-title { font-size: 1.1rem; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: .5rem; }
.content { padding: 1.5rem; max-width: 1200px; width: 100%; margin-inline: auto; }

/* Light/dark logo swap */
[data-theme="dark"] .logo-light, :root:not([data-theme="dark"]) .logo-dark { display: none; }

/* Theme icon swap */
[data-theme="dark"] .i-moon, :root:not([data-theme="dark"]) .i-sun { display: none; }

/* Desktop: collapsible */
body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
body.sidebar-collapsed .main { margin-left: 0; }

/* ---------- User menu ---------- */
.user-menu { position: relative; }
.user-btn {
  display: flex; align-items: center; gap: .6rem; padding: 4px 4px 4px 10px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font: inherit; cursor: pointer;
}
.user-btn:hover { border-color: var(--muted); }
.user-name { font-weight: 600; font-size: .9rem; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; flex: none; }
.avatar-initials { background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: .85rem; }
.avatar-lg { width: 96px; height: 96px; font-size: 1.8rem; }
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: .35rem; z-index: 50;
}
.user-dropdown a { display: block; padding: .55rem .75rem; border-radius: 6px; color: var(--text); text-decoration: none; }
.user-dropdown a:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }

/* ---------- Placeholder ---------- */
.placeholder {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 3rem 1.5rem; text-align: center; color: var(--muted);
}
.placeholder svg { opacity: .6; margin-bottom: .75rem; }

/* ---------- Profile ---------- */
.avatar-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.form-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }

/* ---------- Admin color grid ---------- */
.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.color-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--border); }
.color-row:last-child { border-bottom: 0; }
.color-row label { font-weight: 500; font-size: .92rem; }
.color-input { display: flex; align-items: center; gap: .5rem; }
.color-input input[type=color] { width: 42px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
.color-input input[type=text] { width: 96px; padding: .35rem .5rem; font-family: ui-monospace, monospace; font-size: .85rem; }
.preview {
  margin-top: 1rem; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid; display: grid; grid-template-columns: 90px 1fr; min-height: 110px; font-size: .82rem;
}
.preview .p-side { padding: .6rem; }
.preview .p-main { padding: .75rem; }
.preview .p-top { margin: -.75rem -.75rem .6rem; padding: .3rem .6rem; font-size: .75rem; font-weight: 700; }
.preview .p-card { border: 1px solid; border-radius: 6px; padding: .6rem; }
.preview .p-btn { display: inline-block; margin-top: .5rem; padding: .25rem .6rem; border-radius: 5px; font-weight: 600; }
.logo-preview { max-height: 72px; background: repeating-conic-gradient(color-mix(in srgb, var(--text) 8%, transparent) 0 25%, transparent 0 50%) 0 0/16px 16px; padding: 8px; border-radius: 6px; border: 1px solid var(--border); }

/* ---------- Admin: templates, logos, default mode ---------- */
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.preset { position: relative; cursor: pointer; }
.preset input { position: absolute; opacity: 0; pointer-events: none; }
.preset-card {
  display: block; border: 2px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface); transition: border-color .15s, box-shadow .15s;
}
.preset:hover .preset-card { border-color: var(--muted); }
.preset input:checked + .preset-card { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.preset input:focus-visible + .preset-card { outline: 2px solid var(--primary); outline-offset: 2px; }
.preset-swatch { display: grid; grid-template-columns: 1fr 1fr; height: 54px; }
.preset-swatch span { display: grid; place-items: center; padding-left: 30%; }
.preset-swatch i { width: 26px; height: 26px; border-radius: 50%; display: block; }
.preset-name { display: flex; justify-content: space-between; align-items: center; padding: .4rem .6rem; font-weight: 600; font-size: .88rem; }
.preset-check { color: var(--primary-text); visibility: hidden; }
.preset input:checked + .preset-card .preset-check { visibility: visible; }
.preset-custom .preset-swatch { background: conic-gradient(#ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7, #ef4444); }
.section-label { font-weight: 700; font-size: .95rem; margin: 0 0 .6rem; }

.logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.logo-slot { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; }
.logo-stage { height: 90px; border-radius: 6px; display: grid; place-items: center; margin-bottom: .75rem; padding: 10px; border: 1px solid; }
.logo-stage img { max-height: 70px; max-width: 100%; object-fit: contain; }
.logo-stage.light { background: #ffffff; color: #1d2521; border-color: #dde3df; }
.logo-stage.dark  { background: #161c19; color: #e6ece8; border-color: #2b3530; }

.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; flex-wrap: wrap; }
.segmented label { cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; padding: .55rem 1rem; font-weight: 600; font-size: .9rem; border-right: 1px solid var(--border); }
.segmented label:last-child span { border-right: 0; }
.segmented input:checked + span { background: var(--primary); color: var(--on-primary); }
.segmented input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: -3px; }

details.custom-colors > summary { cursor: pointer; font-weight: 600; margin-bottom: 1rem; }

/* ---------- Mobile ---------- */
.sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 35;
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease);
}

@media (max-width: 899px) {
  .sidebar { transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,.25); }
  .sidebar-close { display: inline-grid; }
  .main { margin-left: 0; }
  body.sidebar-open .sidebar { transform: none; }
  body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  body.sidebar-open { overflow: hidden; }
  .content { padding: 1rem; }
  .user-name { display: none; }
  .user-btn { padding: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

.sr-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- View loader ---------- */
.content:focus { outline: none; }
.auth-card .content { padding: 0; max-width: none; }
.content > .view { animation: view-in .18s var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
body.is-loading .content { opacity: .55; transition: opacity .15s .15s; }

.load-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100;
  background: var(--primary); opacity: 0; pointer-events: none;
}
body.is-loading .load-bar { opacity: 1; width: 80%; transition: width 2s cubic-bezier(.1,.7,.2,1), opacity .1s; }

/* ---------- Modal ---------- */
.modal {
  width: min(560px, calc(100% - 32px)); max-height: calc(100% - 64px);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 0;
  background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.modal::backdrop { background: rgba(0,0,0,.5); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .75rem .75rem 1.25rem; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: 1.15rem; }
.modal-body { padding: 1.25rem; overflow-y: auto; }

.alert-warning { background: color-mix(in srgb, #e0a100 14%, transparent); border-color: color-mix(in srgb, #e0a100 45%, transparent); }

/* ---------- Buttons (extra) ---------- */
.btn-sm { padding: .4rem .7rem; font-size: .85rem; }
.btn-danger { background: transparent; color: #c93c3c; border-color: color-mix(in srgb, #c93c3c 45%, transparent); }
.btn-danger:hover { background: #c93c3c; color: #fff; }
[data-theme="dark"] .btn-danger { color: #f07b7b; border-color: color-mix(in srgb, #f07b7b 45%, transparent); }
[data-theme="dark"] .btn-danger:hover { background: #d94848; color: #fff; }
input[type=search] { width: 100%; padding: .55rem .8rem; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* ---------- User management ---------- */
.content:has(.um-table) { max-width: 1400px; }
.um-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.um-search { max-width: 280px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.um-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.um-table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: .7rem .75rem; background: color-mix(in srgb, var(--text) 4%, transparent); border-bottom: 1px solid var(--border); white-space: nowrap; }
.um-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.um-table tbody tr:last-child td { border-bottom: 0; }
.um-table tbody tr:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.um-table td time { white-space: nowrap; }
.um-table select { padding: .4rem .5rem; font-size: .88rem; min-width: 140px; }
.um-coach { min-width: 190px !important; }
.um-email { word-break: break-all; font-weight: 600; }
.um-actions { text-align: right; }
.um-save { align-items: center; }
.um-dirty { font-size: .88rem; color: #b27c00; }
[data-theme="dark"] .um-dirty { color: #f0c04a; }
.um-empty { margin: 1rem 0 0; }

/* Wide tables stack into cards whenever there isn't room for every column (no sideways scroll box) */
@media (max-width: 1199px) {
  .um-search { max-width: none; }
  .table-wrap { border: 0; overflow: visible; }
  .um-table thead { display: none; }
  .um-table, .um-table tbody, .um-table tr, .um-table td { display: block; width: 100%; }
  .um-table tr { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .25rem; margin-bottom: .75rem; }
  .um-table td { border: 0; padding: .35rem .75rem; display: grid; grid-template-columns: 7.5rem 1fr; gap: .5rem; align-items: center; }
  .um-table td::before { content: attr(data-label); font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
  .um-table td.um-actions { display: block; text-align: left; padding-top: .5rem; }
  .um-table td.um-actions::before { content: none; }
  .um-table select { width: 100%; min-width: 0 !important; }
}

/* ---------- Nutritional settings ---------- */
.nutrient-list { border: 0; padding: 0; margin: 0 0 1.25rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; }
.nutrient { display: flex; align-items: center; gap: .65rem; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background: var(--bg); }
.nutrient:hover { border-color: var(--muted); }
.nutrient:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 60%, transparent); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.nutrient input { width: 1.1rem; height: 1.1rem; accent-color: var(--primary); margin: 0; }
.nutrient-name { font-weight: 600; flex: 1; }
.nutrient-unit { color: var(--muted); font-size: .82rem; }

/* ==========================================================
   Daily Tracking
   ========================================================== */
.tracking { max-width: 1320px; margin-inline: auto; }
.content:has(.tracking) { max-width: 1400px; }
.meal-grid { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.meal-grid > .card + .card { margin-top: 0; }
@media (min-width: 1200px) {
  .meal-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .totals-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .total { padding: .8rem 1rem; }
  .total-val { font-size: 1.5rem; }
}
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--primary-text); cursor: pointer; font-weight: 600; }
.dot { margin: 0 .1rem; opacity: .5; }

/* Day switcher */
.day-bar { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.day-step { border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.day-pick { position: relative; }
.day-btn {
  display: grid; grid-template-columns: 1fr auto; column-gap: .6rem; align-items: center; text-align: left;
  min-width: 250px; padding: .45rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
}
.day-btn:hover { border-color: var(--muted); }
.day-main { font-weight: 700; font-size: 1.05rem; }
.day-sub { grid-column: 1; font-size: .8rem; color: var(--muted); }
.day-caret { grid-row: 1 / span 2; grid-column: 2; color: var(--muted); }
.day-btn[aria-expanded=true] .day-caret { transform: rotate(180deg); }

.cal-pop {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 45;
  width: 300px; padding: .75rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.cal-title { font-size: .98rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-dow span { font-size: .72rem; font-weight: 700; color: var(--muted); padding: .25rem 0; }
.cal-day {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px;
  color: var(--text); text-decoration: none; font-size: .9rem;
}
.cal-day:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.cal-day.is-today { font-weight: 800; color: var(--primary-text); }
.cal-day.is-selected { background: var(--primary); color: var(--on-primary); font-weight: 700; }
.cal-day.has-food::after, .cal-dot {
  content: ""; position: absolute; bottom: 4px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--primary);
}
.cal-day.is-selected.has-food::after { background: var(--on-primary); }
.cal-dot { position: relative; display: inline-block; bottom: 1px; left: 0; margin: 0 .3rem 0 0; }
.cal-foot { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border); }

/* Totals */
.totals-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.totals-head h2 { margin: 0; font-size: 1.1rem; }
.totals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .6rem; }
.total { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .7rem; display: flex; flex-direction: column; }
.total-val { font-size: 1.25rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.total-label { font-size: .78rem; color: var(--muted); }
.total-cal { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.total-cal .total-val { color: var(--primary-text); }

/* Meal sections */
.meal-card { padding: 1rem 1.25rem; }
.meal-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.meal-head h3 { margin: 0; font-size: 1.05rem; }
.meal-cal { font-weight: 700; color: var(--primary-text); font-size: .92rem; font-variant-numeric: tabular-nums; }
.meal-actions { margin-left: auto; display: flex; gap: .4rem; }
.meal-empty { color: var(--muted); margin: .6rem 0 0; font-size: .9rem; }
.meal-sub { margin: .5rem 0 0; padding-top: .5rem; border-top: 1px dashed var(--border); font-size: .8rem; color: var(--muted); }
.entry-list { list-style: none; margin: .6rem 0 0; padding: 0; }
.entry { display: flex; align-items: center; gap: .5rem; border-top: 1px solid var(--border); }
.entry:first-child { border-top: 0; }
.entry-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  padding: .6rem .25rem; background: none; border: 0; font: inherit; color: var(--text); cursor: pointer; border-radius: 6px;
}
.entry-main:hover .entry-name { color: var(--primary-text); }
.entry-name { font-weight: 600; }
.entry-brand { font-weight: 400; color: var(--muted); font-size: .85rem; }
.entry-serving { font-size: .85rem; color: var(--muted); }
.entry-mini { font-size: .76rem; color: var(--muted); opacity: .9; }
.entry-cal { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3rem; text-align: right; }
.entry-del .icon-btn { width: 34px; height: 34px; color: var(--muted); }
.entry-del .icon-btn:hover { color: #c93c3c; }

/* Toast (left/right + auto margins, not left:50%, so it can never widen the page) */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: 24px; margin: 0 auto; width: fit-content;
  transform: translateY(20px); z-index: 120;
  background: var(--text); color: var(--surface); padding: .65rem 1.1rem; border-radius: 999px;
  font-weight: 600; font-size: .9rem; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; text-align: center;
}
.toast.show { opacity: 1; transform: none; }

/* ---------- Add-food pop-up ---------- */
.modal.modal-lg { width: min(640px, calc(100% - 24px)); }
.modal.modal-lg .modal-body { min-height: 420px; }
.picker-slot { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; font-size: .92rem; }
.picker-slot label { font-weight: 600; }
.picker-slot select { width: auto; padding: .4rem .6rem; }
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }   /* tabs can still be swiped sideways on narrow screens */
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: .55rem .8rem; margin-bottom: -1px;
  font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--primary-text); border-bottom-color: var(--primary); }
.tab-count:not(:empty) { display: inline-block; min-width: 1.3em; padding: 0 .35em; margin-left: .2rem; border-radius: 999px; font-size: .75rem; background: color-mix(in srgb, var(--muted) 18%, transparent); }
.search-row { display: flex; gap: .5rem; margin-bottom: .75rem; }
.picker-empty { color: var(--muted); text-align: center; padding: 2rem 1rem; margin: 0; }
.picker-hint { font-size: .84rem; color: var(--muted); margin: 0 0 .6rem; }
.food-row { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--border); }
.food-row:last-child { border-bottom: 0; }
.food-open { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: .65rem .25rem; background: none; border: 0; font: inherit; color: var(--text); cursor: pointer; }
.food-open:hover .food-name { color: var(--primary-text); }
.food-name { font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }
.fav-mark { color: #e0a100; display: inline-flex; }
.fav-mark svg { width: 14px; height: 14px; }
.food-meta { font-size: .83rem; color: var(--muted); }
.food-cal { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.food-cal small { font-weight: 400; color: var(--muted); }
.quick-btn { color: var(--primary-text); border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); width: 36px; height: 36px; }
.quick-btn:hover { background: var(--primary); color: var(--on-primary); }
.saved-meal { display: flex; gap: .75rem; align-items: center; justify-content: space-between; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.saved-meal:last-child { border-bottom: 0; }
.saved-meal-info { display: flex; flex-direction: column; min-width: 0; }
.saved-meal-items { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved-meal-actions { display: flex; align-items: center; gap: .25rem; flex: none; }

.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin: .75rem 0 1rem; }
.detail-head h3 { margin: 0; font-size: 1.2rem; }
.detail-head p { margin: .15rem 0 0; }
.fav-btn { color: var(--muted); border: 1px solid var(--border); }
.fav-btn.on { color: #e0a100; border-color: color-mix(in srgb, #e0a100 50%, transparent); }
.detail-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .75rem; }
.stepper { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.stepper .icon-btn { width: 38px; height: 40px; font-size: 1.2rem; font-weight: 700; flex: none; }
.stepper input { border: 0; background: transparent; text-align: center; padding: .55rem 0; min-width: 0; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nut-table { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: .25rem 0 1rem; }
.nut-row { display: flex; justify-content: space-between; padding: .45rem .8rem; border-top: 1px solid var(--border); font-size: .92rem; }
.nut-row:first-child { border-top: 0; }
.nut-row b { font-variant-numeric: tabular-nums; }
.nut-cal { font-weight: 700; background: color-mix(in srgb, var(--primary) 8%, transparent); }
.nut-cal b { color: var(--primary-text); font-size: 1.05rem; }
.detail-remove { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }

.save-items { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .4rem .9rem .6rem; margin: 0 0 1rem; }
.save-items legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }
.save-item { padding: .45rem 0; border-bottom: 1px solid var(--border); }
.save-item:last-child { border-bottom: 0; }
.save-item > span { display: flex; flex-direction: column; }

@media (max-width: 599px) {
  .day-btn { min-width: 0; width: calc(100vw - 150px); max-width: 260px; padding: .4rem .7rem; }
  .day-today { order: 5; }
  .cal-pop { position: fixed; top: 120px; left: 12px; right: 12px; width: auto; max-width: 340px; margin: 0 auto; transform: none; }
  .meal-actions .btn span { display: none; }
  .meal-actions .btn { padding: .45rem .55rem; }
  .detail-grid { grid-template-columns: 1fr 1fr; }
  .detail-grid .field:first-child { grid-column: 1 / -1; }
  .totals-head .btn { padding: .55rem .8rem; }
  .modal.modal-lg { width: 100%; max-width: 100%; max-height: 100%; height: 100%; margin: 0; border-radius: 0; }
  .modal.modal-lg .modal-body { min-height: 0; }
  .saved-meal { flex-wrap: wrap; }
}

/* Tracking polish */
.entry-mini span, .meal-sub span { white-space: nowrap; }
.meal-sub-label { font-weight: 700; }
.total-val small { font-size: .7rem; font-weight: 600; color: var(--muted); margin-left: .15rem; }
.total-cal .total-val small { color: inherit; }
.total-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Phone fixes ---------- */
/* Nothing may make the page wider than the screen */
html { overflow-x: hidden; }            /* older browsers; keeps the sticky top bar working */
@supports (overflow: clip) { html, body { overflow-x: clip; } }
.main, .content-wrap { min-width: 0; }

/* iPhone Safari zooms into any text box under 16px and can stay zoomed
   (which looks like the right edge is cut off). 16px stops that. */
@media (max-width: 899px), (pointer: coarse) {
  input[type=text], input[type=email], input[type=password], input[type=search],
  input[type=number], input[type=date], input[type=time], input[type=url], input[type=tel],
  input:not([type]), input[type=datetime-local], input[type=month], input[type=week],
  select, textarea, [contenteditable] { font-size: 16px; }
}
/* Safari gives date fields and selects a wide built-in minimum width; let them shrink to fit */
input, select, textarea { max-width: 100%; min-width: 0; }
input[type=date], input[type=time] { -webkit-appearance: none; appearance: none; min-height: 2.6rem; display: block; }
input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value { text-align: left; }
.unit-input input, .range-custom input, .stepper input { display: inline-block; }
/* Grid and flex items may shrink below their content's width (prevents sideways scrolling) */
.content > .view, .content > .view > *, .card, .field, .panel, .main > * { min-width: 0; }
body { overflow-wrap: break-word; }
.main { overflow-x: clip; }
.d-short { display: none; }
@media (max-width: 420px) { .d-long { display: none; } .d-short { display: inline; } }

/* ==========================================================
   My Goals + profile "About you"
   ========================================================== */
.goals { max-width: 1320px; margin-inline: auto; }
.content:has(.goals) { max-width: 1400px; }
.goals > .card, .goals-top > .card { margin: 0; }
.goals > * + * { margin-top: 1.25rem !important; }
.goals-top { display: grid; gap: 1.25rem; }
@media (min-width: 1000px) { .goals-top { grid-template-columns: 1fr 1.3fr; align-items: stretch; } }
.goals h2 { font-size: 1.1rem; }

.unit-input { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; }
.unit-input:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; }
.unit-input input { border: 0; background: transparent; width: 6.5rem; outline: none; -moz-appearance: textfield; }
.unit-input input::-webkit-outer-spin-button, .unit-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.unit-input > span { padding: 0 .7rem; color: var(--muted); font-size: .88rem; border-left: 1px solid var(--border); align-self: stretch; display: grid; place-items: center; }
.unit-input-lg input { font-size: 1.5rem; font-weight: 700; width: 8rem; padding: .5rem .8rem; }
.height-row { display: flex; gap: .5rem; }
.height-row .unit-input input { width: 4rem; }

.stat-list { margin: 0; display: grid; gap: .1rem; }
.stat-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--border); }
.stat-list dt { color: var(--muted); }
.stat-list dd { margin: 0; font-weight: 600; text-align: right; }
.soon { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-weight: 500; font-size: .9rem; }

.tool-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.tool-head h2 { margin: 0; }
.tool-head .btn { margin-left: auto; }
.tool-tag { font-size: .7rem; font-weight: 800; letter-spacing: .06em; padding: .15rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary-text); }
.needs { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .9rem 1rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); margin: .75rem 0; }
.needs p { margin: 0; }
.range-big { font-size: 2rem; font-weight: 800; margin: .5rem 0 .25rem; color: var(--primary-text); letter-spacing: -.01em; }
.range-big small { font-size: 1rem; color: var(--muted); font-weight: 600; }

.bmi-scale { margin: 1.25rem 0 .5rem; }
.bmi-bar { position: relative; display: flex; height: 12px; border-radius: 999px; overflow: visible; }
.bmi-bar .z { height: 100%; }
.bmi-bar .z:first-child { border-radius: 999px 0 0 999px; }
.bmi-bar .z:nth-child(4) { border-radius: 0 999px 999px 0; }
.z-under { background: #7fb3e6; }
.z-healthy { background: #4fb47c; }
.z-over { background: #e8b84a; }
.z-obese { background: #e07a5f; }
.bmi-mark { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.mark-goal, .dot-goal { background: var(--text); }
.mark-cur, .dot-cur { background: var(--primary); }
.bmi-ticks { position: relative; height: 1.2rem; font-size: .72rem; color: var(--muted); }
.bmi-ticks span { position: absolute; transform: translateX(-50%); top: .25rem; }
.bmi-notes { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .4rem; font-size: .92rem; }
.bmi-notes li { display: flex; align-items: center; gap: .45rem; }
.dot-goal, .dot-cur { width: 10px; height: 10px; border-radius: 50%; flex: none; }

.goal-table { border: 1px solid var(--border); border-radius: var(--radius-sm); }
.goal-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(150px, 1fr) minmax(180px, 2fr) 130px; gap: .75rem; align-items: center; padding: .65rem .9rem; border-top: 1px solid var(--border); }
.goal-row:first-child { border-top: 0; }
.goal-row-head { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: color-mix(in srgb, var(--text) 4%, transparent); }
.goal-row.is-focus { background: color-mix(in srgb, var(--primary) 9%, transparent); }
.g-name { display: flex; flex-direction: column; }
.g-name small, .g-suggest small { color: var(--muted); font-size: .78rem; }
.g-suggest { display: flex; flex-direction: column; align-items: flex-start; }
.c-focus { text-align: center; justify-self: center; }
.g-focus { position: relative; cursor: pointer; }
.g-focus input { position: absolute; opacity: 0; pointer-events: none; }
.focus-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .8rem; border: 1px solid var(--border); border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.g-focus:hover .focus-pill { border-color: var(--muted); }
.g-focus input:checked + .focus-pill { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.g-focus input:checked + .focus-pill::before { content: "★"; }
.g-focus input:focus-visible + .focus-pill { outline: 2px solid var(--primary); outline-offset: 2px; }

.needs-list { list-style: none; padding: 0; margin: .75rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .5rem; }
.needs-list li { display: flex; align-items: center; gap: .45rem; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem; }
.needs-list .ok svg { color: var(--primary-text); }
.needs-list .no svg { color: #d0762a; }
.needs-list .wait svg { color: var(--muted); }
.activity-field { max-width: 520px; }
.bmr-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem; margin: .5rem 0 1rem; }
.disclaimer { border-top: 1px solid var(--border); padding-top: .75rem; margin-top: 1rem; }
.goals-save { position: sticky; bottom: 0; z-index: 5; padding: .75rem 1rem; margin-inline: -1rem; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--border); }

.about-you { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .9rem 1rem .25rem; margin: 0 0 1rem; }
.about-you legend { font-weight: 700; padding: 0 .35rem; }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 1rem; }

@media (max-width: 699px) {
  .goal-row-head { display: none; }
  .goal-row { grid-template-columns: 1fr auto; grid-template-areas: "name focus" "input input" "sug sug"; gap: .5rem; }
  .goal-row > :nth-child(1) { grid-area: name; }
  .goal-row > :nth-child(2) { grid-area: input; }
  .goal-row > :nth-child(3) { grid-area: sug; }
  .goal-row > :nth-child(4) { grid-area: focus; }
  .goal-row .unit-input { width: 100%; }
  .goal-row .unit-input input { width: 100%; }
  .range-big { font-size: 1.6rem; }
}

/* ---------- Focus mode ---------- */
.focus-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; background: var(--bg); margin-left: auto; }
.focus-switch button { border: 0; background: none; font: inherit; font-size: .85rem; font-weight: 600; color: var(--muted); padding: .35rem .85rem; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.focus-switch button.on { background: var(--surface); color: var(--primary-text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.totals-head { flex-wrap: wrap; }
.totals-head .focus-switch + .btn { margin-left: 0; }

.total-focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 55%, transparent); }
.total-goal { font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.progress { display: block; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 20%, transparent); overflow: hidden; margin-top: .4rem; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width .4s var(--ease); }
.progress.ok > span { background: #3fa66b; }
.progress.warn > span { background: #e0a100; }
.progress.over > span { background: #d9534f; }
.progress-lg { height: 12px; margin-top: .75rem; }

.focus-hero { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: var(--radius-sm); padding: 1rem 1.25rem; }
.focus-hero-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.focus-hero-label { font-weight: 700; color: var(--primary-text); }
.focus-hero-val { font-size: 2.2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.focus-hero-val small { font-size: 1rem; font-weight: 600; color: var(--muted); margin-left: .2rem; }
.focus-hero-goal { font-size: 1rem; font-weight: 600; color: var(--muted); margin-left: .4rem; }
.focus-hero-note { margin: .5rem 0 0; font-size: .9rem; }
.entry-cal small { font-size: .72rem; color: var(--muted); font-weight: 600; margin-left: .1rem; }

.nut-more summary { cursor: pointer; padding: .45rem .8rem; border-top: 1px solid var(--border); font-size: .85rem; font-weight: 600; color: var(--muted); }
.nut-more[open] summary { color: var(--text); }

.focus-options { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; margin-top: .9rem; }
.focus-only-opt { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; max-width: 620px; }
.focus-only-opt input { position: absolute; opacity: 0; pointer-events: none; }
.focus-only-opt small { display: block; color: var(--muted); font-size: .8rem; margin-top: .1rem; }
.switch { flex: none; width: 40px; height: 22px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 35%, transparent); position: relative; transition: background .2s; margin-top: .1rem; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .2s; }
.focus-only-opt input:checked + .switch { background: var(--primary); }
.focus-only-opt input:checked + .switch::after { transform: translateX(18px); }
.focus-only-opt input:focus-visible + .switch { outline: 2px solid var(--primary); outline-offset: 2px; }
.focus-only-opt.is-disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 599px) {
  .focus-switch { order: 3; margin-left: 0; width: 100%; justify-content: center; }
  .focus-switch button { flex: 1; }
  .focus-hero-val { font-size: 1.8rem; }
}

/* ==========================================================
   Daily Tracking dashboard (panels)
   ========================================================== */
.dash { max-width: 1320px; margin-inline: auto; }
.content:has(.dash) { max-width: 1400px; }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; align-items: stretch; }
.panel-grid > .card + .card { margin-top: 0; }
.panel { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem; }
.panel-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.panel-head h2 { margin: 0; font-size: 1.1rem; }
.panel-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary-text); flex: none; }
.panel-open { margin-left: auto; display: inline-flex; align-items: center; gap: .1rem; font-size: .85rem; font-weight: 600; color: var(--primary-text); }
.panel-big { display: flex; flex-direction: column; }
.panel-val { font-size: 2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.panel-val small { font-size: .95rem; font-weight: 600; color: var(--muted); margin-left: .2rem; }
.panel-of { color: var(--muted); font-size: .88rem; }
.panel .progress { height: 8px; margin-top: .6rem; }
.progress.none > span { background: transparent; }
.panel-status { margin: .35rem 0 0; font-size: .9rem; }
.panel-empty { color: var(--muted); font-size: .9rem; margin: .5rem 0 0; }
.panel-foot { font-size: .8rem; margin: .25rem 0 0; }
.panel-actions { margin-top: auto; padding-top: .9rem; display: flex; gap: .5rem; }

.slot-recap { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.slot-recap li { display: flex; flex-direction: column; padding: .45rem .55rem; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); min-width: 0; }
.slot-recap span { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-recap b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.slot-recap li.empty b { color: var(--muted); font-weight: 500; }
.mini-goals { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .45rem; }
.mini-goals li { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: .6rem; align-items: center; font-size: .8rem; }
.mini-goals .progress { margin: 0; height: 6px; }
.mg-label { font-weight: 600; white-space: nowrap; }
.mg-val { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Whole Meals panel opens Meal Tracking; its own buttons/links sit above the cover link */
.panel-cover { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.panel-link { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.panel-link:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow: 0 6px 22px rgba(0,0,0,.08); }
.panel-link:has(.panel-cover:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.panel-inner, .panel-link .panel-actions .btn { position: relative; z-index: 2; }
.panel-soon .panel-icon { background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); }
.panel-soon .panel-val { color: var(--muted); }
.soon-tag { margin-left: auto; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); }

.back-link { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; text-decoration: none; margin-bottom: .5rem; }
@media (max-width: 599px) { .slot-recap { grid-template-columns: repeat(2, 1fr); } .panel-val { font-size: 1.7rem; } }

.slot-recap b small { font-size: .68rem; font-weight: 600; color: var(--muted); margin-left: .15rem; }

/* ---------- Weight panel ---------- */
.w-facts { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .35rem; }
.w-facts li { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .5rem; align-items: baseline; font-size: .88rem; padding: .35rem 0; border-top: 1px solid var(--border); }
.w-facts li > span { color: var(--muted); }
.w-facts small { color: var(--muted); font-weight: 400; }
.chg { font-style: normal; font-weight: 700; font-size: .82rem; white-space: nowrap; }
.chg.good { color: #1f7a46; } .chg.bad { color: #b2412f; } .chg.flat { color: var(--muted); }
[data-theme="dark"] .chg.good { color: #5fd08f; } [data-theme="dark"] .chg.bad { color: #f08a75; }
.w-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: auto; padding-top: .9rem; }
.w-form .unit-input input { width: 5.5rem; padding: .45rem .6rem; }
.w-goal-form input[type=text] { flex: 1 1 100%; order: -1; padding: .45rem .7rem; }
.future-tag { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary-text); }
.panel-of b { color: var(--text); }
.dated-head { font-size: .95rem; margin: 1rem 0 .4rem; }
.dated-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.dated-goals li { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.dated-goals li.is-past { opacity: .7; }
.dg-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dg-main small { color: var(--muted); }
.stat-list dd small { font-weight: 400; margin-left: .3rem; }
/* Weight facts wrap instead of overflowing the panel */
.w-facts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; }
.w-facts li > span { flex: 0 0 6.5rem; }
.w-facts li > b { flex: 1 1 auto; min-width: 0; }
.w-facts li > .chg { margin-left: auto; white-space: normal; text-align: right; }
.w-facts li > .pace-warn { flex-basis: 100%; text-align: left; margin-left: 0; padding-left: 7rem; font-weight: 600; }
@media (max-width: 380px) { .w-facts li > .pace-warn { padding-left: 0; } }

/* ---------- Exercise ---------- */
.exercise-screen h2 small { font-size: .85rem; font-weight: 500; margin-left: .4rem; }
.week-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
.wk-goal { display: flex; flex-direction: column; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.wk-label { font-size: .8rem; color: var(--muted); font-weight: 600; }
.wk-val { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.wk-val small { font-size: .85rem; color: var(--muted); font-weight: 600; margin-left: .2rem; }
.wk-of { font-size: .95rem; color: var(--muted); font-weight: 600; }
.wk-goal .progress { margin-top: .45rem; }
.wk-note { font-size: .82rem; margin-top: .35rem; }
.wk-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; margin-top: 1.1rem; }
.wk-day { display: flex; flex-direction: column; align-items: center; gap: .2rem; text-decoration: none; color: var(--text); border-radius: 8px; padding: .35rem 0; }
.wk-day:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.wk-day.is-sel { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.wk-bar-wrap { height: 80px; width: 60%; max-width: 34px; display: flex; align-items: flex-end; border-radius: 6px; background: color-mix(in srgb, var(--muted) 12%, transparent); overflow: hidden; }
.wk-bar { width: 100%; background: var(--primary); border-radius: 6px 6px 0 0; min-height: 0; }
.wk-bar.zero { height: 0 !important; }
.wk-dmin { font-size: .75rem; font-weight: 700; min-height: 1.1em; font-variant-numeric: tabular-nums; }
.wk-dname { font-size: .75rem; color: var(--muted); }
.wk-day.is-today .wk-dname { color: var(--primary-text); font-weight: 800; }
.ex-grid { grid-template-columns: 1fr 1fr; }
.ex-cal input { width: 100%; }
.ex-cal { width: 100%; }
.ex-reset { font-size: .82rem; margin-top: .35rem; }
.ex-note { margin-top: 0; }
.ex-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1.5rem; align-items: start; }
.ex-now { align-self: center; }
.ex-mini { margin-top: .75rem; }
.ex-mini li { grid-template-columns: 5rem 1fr auto; }
@media (max-width: 599px) { .ex-grid { grid-template-columns: 1fr; } .wk-bar-wrap { height: 60px; } .wk-chart { gap: .2rem; } }

/* ---------- Food search wait ---------- */
.search-wait { display: flex; align-items: center; gap: .6rem; padding: 1.5rem .5rem; color: var(--muted); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--primary) 25%, transparent); border-top-color: var(--primary); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Profile preferences ---------- */
.label-like { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .9rem; }
.prefs-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1.25rem; }
.prefs-tz { grid-column: 1 / -1; }
.prefs .segmented span { padding: .5rem .85rem; }

/* ---------- Simple trackers ---------- */
.panel-feature .w-form { margin-top: auto; }
.f-water .unit-input input { width: 4.5rem; }
.w-form select { width: auto; padding: .45rem .6rem; }
.w-form input[type=text] { flex: 1 1 10rem; padding: .45rem .7rem; }
.f-note { font-size: .85rem; flex: 1; }
.q-chip { display: inline-block; margin-left: .5rem; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; vertical-align: middle; }
.q-restful { background: color-mix(in srgb, #3fa66b 18%, transparent); color: #2e8a56; }
.q-average { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
.q-spotty { background: color-mix(in srgb, #e0a100 20%, transparent); color: #9a6f00; }
.q-difficult { background: color-mix(in srgb, #d9534f 18%, transparent); color: #b8423e; }
[data-theme="dark"] .q-restful { color: #6fd39a; } [data-theme="dark"] .q-spotty { color: #f0c04a; } [data-theme="dark"] .q-difficult { color: #f08a75; }
.v-yes { color: #2e9a5e; }
[data-theme="dark"] .v-yes { color: #5fd08f; }

/* Goals: daily habits */
.habit-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1.5rem; }
.habit label, .habit .label-like { display: flex; align-items: center; gap: .4rem; }
.habit-ico { display: inline-grid; place-items: center; color: var(--primary-text); }
.habit-ico svg { width: 18px; height: 18px; }
.habit .unit-input input { width: 7rem; }
.habit-glp1 { grid-column: 1 / -1; }
.glp1-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.sub-label { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; font-weight: 600; color: var(--muted); }
.sub-label input, .sub-label select { min-width: 12rem; }

/* Admin: features */
.feat-table .c { text-align: center; }
.feat-name { display: inline-flex; align-items: center; gap: .45rem; }
.feat-desc { display: block; margin-top: .15rem; }
.feat-check input { width: 1.2rem; height: 1.2rem; accent-color: var(--primary); cursor: pointer; }
@media (max-width: 899px) { .feat-table td.c { text-align: left; } }

/* ==========================================================
   Charts dashboard
   ========================================================== */
.charts-page { max-width: 1320px; margin-inline: auto; }
.content:has(.charts-page) { max-width: 1400px; }
.range-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .9rem 1.1rem; margin-bottom: 1.25rem; }
.range-presets, .cc-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.range-pill { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: .4rem .85rem; font: inherit; font-size: .88rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.range-pill:hover { border-color: var(--muted); }
.range-pill.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.range-pill.sm { padding: .3rem .7rem; font-size: .82rem; }
.range-custom { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.range-custom input { width: auto; padding: .4rem .55rem; }
.range-custom .btn.on { border-color: var(--primary); color: var(--primary-text); }
.range-note { flex-basis: 100%; margin: 0; font-size: .85rem; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.stat-row:empty { display: none; }
.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .85rem 1rem; display: flex; flex-direction: column; }
.st-label { font-size: .8rem; color: var(--muted); font-weight: 600; }
.st-val { font-size: 1.7rem; font-weight: 800; line-height: 1.2; }
.st-val small { font-size: .85rem; color: var(--muted); font-weight: 600; margin-left: .25rem; }
.st-sub { font-size: .78rem; color: var(--muted); }

.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.chart-grid > .card + .card { margin-top: 0; }
.chart-card.wide { grid-column: 1 / -1; }
.chart-card { padding: 1.1rem 1.25rem; }
.cc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .6rem; }
.cc-head h2 { font-size: 1.05rem; margin: 0; }
.cc-sub { margin: .2rem 0 0; font-size: .85rem; color: var(--muted); }
.cc-table-btn { font-size: .85rem; flex: none; }
.cc-pills { margin-bottom: .75rem; }
.cc-canvas { position: relative; width: 100%; }
.cc-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .6rem; font-size: .82rem; color: var(--text); }
.cc-legend:empty { display: none; }
.lg-item { display: inline-flex; align-items: center; gap: .4rem; }
.lg-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.lg-goal { width: 16px; height: 0; border-top: 2px dashed var(--muted); display: inline-block; }
.lg-pie { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .3rem 1.25rem; }
.lg-pie .lg-item { align-items: baseline; }
.lg-pie .lg-item .lg-sw { align-self: center; }
.lg-pie .lg-item b { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: .5rem; }
.lg-pie .lg-item small { color: var(--muted); width: 2.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.cc-table { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.cc-tbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
.cc-tbl th { position: sticky; top: 0; background: var(--surface); text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .5rem .7rem; border-bottom: 1px solid var(--border); }
.cc-tbl td { padding: .4rem .7rem; border-bottom: 1px solid var(--border); }
.cc-tbl td.n { text-align: right; font-variant-numeric: tabular-nums; }
.chart-empty p { margin: .25rem 0 0; }
@media (max-width: 899px) {
  .chart-grid { grid-template-columns: minmax(0, 1fr); }
  .range-custom { margin-left: 0; flex-wrap: wrap; }
}

/* ---------- Competitions ---------- */
.comp-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.medal-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.medal { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: .9rem; font-variant-numeric: tabular-nums; }
.medal .star { font-size: 1.15rem; }
.comp-section { font-size: 1.1rem; margin: 1.75rem 0 .75rem; display: flex; align-items: center; gap: .4rem; }
.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.comp-grid .card + .card { margin-top: 0; }
.comp-card { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: 1.25rem; }
.comp-card .panel-actions form, .comp-actions form { position: relative; z-index: 2; margin: 0; }
.comp-card .panel-actions .comp-note { margin: 0; position: relative; z-index: 2; }
.comp-card-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.comp-cat { font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--primary-text); }
.comp-status { font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); white-space: nowrap; }
.comp-status.comp-active { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--text); }
.comp-name { font-size: 1.15rem; margin: .2rem 0 0; overflow-wrap: anywhere; }
.comp-meta { margin: 0; font-size: .88rem; }
.comp-me { margin-top: .6rem; }
.comp-me-row, .board-line { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.comp-note { margin: .6rem 0 0; font-size: .88rem; color: var(--muted); }
.comp-rules { margin-bottom: 1.25rem; padding: .9rem 1.25rem; }
.comp-rules summary { cursor: pointer; font-weight: 700; }
.comp-rules ul { list-style: none; padding: 0; margin: .75rem 0 .5rem; display: grid; gap: .35rem; }
.comp-rules p { margin: 0; font-size: .88rem; }
.comp-detail { max-width: 860px; margin: 0 auto; }
.comp-detail .comp-rules { margin-top: 1.25rem; }
.comp-title { font-size: 1.5rem; margin: .35rem 0 1rem; overflow-wrap: anywhere; }
.comp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem 1.25rem; margin: 0; }
.comp-facts dt { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.comp-facts dd { margin: .15rem 0 0; font-weight: 600; }
.comp-actions { flex-wrap: wrap; align-items: center; }
.comp-board-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.comp-board-head h2 { margin: 0; }
.comp-board-head p { margin: 0; font-size: .88rem; }
.board { list-style: none; margin: 0; padding: 0; }
.board-row { display: flex; align-items: center; gap: .85rem; padding: .85rem 0; border-top: 1px solid var(--border); }
.board-row:first-child { border-top: 0; }
.board-row.is-me { background: color-mix(in srgb, var(--primary) 7%, transparent); margin: 0 -.75rem; padding-left: .75rem; padding-right: .75rem; border-radius: var(--radius-sm); }
.board-rank { width: 1.6rem; text-align: center; font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; flex: none; }
.board-main { flex: 1; min-width: 0; }
.board-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-val { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.board-sub { margin-top: .3rem; font-size: .8rem; flex-wrap: wrap; }
.stars { display: inline-flex; gap: .1rem; flex: none; }
.star { font-size: 1.2rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.3px color-mix(in srgb, var(--muted) 55%, transparent); paint-order: stroke fill; }
/* Earned stars: filled, with a darker outline of the same metal so they stand out (silver especially) */
.star.on { -webkit-text-stroke-width: 1px; }
.star.on.star-bronze { color: #c47a3a; -webkit-text-stroke-color: #7a4a1e; }
.star.on.star-silver { color: #b4bcc6; -webkit-text-stroke-color: #5d6773; }
.star.on.star-gold   { color: #f0b800; -webkit-text-stroke-color: #8f6a00; }
[data-theme="dark"] .star.on.star-bronze { color: #d99058; -webkit-text-stroke-color: #f3c49b; }
[data-theme="dark"] .star.on.star-silver { color: #aeb7c2; -webkit-text-stroke-color: #eef2f6; }
[data-theme="dark"] .star.on.star-gold   { color: #f5c542; -webkit-text-stroke-color: #fde7a3; }
.star.on.provisional { opacity: .75; }
@media (forced-colors: active) { .star { color: CanvasText; -webkit-text-stroke: 0; } .star:not(.on) { opacity: .4; } }
.comp-vis { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.comp-vis legend { font-weight: 600; font-size: .9rem; margin-bottom: .4rem; padding: 0; }
.comp-vis .check input { accent-color: var(--primary); }
.hint-block { display: block; font-size: .82rem; }
.comp-goal-hint { margin: -.5rem 0 1rem; color: var(--muted); font-size: .82rem; min-height: 1em; }
.comp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.comp-form-grid select, .comp-form-grid input[type=date] { width: 100%; }
.comp-form-grid .unit-input { width: 100%; }
.comp-form-grid .unit-input input { width: 100%; flex: 1; }
@media (max-width: 520px) {
  .comp-head .btn { width: 100%; justify-content: center; }
  .comp-form-grid { grid-template-columns: 1fr; }
  .board-row { gap: .6rem; }
  .board-row .avatar { width: 28px; height: 28px; font-size: .75rem; }
}
.comp-vis .check { display: flex; font-weight: 400; margin: 0; }
.comp-vis .check > span { display: flex; flex-direction: column; gap: .1rem; }
.comp-vis .check strong { font-weight: 600; }
.nav-badge { margin-left: auto; min-width: 1.35rem; height: 1.35rem; padding: 0 .4rem; border-radius: 999px; background: #b42318; color: #fff; font-size: .75rem; font-weight: 800; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.nav-badge:empty { display: none; }
.results-in { margin-bottom: 1.25rem; border-color: color-mix(in srgb, #d9a400 55%, var(--border)); background: color-mix(in srgb, #d9a400 8%, var(--surface)); padding: 1rem 1.25rem; }
.results-in-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.results-in-head h2 { margin: 0; font-size: 1.15rem; }
.results-in-head form { margin: 0; }
.results-list { list-style: none; margin: .75rem 0 0; padding: 0; }
.results-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--border); }
.results-list li:first-child { border-top: 0; }
.results-list a { display: flex; flex-direction: column; color: inherit; text-decoration: none; min-width: 0; }
.results-list a:hover .results-name { color: var(--primary-text); text-decoration: underline; }
.results-name { font-weight: 700; overflow-wrap: anywhere; }
.results-list .muted { font-size: .85rem; }
.comp-daily { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.comp-status.comp-ended { background: color-mix(in srgb, #e0a100 18%, transparent); color: var(--text); }
.comp-sub { margin: -.4rem 0 .75rem; font-size: .88rem; }
.admin-comp .card + .card { margin-top: 1.25rem; }
.level-checks { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: 1rem 0; }
.daily-toggle { margin: .5rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.contest-filter { display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: flex-end; margin: 1rem 0 .5rem; }
.contest-filter .field { min-width: 160px; }
.contest-filter select { max-width: 320px; }
.contest-filter-btns { display: flex; gap: .5rem; }
.contest-h { font-size: 1rem; margin: 1.5rem 0 .6rem; }
.contest-table .c { text-align: center; white-space: nowrap; }
.contest-item { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: .6rem; }
.contest-item > summary { cursor: pointer; padding: .75rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }
.contest-item > summary .comp-status { margin-left: auto; }
.contest-name { font-weight: 700; }
.contest-item .table-wrap { margin: 0 1rem 1rem; }
.contest-item .panel-empty, .contest-pending { margin: 0 1rem 1rem; font-size: .9rem; }
.contest-stars-text { font-size: .8rem; margin-left: .35rem; }
.results-more { margin: .5rem 0 0; }
@media (max-width: 899px) { .contest-table .c { text-align: left; } }
a.tab { text-decoration: none; display: inline-block; }
.comp-tabs { margin-bottom: 1.25rem; }
.lb-types { flex-basis: 100%; align-items: center; }
.lb-types-label { font-size: .85rem; margin-right: .2rem; }
.lb-stat { align-items: flex-start; gap: .1rem; }
.lb-stat .star { font-size: 1.3rem; }
.lb-stat-val { font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lb-row .board-main { display: flex; flex-direction: column; }
.lb-entered { font-size: .8rem; }
.lb-counts { display: flex; gap: .75rem; flex: none; }
.lb-count { display: inline-flex; align-items: center; gap: .2rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.4rem; }
.lb-gap { margin: .5rem 0; text-align: center; }
.level-note { margin: -.5rem 0 1rem; font-size: .85rem; }
@media (max-width: 520px) { .lb-counts { gap: .4rem; } .lb-count { min-width: 2rem; } }

/* ---------- "Enter" tabs (type in a food or exercise) ---------- */
.enter-form .picker-hint { margin-top: 0; }
.enter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 1rem; }
.enter-wide { grid-column: 1 / -1; }
.enter-grid .unit-input { width: 100%; }
.enter-grid .unit-input input { width: 100%; flex: 1; }
.enter-nut { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem 1rem 0; margin: 0 0 1rem; }
.enter-nut legend { font-weight: 600; font-size: .9rem; padding: 0 .35rem; }
.enter-form > .check { margin-bottom: 1rem; }

/* ---------- Community forum ---------- */
.forum-page { max-width: none; margin: 0 auto; }   /* full page width, like Competitions */
.forum-topics { display: grid; gap: .9rem; }
.forum-topics .card + .card { margin-top: 0; }
.forum-topic { position: relative; display: grid; grid-template-columns: 1fr auto minmax(180px, 240px); gap: .5rem 1.5rem; align-items: center; padding: 1.1rem 1.25rem; }
.ft-name { font-size: 1.1rem; margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ft-desc { margin: .2rem 0 0; font-size: .9rem; }
.ft-perm { font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); white-space: nowrap; }
.ft-stats { display: flex; gap: 1rem; font-size: .88rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ft-last { display: flex; flex-direction: column; font-size: .85rem; min-width: 0; }
.ft-last-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-rules { text-align: center; font-size: .85rem; margin: 1.5rem 0 0; }
.forum-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin: .25rem 0 1rem; }
.forum-head p { margin: .2rem 0 0; }
.forum-title { font-size: 1.45rem; margin: 0; overflow-wrap: anywhere; }
.thread-list { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.thread-row { display: grid; grid-template-columns: auto 1fr 5.5rem 8.5rem; gap: .9rem; align-items: center; padding: .85rem 1.25rem; border-top: 1px solid var(--border); }
.thread-row:first-child { border-top: 0; }
.thread-main { display: flex; flex-direction: column; min-width: 0; }
.thread-title { font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.thread-title:hover { color: var(--primary-text); text-decoration: underline; }
.thread-meta { font-size: .82rem; }
.thread-count { font-size: .88rem; text-align: right; font-variant-numeric: tabular-nums; }
.thread-last { font-size: .8rem; line-height: 1.35; }
.coach-badge, .op-badge { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: .1rem .45rem; border-radius: 999px; vertical-align: middle; }
.coach-badge { background: var(--primary); color: var(--on-primary); }
.op-badge { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
.forum-pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1rem 0; font-size: .88rem; }
.thread-h { margin-top: .25rem; }
.thread-sub { margin: .25rem 0 1rem; font-size: .88rem; }
.post { padding: 1.1rem 1.25rem; }
.forum-thread .card + .card { margin-top: .9rem; }
.post-first { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.post.flash { animation: postflash 2s ease-out; }
@keyframes postflash { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent); } to { box-shadow: var(--shadow); } }
.post-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.post-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.post-name { font-weight: 700; overflow-wrap: anywhere; }
.post-time { font-size: .8rem; }
.post-tools { display: flex; gap: .35rem; flex: none; }
.post-tools form { margin: 0; }
.post-body { line-height: 1.6; overflow-wrap: anywhere; }
.post-body p { margin: 0 0 .6rem; }
.post-body > :last-child { margin-bottom: 0; }
.post-body ul, .post-body ol { margin: 0 0 .6rem; padding-left: 1.4rem; }
.post-body blockquote { margin: 0 0 .6rem; padding: .4rem .9rem; border-left: 3px solid var(--primary); background: color-mix(in srgb, var(--muted) 8%, transparent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.post-body a { color: var(--primary-text); }
.post-images { display: grid; gap: .4rem; margin-top: .8rem; grid-template-columns: repeat(2, 1fr); max-width: 640px; }
.post-images.n1 { grid-template-columns: 1fr; max-width: 520px; }
.post-img { display: block; border-radius: var(--radius-sm); overflow: hidden; background: color-mix(in srgb, var(--muted) 10%, transparent); }
.post-img img { display: block; width: 100%; height: 100%; max-height: 420px; object-fit: cover; aspect-ratio: 4 / 3; }
.post-images.n1 .post-img img { aspect-ratio: auto; object-fit: contain; }
.like-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--border); font-size: .88rem; min-height: 2.2rem; }
.like-btn { display: inline-flex; align-items: center; gap: .35rem; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 700; padding: .35rem .6rem; border-radius: var(--radius-sm); cursor: pointer; }
.like-btn:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.like-btn.on { color: var(--primary-text); }
.reply-box h3 { margin: 0 0 .6rem; font-size: 1rem; }
.forum-compose .card h2 { font-size: 1.2rem; margin: 0 0 1rem; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.85); display: grid; place-items: center; padding: 1rem; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; }
.lightbox-close { position: absolute; top: 1rem; right: 1rem; color: #fff; background: rgba(0,0,0,.4); }
/* Editor */
.editor { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; }
.editor:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; }
.ed-toolbar { display: flex; flex-wrap: wrap; gap: .15rem; padding: .3rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.ed-btn { display: inline-grid; place-items: center; min-width: 2.1rem; height: 2.1rem; border: 0; background: none; color: var(--text); border-radius: 6px; cursor: pointer; font: inherit; font-size: 1rem; }
.ed-btn:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.ed-btn.on { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary-text); }
.ed-sep { width: 1px; background: var(--border); margin: .3rem .2rem; }
.ed-linkrow { display: flex; gap: .4rem; padding: .4rem; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }
.ed-linkrow .ed-url { flex: 1; min-width: 180px; }
.ed-area { min-height: 9rem; max-height: 60vh; overflow-y: auto; padding: .75rem .9rem; line-height: 1.6; outline: none; overflow-wrap: anywhere; font-size: 1rem; }
.ed-area:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.ed-area p { margin: 0 0 .5rem; }
.ed-area blockquote { margin: 0 0 .5rem; padding: .3rem .8rem; border-left: 3px solid var(--primary); background: color-mix(in srgb, var(--muted) 8%, transparent); }
.ed-area ul, .ed-area ol { margin: 0 0 .5rem; padding-left: 1.4rem; }
.ed-area a { color: var(--primary-text); }
.reply-box .ed-area { min-height: 6rem; }
.img-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: .75rem 0 1rem; }
.img-pick-btn { position: relative; cursor: pointer; }
.img-pick-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.img-hint { margin: 0; }
.img-previews { display: flex; flex-wrap: wrap; gap: .4rem; flex-basis: 100%; }
.img-previews:empty { display: none; }
.img-previews img, .edit-img img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.edit-images { border: 0; padding: 0; margin: 0 0 .5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.edit-images legend { font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.edit-img { position: relative; cursor: pointer; }
.edit-img input { position: absolute; top: 4px; left: 4px; width: 1.1rem; height: 1.1rem; accent-color: var(--primary); }
.edit-img input:not(:checked) + img { opacity: .35; }
@media (max-width: 760px) {
  .forum-topic { grid-template-columns: 1fr; gap: .5rem; }
  .ft-last { flex-direction: row; gap: .4rem; flex-wrap: wrap; }
  .thread-row { grid-template-columns: auto 1fr auto; padding: .8rem 1rem; }
  .thread-last { display: none; }
  .post { padding: 1rem; }
  .post-tools .btn { padding: .35rem .55rem; }
}
.admin-forum .card + .card, .admin-forum form + form, .admin-forum form + section { margin-top: 1.25rem; }
.forum-admin-table select { min-width: 8.5rem; }
.fa-topic { min-width: 260px; }
.fa-topic input { display: block; width: 100%; }
.fa-topic input + input { margin-top: .35rem; font-size: .88rem; }
.fa-order { white-space: nowrap; }
.fa-order .icon-btn { width: 30px; height: 30px; font-size: .75rem; }
.fa-order .icon-btn:disabled { opacity: .3; }
.fa-new { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 1rem; }
.fa-new .field:nth-child(-n+2) { grid-column: span 2; }
@media (max-width: 899px) { .fa-new .field:nth-child(-n+2) { grid-column: 1 / -1; } }
@media (max-width: 1199px) { .fa-topic { min-width: 0; } }
.ed-linkrow[hidden] { display: none; }
.forum-admin-table select { min-width: 7.75rem; width: auto; }
@media (max-width: 1199px) { .forum-admin-table select { width: 100%; min-width: 0; } }
.forum-admin-table th { white-space: normal; }
.fa-topic { min-width: 180px; }
.fa-posts { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: .85rem; }

/* Reactions (Facebook style) */
:root { --rx-like: #1b6fd8; --rx-love: #d42a4b; --rx-yellow: #8f5f00; }
[data-theme="dark"] { --rx-like: #6aa8ff; --rx-love: #ff6b86; --rx-yellow: #f5c542; }
.rx-summary { display: inline-flex; align-items: center; gap: .4rem; border: 0; background: none; padding: .2rem .3rem; margin-left: -.3rem; border-radius: var(--radius-sm); color: var(--muted); font: inherit; cursor: pointer; min-width: 0; }
.rx-summary:hover .rx-who { text-decoration: underline; color: var(--text); }
.rx-icons { display: inline-flex; }
.rx-icons .rx-img { border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); position: relative; }
.rx-icons .rx-img + .rx-img { margin-left: -5px; }
.rx-icons .rx-img:nth-child(1) { z-index: 3; } .rx-icons .rx-img:nth-child(2) { z-index: 2; } .rx-icons .rx-img:nth-child(3) { z-index: 1; }
.rx-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-action { position: relative; margin-left: auto; }
.like-btn { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.like-btn .rx-img { display: block; }
.like-btn.on.rx-like { color: var(--rx-like); }
.like-btn.on.rx-love { color: var(--rx-love); }
.like-btn.on.rx-haha, .like-btn.on.rx-smile, .like-btn.on.rx-silly, .like-btn.on.rx-sad { color: var(--rx-yellow); }
.like-btn.pop .rx-img { animation: rxpop .35s ease-out; }
@keyframes rxpop { 0% { transform: scale(.4); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
.rx-picker { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30; display: flex; gap: .15rem; padding: .35rem .45rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 8px 28px rgba(0,0,0,.18); animation: rxin .18s ease-out; }
.rx-picker[hidden] { display: none; }
@keyframes rxin { from { opacity: 0; transform: translateY(6px) scale(.95); } to { opacity: 1; transform: none; } }
.rx-pick { position: relative; border: 0; background: none; padding: 0; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border-radius: 50%; transition: transform .15s; }
.rx-pick .rx-img { width: 38px; height: 38px; transition: transform .15s; }
.rx-pick:hover .rx-img, .rx-pick:focus-visible .rx-img { transform: scale(1.3) translateY(-4px); }
.rx-pick.on { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.rx-pick::after { content: attr(data-label); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(20,20,20,.88); color: #fff; font-size: .72rem; font-weight: 700; padding: .15rem .45rem; border-radius: 999px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
.rx-pick:hover::after, .rx-pick:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rx-picker, .like-btn.pop .rx-img { animation: none; } .rx-pick .rx-img { transition: none; } }
@media (max-width: 420px) { .rx-pick { width: 40px; height: 40px; } .rx-pick .rx-img { width: 34px; height: 34px; } }
.rx-tab { display: inline-flex; align-items: center; gap: .3rem; }
.rx-people { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.rx-people li { display: flex; align-items: center; gap: .75rem; padding: .55rem 0; border-top: 1px solid var(--border); }
.rx-people li:first-child { border-top: 0; }
.rx-people li[hidden] { display: none; }
.rx-face { position: relative; flex: none; }
.rx-badge { position: absolute; right: -4px; bottom: -4px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.rx-name { flex: 1; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.rx-label { font-size: .82rem; }
.btn-mod { color: #c93c3c; }
[data-theme="dark"] .btn-mod { color: #f07b7b; }
.forum-set { margin-top: .9rem; }
/* One photo per post, placed by the author */
.post-content::after { content: ""; display: block; clear: both; }
.post-figure .post-img { display: block; border-radius: var(--radius-sm); overflow: hidden; background: color-mix(in srgb, var(--muted) 10%, transparent); }
.post-figure .post-img + .post-img { margin-top: .4rem; }
.post-figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.img-top .post-figure, .img-bottom .post-figure { display: flex; flex-direction: column; align-items: center; }
.img-top .post-figure { margin-bottom: .8rem; }
.img-bottom .post-figure { margin-top: .8rem; }
.img-top .post-img, .img-bottom .post-img { max-width: min(100%, 800px); }
.img-left .post-figure, .img-right .post-figure { width: min(42%, 340px); margin-bottom: .5rem; }
.img-left .post-figure { float: left; margin-right: 1.1rem; }
.img-right .post-figure { float: right; margin-left: 1.1rem; }
.img-left .post-figure img, .img-right .post-figure img { width: 100%; }
@media (max-width: 520px) {
  .img-left .post-figure, .img-right .post-figure { float: none; width: auto; margin: 0 0 .8rem; display: flex; justify-content: center; }
}
.img-pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.img-previews { display: inline-flex; align-items: center; gap: .3rem; flex-basis: auto; }
.img-previews .img-clear { width: 28px; height: 28px; font-size: .8rem; }
.img-current img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); display: block; }
.img-current.removed img, .img-current.replaced img { opacity: .3; }
.img-remove { margin: 0; }
.img-pos { border: 0; padding: 0; margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.img-pos[hidden] { display: none; }
.img-pos legend { font-weight: 600; font-size: .88rem; margin-bottom: .35rem; padding: 0; }
.img-pos-opt { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; padding: .45rem .6rem; min-width: 5.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--muted); background: var(--surface); }
.img-pos-opt input { position: absolute; opacity: 0; pointer-events: none; }
.img-pos-opt:has(input:checked) { border-color: var(--primary); color: var(--primary-text); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.img-pos-opt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 480px) {
  .picker .tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 0; }
  .picker .tab { padding: .5rem .6rem; font-size: .9rem; }
}

/* ---------- Buddies & Buddy Chat ---------- */
.content:has(.chat-app) { max-width: 1300px; }
.chat-app { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 1.25rem; height: calc(100vh - var(--topbar-h) - 3rem); height: calc(100dvh - var(--topbar-h) - 3rem); min-height: 460px; }
.chat-app .card + .card { margin-top: 0; }
.chat-side { padding: 1rem; overflow-y: auto; display: flex; flex-direction: column; }
.chat-side-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.chat-side-head h2 { margin: 0; font-size: 1.2rem; }
.privacy-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .6rem 0 .75rem; border-bottom: 1px solid var(--border); }
.privacy-label { font-size: .85rem; font-weight: 600; }
.privacy-hint { flex-basis: 100%; margin: 0; font-size: .8rem; color: var(--muted); }
.chat-sec { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 1rem 0 .4rem; display: flex; align-items: center; gap: .35rem; }
.buddy-rows { list-style: none; margin: 0; padding: 0; }
.buddy-row { display: flex; align-items: center; gap: .65rem; padding: .55rem .5rem; border-radius: var(--radius-sm); color: inherit; text-decoration: none; }
a.buddy-row:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
a.buddy-row.on { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.buddy-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; }
.buddy-name .muted { font-weight: 400; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buddy-row.unread .buddy-preview { color: var(--text); font-weight: 600; }
.buddy-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex: none; }
.buddy-time { font-size: .75rem; }
.buddy-meta .nav-badge { margin-left: 0; }
.req-row { flex-wrap: wrap; }
.req-actions { display: flex; gap: .35rem; align-items: center; margin: 0; }
.req-state { font-size: .82rem; }
.chat-empty-side { font-size: .9rem; }
.chat-main { padding: 0; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.chat-placeholder { margin: auto; text-align: center; color: var(--muted); padding: 2rem; }
.chat-placeholder svg { opacity: .5; }
.chat-head { display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.chat-back { display: none; }
.chat-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-who .muted { font-size: .8rem; }
.chat-remove { margin: 0; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .15rem; background: color-mix(in srgb, var(--bg) 60%, var(--surface)); overscroll-behavior: contain; }
.chat-day { text-align: center; margin: .9rem 0 .5rem; }
.chat-day span { font-size: .75rem; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .15rem .65rem; }
.chat-hello, .chat-more { text-align: center; font-size: .88rem; margin: .5rem 0; }
.msg { display: flex; flex-direction: column; max-width: 78%; margin-top: .35rem; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg.theirs { align-self: flex-start; align-items: flex-start; }
.msg-wrap { position: relative; display: flex; align-items: center; gap: .3rem; max-width: 100%; }
.msg.mine .msg-wrap { flex-direction: row-reverse; }
.msg-bubble { padding: .55rem .85rem; border-radius: 18px; line-height: 1.45; overflow-wrap: anywhere; white-space: normal; max-width: 100%; -webkit-touch-callout: none; }
.msg.mine .msg-bubble { background: var(--primary); color: var(--on-primary); border-bottom-right-radius: 6px; }
.msg.mine .msg-bubble a { color: inherit; text-decoration: underline; }
.msg.theirs .msg-bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 6px; }
.msg-bubble:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.msg-react-btn { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .12s; }
.msg:hover .msg-react-btn, .msg.picking .msg-react-btn, .msg-react-btn:focus-visible { opacity: 1; }
.msg-react-btn:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
@media (hover: none) { .msg-react-btn { display: none; } }
.msg-picker { bottom: calc(100% + 4px); }
.msg.theirs .msg-picker { left: 0; right: auto; }
.msg.mine .msg-picker { right: 0; left: auto; }
.msg-foot { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--muted); padding: .15rem .4rem 0; }
.msg-time { opacity: .85; }
.msg-rx { display: inline-flex; align-items: center; gap: .1rem; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: .05rem .35rem; cursor: pointer; font: inherit; font-size: .72rem; color: var(--muted); }
.msg-rx .rx-img { display: block; }
.chat-compose { display: flex; align-items: flex-end; gap: .5rem; padding: .75rem; border-top: 1px solid var(--border); background: var(--surface); }
.chat-compose textarea { flex: 1; resize: none; min-height: 2.75rem; max-height: 140px; border-radius: 22px; padding: .65rem 1rem; line-height: 1.4; }
.chat-send { width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; display: grid; place-items: center; flex: none; }
.buddy-find .search-row { margin-bottom: 1rem; }
.buddy-find .buddy-row { border-top: 1px solid var(--border); border-radius: 0; padding: .7rem .25rem; }
.buddy-find .buddy-row:first-child { border-top: 0; }
@media (max-width: 899px) {
  .chat-app { grid-template-columns: minmax(0, 1fr); height: calc(100vh - var(--topbar-h) - 2rem); height: calc(100dvh - var(--topbar-h) - 2rem); min-height: 380px; }
  .chat-app.has-chat .chat-side, .chat-app:not(.has-chat) .chat-main { display: none; }
  .chat-app:not(.has-chat) { height: auto; min-height: 0; }
  .chat-back { display: inline-grid; margin-left: -.4rem; }
  .chat-head { padding: .55rem .75rem; }
  .chat-remove .btn { padding: .35rem .55rem; font-size: .8rem; }
  .msg { max-width: 86%; }
  .chat-log { padding: .75rem; }
}
.find-row { align-items: flex-start; }
.find-row .avatar { margin-top: .1rem; }
.find-about { font-weight: 400; font-size: .85rem; line-height: 1.4; margin-top: .1rem; overflow-wrap: anywhere; }
.find-row .req-actions { align-self: center; }
.dir-note { margin: 0 0 .75rem; }
.privacy-row .focus-switch { flex-wrap: nowrap; }
.privacy-row .focus-switch button { padding: .35rem .7rem; }
@media (max-width: 480px) { .find-row { flex-wrap: wrap; } .find-row .buddy-name { flex: 1 1 calc(100% - 34px - .65rem); } .find-row .req-actions { margin-left: calc(34px + .65rem); } }
.icon-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.icon-preview { width: 96px; height: 96px; border-radius: 22px; border: 1px solid var(--border); object-fit: cover; }
.icon-sizes { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.icon-sizes figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.icon-sizes img { border-radius: 8px; border: 1px solid var(--border); }
.icon-sizes figcaption { font-size: .75rem; color: var(--muted); }
.icon-bad { color: #c93c3c !important; font-weight: 600; }
[data-theme="dark"] .icon-bad { color: #f07b7b !important; }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 450; }
/* More charts */
.lg-dash, .lg-dot { width: 18px; height: 0; display: inline-block; border-top: 2px dashed currentColor; }
.lg-dot { border-top-style: dotted; border-top-width: 3px; }
.ring-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.25rem 1rem; }
.ring { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; }
.ring-canvas { position: relative; width: 120px; height: 120px; }
.ring-canvas canvas { width: 120px !important; height: 120px !important; }
.ring-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); pointer-events: none; }
.ring-pct small { font-size: .8rem; font-weight: 700; color: var(--muted); margin-left: 1px; }
.ring figcaption { display: flex; flex-direction: column; font-size: .82rem; line-height: 1.35; }
.ring figcaption strong { font-size: .92rem; }
/* My Goals: Simple / Guided */
.goals-mode-bar { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.goals-mode-note { font-size: .85rem; }
.goals:not(.simple) [data-note="simple"], .goals:not(.guided) [data-note="guided"] { display: none; }
.goals.simple .g-guided, .goals.simple .hint, .goals.simple .g-sug-col, .goals.simple .disclaimer { display: none !important; }
.goals.simple .goals-top { grid-template-columns: minmax(0, 1fr); }
.goals.simple .card { padding: 1rem 1.25rem; }
.goals.simple .card h2 { font-size: 1.05rem; margin-bottom: .6rem; }
.goals.simple .field { margin-bottom: .6rem; }
.goals.simple .goal-row { grid-template-columns: minmax(5.5rem, 1fr) minmax(7rem, 10rem) auto; grid-template-areas: "name input focus"; gap: .6rem; padding: .5rem .75rem; }
.goals.simple .goal-row > :nth-child(1) { grid-area: name; }
.goals.simple .goal-row > :nth-child(2) { grid-area: input; }
.goals.simple .goal-row > :nth-child(4) { grid-area: focus; }
.goals.simple .goal-row .unit-input, .goals.simple .goal-row .unit-input input { width: 100%; }
.goals.simple .g-name small { font-size: .72rem; }
.goals.simple .goal-row-head { display: none; }
.goals.simple .habit-goals, .goals.simple .ex-goals { gap: 0 1rem; }
.goals.simple .focus-only-opt small { display: none; }

.goals.simple .g-name strong { overflow-wrap: normal; word-break: normal; }
.goals.simple .habit-goals { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.goals.simple .habit-glp1 { grid-column: 1 / -1; }
.goals.simple .habit .unit-input, .goals.simple .habit .unit-input input { width: 100%; }
.goals.simple .ex-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.goals.simple .ex-goals .unit-input, .goals.simple .ex-goals .unit-input input { width: 100%; }
.goals.simple .unit-input-lg input { font-size: 1.1rem; }
@media (max-width: 480px) {
  .goals.simple .g-name small { display: none; }
  .goals.simple .focus-pill { padding: .3rem .55rem; font-size: .75rem; }
  .goals-mode { width: 100%; }
  .goals-mode button { flex: 1; }
}
.goals-mode { order: -1; }
.goals.simple .g-name strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.goals.simple .unit-input > span { white-space: nowrap; font-size: .8rem; padding: 0 .5rem; }
@media (max-width: 480px) { .goals.simple .goal-row { grid-template-columns: minmax(0, 1fr) 6.75rem auto; } }
/* Help & Settings */
.settings-page { max-width: none; margin: 0 auto; }   /* full page width, like Competitions */
.settings-page .card + .card { margin-top: 1.25rem; }
.settings-h { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.tracker-list { display: grid; gap: .25rem; }
.tracker-opt { position: relative; display: flex; align-items: center; gap: .75rem; padding: .6rem .5rem; border-radius: var(--radius-sm); cursor: pointer; }
.tracker-opt:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.tracker-opt input { position: absolute; opacity: 0; pointer-events: none; }
.tracker-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tracker-text small { font-size: .82rem; }
.tracker-opt .switch { margin-top: 0; }
.tracker-opt:has(input:checked) .switch { background: var(--primary); }
.tracker-opt:has(input:checked) .switch::after { transform: translateX(18px); }
.tracker-opt:has(input:focus-visible) .switch { outline: 2px solid var(--primary); outline-offset: 2px; }
.settings-save { margin-top: 1.25rem; }
.faq { display: grid; gap: .25rem; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { cursor: pointer; padding: .7rem 0; font-weight: 600; }
.faq-item p { margin: 0 0 .9rem; line-height: 1.55; }
.help-more { margin: 1rem 0 0; font-size: .88rem; }
.profile-prefs-note { margin: .5rem 0 1rem; }
.settings-page .prefs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 1.25rem; }
.settings-page .prefs-tz { grid-column: 1 / -1; }
.settings-page .segmented { flex-wrap: nowrap; display: inline-flex; max-width: 100%; }
.settings-page .segmented span { white-space: nowrap; }
/* Admin: "Admin |" before the page title */
.admin-tag { color: var(--admin-tag, #c62f2f); font-weight: 800; font-size: 1.1rem; white-space: nowrap; margin-right: -.4rem; }
[data-theme="dark"] .admin-tag { color: var(--admin-tag, #ff7b7b); }
.extra-h { margin: 1.5rem 0 .75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: 1.05rem; }
.req { font-weight: 400; color: var(--muted); font-size: .82rem; }
.extra-set { margin-bottom: .5rem; }
/* Program Access (admin) */
.access-page { max-width: 1000px; }
.access-page .card + .card { margin-top: 1.25rem; }
.access-summary { display: grid; gap: .5rem; }
.acc-stat { display: flex; align-items: baseline; gap: .5rem; }
.acc-num { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.acc-bar { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 20%, transparent); overflow: hidden; }
.acc-bar span { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
.acc-note { margin: 0; font-size: .9rem; }
.acc-full { color: #c62f2f; }
.acc-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: .5rem 1.5rem; padding: 1.1rem 0; border-top: 1px solid var(--border); }
.acc-row:first-of-type { border-top: 0; padding-top: .25rem; }
.acc-label { font-weight: 600; padding-top: .6rem; display: flex; align-items: center; gap: .4rem; align-self: start; }
.acc-field .hint { margin: .35rem 0 0; }
.acc-code-input { font-size: 1.1rem !important; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.acc-wide { width: 100%; margin-top: .75rem; justify-content: center; }
.acc-inline { display: flex; gap: .5rem; }
.acc-inline input { flex: 1; }
.acc-codes { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92rem; line-height: 1.6; min-height: 6rem; }
.acc-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.acc-actions .link-btn { font-weight: 700; font-size: .95rem; }
.acc-spacer { flex: 1; }
@media (max-width: 700px) { .acc-row { grid-template-columns: minmax(0, 1fr); } .acc-label { padding-top: 0; } }
.req-code { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.req-code h3 { font-size: 1rem; margin-bottom: .75rem; }
.auth-closed { text-align: center; margin: 1rem 0; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.contact-sent { padding: 1rem 1.1rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); }
.contact-sent p { margin: 0 0 .75rem; }
/* My Assets (admin) */
.assets-page { max-width: 1200px; }
.assets-page > .card + .card { margin-top: 1.25rem; }
.as-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.as-count { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.as-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin: 1rem 0; }
.as-img { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.as-img > a { display: grid; place-items: center; height: 120px; background: color-mix(in srgb, var(--muted) 10%, transparent); }
.as-img img { max-width: 100%; max-height: 120px; object-fit: contain; }
.as-img figcaption { padding: .5rem .6rem; display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; }
.as-tag { align-self: flex-start; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; font-weight: 700; border: 1px dashed var(--border); background: var(--bg); color: var(--text); border-radius: 6px; padding: .1rem .4rem; cursor: copy; }
.as-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-inline { display: inline; margin: 0; }
.as-del { color: #c62f2f; }
[data-theme="dark"] .as-del { color: #ff7b7b; }
.as-upload { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding-top: 1rem; border-top: 1px solid var(--border); }
.as-upload input[type=file] { width: auto; max-width: 100%; }
.as-upload .hint { flex-basis: 100%; margin: 0; }
.as-table .n { text-align: right; font-variant-numeric: tabular-nums; }
.as-table td { vertical-align: middle; }
.as-thumb { width: 40px; height: 40px; object-fit: contain; display: block; border-radius: 6px; }
.as-noimg { background: color-mix(in srgb, var(--muted) 12%, transparent); }
.as-link { font-size: .78rem; margin-left: .35rem; }
.as-acts { white-space: nowrap; }
.as-acts .link-btn { margin-left: .6rem; font-weight: 600; }
.as-desc { max-width: 380px; font-size: .88rem; }
.as-form { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.as-form h3 { font-size: 1rem; margin: 0 0 .75rem; }
.as-grid3 { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr; gap: 0 1rem; }
.as-serving { max-width: 420px; }
.as-nutr { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 .6rem; }
.as-nutr label small { font-weight: 400; color: var(--muted); margin-left: .25rem; }
.as-grid-ex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
.as-grid-ex .as-wide { grid-column: span 2; }
.as-cur { display: flex; align-items: center; gap: .75rem; margin-bottom: .4rem; }
.as-cur .as-thumb { width: 56px; height: 56px; border: 1px solid var(--border); }
.as-submit { min-width: 12rem; }
@media (max-width: 899px) {
  .as-grid3, .as-grid-ex { grid-template-columns: minmax(0, 1fr); }
  .as-grid-ex .as-wide { grid-column: auto; }
  .as-nutr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .as-table .n { text-align: left; }
}
@media (max-width: 480px) { .as-nutr { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.food-row.has-thumb { gap: .6rem; }
.food-thumb { width: 40px; height: 40px; object-fit: contain; flex: none; border-radius: 6px; }
.ours-cat { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: .9rem 0 .25rem; }
.ours-cat:first-child { margin-top: 0; }
.prog-info { display: flex; gap: .9rem; align-items: flex-start; margin: 0 0 1rem; padding: .75rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--muted) 8%, transparent); }
.prog-info img { width: 72px; height: 72px; object-fit: contain; flex: none; }
.prog-info p { margin: 0 0 .35rem; font-size: .9rem; line-height: 1.5; }
.prog-info a { font-weight: 600; font-size: .88rem; }

/* Custom Pages (admin) */
.cp-admin { max-width: 980px; display: grid; gap: 1.25rem; }
.cp-picker { display: flex; flex-wrap: wrap; gap: .5rem; }
.cp-pick { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); text-decoration: none; font-size: .88rem; font-weight: 600; }
.cp-pick:hover { border-color: var(--primary); }
.cp-pick.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary, #fff); }
.cp-dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; border: 2px solid currentColor; opacity: .45; }
.cp-dot.cp-live { background: #2e9d5b; border-color: #2e9d5b; opacity: 1; }
.cp-dot.cp-working { background: #d9822b; border-color: #d9822b; opacity: 1; }
.cp-pick.on .cp-dot { box-shadow: 0 0 0 2px #fff; }
.cp-form-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cp-form-head h2 { margin: 0; }
.cp-status { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .2rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); }
.cp-status.cp-live { background: color-mix(in srgb, #2e9d5b 18%, transparent); color: #217a45; }
.cp-status.cp-working { background: color-mix(in srgb, #d9822b 20%, transparent); color: #9a5410; }
[data-theme="dark"] .cp-status.cp-live { color: #6fd39a; }
[data-theme="dark"] .cp-status.cp-working { color: #f2b06b; }
.cp-form .ed-area { min-height: 260px; }
.cp-tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.cp-tagbtn { display: flex; flex-direction: column; align-items: stretch; gap: .4rem; padding: .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.cp-tagbtn > img { width: 100%; height: 80px; object-fit: contain; border-radius: 4px; background: color-mix(in srgb, var(--muted) 10%, transparent); }
.cp-tagbtn code { font-size: .8rem; font-weight: 700; text-align: center; }

/* Custom pages (members) */
.cp-page { max-width: 860px; }
.cp-card .cp-title, .cp-panel .cp-title { margin: 0 0 .75rem; }
.cp-panel { min-width: 0; }
.cp-panel .cp-body { font-size: .95rem; }
/* Links in custom pages are buttons */
.cp-body a.cp-btn { color: var(--on-primary); text-decoration: none; display: inline-flex; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; margin: .25rem .25rem .25rem 0; }
.cp-body a.cp-btn:hover { color: var(--on-primary); }
.cp-body p:has(> a.cp-btn:only-child) { margin: .6rem 0; }
.cp-form .ed-area a { display: inline-block; padding: .15rem .65rem; border-radius: var(--radius-sm); background: var(--primary); color: var(--on-primary); text-decoration: none; font-weight: 600; }
.cp-wkbadge { display: inline-block; margin: 0 0 .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em; padding: .2rem .6rem; border-radius: 999px; background: color-mix(in srgb, #d9822b 20%, transparent); color: #9a5410; }
[data-theme="dark"] .cp-wkbadge { color: #f2b06b; }
.cp-preview { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1rem; font-size: .85rem; }
.cp-preview .chip { display: inline-flex; gap: .35rem; align-items: center; padding: .3rem .7rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none; background: var(--surface); }
.cp-preview .chip.on { border-color: var(--primary); color: var(--primary-text); font-weight: 700; }
.cp-wk { font-size: .65rem; font-weight: 700; color: #9a5410; }
[data-theme="dark"] .cp-wk { color: #f2b06b; }
.cp-help { margin-bottom: 1.25rem; }
.cp-terms .cp-title { margin-top: 0; }

/* Insert Assets (admin → Custom Pages) */
.cp-ins-h { font-size: 1rem; margin: 1.25rem 0 .6rem; }
.cp-align { display: flex; flex-wrap: wrap; gap: .35rem; }
.cp-align .btn { flex: 1 1 auto; padding-left: .5rem; padding-right: .5rem; }
.cp-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; margin-top: .5rem; padding-top: .25rem; border-top: 1px solid var(--border); }
.cp-tool .field { margin-bottom: .6rem; }
.cp-tool .cp-align .btn { flex: 0 1 auto; }
@media (max-width: 700px) { .cp-tools { grid-template-columns: minmax(0, 1fr); } }

/* Images and videos in custom pages: centered, or floated left/right at up to half the width */
.cp-body { display: flow-root; }
.cp-img { height: auto; border-radius: var(--radius-sm); }
.cp-img.cp-center { display: block; max-width: 100%; margin: .75rem auto; }
.cp-img.cp-left { float: left; max-width: 50%; margin: .25rem 1rem .5rem 0; }
.cp-img.cp-right { float: right; max-width: 50%; margin: .25rem 0 .5rem 1rem; }
.yt-embed { display: block; width: 100%; max-width: 800px; margin: .75rem auto; }
.yt-embed.cp-left { float: left; width: 50%; margin: .25rem 1rem .5rem 0; }
.yt-embed.cp-right { float: right; width: 50%; margin: .25rem 0 .5rem 1rem; }
.yt-box { display: block; position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: #000; }
.yt-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cp-lists { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; align-items: center; }
.cp-list-hint { margin: -.2rem 0 .6rem; }

/* Food & exercise lists on custom pages */
.pl-list { display: flex; flex-direction: column; margin: .75rem 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; clear: both; }
.pl-cat { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0; padding: .6rem .85rem .3rem; background: color-mix(in srgb, var(--muted) 7%, transparent); }
.pl-row { display: flex; align-items: center; gap: .8rem; padding: .6rem .85rem; }
.pl-row + .pl-row { border-top: 1px solid var(--border); }
.pl-thumb { width: 56px; height: 56px; object-fit: contain; flex: none; border-radius: 6px; }
.pl-noimg { background: color-mix(in srgb, var(--muted) 12%, transparent); }
.pl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.pl-name { font-weight: 700; }
.pl-meta { font-size: .85rem; color: var(--muted); }
.pl-desc { font-size: .85rem; line-height: 1.4; }
.pl-track { flex: none; }
.pl-acts { display: flex; gap: .4rem; flex: none; align-items: center; }
.pl-nuts { display: flex; flex-wrap: wrap; gap: .1rem .7rem; font-size: .8rem; color: var(--muted); margin-top: .1rem; }
.pl-n b { color: var(--text); font-weight: 700; }
.pl-n.pl-focus { color: var(--primary-text); font-weight: 600; }
.pl-n.pl-focus b { color: var(--primary-text); }
@media (max-width: 480px) { .pl-acts { flex-direction: column; align-items: stretch; } }
.pl-empty { color: var(--muted); font-style: italic; }
.cp-panel .pl-thumb { width: 44px; height: 44px; }
.cp-panel .pl-row { padding: .5rem .65rem; gap: .6rem; }
.food-nuts { margin-top: .15rem; }
.food-open .food-nuts { display: flex; }
.food-focus { display: block; font-size: .72rem; font-weight: 600; color: var(--primary-text); text-align: right; }

/* Floating save bar (forms with data-float-save; see floatSaves() in app.js) */
.float-save:not(.fs-on) { display: none; }
.float-save .fs-note { display: none; }
.float-save.fs-on {
  position: fixed; z-index: 70; right: 1.5rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px) + var(--fs-i, 0) * 4.5rem);
  display: flex; align-items: center; gap: .6rem; margin: 0;
  padding: .55rem .6rem .55rem 1.1rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
  animation: fsIn .18s ease-out;
}
.float-save.fs-on .fs-note { display: inline; font-size: .85rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.float-save.fs-on .btn { border-radius: 999px; }
body.has-float-save .content-wrap { padding-bottom: 6.5rem; }
@keyframes fsIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .float-save.fs-on { animation: none; } }
.float-save.fs-on { flex-wrap: nowrap; flex-direction: row; }
.float-save.fs-on > * { flex: 0 0 auto; width: auto; margin: 0; }
.float-save.fs-on .btn { white-space: nowrap; }
@media (max-width: 640px) {
  .float-save.fs-on { left: .75rem; right: .75rem; justify-content: flex-end; padding: .45rem .5rem .45rem .9rem; gap: .4rem; }
  .float-save.fs-on .fs-note { margin-right: auto; font-size: .8rem; }
  .float-save.fs-on .btn { padding: .55rem .85rem; font-size: .88rem; }
}
@media (max-width: 420px) { .float-save.fs-on .fs-note { display: none; } }

/* Start fresh */
.danger-zone { margin-top: 1.25rem; border-color: color-mix(in srgb, #c93c3c 35%, var(--border)); }
.danger-zone h2 { color: #b83232; }
[data-theme="dark"] .danger-zone h2 { color: #f07b7b; }
.btn-danger-solid { background: #c93c3c; color: #fff; border-color: #c93c3c; }
.btn-danger-solid:hover { background: #a92f2f; }
.btn-danger-solid:disabled { opacity: .45; cursor: not-allowed; background: #c93c3c; }
.clear-parts { border: 0; padding: 0; margin: 1rem 0; display: grid; gap: .6rem; }
.clear-parts legend { font-weight: 700; margin-bottom: .4rem; }
.clear-opt { align-items: flex-start; }
.clear-opt span { display: flex; flex-direction: column; gap: .1rem; }
.clear-keep { font-size: .88rem; line-height: 1.5; padding: .75rem .9rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--muted) 8%, transparent); margin-bottom: 1rem; }
.field-error { color: #c62f2f; font-weight: 600; margin: 0 0 .5rem; }
[data-theme="dark"] .field-error { color: #ff7b7b; }

/* Coaching */
.staff-badge, .coaching-badge, .coach-link-tag { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .12rem .45rem; border-radius: 999px; vertical-align: middle; line-height: 1.3; }
.staff-badge { background: #6b3fd4; color: #fff; }
[data-theme="dark"] .staff-badge { background: #9b78f0; color: #160a33; }
.coach-link-tag { background: color-mix(in srgb, #6b3fd4 14%, transparent); color: #5a32b8; }
[data-theme="dark"] .coach-link-tag { color: #c4b0ff; background: color-mix(in srgb, #9b78f0 22%, transparent); }
.coaching-badge { background: #b5651d; color: #fff; }
[data-theme="dark"] .coaching-badge { background: #e8a25c; color: #2a1606; }
.forum-topic.ft-coaching { border-color: color-mix(in srgb, #b5651d 45%, var(--border)); background: color-mix(in srgb, #b5651d 5%, var(--surface)); }
.buddy-title { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-width: 0; }
.buddy-name .buddy-title .muted { white-space: normal; }
.chat-who strong .staff-badge { margin-left: .3rem; }
.chat-who .coach-link-tag { margin-right: .25rem; }
.coaching-page { display: grid; gap: 1.25rem; max-width: 1000px; }
.coach-client { display: inline-flex; align-items: center; gap: .55rem; }
.coach-client .avatar { width: 30px; height: 30px; font-size: .72rem; }
.coaching-settings .tracker-opt + .tracker-opt { margin-top: .25rem; }

/* Competition thumbnails: the product, or the coach who started it */
.comp-cat { display: inline-flex; align-items: center; gap: .4rem; }
.comp-thumb { flex: none; display: inline-flex; width: 24px; height: 24px; border-radius: 6px; object-fit: contain; }
.comp-thumb-coach .avatar { width: 24px; height: 24px; font-size: .58rem; }
.comp-thumb-coach { border-radius: 50%; box-shadow: 0 0 0 2px #6b3fd4; }
.comp-thumb.comp-thumb-lg, .comp-thumb-lg .avatar { width: 36px; height: 36px; }
.comp-thumb-lg .avatar { font-size: .75rem; }
.comp-prod-row { display: flex; align-items: center; gap: .6rem; }
.comp-prod-row select { flex: 1; min-width: 0; }
.comp-prod-img img { width: 40px; height: 40px; object-fit: contain; display: block; }

/* Chat: tap a message to react. On touch screens, don't let the phone select text or pop up its own menu. */
.msg-bubble { cursor: pointer; touch-action: manipulation; }
@media (hover: none) { .msg-bubble { -webkit-user-select: none; user-select: none; } }

.um-date { padding: .35rem .5rem; font-size: .88rem; width: auto; min-width: 9.5rem; }
@media (max-width: 1199px) { .um-date { width: 100%; min-width: 0; } }
.cp-signup { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.cp-signup .cp-title { margin: 0 0 .5rem; font-size: 1.1rem; }

/* Coach messages: Daily Tracking (full width below the panels) and the Coaching page */
.coach-msgs { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.coach-msg { border-left: 4px solid #6b3fd4; }
[data-theme="dark"] .coach-msg { border-left-color: #9b78f0; }
.coach-msg-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.coach-msg-head .avatar { width: 40px; height: 40px; }
.coach-msg-from { font-size: .85rem; color: var(--muted); font-weight: 600; display: inline-flex; gap: .35rem; align-items: center; }
.coach-msg-title { margin: .1rem 0 0; font-size: 1.15rem; }
.msg-grid { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 0 1rem; align-items: start; }
.msg-aud { border: 0; padding: 0; margin: 0; }
.msg-aud legend { font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.msg-aud .check { margin-bottom: .25rem; }
@media (max-width: 700px) { .msg-grid { grid-template-columns: 1fr 1fr; } .msg-aud { grid-column: 1 / -1; } }
.msg-status { font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); white-space: nowrap; }
.msg-status.msg-active { background: color-mix(in srgb, #2e9d5b 18%, transparent); color: #217a45; }
[data-theme="dark"] .msg-status.msg-active { color: #6fd39a; }
.msg-status.msg-scheduled { background: color-mix(in srgb, #2a78d6 15%, transparent); color: #1d5fae; }
[data-theme="dark"] .msg-status.msg-scheduled { color: #8dbaf2; }
.coach-msgs > .card + .card { margin-top: 0; }
.coach-msgs-admin .um-actions .link-btn + form, .coach-msgs-admin .um-actions form { margin-left: .6rem; }

.um-stale { color: #c62f2f; font-weight: 700; }
[data-theme="dark"] .um-stale { color: #ff7b7b; }
.terms-fixed { font-size: .9rem; line-height: 1.55; color: var(--muted); margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--border); }
.cp-terms > .terms-fixed:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.terms-fixed-admin { margin: .35rem 0 0; padding: .75rem .9rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--muted) 6%, transparent); }
.forgot-link { text-align: right; margin-top: .35rem; }

.extra-mail { margin-top: 1.25rem; }
.mail-test { display: flex; gap: .5rem; flex-wrap: wrap; }
.mail-test input { flex: 1; min-width: 200px; }
.msg-status.mail-fail { background: color-mix(in srgb, #c62f2f 15%, transparent); color: #b22a2a; }
[data-theme="dark"] .msg-status.mail-fail { color: #ff8b8b; }

/* Getting Started wizard */
.onboard { max-width: 760px; margin-inline: auto; }
.ob-progress { display: flex; align-items: center; gap: .45rem; margin-bottom: 1rem; }
.ob-dot { width: 2.25rem; height: .4rem; border-radius: 999px; background: var(--border); }
.ob-dot.done { background: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.ob-dot.on { background: var(--primary); }
.ob-count { margin-left: .35rem; font-size: .85rem; }
/* "Use it on your phone" QR code (Getting Started step 5, Help Guide) */
.pq { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin: .5rem 0 1rem; }
.pq-code { flex: none; padding: .6rem; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.pq-code canvas { display: block; width: 180px; height: 180px; }
.pq-steps { flex: 1 1 240px; margin: 0; padding-left: 1.25rem; }
.pq-steps li { margin-bottom: .55rem; overflow-wrap: anywhere; }
.ob-card h2 { margin: 0 0 .4rem; }
.ob-card h3 { font-size: 1rem; margin: 1.25rem 0 .6rem; }
.ob-card h3 small { font-weight: 400; margin-left: .35rem; }
.ob-lead { font-size: 1.02rem; margin: 0 0 .5rem; }
.ob-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.ob-remind { display: flex; gap: .45rem; align-items: center; margin: 1rem 0 0; padding: .6rem .8rem; border-radius: var(--radius-sm); font-size: .88rem; background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--text); }
.ob-remind svg { flex: none; color: var(--primary-text); }
.ob-actions { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: 1.25rem; flex-wrap: wrap; }
.ob-right { display: flex; gap: .5rem; margin-left: auto; }
.ob-center { justify-content: center; }
.ob-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; margin: 1rem 0 .5rem; }
.ob-choice { display: flex; gap: .55rem; align-items: flex-start; padding: .75rem .85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background: var(--surface); }
.ob-choice:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); box-shadow: 0 0 0 1px var(--primary); }
.ob-choice input { margin-top: .2rem; accent-color: var(--primary); }
.ob-choice span { display: flex; flex-direction: column; gap: .1rem; }
.ob-choice small { color: var(--muted); font-size: .8rem; }
.ob-choice.ob-all { grid-column: 1 / -1; }
.ob-done { text-align: center; padding-top: 2rem; padding-bottom: 2rem; }
.ob-party { font-size: 3rem; line-height: 1; margin-bottom: .5rem; }
.btn-lg { padding: .85rem 1.6rem; font-size: 1.05rem; }
@media (max-width: 560px) { .ob-grid2 { grid-template-columns: minmax(0, 1fr); } .ob-actions .btn { padding-left: .9rem; padding-right: .9rem; } }

/* Forum polls */
.poll { margin: 1rem 0 .25rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.poll-head { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .7rem; }
.poll-head svg { flex: none; color: var(--primary-text); margin-top: .15rem; }
.poll-form { margin: 0; }
.poll-opt { display: flex; gap: .6rem; align-items: center; padding: .55rem .75rem; margin-bottom: .4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.poll-opt:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.poll-opt input { accent-color: var(--primary); }
.poll-actions { display: flex; gap: .75rem; align-items: center; margin-top: .6rem; flex-wrap: wrap; font-size: .88rem; }
.poll-actions form { margin: 0; }
.poll-results { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.poll-row { display: flex; justify-content: space-between; gap: .75rem; font-size: .93rem; margin-bottom: .2rem; }
.poll-row b { font-variant-numeric: tabular-nums; }
.poll-bar { display: block; height: .5rem; border-radius: 999px; background: var(--border); overflow: hidden; }
.poll-bar span { display: block; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.poll-results li.top .poll-bar span, .poll-results li.mine .poll-bar span { background: var(--primary); }
.poll-you { font-size: .7rem; font-weight: 700; color: var(--primary-text); text-transform: uppercase; letter-spacing: .04em; margin-left: .3rem; }
.poll-tag { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .1rem .4rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary-text); vertical-align: middle; }
.poll-compose { margin: 1rem 0 0; border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: .6rem .9rem; }
.poll-compose[open] { border-style: solid; padding-bottom: .9rem; }
.poll-compose summary { cursor: pointer; font-weight: 600; display: flex; gap: .45rem; align-items: center; color: var(--primary-text); list-style: none; }
.poll-compose summary::-webkit-details-marker { display: none; }
.poll-compose[open] summary { margin-bottom: .75rem; }
.poll-opts { display: grid; gap: .4rem; margin-bottom: .35rem; }
.poll-opt-row { display: flex; gap: .4rem; align-items: center; }
.poll-opt-row input { flex: 1; min-width: 0; }
.poll-remove { color: #c62f2f; font-size: .88rem; }

/* Demo program: "Creating your demo account" */
.demo-start { text-align: center; }
.demo-loading h2, .demo-ready h2 { margin: .75rem 0 .35rem; font-size: 1.25rem; }
.demo-loading p, .demo-ready p { margin: 0 0 1.25rem; min-height: 2.6em; }
.demo-spinner { display: inline-flex; gap: .45rem; margin-top: .5rem; }
.demo-spinner span { width: .85rem; height: .85rem; border-radius: 50%; background: var(--primary); animation: demoBounce 1s ease-in-out infinite; }
.demo-spinner span:nth-child(2) { animation-delay: .15s; }
.demo-spinner span:nth-child(3) { animation-delay: .3s; }
@keyframes demoBounce { 0%, 80%, 100% { transform: scale(.55); opacity: .45; } 40% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .demo-spinner span { animation-duration: 2.4s; } }
.demo-check { width: 3rem; height: 3rem; margin: .25rem auto 0; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800; background: var(--primary); color: var(--on-primary); }
.access-page .acc-tabs { margin: 1.25rem 0 0; }
.access-page .acc-tabs + .card { margin-top: 1rem; }
.acc-intro { margin: -.25rem 0 1rem; }
/* ==========================================================
   Appearance (admin → Appearance): overlays, card styles, seasonal layer, celebrations
   ========================================================== */
/* Each overlay sets --ov-img (a mask tinted with the accent color), --ov-size and --ov-a (strength). */
[data-overlay="dots"], [data-ov="dots"] { --ov-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2222%22 height=%2222%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%221.6%22/%3E%3C/svg%3E"); --ov-size: 22px 22px; --ov-a: .16; --ov-pos: 0 0; --ov-repeat: repeat; --ov-ink: var(--primary); }
[data-overlay="grid"], [data-ov="grid"] { --ov-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2228%22%3E%3Cpath d=%22M0 .5H28M.5 0V28%22 stroke=%22%23000%22 stroke-width=%221%22/%3E%3C/svg%3E"); --ov-size: 28px 28px; --ov-a: .10; --ov-pos: 0 0; --ov-repeat: repeat; --ov-ink: var(--primary); }
[data-overlay="topo"], [data-ov="topo"] { --ov-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.2%22%3E %3Cpath d=%22M60 40c40-18 95-6 108 30 12 34-20 62-62 66-44 4-80-14-84-44-3-24 14-42 38-52z%22/%3E %3Cpath d=%22M66 58c30-12 70-4 80 20 9 23-14 42-44 45-31 3-57-9-60-30-2-16 9-28 24-35z%22/%3E %3Cpath d=%22M76 76c18-7 42-2 48 12 5 13-8 24-26 26-18 2-33-5-35-17-1-9 5-16 13-21z%22/%3E %3Cpath d=%22M190 150c34-6 64 16 62 48-2 30-34 52-68 50-36-2-60-26-56-54 3-24 30-40 62-44z%22/%3E %3Cpath d=%22M192 168c22-3 42 10 40 31-1 19-22 33-44 32-23-1-38-16-36-34 2-15 19-26 40-29z%22/%3E %3Cpath d=%22M194 186c10-1 20 5 19 14 0 9-10 15-20 15-11 0-18-7-17-15 1-7 9-13 18-14z%22/%3E %3Cpath d=%22M-10 214c30-10 58 4 70 24 8 14 2 30-14 36M270 214c-10 20-30 36-40 46M10 120c-6 30 4 54 22 64M230 30c18 10 30 30 26 50%22/%3E %3C/g%3E%3C/svg%3E"); --ov-size: 260px 260px; --ov-a: .15; --ov-pos: 0 0; --ov-repeat: repeat; --ov-ink: var(--primary); }
[data-overlay="botanical"], [data-ov="botanical"] { --ov-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22 viewBox=%220 0 200 200%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cpath d=%22M30 80c6-22 22-38 44-46%22/%3E%3Cpath d=%22M42 62c-10-2-18 2-22 10 9 3 17 0 22-10zM52 50c-2-10 2-18 10-22 3 9 0 17-10 22zM58 44c10 0 17 5 20 13-10 2-17-3-20-13zM46 58c8 5 12 13 10 22-9-3-12-11-10-22z%22/%3E %3Cpath d=%22M140 180c-2-26 8-48 28-62%22/%3E%3Cpath d=%22M146 156c-9-5-18-4-24 3 8 5 17 5 24-3zM152 140c1-10 7-17 16-19 0 10-6 16-16 19zM158 130c9 3 14 10 14 19-10-1-15-7-14-19z%22/%3E %3Cpath d=%22M150 40c8 8 10 18 6 28M150 40c-6 2-10 8-10 14 6 0 10-6 10-14zM156 54c6-2 12 0 14 6-6 2-12 0-14-6z%22/%3E %3Cpath d=%22M40 150c10 4 16 12 16 22M40 150c-2 6 0 12 6 14 2-6 0-12-6-14z%22/%3E %3C/g%3E%3C/svg%3E"); --ov-size: 200px 200px; --ov-a: .16; --ov-pos: 0 0; --ov-repeat: repeat; --ov-ink: var(--primary); }
[data-overlay="food"], [data-ov="food"] { --ov-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22 viewBox=%220 0 220 220%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cpath d=%22M44 46c-8-6-22-2-24 12-2 16 10 32 20 32 4 0 6-2 8-2s4 2 8 2c10 0 22-16 20-32-2-14-16-18-24-12-3 2-5 2-8 0z%22/%3E%3Cpath d=%22M48 46c0-6 2-10 6-12M52 38c6-4 12-3 14 0-4 4-10 4-14 0z%22/%3E %3Cpath d=%22M150 60l-30 44c-2 3 1 6 4 4l44-30c6-5 4-14-3-17-6-3-11-5-15-1z%22/%3E%3Cpath d=%22M168 58c2-6 8-10 14-10M166 52c0-6 4-10 10-12M160 74l-6 6M146 88l-6 4%22/%3E %3Cpath d=%22M70 150c0-14 8-26 18-26s18 12 18 26c0 14-8 24-18 24s-18-10-18-24z%22/%3E%3Ccircle cx=%2288%22 cy=%22156%22 r=%226%22/%3E %3Cpath d=%22M170 150c-6 0-10 6-10 12 0 14 8 26 16 26s16-12 16-26c0-6-4-12-10-12-2 0-4 1-6 2-2-1-4-2-6-2z%22/%3E%3Cpath d=%22M176 150c0-5 2-9 6-11%22/%3E %3Ccircle cx=%22130%22 cy=%22196%22 r=%225%22/%3E%3Ccircle cx=%22141%22 cy=%22190%22 r=%225%22/%3E%3Ccircle cx=%22139%22 cy=%22202%22 r=%225%22/%3E%3Cpath d=%22M136 186c2-5 6-8 10-8%22/%3E %3Cpath d=%22M14 196c8-2 14-8 16-16 4 10 0 20-10 24%22/%3E %3C/g%3E%3C/svg%3E"); --ov-size: 220px 220px; --ov-a: .17; --ov-pos: 0 0; --ov-repeat: repeat; --ov-ink: var(--primary); }
[data-overlay="grain"], [data-ov="grain"] { --ov-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -.45%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E"); --ov-size: 180px 180px; --ov-a: .16; --ov-pos: 0 0; --ov-repeat: repeat; --ov-ink: var(--text); }
[data-overlay="waves"], [data-ov="waves"] { --ov-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221440%22 height=%22320%22 viewBox=%220 0 1440 320%22 preserveAspectRatio=%22none%22%3E %3Cpath fill-opacity=%22.45%22 d=%22M0 170c160-50 320-60 480-20s320 70 480 30 320-80 480-50v190H0z%22/%3E %3Cpath fill-opacity=%22.7%22 d=%22M0 230c180-40 360-30 540 0s360 40 540 10 240-40 360-30v110H0z%22/%3E %3Cpath d=%22M0 280c200-20 400-10 600 5s420 20 600 0c120-12 180-20 240-15v50H0z%22/%3E%3C/svg%3E"); --ov-size: 100% min(38vh, 320px); --ov-a: .10; --ov-pos: bottom center; --ov-repeat: no-repeat; --ov-ink: var(--primary); }
[data-overlay="blobs"], [data-ov="blobs"] { --ov-a: .65; --ov-ink: var(--primary); }
[data-overlay="pinstripe"], [data-ov="pinstripe"] { --ov-a: .09; --ov-ink: var(--primary); }
:root { --ov-k: 1; --ov-dk: 1; }
[data-ov-strength="medium"] { --ov-k: 1.8; }
[data-theme="dark"] { --ov-dk: .85; }

html:not([data-overlay="none"]) body::before, .ov-sw::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--ov-ink, var(--primary));
  -webkit-mask: var(--ov-img) var(--ov-pos, 0 0) / var(--ov-size) var(--ov-repeat, repeat);
  mask: var(--ov-img) var(--ov-pos, 0 0) / var(--ov-size) var(--ov-repeat, repeat);
  opacity: min(1, calc(var(--ov-a) * var(--ov-k) * var(--ov-dk)));
}
html[data-overlay="blobs"] body::before, .ov-sw[data-ov="blobs"]::before {
  -webkit-mask: none; mask: none;
  background:
    radial-gradient(34vmax 34vmax at 0% 0%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 100%),
    radial-gradient(28vmax 28vmax at 100% 22%, color-mix(in srgb, color-mix(in srgb, var(--primary) 50%, #ffc46b) 28%, transparent), transparent 100%),
    radial-gradient(36vmax 36vmax at 75% 100%, color-mix(in srgb, color-mix(in srgb, var(--primary) 55%, #6bb8ff) 26%, transparent), transparent 100%);
}
html[data-overlay="pinstripe"] body::before, .ov-sw[data-ov="pinstripe"]::before {
  -webkit-mask: none; mask: none;
  background: repeating-linear-gradient(135deg, var(--primary) 0 1px, transparent 1px 13px);
}
.ov-sw { position: relative; overflow: hidden; isolation: isolate; background: var(--bg); }
.ov-sw::before { position: absolute; z-index: 0; }
.ov-sw[data-ov="none"]::before { display: none; }
.ov-sw[data-ov="blobs"]::before { background-size: 100% 100%; }

/* ---- Card styles ---- */
[data-cards="flat"] :is(.card, .auth-card) { box-shadow: none; }
[data-cards="soft"] :is(.card, .auth-card) {
  border-color: transparent; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px -8px color-mix(in srgb, var(--primary) 18%, rgba(0,0,0,.16));
}
[data-theme="dark"][data-cards="soft"] :is(.card, .auth-card) { border-color: color-mix(in srgb, var(--border) 45%, transparent); box-shadow: 0 12px 32px -10px rgba(0,0,0,.6); }
[data-cards="glass"] :is(.card, .auth-card) {
  position: relative; border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border-color: color-mix(in srgb, var(--surface) 45%, var(--border));
  box-shadow: 0 8px 28px -10px rgba(0,0,0,.14), inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
}
[data-cards="glass"] :is(.card, .auth-card)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
[data-theme="dark"][data-cards="glass"] :is(.card, .auth-card) { background: color-mix(in srgb, var(--surface) 72%, transparent); box-shadow: 0 10px 30px -10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); }
[data-cards="glass"] .card .card { background: color-mix(in srgb, var(--surface) 55%, transparent); }

/* ---- Seasonal layer: a corner motif plus a short, gentle fall when a page opens ---- */
.season-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.season-motif { position: absolute; right: -40px; bottom: -40px; width: 260px; height: 260px; opacity: .12; transform: rotate(-14deg); }
[data-theme="dark"] .season-motif { opacity: .09; }
.season-bit {
  position: absolute; top: -40px; width: var(--sz); height: var(--sz); opacity: 0;
  animation: seasonFall var(--du) linear var(--dl) 1 forwards;
}
@keyframes seasonFall {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0); }
  8%   { opacity: .6; }
  80%  { opacity: .5; }
  100% { opacity: 0; transform: translate(var(--dx), 105vh) rotate(var(--rot)); }
}
@media (prefers-reduced-motion: reduce) { .season-bit { display: none; } }

/* ---- Celebration badge ---- */
.cel-wrap { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 1rem; background: color-mix(in srgb, var(--bg) 35%, transparent); animation: celFade .25s var(--ease); }
.cel-pop {
  width: min(340px, 100%); text-align: center; background: var(--surface); color: var(--text);
  border-radius: 20px; padding: 1.75rem 1.5rem 1.25rem; box-shadow: 0 24px 60px -12px rgba(0,0,0,.35);
  border: 1px solid var(--border); animation: celPop .55s cubic-bezier(.2, 1.4, .4, 1);
}
.cel-badge {
  width: 84px; height: 84px; margin: 0 auto .9rem; border-radius: 50%; display: grid; place-items: center;
  color: var(--on-primary); background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--primary) 70%, #fff), var(--primary));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 18%, transparent), 0 8px 20px -6px color-mix(in srgb, var(--primary) 60%, transparent);
  animation: celSpin .9s cubic-bezier(.2, 1.3, .4, 1) .1s both;
}
.cel-badge svg { width: 42px; height: 42px; }
.cel-title { font-size: 1.3rem; font-weight: 800; margin: 0 0 .3rem; }
.cel-text { color: var(--muted); margin: 0 0 1.1rem; }
.cel-count { font-size: .8rem; color: var(--muted); margin-top: .6rem; }
@keyframes celFade { from { opacity: 0; } }
@keyframes celPop { 0% { opacity: 0; transform: scale(.6) translateY(20px); } 100% { opacity: 1; transform: none; } }
@keyframes celSpin { 0% { transform: scale(0) rotate(-120deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .cel-wrap, .cel-pop, .cel-badge { animation: none; } }

/* ---- Admin → Appearance ---- */
.ap-page { max-width: 1000px; }
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin-top: .75rem; }
.ap-opt { position: relative; display: block; cursor: pointer; }
.ap-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ap-opt-card { display: block; border: 2px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.ap-opt:hover .ap-opt-card { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.ap-opt input:checked + .ap-opt-card { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.ap-opt input:focus-visible + .ap-opt-card { outline: 2px solid var(--primary); outline-offset: 2px; }
.ap-opt .ov-sw { display: block; height: 84px; border-bottom: 1px solid var(--border); }
.ap-opt .ov-sw i { position: absolute; z-index: 1; left: 18%; top: 26%; width: 64%; height: 48%; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); }
.ap-opt-name { display: block; padding: .5rem .65rem .1rem; font-weight: 700; font-size: .92rem; }
.ap-opt-desc { display: block; padding: 0 .65rem .55rem; font-size: .78rem; color: var(--muted); line-height: 1.3; }
.ap-cards-demo { display: block; height: 84px; position: relative; border-bottom: 1px solid var(--border); background: var(--bg); overflow: hidden; }
.ap-cards-demo i { position: absolute; left: 16%; top: 22%; width: 68%; height: 56%; background: var(--surface); }
.ap-cards-demo[data-c="classic"] i { border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); }
.ap-cards-demo[data-c="flat"] i { border: 1px solid var(--border); border-radius: 8px; }
.ap-cards-demo[data-c="soft"] i { border-radius: 12px; box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--primary) 30%, rgba(0,0,0,.2)); }
.ap-cards-demo[data-c="glass"] { background: radial-gradient(60% 90% at 20% 20%, color-mix(in srgb, var(--primary) 45%, transparent), transparent), radial-gradient(60% 90% at 90% 90%, color-mix(in srgb, var(--primary) 30%, #ffc46b), transparent), var(--bg); }
.ap-cards-demo[data-c="glass"] i { border-radius: 12px; background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid color-mix(in srgb, var(--surface) 50%, var(--border)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ap-season { display: grid; place-items: center; height: 64px; border-bottom: 1px solid var(--border); background: var(--bg); }
.ap-season svg { width: 30px; height: 30px; }
.ap-season-now { display: inline-block; margin-left: .35rem; font-size: .72rem; font-weight: 700; color: var(--primary-text); }
.ap-row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; margin-top: 1rem; }
.ap-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .5rem 1.5rem; margin-top: .75rem; }
.ap-checks .check { align-items: flex-start; }
.ap-checks small { display: block; color: var(--muted); font-size: .82rem; }
.ap-note { font-size: .88rem; }

/* ---- Menu panel styles (admin → Appearance → Menu panel) ---- */
.sidebar > *, .topbar > * { position: relative; z-index: 1; }
/* The top bar styles use the Top bar color (Site Settings → Color scheme) in place of the accent */
.topbar { --primary: var(--topbar-accent); --on-primary: var(--on-topbar-accent); }
[data-menu="tint"] .sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 16%, var(--sidebar)) 0%, var(--sidebar) 65%); }
[data-menu="pattern"] .sidebar::before, [data-topbar="pattern"] .topbar::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--ov-ink, var(--primary));
  -webkit-mask: var(--ov-img) var(--ov-pos, 0 0) / var(--ov-size) var(--ov-repeat, repeat);
  mask: var(--ov-img) var(--ov-pos, 0 0) / var(--ov-size) var(--ov-repeat, repeat);
  opacity: min(1, calc(var(--ov-a) * 1.3 * var(--ov-dk)));
}
[data-topbar="pattern"] .topbar::before { opacity: min(1, calc(var(--ov-a) * .9 * var(--ov-dk))); }
:is([data-menu="pattern"] .sidebar, [data-topbar="pattern"] .topbar)[data-ov="blobs"]::before {
  -webkit-mask: none; mask: none;
  background: radial-gradient(120% 50% at 0% 0%, color-mix(in srgb, var(--primary) 30%, transparent), transparent), radial-gradient(120% 45% at 100% 100%, color-mix(in srgb, color-mix(in srgb, var(--primary) 55%, #6bb8ff) 26%, transparent), transparent);
}
:is([data-menu="pattern"] .sidebar, [data-topbar="pattern"] .topbar)[data-ov="pinstripe"]::before {
  -webkit-mask: none; mask: none; background: repeating-linear-gradient(135deg, var(--primary) 0 1px, transparent 1px 13px);
}
[data-menu="hills"] .sidebar::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; z-index: 0; pointer-events: none;
  background: var(--primary); opacity: .22;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22248%22 height=%22200%22 viewBox=%220 0 248 200%22 preserveAspectRatio=%22none%22%3E %3Cpath fill-opacity=%22.35%22 d=%22M0 90c40-30 80-40 120-20s70 10 128-30v160H0z%22/%3E %3Cpath fill-opacity=%22.6%22 d=%22M0 130c50-35 100-30 140-5s70 10 108-15v90H0z%22/%3E %3Cpath d=%22M0 165c40-20 90-25 130-10s80 10 118-5v50H0z%22/%3E %3Ccircle fill-opacity=%22.5%22 cx=%22190%22 cy=%2248%22 r=%2216%22/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22248%22 height=%22200%22 viewBox=%220 0 248 200%22 preserveAspectRatio=%22none%22%3E %3Cpath fill-opacity=%22.35%22 d=%22M0 90c40-30 80-40 120-20s70 10 128-30v160H0z%22/%3E %3Cpath fill-opacity=%22.6%22 d=%22M0 130c50-35 100-30 140-5s70 10 108-15v90H0z%22/%3E %3Cpath d=%22M0 165c40-20 90-25 130-10s80 10 118-5v50H0z%22/%3E %3Ccircle fill-opacity=%22.5%22 cx=%22190%22 cy=%2248%22 r=%2216%22/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
[data-theme="dark"][data-menu="hills"] .sidebar::before { opacity: .18; }

/* Bold and photo: the menu becomes a colored panel with light text */
[data-menu="bold"] .sidebar {
  --chrome-ink: var(--on-primary);
  background: linear-gradient(165deg, color-mix(in srgb, var(--primary) 88%, #fff), var(--primary) 45%, color-mix(in srgb, var(--primary) 70%, #000));
}
[data-theme="dark"][data-menu="bold"] .sidebar { background: linear-gradient(165deg, color-mix(in srgb, var(--primary) 55%, #000), color-mix(in srgb, var(--primary) 30%, #000)); --chrome-ink: #fff; }
[data-menu="photo"] .sidebar {
  --chrome-ink: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 50%, rgba(0,0,0,.45)), rgba(0,0,0,.72)), var(--menu-img, none) center / cover no-repeat, #222;
}
:is([data-menu="bold"], [data-menu="photo"]) .sidebar { color: var(--chrome-ink); border-right-color: transparent; }
:is([data-menu="bold"], [data-menu="photo"]) .sidebar-brand { border-bottom-color: color-mix(in srgb, var(--chrome-ink) 18%, transparent); }
:is([data-menu="bold"], [data-menu="photo"]) .nav-link > :not(.nav-badge) { opacity: .9; }   /* the red count stays full strength */
:is([data-menu="bold"], [data-menu="photo"]) .nav-link:hover { background: color-mix(in srgb, var(--chrome-ink) 12%, transparent); }
:is([data-menu="bold"], [data-menu="photo"]) .nav-link.active {
  color: var(--chrome-ink); background: color-mix(in srgb, var(--chrome-ink) 20%, transparent); box-shadow: inset 3px 0 0 var(--chrome-ink);
}
:is([data-menu="bold"], [data-menu="photo"]) .sidebar .logo-light { display: none; }
:is([data-menu="bold"], [data-menu="photo"]) .sidebar .logo-dark { display: inline-block; }
[data-menu="photo"] .sidebar .brand-text, [data-menu="photo"] .nav-link span { text-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* ---- Top bar styles (admin → Appearance → Top bar) ---- */
[data-topbar="stripe"] .topbar { border-bottom-color: transparent; }
[data-topbar="stripe"] .topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 50%, #ffc46b), color-mix(in srgb, var(--primary) 50%, #6bb8ff), var(--primary));
}
[data-topbar="tint"] .topbar { background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 18%, var(--surface)), color-mix(in srgb, var(--surface) 88%, transparent) 70%); }
[data-topbar="bold"] .topbar {
  --chrome-ink: var(--on-primary);
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 75%, #000));
}
[data-theme="dark"][data-topbar="bold"] .topbar { background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 50%, #000), color-mix(in srgb, var(--primary) 28%, #000)); --chrome-ink: #fff; }
[data-topbar="photo"] .topbar {
  --chrome-ink: #fff;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 55%, rgba(0,0,0,.5)), rgba(0,0,0,.45)), var(--topbar-img, none) center / cover no-repeat, #222;
}
:is([data-topbar="bold"], [data-topbar="photo"]) .topbar { color: var(--chrome-ink); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
:is([data-topbar="bold"], [data-topbar="photo"]) .topbar .icon-btn:hover { background: color-mix(in srgb, var(--chrome-ink) 14%, transparent); }
:is([data-topbar="bold"], [data-topbar="photo"]) .topbar .user-btn { color: inherit; background: color-mix(in srgb, var(--chrome-ink) 14%, transparent); border-color: color-mix(in srgb, var(--chrome-ink) 30%, transparent); }
:is([data-topbar="bold"], [data-topbar="photo"]) .topbar .admin-tag { color: inherit; opacity: .85; }
[data-topbar="photo"] .topbar-title { text-shadow: 0 1px 3px rgba(0,0,0,.4); }

/* ---- Admin → Appearance: little menu / top bar mock-ups ---- */
.ap-mock { display: block; position: relative; height: 84px; border-bottom: 1px solid var(--border); background: var(--bg); overflow: hidden; }
.ap-mock .mk-side { position: absolute; left: 0; top: 0; bottom: 0; width: 36%; background: var(--sidebar); border-right: 1px solid var(--border); overflow: hidden; }
.ap-mock .mk-top { position: absolute; left: 0; right: 0; top: 0; height: 26%; background: var(--surface); border-bottom: 1px solid var(--border); overflow: hidden; }
.ap-mock i { position: absolute; left: 14%; height: 5px; border-radius: 3px; background: currentColor; opacity: .35; }
.mk-side i:nth-of-type(1) { top: 16%; width: 60%; } .mk-side i:nth-of-type(2) { top: 30%; width: 70%; opacity: .9; } .mk-side i:nth-of-type(3) { top: 44%; width: 50%; } .mk-side i:nth-of-type(4) { top: 58%; width: 64%; }
.mk-top i { top: 40%; width: 30%; }
.mk-side { color: var(--sidebar-text); } .mk-top { color: var(--text); }
.mk-side[data-m="tint"] { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 22%, var(--sidebar)), var(--sidebar) 70%); }
.mk-side[data-m="pattern"], .mk-top[data-t="pattern"] { background-image: radial-gradient(color-mix(in srgb, var(--primary) 40%, transparent) 1px, transparent 1.5px); background-size: 7px 7px; }
.mk-side[data-m="hills"] { background: linear-gradient(transparent 60%, color-mix(in srgb, var(--primary) 18%, var(--sidebar)) 60% 75%, color-mix(in srgb, var(--primary) 32%, var(--sidebar)) 75%); }
.mk-side[data-m="bold"], .mk-top[data-t="bold"] { background: linear-gradient(165deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #000)); color: var(--on-primary); border-color: transparent; }
.mk-side[data-m="photo"], .mk-top[data-t="photo"] { background: linear-gradient(color-mix(in srgb, var(--primary) 50%, rgba(0,0,0,.45)), rgba(0,0,0,.6)), var(--mk-img, linear-gradient(135deg, #8aa, #456)) center / cover; color: #fff; border-color: transparent; }
.mk-top[data-t="stripe"] { border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 50%, #ffc46b), color-mix(in srgb, var(--primary) 50%, #6bb8ff)) 1; }
.mk-top[data-t="tint"] { background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 26%, var(--surface)), var(--surface) 70%); }
.ap-photo { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-top: 1rem; padding: 1rem; border: 1px dashed var(--border); border-radius: 12px; }
.ap-photo[hidden] { display: none; }
.ap-photo img { width: 160px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); }
.ap-photo .field { margin: 0; flex: 1; min-width: 220px; }

/* ---- "Sunset hills" top bar: a drawn hillside scene tinted with the top bar color (the menu versions are further down) ---- */
[data-topbar="scene"] .topbar {
  --chrome-ink: #fff; border-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 12%, #f7c27c), color-mix(in srgb, var(--primary) 22%, #b49a9c) 45%, color-mix(in srgb, var(--primary) 22%, #a698c4) 65%);
}
[data-topbar="scene"] .topbar { background: radial-gradient(circle 16px at 62% 30%, #ffeabf 95%, transparent), linear-gradient(180deg, color-mix(in srgb, var(--primary) 12%, #f7c27c), color-mix(in srgb, var(--primary) 22%, #a698c4)); }
[data-topbar="scene"] .topbar::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: color-mix(in srgb, var(--primary) 62%, #04100a);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%221200%22 viewBox=%220 0 600 1200%22 preserveAspectRatio=%22none%22%3E%3Cpath fill-opacity=%220.45%22 d=%22M0,1200 L0,660 20,667 40,674 60,681 80,688 100,695 120,701 140,706 160,712 180,716 200,721 220,724 240,727 260,729 280,731 300,732 320,732 340,731 360,730 380,728 400,725 420,722 440,718 460,714 480,709 500,703 520,697 540,691 560,684 580,677 600,670 L600,1200 Z%22/%3E%3Cpath fill-opacity=%220.75%22 d=%22M0,1200 L0,881 20,878 40,874 60,870 80,865 100,859 120,853 140,847 160,840 180,833 200,826 220,819 240,812 260,805 280,798 300,791 320,784 340,778 360,772 380,766 400,762 420,757 440,753 460,750 480,747 500,746 520,744 540,744 560,744 580,745 600,747 L600,1200 Z%22/%3E%3Cpath fill-opacity=%221%22 d=%22M0,1200 L0,906 20,901 40,897 60,894 80,891 100,890 120,888 140,888 160,888 180,889 200,891 220,893 240,896 260,900 280,904 300,909 320,915 340,920 360,927 380,933 400,940 420,947 440,954 460,961 480,968 500,975 520,982 540,989 560,996 580,1002 600,1007 L600,1200 Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%221200%22 viewBox=%220 0 600 1200%22 preserveAspectRatio=%22none%22%3E%3Cpath fill-opacity=%220.45%22 d=%22M0,1200 L0,660 20,667 40,674 60,681 80,688 100,695 120,701 140,706 160,712 180,716 200,721 220,724 240,727 260,729 280,731 300,732 320,732 340,731 360,730 380,728 400,725 420,722 440,718 460,714 480,709 500,703 520,697 540,691 560,684 580,677 600,670 L600,1200 Z%22/%3E%3Cpath fill-opacity=%220.75%22 d=%22M0,1200 L0,881 20,878 40,874 60,870 80,865 100,859 120,853 140,847 160,840 180,833 200,826 220,819 240,812 260,805 280,798 300,791 320,784 340,778 360,772 380,766 400,762 420,757 440,753 460,750 480,747 500,746 520,744 540,744 560,744 580,745 600,747 L600,1200 Z%22/%3E%3Cpath fill-opacity=%221%22 d=%22M0,1200 L0,906 20,901 40,897 60,894 80,891 100,890 120,888 140,888 160,888 180,889 200,891 220,893 240,896 260,900 280,904 300,909 320,915 340,920 360,927 380,933 400,940 420,947 440,954 460,961 480,968 500,975 520,982 540,989 560,996 580,1002 600,1007 L600,1200 Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
[data-topbar="scene"] .topbar::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221600%22 height=%22240%22 viewBox=%220 0 1600 240%22 preserveAspectRatio=%22none%22%3E%3Cpath fill-opacity=%220.45%22 d=%22M0,240 L0,132 20,133 40,133 60,134 80,134 100,135 120,135 140,136 160,136 180,137 200,137 220,138 240,138 260,139 280,139 300,140 320,140 340,141 360,141 380,141 400,142 420,142 440,143 460,143 480,143 500,144 520,144 540,144 560,144 580,145 600,145 620,145 640,145 660,146 680,146 700,146 720,146 740,146 760,146 780,146 800,146 820,146 840,146 860,146 880,146 900,146 920,146 940,146 960,146 980,146 1000,146 1020,146 1040,145 1060,145 1080,145 1100,145 1120,144 1140,144 1160,144 1180,144 1200,143 1220,143 1240,142 1260,142 1280,142 1300,141 1320,141 1340,140 1360,140 1380,140 1400,139 1420,139 1440,138 1460,138 1480,137 1500,137 1520,136 1540,136 1560,135 1580,135 1600,134 L1600,240 Z%22/%3E%3Cpath fill-opacity=%220.75%22 d=%22M0,240 L0,176 20,176 40,176 60,176 80,175 100,175 120,175 140,174 160,174 180,174 200,173 220,173 240,172 260,172 280,172 300,171 320,171 340,170 360,170 380,169 400,169 420,168 440,168 460,167 480,167 500,166 520,166 540,165 560,165 580,164 600,163 620,163 640,162 660,162 680,161 700,161 720,160 740,160 760,159 780,159 800,158 820,158 840,157 860,157 880,156 900,156 920,155 940,155 960,154 980,154 1000,154 1020,153 1040,153 1060,152 1080,152 1100,152 1120,151 1140,151 1160,151 1180,151 1200,150 1220,150 1240,150 1260,150 1280,149 1300,149 1320,149 1340,149 1360,149 1380,149 1400,149 1420,149 1440,149 1460,149 1480,149 1500,149 1520,149 1540,149 1560,149 1580,149 1600,149 L1600,240 Z%22/%3E%3Cpath fill-opacity=%221%22 d=%22M0,240 L0,181 20,181 40,180 60,180 80,180 100,180 120,179 140,179 160,179 180,179 200,178 220,178 240,178 260,178 280,178 300,178 320,178 340,178 360,178 380,178 400,178 420,178 440,178 460,178 480,178 500,178 520,178 540,178 560,178 580,179 600,179 620,179 640,179 660,180 680,180 700,180 720,180 740,181 760,181 780,181 800,182 820,182 840,183 860,183 880,183 900,184 920,184 940,185 960,185 980,186 1000,186 1020,187 1040,187 1060,188 1080,188 1100,189 1120,189 1140,190 1160,190 1180,191 1200,192 1220,192 1240,193 1260,193 1280,194 1300,194 1320,195 1340,195 1360,196 1380,196 1400,197 1420,197 1440,198 1460,198 1480,199 1500,199 1520,200 1540,200 1560,201 1580,201 1600,201 L1600,240 Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221600%22 height=%22240%22 viewBox=%220 0 1600 240%22 preserveAspectRatio=%22none%22%3E%3Cpath fill-opacity=%220.45%22 d=%22M0,240 L0,132 20,133 40,133 60,134 80,134 100,135 120,135 140,136 160,136 180,137 200,137 220,138 240,138 260,139 280,139 300,140 320,140 340,141 360,141 380,141 400,142 420,142 440,143 460,143 480,143 500,144 520,144 540,144 560,144 580,145 600,145 620,145 640,145 660,146 680,146 700,146 720,146 740,146 760,146 780,146 800,146 820,146 840,146 860,146 880,146 900,146 920,146 940,146 960,146 980,146 1000,146 1020,146 1040,145 1060,145 1080,145 1100,145 1120,144 1140,144 1160,144 1180,144 1200,143 1220,143 1240,142 1260,142 1280,142 1300,141 1320,141 1340,140 1360,140 1380,140 1400,139 1420,139 1440,138 1460,138 1480,137 1500,137 1520,136 1540,136 1560,135 1580,135 1600,134 L1600,240 Z%22/%3E%3Cpath fill-opacity=%220.75%22 d=%22M0,240 L0,176 20,176 40,176 60,176 80,175 100,175 120,175 140,174 160,174 180,174 200,173 220,173 240,172 260,172 280,172 300,171 320,171 340,170 360,170 380,169 400,169 420,168 440,168 460,167 480,167 500,166 520,166 540,165 560,165 580,164 600,163 620,163 640,162 660,162 680,161 700,161 720,160 740,160 760,159 780,159 800,158 820,158 840,157 860,157 880,156 900,156 920,155 940,155 960,154 980,154 1000,154 1020,153 1040,153 1060,152 1080,152 1100,152 1120,151 1140,151 1160,151 1180,151 1200,150 1220,150 1240,150 1260,150 1280,149 1300,149 1320,149 1340,149 1360,149 1380,149 1400,149 1420,149 1440,149 1460,149 1480,149 1500,149 1520,149 1540,149 1560,149 1580,149 1600,149 L1600,240 Z%22/%3E%3Cpath fill-opacity=%221%22 d=%22M0,240 L0,181 20,181 40,180 60,180 80,180 100,180 120,179 140,179 160,179 180,179 200,178 220,178 240,178 260,178 280,178 300,178 320,178 340,178 360,178 380,178 400,178 420,178 440,178 460,178 480,178 500,178 520,178 540,178 560,178 580,179 600,179 620,179 640,179 660,180 680,180 700,180 720,180 740,181 760,181 780,181 800,182 820,182 840,183 860,183 880,183 900,184 920,184 940,185 960,185 980,186 1000,186 1020,187 1040,187 1060,188 1080,188 1100,189 1120,189 1140,190 1160,190 1180,191 1200,192 1220,192 1240,193 1260,193 1280,194 1300,194 1320,195 1340,195 1360,196 1380,196 1400,197 1420,197 1440,198 1460,198 1480,199 1500,199 1520,200 1540,200 1560,201 1580,201 1600,201 L1600,240 Z%22/%3E%3C/svg%3E"); }
[data-topbar="scene"] .topbar::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 50%, rgba(0,0,0,.45)), rgba(0,0,0,.72));
}
[data-topbar="scene"] .topbar::after { background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 55%, rgba(0,0,0,.5)), rgba(0,0,0,.45)); }
[data-topbar="scene"] .topbar-title { text-shadow: 0 1px 2px rgba(0,0,0,.35); }
[data-topbar="scene"] .topbar { color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-topbar="scene"] .topbar .icon-btn:hover { background: color-mix(in srgb, #fff 14%, transparent); }
[data-topbar="scene"] .topbar .user-btn { color: inherit; background: color-mix(in srgb, #fff 14%, transparent); border-color: color-mix(in srgb, #fff 30%, transparent); }
[data-topbar="scene"] .topbar .admin-tag { color: inherit; opacity: .85; }
/* admin mock-ups */
.mk-top[data-t="scene"] { color: #fff; border-color: transparent; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 30%, #c99a6a), color-mix(in srgb, var(--primary) 40%, #4c4560)); }
.mk-top[data-t="scene"]::before {
  content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--primary) 55%, #04100a);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%221200%22 viewBox=%220 0 600 1200%22 preserveAspectRatio=%22none%22%3E%3Cpath fill-opacity=%220.45%22 d=%22M0,1200 L0,660 20,667 40,674 60,681 80,688 100,695 120,701 140,706 160,712 180,716 200,721 220,724 240,727 260,729 280,731 300,732 320,732 340,731 360,730 380,728 400,725 420,722 440,718 460,714 480,709 500,703 520,697 540,691 560,684 580,677 600,670 L600,1200 Z%22/%3E%3Cpath fill-opacity=%220.75%22 d=%22M0,1200 L0,881 20,878 40,874 60,870 80,865 100,859 120,853 140,847 160,840 180,833 200,826 220,819 240,812 260,805 280,798 300,791 320,784 340,778 360,772 380,766 400,762 420,757 440,753 460,750 480,747 500,746 520,744 540,744 560,744 580,745 600,747 L600,1200 Z%22/%3E%3Cpath fill-opacity=%221%22 d=%22M0,1200 L0,906 20,901 40,897 60,894 80,891 100,890 120,888 140,888 160,888 180,889 200,891 220,893 240,896 260,900 280,904 300,909 320,915 340,920 360,927 380,933 400,940 420,947 440,954 460,961 480,968 500,975 520,982 540,989 560,996 580,1002 600,1007 L600,1200 Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%221200%22 viewBox=%220 0 600 1200%22 preserveAspectRatio=%22none%22%3E%3Cpath fill-opacity=%220.45%22 d=%22M0,1200 L0,660 20,667 40,674 60,681 80,688 100,695 120,701 140,706 160,712 180,716 200,721 220,724 240,727 260,729 280,731 300,732 320,732 340,731 360,730 380,728 400,725 420,722 440,718 460,714 480,709 500,703 520,697 540,691 560,684 580,677 600,670 L600,1200 Z%22/%3E%3Cpath fill-opacity=%220.75%22 d=%22M0,1200 L0,881 20,878 40,874 60,870 80,865 100,859 120,853 140,847 160,840 180,833 200,826 220,819 240,812 260,805 280,798 300,791 320,784 340,778 360,772 380,766 400,762 420,757 440,753 460,750 480,747 500,746 520,744 540,744 560,744 580,745 600,747 L600,1200 Z%22/%3E%3Cpath fill-opacity=%221%22 d=%22M0,1200 L0,906 20,901 40,897 60,894 80,891 100,890 120,888 140,888 160,888 180,889 200,891 220,893 240,896 260,900 280,904 300,909 320,915 340,920 360,927 380,933 400,940 420,947 440,954 460,961 480,968 500,975 520,982 540,989 560,996 580,1002 600,1007 L600,1200 Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.mk-top[data-t="scene"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221600%22 height=%22240%22 viewBox=%220 0 1600 240%22 preserveAspectRatio=%22none%22%3E%3Cpath fill-opacity=%220.45%22 d=%22M0,240 L0,132 20,133 40,133 60,134 80,134 100,135 120,135 140,136 160,136 180,137 200,137 220,138 240,138 260,139 280,139 300,140 320,140 340,141 360,141 380,141 400,142 420,142 440,143 460,143 480,143 500,144 520,144 540,144 560,144 580,145 600,145 620,145 640,145 660,146 680,146 700,146 720,146 740,146 760,146 780,146 800,146 820,146 840,146 860,146 880,146 900,146 920,146 940,146 960,146 980,146 1000,146 1020,146 1040,145 1060,145 1080,145 1100,145 1120,144 1140,144 1160,144 1180,144 1200,143 1220,143 1240,142 1260,142 1280,142 1300,141 1320,141 1340,140 1360,140 1380,140 1400,139 1420,139 1440,138 1460,138 1480,137 1500,137 1520,136 1540,136 1560,135 1580,135 1600,134 L1600,240 Z%22/%3E%3Cpath fill-opacity=%220.75%22 d=%22M0,240 L0,176 20,176 40,176 60,176 80,175 100,175 120,175 140,174 160,174 180,174 200,173 220,173 240,172 260,172 280,172 300,171 320,171 340,170 360,170 380,169 400,169 420,168 440,168 460,167 480,167 500,166 520,166 540,165 560,165 580,164 600,163 620,163 640,162 660,162 680,161 700,161 720,160 740,160 760,159 780,159 800,158 820,158 840,157 860,157 880,156 900,156 920,155 940,155 960,154 980,154 1000,154 1020,153 1040,153 1060,152 1080,152 1100,152 1120,151 1140,151 1160,151 1180,151 1200,150 1220,150 1240,150 1260,150 1280,149 1300,149 1320,149 1340,149 1360,149 1380,149 1400,149 1420,149 1440,149 1460,149 1480,149 1500,149 1520,149 1540,149 1560,149 1580,149 1600,149 L1600,240 Z%22/%3E%3Cpath fill-opacity=%221%22 d=%22M0,240 L0,181 20,181 40,180 60,180 80,180 100,180 120,179 140,179 160,179 180,179 200,178 220,178 240,178 260,178 280,178 300,178 320,178 340,178 360,178 380,178 400,178 420,178 440,178 460,178 480,178 500,178 520,178 540,178 560,178 580,179 600,179 620,179 640,179 660,180 680,180 700,180 720,180 740,181 760,181 780,181 800,182 820,182 840,183 860,183 880,183 900,184 920,184 940,185 960,185 980,186 1000,186 1020,187 1040,187 1060,188 1080,188 1100,189 1120,189 1140,190 1160,190 1180,191 1200,192 1220,192 1240,193 1260,193 1280,194 1300,194 1320,195 1340,195 1360,196 1380,196 1400,197 1420,197 1440,198 1460,198 1480,199 1500,199 1520,200 1540,200 1560,201 1580,201 1600,201 L1600,240 Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221600%22 height=%22240%22 viewBox=%220 0 1600 240%22 preserveAspectRatio=%22none%22%3E%3Cpath fill-opacity=%220.45%22 d=%22M0,240 L0,132 20,133 40,133 60,134 80,134 100,135 120,135 140,136 160,136 180,137 200,137 220,138 240,138 260,139 280,139 300,140 320,140 340,141 360,141 380,141 400,142 420,142 440,143 460,143 480,143 500,144 520,144 540,144 560,144 580,145 600,145 620,145 640,145 660,146 680,146 700,146 720,146 740,146 760,146 780,146 800,146 820,146 840,146 860,146 880,146 900,146 920,146 940,146 960,146 980,146 1000,146 1020,146 1040,145 1060,145 1080,145 1100,145 1120,144 1140,144 1160,144 1180,144 1200,143 1220,143 1240,142 1260,142 1280,142 1300,141 1320,141 1340,140 1360,140 1380,140 1400,139 1420,139 1440,138 1460,138 1480,137 1500,137 1520,136 1540,136 1560,135 1580,135 1600,134 L1600,240 Z%22/%3E%3Cpath fill-opacity=%220.75%22 d=%22M0,240 L0,176 20,176 40,176 60,176 80,175 100,175 120,175 140,174 160,174 180,174 200,173 220,173 240,172 260,172 280,172 300,171 320,171 340,170 360,170 380,169 400,169 420,168 440,168 460,167 480,167 500,166 520,166 540,165 560,165 580,164 600,163 620,163 640,162 660,162 680,161 700,161 720,160 740,160 760,159 780,159 800,158 820,158 840,157 860,157 880,156 900,156 920,155 940,155 960,154 980,154 1000,154 1020,153 1040,153 1060,152 1080,152 1100,152 1120,151 1140,151 1160,151 1180,151 1200,150 1220,150 1240,150 1260,150 1280,149 1300,149 1320,149 1340,149 1360,149 1380,149 1400,149 1420,149 1440,149 1460,149 1480,149 1500,149 1520,149 1540,149 1560,149 1580,149 1600,149 L1600,240 Z%22/%3E%3Cpath fill-opacity=%221%22 d=%22M0,240 L0,181 20,181 40,180 60,180 80,180 100,180 120,179 140,179 160,179 180,179 200,178 220,178 240,178 260,178 280,178 300,178 320,178 340,178 360,178 380,178 400,178 420,178 440,178 460,178 480,178 500,178 520,178 540,178 560,178 580,179 600,179 620,179 640,179 660,180 680,180 700,180 720,180 740,181 760,181 780,181 800,182 820,182 840,183 860,183 880,183 900,184 920,184 940,185 960,185 980,186 1000,186 1020,187 1040,187 1060,188 1080,188 1100,189 1120,189 1140,190 1160,190 1180,191 1200,192 1220,192 1240,193 1260,193 1280,194 1300,194 1320,195 1340,195 1360,196 1380,196 1400,197 1420,197 1440,198 1460,198 1480,199 1500,199 1520,200 1540,200 1560,201 1580,201 1600,201 L1600,240 Z%22/%3E%3C/svg%3E"); }
.mk-top[data-t="scene"] i { z-index: 1; }

.ap-tbc[hidden] { display: none; }
.ap-tbc { display: inline-flex; }

/* ==========================================================
   Charts → Dashboard (views/charts_dash.php)
   ========================================================== */
.charts-tabs { margin-bottom: 1rem; }
.db-page { --c-nutrient: #ff9f1c; --c-exercise: #8b2fd6; --c-weight: #5fb918; --c-water: #10bfcf; --c-steps: #ec4899; --c-sleep: #5b6cf0; --c-streak: #f2542d; }
.db-range { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.db-top { margin-bottom: 1.25rem; }
.db-top .db-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .db-top .db-stats { grid-template-columns: 1fr 1fr; } }
.db-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 900px) { .db-charts { grid-template-columns: 1fr; } }
.db-top > .card + .card, .db-charts > .card + .card { margin-top: 0; }
.db-card { padding: 0; overflow: hidden; }
.db-head { margin: 0; padding: .7rem 1rem; text-align: center; font-size: 1.1rem; font-weight: 800; letter-spacing: .01em;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 72%, #000)); color: var(--on-primary); }
.db-body { padding: 1.1rem 1.25rem 1.25rem; }
.db-chart .db-canvas { position: relative; height: 260px; }
.db-empty { color: var(--muted); text-align: center; padding: 3.5rem 0; margin: 0; }

/* Progress bars */
.db-bar + .db-bar { margin-top: 1.05rem; }
.db-bar-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: .5rem; margin-bottom: .35rem; }
.db-bar-top strong { font-size: 1.02rem; text-align: center; }
.db-lo, .db-hi { font-size: .95rem; font-variant-numeric: tabular-nums; }
.db-hi { text-align: right; } .db-hi a { font-size: .82rem; }
.db-bar small, .db-stat small { font-size: .7em; margin-left: .2em; font-weight: 600; }
.db-track { position: relative; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--muted) 24%, transparent); overflow: hidden; }
.db-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--bc); transition: width .4s var(--ease); }
.db-val { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-weight: 700; font-size: 1.05rem; white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px rgba(0,0,0,.15); }
.db-val.out { color: var(--text); text-shadow: none; }
.db-weight { --bc: var(--c-weight); } .db-nutrient { --bc: var(--c-nutrient); } .db-exercise { --bc: var(--c-exercise); }
.db-water { --bc: var(--c-water); } .db-steps { --bc: var(--c-steps); } .db-sleep { --bc: var(--c-sleep); } .db-streak { --bc: var(--c-streak); }

/* Upcoming goals */
.db-goal { display: flex; gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px dashed var(--border); }
.db-goal:first-child { padding-top: .2rem; }
.db-goal-ico { color: var(--c-weight); flex: none; display: grid; }
.db-goal dl { margin: 0; font-size: 1.05rem; line-height: 1.45; }
.db-goal dl div { display: flex; gap: .35rem; flex-wrap: wrap; }
.db-goal dt { font-weight: 800; } .db-goal dd { margin: 0; }
.db-goal p { margin: 0; }
.db-tip { font-size: .88rem; margin: .9rem 0 0; }

/* Headline tiles */
.db-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.db-stat { border-radius: 12px; padding: .8rem .9rem; background: color-mix(in srgb, var(--bc) 13%, var(--surface)); border: 1px solid color-mix(in srgb, var(--bc) 30%, transparent); display: flex; flex-direction: column; gap: .15rem; }
.db-stat-label { font-size: .8rem; font-weight: 700; color: color-mix(in srgb, var(--bc) 45%, #000); }
[data-theme="dark"] .db-stat-label { color: color-mix(in srgb, var(--bc) 55%, #fff); }
.db-stat-val { font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: color-mix(in srgb, var(--bc) 58%, #000); font-variant-numeric: tabular-nums; }
[data-theme="dark"] .db-stat-val { color: color-mix(in srgb, var(--bc) 55%, #fff); }
.db-stat-sub { font-size: .76rem; color: var(--muted); }
@media (max-width: 420px) { .db-charts { grid-template-columns: 1fr; } .db-stat-val { font-size: 1.4rem; } }

/* ==========================================================
   Panel heading bands (Appearance → Card style → Panel headings; color: Site Settings → Panel headings)
   Members' pages only (.area-user). Each heading stretches over its card's padding.
   ========================================================== */
.db-head { background: linear-gradient(135deg, var(--heading-color, var(--primary)), color-mix(in srgb, var(--heading-color, var(--primary)) 74%, #000)); color: var(--on-heading, var(--on-primary)); }
/* Each banded card gets its padding from --bp-y / --bp-x, and its heading stretches over exactly that much */
[data-headings="band"] .area-user :is(.panel:has(> .panel-head), .card:has(> .totals-head), .meal-card:has(> .meal-head), .chart-card:has(> .cc-head), .chat-side:has(> .chat-side-head),
  .card:not(.db-card):not(.forum-card):has(> h2:first-child, > input[type=hidden]:first-child + h2, > .tool-head:first-child, > .band-head:first-child)) {
  --bp-y: 1.5rem; --bp-x: 1.5rem; padding: var(--bp-y) var(--bp-x);
}
[data-headings="band"] .area-user .panel:has(> .panel-head) { --bp-y: 1.25rem; --bp-x: 1.25rem; }
[data-headings="band"] .area-user .meal-card:has(> .meal-head) { --bp-y: 1rem; --bp-x: 1.25rem; }
[data-headings="band"] .area-user .chart-card:has(> .cc-head) { --bp-y: 1.1rem; --bp-x: 1.25rem; }
[data-headings="band"] .area-user .chat-side:has(> .chat-side-head) { --bp-y: 1rem; --bp-x: 1rem; }
@media (max-width: 600px) {
  [data-headings="band"] .area-user :is(.panel, .card, .meal-card, .chart-card, .chat-side) { --bp-y: 1rem !important; --bp-x: 1rem !important; }
}
[data-headings="band"] .area-user :is(.panel > .panel-head, .card > .totals-head, .meal-card > .meal-head, .chart-card > .cc-head, .chat-side > .chat-side-head,
  .card:not(.db-card):not(.forum-card) > :is(h2:first-child, input[type=hidden]:first-child + h2, .tool-head:first-child, .band-head:first-child)) {
  margin: calc(-1 * var(--bp-y)) calc(-1 * var(--bp-x)) 1rem; padding: .7rem var(--bp-x);
  background: linear-gradient(135deg, var(--heading-color), color-mix(in srgb, var(--heading-color) 74%, #000));
  color: var(--on-heading);
  border-top-left-radius: inherit; border-top-right-radius: inherit;
}
[data-headings="band"] .area-user .panel > .panel-head { margin-bottom: .65rem; }
[data-headings="band"] .area-user .meal-card > .meal-head { margin-bottom: .8rem; padding-block: .55rem; }
[data-headings="band"] .area-user .meal-card > .meal-head:last-child { margin-bottom: calc(-1 * var(--bp-y)); border-radius: inherit; }
/* Chat window header (no padding to stretch over) */
[data-headings="band"] .area-user .chat-head { background: linear-gradient(135deg, var(--heading-color), color-mix(in srgb, var(--heading-color) 74%, #000)); color: var(--on-heading); border-bottom-color: transparent; }
[data-headings="band"] .area-user .chat-head :is(a, .muted, .icon-btn, strong) { color: inherit; }
/* Things inside a band switch to the band's text color */
[data-headings="band"] .area-user :is(.panel-head, .totals-head, .meal-head, .cc-head, .tool-head, .chat-side-head, .band-head) :is(h2, h3, a, .muted, .cc-sub, .link-btn, .panel-open, .meal-cal) { color: inherit; }
[data-headings="band"] .area-user :is(.cc-head .cc-sub, .meal-head .meal-cal) { opacity: .85; }
[data-headings="band"] .area-user .panel-head .panel-icon { background: color-mix(in srgb, var(--on-heading) 18%, transparent); color: inherit; }
[data-headings="band"] .area-user :is(.panel-head, .totals-head, .meal-head, .cc-head, .tool-head) .tool-tag { background: color-mix(in srgb, var(--on-heading) 20%, transparent); color: inherit; }
[data-headings="band"] .area-user :is(.totals-head, .meal-head, .tool-head, .chat-side-head, .band-head) .btn-primary { background: var(--on-heading); color: var(--heading-color); }
[data-headings="band"] .area-user :is(.totals-head, .meal-head, .tool-head, .chat-side-head, .band-head) .btn-ghost { color: inherit; background: transparent; border-color: color-mix(in srgb, var(--on-heading) 45%, transparent); }
[data-headings="band"] .area-user :is(.totals-head, .meal-head, .tool-head, .chat-side-head, .band-head) .btn-ghost:hover { background: color-mix(in srgb, var(--on-heading) 14%, transparent); }
/* Danger zone keeps a red band */
[data-headings="band"] .area-user .danger-zone > h2:first-child { background: linear-gradient(135deg, #c93c3c, #9e2a2a); color: #fff; }

/* ---- Community forum: all topics in one panel with a heading ---- */
.forum-card { padding: 0; overflow: hidden; }
.forum-card-head { margin: 0; padding: .9rem 1.25rem; font-size: 1.15rem; border-bottom: 1px solid var(--border); }
[data-headings="band"] .area-user .forum-card-head { background: linear-gradient(135deg, var(--heading-color), color-mix(in srgb, var(--heading-color) 74%, #000)); color: var(--on-heading); border-bottom: 0; }
.forum-card .forum-topics { gap: 0; }
.forum-card .forum-topic { border-radius: 0; border: 0; border-top: 1px solid var(--border); box-shadow: none; background: transparent; transition: background .15s; }
.forum-card .forum-topic:first-child { border-top: 0; }
.forum-card .forum-topic:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); box-shadow: none; transform: none; }
.forum-card .forum-topic.ft-coaching { background: color-mix(in srgb, #b5651d 6%, transparent); }
/* Admin → Appearance: a little preview of the band */
.ap-hb-demo { display: inline-block; width: 150px; height: 52px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; vertical-align: middle; }
.ap-hb-demo b { display: block; font-size: .72rem; padding: .25rem .5rem; background: linear-gradient(135deg, var(--heading-color), color-mix(in srgb, var(--heading-color) 74%, #000)); color: var(--on-heading); }
.ap-hb-demo i { display: block; height: 5px; margin: .45rem .5rem 0; width: 60%; border-radius: 3px; background: var(--border); }
[data-headings="plain"] .ap-hb-demo b { background: none; color: var(--text); }


/* ---- Header calendar (Daily Tracking): calendar icon next to the light/dark button, and a red × by the title ---- */
.hdr-cal:empty { display: none; }
.hdr-day { position: relative; }
.hdr-day #dayBtn.is-other { color: var(--primary-text); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.hdr-day .cal-pop { left: auto; right: -44px; transform: none; top: calc(100% + 10px); color: var(--text); }
.topbar-title { display: flex; align-items: center; gap: .45rem; min-width: 0; }
#pageTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#titleX:empty { display: none; }
.title-x { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: #e03131; color: #fff; text-decoration: none; line-height: 0; }
.title-x svg { display: block; }
.title-x:hover { background: #c92a2a; }
@media (max-width: 600px) { .hdr-day .cal-pop { position: fixed; top: calc(var(--topbar-h) + 8px); left: 12px; right: 12px; width: auto; max-width: 340px; margin: 0 auto; } }
@media (max-width: 430px) {
  .topbar { gap: .4rem; padding: 0 .6rem; }
  .topbar-actions { gap: .25rem; }
  .topbar-title { font-size: 1rem; gap: .35rem; }
  .topbar .icon-btn { width: 36px; height: 36px; }
}

/* Pop-up windows (Add food, Log exercise, …) get the heading band too */
[data-headings="band"] .area-user .modal-head { background: linear-gradient(135deg, var(--heading-color), color-mix(in srgb, var(--heading-color) 74%, #000)); color: var(--on-heading); border-bottom-color: transparent; }
[data-headings="band"] .area-user .modal-head .icon-btn { color: inherit; }
[data-headings="band"] .area-user .modal-head .icon-btn:hover { background: color-mix(in srgb, var(--on-heading) 14%, transparent); }

/* ---- Competitions → Badges ---- */
.bd-summary { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.bd-sum { display: flex; align-items: baseline; gap: .45rem; padding: .7rem 1.1rem; border-radius: 12px; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); }
.bd-sum strong { font-size: 1.6rem; font-weight: 800; color: var(--primary-text); line-height: 1; }
.bd-sum span { color: var(--muted); font-size: .9rem; }
.bd-group + .bd-group { margin-top: 1.25rem; }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.25rem 1rem; }
.bd-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem; }
.bd-medal { position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin-bottom: .35rem; color: #fff;
  background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--bc) 60%, #fff), var(--bc) 62%, color-mix(in srgb, var(--bc) 75%, #000));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--bc) 22%, transparent), 0 8px 18px -6px color-mix(in srgb, var(--bc) 70%, transparent); }
.bd-medal > svg { width: 40px; height: 40px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.bd-count { position: absolute; top: -6px; right: -10px; min-width: 30px; padding: .1rem .4rem; border-radius: 999px; background: var(--surface); color: color-mix(in srgb, var(--bc) 50%, #000); border: 2px solid var(--bc); font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
[data-theme="dark"] .bd-count { color: color-mix(in srgb, var(--bc) 50%, #fff); }
.bd-name { font-size: .95rem; }
.bd-how { font-size: .78rem; color: var(--muted); line-height: 1.3; }
.bd-when { font-size: .74rem; font-weight: 600; color: color-mix(in srgb, var(--bc) 40%, #000); }
[data-theme="dark"] .bd-when { color: color-mix(in srgb, var(--bc) 50%, #fff); }
.bd-item.locked .bd-medal { background: color-mix(in srgb, var(--muted) 30%, var(--surface)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--muted) 12%, transparent); color: color-mix(in srgb, var(--muted) 80%, var(--surface)); }
.bd-item.locked .bd-name { color: var(--muted); }
.bd-item.locked .bd-when { color: var(--muted); font-weight: 500; }
.bd-note { font-size: .85rem; text-align: center; margin-top: 1.25rem; }
.bd-first { font-weight: 500; opacity: .8; }


/* ---- Help & Settings → Get the app (progressive web app) ---- */
.get-app { margin-top: 1.25rem; }
.ga-row { display: flex; gap: 1.1rem; align-items: flex-start; }
.ga-icon { width: 64px; height: 64px; border-radius: 15px; flex: none; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.ga-text p { margin: 0 0 .75rem; }
.ga-steps { margin: 0 0 .5rem; padding-left: 1.2rem; }
.ga-steps li { margin-bottom: .35rem; }
.ga-steps svg { vertical-align: -3px; color: var(--primary-text); }
/* Installed app: keep content clear of the iPhone home bar */
@media (display-mode: standalone) { .content { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); } .sidebar-nav { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); } }
.get-app [hidden] { display: none !important; }
.search-left { font-weight: 600; color: var(--text); white-space: nowrap; }

/* ---- Menu panel scenes (Appearance → Menu panel): drawn hillsides tinted with the Side menu background ----
   Each one sets --sc-sky (background), --sc-hill (the three hills), --sc-wash (shading over it all).
   Starry night switches the menu to light text; the others keep the Side menu text color. */
[data-menu="scene"] .sidebar, .mk-side[data-m="scene"] {
  --sc-sky: linear-gradient(180deg, var(--sidebar) 8%, color-mix(in srgb, var(--sidebar) 78%, #f7c27c) 36%, color-mix(in srgb, var(--sidebar) 62%, #e9a27c) 52%, color-mix(in srgb, var(--sidebar) 62%, #a698c4) 70%);
  --sc-hill: color-mix(in srgb, var(--sidebar) 55%, #04100a);
  --sc-wash: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.35));
}
[data-menu="scene_fade"] .sidebar, .mk-side[data-m="scene_fade"] {
  --sc-sky: linear-gradient(180deg, var(--sidebar) calc(100% - 48vh), color-mix(in srgb, var(--sidebar) 72%, #f7c27c) calc(100% - 36vh), color-mix(in srgb, var(--sidebar) 58%, #c49aa2) calc(100% - 20vh), color-mix(in srgb, var(--sidebar) 58%, #a698c4));
  --sc-hill: color-mix(in srgb, var(--sidebar) 58%, #04100a);
  --sc-wash: linear-gradient(180deg, transparent calc(100% - 40vh), color-mix(in srgb, var(--sidebar) 40%, rgba(0,0,0,.4)));
  --sc-hill-size: 100% 80vh;
}
[data-menu="scene_night"] .sidebar, .mk-side[data-m="scene_night"] {
  --sc-sky: radial-gradient(1.3px 1.3px at 12% 8%, rgba(255,255,255,0.9), transparent), radial-gradient(1.3px 1.3px at 30% 18%, rgba(255,255,255,0.6), transparent), radial-gradient(1.3px 1.3px at 55% 6%, rgba(255,255,255,0.8), transparent), radial-gradient(1.3px 1.3px at 78% 14%, rgba(255,255,255,0.7), transparent), radial-gradient(1.3px 1.3px at 90% 28%, rgba(255,255,255,0.5), transparent), radial-gradient(1.3px 1.3px at 20% 34%, rgba(255,255,255,0.5), transparent), radial-gradient(1.3px 1.3px at 65% 30%, rgba(255,255,255,0.8), transparent), radial-gradient(1.3px 1.3px at 42% 44%, rgba(255,255,255,0.4), transparent), radial-gradient(1.3px 1.3px at 85% 46%, rgba(255,255,255,0.6), transparent), radial-gradient(1.3px 1.3px at 8% 52%, rgba(255,255,255,0.4), transparent), linear-gradient(180deg, color-mix(in srgb, var(--sidebar) 30%, #050817), color-mix(in srgb, var(--sidebar) 38%, #1b2148) 55%, color-mix(in srgb, var(--sidebar) 35%, #433a68));
  --sc-sky-size: 160px 200px, 160px 200px, 160px 200px, 160px 200px, 160px 200px, 160px 200px, 160px 200px, 160px 200px, 160px 200px, 160px 200px, 100% 100%;
  --sc-hill: color-mix(in srgb, var(--sidebar) 35%, #02040c);
  --sc-wash: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.35));
}
[data-menu="scene_dawn"] .sidebar, .mk-side[data-m="scene_dawn"] {
  --sc-sky: linear-gradient(180deg, color-mix(in srgb, var(--sidebar) 70%, #ffffff), color-mix(in srgb, var(--sidebar) 62%, #ffe0c4) 45%, color-mix(in srgb, var(--sidebar) 58%, #f6c3d2) 68%);
  --sc-hill: color-mix(in srgb, var(--sidebar) 50%, #5f8f72);
  --sc-wash: none;
}
:is([data-menu="scene"], [data-menu="scene_fade"], [data-menu="scene_night"], [data-menu="scene_dawn"]) .sidebar, :is(.mk-side[data-m="scene"], .mk-side[data-m="scene_fade"], .mk-side[data-m="scene_night"], .mk-side[data-m="scene_dawn"]) { background: var(--sc-sky); background-size: var(--sc-sky-size, auto); border-color: transparent; }
:is([data-menu="scene"], [data-menu="scene_fade"], [data-menu="scene_night"], [data-menu="scene_dawn"]) .sidebar::before, :is(.mk-side[data-m="scene"], .mk-side[data-m="scene_fade"], .mk-side[data-m="scene_night"], .mk-side[data-m="scene_dawn"])::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--sc-hill);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%221200%22 viewBox=%220 0 600 1200%22 preserveAspectRatio=%22none%22%3E%3Cpath fill-opacity=%220.45%22 d=%22M0,1200 L0,660 20,667 40,674 60,681 80,688 100,695 120,701 140,706 160,712 180,716 200,721 220,724 240,727 260,729 280,731 300,732 320,732 340,731 360,730 380,728 400,725 420,722 440,718 460,714 480,709 500,703 520,697 540,691 560,684 580,677 600,670 L600,1200 Z%22/%3E%3Cpath fill-opacity=%220.75%22 d=%22M0,1200 L0,881 20,878 40,874 60,870 80,865 100,859 120,853 140,847 160,840 180,833 200,826 220,819 240,812 260,805 280,798 300,791 320,784 340,778 360,772 380,766 400,762 420,757 440,753 460,750 480,747 500,746 520,744 540,744 560,744 580,745 600,747 L600,1200 Z%22/%3E%3Cpath fill-opacity=%221%22 d=%22M0,1200 L0,906 20,901 40,897 60,894 80,891 100,890 120,888 140,888 160,888 180,889 200,891 220,893 240,896 260,900 280,904 300,909 320,915 340,920 360,927 380,933 400,940 420,947 440,954 460,961 480,968 500,975 520,982 540,989 560,996 580,1002 600,1007 L600,1200 Z%22/%3E%3C/svg%3E") bottom / var(--sc-hill-size, 100% 100%) no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%221200%22 viewBox=%220 0 600 1200%22 preserveAspectRatio=%22none%22%3E%3Cpath fill-opacity=%220.45%22 d=%22M0,1200 L0,660 20,667 40,674 60,681 80,688 100,695 120,701 140,706 160,712 180,716 200,721 220,724 240,727 260,729 280,731 300,732 320,732 340,731 360,730 380,728 400,725 420,722 440,718 460,714 480,709 500,703 520,697 540,691 560,684 580,677 600,670 L600,1200 Z%22/%3E%3Cpath fill-opacity=%220.75%22 d=%22M0,1200 L0,881 20,878 40,874 60,870 80,865 100,859 120,853 140,847 160,840 180,833 200,826 220,819 240,812 260,805 280,798 300,791 320,784 340,778 360,772 380,766 400,762 420,757 440,753 460,750 480,747 500,746 520,744 540,744 560,744 580,745 600,747 L600,1200 Z%22/%3E%3Cpath fill-opacity=%221%22 d=%22M0,1200 L0,906 20,901 40,897 60,894 80,891 100,890 120,888 140,888 160,888 180,889 200,891 220,893 240,896 260,900 280,904 300,909 320,915 340,920 360,927 380,933 400,940 420,947 440,954 460,961 480,968 500,975 520,982 540,989 560,996 580,1002 600,1007 L600,1200 Z%22/%3E%3C/svg%3E") bottom / var(--sc-hill-size, 100% 100%) no-repeat;
}
:is([data-menu="scene"], [data-menu="scene_fade"], [data-menu="scene_night"], [data-menu="scene_dawn"]) .sidebar::after, :is(.mk-side[data-m="scene"], .mk-side[data-m="scene_fade"], .mk-side[data-m="scene_night"], .mk-side[data-m="scene_dawn"])::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--sc-wash); }
.mk-side[data-m="scene_fade"] { --sc-sky: linear-gradient(180deg, var(--sidebar) 45%, color-mix(in srgb, var(--sidebar) 70%, #f7c27c) 60%, color-mix(in srgb, var(--sidebar) 58%, #a698c4)); --sc-wash: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.3)); --sc-hill-size: 100% 90%; }
:is(.mk-side[data-m="scene"], .mk-side[data-m="scene_fade"], .mk-side[data-m="scene_night"], .mk-side[data-m="scene_dawn"]) i { z-index: 1; }
/* light text on the darker scenes */
[data-menu="scene_night"] .sidebar { color: #fff; }
[data-menu="scene_night"] .sidebar-brand { border-bottom-color: color-mix(in srgb, #fff 18%, transparent); }
[data-menu="scene_night"] .nav-link > :not(.nav-badge) { opacity: .9; }
[data-menu="scene_night"] .nav-link:hover { background: color-mix(in srgb, #fff 12%, transparent); }
[data-menu="scene_night"] .nav-link.active { color: #fff; background: color-mix(in srgb, #fff 20%, transparent); box-shadow: inset 3px 0 0 #fff; }
[data-menu="scene_night"] .sidebar .logo-light { display: none; }
[data-menu="scene_night"] .sidebar .logo-dark { display: inline-block; }
[data-menu="scene_night"] :is(.sidebar .brand-text, .nav-link span) { text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.mk-side[data-m="scene_night"] { color: #fff; }
:is([data-menu="scene"], [data-menu="scene_dawn"], [data-menu="scene_fade"]) .sidebar-brand { border-bottom-color: color-mix(in srgb, var(--sidebar-text) 14%, transparent); }

/* ---- Admin → Home ---- */
.hm-page { max-width: 1100px; }
.hm-hello h2 { margin: 0 0 .2rem; }
.hm-hello p { margin: 0; }
.hm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.hm-tile { display: flex; flex-direction: column; gap: .1rem; padding: 1rem 1.1rem; border-radius: var(--radius); background: color-mix(in srgb, var(--hc) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--hc) 28%, var(--border)); }
.hm-label { font-size: .8rem; font-weight: 700; color: color-mix(in srgb, var(--hc) 50%, var(--text)); }
.hm-tile strong { font-size: 2rem; line-height: 1.15; font-weight: 800; color: var(--hc); font-variant-numeric: tabular-nums; }
[data-theme="dark"] .hm-tile strong { color: color-mix(in srgb, var(--hc) 75%, #fff); }
.hm-sub { font-size: .78rem; color: var(--muted); }
.hm-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; align-items: start; }
.hm-grid > .card + .card { margin-top: 0; }
@media (max-width: 860px) { .hm-grid { grid-template-columns: 1fr; } }
.hm-bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: .35rem; height: 160px; align-items: end; margin-top: .5rem; }
.hm-bar { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.hm-bar i { display: block; width: 100%; min-height: 2px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 80%, #fff), var(--primary)); }
.hm-bar b { font-size: .72rem; color: var(--muted); min-height: 1.1rem; }
.hm-bar small { margin-top: .3rem; font-size: .72rem; color: var(--muted); }
.hm-levels { list-style: none; margin: 0; padding: 0; }
.hm-levels li { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.hm-levels li:last-child { border-bottom: 0; }
.hm-levels strong { font-variant-numeric: tabular-nums; }
.hm-more { margin: .75rem 0 0; font-size: .9rem; }

/* ==========================================================
   Page layout: full-width top bar (Appearance → Menu panel → Page layout)
   The top bar spans the screen; the menu (with the logo at its top) starts below it.
   ========================================================== */
[data-layout="bar"] .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 45; }
[data-layout="bar"] .main { padding-top: var(--topbar-h); }
[data-layout="bar"] .sidebar { top: var(--topbar-h); }
[data-layout="bar"] .sidebar-backdrop { top: var(--topbar-h); }
[data-layout="bar"] .sidebar-brand { height: auto; min-height: 0; padding: 1.25rem .75rem .5rem; border-bottom: 0; justify-content: center; position: relative; }
[data-layout="bar"] .sidebar-brand .brand-slot { flex: 1; justify-content: center; }   /* the logo sits centered over the menu */
[data-layout="bar"] .sidebar-brand .sidebar-close { position: absolute; top: .5rem; right: .5rem; }
[data-layout="bar"] .sidebar-brand .brand-logo { max-height: 96px; max-width: 100%; }
[data-layout="bar"] .sidebar-brand .brand-text { font-size: 1.55rem; }
[data-layout="bar"] .hdr-day .cal-pop { top: calc(100% + 10px); }
@media (display-mode: standalone) { [data-layout="bar"] .content { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); } }

/* ---- Menu box (Appearance → Menu panel → Menu box): a box behind the menu links ---- */
[data-menubox="glass"] .sidebar-nav, [data-menubox="solid"] .sidebar-nav { margin: .5rem .75rem .75rem; padding: .3rem; gap: 0; position: relative; z-index: 1; }
[data-menubox="glass"] .sidebar-nav { background: color-mix(in srgb, var(--sidebar-text) 9%, transparent); border: 1px solid color-mix(in srgb, var(--sidebar-text) 14%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
[data-menubox="solid"] .sidebar-nav { background: var(--surface); border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,.08); color: var(--text); }
[data-menubox="solid"] .sidebar-nav .nav-link { color: var(--text); text-shadow: none; }
[data-menubox="solid"] .sidebar-nav .nav-link.active { color: var(--primary-text); background: color-mix(in srgb, var(--primary) 12%, transparent); box-shadow: inset 3px 0 0 var(--primary); }
[data-menubox="solid"] .sidebar-nav .nav-link:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
/* a thin line between links (drawn separately, so the active link keeps its highlight) */
:is([data-menubox="glass"], [data-menubox="solid"]) .sidebar-nav .nav-link { position: relative; }
:is([data-menubox="glass"], [data-menubox="solid"]) .sidebar-nav .nav-link + .nav-link::before { content: ""; position: absolute; left: .8rem; right: .8rem; top: 0; height: 1px; background: currentColor; opacity: .12; pointer-events: none; }
:is([data-menubox="glass"], [data-menubox="solid"]) .sidebar-nav :is(.nav-link.active, .nav-link:hover) + .nav-link::before,
:is([data-menubox="glass"], [data-menubox="solid"]) .sidebar-nav .nav-link:is(.active, :hover)::before { opacity: 0; }
[data-menubox="glass"] .sidebar-nav .nav-link, [data-menubox="solid"] .sidebar-nav .nav-link { padding: .75rem .8rem; }
[data-menubox-shape="rounded"]:is([data-menubox="glass"], [data-menubox="solid"]) .sidebar-nav { border-radius: 14px; }
[data-menubox-shape="square"]:is([data-menubox="glass"], [data-menubox="solid"]) .sidebar-nav { border-radius: 0; }
[data-menubox-shape="square"]:is([data-menubox="glass"], [data-menubox="solid"]) .sidebar-nav .nav-link { border-radius: 0; }

/* ---- Colorful menu icons (Appearance → Menu panel → Menu icons): a white icon on a colored tile ----
   Each page keeps its own color (by data-view); anything else cycles through the palette. */
[data-menuicons="color"] .sidebar-nav .nav-link > svg:first-child {
  box-sizing: content-box; width: 17px; height: 17px; padding: 6px; border-radius: 9px; flex: none;
  color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--ic, #64748b) 72%, #fff), var(--ic, #64748b));
  box-shadow: 0 2px 5px color-mix(in srgb, var(--ic, #64748b) 35%, transparent);
}
[data-menuicons="color"][data-menubox-shape="square"]:is([data-menubox="glass"], [data-menubox="solid"]) .sidebar-nav .nav-link > svg:first-child { border-radius: 4px; }
[data-menuicons="color"] .sidebar-nav .nav-link { gap: .65rem; padding-top: .5rem; padding-bottom: .5rem; }
[data-menuicons="color"] .sidebar-nav .nav-link:nth-child(9n+1) { --ic: #2563eb; } [data-menuicons="color"] .sidebar-nav .nav-link:nth-child(9n+2) { --ic: #8b2fd6; }
[data-menuicons="color"] .sidebar-nav .nav-link:nth-child(9n+3) { --ic: #f59e0b; } [data-menuicons="color"] .sidebar-nav .nav-link:nth-child(9n+4) { --ic: #16a34a; }
[data-menuicons="color"] .sidebar-nav .nav-link:nth-child(9n+5) { --ic: #ec4899; } [data-menuicons="color"] .sidebar-nav .nav-link:nth-child(9n+6) { --ic: #ef4444; }
[data-menuicons="color"] .sidebar-nav .nav-link:nth-child(9n+7) { --ic: #0d9488; } [data-menuicons="color"] .sidebar-nav .nav-link:nth-child(9n+8) { --ic: #06b6d4; }
[data-menuicons="color"] .sidebar-nav .nav-link:nth-child(9n+9) { --ic: #6366f1; }
[data-menuicons="color"] .sidebar-nav .nav-link[data-view="welcome"] { --ic: #eab308; }
[data-menuicons="color"] .sidebar-nav .nav-link[data-view="page"] { --ic: #06b6d4; }
[data-menuicons="color"] .sidebar-nav .nav-link[data-view="tracking"] { --ic: #2563eb; }
[data-menuicons="color"] .sidebar-nav .nav-link[data-view="charts"] { --ic: #8b2fd6; }
[data-menuicons="color"] .sidebar-nav .nav-link[data-view="competitions"] { --ic: #f59e0b; }
[data-menuicons="color"] .sidebar-nav .nav-link[data-view="forum"] { --ic: #16a34a; }
[data-menuicons="color"] .sidebar-nav .nav-link[data-view="buddies"] { --ic: #ec4899; }
[data-menuicons="color"] .sidebar-nav .nav-link[data-view="goals"] { --ic: #ef4444; }
[data-menuicons="color"] .sidebar-nav .nav-link[data-view="settings"] { --ic: #0d9488; }
[data-menuicons="color"] .sidebar-nav .nav-link[data-view="appearance"] { --ic: #d946ef; }
[data-menuicons="color"] .sidebar-nav .nav-link[data-view="users"] { --ic: #3b82f6; }
[data-menuicons="color"] .sidebar-nav .nav-link[data-view="access"] { --ic: #f97316; }
[data-menuicons="color"] .sidebar-nav .nav-link[data-view="pages"] { --ic: #06b6d4; }
[data-menuicons="color"] .sidebar-nav .nav-link[data-view="assets"] { --ic: #10b981; }
[data-menuicons="color"] .sidebar-nav .nav-link[data-view="nutrition"] { --ic: #65a30d; }
[data-menuicons="color"] .sidebar-nav .nav-link[data-view="features"] { --ic: #6366f1; }
[data-menuicons="color"] .sidebar-nav .nav-link[data-view="deployment"] { --ic: #e11d48; }
[data-menuicons="color"] .sidebar-nav .nav-link[data-view="home"] { --ic: #0ea5e9; }

/* ---- Admin → Deployment checklist ---- */
.dp-page { max-width: 900px; }
.dp-site { margin: 0 0 1rem; overflow-wrap: anywhere; }
.dp-list { list-style: none; margin: 0; padding: 0; }
.dp-step { display: flex; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--border); }
.dp-step:first-child { border-top: 0; }
.dp-mark { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #c62f2f; border: 2px solid #e5a3a3; background: color-mix(in srgb, #c62f2f 8%, transparent); }
.dp-step.is-done .dp-mark { color: #fff; border-color: #2f9e5b; background: #2f9e5b; }
.dp-body { flex: 1; min-width: 0; }
.dp-body > strong { font-size: 1.02rem; }
.dp-body p { margin: .25rem 0 .5rem; color: var(--muted); }
.dp-step.is-done .dp-body > strong { color: var(--muted); }
.dp-sub { list-style: none; margin: 0 0 .6rem; padding: 0; font-size: .9rem; }
.dp-sub li { padding-left: 1.4rem; position: relative; margin-bottom: .2rem; }
.dp-sub li::before { content: ""; position: absolute; left: .2rem; top: .45em; width: .6rem; height: .6rem; border-radius: 50%; border: 2px solid #d64545; }
.dp-sub li.ok::before { border-color: #2f9e5b; background: #2f9e5b; }
.dp-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.dp-when { display: inline-block; margin-top: .4rem; font-size: .8rem; font-weight: 600; color: #2f9e5b; }

/* Deployment → Share your program */
.sh-card { margin-top: 1.25rem; }
.sh-locked { opacity: .75; }
.sh-block { padding: 1.1rem 0; border-top: 1px solid var(--border); }
.sh-block:first-of-type { border-top: 0; }
.sh-block h3 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .2rem; font-size: 1.05rem; }
.sh-block > p { margin: 0 0 .75rem; }
.sh-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; font-weight: 800; background: var(--primary); color: var(--on-primary); }
.sh-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.sh-url { flex: 1 1 260px; min-width: 0; font-weight: 600; }
.sh-opts { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; margin-bottom: .8rem; }
.sh-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: .9rem; }
.sh-pill:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); font-weight: 600; }
.sh-check { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; cursor: pointer; }
.sh-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.sh-preview { position: relative; padding: 2.2rem 1rem 1.25rem; border-radius: 12px; background: repeating-conic-gradient(#f3f4f6 0 25%, #fafafa 0 50%) 0 0 / 18px 18px; border: 1px solid var(--border); min-height: 120px; }
.sh-tag { position: absolute; top: .55rem; left: .7rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6b7280; }
.sh-codewrap { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.sh-code { width: 100%; min-height: 260px; font: .78rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow: auto; resize: vertical; }
.sh-qr { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.sh-qrbox { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .75rem; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.sh-qrbox canvas { width: 200px; height: 200px; display: block; }
.sh-qrbox small { color: #4b5563; font-weight: 600; max-width: 200px; text-align: center; overflow-wrap: anywhere; }
.sh-qropts { flex: 1 1 240px; }
.sh-small { font-size: .85rem; margin: .6rem 0 0; }

/* Deployment → Upgrade Links */
.ul-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .75rem; }
.ul-item { border: 1px solid var(--border); border-radius: 12px; padding: .8rem .9rem; }
.ul-top { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin-bottom: .55rem; }
.ul-meta { font-size: .85rem; margin-left: auto; }
.ul-plan { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: .15rem .55rem; border-radius: 999px; color: #fff; background: #2563eb; }
.ul-plan.ul-monthly { background: #0f766e; }
.ul-plan.ul-indefinite { background: #7c3aed; }
.ul-del { margin: 0; }
.ul-new { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin: 1rem 0; padding: .9rem; border: 1px dashed var(--border); border-radius: 12px; }
.ul-new .field { margin: 0; }
.ul-name { flex: 1 1 220px; }
.ul-how { margin: .5rem 0 1rem; }
.ul-how summary { cursor: pointer; font-weight: 700; }
.ul-how ol { margin: .6rem 0; padding-left: 1.3rem; }
.ul-how li { margin-bottom: .45rem; }
.ul-h3 { font-size: 1rem; margin: 1.2rem 0 .5rem; }
.ul-log { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ul-log th, .ul-log td { text-align: left; padding: .45rem .5rem; border-top: 1px solid var(--border); vertical-align: top; }
.ul-ref { overflow-wrap: anywhere; max-width: 220px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; }
.ul-wait { color: #b45309; font-weight: 600; }
[data-theme="dark"] .ul-wait { color: #fbbf24; }
.um-plan { display: block; margin-top: .2rem; font-size: .75rem; font-weight: 600; color: var(--muted); white-space: nowrap; }

/* The page behind an upgrade link (upgrade.php) */
.upg h2 { margin: .2rem 0 .5rem; }
.upg-plan { margin: 0 0 1.1rem; }
.upg-badge { display: inline-block; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: .15rem .55rem; border-radius: 999px; background: var(--primary); color: var(--on-primary); margin-right: .25rem; }
.upg-ok { width: 64px; height: 64px; margin: .25rem auto .75rem; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #2f9e5b; }
.upg-actions { display: grid; gap: .5rem; }
.upg .btn-block + .btn-block { margin-top: 0; }
@media (max-width: 640px) { .ul-meta { margin-left: 0; width: 100%; } }
@media (max-width: 760px) { .sh-split { grid-template-columns: 1fr; } }
.hm-deploy a { font-weight: 700; margin-left: .35rem; }

/* Admin two-step sign-in (wladmin/views/login.php) and its status on Home */
.mfa-lead { margin-top: -.25rem; }
.mfa-code { font-size: 1.6rem; letter-spacing: .45em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.mfa-trust { margin: 0 0 1rem; }
.mfa-links { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.mfa-links form { margin: 0; }
.hm-mfa { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: .4rem 0 0; font-size: .9rem; }
.hm-mfa-on { display: inline-flex; align-items: center; gap: .3rem; color: #1f7a46; font-weight: 700; }
[data-theme="dark"] .hm-mfa-on { color: #5fd08f; }

/* Admin → Help (wladmin/views/help.php) */
.hp-page { max-width: 1100px; display: grid; gap: 1.25rem; }
.hp-page > .card { margin: 0; scroll-margin-top: 80px; }
.hp-intro p { margin: 0 0 .8rem; }
.hp-jump { display: flex; flex-wrap: wrap; gap: .5rem; }
.hp-jump a { padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--border); text-decoration: none; font-weight: 600; font-size: .9rem; color: var(--text); }
.hp-jump a:hover { border-color: var(--primary); color: var(--primary-text); }
.hp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; }
.hp-tile { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--text); transition: border-color .15s, background .15s; }
.hp-tile:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.hp-tile strong { display: block; }
.hp-tile small { display: block; color: var(--muted); line-height: 1.4; margin-top: .15rem; }
.hp-ico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary-text); }
.hp-ico svg { width: 19px; height: 19px; }
.hp-steps { margin: .5rem 0 0; padding-left: 1.4rem; display: grid; gap: .6rem; line-height: 1.55; }
.hp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.hp-two h3 { font-size: 1rem; margin: .4rem 0 .4rem; }
.hp-two ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; line-height: 1.5; }
.hp-faq .faq-item p { color: var(--text); }
@media (max-width: 760px) { .hp-two { grid-template-columns: 1fr; } }

/* Daily Tracking → "Add to your home screen" panel (phones and tablets, until installed) */
.panel-install .ip-icon { background: none; padding: 0; overflow: hidden; }
.panel-install .ip-icon img { width: 38px; height: 38px; border-radius: 10px; display: block; }
.ip-lead { margin: 0 0 .6rem; color: var(--muted); }
.panel-install [hidden] { display: none !important; }
.ip-steps { margin: 0; padding-left: 1.25rem; display: grid; gap: .45rem; }
.ip-steps svg { vertical-align: -3px; color: var(--primary-text); }
.ip-install { width: 100%; }
.ip-foot { margin-top: auto; padding-top: .8rem; text-align: right; }
.ip-later { color: var(--muted); font-weight: 600; font-size: .9rem; }

/* The top bar calendar while open: moved to the end of <body> (see daybar.php) and placed by script */
.cal-pop.cal-portal { position: fixed; z-index: 1000; transform: none; margin: 0; max-width: none; color: var(--text); }

/* Add food → barcode scanner and Snap a meal (plans b and c; includes/foodtools.php) */
.food-tools { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 .2rem; }
.food-tools .btn { display: inline-flex; align-items: center; gap: .4rem; }
.scan-box { margin: .75rem 0; }
.scan-view { position: relative; background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; max-height: 46vh; width: 100%; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; left: 12%; right: 12%; top: 32%; bottom: 32%; border: 3px solid rgba(255,255,255,.9); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); pointer-events: none; }
.scan-msg { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: .55rem .8rem; color: #fff; font-size: .9rem; text-align: center; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.scan-type { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.scan-type input { flex: 1 1 180px; min-width: 0; }
.scan-miss { padding: .25rem 0; }
.scan-miss p { margin: 0 0 .5rem; }
.photo-row { display: flex; align-items: stretch; gap: .25rem; }
.photo-row .food-row { flex: 1; min-width: 0; }
.photo-check { display: flex; align-items: center; padding: 0 .35rem; cursor: pointer; }
.photo-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); }
.photo-pick .form-actions { margin-top: .9rem; flex-wrap: wrap; }
#labelNote .alert, #labelNote .search-wait { margin-bottom: .75rem; }

/* AI coach (plan c; includes/aicoach.php) */
.coach-av { display: block; flex: none; border-radius: 50%; }
.buddy-row .coach-av.avatar, .chat-head .coach-av.avatar { width: 40px; height: 40px; }
.ai-tag { background: color-mix(in srgb, #8b5cf6 16%, transparent) !important; color: #6d28d9 !important; }
[data-theme="dark"] .ai-tag { color: #c4b5fd !important; }
.coach-rows { margin-bottom: .35rem; }
.coach-promo { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; margin: 0 0 .6rem; padding: .75rem .8rem; border: 1px dashed color-mix(in srgb, #8b5cf6 55%, var(--border)); border-radius: 12px;
  background: color-mix(in srgb, #8b5cf6 7%, var(--surface)); color: var(--text); font: inherit; cursor: pointer; }
.coach-promo:hover { border-style: solid; }
.coach-promo strong { display: block; }
.coach-promo small { display: block; line-height: 1.35; }
.coach-promo-avs { display: flex; flex: none; }
.coach-promo-avs .coach-av { margin-left: -10px; box-shadow: 0 0 0 2px var(--surface); }
.coach-promo-avs .coach-av:first-child { margin-left: 0; }
.coach-disclaimer { margin: 0; padding: .4rem .9rem; font-size: .78rem; color: var(--muted); background: color-mix(in srgb, #8b5cf6 6%, var(--surface)); border-bottom: 1px solid var(--border); text-align: center; }
.coach-log .msg.coach-msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: .45rem; align-items: end; }
.coach-log .msg.coach-msg > .msg-av { grid-row: 1 / span 2; align-self: end; margin-bottom: 1.1rem; }
.coach-log .msg.coach-msg .msg-foot { grid-column: 2; }
.coach-log .msg.coach-support .msg-bubble { border: 1px solid color-mix(in srgb, #e11d48 35%, transparent); }
.coach-log .msg.pending { opacity: .7; }
.coach-thinking .msg-av { margin-bottom: .1rem !important; }
.typing { display: inline-flex; gap: 4px; padding: .2rem 0; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; animation: typing 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: .9; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .typing i { animation: none; opacity: .6; } }
.coach-setup .cs-lead { margin: 0 0 1rem; color: var(--muted); }
.cs-avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .5rem; }
.cs-av { display: grid; place-items: center; padding: 4px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; }
.cs-av input { position: absolute; opacity: 0; pointer-events: none; }
.cs-av:has(input:checked) { border-color: var(--primary); }
.cs-av:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.cs-share { margin: .5rem 0 1rem; }
.cs-note { padding: .8rem 1rem; border-radius: 10px; background: color-mix(in srgb, var(--text) 5%, transparent); font-size: .88rem; }
.cs-note p { margin: 0 0 .5rem; }

.coach-admin { margin: 1.25rem 0 0; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 12px; }
.coach-admin legend { font-weight: 700; padding: 0 .35rem; }
.coach-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.coach-admin .unit-input { max-width: 160px; }
.coach-log .msg.coach-msg { border-left: 0; }
.check input { flex: none; }
.coach-setup fieldset.field { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.coach-setup fieldset.field legend { font-weight: 600; font-size: .9rem; margin-bottom: .45rem; padding: 0; }
.chat-head .ai-tag { background: rgba(255, 255, 255, .92) !important; color: #5b21b6 !important; }
.coach-head-av { flex: none; display: flex; }
.coach-av.msg-av, .buddy-row .coach-av, .coach-head-av .coach-av { box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent); }
.chat-head .btn-ghost[data-modal=coach_setup] { color: #fff; border-color: rgba(255, 255, 255, .6); background: transparent; white-space: nowrap; }
.chat-head .btn-ghost[data-modal=coach_setup]:hover { background: rgba(255, 255, 255, .14); }
@media (max-width: 560px) { .chat-head .btn-ghost[data-modal=coach_setup] { padding: .3rem .55rem; font-size: .78rem; } }

/* Deluxe Features (Start Your Diet only; includes/custom.php, views/deluxe.php) */
.deluxe-page { display: grid; gap: 1.25rem; max-width: 1000px; }
.sr-only, .deluxe-page .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dx-hero { position: relative; overflow: hidden; padding: 1.5rem; border-radius: 18px; color: var(--on-primary);
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 72%, #fff) 100%); box-shadow: 0 10px 28px -16px color-mix(in srgb, var(--primary) 70%, #000); }
.dx-hero h2 { margin: 0 0 .35rem; font-size: 1.6rem; color: inherit; }
.dx-hero p { margin: 0; max-width: 620px; opacity: .92; }
.dx-hero .dx-upgrade { margin-top: 1.1rem; background: #fff; color: var(--primary-text); border-color: #fff; }
.dx-hero .dx-upgrade:hover { background: color-mix(in srgb, #fff 88%, var(--primary)); }
.dx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.dx-card { margin: 0; }
.dx-card h3 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .6rem; }
.dx-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--primary-text); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.dx-ico svg { width: 20px; height: 20px; }
.dx-gift { display: flex; gap: .5rem; flex-wrap: wrap; margin: .75rem 0 .25rem; }
.dx-gift input { flex: 1 1 200px; min-width: 0; }
.dx-fire-logo { display: block; width: 100%; max-width: 260px; height: auto; border-radius: 8px; margin-bottom: .8rem; }
.dx-fire p { margin: 0 0 .9rem; }
.dx-feats h3 { margin: 0 0 .5rem; }
.dx-list { list-style: none; margin: 0; padding: 0; }
.dx-list li { display: flex; align-items: center; gap: .8rem; padding: .75rem 0; border-top: 1px solid var(--border); }
.dx-list li:first-child { border-top: 0; }
.dx-f-ico { flex: none; }
.dx-f-ico svg { width: 22px; height: 22px; }
.dx-f-text { flex: 1; min-width: 0; }
.dx-f-text strong, .dx-f-text small { display: block; }
.dx-list .btn { flex: none; white-space: nowrap; }
.dx-bottom { text-align: center; padding: .25rem 0 1rem; }
@media (max-width: 560px) {
  .dx-list li { flex-wrap: wrap; }
  .dx-list .btn { margin-left: calc(22px + 1.6rem); }
}
.deluxe-page > .card, .dx-grid > .card { margin: 0 !important; }

/* Fasting window (Daily Tracking → Intermittent Fasting) */
.fast-form { align-items: center; }
.fast-form select { width: auto; min-width: 0; padding-right: 1.8rem; }
.fast-to { font-weight: 600; color: var(--muted); }
.fast-calc { font-weight: 700; white-space: nowrap; }

/* Your AI tools today (Profile, Help Guide; ai_usage_html()) */
.ai-use { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ai-use-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: .4rem; }
.ai-use-top small { display: block; }
.ai-use-n { white-space: nowrap; color: var(--muted); }
.ai-use-n strong { color: var(--text); font-size: 1.15rem; }
.ai-use-bar { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; }
.ai-use-bar span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.ai-use-bar.full span { background: #d97706; }
.ai-use-note { margin: 1rem 0 0; }

/* Admin → Appearance: saved copy while trying things */
.ap-copy { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; max-width: 1000px; margin-bottom: 1.25rem; }
.ap-copy h2 { margin: 0 0 .25rem; font-size: 1.1rem; }
.ap-copy p { margin: 0; max-width: 640px; }
.ap-copy-text { flex: 1 1 320px; }
.ap-copy-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.ap-copy.has-copy { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.ai-use-card .ai-use-top { align-items: baseline; }
.ai-use-renew { margin: .55rem 0 0; font-size: .9rem; font-weight: 600; }
.ai-use-h { margin: 1rem 0 .35rem; font-size: .9rem; }
.ai-use-list { margin: 0; padding-left: 1.2rem; display: grid; gap: .25rem; font-size: .92rem; }
.dx-hero .dx-ai-x { margin-top: .7rem; padding: .55rem .8rem; border-radius: 10px; background: rgba(255, 255, 255, .18); display: inline-block; }
.dx-hero .dx-ai-x a { color: inherit; text-decoration: underline; }
.dx-coach { display: flex; align-items: center; gap: 1.25rem 1.5rem; flex-wrap: wrap; border: 2px solid color-mix(in srgb, var(--primary) 45%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), var(--surface)); }
.dx-coach-avs { display: flex; flex: none; }
.dx-coach-avs .coach-av { margin-left: -14px; box-shadow: 0 0 0 3px var(--surface); }
.dx-coach-avs .coach-av:first-child { margin-left: 0; }
.dx-coach-text { flex: 1 1 280px; }
.dx-coach-text h3 { margin: 0 0 .35rem; font-size: 1.25rem; }
.dx-coach-text p { margin: 0 0 .85rem; }
.dx-coach-inc { margin: 0 !important; }
.demo-tool { text-align: center; padding: .5rem .25rem; }
.demo-tool-ico { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: var(--primary-text); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.demo-tool-ico svg { width: 28px; height: 28px; }
.demo-tool h3 { margin: .75rem 0 .5rem; }
.demo-tool .form-actions { justify-content: center; }
.um-plan-tag { display: table; margin-top: .3rem; padding: .1rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.um-plan-monthly { background: color-mix(in srgb, #2563eb 14%, transparent); color: #1d4ed8; }
.um-plan-yearly { background: color-mix(in srgb, #16a34a 15%, transparent); color: #15803d; }
.um-plan-indefinite { background: color-mix(in srgb, #9333ea 14%, transparent); color: #7e22ce; }
[data-theme="dark"] .um-plan-monthly { color: #93c5fd; } [data-theme="dark"] .um-plan-yearly { color: #86efac; } [data-theme="dark"] .um-plan-indefinite { color: #d8b4fe; }
.forum-head-btns { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.forum-ai-note a { font-weight: 700; margin-left: .35rem; white-space: nowrap; }
.panel-actions:has(.demo-tool-btn) { flex-wrap: wrap; }
.panel-actions .btn { white-space: nowrap; }
.demo-tool-btn svg { width: 16px; height: 16px; }

/* ---- Competitions, Leaderboard, Badges: a top panel with the tabs in its heading; each section in a panel ---- */
.comp-top { margin-bottom: 1.25rem; }
.comp-top .comp-tabs { margin: 0; border-bottom: 0; }
[data-headings="band"] .area-user .comp-top > .band-head { padding-top: .3rem; padding-bottom: 0; }
[data-headings="band"] .area-user .band-head .tab { color: inherit; opacity: .78; }
[data-headings="band"] .area-user .band-head .tab:hover { opacity: 1; }
[data-headings="band"] .area-user .band-head .tab.active { opacity: 1; color: inherit; border-bottom-color: currentColor; }
.comp-top .comp-head { margin-bottom: .75rem; }
.comp-top .comp-rules { padding: 0; margin: 0; border: 0; background: none; box-shadow: none; }
.comp-top .range-bar { padding: 0; margin: 0; border: 0; box-shadow: none; background: none; }
.comp-top .bd-summary { margin: 0; }
.comp-sec { margin-top: 1.25rem; }
.comp-sec > h2.comp-section:first-child { margin-top: 0; }
.comp-sec > .panel-empty { margin: 0; }
.results-in > .band-head h2 { font-size: 1.15rem; }
/* ---- Community: topic threads in one panel; thread title panel ---- */
.forum-topic-card { margin-top: .25rem; }
.forum-topic-card > .forum-head { margin: 0 0 1rem; }
.forum-topic-card .thread-list { margin: 0 calc(-1 * var(--bp-x, 1.5rem)) calc(-1 * var(--bp-y, 1.5rem)); }
.forum-topic-card > .panel-empty { margin: 0; }
.thread-top { margin: .25rem 0 1rem; }
[data-headings="band"] .area-user .thread-top > .band-head:last-child { margin-bottom: calc(-1 * var(--bp-y)) !important; border-radius: inherit; }
.thread-top .thread-sub { margin: .3rem 0 0; }
.reply-box .reply-h { font-size: 1.05rem; margin: 0 0 .6rem; }
/* ---- Buddies: heading on the chat pane before a chat is open ---- */
.chat-head-empty { min-height: 62px; }
.chat-head-empty .chat-who { display: flex; flex-direction: column; }
/* Deluxe Features (sydnew): plans to buy, for Level 1 members */
.dx-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; scroll-margin-top: calc(var(--topbar-h) + 1rem); }
.dx-plan { position: relative; margin: 0 !important; display: flex; flex-direction: column; align-items: flex-start; border: 2px solid color-mix(in srgb, var(--primary) 35%, var(--border)); }
.dx-plan-monthly { border-color: var(--primary); box-shadow: 0 10px 26px -18px color-mix(in srgb, var(--primary) 80%, #000); }
.dx-plan-tag { display: inline-block; margin-bottom: .6rem; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--primary); color: var(--on-primary); }
.dx-plan h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.dx-plan-price { margin: 0; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.dx-plan-price strong { font-size: 2.2rem; line-height: 1; color: var(--primary-text); }
.dx-plan-price span { font-weight: 600; }
.dx-plan-then { margin: .45rem 0 0; font-weight: 600; }
.dx-plan-note { margin: .25rem 0 1rem; font-size: .9rem; }
.dx-plan-btn { margin-top: auto; width: 100%; justify-content: center; }
/* Users: Membership status */
.um-sub { min-width: 130px; }
.um-sub-monthly, .um-sub-yearly, .um-sub-indefinite { border-color: color-mix(in srgb, #16a34a 55%, var(--border)) !important; font-weight: 600; }
.um-sub-canceled { border-color: color-mix(in srgb, #dc2626 55%, var(--border)) !important; color: #b91c1c; font-weight: 600; }
[data-theme="dark"] .um-sub-canceled { color: #fca5a5; }
.profile-sub { margin-bottom: 1rem; }
.ul-cancel { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border); }
.ul-cancel .field { flex: 1 1 320px; margin: 0; }
.profile-cancel { margin-left: .35rem; font-weight: 600; white-space: nowrap; }
/* Send a membership code (Deployment, Coaching) and sent-code lists */
.send-code-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 1rem; }
.send-code .form-actions { align-items: center; flex-wrap: wrap; }
.send-code .form-actions .hint { margin: 0; }
.sent-h { margin: 1.5rem 0 .6rem; font-size: 1rem; }
.sent-codes code { font-weight: 700; }
.dp-steps > summary { cursor: pointer; font-weight: 700; margin: .25rem 0 .5rem; }
.dp-steps[open] > summary { margin-bottom: .75rem; }

/* ★ Level 2 features shown to Level 1 members (includes/upsell.php) */
.up-star { color: #f5b301; font-size: 1.05em; line-height: 1; }
.tab-upsell { opacity: .85; }
.coach-promo-up { border-style: dashed; }
.upsell-card { display: flex; gap: .75rem; align-items: center; margin-top: 1.25rem; text-decoration: none; color: inherit; border: 2px dashed color-mix(in srgb, #f5b301 55%, var(--border)); }
.upsell-card .up-star { font-size: 1.6rem; }
.upsell-card strong, .upsell-card small { display: block; }
.upgrade-page { display: grid; gap: 1.25rem; max-width: 900px; }
.upgrade-feats h2 { margin-top: 0; }

/* "More with Deluxe" on Daily Tracking (Start Your Diet only; upsell_panel_html()) */
.panel-grid > .upsell-deluxe { grid-column: 1 / -1; }
.upsell-deluxe { position: relative; overflow: hidden; padding: 0 !important; border: 0; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--primary) 55%, #ffb347) 0%, transparent 55%),
              linear-gradient(135deg, color-mix(in srgb, var(--primary) 92%, #000) 0%, var(--primary) 55%, color-mix(in srgb, var(--primary) 70%, #fff) 100%);
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--primary) 85%, #000); }
.upsell-deluxe::after { content: "★"; position: absolute; right: -10px; top: -38px; font-size: 11rem; line-height: 1; color: rgba(255, 255, 255, .1); pointer-events: none; }
.ud-top { padding: 1.4rem 1.5rem .5rem; position: relative; z-index: 1; }
.ud-offer { display: inline-block; padding: .25rem .7rem; border-radius: 999px; background: #ffd23f; color: #3a2a00; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35); animation: udPulse 2.4s ease-in-out infinite; }
@keyframes udPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .ud-offer { animation: none; } }
.upsell-deluxe h2 { margin: .6rem 0 .2rem; font-size: 1.6rem; color: #fff; }
.ud-price { margin: 0; font-size: 1.05rem; }
.ud-price strong { font-size: 2.3rem; line-height: 1; margin-right: .3rem; color: #ffd23f; text-shadow: 0 2px 10px rgba(0, 0, 0, .2); }
.ud-price span { opacity: .9; }
.ud-list { list-style: none; margin: .9rem 1.5rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; position: relative; z-index: 1; }
.ud-list li { display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; border-radius: 14px; background: rgba(255, 255, 255, .14); backdrop-filter: blur(4px); }
.ud-list strong { display: block; font-size: 1rem; }
.ud-list small { display: block; opacity: .9; line-height: 1.35; }
.ud-avs { display: flex; flex: none; }
.ud-avs .coach-av { margin-left: -12px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.ud-avs .coach-av:first-child { margin-left: 0; }
.ud-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .92); color: var(--primary-text); }
.ud-ico svg { width: 24px; height: 24px; }
.ud-actions { display: flex; align-items: center; gap: .75rem 1.25rem; flex-wrap: wrap; padding: 1.1rem 1.5rem 1.4rem; position: relative; z-index: 1; }
.ud-cta { background: #ffd23f; color: #3a2a00; border-color: #ffd23f; font-weight: 800; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45); }
.ud-cta:hover { background: #ffdf6b; }
.ud-more { position: absolute; top: 1.4rem; right: 1.5rem; z-index: 2; display: inline-block; padding: .25rem .75rem; border-radius: 999px; background: #ffd23f; color: #3a2a00; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35); }
.ud-more:hover { background: #ffdf6b; }
.upsell-deluxe .ud-list { margin-bottom: 1.4rem; }
@media (max-width: 560px) { .ud-more { position: static; margin: 1.1rem 1.1rem 0; } .ud-top { padding-top: .6rem; } }
@media (max-width: 560px) { .ud-cta { width: 100%; justify-content: center; } .ud-top, .ud-actions { padding-inline: 1.1rem; } .ud-list { margin-inline: 1.1rem; } }
.ud-instant { margin: .55rem 0 0; font-weight: 700; }
.ud-bonus { margin: .9rem 1.5rem 0; position: relative; z-index: 1; font-size: .95rem; }
.ud-bonus-tag { display: inline-block; margin-right: .4rem; padding: .15rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--primary-text); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 560px) { .ud-bonus { margin-inline: 1.1rem; } }
.dx-instant { margin-top: .6rem !important; font-weight: 700; }
.dx-bonus-tag { display: inline-block; margin-bottom: .6rem; padding: .2rem .65rem; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

/* Deluxe Features: feature badges (like the program's badges) */
.dx-badges h3 { margin: 0 0 1rem; }
.dx-bd-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.dx-bd-grid .bd-name { max-width: 150px; }

/* Anonymous members and member cards */
.anon-note { margin: 0 0 1rem; }
.anon-status { margin: .4rem 0 0; font-size: .88rem; font-weight: 600; color: var(--muted); }
.profile-awards { margin: .25rem 0 1.25rem; }
.mc-open { display: inline-flex; border-radius: 50%; cursor: pointer; flex: none; }
.mc-open:hover .avatar, .mc-open:focus-visible .avatar { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent); }
.mc-open:focus-visible { outline: none; }
.member-card { text-align: center; }
.mc-head { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.mc-av { width: 96px !important; height: 96px !important; font-size: 1.9rem; }
.mc-name { margin: .35rem 0 0; font-size: 1.3rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.mc-about { margin: 0; color: var(--muted); max-width: 360px; }
.mc-stars { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; margin: 1rem 0 0; }
.mc-sec { margin: 1.1rem 0 .6rem; font-weight: 700; font-size: .9rem; }
.mc-badges { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.mc-badges .bd-item { width: 100px; }
.mc-badges .bd-medal { width: 60px; height: 60px; }
.mc-badges .bd-medal > svg { width: 30px; height: 30px; }
.mc-actions { margin-top: 1.25rem; display: flex; justify-content: center; }
.mc-actions form { margin: 0; }
.mc-note { margin: 0; }

/* GLP-1: daily pill option and protein in the panel */
.glp1-freq { margin: .35rem 0 .75rem; }
.glp1-streak { font-weight: 600; }
.glp1-protein { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.gp-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; }
.gp-head .gp-val { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.gp-note { margin: .35rem 0 0; font-size: .85rem; }
.glp1-protein-hint { margin-top: .5rem; }
.glp1-dow[hidden] { display: none !important; }
.search-retry { display: flex; align-items: center; gap: .5rem .75rem; flex-wrap: wrap; margin: .9rem 0 .25rem; padding-top: .75rem; border-top: 1px dashed var(--border); }
.search-retry .picker-hint { margin: 0; }
.search-redone { color: var(--primary-text); font-weight: 600; }

/* Daily nutrition goals: the 10% target range note */
.goal-range-note { margin: 1rem 0 0; font-size: .85rem; }

/* Admin: AI coach product information */
.coach-products { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border, #e3e6ec); display: grid; gap: .75rem; }
.coach-products textarea { width: 100%; font: inherit; min-height: 12rem; }
.coach-products .field { margin: 0; }
.coach-products select { max-width: 22rem; }

/* Feature Access: the page's cards (feature table, AI coach settings) */
.feat-form > .card + .card { margin-top: 1.25rem; }
.feat-form > .coach-admin { margin-top: 1.25rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); }

/* User Management: the code each member joined with and their latest payment reference */
.um-table td.um-email { min-width: 220px; }
.um-email .um-code { display: block; font-size: .75rem; color: var(--muted); font-weight: 400; margin-top: .15rem; max-width: 280px; overflow-wrap: break-word; word-break: normal; }
.um-emails { max-width: 560px; }
.um-welcome .ed-wrap, .um-welcome .field { max-width: 760px; }

/* Admin: floating "What do I do in this section?" tab (includes/adminhelp.php) */
.ahelp { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 60; }
.ahelp-tab { list-style: none; cursor: pointer; writing-mode: vertical-rl; transform: rotate(180deg); background: var(--primary); color: var(--on-primary, #fff);
  padding: .9rem .45rem; border-radius: 0 10px 10px 0; font-size: .8rem; font-weight: 700; letter-spacing: .01em; box-shadow: var(--shadow); user-select: none; display: flex; align-items: center; gap: .4rem; }
.ahelp-tab::-webkit-details-marker { display: none; }
.ahelp-tab span { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: rgba(255,255,255,.25); transform: rotate(90deg); }
.ahelp-tab:hover, .ahelp-tab:focus-visible { padding-right: .6rem; }
.ahelp-panel { position: absolute; right: calc(100% + .5rem); top: 50%; transform: translateY(-50%); width: min(320px, calc(100vw - 4rem));
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.ahelp-panel strong { display: block; margin-bottom: .35rem; }
.ahelp-panel p { margin: 0 0 .6rem; font-size: .9rem; line-height: 1.5; }
@media (max-width: 640px) { .ahelp { top: auto; bottom: 5.5rem; transform: none; } .ahelp-tab { font-size: .72rem; padding: .7rem .35rem; } .ahelp-panel { top: auto; bottom: 0; transform: none; } }
@media print { .ahelp { display: none; } }

/* Chat on phones: fill exactly the visible screen (--vvh = visualViewport height, set in app.js), so the page
   never scrolls behind the top bar, including after the iPhone keyboard opens and closes. */
@media (max-width: 899px) {
  .content:has(.chat-app.has-chat) { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .chat-app.has-chat { height: calc(var(--vvh, 100dvh) - var(--topbar-h) - 2rem - env(safe-area-inset-bottom, 0px)); min-height: 300px; }
  html.kb-open .chat-app.has-chat { height: calc(var(--vvh, 100dvh) - var(--topbar-h) - 2rem); }
}

/* User Management: search + Download member list */
.um-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Keyboard users: "Skip to main content" appears on the first Tab press (WCAG 2.4.1) */
.skip-link { position: fixed; left: .75rem; top: -4rem; z-index: 1000; padding: .65rem 1rem; border-radius: 10px; background: var(--surface); color: var(--text); font-weight: 700; box-shadow: var(--shadow); text-decoration: none; transition: top .15s; }
.skip-link:focus { top: .75rem; outline: 3px solid var(--primary); outline-offset: 2px; }

/* Profile: "View profile as others see it" */
.profile-preview { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin: -.25rem 0 1.25rem; }
.profile-preview .btn { display: inline-flex; align-items: center; gap: .4rem; }
.mc-preview-note { margin: 0 0 1rem; padding: .55rem .8rem; border-radius: 10px; font-size: .88rem; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); }
/* Distinguished Member (Start Your Diet FROMSYD code) */
.dm-banner { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .02em;
  color: #6b4a00; background: linear-gradient(135deg, #fff4cc, #ffe08a); border: 1px solid #e8b931; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.dm-banner svg { color: #c48a00; }
[data-theme="dark"] .dm-banner { color: #ffe08a; background: linear-gradient(135deg, #3d3108, #4a3a06); border-color: #8a6d12; }
[data-theme="dark"] .dm-banner svg { color: #ffd34d; }
.dm-profile { margin: -.35rem 0 1rem; }
.member-card .dm-banner { margin-top: .35rem; }

/* Create competition: "Select buddies" checklist */
.comp-pick { border: 1px solid var(--border); border-radius: 12px; padding: .75rem 1rem; }
.comp-pick legend { font-weight: 700; padding: 0 .3rem; }
.comp-pick-tools { font-size: .85rem; margin-bottom: .4rem; }
.comp-pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .35rem .75rem; max-height: 240px; overflow-y: auto; }
.comp-pick-item { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .25rem 0; }
.comp-pick-item .avatar { width: 28px; height: 28px; font-size: .7rem; }