/* ==========================================================================
   Σύλλογος Γονέων & Κηδεμόνων — Stylesheet
   Mobile-first · Dark/Light · καθαρό, εύχρηστο περιβάλλον
   ========================================================================== */

:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f1f3f5;
  --text: #16191d;
  --muted: #6b7280;
  --border: #ecedf0;
  --primary: #11806c;
  --primary-ink: #ffffff;
  --primary-soft: #dff1ec;
  --ink: #18181b;
  --ink-ink: #ffffff;
  --accent: #ff8a5b;
  --accent-2: #ffb24d;
  --coral: #ef6f5e;
  --yes: #1ea672;
  --no: #e2685a;
  --grad-warm: linear-gradient(135deg, #ff8a5b 0%, #ffb24d 100%);
  --grad-teal: linear-gradient(135deg, #15937a 0%, #0e7a64 100%);
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
  --shadow-lg: 0 16px 48px rgba(16, 24, 40, .12);
  --shadow-warm: 0 8px 22px rgba(255, 138, 91, .22);
  --radius: 16px;
  --radius-sm: 11px;
  --tabbar-h: 64px;
  /* PMC chart (js/lib/athlete/pmc-chart.js) -- validated 3-slot categorical
     palette (dataviz skill), distinct from --yes/--no so a series is never
     mistaken for a good/bad status color. */
  --pmc-ctl: #2a78d6;
  --pmc-atl: #eda100;
  --pmc-tsb: #4a3aa7;
  /* Annual Training Plan (js/lib/athlete/periodization.js) -- 7-slot
     categorical palette (dataviz skill), fixed order = PHASES order. */
  --ptz-base: #2a78d6;
  --ptz-build: #008300;
  --ptz-peak: #e87ba4;
  --ptz-taper: #eda100;
  --ptz-race: #1baf7a;
  --ptz-transition: #eb6834;
  --ptz-recovery: #4a3aa7;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

[data-theme="dark"] {
  --bg: #0c0d10;
  --surface: #141519;
  --surface-2: #1c1e23;
  --text: #e8e9ec;
  --muted: #9aa0a6;
  --border: #26282e;
  --primary: #2fc6a6;
  --primary-ink: #062019;
  --primary-soft: #11332b;
  --ink: #f4f4f5;
  --ink-ink: #18181b;
  --accent: #ff9a6b;
  --accent-2: #ffc06a;
  --coral: #f08a76;
  --yes: #3cc07e;
  --no: #ef8472;
  --grad-warm: linear-gradient(135deg, #ff8a5b 0%, #ffb24d 100%);
  --grad-teal: linear-gradient(135deg, #1aa588 0%, #138a72 100%);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .32);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .5);
  --shadow-warm: 0 8px 24px rgba(255, 138, 91, .18);
  --pmc-ctl: #3987e5;
  --pmc-atl: #c98500;
  --pmc-tsb: #9085e9;
  --ptz-base: #3987e5;
  --ptz-build: #008300;
  --ptz-peak: #d55181;
  --ptz-taper: #c98500;
  --ptz-race: #199e70;
  --ptz-transition: #d95926;
  --ptz-recovery: #9085e9;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button { font-family: inherit; cursor: pointer; }
svg { width: 1em; height: 1em; display: block; }

/* ---------- Splash ---------- */
#splash {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-content: center; gap: 14px; justify-items: center;
  background: var(--bg);
}
body.orghub-ready #splash { display: none !important; pointer-events: none !important; }
#splash img { width: 84px; height: 84px; border-radius: 22px; box-shadow: var(--shadow); }
#splash p { color: var(--muted); margin: 0; font-size: 14px; }
.spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--primary);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader { display: grid; place-items: center; padding: 40px 0; }

/* ==========================================================================
   AUTH
   ========================================================================== */
.auth {
  min-height: 100%; display: grid; place-items: center; padding: 24px 18px;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--primary-soft), transparent 60%),
    var(--bg);
}
.auth__card {
  width: 100%; max-width: 380px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 22px; padding: 26px 22px;
  box-shadow: var(--shadow-lg);
}
.auth__brand { text-align: center; margin-bottom: 18px; }
.auth__logo { width: 66px; height: 66px; border-radius: 18px; box-shadow: var(--shadow); }
.auth__title { font-size: 20px; margin: 12px 0 4px; line-height: 1.2; }
.auth__subtitle { color: var(--muted); margin: 0; font-size: 14px; }
.auth__switch {
  display: block; width: 100%; margin-top: 14px; background: none; border: none;
  color: var(--primary); font-size: 14px; font-weight: 600; padding: 8px;
}
.auth__demo {
  margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border);
  display: grid; gap: 8px;
}
.auth__demo-title { font-size: 12px; font-weight: 700; color: var(--muted); margin: 0; text-transform: uppercase; letter-spacing: .04em; }
.auth__demo-btn {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 12px; font-size: 13px; color: var(--text); text-align: left;
}
.auth__demo-hint { font-size: 12px; color: var(--muted); margin: 2px 0 0; }

/* ---------- Fields & buttons ---------- */
.field { display: block; margin-bottom: 14px; }
.field__label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.input {
  width: 100%; padding: 12px 14px; font-size: 16px; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.input:disabled { background: var(--surface-2); color: var(--muted); }
.textarea { resize: vertical; min-height: 86px; line-height: 1.5; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Async combobox (js/lib/async-combobox.js) — server-side αναζήτηση με
   πληκτρολόγιο. Γενικό component, θέματα σκούρα (π.χ. super-admin-portal)
   έχουν δικό τους override block πιο κάτω στο δικό τους CSS αρχείο. */
.ac-combobox { width: 100%; }
.ac-listbox {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 260px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.ac-listbox__item {
  display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 8px;
  cursor: pointer; font-size: 14px; color: var(--text);
}
.ac-listbox__item:hover, .ac-listbox__item.is-active { background: var(--surface-2); }
.ac-listbox__label { font-weight: 600; }
.ac-listbox__sublabel { font-size: 12px; color: var(--muted); }
.ac-listbox__status { padding: 8px 10px; font-size: 13px; color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: var(--radius-sm); border: 1.5px solid transparent;
  font-size: 15px; font-weight: 650; transition: transform .08s, filter .15s, background .15s;
  touch-action: manipulation;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; }
.btn__icon { font-size: 18px; }
.btn--primary { background: var(--primary); color: var(--primary-ink); }
.btn--primary:hover { filter: brightness(1.05); }
.btn--ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn--secondary { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); }
.btn--secondary:hover { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.btn--danger { background: var(--no); color: #fff; }
.btn--block { width: 100%; }
.btn--sm { padding: 8px 13px; font-size: 13.5px; }

/* ==========================================================================
   APP SHELL
   ========================================================================== */
#app { min-height: 100%; }
.appbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--border);
}
.appbar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.appbar__logo { width: 38px; height: 38px; border-radius: 11px; }
.appbar__name { font-size: 14px; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.appbar__role { font-size: 12px; color: var(--muted); margin: 0; }
.appbar__actions { display: flex; gap: 4px; }
.iconbtn {
  width: 38px; height: 38px; display: grid; place-items: center; font-size: 20px;
  background: transparent; border: none; border-radius: 10px; color: var(--text);
}
.iconbtn:hover { background: var(--surface-2); }

.content {
  padding: 16px 14px calc(var(--tabbar-h) + 24px);
  max-width: 640px; margin: 0 auto;
}
.view { display: grid; gap: 16px; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Bottom tab bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; background: var(--surface); border-top: 1px solid var(--border);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: none; color: var(--muted); font-size: 11px; font-weight: 600;
  padding: 8px 2px; transition: color .15s;
}
.tab__icon { font-size: 22px; }
.tab--active { color: var(--primary); }
.tab--active .tab__icon { transform: translateY(-1px); }

/* ==========================================================================
   DASHBOARD
   ========================================================================== */
.greeting__hello { font-size: 22px; font-weight: 750; margin: 0; }
.greeting__sub { color: var(--muted); margin: 2px 0 0; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stats--3 { grid-template-columns: repeat(3, 1fr); }
/* Race Director Dashboard's 10 stat cards -- denser than stats--3, still
   reuses the exact same .stat/statCard() primitive (js/views/dashboard.js). */
.stats--5 { grid-template-columns: repeat(5, 1fr); gap: 8px; }
.stats--5 .stat { padding: 10px 12px; }
.stats--5 .stat__icon { width: 30px; height: 30px; font-size: 16px; border-radius: 8px; }
.stats--5 .stat__value { font-size: 19px; }
.stats--5 .stat__label { font-size: 11px; }

/* Race Director Dashboard -- compact header + tabbed body (js/views/events.js
   renderEventDashboard). Reuses .datechip/.iconbtn/.badge/.stat primitives;
   these rules cover only the new layout shells and are deliberately dense
   (high information density for organizers managing large rosters). */
.rdd-header { display: flex; align-items: center; gap: 12px; padding: 10px 0 14px; }
.rdd-header__main { flex: 1; min-width: 0; }
.rdd-header__title { margin: 0; font-size: 18px; font-weight: 750; line-height: 1.2; }
.rdd-header__meta { margin: 3px 0 0; display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.rdd-header__meta span { display: inline-flex; align-items: center; gap: 5px; }
.rdd-header__meta svg { width: 14px; height: 14px; }
.badge--warn { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.rdd-quick { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.rdd-tabbody { margin-top: 12px; }
.rdd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.rdd-list { display: grid; gap: 0; }
.rdd-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; font-size: 13px; border-bottom: 1px solid var(--border); }
.rdd-row:last-child { border-bottom: none; }
.rdd-row span:first-child { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdd-row span:not(:first-child) { color: var(--muted); font-size: 12px; white-space: nowrap; }
@media (max-width: 720px) {
  .rdd-grid { grid-template-columns: 1fr; }
  .stats--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .stats--5 { grid-template-columns: repeat(2, 1fr); }
}

/* Route Registration Dashboard (js/views/registrations.js) -- the per-route
   drill-in reached via registrations?routeId=. Goal: within 3 seconds the
   organizer must see which registration method is active, with zero
   ambiguity -- everything here is deliberately high-contrast and card-based
   rather than table/list-based. */
.regd-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.regd-pick { text-align: left; cursor: pointer; display: grid; gap: 6px; }
.regd-pick__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.regd-pick__title { margin: 0; font-size: 15px; font-weight: 700; }
.regd-pick__cta { color: var(--primary); font-weight: 650; font-size: 13px; }

.regd-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.regd-breadcrumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.regd-breadcrumb a { color: var(--muted); text-decoration: none; }
.regd-breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
.regd-crumb__sep { color: var(--muted); opacity: .5; }
.regd-crumb__current { font-weight: 650; }
.regd-topactions { display: flex; gap: 8px; flex-wrap: wrap; }

.regd-header { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.regd-header__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-weight: 800; font-size: 15px; flex: none; }
.regd-header__main { flex: 1; min-width: 200px; }
.regd-header__title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.regd-header__title { margin: 0; font-size: 20px; font-weight: 750; }
.regd-header__sub { margin: 3px 0 0; }
.regd-header__stats { flex: none; width: auto; min-width: 300px; }

.regd-section-h { font-size: 16px; font-weight: 750; margin: 6px 0 2px; display: flex; align-items: center; gap: 8px; }

/* REG-6 (CTO re-audit 2026-07-20): base template always reserved a 3rd
   (link-panel) column, but that column only ever has a child when the
   OrgHub method is active -- in external mode the grid had just 2 cards
   sitting in a 3-column track, leaving a permanent empty gap on the right.
   Default is now 2 columns; --3col is added in JS only when the link panel
   is actually appended. */
.regd-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; margin-bottom: 14px; }
.regd-method-grid--3col { grid-template-columns: 1fr 1fr minmax(260px, 320px); }
.regd-method-card {
  text-align: left; display: grid; gap: 10px; align-content: start; padding: 18px;
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius);
  cursor: pointer; box-shadow: var(--shadow); transition: border-color .15s ease, transform .1s ease;
}
.regd-method-card:not(:disabled):hover { transform: translateY(-1px); }
.regd-method-card:disabled { cursor: default; }
.regd-method-card.is-readonly { cursor: default; }
.regd-method-card--orghub.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.regd-method-card--external.is-active { border-color: var(--muted); background: color-mix(in srgb, var(--muted) 10%, var(--surface)); }
.regd-method-card__head { display: flex; align-items: center; justify-content: space-between; }
.regd-method-card__icon { font-size: 26px; }
.regd-method-card__radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); flex: none; }
.regd-method-card.is-active .regd-method-card__radio { border-color: var(--primary); background: radial-gradient(circle, var(--primary) 0 40%, transparent 42%); }
.regd-method-card__title { margin: 0; font-size: 16px; font-weight: 750; }
.regd-method-card__desc { margin: -4px 0 0; }
.regd-method-card__features { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; }
.regd-method-card__features li { display: flex; align-items: flex-start; gap: 8px; }
.regd-method-card__check { width: 16px; height: 16px; flex: none; color: var(--primary); margin-top: 1px; }
.regd-method-card__check svg { width: 100%; height: 100%; }
.regd-method-card__badge { justify-self: start; }
.regd-method-card__footnote { margin: 0; font-style: italic; }

.regd-link-panel { display: grid; gap: 10px; align-content: start; padding: 16px; }
.regd-link-panel__title { margin: 0; font-size: 15px; }
.regd-link-panel__url { font-family: ui-monospace, monospace; font-size: 12.5px; word-break: break-all; background: var(--primary-soft); color: var(--primary); padding: 10px; border-radius: var(--radius-sm); font-weight: 650; }
.regd-link-panel__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.regd-link-panel__row { margin: 0; display: flex; align-items: center; gap: 6px; }

.regd-external-panel { padding: 16px; }
.regd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.regd-row:last-child { border-bottom: none; }

.regd-formbuilder-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }

.regd-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.regd-quick-card {
  display: grid; gap: 4px; text-align: left; padding: 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); cursor: pointer;
}
.regd-quick-card:hover { border-color: var(--primary); }
.regd-quick-card.is-disabled { opacity: .5; cursor: not-allowed; }
.regd-quick-card.is-disabled:hover { border-color: var(--border); }
.regd-quick-card__icon { font-size: 26px; }
.regd-quick-card__title { font-weight: 700; font-size: 14px; }
.regd-quick-card__desc { font-size: 12px; color: var(--muted); }

@media (max-width: 860px) {
  .regd-method-grid--3col { grid-template-columns: 1fr 1fr; }
  .regd-link-panel { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .regd-method-grid { grid-template-columns: 1fr; }
  .regd-header { flex-direction: column; align-items: flex-start; }
  .regd-header__stats { width: 100%; min-width: 0; }
}

.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; display: grid; gap: 4px; box-shadow: var(--shadow);
}
.stat__icon { font-size: 22px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; }
.stat--teal .stat__icon { background: var(--primary-soft); color: var(--primary); }
.stat--amber .stat__icon { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.stat--coral .stat__icon { background: color-mix(in srgb, var(--coral) 20%, transparent); color: var(--coral); }
.stat__value { font-size: 28px; font-weight: 750; line-height: 1; }
.stat__value--sm { font-size: 18px; }
.stat__label { font-size: 13px; color: var(--muted); }
.stat--wide { grid-column: 1 / -1; }
button.stat { text-align: left; font: inherit; color: inherit; width: 100%; cursor: pointer; }
button.stat:hover { border-color: var(--primary); }
button.stat.stat--action:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.ministat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 10px; display: grid; gap: 3px; justify-items: center; box-shadow: var(--shadow); color: var(--text);
  min-width: 0;
}
.ministat__icon { font-size: 18px; color: var(--primary); line-height: 0; }
.ministat__value { font-size: 20px; font-weight: 750; line-height: 1.1; }
.ministat__label { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.25; }

.progress { height: 9px; background: var(--surface-2); border-radius: 99px; overflow: hidden; margin: 6px 0 2px; }
.progress__bar { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 99px; transition: width .5s ease; }

.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quick__btn {
  display: flex; align-items: center; gap: 10px; padding: 14px; font-size: 14px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); box-shadow: var(--shadow);
}
.quick__icon { font-size: 20px; color: var(--primary); width: 36px; height: 36px; display: grid; place-items: center; background: var(--primary-soft); border-radius: 10px; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); display: grid; gap: 6px; }
.panel--quiet { box-shadow: none; background: transparent; border-style: dashed; }
.panel__head { display: flex; align-items: center; justify-content: space-between; }
.panel__title { font-size: 16px; margin: 0 0 4px; }
.link { background: none; border: none; color: var(--primary); font-weight: 600; font-size: 13px; }

.rowitem { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none; padding: 10px 4px; border-radius: 10px; color: var(--text); }
.rowitem:hover { background: var(--surface-2); }
.rowitem__main { flex: 1; min-width: 0; }
.rowitem__title { margin: 0; font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rowitem__meta { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.rowitem__chev { color: var(--muted); font-size: 18px; }

.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot--unread { background: var(--accent); }
.dot--read { background: var(--yes); }

.datechip { display: grid; place-items: center; background: var(--primary-soft); border-radius: 10px; padding: 6px 9px; min-width: 44px; }
.datechip--lg { min-width: 52px; padding: 8px 10px; }
.datechip__day { font-size: 18px; font-weight: 750; color: var(--primary); line-height: 1; }
.datechip__mon { font-size: 11px; color: var(--primary); text-transform: uppercase; }

/* ==========================================================================
   ΣΕΛΙΔΕΣ / ΛΙΣΤΕΣ
   ========================================================================== */
.pagehead { display: flex; align-items: center; justify-content: space-between; }
.pagehead__title { font-size: 22px; font-weight: 750; margin: 0; }
.subhint { color: var(--muted); font-size: 13.5px; margin: -8px 0 0; }
.fab-inline {
  width: 42px; height: 42px; border-radius: 13px; border: none; font-size: 22px;
  background: var(--primary); color: var(--primary-ink); display: grid; place-items: center; box-shadow: var(--shadow);
}
.list { display: grid; gap: 14px; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); display: grid; gap: 8px;
}
.card--unread { border-left: 4px solid var(--accent); }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card__title { font-size: 17px; margin: 0; line-height: 1.25; }
.card__meta { font-size: 13px; color: var(--muted); margin: 0; display: inline-flex; align-items: center; gap: 5px; }
.card__meta svg { font-size: 15px; }
.card__body { margin: 0; line-height: 1.55; font-size: 14.5px; }
.card__body--clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__img { width: 100%; border-radius: 12px; margin-top: 4px; }
.card__footer { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.card--msg { cursor: pointer; }
.card__open { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-size: 13px; font-weight: 600; }
.card__open svg { font-size: 16px; }

.filechip {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; align-self: start;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 600;
}
.filechip__icon { color: var(--coral); font-size: 17px; }

.badge { font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 99px; white-space: nowrap; }
.badge--unread { background: var(--accent); color: #1c0f06; }
.badge--ok { background: color-mix(in srgb, var(--yes) 18%, transparent); color: var(--yes); }
.badge--open { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.readtag { display: inline-flex; align-items: center; gap: 6px; color: var(--yes); font-size: 13.5px; font-weight: 600; }

.event__top { display: flex; gap: 12px; align-items: flex-start; }

/* choices (RSVP & vote) */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 4px; }
.choice {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text); font-weight: 650; font-size: 14.5px;
}
.choice svg { font-size: 18px; }
.choice--yes { border-color: var(--yes); background: color-mix(in srgb, var(--yes) 14%, transparent); color: var(--yes); }
.choice--no { border-color: var(--no); background: color-mix(in srgb, var(--no) 14%, transparent); color: var(--no); }
.choice--vote:hover { border-color: var(--primary); }

/* poll results */
.results { display: grid; gap: 10px; padding-top: 4px; }
.resbar__head { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
.resbar__pct { color: var(--muted); }
.resbar__track { height: 12px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.resbar__fill { height: 100%; border-radius: 99px; transition: width .5s ease; }
.resbar__fill--yes { background: var(--yes); }
.resbar__fill--no { background: var(--no); }

/* empty state */
.empty { text-align: center; padding: 48px 20px; color: var(--muted); display: grid; gap: 8px; justify-items: center; }
.empty__icon { font-size: 44px; opacity: .5; }
.empty__title { font-weight: 650; color: var(--text); margin: 0; }
.empty__hint { font-size: 13.5px; margin: 0; }
.muted { color: var(--muted); font-size: 13.5px; margin: 0; }

/* ==========================================================================
   MODAL
   ========================================================================== */
.overlay {
  position: fixed; inset: 0; z-index: 100; display: grid; align-items: flex-end;
  background: rgba(12, 22, 30, .55); opacity: 0; transition: opacity .2s;
  padding: 0;
  pointer-events: none;
}
.overlay--show { opacity: 1; pointer-events: auto; }

/* Persistent fixed-position UI (AI assistant fab z-index:150, help bubble
   z-index:149, quick-action fab, push-notification prompt z-index:120) all
   sit ABOVE the modal overlay (z-index:100). Without this, they visually
   float on top of any open modal and swallow taps meant for its controls --
   most noticeably the sticky footer buttons, which share the same
   bottom-right screen region on mobile. body.modal-open is toggled by
   openModal()/closeModal() in ui.js. */
body.modal-open .ai-fab,
body.modal-open .help-bubble,
body.modal-open .ep-fab,
body.modal-open .coach-cmd-fab,
body.modal-open .pushprompt {
  display: none;
}

.modal {
  background: var(--surface); width: 100%; max-width: 560px; margin: 0 auto;
  border-radius: 22px 22px 0 0; box-shadow: var(--shadow-lg);
  max-height: 90vh; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .25s ease;
}
.overlay--show .modal { transform: none; }
.modal:focus { outline: 2px solid var(--primary); outline-offset: -2px; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 8px; }
.modal__title { font-size: 18px; margin: 0; }
.modal__close { background: none; border: none; font-size: 28px; line-height: 1; color: var(--muted); width: 36px; height: 36px; border-radius: 9px; }
.modal__close:hover { background: var(--surface-2); }
.modal__body { padding: 8px 18px 18px; overflow-y: auto; }
.modal__footer { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 18px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.modal__footer .btn { flex: 1 1 auto; min-width: 0; }

.join-link-field { display: grid; gap: 6px; }
.join-link-field__label { margin: 0; }
.join-link-field__row { display: flex; gap: 8px; align-items: stretch; }
.join-link-field__input { flex: 1; min-width: 0; font-size: 12px; }
.join-link-field__copy { flex-shrink: 0; white-space: nowrap; }
.join-link-modal .collapse { margin-top: 4px; }

@media (min-width: 600px) {
  .overlay { align-items: center; padding: 24px; }
  .modal { border-radius: 22px; transform: translateY(20px) scale(.98); }
  .overlay--show .modal { transform: none; }
}

/* readers / participations groups */
.readgroup { margin-top: 14px; }
.readgroup__title { font-size: 13px; font-weight: 700; color: var(--muted); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .03em; }
.readrow { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.readrow:last-child { border-bottom: none; }

/* thread (messages) */
.thread { display: grid; gap: 10px; }
.bubble { padding: 11px 13px; border-radius: 14px; max-width: 88%; }
.bubble--parent { background: var(--surface-2); justify-self: start; border-bottom-left-radius: 4px; }
.bubble--ds { background: var(--primary-soft); justify-self: end; border-bottom-right-radius: 4px; }
.bubble__name { font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 0 3px; }
.bubble__text { margin: 0; font-size: 14.5px; line-height: 1.5; }
.bubble__time { font-size: 11px; color: var(--muted); display: block; margin-top: 4px; }
.thread__reply { margin-top: 16px; display: grid; gap: 10px; border-top: 1px solid var(--border); padding-top: 14px; }

/* profile */
.avatar { width: 78px; height: 78px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); display: grid; place-items: center; font-size: 32px; font-weight: 700; margin: 0 auto; box-shadow: var(--shadow); }
.avatar--sm { width: 40px; height: 40px; font-size: 16px; box-shadow: none; }
.rolepill { text-align: center; color: var(--muted); font-weight: 600; margin: 8px 0 0; }
.setting { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: none; padding: 12px 4px; color: var(--text); border-radius: 10px; }
.setting:hover { background: var(--surface-2); }
.setting__icon { font-size: 20px; color: var(--primary); }
.setting__label { flex: 1; text-align: left; font-size: 14.5px; font-weight: 550; }

/* parents list / import */
.prow { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.prow__main { flex: 1; min-width: 0; }
.prow__name { margin: 0; font-weight: 650; font-size: 15px; }
.prow__meta { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hidden { display: none; }
.dropzone { width: 100%; display: grid; gap: 6px; justify-items: center; padding: 26px; border: 2px dashed var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text); }
.dropzone__icon { font-size: 30px; color: var(--primary); }
.dropzone__text { font-weight: 650; }
.dropzone__hint { font-size: 12.5px; color: var(--muted); }
.importprev { margin-top: 12px; }
.minitable { display: grid; gap: 4px; margin-top: 6px; }
.minitable__row { display: grid; grid-template-columns: 1.2fr 1.6fr .9fr; gap: 6px; font-size: 12.5px; padding: 6px 8px; background: var(--surface-2); border-radius: 8px; }
.minitable__row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   TOAST
   ========================================================================== */
#toast-host { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + 16px); z-index: 200; display: grid; gap: 8px; justify-items: center; pointer-events: none; padding: 0 16px; }
.toast {
  background: var(--text); color: var(--bg); padding: 11px 16px; border-radius: 12px;
  font-size: 14px; font-weight: 550; box-shadow: var(--shadow-lg); max-width: 92vw;
  opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s;
}
.toast--show { opacity: 1; transform: none; }
.toast--success { background: var(--yes); color: #fff; }
.toast--error { background: var(--no); color: #fff; }
.toast--info { background: var(--primary); color: var(--primary-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ===== SaaS v2 additions ===== */
.auth__links { display: grid; gap: 2px; margin-top: 10px; }
.banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); margin-bottom: 4px; box-shadow: var(--shadow); }
.banner--warn { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.banner__icon { font-size: 22px; color: var(--accent); flex: none; }
.banner__main { flex: 1; min-width: 0; }
.banner__title { margin: 0; font-weight: 700; font-size: 14.5px; }
.banner__text { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.badge--muted { background: var(--surface-2); color: var(--muted); }
.is-locked { opacity: .55; }
.appbar__logo--super { display: grid; place-items: center; background: var(--primary); color: #fff; font-size: 20px; }
.card__open { cursor: pointer; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 1.2em, calc(100% - 13px) 1.2em; background-size: 5px 5px; background-repeat: no-repeat; }

/* ==========================================================================
   Multi-Tenant components (OrgHub)
   ========================================================================== */

/* ---- Γενική σελίδα (page head + list rows) ---- */
.page { display: grid; gap: 14px; }
.page__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.page__title { font-size: 19px; font-weight: 750; margin: 0; }
.page__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.section__label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 6px 0 -4px; }
.small { font-size: 12.5px; }

.list__row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; box-shadow: var(--shadow); }
.list__main { flex: 1; min-width: 0; }
.list__title { margin: 0; font-weight: 650; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list__sub { margin: 1px 0 0; font-size: 12.5px; }

/* ---- Avatars (μικρά/μεγάλα/ουδέτερα) ---- */
.avatar--lg { width: 78px; height: 78px; font-size: 32px; }
.avatar:not(.avatar--lg) { width: 40px; height: 40px; font-size: 16px; box-shadow: none; margin: 0; flex: none; }
.avatar--muted { background: var(--surface-2); color: var(--muted); }

/* ---- Role badges ---- */
.badge--owner   { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
.badge--admin   { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.badge--member  { background: var(--surface-2); color: var(--muted); }
.badge--readonly{ background: var(--surface-2); color: var(--muted); opacity: .8; }
.badge--muted   { background: var(--surface-2); color: var(--muted); }

.iconbtn--sm { width: 32px; height: 32px; font-size: 15px; flex: none; }

/* ---- Org switcher ---- */
.appbar__brand--tap { cursor: pointer; }
.orglist { display: grid; gap: 8px; }
.orglist__item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px; color: var(--text); }
.orglist__item.is-active { border-color: var(--primary); background: var(--primary-soft); }
.orglist__icon { width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; font-size: 19px; color: var(--primary); flex: none; }
.orglist__icon--logo { padding: 0; overflow: hidden; background: var(--surface); }
.orglist__icon--logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.orglist__main { flex: 1; min-width: 0; }
.orglist__name { margin: 0; font-weight: 650; font-size: 14.5px; }
.orglist__meta { margin: 1px 0 0; font-size: 12px; color: var(--muted); }
.orglist__check { color: var(--primary); font-size: 18px; }

/* Persona switcher */
.persona-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--surface-2);
  color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer;
  max-width: 34vw; white-space: nowrap;
}
.persona-chip__icon { font-size: 14px; line-height: 1; }
.persona-chip__label { overflow: hidden; text-overflow: ellipsis; }
.persona-list { display: grid; gap: 8px; }
.persona-list__item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; color: var(--text);
}
.persona-list__item.is-active { border-color: var(--primary); background: var(--primary-soft); }
.persona-list__icon { width: 38px; text-align: center; font-size: 22px; flex: none; }
.persona-list__main { flex: 1; min-width: 0; }
.persona-list__name { margin: 0; font-weight: 650; font-size: 14.5px; }
.persona-list__meta { margin: 1px 0 0; font-size: 12px; color: var(--muted); }
.persona-list__check { color: var(--primary); font-size: 18px; }

.identities-panel { margin-top: 0; }
.identity-card {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; margin-top: 10px; background: var(--surface);
}
.identity-card--active { border-color: var(--primary); background: var(--primary-soft); }
.identity-card__head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.identity-card__org { margin: 0; font-weight: 700; font-size: 14px; }
.identity-card__role { font-size: 11px; color: var(--muted); font-weight: 600; }
.identity-card__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.identity-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text);
}
.identity-chip--on { border-color: var(--primary); background: #fff; color: var(--primary); }
.identity-card__switch { margin-top: 10px; }

/* ---- Onboarding ---- */
.auth__card--wide { max-width: 460px; }
.onb__steps { display: grid; gap: 12px; margin: 4px 0 8px; }
.onb__step { display: flex; align-items: center; gap: 12px; text-align: left; }
.onb__num { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
.onb__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 20px; flex: none; }
.onb__title { margin: 0; font-weight: 650; font-size: 14.5px; }
.onb__text { margin: 1px 0 0; font-size: 12.5px; }
.onb__trial { text-align: center; font-size: 13px; color: var(--primary); font-weight: 600; margin: 0 0 6px; }

/* ---- Auth: links, hints, errors, accept ---- */
.auth__links { text-align: center; margin-top: 12px; }
.linkbtn { background: none; border: none; color: var(--primary); font-weight: 600; font-size: 13.5px; padding: 6px; }
.auth__error { background: color-mix(in srgb, var(--no) 14%, var(--surface)); color: var(--no); border: 1px solid color-mix(in srgb, var(--no) 40%, transparent); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13.5px; margin: 0 0 12px; }
.auth__hints { margin-top: 16px; display: grid; gap: 6px; border-top: 1px dashed var(--border); padding-top: 12px; }
.auth__hintttl { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 2px; }
.auth__hint { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--surface-2); border: none; border-radius: 9px; padding: 8px 11px; color: var(--text); }
.auth__hintrole { font-weight: 600; font-size: 13px; }
.auth__hintmail { font-size: 12px; color: var(--muted); }

/* ---- Legal consent checkboxes (εγγραφή μέλους / join) ---- */
.auth-consent {
  margin: 14px 0 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius: 12px;
}
.auth-consent__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}
.auth-consent__box-wrap {
  position: relative;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
}
.auth-consent__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--primary, #2fc6a6);
  border-radius: 7px;
  background: var(--surface, #fff);
  box-sizing: border-box;
  pointer-events: none;
  transition: background .15s, border-color .15s;
}
.auth-consent__box.is-checked {
  background: var(--primary, #2fc6a6);
  border-color: var(--primary, #2fc6a6);
}
.auth-consent__box.is-checked::after {
  content: '✓';
  color: #06201a;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}
.auth-consent__cb {
  position: absolute;
  inset: 0;
  width: 26px;
  height: 26px;
  margin: 0;
  opacity: 0.001;
  cursor: pointer;
  z-index: 2;
  -webkit-appearance: none;
  appearance: none;
}
.auth-consent__text { flex: 1; min-width: 0; line-height: 1.45; }
.auth-consent__text a { color: var(--primary); font-weight: 600; text-decoration: underline; }

/* ---- Cards (muted) & color input & settings rows ---- */
.card--muted { background: var(--surface-2); box-shadow: none; }
.input--color { height: 46px; padding: 4px; cursor: pointer; }

/* ---- Locked (write-gated) controls ---- */
.is-locked { opacity: .55; }

/* ==========================================================================
   Θετική, ζεστή αναβάθμιση εμφάνισης (OrgHub) — υπερισχύει των παραπάνω
   ========================================================================== */

/* Ζεστό «καλωσόρισμα» (hero) στην κορυφή κάθε κύριας οθόνης */
.greeting {
  background: var(--grad-warm);
  color: #fff;
  border-radius: var(--radius);
  padding: 18px 18px 20px;
  box-shadow: var(--shadow-warm);
  position: relative; overflow: hidden;
}
.greeting::after {
  content: ""; position: absolute; right: -28px; top: -28px;
  width: 130px; height: 130px; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}
.greeting__hello { color: #fff; position: relative; }
.greeting__sub { color: rgba(255, 255, 255, .92); position: relative; }

/* Κουμπιά κύριας ενέργειας: απαλό τιρκουάζ ντεγκραντέ + αίσθηση πατήματος */
.btn--primary {
  background: var(--grad-teal); color: #fff; border: none;
  box-shadow: 0 6px 16px rgba(19, 138, 114, .26);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn--primary:hover { filter: brightness(1.05); }
.btn--primary:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(19, 138, 114, .24); }

/* Χαρούμενες, απαλά χρωματιστές στατιστικές κάρτες */
.stat { transition: transform .15s ease, box-shadow .15s ease; }
.stat--teal  { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.stat--amber { background: color-mix(in srgb, var(--accent-2) 13%, var(--surface)); }
.stat--coral { background: color-mix(in srgb, var(--accent) 11%, var(--surface)); }
.stat--amber .stat__icon { background: color-mix(in srgb, var(--accent-2) 26%, transparent); color: #c97b16; }
button.stat:hover, .ministat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
[data-theme="dark"] .stat--amber .stat__icon { color: var(--accent-2); }

/* Γρήγορες ενέργειες: λεπτή χρωματιστή πινελιά */
.quick__btn { transition: transform .12s ease, border-color .12s ease, background .12s ease; }
.quick__btn:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 45%, transparent); background: var(--primary-soft); }
.quick__icon { color: var(--primary); }

/* Κάρτες που ανοίγουν: ήπιο «σήκωμα» στο hover */
.card--msg, .orglist__item, .list__row { transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.card--msg:hover, .list__row:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* Ηλιόλουστο «λαμπύρισμα» πίσω από τη σύνδεση & το splash */
.auth { background: radial-gradient(135% 90% at 50% -10%, color-mix(in srgb, var(--accent) 18%, var(--bg)) 0%, var(--bg) 55%); }
.auth__logo { box-shadow: 0 8px 22px rgba(255, 138, 91, .28); border-radius: 22px; }
#splash { background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 14%, var(--bg)) 0%, var(--bg) 60%); }

/* Active καρτέλα: μικρό «φουσκωτό» pill για ζεστασιά */
.tab--active { color: var(--primary); }
.tab--active .tab__icon { transform: translateY(-2px); }

/* Επιβεβαιωτικά badges πιο χαρούμενα */
.badge--ok { background: color-mix(in srgb, var(--yes) 18%, transparent); color: var(--yes); }

/* Ήπιο animation εισόδου (σεβασμός σε reduced motion) */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.greeting, .card, .panel, .stat, .auth__card { animation: rise .34s cubic-bezier(.2, .7, .3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Αρχική σελίδα (home / landing) για επισκέπτες
   ========================================================================== */
.auth--home { display: block; place-content: normal; padding: 0; overflow-y: auto; }
.home { max-width: 540px; margin: 0 auto; padding: 30px 18px 52px; display: grid; gap: 28px; }
.home__hero { text-align: center; display: grid; gap: 14px; justify-items: center; padding: 10px 4px 4px; }
.home__logo { width: 76px; height: 76px; border-radius: 22px; box-shadow: var(--shadow-warm); }
.home__title { font-size: 30px; line-height: 1.15; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.home__sub { font-size: 16px; line-height: 1.5; color: var(--muted); margin: 0; max-width: 38ch; }
.home__cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; margin-top: 4px; }
.home__cta .btn { flex: 1 1 150px; }
.home__trust { font-size: 12.5px; color: var(--muted); margin: 0; }
.home__block { display: grid; gap: 12px; }
.home__sectitle { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0; }
.home__features { display: grid; gap: 12px; }
.feat { display: flex; gap: 13px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px; box-shadow: var(--shadow); }
.feat__icon { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.feat__icon svg { width: 22px; height: 22px; }
.feat__t { margin: 0; font-weight: 700; font-size: 15px; }
.feat__d { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.home__steps { display: grid; gap: 12px; }
.step { display: flex; gap: 13px; align-items: center; }
.step__n { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--grad-warm); color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; box-shadow: var(--shadow-warm); }
.step__t { margin: 0; font-size: 14.5px; line-height: 1.45; }
.home__foot { display: grid; gap: 12px; justify-items: center; text-align: center; padding-top: 4px; }
.home__foot .btn { width: 100%; }
.auth__back { justify-self: start; margin-bottom: 4px; }

/* ---- Τιμές & πλάνα (αρχική) ---- */
.home__plans { display: grid; gap: 12px; }
.plan { position: relative; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 18px 16px; display: grid; gap: 10px; box-shadow: var(--shadow); }
.plan--hl { border-color: color-mix(in srgb, var(--primary) 55%, transparent); box-shadow: 0 8px 26px rgba(19, 138, 114, .14); }
.plan__tag { position: absolute; top: -10px; right: 14px; background: var(--grad-warm); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 99px; box-shadow: var(--shadow-warm); }
.plan__name { margin: 0; font-weight: 800; font-size: 16px; }
.plan__price { margin: 0; display: flex; align-items: baseline; gap: 2px; }
.plan__amount { font-size: 30px; font-weight: 800; color: var(--primary); }
.plan__per { font-size: 13px; color: var(--muted); }
.plan__feats { list-style: none; margin: 2px 0 4px; padding: 0; display: grid; gap: 7px; }
.plan__feats li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--text); line-height: 1.4; }
.plan__feats li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--yes); font-weight: 800; }
.btn--sm { padding: 10px 14px; font-size: 13.5px; }

/* ---- Footer αρχικής ---- */
.home__footer { text-align: center; border-top: 1px solid var(--border); padding-top: 22px; margin-top: 6px; display: grid; gap: 4px; }
.home__footer-brand { margin: 0; font-weight: 800; color: var(--primary); }
.home__footer-tag { margin: 0; font-size: 13px; color: var(--muted); }
.home__footer-copy { margin: 4px 0 0; font-size: 12px; color: var(--muted); }

/* ==========================================================================
   ΑΡΧΙΚΗ — Ανανεωμένο, πιο «premium» look (v2)
   ========================================================================== */
.auth--home { background:
   radial-gradient(1200px 420px at 50% -120px, color-mix(in srgb, var(--primary) 18%, transparent), transparent 70%),
   var(--bg); }
.home { max-width: 560px; gap: 34px; }

/* Hero */
.home__hero { gap: 16px; padding: 22px 6px 6px; }
.home__logo { width: 72px; height: 72px; border-radius: 20px; box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 30%, transparent); }
.home__pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  padding: 6px 12px; border-radius: 999px; }
.home__title { font-size: 34px; line-height: 1.12; font-weight: 850; letter-spacing: -.02em;
  background: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--text) 70%, var(--primary)));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.home__sub { font-size: 16.5px; max-width: 40ch; }
.home__cta { gap: 12px; margin-top: 6px; }
.home__cta .btn { flex: 1 1 160px; padding: 13px 18px; font-weight: 700; border-radius: 14px; }
.home__cta .btn--primary { box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 32%, transparent); }

/* Section titles */
.home__sectitle { font-size: 12px; letter-spacing: .09em; position: relative; padding-left: 14px; }
.home__sectitle::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Features — πλέγμα 2 στηλών, πιο «κάρτα» */
.home__features { grid-template-columns: 1fr 1fr; gap: 10px; }
.home__features .feat:nth-child(5) { grid-column: 1 / -1; }
.feat { flex-direction: column; align-items: flex-start; gap: 10px; border-radius: 16px; padding: 16px; transition: transform .15s ease, box-shadow .15s ease; }
.feat:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.08); }
.feat__icon { width: 42px; height: 42px; border-radius: 12px; background: var(--grad-teal, var(--primary-soft)); color: #fff; }
.feat__icon svg { width: 22px; height: 22px; }

/* Steps — κάθετη γραμμή χρόνου */
.home__steps { position: relative; padding-left: 6px; }
.step { align-items: flex-start; }
.step__n { background: var(--grad-warm); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent); }
.step__t { padding-top: 4px; }

/* Πλάνα (σελίδα Τιμές) */
.plan { border-radius: 18px; }
.plan--hl { transform: scale(1.02); }

/* FAQ accordion */
.home__block details { transition: box-shadow .15s ease; }
.home__block details[open] { box-shadow: 0 8px 22px rgba(0,0,0,.07); }
.home__block summary { list-style: none; display: flex; justify-content: space-between; align-items: center; }
.home__block summary::-webkit-details-marker { display: none; }
.home__block summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--primary); line-height: 1; }
.home__block details[open] summary::after { content: "−"; }

/* CTA band πριν το footer */
.home__foot { background: var(--grad-teal, var(--primary)); border-radius: 20px; padding: 22px 18px; color: #fff;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--primary) 30%, transparent); }
.home__foot .btn--primary { background: #fff; color: var(--primary); }
.home__foot .btn--block { box-shadow: none; }
.home__foot .linkbtn { color: #fff; opacity: .95; }

/* Nav */
.home nav { backdrop-filter: blur(8px); }

/* Badge ειδοποιήσεων στο καμπανάκι */
.notif-badge { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; line-height: 1;
  color: #fff; background: var(--accent, #ff5a4d); border-radius: 999px; box-shadow: 0 0 0 2px var(--surface); }

/* ==========================================================================
   ΑΡΧΙΚΗ — επιπλέον ενότητες (demo, πριν/μετά, οθόνες, οργανισμοί, testimonials, GDPR)
   ========================================================================== */
/* Demo κάρτες */
.home__demos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.demo-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; text-align: center; }
.demo-card__emoji { font-size: 30px; }
.demo-card__t { margin: 2px 0 0; font-weight: 800; font-size: 15px; }
.demo-card__d { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); line-height: 1.4; flex: 1; }

/* Πριν / Μετά */
.home__beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ba { border-radius: 16px; padding: 14px; border: 1px solid var(--border); }
.ba--before { background: color-mix(in srgb, #e2574c 8%, var(--surface)); }
.ba--after { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.ba__h { margin: 0 0 8px; font-weight: 800; font-size: 14px; }
.ba__list { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 13px; line-height: 1.4; }
.ba--before .ba__list { color: color-mix(in srgb, #b23a30 80%, var(--text)); }

/* Οθόνες (στην πράξη) */
.home__screens { display: grid; gap: 8px; }
.screen-row { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); }
.screen-row__n { flex: 0 0 26px; height: 26px; border-radius: 8px; background: var(--grad-teal, var(--primary)); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.screen-row__t { margin: 0; font-weight: 700; font-size: 14px; }
.screen-row__d { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* Για ποιους είναι */
.home__orgkinds { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.orgkind { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 8px; text-align: center; box-shadow: var(--shadow); }
.orgkind__e { font-size: 26px; }
.orgkind__t { margin: 6px 0 0; font-size: 12px; font-weight: 700; line-height: 1.25; }

/* Testimonials */
.home__testi { display: grid; gap: 10px; }
.testi { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }
.testi__q { margin: 0 0 10px; font-size: 14px; line-height: 1.5; font-style: italic; }
.testi__n { margin: 0; font-weight: 800; font-size: 13.5px; }
.testi__r { margin: 1px 0 0; font-size: 12px; color: var(--muted); }

/* GDPR & Ασφάλεια */
.home__gdpr { display: grid; gap: 7px; }
.gdpr-row { display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.gdpr-row__c { flex: 0 0 20px; height: 20px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }

@media (max-width: 360px) {
  .home__orgkinds { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   MOBILE HARDENING — εξάλειψη οριζόντιου scroll & responsive
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
.content, .view, .page, .panel, .card, main { max-width: 100%; overflow-x: hidden; }
input, textarea, select, .input { max-width: 100%; }
.card__title, .card__meta, .list__title, .rowitem__title, .rowitem__meta, .appbar__name { overflow-wrap: anywhere; word-break: break-word; }
.appbar__actions { flex-wrap: nowrap; flex-shrink: 0; }
.appbar__brand { min-width: 0; }
.appbar__brandtext { min-width: 0; overflow: hidden; }
.appbar__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
.page__head, .page__actions { flex-wrap: wrap; gap: 8px; }
.stats, .home__features, .home__demos, .home__beforeafter, .home__orgkinds, .home__testi { min-width: 0; }
pre, code { white-space: pre-wrap; word-break: break-word; }
table { display: block; max-width: 100%; overflow-x: auto; }
.btn { max-width: 100%; }
@media (max-width: 380px) {
  .home__demos, .home__beforeafter { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DRAWER (hamburger μενού)
   ========================================================================== */
.drawer { position: fixed; inset: 0; background: rgba(0,0,0,.42); opacity: 0; transition: opacity .25s ease; z-index: 300; display: flex; justify-content: flex-end; pointer-events: none; }
.drawer.is-open { opacity: 1; pointer-events: auto; }
.drawer__panel { width: min(84vw, 330px); max-width: 100%; height: 100%; background: var(--surface); box-shadow: -10px 0 40px rgba(0,0,0,.25); transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; overflow-y: auto; padding: 14px; }
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head { padding: 6px 8px 14px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.drawer__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 0 0 8px -6px;
  border: none;
  background: transparent;
  color: var(--primary);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 10px;
  font-family: inherit;
}
.drawer__back:active, .drawer__back:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.drawer__back-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.drawer__back-icon svg { width: 18px; height: 18px; }
.drawer__head-meta { min-width: 0; }
.drawer__org { margin: 0; font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
.drawer__role { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.drawer__nav { display: flex; flex-direction: column; gap: 2px; }
.drawer__section { margin: 12px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.drawer__section:first-child { margin-top: 4px; }
.drawer__item { display: flex; align-items: center; gap: 13px; padding: 12px; border-radius: 12px; border: none; background: transparent; cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--text); text-align: left; width: 100%; transition: background .15s ease; }
.drawer__item:active, .drawer__item:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.drawer__item.is-active { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); }
.drawer__item--danger { color: #e2574c; }
.drawer__icon { flex: 0 0 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.drawer__icon svg { width: 20px; height: 20px; }
.drawer__sep { height: 1px; background: var(--border); margin: 8px 0; }

/* ==========================================================================
   GLOBAL SEARCH overlay
   ========================================================================== */
.gsearch { position: fixed; inset: 0; background: rgba(0,0,0,.42); opacity: 0; transition: opacity .2s ease; z-index: 320; display: flex; justify-content: center; align-items: flex-start; padding: 0; }
.gsearch.is-open { opacity: 1; }
.gsearch__panel { width: 100%; max-width: 560px; background: var(--surface); border-radius: 0 0 20px 20px; box-shadow: 0 18px 50px rgba(0,0,0,.28); transform: translateY(-14px); transition: transform .24s cubic-bezier(.4,0,.2,1); max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; }
.gsearch.is-open .gsearch__panel { transform: translateY(0); }
.gsearch__bar { display: flex; align-items: center; gap: 10px; padding: 14px 14px; border-bottom: 1px solid var(--border); }
.gsearch__icon { display: flex; color: var(--muted); }
.gsearch__icon svg { width: 20px; height: 20px; }
.gsearch__input { flex: 1; border: none; background: transparent; font-size: 16px; color: var(--text); outline: none; min-width: 0; }
.gsearch__results { overflow-y: auto; padding: 8px; }
.gsearch__hint { text-align: center; color: var(--muted); padding: 26px 10px; font-size: 14px; margin: 0; }
.gsearch__group { display: flex; align-items: center; gap: 8px; margin: 12px 8px 4px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.gsearch__gicon { display: flex; } .gsearch__gicon svg { width: 15px; height: 15px; }
.gsearch__item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: transparent; border: none; border-radius: 12px; padding: 11px 12px; cursor: pointer; transition: background .14s ease; }
.gsearch__item:hover { background: color-mix(in srgb, var(--primary) 9%, transparent); }
.gsearch__ititle { font-size: 14.5px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.gsearch__isub { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }

/* ==========================================================================
   PREMIUM polish — βάθος καρτών & ομαλά animations
   ========================================================================== */
@keyframes ohFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.view > .greeting, .view > .stats, .view > .quick, .view > .panel, .page > .card, .view > section, .list > .card { animation: ohFadeUp .32s ease both; }
.view > .panel:nth-child(2), .view > section:nth-child(2) { animation-delay: .04s; }
.view > .panel:nth-child(3), .view > section:nth-child(3) { animation-delay: .08s; }
.card { transition: transform .15s ease, box-shadow .15s ease; }
.card:hover { box-shadow: var(--shadow-lg); }
.stat { box-shadow: var(--shadow); }
.panel { box-shadow: var(--shadow); }

/* Μητρώο μελών — καρτέλα & clickable σειρά */
.list__tap { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; background: none; border: none; text-align: left; cursor: pointer; padding: 0; color: inherit; }
.list__tap:hover .list__title { color: var(--primary); }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.kv:last-child { border-bottom: none; }
.kv__k { font-size: 13px; color: var(--muted); font-weight: 600; flex: 0 0 auto; }
.kv__v { font-size: 13.5px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }

/* «Η συνδρομή μου» */
.mysub__top { display: flex; }
.mysub__badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 99px; font-weight: 800; font-size: 13.5px; }
.mysub__badge svg { width: 16px; height: 16px; }
.mysub__badge--ok { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.mysub__badge--warn { background: color-mix(in srgb, var(--accent-2,#e0a44a) 22%, transparent); color: #b9791a; }
.mysub__badge--bad { background: color-mix(in srgb, var(--coral,#e2574c) 18%, transparent); color: #c4392f; }
.mysub__big { font-size: 28px; font-weight: 850; margin: 12px 0 0; }
.mysub__rows { margin-top: 12px; display: grid; gap: 2px; }
.mysub__row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.mysub__row:last-child { border-bottom: none; }
.mysub__k { color: var(--muted); font-size: 13px; font-weight: 600; }
.mysub__v { font-weight: 800; font-size: 14px; }
.mysub__hint { margin: 12px 0 0; font-size: 13px; line-height: 1.5; background: color-mix(in srgb, var(--accent-2,#e0a44a) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent-2,#e0a44a) 30%, transparent); border-radius: 10px; padding: 10px 12px; }

/* Push prompt banner */
.pushprompt { position: fixed; left: 10px; right: 10px; bottom: calc(var(--tabbar-h) + 70px); z-index: 120; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; animation: ohFadeUp .3s ease both; max-width: 560px; margin: 0 auto; }
.pushprompt__txt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.pushprompt__txt svg { width: 18px; height: 18px; color: var(--primary); flex: 0 0 auto; }
.pushprompt__btns { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

/* ==========================================================================
   ✦ REDESIGN LAYER 2.0 — σύγχρονο SaaS (Linear/Notion/Stripe/Apple)
   Μόνο αισθητική/UX· καμία αλλαγή σε logic/routes/DB.
   ========================================================================== */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef1f4;
  --text: #1b2530;
  --muted: #6b757e;
  --border: #e7eaef;
  --primary: #0f8a72;
  --primary-ink: #ffffff;
  --primary-soft: #d6efe8;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 2px 6px rgba(16,24,40,.05);
  --shadow-lg: 0 12px 34px rgba(16,24,40,.14);
  --radius: 16px;
  --radius-sm: 12px;
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.01em; }
h1, h2, h3, .greeting__hello, .page__title, .home__title, .panel__title { letter-spacing: -0.02em; }

/* Header: χαμηλότερο, μικρό logo */
.appbar { padding: 8px 14px; padding-top: max(8px, env(safe-area-inset-top)); }
.appbar__logo { width: 30px; height: 30px; border-radius: 9px; }
.appbar__name { font-size: 14.5px; }
.appbar__role { font-size: 11.5px; }
.appbar__actions { gap: 2px; }
.iconbtn { width: 36px; height: 36px; border-radius: 10px; transition: background .15s ease, color .15s ease; }

/* Περιεχόμενο πιο compact */
.content { padding: 14px 14px calc(var(--tabbar-h) + 22px); max-width: 680px; }
.view { gap: 13px; animation: fade .22s ease; }
.greeting__hello { font-size: 19px; font-weight: 780; }
.greeting__sub { font-size: 13px; }

/* Στατιστικά — compact premium */
.stats { gap: 9px; }
.stats--3 { gap: 8px; }
.stat { padding: 13px; border-radius: var(--radius); box-shadow: var(--shadow); gap: 3px; }
.stat__icon { width: 34px; height: 34px; font-size: 18px; border-radius: 10px; }
.stat__value { font-size: 22px; font-weight: 780; }
.stat__value--sm { font-size: 16px; }
.stat__label { font-size: 12px; }

/* Cards / panels — ήπιες σκιές, μεγάλο radius, compact */
.card { padding: 14px; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); }
.panel { padding: 14px; border-radius: var(--radius); box-shadow: var(--shadow); }
.card:hover { box-shadow: var(--shadow-lg); }
.card__title { font-size: 15px; font-weight: 750; }
.card__meta { font-size: 12.5px; }

/* Λίστες — επίπεδες, hairline, compact */
.list { gap: 8px; }
.list__row { padding: 10px 12px; border-radius: 14px; box-shadow: none; border: 1px solid var(--border); transition: border-color .15s ease, background .15s ease; }
.list__row:hover { border-color: color-mix(in srgb, var(--primary) 32%, var(--border)); background: color-mix(in srgb, var(--primary) 3%, var(--surface)); }
.list__title { font-size: 14px; font-weight: 680; }
.list__sub { font-size: 12.5px; }

/* Buttons — ίδιο ύψος, icons αριστερά, variants */
/* min-height (not height, UX audit Wave 5 / M-3): three separate .btn
   rules in this file compound into an effective ~40px button, under the
   44px touch-target minimum already used for .wk-pro__footer .btn. A fixed
   `height` here would also clip any button whose label wraps to two lines
   at narrow widths -- min-height lets it grow instead. */
.btn { min-height: 44px; padding: 0 16px; border-radius: 12px; font-weight: 650; font-size: 14.5px; transition: transform .12s ease, filter .18s ease, background .18s ease, box-shadow .18s ease; }
.btn--sm { height: 34px; padding: 0 12px; font-size: 13px; }
.btn--block { width: 100%; }
.btn--primary { box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.btn--primary:hover { filter: none; background: color-mix(in srgb, var(--primary) 90%, #000 10%); }
.btn--ghost:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--primary) 22%, var(--border)); }
.btn__icon svg, .btn svg { width: 18px; height: 18px; }

/* Forms — λιγότερο ύψος, σταθερό spacing (16px font ώστε να μη ζουμάρει το iOS) */
.field { margin-bottom: 12px; }
.field__label { font-size: 12.5px; font-weight: 650; margin-bottom: 5px; }
.input { padding: 10px 13px; font-size: 16px; border-width: 1px; border-radius: 11px; }
.input:focus { box-shadow: 0 0 0 3px var(--primary-soft); }
.field__error { color: var(--no); font-size: 12px; margin-top: 5px; font-weight: 600; }

/* Bottom tabbar */
.tab { font-size: 10.5px; gap: 2px; }
.tab__icon svg { width: 22px; height: 22px; }

/* Drawer = sidebar: πιο στενό, accent active, hover */
.drawer__panel { width: min(82vw, 300px); padding: 12px; }
.drawer__item { padding: 11px 12px; border-radius: 11px; font-size: 14px; font-weight: 620; }
.drawer__item.is-active { background: color-mix(in srgb, var(--primary) 13%, transparent); color: var(--primary); position: relative; }
.drawer__item.is-active::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }

/* Section labels & badges */
.section__label { font-size: 11px; letter-spacing: .06em; margin: 8px 0 0; }
.badge { border-radius: 8px; font-weight: 700; }
.page__title { font-size: 19px; font-weight: 800; }

/* Skeleton loading utility */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, color-mix(in srgb, var(--surface-2) 55%, #fff) 37%, var(--surface-2) 63%); background-size: 200% 100%; animation: shimmer 1.4s ease infinite; border-radius: 8px; min-height: 14px; }

/* Touch targets & motion */
.iconbtn, .tab, .btn, .drawer__item { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ==========================================================================
   ✦ REDESIGN 2.1 — Κάρτα «Σήμερα», modals, empty states, skeletons, dark
   ========================================================================== */
.today { gap: 10px; }
.today__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.today__item { display: flex; align-items: center; gap: 10px; padding: 11px; border-radius: 13px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; text-align: left; transition: border-color .15s ease, background .15s ease, transform .12s ease; }
.today__item:hover { border-color: color-mix(in srgb, var(--primary) 32%, var(--border)); transform: translateY(-1px); }
.today__item--has { background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.today__icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 9px; }
.today__icon svg { width: 17px; height: 17px; }
.today__icon--teal { background: var(--primary-soft); color: var(--primary); }
.today__icon--amber { background: color-mix(in srgb, var(--accent-2) 22%, transparent); color: #a9701a; }
.today__icon--coral { background: color-mix(in srgb, var(--coral) 18%, transparent); color: var(--coral); }
.today__n { font-size: 19px; font-weight: 820; margin: 0; line-height: 1; }
.today__l { font-size: 11.5px; color: var(--muted); margin: 2px 0 0; line-height: 1.2; }
.today__summary { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }
.pill { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.pill--ok { background: var(--primary-soft); color: var(--primary); }
.pill--warn { background: color-mix(in srgb, var(--accent-2) 24%, transparent); color: #a9701a; }

/* Modals: μικρότερα, σύγχρονα, animated (centered σε tablet/laptop) */
.modal__title { font-size: 16px; font-weight: 800; }
@media (min-width: 640px) {
  .overlay { align-items: center; padding: 24px; }
  .modal { border-radius: 18px; max-width: 460px; opacity: 0; transform: translateY(10px) scale(.97); transition: transform .2s cubic-bezier(.4,0,.2,1), opacity .2s ease; }
  .overlay--show .modal { transform: none; opacity: 1; }
}

/* Empty states */
.empty { padding: 40px 20px; gap: 10px; }
.empty__icon { font-size: 40px; opacity: .35; }
.empty__title { font-weight: 750; font-size: 15px; }
.empty__hint { font-size: 13px; max-width: 280px; }

/* Skeletons */
.skeleton--line { height: 12px; border-radius: 6px; }
.skeleton--title { height: 18px; width: 55%; border-radius: 7px; }
.skeleton--card { height: 66px; border-radius: 14px; }
.skeleton-stack { display: grid; gap: 10px; }

/* ✦ Dark mode — ξανα-ορισμένο ΤΕΛΕΥΤΑΙΟ (νικά το redesign :root) */
[data-theme="dark"] {
  --bg: #0f1719;
  --surface: #161f23;
  --surface-2: #1e2a30;
  --text: #e9f0f2;
  --muted: #94a4ab;
  --border: #27353c;
  --primary: #2fc6a6;
  --primary-ink: #06201a;
  --primary-soft: #143a32;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.55);
}
[data-theme="dark"] .today__icon--amber, [data-theme="dark"] .pill--warn { color: var(--accent-2); }
[data-theme="dark"] .appbar { background: color-mix(in srgb, var(--surface) 86%, transparent); }

/* Page header (τίτλος + περιγραφή + κύρια ενέργεια) */
.pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.pagehead__text { min-width: 0; }
.pagehead__title { font-size: 20px; font-weight: 820; margin: 0; letter-spacing: -0.02em; }
.pagehead__sub { font-size: 13px; color: var(--muted); margin: 3px 0 0; line-height: 1.4; }
.pagehead__cta { flex: 0 0 auto; white-space: nowrap; }

/* KPI: μεταβολή + progress */
.stat__change { font-size: 11px; font-weight: 800; margin-top: 1px; display: inline-flex; align-items: center; gap: 3px; }
.stat__change--up { color: var(--yes); }
.stat__change--up::before { content: '▲'; font-size: 8px; }
.kpi-prog { display: grid; gap: 5px; margin: 2px 0 6px; }
.kpi-prog__head { display: flex; justify-content: space-between; align-items: baseline; }
.kpi-prog__pct { font-size: 13px; font-weight: 800; color: var(--primary); }

/* #35 Tabs */
.tabs { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 12px; margin-bottom: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabs__tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: none; background: transparent; border-radius: 9px; font-size: 13px; font-weight: 650; color: var(--muted); cursor: pointer; transition: background .15s ease, color .15s ease; white-space: nowrap; }
.tabs__tab.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.tabs__count { font-size: 11px; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); padding: 1px 6px; border-radius: 99px; font-weight: 800; }

/* #35 Collapse / Accordion */
.collapse { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.collapse + .collapse { margin-top: 8px; }
.collapse__head { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: none; border: none; cursor: pointer; text-align: left; font-weight: 700; font-size: 14px; color: var(--text); touch-action: manipulation; }
.collapse__title { flex: 1; }
.collapse__count { font-size: 11px; background: var(--surface-2); color: var(--muted); padding: 1px 7px; border-radius: 99px; font-weight: 800; }
.collapse__chev { transition: transform .2s ease; color: var(--muted); font-size: 11px; }
.collapse.is-open .collapse__chev { transform: rotate(180deg); }
.collapse__body { display: none; padding: 0 12px 12px; }
.collapse.is-open .collapse__body { display: block; }

/* ==========================================================================
   #37 Responsive — tablet & laptop (αξιοποίηση πλάτους, κεντράρισμα)
   ========================================================================== */
.stats .stat--wide { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .content { max-width: 760px; margin-inline: auto; padding-left: 18px; padding-right: 18px; }
  .view { gap: 16px; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .today__grid { grid-template-columns: repeat(4, 1fr); }
  .modal { max-width: 520px; }
}
@media (min-width: 1024px) {
  .content { max-width: 960px; padding-top: 18px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .greeting__hello { font-size: 22px; }
  .pagehead__title { font-size: 22px; }
  .tabbar { left: 0; right: 0; max-width: 540px; margin-inline: auto; border-radius: 16px 16px 0 0; box-shadow: var(--shadow-lg); }
  .appbar__inner, .appbar { max-width: 100%; }
  /* Δύο στήλες για δευτερεύοντα panels στο dashboard */
  .view--cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
}
@media (min-width: 1280px) {
  .content { max-width: 1040px; }
}

/* #21 Breadcrumbs */
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 12.5px; margin: -2px 0 2px; color: var(--muted); }
.crumbs__home { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--muted); font-size: 12.5px; font-weight: 650; cursor: pointer; padding: 2px 0; transition: color .15s ease; }
.crumbs__home:hover { color: var(--primary); }
.crumbs__ico svg { width: 14px; height: 14px; }
.crumbs__sep { color: var(--border); font-weight: 700; }
.crumbs__cur { color: var(--text); font-weight: 700; }

/* #19 Onboarding tips */
.onboard { gap: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, var(--surface)), var(--surface)); }
.onboard .panel__title { display: flex; align-items: center; gap: 6px; }
.onboard__bar { height: 7px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.onboard__fill { height: 100%; background: var(--primary); border-radius: 99px; transition: width .4s ease; }
.onboard__steps { display: grid; gap: 7px; margin-top: 4px; }
.onboard__step { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; cursor: pointer; font-size: 13.5px; font-weight: 650; color: var(--text); transition: border-color .15s ease, background .15s ease; }
.onboard__step:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.onboard__step.is-done { color: var(--muted); }
.onboard__check { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 99px; border: 2px solid var(--border); display: grid; place-items: center; }
.onboard__step.is-done .onboard__check { background: var(--primary); border-color: var(--primary); color: #fff; }
.onboard__check svg { width: 13px; height: 13px; }
.onboard__label { flex: 1; }
.onboard__go { color: var(--primary); font-weight: 800; }

/* ==========================================================================
   #34 Final audit polish — συνέπεια κεφαλίδων & κουμπιών
   ========================================================================== */
.page__head { align-items: flex-start; margin-bottom: 2px; }
.page__title { font-weight: 820; }
.fab-inline { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; cursor: pointer; transition: transform .12s ease, filter .18s ease; }
.fab-inline:hover { transform: translateY(-1px); filter: brightness(.96); }
.fab-inline svg { width: 20px; height: 20px; }
/* Συνεπές κενό κορυφής σε όλες τις κεφαλίδες σελίδας */
.greeting, .pagehead, .page__head { margin-top: 0; }
.greeting { margin-bottom: 2px; }
/* Καθαρότερα linkbtn (π.χ. Διαγραφή/Απόρριψη με token χρώμα) */
.linkbtn { transition: opacity .15s ease; }
.linkbtn:hover { opacity: .75; }

/* QR Membership Card */
.mcard { position: relative; overflow: hidden; border-radius: 18px; padding: 18px; color: #fff; background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 65%, #08362c) 100%); box-shadow: var(--shadow-lg); }
.mcard__sheen { position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.18), transparent 60%); pointer-events: none; }
.mcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; position: relative; }
.mcard__org { font-size: 16px; font-weight: 850; margin: 0; letter-spacing: -.01em; }
.mcard__label { font-size: 10.5px; letter-spacing: .14em; opacity: .8; margin: 2px 0 0; font-weight: 700; }
.mcard__logo { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.92); padding: 3px; object-fit: contain; }
.mcard__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 22px; position: relative; }
.mcard__name { font-size: 19px; font-weight: 820; margin: 0; }
.mcard__role { font-size: 12.5px; opacity: .85; margin: 2px 0 0; }
.mcard__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 11.5px; opacity: .92; align-items: center; }
.mcard__pill { background: rgba(255,255,255,.2); padding: 3px 9px; border-radius: 99px; font-weight: 700; }
.mcard__qr { width: 84px; height: 84px; flex: 0 0 84px; background: #fff; border-radius: 12px; padding: 6px; display: grid; place-items: center; }
.mcard__qr svg { width: 100%; height: 100%; display: block; }

/* Event attendance / check-in */
.attend__head { display: flex; align-items: center; gap: 8px; }
.attend__count { font-size: 22px; font-weight: 850; color: var(--primary); }

/* #8 Member CRM — tags & timeline */
.tagedit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tagchip { display: inline-flex; align-items: center; gap: 5px; background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 99px; }
.tagchip__x { background: none; border: none; color: var(--primary); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; opacity: .7; }
.tagchip__x:hover { opacity: 1; }
.tagedit__input { border: 1px dashed var(--border); background: transparent; border-radius: 99px; padding: 4px 10px; font-size: 12px; min-width: 90px; outline: none; color: var(--text); }
.tagedit__input:focus { border-color: var(--primary); }
.timeline { display: grid; gap: 0; margin-top: 2px; }
.tl { display: flex; gap: 10px; padding: 8px 0; position: relative; }
.tl:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 32px; bottom: -8px; width: 2px; background: var(--border); }
.tl__dot { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 99px; background: var(--surface-2); display: grid; place-items: center; color: var(--primary); z-index: 1; }
.tl__dot svg { width: 15px; height: 15px; }
.tl__label { font-size: 13.5px; font-weight: 650; margin: 0; }
.tl__meta { font-size: 12px; color: var(--muted); margin: 1px 0 0; }

/* Logo upload */
.logo-row { display: flex; align-items: center; gap: 14px; }
.logo-pic { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--border); }
.logo-row__btns { display: flex; flex-direction: column; gap: 6px; }

/* Member-to-member chat */
.chatview { min-height: 60vh; }
.chat__thread { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: calc(100vh - var(--tabbar-h) - 230px); padding: 4px 2px 8px; }
.chat__composer { position: sticky; bottom: calc(var(--tabbar-h) + 6px); display: flex; gap: 8px; background: var(--bg); padding: 8px 0 2px; }
.chat__input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 99px; padding: 11px 16px; font-size: 16px; background: var(--surface); color: var(--text); outline: none; }
.chat__input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.chat__send { width: 44px; height: 44px; flex: 0 0 44px; border: none; border-radius: 50%; background: var(--primary); color: var(--primary-ink); display: grid; place-items: center; cursor: pointer; transition: filter .15s ease; }
.chat__send:hover { filter: brightness(.95); }
.chat__send svg { width: 20px; height: 20px; }
.chatmsg { display: flex; flex-direction: column; align-items: flex-start; max-width: 84%; }
.chatmsg--mine { align-self: flex-end; align-items: flex-end; }
.chatmsg__author { font-size: 11px; font-weight: 700; color: var(--muted); margin: 0 0 2px 12px; }
.chatmsg__bubble { background: var(--surface); border: 1px solid var(--border); padding: 8px 12px; border-radius: 16px; border-bottom-left-radius: 5px; display: flex; align-items: flex-end; gap: 8px; box-shadow: var(--shadow); }
.chatmsg--mine .chatmsg__bubble { background: var(--primary); color: #fff; border-color: transparent; border-bottom-left-radius: 16px; border-bottom-right-radius: 5px; }
.chatmsg__text { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
.chatmsg__time { font-size: 10px; opacity: .6; flex: 0 0 auto; }

/* #9 Analytics charts */
.chartwrap { width: 100%; overflow: hidden; }
.chartwrap--donut { display: grid; place-items: center; }
.chart { width: 100%; height: auto; display: block; }
.chart--donut { max-width: 160px; margin: 0 auto; }
.chart__lbl { font-size: 9px; fill: var(--muted); }
.chart__val { font-size: 9px; fill: var(--text); font-weight: 700; }
.donut__big { font-size: 22px; font-weight: 850; fill: var(--primary); }
.donut__small { font-size: 9px; fill: var(--muted); }
.donutwrap { display: grid; gap: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; margin-top: 6px; }
.legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.legend__dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.hbars { display: grid; gap: 9px; }
.hbar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.hbar__lbl { font-size: 12.5px; font-weight: 600; grid-column: 1 / -1; margin-bottom: -4px; overflow-wrap: anywhere; }
.hbar__track { height: 9px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.hbar__fill { height: 100%; background: var(--primary); border-radius: 99px; transition: width .5s ease; }
.hbar__val { font-size: 12px; font-weight: 800; color: var(--primary); }

/* ==========================================================================
   #12 Glassmorphism — frosted glass σε header/tabbar/drawer/modals/search
   ========================================================================== */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .appbar {
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    backdrop-filter: saturate(1.6) blur(16px);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  }
  .tabbar {
    background: color-mix(in srgb, var(--surface) 76%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    backdrop-filter: saturate(1.6) blur(16px);
  }
  .drawer__panel {
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .gsearch__panel {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .pushprompt {
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .overlay { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
}

/* #5 Document Center */
.doc__ic { color: var(--primary); }
.doc__ic svg { width: 18px; height: 18px; }

/* Wallet-style membership card additions */
.mcard { border-top: 3px solid transparent; }
.mcard--active { border-top-color: #34d399; }
.mcard--pending { border-top-color: #fbbf24; }
.mcard--inactive { border-top-color: #f87171; }
.mcard__idrow { display: flex; align-items: center; gap: 10px; }
.mcard__photo { width: 40px; height: 40px; border-radius: 11px; flex: 0 0 40px; object-fit: cover; background: rgba(255,255,255,.2); }
.mcard__photo--ph { display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #fff; }
.mcard__no { font-family: ui-monospace, 'SF Mono', monospace; letter-spacing: .04em; background: rgba(255,255,255,.16); padding: 3px 8px; border-radius: 7px; font-size: 11px; font-weight: 700; }
.mcard__exp { font-size: 11.5px; opacity: .9; margin: 8px 0 0; }
.mcard--active .mcard__pill { background: rgba(16,185,129,.34); }
.mcard--pending .mcard__pill { background: rgba(245,158,11,.36); }
.mcard--inactive .mcard__pill { background: rgba(239,68,68,.38); }
.mcard-wrap { margin-bottom: 14px; }
.mcard-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }

/* Bulk member import preview */
.import-preview { margin-top: 12px; }
.import-preview__count { font-size: 13px; font-weight: 700; margin: 0 0 8px; color: var(--text); }
.import-preview__table { width: 100%; font-size: 12px; border-collapse: collapse; display: table; }
.import-preview__table th, .import-preview__table td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; }
.import-preview__table th { background: var(--surface-2); font-weight: 700; }
.import-preview__empty { margin: 8px 0 0; }

/* Member Portal quick links */
.portal-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.portal-link { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; cursor: pointer; transition: transform .12s ease, border-color .15s ease; box-shadow: var(--shadow); }
.portal-link:hover { transform: translateY(-2px); border-color: var(--primary); }
.portal-link__ic { width: 38px; height: 38px; border-radius: 11px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.portal-link__ic svg { width: 19px; height: 19px; }
.portal-link__lbl { font-size: 12px; font-weight: 650; text-align: center; color: var(--text); line-height: 1.2; }

/* QR Scanner (full-screen camera) */
.scan { position: fixed; inset: 0; z-index: 200; background: #000; display: flex; flex-direction: column; color: #fff; }
.scan__bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top)); }
.scan__title { font-weight: 700; font-size: 15px; }
.scan__close { background: rgba(255,255,255,.15); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.scan__close svg { width: 20px; height: 20px; }
.scan__stage { flex: 1; position: relative; overflow: hidden; display: grid; place-items: center; }
.scan__video { width: 100%; height: 100%; object-fit: cover; }
.scan__frame { position: absolute; width: 62vw; max-width: 280px; aspect-ratio: 1; border: 3px solid rgba(255,255,255,.92); border-radius: 22px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); }
.scan__status { text-align: center; padding: 14px 20px; font-size: 14px; opacity: .95; }
.scan__actions { display: flex; justify-content: center; padding: 0 16px calc(20px + env(safe-area-inset-bottom)); }

/* Verify result — φανάρι */
.verify { text-align: center; }
.verify__badge { display: inline-block; padding: 8px 16px; border-radius: 99px; font-weight: 800; font-size: 13px; letter-spacing: .04em; color: #fff; margin-bottom: 12px; }
.verify--green .verify__badge { background: #10b981; }
.verify--orange .verify__badge { background: #f59e0b; }
.verify--red .verify__badge { background: #ef4444; }
.verify__name { font-size: 19px; font-weight: 800; margin: 0 0 14px; }
.verify__rows { display: grid; gap: 8px; text-align: left; }
.verify__row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; background: var(--surface-2); border-radius: 10px; }
.verify__k { color: var(--muted); font-size: 13px; }
.verify__v { font-weight: 700; font-size: 13px; }

/* AI Assistant — floating button + panel */
.ai-fab { position: fixed; right: 16px; bottom: calc(var(--tabbar-h) + 16px); z-index: 150; width: 52px; height: 52px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #6d28d9)); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); cursor: pointer; transition: transform .15s ease; }
.ai-fab:hover { transform: scale(1.05); }
.ai-fab--open { transform: scale(.9); opacity: .55; }
.ai-fab svg { width: 26px; height: 26px; }
.ai-wrap { position: fixed; inset: 0; z-index: 160; display: none; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.35); }
.ai-wrap--open { display: flex; }
.ai-panel { width: 100%; max-width: 440px; height: min(60vh, 520px); background: var(--surface); border-radius: 20px 20px 0 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -8px 40px rgba(0,0,0,.3); animation: aiUp .22s ease; }
@keyframes aiUp { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (min-width: 600px) { .ai-wrap { justify-content: flex-end; padding: 0 16px calc(var(--tabbar-h) + 84px); background: rgba(0,0,0,.12); } .ai-panel { border-radius: 18px; height: min(64vh, 560px); } }
.ai-panel__bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.ai-panel__title { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.ai-panel__spark { color: var(--primary); display: grid; } .ai-panel__spark svg { width: 18px; height: 18px; }
.ai-panel__close { background: var(--surface-2); border: none; border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; color: var(--text); } .ai-panel__close svg { width: 17px; height: 17px; }
.ai-thread { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg { max-width: 88%; font-size: 14px; line-height: 1.45; }
.ai-msg--user { align-self: flex-end; background: var(--primary); color: var(--primary-ink); padding: 9px 13px; border-radius: 15px; border-bottom-right-radius: 5px; }
.ai-msg--bot { align-self: flex-start; background: var(--surface-2); color: var(--text); padding: 10px 13px; border-radius: 15px; border-bottom-left-radius: 5px; }
.ai-rich p { margin: 0 0 4px; } .ai-rich p:last-child { margin: 0; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-msg--bot .ai-chips { background: none; }
.ai-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 6px 11px; font-size: 12.5px; cursor: pointer; color: var(--text); }
.ai-chip:hover { border-color: var(--primary); color: var(--primary); }
.ai-list { margin-top: 8px; display: grid; gap: 5px; }
.ai-list__row { display: flex; justify-content: space-between; gap: 10px; background: var(--surface); border-radius: 9px; padding: 7px 10px; }
.ai-list__t { font-weight: 650; font-size: 13px; } .ai-list__s { font-size: 12px; color: var(--muted); }
.ai-confirm { margin: 6px 0; padding: 10px 12px; background: var(--surface); border: 1px dashed var(--primary); border-radius: 12px; font-size: 13.5px; }
.ai-actions { display: flex; gap: 8px; margin-top: 8px; }
.ai-open { margin-top: 8px; background: none; border: none; color: var(--primary); font-weight: 700; font-size: 13px; cursor: pointer; padding: 0; }
.ai-composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.ai-input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 99px; padding: 10px 14px; font-size: 15px; background: var(--surface-2); color: var(--text); outline: none; }
.ai-input:focus { border-color: var(--primary); }
.ai-send { width: 42px; height: 42px; flex: 0 0 42px; border: none; border-radius: 50%; background: var(--primary); color: var(--primary-ink); display: grid; place-items: center; cursor: pointer; } .ai-send svg { width: 19px; height: 19px; }
.ai-typing { letter-spacing: 2px; }

/* Setup Wizard additions */
.onboard__pct { font-size: 18px; font-weight: 850; color: var(--primary); }
.onboard__spark { display: inline-grid; vertical-align: -3px; color: var(--primary); }
.onboard__spark svg { width: 16px; height: 16px; }

/* Compliance Health — owner dashboard GDPR score */
.compliance-health { border-color: color-mix(in srgb, var(--primary) 22%, var(--border)); }
.compliance-health--ok { background: linear-gradient(180deg, color-mix(in srgb, #10b981 8%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, #10b981 35%, var(--border)); }
.compliance-health__score { color: var(--primary); }
.compliance-health--ok .compliance-health__score { color: #059669; }
.compliance-health--ok .compliance-health__fill { background: linear-gradient(90deg, #10b981, #34d399); }
.compliance-health__actions { align-items: center; }
.compliance-success { background: linear-gradient(180deg, color-mix(in srgb, #10b981 6%, var(--surface)), var(--surface)); }

/* Vision 2.0, Phase 1 — Owner OS composite Health Score card. Reuses
   .onboard/.onboard__pct/.onboard__steps/.onboard__step/.onboard__label and
   .ap-ring (athlete score ring) -- only the ring+list layout and the
   per-row percentage are new. */
.health-score__body { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.health-score__body .onboard__steps { flex: 1; min-width: 200px; margin-top: 0; }
.health-score__pct { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
.health-score--ok { background: linear-gradient(180deg, color-mix(in srgb, #10b981 8%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, #10b981 35%, var(--border)); }
.health-score--ok .onboard__pct { color: #059669; }
@media (max-width: 520px) { .health-score__body { flex-direction: column; align-items: stretch; } }

/* Inbox (ενοποιημένη επικοινωνία) */
.inbox__content { margin-top: 6px; }
.inbox__content .greeting { display: none; }
.inbox__content .chat__thread { max-height: calc(100vh - var(--tabbar-h) - 300px); }

/* In-app reminders */
.rem__bell { display: inline-grid; vertical-align: -3px; color: var(--accent-2, #f59e0b); }
.rem__bell svg { width: 16px; height: 16px; }
.reminders .rem__ic { color: var(--accent-2, #f59e0b); }
.reminders-strip { display: grid; gap: 8px; margin: 2px 0; }
.rem-pill { display: flex; align-items: center; gap: 9px; background: color-mix(in srgb, var(--accent-2, #f59e0b) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent-2, #f59e0b) 32%, transparent); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; }
.rem-pill__ic { display: grid; color: var(--accent-2, #f59e0b); flex: 0 0 auto; }
.rem-pill__ic svg { width: 17px; height: 17px; }

/* Document version badge */
.doc__ver { display: inline-block; margin-left: 7px; font-size: 10px; font-weight: 800; color: var(--primary); background: var(--primary-soft); padding: 1px 6px; border-radius: 6px; vertical-align: middle; }

/* Plan upsell row (gated feature) */
.upsell-row { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-2); }
.upsell-row__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--primary-soft); color: var(--primary); flex: 0 0 auto; }
.upsell-row__ic svg { width: 18px; height: 18px; }
.upsell-row__t { font-weight: 700; font-size: 14px; }
.upsell-row__s { font-size: 12.5px; }

/* Payment card (IBAN / link ανά σύλλογο) */
.paycard__iban { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-top: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.paycard__lbl { font-size: 11.5px; margin: 0 0 2px; }
.paycard__num { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; font-size: 14px; letter-spacing: .3px; word-break: break-all; }

/* Profile & member photos */
.avatar--photo { overflow: hidden; padding: 0; }
.avatar--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.photo-edit { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 8px 0 2px; }

/* Events calendar */
.cal { margin-top: 6px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal__title { font-weight: 800; font-size: 16px; }
.cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.cal__dow span { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__cell { position: relative; aspect-ratio: 1; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.cal__cell--empty { border: none; background: transparent; cursor: default; }
.cal__num { font-size: 13px; font-weight: 600; }
.cal__cell.has-ev { border-color: var(--primary); }
.cal__cell.is-today { background: var(--primary-soft); }
.cal__cell.is-sel { background: var(--primary); }
.cal__cell.is-sel .cal__num { color: #fff; }
.cal__dot { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--primary); color: #fff; font-size: 9px; font-weight: 800; display: grid; place-items: center; }
.cal__cell.is-sel .cal__dot { background: #fff; color: var(--primary); }
.cal__day { margin-top: 12px; }
.cal__day-h { font-weight: 800; font-size: 14px; margin: 0 0 8px; }

/* Multi-option polls */
.choices--multi { display: grid; gap: 8px; }
.choice__dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--primary); display: inline-block; }
.resbar__fill--opt { background: var(--primary); }
.pollopts { display: grid; gap: 8px; }
.pollopt { display: flex; gap: 8px; align-items: center; }
.pollopt .input { flex: 1; }

/* Direct messages (1-to-1) */
.dm-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 9px 11px; cursor: pointer; }
.dm-row + .dm-row { margin-top: 6px; }
.dm-row__main { flex: 1; min-width: 0; }
.dm-row__name { font-weight: 700; font-size: 14px; }
.dm-row__last { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-row__badge { background: var(--primary); color: #fff; font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px; }
.dm-thread__head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.dm-thread__name { font-weight: 800; font-size: 15px; }
.dm-thread { display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - var(--tabbar-h) - 320px); overflow-y: auto; padding: 4px 2px; }
.dmsg { display: flex; }
.dmsg--me { justify-content: flex-end; }
.dmsg__b { display: inline-block; max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.35; word-break: break-word; color: var(--text); }
.dmsg--them .dmsg__b { background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.dmsg--me .dmsg__b { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.dm-composer { display: flex; gap: 8px; margin-top: 10px; }
.dm-composer .input { flex: 1; }
.dm-send { padding: 0 16px; }

/* ===== Community Hub ===== */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; font-weight: 600; font-size: 14px; }
.toggle-row input[type="checkbox"] { width: 44px; height: 26px; appearance: none; background: var(--surface-2); border: 1px solid var(--border); border-radius: 13px; position: relative; cursor: pointer; transition: background .15s; flex: 0 0 auto; }
.toggle-row input[type="checkbox"]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.toggle-row input[type="checkbox"]:checked { background: var(--primary); }
.toggle-row input[type="checkbox"]:checked::after { transform: translateX(18px); }

.composer__top { display: flex; gap: 10px; align-items: flex-start; }
.composer__top .textarea { flex: 1; }
.composer__bar { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 8px; }
.composer__preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.composer__thumb { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; }
.composer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.composer__rm { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; display: grid; place-items: center; }
.composer__rm svg { width: 13px; height: 13px; }

.feed { display: grid; gap: 12px; margin-top: 12px; }
.feed__post { padding: 14px; }
.feed__head { display: flex; align-items: center; gap: 10px; }
.feed__meta { flex: 1; min-width: 0; }
.feed__author { font-weight: 700; font-size: 14px; }
.feed__time { font-size: 12px; }
.feed__body { margin: 10px 0 0; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.feed__media { width: 100%; border-radius: 12px; margin-top: 10px; display: block; }
.feed__acts { display: flex; gap: 18px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.feed__act { display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; color: var(--muted); font-weight: 700; font-size: 13px; padding: 2px 0; }
.feed__act svg { width: 18px; height: 18px; }
.feed__act.is-on { color: #e0245e; }
.feed__act.is-on .feed__heart svg { fill: #e0245e; stroke: #e0245e; }
.feed__comments { margin-top: 10px; display: grid; gap: 8px; }
.cmt { display: flex; gap: 8px; align-items: flex-start; }
.cmt__body { background: var(--surface-2); border-radius: 12px; padding: 7px 11px; font-size: 13.5px; }
.cmt__name { font-weight: 700; display: block; font-size: 12.5px; }
.cmt-add { display: flex; gap: 8px; }
.cmt-add .input { flex: 1; }
.avatar--xs { width: 28px; height: 28px; font-size: 12px; flex: 0 0 auto; }

/* Sponsors & Benefits */
.sponsors { padding: 13px 14px; margin-top: 12px; }
.sponsors__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.sponsors__title { font-size: 15px; font-weight: 800; }
.sponsors__strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.sponsor-chip { flex: 0 0 auto; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 8px; cursor: pointer; position: relative; }
.sponsor-chip__logo { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--surface); }
.sponsor-chip__logo img { width: 100%; height: 100%; object-fit: cover; }
.sponsor-chip__logo--ph { font-weight: 800; font-size: 20px; color: var(--primary); background: var(--primary-soft); }
.sponsor-chip__name { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.2; max-height: 2.4em; overflow: hidden; }
.sponsor-chip__badge { font-size: 9px; font-weight: 800; color: #fff; background: var(--primary); border-radius: 6px; padding: 1px 5px; }
.sponsor-detail { text-align: center; display: grid; gap: 10px; }
.sponsor-detail__logo { width: 88px; height: 88px; object-fit: cover; border-radius: 14px; margin: 0 auto; }
.sponsor-detail__offer { display: flex; align-items: center; gap: 8px; justify-content: center; background: var(--primary-soft); color: var(--primary); font-weight: 700; border-radius: 12px; padding: 10px; font-size: 14px; }
.sponsor-detail__offer svg { width: 18px; height: 18px; }
.sponsor-form__logorow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sponsor-form__logo { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); text-align: center; }
.sponsor-form__logo img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   LANDING PAGE REDESIGN (.lp)
   ============================================================ */
.auth--home { padding: 0 !important; max-width: 100% !important; }
.lp { width: 100%; }
.lp-sec { max-width: 1040px; margin: 0 auto; padding: 0 18px; }
.lp-sec { margin-top: 56px; }
.lp-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800; color: var(--primary); margin: 0 0 6px; text-align: center; }
.lp-h2 { font-size: clamp(22px, 5.4vw, 30px); font-weight: 850; letter-spacing: -.02em; text-align: center; margin: 0 0 18px; line-height: 1.15; }
.lp-lead { text-align: center; color: var(--muted); max-width: 620px; margin: -8px auto 18px; font-size: 15px; line-height: 1.5; }

/* nav */
.lp-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); max-width: 1040px; margin: 0 auto; }
.lp-nav__brand { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 0; color: inherit; flex: 0 0 auto; }
.lp-nav__brand img { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto; }
.lp-nav__brand span { font-weight: 850; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }
.lp-nav__links { display: none; gap: 4px; flex: 0 0 auto; }
.lp-nav__link { background: none; border: none; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 14px; padding: 7px 10px; border-radius: 8px; white-space: nowrap; }
.lp-nav__link:hover { color: var(--text); background: var(--surface-2); }
.lp-nav__right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.lp-nav__persona { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; border: 1.5px solid var(--border, #e2e8f0); background: #fff; cursor: pointer; color: var(--text); font-weight: 700; font-size: 13px; white-space: nowrap; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
.lp-nav__persona:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); box-shadow: 0 2px 8px rgba(15,23,42,.06); }
.lp-nav__persona span { font-size: 15px; line-height: 1; }
@media (max-width: 520px) {
  .lp-nav__persona { padding: 7px 10px; font-size: 12px; }
  .lp-nav { padding: 10px 12px !important; }
}
.auth__seg--sub { margin-top: -4px; }
.auth__seg--sub .auth__segbtn { font-size: 13px; padding: 8px 10px; }
@media (min-width: 920px) { .lp-nav__links { display: flex; } }

/* hero */
.lp-hero { text-align: center; padding: 40px 20px 8px; max-width: 760px; margin: 0 auto; }
.lp-hero__pill { display: inline-block; font-size: 12px; font-weight: 700; color: var(--primary); background: var(--primary-soft); border-radius: 999px; padding: 5px 13px; margin-bottom: 16px; }
.lp-hero__title { font-size: clamp(30px, 8vw, 52px); font-weight: 850; letter-spacing: -.03em; line-height: 1.05; margin: 0 0 14px; }
.lp-hero__sub { font-size: clamp(15px, 4vw, 18px); color: var(--muted); line-height: 1.5; margin: 0 auto 22px; max-width: 540px; }
.lp-hero__cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lp-hero__cta .btn { min-width: 160px; }
.lp-hero__badges { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 18px; font-size: 13px; color: var(--muted); font-weight: 600; }

/* device mock */
.lp-device { display: flex; justify-content: center; margin: 8px auto 0; }
.lp-phone { width: 248px; background: #0d1117; border-radius: 34px; padding: 9px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.06); position: relative; }
.lp-phone__notch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 80px; height: 5px; background: #2b2f36; border-radius: 3px; z-index: 2; }
.lp-phone__screen { background: var(--bg); border-radius: 26px; overflow: hidden; height: 430px; padding: 22px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.lpm__top { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 6px; }
.lpm__brand { font-weight: 850; font-size: 15px; color: var(--primary); }
.lpm__bell { width: 18px; height: 18px; color: var(--muted); display: grid; }
.lpm__bell svg { width: 18px; height: 18px; }
.lpm__post { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px; display: grid; gap: 8px; }
.lpm__prow { display: flex; align-items: center; gap: 8px; }
.lpm__ava { width: 28px; height: 28px; border-radius: 50%; background: var(--primary-soft); flex: 0 0 auto; }
.lpm__meta { display: grid; gap: 4px; }
.lpm__line { height: 7px; border-radius: 4px; background: var(--surface-2); display: block; }
.lpm__img { height: 70px; border-radius: 10px; background: linear-gradient(135deg, var(--primary-soft), var(--surface-2)); }
.lpm__acts { display: flex; align-items: center; gap: 10px; }
.lpm__heart { color: #e0245e; display: grid; } .lpm__heart svg { width: 15px; height: 15px; fill: #e0245e; stroke: #e0245e; }
.lpm__cmt { color: var(--muted); display: grid; } .lpm__cmt svg { width: 15px; height: 15px; }
.lp-preview__demos { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

/* metrics */
.lp-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 640px; margin: 0 auto; }
@media (min-width: 720px) { .lp-metrics { grid-template-columns: repeat(4, 1fr); } }
.lp-metric { text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 10px; }
.lp-metric__v { display: block; font-size: clamp(24px, 6vw, 34px); font-weight: 850; color: var(--primary); letter-spacing: -.02em; }
.lp-metric__l { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.lp-metrics--agt .lp-metric { background: var(--primary-soft); border-color: transparent; }

/* agt */
.lp-agt__case { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; max-width: 520px; margin: 18px auto; }
.lp-agt__caseh { font-weight: 800; font-size: 15px; margin: 0 0 10px; }
.lp-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lp-check li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.4; }
.lp-check li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 18px; height: 18px; background: var(--primary-soft); color: var(--primary); border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; }

/* features */
.lp-feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .lp-feats { grid-template-columns: repeat(3, 1fr); } }
.lp-feat { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; }
.lp-feat__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); margin-bottom: 12px; }
.lp-feat__ic svg { width: 22px; height: 22px; }
.lp-feat__t { font-weight: 800; font-size: 15.5px; margin: 0 0 4px; }
.lp-feat__d { font-size: 13px; color: var(--muted); line-height: 1.45; margin: 0; }

/* kinds */
.lp-kinds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .lp-kinds { grid-template-columns: repeat(4, 1fr); } }
.lp-kind { text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px 12px; }
.lp-kind__e { font-size: 34px; display: block; margin-bottom: 8px; }
.lp-kind__t { font-weight: 700; font-size: 14px; margin: 0; }

/* examples */
.lp-ex { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.lp-excard { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px 16px; text-align: center; }
.lp-excard__e { font-size: 32px; display: block; margin-bottom: 8px; }
.lp-excard__t { font-weight: 800; font-size: 15px; margin: 0 0 3px; }
.lp-excard__d { font-size: 12.5px; color: var(--muted); margin: 0; }

/* before/after */
.lp-ba { max-width: 720px; margin: 0 auto; }
.lp-ba__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .lp-ba__grid { grid-template-columns: 1fr; } }
.lp-ba__col { border-radius: 16px; padding: 18px; border: 1px solid var(--border); }
.lp-ba__label { font-weight: 850; font-size: 15px; margin: 0 0 12px; }
.lp-ba__row { font-size: 13.5px; margin: 0 0 9px; line-height: 1.4; }
.lp-ba__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 13.5px; }
.lp-ba__h { font-weight: 850; font-size: 15px; margin: 0 0 12px; }
.lp-ba__col--before { background: color-mix(in srgb, #ef4444 8%, var(--surface)); }
.lp-ba__col--before .lp-ba__label, .lp-ba__col--before .lp-ba__h { color: #ef4444; }
.lp-ba__col--after { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.lp-ba__col--after .lp-ba__label, .lp-ba__col--after .lp-ba__h { color: var(--primary); }

/* hero accent + single mock */
.lp-hero__accent { color: var(--primary); }
.lp-mock--single { min-height: 220px; justify-content: center; }
.lp-mock--single .lp-scr { max-width: 280px; margin: 0 auto; }

/* use cases tabs */
.lp-usecases { max-width: 820px; margin-left: auto; margin-right: auto; }
.lp-uc__head { text-align: center; margin-bottom: 20px; }
.lp-uc__tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }
.lp-uc__tab { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 650; cursor: pointer; transition: border-color .15s, background .15s; }
.lp-uc__tab.is-active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.lp-uc__card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 22px 20px; }
.lp-uc__title { font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.lp-uc__desc { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin: 0 0 14px; }
.lp-uc__feats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.lp-uc__feat { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.lp-uc__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* FAQ accordion — premium SaaS (Stripe / Linear style) */
.lp-sec--faq {
  margin-top: 88px;
  padding: clamp(40px, 6vw, 64px) 18px clamp(48px, 7vw, 72px);
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  max-width: none;
}
.lp-faq__head { max-width: 640px; margin: 0 auto 28px; text-align: center; }
.lp-faq__lead {
  margin: 10px auto 0;
  max-width: 520px;
  font-size: 15px;
  line-height: 1.6;
  color: #475569;
}
.lp-sec--faq .lp-eyebrow { color: var(--primary); }
.lp-sec--faq .lp-h2 { color: #0f172a; margin-bottom: 0; }

.lp-faq {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
}

.lp-faq__item {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease;
}
.lp-faq__item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .07);
  transform: translateY(-1px);
}
.lp-faq__item.is-open {
  border-color: color-mix(in srgb, var(--primary) 42%, #e2e8f0);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .08);
  background: #ffffff;
}

.lp-faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: -.01em;
  text-align: left;
  cursor: pointer;
  color: #0f172a;
  transition: color .18s ease, background .18s ease;
}
.lp-faq__q:hover { background: #f8fafc; }
.lp-faq__q:focus { outline: none; }
.lp-faq__q:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: -2px;
  border-radius: 16px;
}
.lp-faq__item.is-open .lp-faq__q {
  color: #0f172a;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, #fff) 0%, #fff 100%);
  border-bottom: 1px solid #f1f5f9;
}

.lp-faq__q-text { flex: 1; min-width: 0; }

.lp-faq__chev {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  position: relative;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), background .18s ease, border-color .18s ease, color .18s ease;
}
.lp-faq__chev::before,
.lp-faq__chev::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: #334155;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: background .18s ease, transform .28s cubic-bezier(.4, 0, .2, 1);
}
.lp-faq__chev::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.lp-faq__item.is-open .lp-faq__chev {
  background: color-mix(in srgb, var(--primary) 12%, #fff);
  border-color: color-mix(in srgb, var(--primary) 35%, #e2e8f0);
  transform: rotate(45deg);
}
.lp-faq__item.is-open .lp-faq__chev::before,
.lp-faq__item.is-open .lp-faq__chev::after {
  background: var(--primary);
}
.lp-faq__q:hover .lp-faq__chev {
  border-color: #cbd5e1;
  background: #fff;
}

.lp-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1);
}
.lp-faq__item.is-open .lp-faq__panel { grid-template-rows: 1fr; }

.lp-faq__a {
  overflow: hidden;
  min-height: 0;
}
.lp-faq__a p {
  margin: 0;
  padding: 0 20px 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #475569;
}

/* Dark theme — high contrast FAQ */
[data-theme="dark"] .lp-sec--faq {
  background: linear-gradient(180deg, #0c0d10 0%, #111318 100%);
  border-color: var(--border);
}
[data-theme="dark"] .lp-sec--faq .lp-h2 { color: #f8fafc; }
[data-theme="dark"] .lp-faq__lead { color: #94a3b8; }
[data-theme="dark"] .lp-faq__item {
  background: #181b22;
  border-color: #2a2f3a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
[data-theme="dark"] .lp-faq__item:hover {
  border-color: #3d4654;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .lp-faq__item.is-open {
  border-color: color-mix(in srgb, var(--primary) 50%, #2a2f3a);
  background: #1a1f28;
}
[data-theme="dark"] .lp-faq__q {
  color: #f1f5f9;
}
[data-theme="dark"] .lp-faq__q:hover {
  background: #1f2430;
}
[data-theme="dark"] .lp-faq__item.is-open .lp-faq__q {
  color: #ffffff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 14%, #1a1f28) 0%, #1a1f28 100%);
  border-bottom-color: #2a2f3a;
}
[data-theme="dark"] .lp-faq__chev {
  background: #222833;
  border-color: #3d4654;
}
[data-theme="dark"] .lp-faq__chev::before,
[data-theme="dark"] .lp-faq__chev::after {
  background: #e2e8f0;
}
[data-theme="dark"] .lp-faq__item.is-open .lp-faq__chev {
  background: color-mix(in srgb, var(--primary) 22%, #222833);
  border-color: color-mix(in srgb, var(--primary) 45%, #3d4654);
}
[data-theme="dark"] .lp-faq__a p {
  color: #cbd5e1;
}

@media (prefers-reduced-motion: reduce) {
  .lp-faq__item,
  .lp-faq__q,
  .lp-faq__chev,
  .lp-faq__chev::before,
  .lp-faq__chev::after,
  .lp-faq__panel {
    transition: none !important;
  }
}

/* trust */
.lp-trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 680px; margin: 0 auto; }
.lp-trust__row { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; font-size: 14px; font-weight: 600; }
.lp-trust__c { width: 22px; height: 22px; background: var(--primary-soft); color: var(--primary); border-radius: 50%; display: grid; place-items: center; font-weight: 800; flex: 0 0 auto; }

/* pricing */
.lp-pricing { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 360px; margin: 0 auto; }
@media (min-width: 820px) { .lp-pricing { grid-template-columns: repeat(3, 1fr); max-width: 1040px; align-items: start; } }
.lp-plan { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 22px 20px; }
.lp-plan--hl { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.lp-plan__tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 12px; border-radius: 999px; }
.lp-plan__name { font-weight: 850; font-size: 18px; margin: 0; }
.lp-plan__price { margin: 6px 0 14px; }
.lp-plan__amt { font-size: 30px; font-weight: 850; letter-spacing: -.02em; }
.lp-plan__per { font-size: 13px; color: var(--muted); }
.lp-plan__feats { margin: 0 0 16px; }
.lp-plan__feats li { font-size: 13.5px; }

/* testimonials */
.lp-testi__track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 18px 12px; margin: 0 -18px; -webkit-overflow-scrolling: touch; }
.lp-testi__card { scroll-snap-align: center; flex: 0 0 86%; max-width: 440px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 22px; margin: 0; }
@media (min-width: 720px) { .lp-testi__card { flex-basis: 420px; } }
.lp-testi__q { font-size: 16px; line-height: 1.5; margin: 0 0 14px; font-weight: 500; }
.lp-testi__by { display: flex; flex-direction: column; }
.lp-testi__n { font-weight: 800; font-size: 14px; }
.lp-testi__r { font-size: 12.5px; color: var(--muted); }

/* final cta */
.lp-final { margin-top: 60px; background: var(--primary); padding: 48px 22px; text-align: center; }
.lp-final__h { color: #fff; font-size: clamp(22px, 5.5vw, 30px); font-weight: 850; letter-spacing: -.02em; margin: 0 0 8px; }
.lp-final__sub { color: rgba(255,255,255,.9); font-size: 15px; margin: 0 auto 20px; max-width: 460px; line-height: 1.5; }
.lp-final__btn { background: #fff; color: var(--primary); font-weight: 800; min-width: 200px; }

/* footer */
.lp-foot { text-align: center; padding: 38px 20px; border-top: 1px solid var(--border); }
.lp-foot--clean { background: #0f172a; color: #94a3b8; text-align: left; padding: 0; margin-top: 0; }
.lp-foot--clean .lp-foot__inner { max-width: 1100px; margin: 0 auto; padding: 32px 20px 20px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; }
.lp-foot--clean .lp-foot__name { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: #fff; }
.lp-foot--clean .lp-foot__tag { margin: 0; font-size: 13px; line-height: 1.5; max-width: 280px; }
.lp-foot--clean .lp-foot__nav { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.lp-foot--clean .lp-foot__link { color: #cbd5e1; text-decoration: none; font-size: 13.5px; font-weight: 600; }
.lp-foot--clean .lp-foot__link:hover { color: #fff; }
.lp-foot--clean .lp-foot__bottom { border-top: 1px solid rgba(255,255,255,.08); max-width: 1100px; margin: 0 auto; padding: 14px 20px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.lp-foot--clean .lp-foot__copy { margin: 0; font-size: 12px; }
.lp-foot--clean .lp-foot__badges { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; }
.lp-foot__badge { color: #64748b; text-decoration: none; }
.lp-foot__badge--gdpr { color: #065f46; font-weight: 700; }
.lp-foot__badge--gdpr:hover { text-decoration: underline; }
.lp-mp-hero__gdprLink { color: inherit; text-decoration: none; font-weight: inherit; }
.lp-mp-hero__gdprLink:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .lp-foot--clean .lp-foot__inner { flex-direction: column; }
  .lp-foot--clean .lp-foot__nav { flex-direction: column; align-items: flex-start; gap: 10px; }
}
.lp-foot__brand { font-weight: 850; font-size: 18px; margin: 0 0 4px; }
.lp-foot__tag { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.lp-foot__links { display: flex; gap: 8px 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.lp-foot__link { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; padding: 0; }
.lp-foot__link:hover { color: var(--primary); }
.lp-foot__copy { font-size: 12px; color: var(--muted); margin: 0; }

/* Community gallery ανά εκδήλωση (Phase 2b) */
.composer__ev { margin-top: 8px; }
.gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.gallery__cell { padding: 0; border: none; background: none; cursor: pointer; border-radius: 10px; overflow: hidden; aspect-ratio: 1; }
.gallery__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Community Phase 3 — Αποτελέσματα & Εθελοντές */
.community-nav { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
.community-nav__chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 650; font-size: 13.5px; cursor: pointer; box-shadow: var(--shadow); white-space: nowrap; }
.community-nav__chip svg { width: 16px; height: 16px; }
.community-nav__chip:hover { background: var(--surface-2); }
.result-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); min-width: 0; }
.result-row:first-of-type { border-top: none; }
.result-row--top3 {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #f59e0b) 16%, transparent) 0%, transparent 68%);
  margin: 0 -6px; padding: 8px 6px; border-radius: 10px; border-top: none;
}
.result-row--top3 + .result-row { border-top: none; }
.result-row__pos { font-size: 14px; min-width: 36px; text-align: center; font-weight: 800; color: var(--primary); flex-shrink: 0; line-height: 1; }
.result-row__pos--medal { font-size: 17px; }
.result-row__main { flex: 1; display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.result-row__name { font-weight: 650; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.result-row__detail { font-size: 12px; color: var(--muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-row__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 11.5px; color: var(--text); }
.result-row__meta span { display: inline-flex; align-items: center; gap: 3px; }
.result-row__del { opacity: 0.4; flex-shrink: 0; }
.result-row:hover .result-row__del { opacity: 1; }
.results-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.results-table th, .results-table td { padding: 9px 8px; }
.results-table tr.result-row--top3 td { background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #f59e0b) 14%, transparent) 0%, transparent 70%); }
.results-table__sort:hover { color: var(--primary); }
.results-route-head__del { font-size: 12px !important; flex-shrink: 0; white-space: nowrap; }
.results-route-head__info { min-width: 0; flex: 1; }
.results-route-head {
  padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: color-mix(in srgb, var(--primary) 8%, transparent); border-bottom: 1px solid var(--border);
}
.results-toolbar {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; align-items: center;
}
.results-toolbar .btn--danger { border-color: color-mix(in srgb, var(--coral, #f43f5e) 35%, var(--border)); }
.view--race-data { padding-bottom: calc(var(--tabbar-h, 64px) + 88px); }
.results-route-card:last-child { margin-bottom: calc(var(--tabbar-h, 64px) + 12px); }
@media (max-width: 640px) {
  .results-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .results-toolbar .btn { justify-content: center; width: 100%; }
  .results-toolbar .btn--danger { grid-column: 1 / -1; }
  .results-route-bar { flex-direction: column; align-items: stretch; }
  .results-route-head { flex-wrap: nowrap; }
  .results-route-head__del { padding: 6px 10px; }
  .ai-fab { bottom: calc(var(--tabbar-h, 64px) + 72px); }
}
.results-route-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.results-route-chip {
  padding: 8px 14px; border-radius: 99px; border: 1px solid var(--border);
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  background: var(--surface); color: var(--text); max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.results-route-chip.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.results-route-chip:hover:not(.is-active) { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.results-route-bar { align-items: center; }

/* ==========================================================================
   PARTICIPANTS — Race Director CRM redesign (js/views/participants.js).
   All new classes are "ptx-" prefixed and scoped to this page only -- the
   legacy .results-table/.result-row classes stay untouched because
   js/views/results.js shares them for the Results page.
   ========================================================================== */
.badge--info { background: color-mix(in srgb, #3b82f6 18%, transparent); color: #3b82f6; }
.badge--danger { background: color-mix(in srgb, var(--coral, #f43f5e) 18%, transparent); color: var(--coral, #f43f5e); }
.badge--vip { background: color-mix(in srgb, #a855f7 18%, transparent); color: #a855f7; }

.ptx-route-card { display: flex; align-items: center; gap: 16px; padding: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.ptx-route-card__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 20px; flex: none; }
.ptx-route-card__main { flex: 1; min-width: 180px; }
.ptx-route-card__title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ptx-route-card__title { margin: 0; font-size: 18px; font-weight: 750; }
.ptx-route-card__meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.ptx-route-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.ptx-route-card__facts { display: flex; flex-wrap: wrap; gap: 18px; }
.ptx-route-card__fact { display: grid; gap: 1px; }
.ptx-route-card__fact-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ptx-route-card__fact-value { font-size: 13.5px; font-weight: 700; }

.ptx-kpis { margin-bottom: 14px; }

.ptx-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ptx-toolbar__search { flex: 1; min-width: 200px; position: relative; }
.ptx-toolbar__search input { width: 100%; }
.ptx-toolbar__group { display: flex; gap: 6px; flex-wrap: wrap; }
.ptx-toolbar__spacer { flex: 1; }

.ptx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ptx-chip {
  padding: 6px 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 12.5px; font-weight: 650; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.ptx-chip.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.ptx-chip:hover:not(.is-active) { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }

.ptx-bulkbar { position: sticky; bottom: 10px; z-index: 5; margin: 8px 0; }
.ptx-bulkbar .bulkbar, .ptx-bulkbar > div { box-shadow: 0 8px 28px rgba(0,0,0,.25); }

/* Wave 2 org-admin audit PART-5: overflow:hidden here CLIPPED the table
   (forced to min-width:760px) instead of letting the outer .data-scroll-x
   wrapper (renderParticipantsTable already returns dataScrollX(inner, ...))
   actually scroll it -- the child's overflow was silently eaten one level
   too early, so a phone in table view lost every column past the fold with
   no way to reach it, including during race-day check-in. */
.ptx-table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; overflow-y: hidden; box-shadow: var(--shadow); }
.ptx-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.ptx-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--bg); text-align: left; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: 10px 10px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.ptx-table thead th:first-child { position: sticky; left: 0; z-index: 3; }
.ptx-table tbody td:first-child { position: sticky; left: 0; background: inherit; z-index: 1; }
.ptx-table tbody tr { cursor: pointer; }
.ptx-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.ptx-table tbody tr:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.ptx-table tbody tr.is-dup { background: color-mix(in srgb, var(--accent, #f59e0b) 8%, transparent); }
.ptx-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ptx-table tbody tr:last-child td { border-bottom: none; }
.ptx-table mark { background: color-mix(in srgb, var(--accent) 45%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.ptx-sortbtn { all: unset; cursor: pointer; display: block; width: 100%; }
.ptx-sortbtn:hover { color: var(--primary); }

.ptx-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
.ptx-namecell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ptx-namecell__name { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

.ptx-empty { display: grid; place-items: center; gap: 14px; padding: 48px 20px; text-align: center; }
.ptx-empty__icon { font-size: 44px; }
.ptx-empty__title { font-size: 17px; font-weight: 750; margin: 0; }
.ptx-empty__hint { color: var(--muted); margin: 0; max-width: 420px; }
.ptx-empty__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Participant detail panel contents -- the drawer chrome itself (position,
   backdrop, open/close transform) now comes from .modal--side-panel above;
   these style what's rendered inside it (see openParticipantPanel()). */
.ptx-panel__head { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border); }
.ptx-panel__head-main { flex: 1; min-width: 0; }
.ptx-panel__body { flex: 1; overflow-y: auto; padding: 14px 16px; }
.ptx-panel__section { border-bottom: 1px solid var(--border); padding: 12px 0; }
.ptx-panel__section:last-child { border-bottom: none; }
.ptx-panel__section-h { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 700; font-size: 13.5px; }
.ptx-panel__section-body { margin-top: 8px; display: grid; gap: 6px; font-size: 13px; }
.ptx-panel__row { display: flex; justify-content: space-between; gap: 10px; }
.ptx-panel__row span:first-child { color: var(--muted); }

@media (max-width: 720px) {
  .ptx-route-card { padding: 12px; }
  .ptx-route-card__facts { gap: 12px; }
  .modal--side-panel { width: 100vw !important; }
}

.vol__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.signup-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); }
.signup-row:first-child { border-top: none; }
.signup-row__icon svg { width: 18px; height: 18px; color: var(--primary); }
.signup-row__name { font-weight: 600; }
.iconbtn--sm { width: 30px; height: 30px; }

/* Template ταυτότητα στο dashboard */
.tmpl-pill { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; letter-spacing: .2px; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent); }

/* Template identity — hero, widget, community header */
.ihero { display: flex; align-items: center; gap: 14px; padding: 18px 18px; border-radius: 20px; margin: 4px 0 16px; color: #fff; background: linear-gradient(135deg, var(--from), var(--to)); box-shadow: 0 10px 26px rgba(0,0,0,.16); }
.ihero__badge { font-size: 34px; line-height: 1; width: 56px; height: 56px; display: grid; place-items: center; background: rgba(255,255,255,.18); border-radius: 16px; flex: none; }
.ihero__badge--logo { padding: 0; overflow: hidden; object-fit: cover; border: 2px solid rgba(255,255,255,.35); }
.ihero__body { min-width: 0; }
.ihero__kicker { margin: 0 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .92; }
.ihero__title { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.15; }
.ihero__sub { margin: 3px 0 0; font-size: 13.5px; opacity: .94; }
.ipanel__grid { display: flex; gap: 8px; flex-wrap: wrap; }
.ipanel__chip { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-weight: 650; font-size: 13.5px; cursor: pointer; }
.ipanel__chip:hover { background: var(--surface); border-color: var(--primary); }
.ipanel__ic svg { width: 16px; height: 16px; }
.comm-hd { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; margin: 4px 0 14px; background: var(--tint); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.comm-hd__emoji { font-size: 26px; line-height: 1; flex: none; }
.comm-hd__logo { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex: none; border: 2px solid color-mix(in srgb, var(--ink) 18%, transparent); background: var(--surface); }
.comm-hd__title { margin: 0; font-weight: 800; font-size: 16px; color: var(--ink); }
.comm-hd__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--ink); opacity: .82; }
[data-theme="dark"] .comm-hd { background: color-mix(in srgb, var(--ink) 22%, var(--surface)); }
[data-theme="dark"] .comm-hd__title, [data-theme="dark"] .comm-hd__sub { color: #fff; }

/* Landing — 6 Templates section, architecture tree, powered-by */
.lp-tpl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; }
.lp-tcard { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.lp-tcard__e { font-size: 30px; line-height: 1; }
.lp-tcard__t { margin: 2px 0 0; font-weight: 800; font-size: 16px; }
.lp-tcard__d { margin: 0; font-size: 13px; color: var(--muted); flex: 1; }
.lp-tcard__feats { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 6px; }
.lp-tag { font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 99px; background: var(--primary-soft); color: var(--primary); }
.lp-arch { margin-top: 26px; padding: 18px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); }
.lp-arch__h { margin: 0 0 12px; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.lp-arch__root { display: inline-block; font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #000)); padding: 8px 16px; border-radius: 12px; box-shadow: var(--shadow); }
.lp-arch__branch { margin: 6px 0 0 18px; padding-left: 20px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.lp-arch__item { position: relative; }
.lp-arch__node, .lp-arch__child { position: relative; display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 9px 13px; font-weight: 650; }
.lp-arch__node::before, .lp-arch__child::before { content: ''; position: absolute; left: -22px; top: 50%; width: 20px; height: 2px; background: var(--border); }
.lp-arch__child { margin: 8px 0 0 26px; border-color: color-mix(in srgb, #e11d48 40%, var(--border)); color: #e11d48; }
.lp-arch__child::before { left: -28px; width: 26px; background: color-mix(in srgb, #e11d48 50%, var(--border)); }
.lp-arch__e { font-size: 18px; line-height: 1; }
.lp-arch__lbl { font-size: 14px; }
.lp-arch__demotag { margin-left: auto; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 99px; background: #e11d48; color: #fff; }
.lp-tcard__demos { display: flex; gap: 8px; }
.lp-tcard__demos .btn { flex: 1; }
.lp-pow { display: inline-block; margin-left: 10px; padding: 4px 12px; border-radius: 99px; background: linear-gradient(135deg, #f43f5e, #be123c); color: #fff; font-size: 12px; font-weight: 800; vertical-align: middle; }
.lp-agt__brand { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* Landing v2 — clickable examples + compact features */
.lp-excard { cursor: pointer; text-align: center; width: 100%; font: inherit; transition: transform .12s ease, border-color .12s ease; }
.lp-excard:hover { transform: translateY(-2px); border-color: var(--primary); }
.lp-excard__go { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 800; color: var(--primary); }
.lp-feats--compact { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.lp-feats--compact .lp-feat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 12px; }
.lp-feats--compact .lp-feat__ic svg { width: 24px; height: 24px; color: var(--primary); }
.lp-feats--compact .lp-feat__t { margin: 0; font-weight: 700; font-size: 14px; }

/* ==========================================================================
   DESIGN SYSTEM v2 — premium SaaS (Adyen · Stripe · Linear · Notion · Framer)
   Μόνο design· καμία αλλαγή λειτουργικότητας.
   ========================================================================== */

/* ---- Τυπογραφία & ρυθμός ---- */
body { font-size: 15px; line-height: 1.6; letter-spacing: -.006em; }
h1, h2, h3 { letter-spacing: -.022em; }
.view { gap: 24px; }
.view > .panel, .view > .card, .view > section { margin: 0; }

/* ---- Κουμπιά: μεγαλύτερα, καθαρά, μονόχρωμο primary ---- */
.btn { padding: 13px 20px; border-radius: 12px; border-width: 1px; font-weight: 600; font-size: 15px; transition: transform .08s ease, background .15s ease, box-shadow .15s ease; }
.btn--primary { background: var(--ink); color: var(--ink-ink); border-color: var(--ink); box-shadow: none; }
.btn--primary:hover { filter: none; background: color-mix(in srgb, var(--ink) 86%, #fff); }
[data-theme="dark"] .btn--primary:hover { background: color-mix(in srgb, var(--ink) 86%, #000); }
.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: var(--shadow); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--sm { padding: 9px 15px; font-size: 13.5px; border-radius: 10px; }

/* ---- Κάρτες & panels: λιγότερα borders, περισσότερος αέρας ---- */
.card { border: none; box-shadow: var(--shadow); border-radius: var(--radius); padding: 22px; gap: 10px; }
.card--muted, .card--quiet { box-shadow: none; background: var(--surface-2); }
.card--unread { border-left: 3px solid var(--primary); }
.card__title { font-size: 17px; font-weight: 700; }
.panel { border: none; box-shadow: var(--shadow); border-radius: var(--radius); padding: 20px 22px; gap: 10px; }
.panel--quiet { box-shadow: none; background: transparent; border: none; padding: 4px 0; }
.panel__title { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.filechip { border: none; background: var(--surface-2); }

/* ---- Στατιστικά: minimal, χωρίς κουτάκια/εικονίδια ---- */
.stats { gap: 8px 28px; }
.stat { background: transparent !important; border: none !important; box-shadow: none !important; padding: 4px 0 !important; gap: 4px; }
/* Μόνο landing — dashboards/super-admin κρατούν εικονίδια */
.lp--v3 .stat__icon { display: none !important; }
.stat__value { font-size: 30px; font-weight: 760; letter-spacing: -.025em; }
.stat__label { font-size: 13px; color: var(--muted); }
button.stat:hover, .ministat:hover { transform: none !important; box-shadow: none !important; border-color: transparent !important; }
button.stat { position: relative; }

/* ---- Badges: λιγότερα χρώματα, πιο διακριτικά ---- */
.badge { font-size: 11px; font-weight: 600; padding: 3px 9px; background: var(--surface-2); color: var(--muted); }
.badge--unread, .badge--open, .badge--admin, .badge--owner { background: var(--surface-2); color: var(--text); }
.badge--ok { background: color-mix(in srgb, var(--yes) 12%, transparent); color: var(--yes); }

/* ---- Identity hero: πιο premium, απαλότερο ---- */
.ihero { border-radius: 22px; padding: 26px 24px; box-shadow: 0 10px 34px rgba(16, 24, 40, .12); }
.ihero__badge { background: rgba(255, 255, 255, .16); border-radius: 18px; }
.ihero__kicker { font-size: 11px; opacity: .9; }
.ihero__title { font-size: 24px; letter-spacing: -.025em; }
.ihero__sub { opacity: .95; }
.ipanel { box-shadow: var(--shadow); }
.ipanel__chip { background: var(--surface-2); border: none; }
.ipanel__chip:hover { background: color-mix(in srgb, var(--primary) 10%, var(--surface-2)); }

/* ---- Community header: flatter ---- */
.comm-hd { border: none; box-shadow: var(--shadow); }

/* ==========================================================================
   LANDING v2 — premium spacing + illustrated template cards
   ========================================================================== */
.lp-sec { margin-top: 76px; }
.lp-hero { padding-top: 64px; }
.lp-hero__title { letter-spacing: -.035em; }
.lp-h2 { font-size: clamp(24px, 5.4vw, 34px); letter-spacing: -.03em; margin-bottom: 22px; }
.lp-eyebrow { color: var(--muted); letter-spacing: .14em; }

/* Template cards: μεγαλύτερες, illustrated medallion, hover lift */
.lp-tpl { gap: 18px; margin-top: 22px; }
.lp-tcard { border: none; box-shadow: var(--shadow); border-radius: 22px; padding: 26px 24px; gap: 12px; transition: transform .16s ease, box-shadow .16s ease; }
.lp-tcard:hover { transform: translateY(-4px); box-shadow: 0 22px 56px rgba(16, 24, 40, .12); }
.lp-tcard__e { font-size: 28px; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 18px; margin-bottom: 6px; box-shadow: inset 0 0 0 1px rgba(16,24,40,.05); }
.lp-tcard:nth-child(1) .lp-tcard__e { background: linear-gradient(135deg, #e8f0fe, #d6e4fd); }
.lp-tcard:nth-child(2) .lp-tcard__e { background: linear-gradient(135deg, #fff1e6, #ffe0cc); }
.lp-tcard:nth-child(3) .lp-tcard__e { background: linear-gradient(135deg, #ffe9ee, #ffd4df); }
.lp-tcard:nth-child(4) .lp-tcard__e { background: linear-gradient(135deg, #f7e8fe, #ecd4fd); }
.lp-tcard:nth-child(5) .lp-tcard__e { background: linear-gradient(135deg, #e6f6ef, #d0efe0); }
.lp-tcard:nth-child(6) .lp-tcard__e { background: linear-gradient(135deg, #e3f4f1, #cfece6); }
[data-theme="dark"] .lp-tcard__e { background: var(--surface-2) !important; }
.lp-tcard__t { font-size: 18px; font-weight: 750; }
.lp-tcard__d { font-size: 14px; }
.lp-tag { background: var(--surface-2); color: var(--muted); font-weight: 600; }

/* Example cards: flatter premium */
.lp-ex { gap: 16px; }
.lp-excard { border: none; box-shadow: var(--shadow); border-radius: 20px; padding: 24px; }
.lp-excard__e { font-size: 30px; }

/* Pricing & testimonials: λιγότερα borders */
.lp-plan { border: none; box-shadow: var(--shadow); border-radius: 20px; padding: 26px 22px; }
.lp-plan--hl { box-shadow: 0 18px 50px rgba(16, 24, 40, .14); }
.lp-testi__card { border: none; box-shadow: var(--shadow); border-radius: 18px; }
.lp-final { border-radius: 26px; }

/* Compact features: flatter, no boxes */
.lp-feats--compact .lp-feat { background: transparent; border: none; box-shadow: none; }
.lp-feats--compact .lp-feat__ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--surface-2); }

/* Auth segmented toggle (Email / Κινητό) */
.auth__seg { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 12px; margin-bottom: 14px; border: 1px solid var(--border); }
.auth__segbtn {
  flex: 1; padding: 9px 12px; border: 1.5px solid transparent; background: transparent;
  border-radius: 9px; font-weight: 650; font-size: 14px; color: var(--muted);
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.auth__segbtn.is-active { font-weight: 800; box-shadow: var(--shadow); }
.auth__segbtn--admin.is-active {
  background: color-mix(in srgb, var(--accent-2) 24%, var(--surface));
  color: #d4a017;
  border-color: color-mix(in srgb, var(--accent-2) 65%, transparent);
}
[data-theme="dark"] .auth__segbtn--admin.is-active { color: var(--accent-2); }
.auth__segbtn--member.is-active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
}
.auth__segbtn--coach.is-active {
  background: color-mix(in srgb, var(--ds-blue, #3b82f6) 20%, var(--surface));
  color: var(--ds-blue, #3b82f6);
  border-color: color-mix(in srgb, var(--ds-blue, #3b82f6) 55%, transparent);
}
.auth__segbtn--login.is-active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
}
.auth__segbtn--register.is-active {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.auth__segbtn--athlete.is-active {
  background: color-mix(in srgb, var(--ds-green, #16a34a) 18%, var(--surface));
  color: var(--ds-green, #16a34a);
  border-color: color-mix(in srgb, var(--ds-green, #16a34a) 55%, transparent);
}

/* Phase 1 — product-scoped entry (subdomains) */
.auth__product {
  display: inline-block; margin: 0 auto 10px; padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.auth__product--coach {
  background: color-mix(in srgb, var(--ds-blue, #3b82f6) 16%, var(--surface));
  color: var(--ds-blue, #3b82f6);
  border-color: color-mix(in srgb, var(--ds-blue, #3b82f6) 45%, transparent);
}
.auth__crossnotice {
  margin: 4px 0 14px; padding: 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}
.auth__crossnotice-t { margin: 0 0 2px; font-weight: 800; color: var(--text); }

/* Phase 2 — root "Σύνδεση" product chooser (modal) */
.auth-chooser { display: grid; gap: 10px; }
.auth-chooser__opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  min-height: 44px; padding: 14px 16px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.auth-chooser__opt:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.auth-chooser__opt--associations:hover { border-color: color-mix(in srgb, var(--accent-2, #d4a017) 55%, transparent); }
.auth-chooser__opt--coach:hover { border-color: color-mix(in srgb, var(--ds-blue, #3b82f6) 55%, transparent); }
.auth-chooser__icon { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.auth-chooser__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.auth-chooser__title { font-weight: 850; font-size: 15.5px; color: var(--text); }
.auth-chooser__sub { font-size: 12px; color: var(--muted); }
.auth-chooser__arrow { font-size: 18px; font-weight: 800; color: var(--muted); flex: 0 0 auto; }

/* ==========================================================================
   Phase 2 — Central product landing (orghub.gr)  [.plp]
   One brand, two products: Associations (gold) · Coach (blue)
   ========================================================================== */
.plp { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg, var(--surface-2)); }
.plp * { box-sizing: border-box; }

/* Header */
.plp-nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border); }
.plp-nav__inner { max-width: 1080px; margin: 0 auto; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); display: flex; align-items: center; gap: 14px; }
.plp-nav__brand { display: flex; align-items: center; gap: 9px; background: none; border: 0; cursor: pointer; padding: 4px; }
.plp-nav__logo { width: 30px; height: 30px; border-radius: 8px; }
.plp-nav__name { font-weight: 850; font-size: 18px; color: var(--text); letter-spacing: -.01em; }
.plp-nav__links { display: flex; gap: 4px; margin-left: 10px; flex: 1 1 auto; }
.plp-nav__link { background: none; border: 0; cursor: pointer; color: var(--muted); font-weight: 650; font-size: 14px; padding: 10px 12px; border-radius: 9px; min-height: 44px; }
.plp-nav__link:hover { color: var(--text); background: var(--surface-2); }
.plp-nav__actions { margin-left: auto; display: flex; gap: 8px; }

/* Buttons */
.plp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 20px; border-radius: 12px; font-weight: 800; font-size: 15px; cursor: pointer; border: 1.5px solid transparent; transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease; }
.plp-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.plp-btn--sm { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.plp-btn--lg { min-height: 52px; padding: 14px 26px; font-size: 16px; }
.plp-btn--block { width: 100%; }
.plp-btn--ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.plp-btn--assoc { background: linear-gradient(135deg, #e0b34a, #c9971f); color: #3a2c05; border-color: transparent; }
.plp-btn--coach { background: linear-gradient(135deg, #4f8ef7, #2f6fe0); color: #fff; border-color: transparent; }

/* Hero */
.plp-hero { padding: 56px 16px 34px; }
.plp-hero__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.plp-hero__eyebrow { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); background: var(--primary-soft, color-mix(in srgb, var(--primary) 12%, transparent)); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }
.plp-hero__title { font-size: clamp(28px, 6vw, 44px); line-height: 1.08; font-weight: 880; letter-spacing: -.02em; color: var(--text); margin: 0 0 14px; }
.plp-hero__sub { font-size: clamp(15px, 2.4vw, 18px); line-height: 1.5; color: var(--muted); margin: 0 auto 24px; max-width: 560px; }
.plp-hero__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.plp-hero__scroll { display: inline-block; margin-top: 22px; background: none; border: 0; cursor: pointer; color: var(--muted); font-weight: 650; font-size: 13.5px; min-height: 44px; }

/* Products */
.plp-products { padding: 20px 16px 48px; }
.plp-products__head { max-width: 760px; margin: 0 auto 22px; text-align: center; }
.plp-products__h { font-size: clamp(22px, 4vw, 28px); font-weight: 860; color: var(--text); margin: 0 0 6px; }
.plp-products__sub { font-size: 14.5px; color: var(--muted); margin: 0; }
.plp-products__grid { max-width: 940px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.plp-card { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px; border-radius: 20px; background: var(--surface); border: 1.5px solid var(--border); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.plp-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; }
.plp-card--assoc::before { background: linear-gradient(90deg, #e0b34a, #c9971f); }
.plp-card--coach::before { background: linear-gradient(90deg, #4f8ef7, #2f6fe0); }
.plp-card__badge { align-self: flex-start; font-size: 11.5px; font-weight: 850; letter-spacing: .07em; padding: 5px 11px; border-radius: 999px; }
.plp-card--assoc .plp-card__badge { color: #9a7409; background: color-mix(in srgb, #e0b34a 22%, var(--surface)); }
.plp-card--coach .plp-card__badge { color: #2f6fe0; background: color-mix(in srgb, #4f8ef7 18%, var(--surface)); }
.plp-card__title { font-size: 20px; font-weight: 850; color: var(--text); margin: 2px 0 0; line-height: 1.2; }
.plp-card__sub { font-size: 13.5px; color: var(--muted); margin: 0; }
.plp-card__feats { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 8px; }
.plp-card__feat { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--text); }
.plp-card__tick { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 12px; font-weight: 800; }
.plp-card--assoc .plp-card__tick { color: #9a7409; background: color-mix(in srgb, #e0b34a 25%, transparent); }
.plp-card--coach .plp-card__tick { color: #2f6fe0; background: color-mix(in srgb, #4f8ef7 20%, transparent); }
.plp-card__cta, .plp-card .plp-btn { margin-top: auto; }
.plp-card__url { text-align: center; font-size: 12px; color: var(--muted); font-weight: 650; }

/* Footer — calm, organized in link columns */
.plp-foot { margin-top: auto; border-top: 1px solid var(--border); background: var(--surface); }
.plp-foot__inner { max-width: 1080px; margin: 0 auto; padding: 44px 24px 30px; display: grid; grid-template-columns: 1.5fr 3fr; gap: 40px; align-items: start; }
.plp-foot__brand { display: flex; flex-direction: column; gap: 12px; }
.plp-foot__brandrow { display: flex; align-items: center; gap: 10px; }
.plp-foot__logo { width: 30px; height: 30px; border-radius: 8px; }
.plp-foot__name { font-weight: 850; font-size: 20px; color: var(--text); letter-spacing: -.01em; }
.plp-foot__tag { font-size: 13.5px; color: var(--muted); margin: 0; max-width: 280px; line-height: 1.55; }
.plp-foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.plp-foot__col { display: flex; flex-direction: column; gap: 11px; }
.plp-foot__coltitle { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 3px; opacity: .75; }
.plp-foot__link { width: fit-content; font-size: 14px; color: var(--text); text-decoration: none; transition: color .12s ease; }
.plp-foot__link:hover { color: var(--primary); }
.plp-foot__link--muted { color: var(--muted); font-size: 13px; }
.plp-foot__bottom { max-width: 1080px; margin: 0 auto; padding: 16px 24px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); }
.plp-foot__copy { font-size: 12.5px; color: var(--muted); margin: 0; }
.plp-foot__bottomright { display: flex; align-items: center; gap: 18px; }
.plp-foot__badge { font-size: 12.5px; color: var(--muted); text-decoration: none; }
.plp-foot__badge:hover { color: var(--text); }

@media (max-width: 720px) {
  .plp-nav__links { display: none; }
  .plp-products__grid { grid-template-columns: 1fr; }
  .plp-hero { padding: 40px 16px 26px; }
  .plp-hero__actions .plp-btn { flex: 1 1 auto; }
  .plp-foot__inner { grid-template-columns: 1fr; gap: 28px; padding: 32px 20px 22px; }
  .plp-foot__cols { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .plp-foot__bottom { flex-direction: column; align-items: flex-start; gap: 10px; padding-left: 20px; padding-right: 20px; }
}

/* Plan picker — εγγραφή διαχειριστή */
.auth__card--plans { max-width: 520px; }
.plan-picker-field { margin-bottom: 14px; }
.plan-picker__hint { margin: 0 0 10px; line-height: 1.45; }
.plan-picker__grid { display: grid; gap: 8px; margin-bottom: 12px; }
.plan-picker__card {
  position: relative; display: grid; gap: 2px; width: 100%; text-align: left;
  padding: 12px 14px; border: 2px solid var(--border); border-radius: 12px;
  background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.plan-picker__card:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.plan-picker__card.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}
.plan-picker__card--popular { padding-top: 18px; }
.plan-picker__badge {
  position: absolute; top: -9px; right: 12px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .3px; padding: 3px 8px; border-radius: 99px;
}
.plan-picker__name { font-size: 16px; font-weight: 800; color: var(--text); }
.plan-picker__price { font-size: 14px; font-weight: 700; color: var(--primary); }
.plan-picker__blurb { font-size: 12px; color: var(--muted); line-height: 1.35; }
.plan-picker__features {
  padding: 10px 12px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--border);
}
.plan-picker__feats-title { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.plan-picker__feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.plan-picker__feats li { font-size: 12.5px; line-height: 1.35; color: var(--text); padding-left: 0; }
.plan-picker__feats li::before { content: none; }

/* ==========================================================================
   HOMEPAGE PREMIUM REDESIGN v3 — hero visual, illustrated cards, Stripe pricing
   ========================================================================== */
.btn--lg { padding: 16px 26px; font-size: 16px; border-radius: 13px; }

/* ---- HERO XL (2 στήλες: copy + device mockup) ---- */
.lp-hero--xl { max-width: 1100px; margin: 0 auto; padding: 60px 20px 12px; display: grid; gap: 40px; text-align: center; }
.lp-hero--xl .lp-hero__pill { display: inline-block; background: var(--surface-2); color: var(--muted); border-radius: 99px; padding: 7px 16px; font-size: 13px; font-weight: 650; letter-spacing: 0; }
.lp-hero--xl .lp-hero__title { font-size: clamp(34px, 7vw, 60px); letter-spacing: -.04em; line-height: 1.02; margin: 18px 0 16px; }
.lp-hero--xl .lp-hero__sub { font-size: clamp(16px, 2.4vw, 20px); max-width: 600px; margin: 0 auto 26px; }
.lp-hero--xl .lp-hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- Device mockups ---- */
.lp-mock { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 0; min-height: 300px; }
.lp-dev { position: relative; background: var(--surface); border-radius: 18px; box-shadow: 0 30px 70px rgba(16,24,40,.18); overflow: hidden; border: 1px solid var(--border); }
.lp-dev__tag { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 700; color: rgba(255,255,255,.9); text-transform: uppercase; letter-spacing: .08em; z-index: 2; }
.lp-dev--desktop { width: min(420px, 70vw); aspect-ratio: 16/10; border-radius: 16px; z-index: 1; }
.lp-dev--tablet { width: 150px; aspect-ratio: 3/4; margin-left: -56px; margin-bottom: 14px; transform: rotate(3deg); z-index: 2; display: none; }
.lp-dev--phone { width: 116px; aspect-ratio: 9/19; margin-right: -46px; margin-bottom: 20px; transform: rotate(-4deg); border-radius: 22px; z-index: 3; }
@media (min-width: 760px) { .lp-dev--tablet { display: block; } }

.lp-scr { width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--surface); }
.lp-scr__hero { padding: 14px 14px 18px; display: flex; align-items: center; gap: 9px; color: #fff; }
.lp-scr__emoji { font-size: 20px; width: 34px; height: 34px; display: grid; place-items: center; background: rgba(255,255,255,.2); border-radius: 11px; flex: none; }
.lp-scr__ht { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lp-scr__kick { font-size: 11px; font-weight: 800; opacity: .95; white-space: nowrap; }
.lp-scr__bar { width: 62px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.55); }
.lp-scr__body { padding: 12px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.lp-scr__card { background: var(--surface-2); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.lp-scr__card span { height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--muted) 28%, transparent); }
.lp-scr__card span:first-child { width: 70%; }
.lp-scr__card span:last-child { width: 45%; }
.lp-scr__chips { display: flex; gap: 6px; }
.lp-scr__chips i { width: 30px; height: 16px; border-radius: 99px; background: var(--surface-2); }

/* ---- Template cards: illustrated «screenshot» header ---- */
.lp-tcard { padding: 0 !important; overflow: hidden; gap: 0 !important; }
.lp-tcard__visual { position: relative; padding: 22px 22px 26px; display: flex; align-items: flex-start; gap: 14px; min-height: 120px; }
.lp-tcard__visual .lp-tcard__e { background: rgba(255,255,255,.22) !important; color: #fff; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; box-shadow: none !important; flex: none; margin: 0 !important; }
.lp-tcard__skel { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; flex: 1; }
.lp-tcard__skel span { height: 8px; border-radius: 5px; background: rgba(255,255,255,.45); }
.lp-tcard__skel span:nth-child(1) { width: 80%; }
.lp-tcard__skel span:nth-child(2) { width: 55%; }
.lp-tcard__skel span:nth-child(3) { width: 65%; background: rgba(255,255,255,.3); }
.lp-tcard__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
[data-theme="dark"] .lp-tcard__visual .lp-tcard__e { background: rgba(255,255,255,.2) !important; }

/* ---- Examples: dual demo buttons ---- */
.lp-excard { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lp-excard__btns { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 10px; }
.lp-excard .lp-pow { margin: 2px 0 0; }

/* ---- Pricing: πιο premium (Stripe-like) ---- */
.lp-pricing { gap: 20px; }
.lp-plan { padding: 30px 26px; gap: 14px; }
.lp-plan__name { font-size: 15px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.lp-plan__amt { font-size: 40px; font-weight: 820; letter-spacing: -.03em; }
.lp-plan__feats { gap: 9px; margin: 4px 0 8px; }
.lp-plan--hl { transform: translateY(-6px); }

/* ---- Testimonials: 3 σταθερές κάρτες ---- */
.lp-testi__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .lp-testi__grid { grid-template-columns: repeat(3, 1fr); } }
.lp-testi__card { padding: 26px 24px; }
.lp-testi__q { font-size: 16px; line-height: 1.55; margin: 0 0 16px; }

/* ==========================================================================
   RACE COMMUNITY — hero, κάρτα αθλητή, badges (community experience)
   ========================================================================== */
.rc-wrap { display: grid; gap: 14px; }
.rc-hero { color: #fff; border-radius: 22px; padding: 22px; background: linear-gradient(140deg, var(--from), var(--to)); box-shadow: 0 16px 40px rgba(16,24,40,.18); display: grid; gap: 18px; }
.rc-hero__top { display: flex; align-items: center; gap: 14px; }
.rc-hero__mark { width: 58px; height: 58px; display: grid; place-items: center; background: rgba(255,255,255,.18); border-radius: 18px; flex: none; overflow: hidden; }
.rc-hero__mark img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.rc-hero__mark--emoji { font-size: 32px; }
.rc-hero__emoji { font-size: 32px; width: 58px; height: 58px; display: grid; place-items: center; background: rgba(255,255,255,.18); border-radius: 18px; flex: none; }
.rc-hero__title { margin: 0; font-size: 23px; font-weight: 820; letter-spacing: -.02em; line-height: 1.1; }
.rc-hero__tag { margin: 3px 0 0; font-size: 13.5px; font-weight: 650; opacity: .92; text-transform: uppercase; letter-spacing: .06em; }
.rc-hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: rgba(255,255,255,.14); border-radius: 16px; padding: 14px 8px; }
.rc-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.rc-stat__v { font-size: 26px; font-weight: 820; line-height: 1; letter-spacing: -.02em; }
.rc-stat__l { font-size: 11.5px; opacity: .9; line-height: 1.2; }
.rc-hero__cta { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-cta { flex: 1; min-width: 120px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 12px; border-radius: 13px; border: none; background: rgba(255,255,255,.95); color: #16191d; font-weight: 700; font-size: 13.5px; cursor: pointer; text-decoration: none; font-family: inherit; }
.rc-cta:hover { background: #fff; }
.rc-cta svg { width: 16px; height: 16px; }

.rc-athlete { display: grid; gap: 14px; }
.rc-athlete__row { display: flex; align-items: center; gap: 12px; }
.rc-athlete__info { flex: 1; min-width: 0; }
.rc-athlete__name { margin: 0; font-weight: 780; font-size: 17px; }
.rc-athlete__since { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.rc-athlete__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 12px 0; }
.rc-am { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rc-am__v { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.rc-am__l { font-size: 12px; color: var(--muted); }
.rc-athlete__bt { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 99px; background: var(--surface-2); font-size: 13px; font-weight: 650; }
.badge-chip__e { font-size: 16px; line-height: 1; }
.badge-chip--locked { opacity: .42; filter: grayscale(1); }
.badge-chip--earned { cursor: pointer; border: 0; font-family: inherit; background: color-mix(in srgb, var(--primary) 14%, var(--surface-2)); }
.badge-chip--earned:hover { background: color-mix(in srgb, var(--primary) 22%, var(--surface-2)); }
button.ap-badge { cursor: pointer; width: 100%; text-align: left; font-family: inherit; }
button.ap-badge.is-earned:hover { border-color: var(--primary); }
.rc-profile-badges { margin-top: 2px; }

/* ==========================================================================
   ROUTES HUB — κάρτες διαδρομών, υψομετρικό προφίλ, POI
   ========================================================================== */
.routes { display: grid; gap: 16px; }
.route-card { padding: 0 !important; overflow: visible !important; gap: 0 !important; }
.route-card__img { height: 150px; background-size: cover; background-position: center; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.route-card__img--ph { display: grid; place-items: center; font-size: 44px; background: var(--surface-2); }
.route-card__body { padding: 18px 20px 20px; display: grid; gap: 12px; }
.route-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.route-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.route-stat { display: flex; flex-direction: column; gap: 2px; }
.route-stat__v { font-size: 18px; font-weight: 800; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 6px; }
.route-stat__l { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.route-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.route-elev { color: var(--primary); background: var(--surface-2); border-radius: 12px; padding: 8px; }
.route-elev__svg { width: 100%; height: auto; min-height: 70px; display: block; }
.route-elev__legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 11px; color: var(--muted); }
.route-elev__key { display: inline-flex; align-items: center; gap: 5px; }
.route-elev__key::before { content: ''; width: 14px; height: 8px; border-radius: 3px; }
.route-elev__key--climb::before { background: rgba(20,184,166,0.35); }
.route-elev__key--flat::before { background: rgba(148,163,184,0.25); }
.route-elev__key--desc::before { background: rgba(59,130,246,0.3); }

.atv__body { display: flex; flex-direction: column; gap: 14px; }
.atv__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.atv__stat { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.atv__statK { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.atv__statV { font-size: 13px; font-weight: 800; }
.atv__map { height: 320px; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.atv__elev { color: var(--primary); background: var(--surface-2); border-radius: 12px; padding: 8px; }
.atv__elevSvg { width: 100%; height: auto; min-height: 90px; display: block; }
@media (max-width: 640px) {
  .atv__stats { grid-template-columns: repeat(2, 1fr); }
  .atv__map { height: 240px; }
}

/* Coach Athlete Detail view (.cad__*) -- UX audit Wave 3 */
.cad__stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cad__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); font-size: 13px; font-weight: 700; }
.cad__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cad__h { font-size: 14px; font-weight: 800; margin: 20px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.cad__h:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.route-elev__range { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 11px; color: var(--muted); margin-top: 8px; }
.route-elev__h { margin: 14px 0 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.route-elev__details { display: grid; gap: 2px; font-size: 12px; margin-top: 4px; min-width: 720px; width: max-content; max-width: none; }
.route-elev__row { display: grid; grid-template-columns: minmax(88px,1.2fr) 0.7fr 0.8fr 0.8fr 0.9fr 0.8fr 0.6fr; gap: 6px; align-items: center; padding: 7px 8px; border-radius: 8px; background: var(--surface-2); min-width: 720px; }
.route-elev__row--head { background: transparent; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding-bottom: 2px; }
.route-elev__row--climb { background: color-mix(in srgb, #14b8a6 6%, var(--surface-2)); }
.route-elev__row--desc { background: color-mix(in srgb, #3b82f6 6%, var(--surface-2)); }
.route-elev__km { font-weight: 650; line-height: 1.25; }
.route-elev__grade { font-weight: 700; font-variant-numeric: tabular-nums; }

.route-analysis { display: grid; gap: 12px; }
.route-analysis__summary { margin: 0; padding: 12px 14px; background: var(--surface-2); border-radius: 12px; font-size: 13px; line-height: 1.55; color: var(--text); }
.route-analysis__narrative { background: var(--surface-2); border-radius: 14px; padding: 16px 18px; line-height: 1.6; font-size: 13.5px; }
.route-analysis__actions { display: flex; justify-content: flex-end; }
.route-analysis__h { margin: 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.route-analysis__climbs { display: grid; gap: 8px; }
.route-analysis__climb { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid var(--border); }
.route-analysis__climb--easy { border-left-color: #22c55e; }
.route-analysis__climb--moderate { border-left-color: #f59e0b; }
.route-analysis__climb--steep { border-left-color: #14b8a6; }
.route-analysis__climb--extreme { border-left-color: #7c3aed; }
.route-analysis__climb-rank { font-size: 18px; font-weight: 850; color: var(--muted); min-width: 28px; }
.route-analysis__climb-title { margin: 0; font-weight: 700; font-size: 14px; }
.route-analysis__climb-meta { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.route-analysis__table-wrap { display: grid; gap: 2px; font-size: 12px; min-width: 680px; width: max-content; max-width: none; }
.route-analysis__row { display: grid; grid-template-columns: minmax(100px,1.4fr) 0.6fr 0.8fr 0.7fr 0.6fr 1fr; gap: 6px; align-items: center; padding: 7px 8px; border-radius: 8px; background: var(--surface-2); min-width: 680px; }
.route-analysis__row--head { background: transparent; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding-bottom: 2px; }
.route-analysis__row--climb { background: color-mix(in srgb, #14b8a6 5%, var(--surface-2)); }
.route-analysis__row--desc { background: color-mix(in srgb, #3b82f6 5%, var(--surface-2)); }
.route-analysis__seg-label { font-weight: 650; line-height: 1.25; }
.route-analysis__grade { font-weight: 700; font-variant-numeric: tabular-nums; }
.route-analysis__char--steep, .route-analysis__char--extreme { color: #14b8a6; font-weight: 700; }
.route-analysis__char--moderate { color: #ea580c; }
.route-poi__h { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.route-poi__h svg { width: 15px; height: 15px; }
.route-poi__list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; line-height: 1.5; }

/* ==========================================================================
   RACE LIVE COMMUNITY — countdown, race calendar, leaderboards, social proof
   ========================================================================== */
.rc-live { display: grid; gap: 14px; margin-top: 4px; }
.rc-sec__h { margin: 0 0 12px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

.rc-count { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.rc-count__kick { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rc-count__title { margin: 4px 0 2px; font-size: 16px; font-weight: 760; line-height: 1.2; }
.rc-count__date { margin: 0; font-size: 13px; color: var(--muted); }
.rc-count__num { display: flex; flex-direction: column; align-items: center; flex: none; background: var(--ink); color: var(--ink-ink); border-radius: 16px; padding: 12px 18px; }
.rc-count__d { font-size: 30px; font-weight: 850; line-height: 1; letter-spacing: -.02em; }
.rc-count__u { font-size: 11px; opacity: .85; }

.rc-cal__list { display: grid; gap: 8px; }
.rc-cal__row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface-2); border: none; border-radius: 13px; padding: 10px 12px; cursor: pointer; }
.rc-cal__row:hover { background: color-mix(in srgb, var(--primary) 8%, var(--surface-2)); }
.rc-cal__date { display: flex; flex-direction: column; align-items: center; min-width: 42px; }
.rc-cal__day { font-size: 20px; font-weight: 820; line-height: 1; }
.rc-cal__mon { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.rc-cal__t { margin: 0; font-weight: 650; font-size: 14.5px; }
.rc-cal__cat { font-size: 12px; color: var(--muted); }

.rc-boards { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 560px) { .rc-boards { grid-template-columns: 1fr 1fr; } }
.rc-board__h { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.rc-board__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rc-board__row { display: flex; align-items: center; gap: 10px; }
.rc-board__rank { width: 24px; text-align: center; font-weight: 800; font-size: 13px; color: var(--muted); flex: none; }
.rc-board__rank--top { font-size: 16px; }
.rc-board__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-board__c { font-size: 12.5px; color: var(--muted); font-weight: 600; }

.rc-newmem__row { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar--sm { width: 38px; height: 38px; font-size: 14px; }

/* ---- Activity feed (Strava-style stream) ---- */
.rc-act__list { display: grid; gap: 2px; }
.rc-act__row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: none; padding: 9px 4px; border-radius: 10px; cursor: default; }
.rc-act__row--btn { cursor: pointer; }
.rc-act__row--btn:hover { background: var(--surface-2); }
.rc-act__row + .rc-act__row { border-top: 1px solid var(--border); }
.rc-act__e { font-size: 18px; width: 36px; height: 36px; display: grid; place-items: center; background: var(--surface-2); border-radius: 50%; flex: none; }
.rc-act__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rc-act__t { font-size: 14px; font-weight: 600; line-height: 1.35; }
.rc-act__ago { font-size: 12px; color: var(--muted); }

/* ==========================================================================
   MEMBERPLANET-STYLE LANDING (lp--mp)
   ========================================================================== */
.lp--mp {
  color-scheme: light;
  /* Reset theme tokens — landing is ALWAYS light (conversion page) */
  --text: #0f172a;
  --muted: #64748b;
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --border: #e2e8f0;
  background: #f8fafc;
  color: #0f172a;
}
.lp--mp .lp-nav { max-width: none; margin: 0; padding: 14px clamp(16px, 4vw, 40px); background: #fff; border-bottom: 1px solid #e2e8f0; backdrop-filter: none; }
.lp--mp .lp-nav__brand span { color: #0f172a; }
.lp--mp .lp-nav__link { color: #475569; }
.lp--mp .lp-nav__link:hover { color: #0f172a; background: #f1f5f9; }
.lp--mp .lp-sec { max-width: 1100px; }

/* Hero */
.lp-mp-hero { background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%); padding: clamp(48px, 8vw, 88px) clamp(16px, 4vw, 40px) clamp(40px, 6vw, 72px); }
.lp-mp-hero__inner { max-width: 1140px; margin: 0 auto; display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .lp-mp-hero__inner { grid-template-columns: 1fr 1.05fr; gap: 56px; } }
.lp-mp-hero__copy { text-align: center; }
@media (min-width: 900px) { .lp-mp-hero__copy { text-align: left; } }
.lp-mp-hero__title { margin: 0 0 16px; font-size: clamp(36px, 6vw, 58px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; color: #0f172a; }
.lp-mp-hero__sub { margin: 0 0 28px; font-size: clamp(17px, 2.5vw, 21px); line-height: 1.5; color: #475569; max-width: 520px; }
@media (min-width: 900px) { .lp-mp-hero__sub { margin-left: 0; margin-right: 0; } }
.lp-mp-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
@media (min-width: 900px) { .lp-mp-hero__cta { justify-content: flex-start; } }
.lp-mp-hero__cta .btn { min-width: 170px; border-radius: 999px; font-weight: 700; }
.lp-mp-hero__note { margin: 16px 0 0; font-size: 13px; color: #64748b; }
.lp-mp-hero__eyebrow { display: inline-block; margin-bottom: 14px; padding: 6px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; background: rgba(37,99,235,.08); color: #1d4ed8; border: 1px solid rgba(37,99,235,.15); }
.lp-mp-hero__demo { font-weight: 700; }
.lp-mp-hero__trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin-top: 20px; }
@media (min-width: 900px) { .lp-mp-hero__trust { justify-content: flex-start; } }
.lp-mp-hero__stars { color: #f59e0b; font-size: 14px; letter-spacing: 1px; }
.lp-mp-hero__trustItem { font-size: 13px; font-weight: 650; color: #475569; }
.lp-mp-hero__trustSep { color: #cbd5e1; font-weight: 400; }

/* Nav conversion-focused */
.lp--mp .lp-nav__login { display: inline-flex; align-items: center; background: transparent; border: none; cursor: pointer; color: #64748b; font-weight: 650; font-size: 14px; padding: 8px 12px; white-space: nowrap; font-family: inherit; transition: color .2s ease; }
.lp--mp .lp-nav__login:hover { color: #0f172a; }
.lp--mp .lp-nav__cta { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px; border: none; background: var(--primary, #0f8a72); color: #fff; font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap; font-family: inherit; box-shadow: 0 2px 8px rgba(15,138,114,.25); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.lp--mp .lp-nav__cta:hover { background: #0d7a65; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15,138,114,.35); }
@media (max-width: 480px) {
  .lp--mp .lp-nav__login { font-size: 13px; padding: 7px 8px; }
  .lp--mp .lp-nav__cta { font-size: 12.5px; padding: 8px 14px; }
}

/* Customer logo bar — CSS marks (no external images) */
.lp-logos { padding: 28px clamp(16px, 4vw, 40px) 32px; background: #fff; border-bottom: 1px solid #e2e8f0; }
.lp-logos__label { margin: 0 0 18px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #94a3b8; }
.lp-logos__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; max-width: 1100px; margin: 0 auto; }
.lp-logos__item { display: inline-flex; align-items: center; padding: 0; border: none; background: transparent; box-shadow: none; }
.lp-logomark { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 999px; background: var(--lm-bg, #f8fafc); border: 1px solid color-mix(in srgb, var(--lm-color) 18%, #e2e8f0); max-width: 220px; }
.lp-logomark--compact { padding: 5px 10px 5px 5px; gap: 6px; max-width: 180px; }
.lp-logomark__icon { width: 28px; height: 28px; border-radius: 50%; background: var(--lm-color, #2563eb); color: #fff; display: grid; place-items: center; font-size: 9px; font-weight: 800; letter-spacing: -.02em; flex-shrink: 0; }
.lp-logomark--compact .lp-logomark__icon { width: 24px; height: 24px; font-size: 8px; }
.lp-logomark__name { font-size: 11.5px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.lp-logomark--compact .lp-logomark__name { font-size: 10.5px; }
@media (max-width: 640px) { .lp-logomark { max-width: 160px; } .lp-logomark__name { font-size: 10px; } }

/* Trust stats */
.lp-trust-stats { padding: clamp(48px, 6vw, 72px) clamp(16px, 4vw, 40px); background: #f8fafc; }
.lp-trust-stats__wrap { max-width: 1100px; margin: 0 auto; }
.lp-trust-stats__head { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.lp-trust-stats__eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; background: rgba(15,23,42,.06); color: #0f172a; margin-bottom: 14px; }
.lp-trust-stats__h2 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; color: #0f172a; }
.lp-trust-stats__sub { margin: 0; font-size: 16px; line-height: 1.55; color: #64748b; }
.lp-trust-stats__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 32px; background: linear-gradient(135deg, #0f8a72, #1493a8); border-radius: 24px; color: #fff; box-shadow: 0 20px 60px rgba(15,138,114,.22); }
@media (max-width: 640px) { .lp-trust-stats__row { grid-template-columns: repeat(2, 1fr); padding: 24px; gap: 24px; } }
.lp-trust-stats__stat { text-align: center; }
.lp-trust-stats__n { font-size: clamp(28px, 5vw, 40px); font-weight: 800; letter-spacing: -1px; color: #fff; line-height: 1.1; }
.lp-trust-stats__l { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.85); font-weight: 600; margin-top: 6px; }
.lp-trust-stats__badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.lp-trust-stats__badge { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #fff; border: 1px solid #e2e8f0; color: #334155; }

/* Testimonials */
.lp-testimonials { padding: clamp(56px, 7vw, 88px) clamp(16px, 4vw, 40px); background: #fff; }
.lp-testi__head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.lp-testi__eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; background: rgba(15,23,42,.06); color: #0f172a; margin-bottom: 16px; }
.lp-testi__h2 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; color: #0f172a; }
.lp-testi__sub { margin: 0; font-size: 16px; color: #64748b; line-height: 1.55; }
.lp-testi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1180px; margin: 0 auto; }
@media (max-width: 1024px) { .lp-testi__grid { grid-template-columns: 1fr; max-width: 560px; } }
.tcase { position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 32px 28px 28px; display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease; box-shadow: 0 1px 2px rgba(0,0,0,.02), 0 4px 16px rgba(0,0,0,.04); }
.tcase:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(15,23,42,.08); border-color: #cbd5e1; }
.tcase--featured { border-color: rgba(244,63,94,.25); background: linear-gradient(180deg, rgba(244,63,94,.02), transparent); }
.tcase--featured:hover { border-color: rgba(244,63,94,.4); box-shadow: 0 12px 32px rgba(244,63,94,.1); }
.tcase__quote { margin-bottom: 8px; }
.tcase__qmark { display: inline-block; font-size: 48px; line-height: .6; font-family: Georgia, serif; color: #0f172a; opacity: .12; font-weight: 900; }
.tcase__text { flex: 1; margin: 0 0 24px; font-size: 15px; line-height: 1.65; color: #334155; font-weight: 500; }
.tcase__author { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid #f1f5f9; }
.tcase__avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .5px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.tcase__info { flex: 1; min-width: 0; }
.tcase__name { margin: 0; font-size: 14px; font-weight: 800; color: #0f172a; }
.tcase__role { margin: 2px 0 0; font-size: 12px; color: #64748b; font-weight: 500; }
.tcase__metric { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #f1f5f9; }
.tcase__metricN { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: #0f172a; }
.tcase--featured .tcase__metricN { color: #e11d48; }
.tcase__metricL { font-size: 11.5px; color: #64748b; font-weight: 600; flex: 1; }
.lp-testi__logos { margin-top: 56px; text-align: center; }
.lp-testi__logosLabel { font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; color: #94a3b8; margin: 0 0 16px; }
.lp-testi__logoRow { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 12px; align-items: center; }

/* Hero visual — dashboard mock + compact play pill */
.lp-hero-visual { position: relative; width: 100%; }
.lp-hero-visual__mock { width: 100%; }
.lp-hero-visual__mock .lp-dash__win { width: 100%; }
.lp-hero-visual__play { position: absolute; bottom: 16px; right: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: none; background: var(--primary, #0f8a72); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: 0 8px 24px rgba(15,138,114,.35); transition: transform .15s ease, background .15s ease; }
.lp-hero-visual__play:hover { background: #0d7a65; transform: translateY(-1px); }
.lp-hero-visual__playIcon { width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #0f172a; display: grid; place-items: center; font-size: 10px; padding-left: 2px; }

/* Product tour modal */
.lp-tour { text-align: center; padding: 12px 8px 4px; min-height: 220px; }
.lp-tour__slide { display: grid; gap: 10px; justify-items: center; }
.lp-tour__icon { font-size: 48px; line-height: 1; }
.lp-tour__title { margin: 0; font-size: 22px; font-weight: 800; color: #0f172a; }
.lp-tour__desc { margin: 0; max-width: 420px; font-size: 15px; line-height: 1.55; color: #64748b; }
.lp-tour__step { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: #94a3b8; letter-spacing: .06em; }
.lp-tour__dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.lp-tour__dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: #cbd5e1; cursor: pointer; padding: 0; transition: background .2s ease, transform .2s ease; }
.lp-tour__dot.is-active { background: #0f172a; transform: scale(1.2); }

/* Case studies */
.lp-cases { padding: clamp(56px, 7vw, 88px) clamp(16px, 4vw, 40px); background: #f8fafc; border-top: 1px solid #e2e8f0; }
.lp-cases__head { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.lp-cases__eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; background: rgba(15,23,42,.06); color: #0f172a; margin-bottom: 14px; }
.lp-cases__h2 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -.03em; color: #0f172a; }
.lp-cases__sub { margin: 0; font-size: 16px; line-height: 1.55; color: #64748b; }
.lp-cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1180px; margin: 0 auto; }
@media (max-width: 1024px) { .lp-cases__grid { grid-template-columns: 1fr; max-width: 560px; } }
.lp-cases__card { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 4px 16px rgba(15,23,42,.04); border-top: 3px solid var(--case-color, #2563eb); transition: transform .3s ease, box-shadow .3s ease; }
.lp-cases__card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(15,23,42,.08); }
.lp-cases__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lp-cases__tag { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--case-color, #2563eb); background: color-mix(in srgb, var(--case-color) 10%, #fff); padding: 4px 10px; border-radius: 999px; }
.lp-cases__h { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; color: #0f172a; }
.lp-cases__summary { margin: 0; font-size: 14px; line-height: 1.55; color: #64748b; flex: 1; }
.lp-cases__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lp-cases__metric { text-align: center; padding: 10px 6px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; }
.lp-cases__metricN { display: block; font-size: 16px; font-weight: 800; color: var(--case-color, #0f172a); }
.lp-cases__metricL { display: block; font-size: 9px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.lp-cases__quote { margin: 0; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--case-color) 6%, #fff); border-left: 3px solid var(--case-color); font-size: 13px; font-style: italic; line-height: 1.5; color: #334155; }
.lp-cases__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid #f1f5f9; font-size: 12px; color: #64748b; }
.lp-cases__cta { background: none; border: none; padding: 0; font-size: 13px; font-weight: 700; color: var(--case-color, #2563eb); cursor: pointer; font-family: inherit; white-space: nowrap; }
.lp-cases__cta:hover { text-decoration: underline; }

/* Trust & security */
.lp-trust-sec { padding: clamp(48px, 6vw, 72px) clamp(16px, 4vw, 40px); background: linear-gradient(180deg, #f8fafc, #fff); border-top: 1px solid #e2e8f0; }
.lp-trust-sec__inner { max-width: 1100px; margin: 0 auto; }
.lp-trust-sec__copy { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.lp-trust-sec__eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; background: rgba(5,150,105,.08); color: #047857; border: 1px solid rgba(5,150,105,.15); margin-bottom: 14px; }
.lp-trust-sec__h2 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 36px); font-weight: 800; letter-spacing: -.03em; color: #0f172a; }
.lp-trust-sec__sub { margin: 0; font-size: 16px; line-height: 1.55; color: #64748b; }
.lp-trust-sec__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 760px; margin: 0 auto 28px; }
@media (min-width: 720px) { .lp-trust-sec__grid { grid-template-columns: repeat(3, 1fr); } }
.lp-trust-sec__item { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: #334155; line-height: 1.45; }
.lp-trust-sec__check { width: 22px; height: 22px; border-radius: 50%; background: rgba(5,150,105,.1); color: #059669; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.lp-trust-sec__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lp-trust-sec__badge { display: inline-flex; padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--primary, #0f8a72); color: #fff; }
.lp-trust-sec__badge--link { text-decoration: none; }
.lp-trust-sec__badge--link:hover { filter: brightness(1.08); }

/* Press / media section */
.lp-press { padding: clamp(48px, 6vw, 72px) clamp(16px, 4vw, 40px); background: #f8fafc; border-top: 1px solid rgba(15,23,42,.06); }
.lp-press__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.lp-press__label { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #94a3b8; margin: 0 0 16px; }
.lp-press__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 28px; }
.lp-press__item { display: flex; flex-direction: column; gap: 4px; padding: 14px 20px; background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 14px; text-decoration: none; color: inherit; min-width: 160px; transition: transform .2s ease; }
.lp-press__item:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,.06); }
.lp-press__outlet { font-size: 12px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .06em; }
.lp-press__title { font-size: 14px; font-weight: 700; color: #0f172a; }
.lp-press__kit { padding: 24px; background: #fff; border-radius: 18px; border: 1px solid rgba(15,23,42,.08); }
.lp-press__h { margin: 0 0 8px; font-size: 20px; font-weight: 800; }
.lp-press__sub { margin: 0 0 14px; font-size: 14px; color: #64748b; }

/* Landing — επικοινωνία */
.lp-contact { padding: clamp(48px, 6vw, 72px) clamp(16px, 4vw, 40px); background: linear-gradient(180deg, #fff 0%, #f8fafc 100%); border-top: 1px solid rgba(15,23,42,.06); }
.lp-contact__inner { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 40px); align-items: start; }
.lp-contact__eyebrow { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); margin-bottom: 10px; }
.lp-contact__h2 { margin: 0 0 10px; font-size: clamp(24px, 4vw, 32px); font-weight: 850; letter-spacing: -.02em; color: #0f172a; }
.lp-contact__sub { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: #475569; max-width: 420px; }
.lp-contact__mailto { display: inline-block; font-weight: 700; color: var(--primary); text-decoration: none; font-size: 15px; }
.lp-contact__form { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 18px; padding: 20px; box-shadow: 0 12px 40px rgba(15,23,42,.06); }
.lp-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lp-contact__input { width: 100%; box-sizing: border-box; }
.lp-contact__msg { resize: vertical; min-height: 100px; }
.lp-contact__submit { margin-top: 4px; width: 100%; }
.lp-contact__hint { margin: 4px 0 0; text-align: center; }
@media (max-width: 768px) {
  .lp-contact__inner { grid-template-columns: 1fr; }
  .lp-contact__row { grid-template-columns: 1fr; }
}

/* Dashboard mock — premium */
.lp-dash { position: relative; pointer-events: none; user-select: none; }
.lp-dash__glow { position: absolute; inset: -20px; background: radial-gradient(ellipse at 50% 30%, rgba(37,99,235,.12), transparent 65%); pointer-events: none; z-index: 0; }
.lp-dash__win { position: relative; z-index: 1; }
.lp-dash__win { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 24px 60px rgba(15,23,42,.12); overflow: hidden; }
.lp-dash__titlebar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; }
.lp-dash__dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.lp-dash__title { margin-left: 8px; font-size: 11px; font-weight: 600; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.lp-dash__live { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 9px; font-weight: 700; color: #16a34a; text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0; }
.lp-dash__liveDot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: lpDashPulse 2s ease-in-out infinite; }
@keyframes lpDashPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.2); } }
.lp-dash__bell { position: relative; font-size: 12px; margin-left: 8px; flex-shrink: 0; }
.lp-dash__bellN { position: absolute; top: -5px; right: -6px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 8px; font-weight: 800; display: grid; place-items: center; }
.lp-dash__body { display: grid; grid-template-columns: 88px 1fr; min-height: 300px; }
.lp-dash__side { padding: 14px 10px; background: #f8fafc; border-right: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 8px; }
.lp-dash__nav { font-size: 10px; font-weight: 700; color: #64748b; padding: 6px 8px; border-radius: 8px; }
.lp-dash__nav:first-child { background: #dbeafe; color: #1d4ed8; }
.lp-dash__main { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.lp-dash__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lp-dash__stat { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 8px; text-align: center; }
.lp-dash__stat--accent { background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(37,99,235,.02)); border-color: rgba(37,99,235,.15); }
.lp-dash__statN { display: block; font-size: 15px; font-weight: 800; color: #0f172a; }
.lp-dash__statL { display: block; font-size: 9px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.lp-dash__statH { display: block; font-size: 8px; font-weight: 600; color: #94a3b8; margin-top: 3px; }
.lp-dash__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; }
@media (max-width: 520px) { .lp-dash__cols { grid-template-columns: 1fr; } }
.lp-dash__panel { border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; flex: 1; min-width: 0; }
.lp-dash__panelH { margin: 0; padding: 10px 12px; font-size: 11px; font-weight: 700; color: #64748b; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.lp-dash__row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid #f1f5f9; font-size: 11px; }
.lp-dash__ava { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 7px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.lp-dash__name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lp-dash__name strong { font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-dash__name small { font-size: 9px; color: #94a3b8; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-dash__badge { font-size: 9px; font-weight: 700; padding: 3px 7px; border-radius: 999px; flex: none; }
.lp-dash__badge--ok { background: #dcfce7; color: #15803d; }
.lp-dash__badge--warn { background: #fee2e2; color: #b91c1c; }
.lp-dash__badge--pending { background: #fef3c7; color: #b45309; }
.lp-dash__nav.is-active { background: #dbeafe; color: #1d4ed8; }
.lp-dash__feed { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-bottom: 1px solid #f1f5f9; font-size: 10px; }
.lp-dash__feedIcon { flex: none; font-size: 12px; }
.lp-dash__feedCopy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lp-dash__feedCopy strong { color: #0f172a; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-dash__feedCopy small { color: #94a3b8; font-size: 9px; }
.lp-dash__feedTime { flex: none; font-size: 8px; font-weight: 600; color: #cbd5e1; }
.lp-dash__chart { padding: 10px 12px 12px; border-top: 1px solid #f1f5f9; }
.lp-dash__chartLabel { display: block; font-size: 9px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.lp-dash__bars { display: flex; align-items: flex-end; gap: 4px; height: 36px; }
.lp-dash__bar { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #3b82f6, #1d4ed8); min-height: 4px; animation: lpBarGrow .8s ease-out both; }
@keyframes lpBarGrow { from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }

/* Hero embedded app mock (browser frame) */
.lp-dash--embedded .lp-dash__appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}
.lp-dash--embedded .lp-dash__org {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-dash--embedded .lp-dash__appbarMeta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.lp-dash--embedded .lp-dash__miniBadge {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}
.lp-dash--embedded .lp-dash__status {
  font-size: 9px;
  font-weight: 700;
  color: #16a34a;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  white-space: nowrap;
}
.lp-dash--embedded .lp-dash__side { gap: 4px; }
.lp-dash--embedded .lp-dash__nav { font-size: 9px; padding: 5px 7px; }
.lp-pillar { padding: clamp(48px, 7vw, 80px) clamp(16px, 4vw, 40px); background: #fff; }
.lp-pillar:nth-child(even) { background: #f8fafc; }
.lp-pillar__inner { max-width: 1100px; margin: 0 auto; display: grid; gap: 36px; align-items: center; }
@media (min-width: 860px) {
  .lp-pillar__inner { grid-template-columns: 1fr 1fr; gap: 56px; }
  .lp-pillar--reverse .lp-pillar__inner { direction: rtl; }
  .lp-pillar--reverse .lp-pillar__copy, .lp-pillar--reverse .lp-pillar__visual { direction: ltr; }
}
.lp-pillar__title { margin: 0 0 14px; font-size: clamp(26px, 4vw, 36px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; color: #0f172a; }
.lp-pillar__desc { margin: 0 0 20px; font-size: 16px; line-height: 1.65; color: #475569; }
.lp-pillar__feats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.lp-pillar__feat { font-size: 12px; font-weight: 650; padding: 7px 12px; border-radius: 999px; background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; }
.lp-pillar__list { margin: 0 0 20px; padding-left: 20px; display: grid; gap: 10px; color: #334155; font-size: 15px; line-height: 1.5; }
.lp-pillar__more { background: none; border: none; padding: 0; font-size: 15px; font-weight: 700; color: var(--primary); cursor: pointer; font-family: inherit; }
.lp-pillar__more:hover { text-decoration: underline; }

/* Pillar mocks */
.lp-pmock__card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px; box-shadow: 0 16px 40px rgba(15,23,42,.08); }
.lp-pillar:nth-child(even) .lp-pmock__card { background: #fff; }
.lp-pmock__h { margin: 0 0 14px; font-size: 13px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .06em; }
.lp-pmock__line { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; font-weight: 600; color: #0f172a; }
.lp-pmock__dot { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #93c5fd, #3b82f6); flex: none; }
.lp-pmock__tag { margin-left: auto; color: #16a34a; font-weight: 800; }
.lp-pmock__event { padding: 12px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; margin-bottom: 10px; }
.lp-pmock__event strong { display: block; font-size: 14px; margin-bottom: 4px; }
.lp-pmock__event span { font-size: 12px; color: #64748b; }
.lp-pmock__announce { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #eff6ff; font-size: 12px; font-weight: 600; color: #1e40af; }
.lp-pmock__bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding-top: 10px; }
.lp-pmock__bar { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #1e3a8a)); min-height: 20px; }
.lp-pmock__foot { margin: 14px 0 0; font-size: 13px; font-weight: 700; color: #16a34a; }

/* Social proof strip */
.lp-proof { text-align: center; padding: 56px 20px; background: #0f172a; color: #fff; }
.lp-proof__h { margin: 0 0 10px; font-size: clamp(22px, 4vw, 32px); font-weight: 800; letter-spacing: -.02em; }
.lp-proof__sub { margin: 0 auto 24px; max-width: 640px; font-size: 16px; line-height: 1.55; color: #94a3b8; }
.lp-proof__badges { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.lp-proof__badges span { font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }

/* Org types (MemberPlanet pills) */
.lp-mp-orgs { padding-top: 64px; padding-bottom: 64px; }
.lp-mp-orgs__head { text-align: center; max-width: 720px; margin: 0 auto 28px; }
.lp-mp-orgs__h { margin: 0 0 10px; font-size: clamp(24px, 4vw, 34px); font-weight: 800; letter-spacing: -.03em; color: #0f172a; }
.lp-mp-orgs__sub { margin: 0; font-size: 16px; color: #64748b; line-height: 1.5; }
.lp--mp .lp-uc__tabs { gap: 10px; margin-bottom: 20px; }
.lp--mp .lp-uc__tab { border-radius: 8px; padding: 12px 18px; font-size: 14px; font-weight: 650; border: 1px solid #cbd5e1; background: #fff; color: #334155; }
.lp--mp .lp-uc__tab.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.lp--mp .lp-uc__card { border-radius: 16px; box-shadow: 0 8px 30px rgba(15,23,42,.06); }

/* Final CTA full bleed */
.lp--mp .lp-final { margin-top: 0; border-radius: 0; }

/* Landing ignores dark mode — token reset on .lp--mp handles contrast */
[data-theme="dark"] .lp--mp .lp-sec--faq {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-color: #e2e8f0 !important;
}
[data-theme="dark"] .lp--mp .lp-sec--faq .lp-h2,
[data-theme="dark"] .lp--mp .lp-faq__q { color: #0f172a !important; }
[data-theme="dark"] .lp--mp .lp-faq__lead,
[data-theme="dark"] .lp--mp .lp-faq__a p { color: #475569 !important; }
[data-theme="dark"] .lp--mp .lp-faq__item {
  background: #fff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}
[data-theme="dark"] .lp--mp .lp-faq__item.is-open {
  background: #fff !important;
  border-color: color-mix(in srgb, var(--primary) 35%, #e2e8f0) !important;
}
[data-theme="dark"] .lp--mp .lp-faq__q:hover,
[data-theme="dark"] .lp--mp .lp-faq__item.is-open .lp-faq__q {
  background: #f8fafc !important;
  color: #0f172a !important;
}
[data-theme="dark"] .lp--mp .lp-faq__chev {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}
[data-theme="dark"] .lp--mp .lp-tour__title { color: #0f172a !important; }
[data-theme="dark"] .lp--mp .lp-tour__desc { color: #64748b !important; }

/* Section headers (orgs, pilot) */
.lp-section-head { text-align: center; max-width: 720px; margin: 0 auto 32px; padding: 0 16px; }
.lp-section-head--tight { margin-bottom: 24px; }
.lp-section-eyebrow { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.lp-section-head h2 { margin: 0; font-size: clamp(24px, 4vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: #0f172a; }
.lp-section-sub { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: #64748b; }

/* Org types strip */
.lp-orgs { padding: clamp(48px, 6vw, 72px) clamp(16px, 4vw, 40px); background: #f8fafc; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
.lp-orgs__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 960px; margin: 0 auto; }
@media (min-width: 820px) { .lp-orgs__grid { grid-template-columns: repeat(4, 1fr); } }
.lp-org-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 22px 18px; text-align: center; box-shadow: 0 4px 16px rgba(15,23,42,.04); }
.lp-org-card__icon { display: block; font-size: 32px; margin-bottom: 10px; }
.lp-org-card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: #0f172a; }
.lp-org-card p { margin: 0; font-size: 12.5px; color: #64748b; line-height: 1.45; }

/* Training module (optional add-on) */
.lp-module { padding: clamp(48px, 6vw, 72px) clamp(16px, 4vw, 40px); background: linear-gradient(135deg, rgba(37,99,235,.04), rgba(15,23,42,.02)); border-bottom: 1px solid #e2e8f0; }
.lp-module__inner { max-width: 1100px; margin: 0 auto; display: grid; gap: 28px; align-items: start; }
@media (min-width: 860px) { .lp-module__inner { grid-template-columns: 1fr; gap: 32px; } }
.lp-module__tag { display: inline-block; margin-bottom: 12px; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(37,99,235,.1); color: #1d4ed8; border: 1px solid rgba(37,99,235,.2); }
.lp-module h2 { margin: 0 0 12px; font-size: clamp(22px, 3.5vw, 30px); font-weight: 800; letter-spacing: -.02em; color: #0f172a; }
.lp-module__copy p { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: #475569; }
.lp-module__list { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; color: #334155; }
.lp-module__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; }
.lp-module__personas { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 auto; min-width: 0; }
.lp-module__persona {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  flex: 1 1 280px; padding: 12px 16px; border-radius: 14px;
  background: rgba(255,255,255,.85); border: 1px solid #e2e8f0;
}
.lp-module__persona-label { margin: 0; font-size: 14px; font-weight: 700; color: #0f172a; white-space: nowrap; }
.lp-module__persona-btns { display: flex; flex-wrap: nowrap; gap: 8px; margin-left: auto; }
.lp-module__persona-btns .btn { min-width: 88px; }
.lp-module__demo { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) {
  .lp-module__persona { flex-direction: column; align-items: stretch; }
  .lp-module__persona-btns { margin-left: 0; width: 100%; }
  .lp-module__persona-btns .btn { flex: 1; }
  .lp-module__demo { width: 100%; }
}

/* Pilot / social proof */
.lp-pilot { padding: clamp(48px, 6vw, 72px) clamp(16px, 4vw, 40px); background: #fff; }
.lp-pilot__grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 1000px; margin: 0 auto; }
@media (min-width: 768px) { .lp-pilot__grid { grid-template-columns: repeat(3, 1fr); } }
.lp-pilot-card { margin: 0; padding: 24px 20px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; display: flex; flex-direction: column; gap: 16px; }
.lp-pilot-card__quote { margin: 0; font-size: 14.5px; line-height: 1.6; color: #334155; font-weight: 500; flex: 1; }
.lp-pilot-card footer { font-size: 12.5px; color: #64748b; padding-top: 14px; border-top: 1px solid #e2e8f0; }
.lp-pilot-card footer strong { display: block; color: #0f172a; font-weight: 700; margin-bottom: 2px; }

/* EVT-5 / PART-4 (CTO re-audit 2026-07-20): shared image-lightbox modal --
   keeps the real dialog's a11y (focus trap, Escape, aria-modal) but strips
   the boxed white chrome down to a near-fullscreen dark viewer, matching
   what the 3 hand-rolled overlays it replaces used to look like. */
.modal--lightbox { background: transparent; box-shadow: none; max-width: min(94vw, 900px); }
.modal--lightbox .modal__head { position: absolute; top: 0; right: 0; padding: 8px; z-index: 1; }
.modal--lightbox .modal__title { display: none; }
.modal--lightbox .modal__close { color: #fff; background: rgba(0,0,0,.4); }
.modal--lightbox .modal__close:hover { background: rgba(0,0,0,.6); }
.modal--lightbox .modal__body { padding: 0; display: flex; align-items: center; justify-content: center; }

/* PART-4 (CTO re-audit 2026-07-20): participant detail panel, rebuilt on the
   shared modal for real focus-trap/Escape/aria-modal behavior. Keeps the
   old .ptx-panel's right-docked, full-height drawer look via an override on
   the base .modal box rather than the hand-rolled fixed-position element it
   replaces; .ptx-panel__* classes below still style the drawer's contents. */
.modal--side-panel {
  margin: 0 0 0 auto !important; width: min(420px, 100vw) !important; max-width: none !important;
  height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important;
  transform: translateX(100%) !important;
}
.overlay--show .modal--side-panel { transform: none !important; }
.modal--side-panel .modal__body { padding: 0; display: flex; flex-direction: column; overflow: hidden; }

/* Modal wide + workout builder */
.modal--wide { max-width: min(720px, 96vw) !important; }
.wk-builder__tpls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wk-builder__palette { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wk-builder__chip { border: 0; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: #fff; background: var(--chip, #64748b); cursor: pointer; }
.wk-builder__steps { display: grid; gap: 10px; max-height: 42vh; overflow-y: auto; }
.wk-builder__step { border: 1px solid var(--border); border-left: 4px solid var(--chip, #64748b); border-radius: 12px; padding: 10px; background: var(--surface); }
.wk-builder__stepHead { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.wk-builder__stepKind { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--chip); color: #fff; margin-right: auto; }
.wk-builder__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.wk-builder__lbl { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.wk-builder__radio { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.wk-builder__row--detail { flex-direction: column; align-items: stretch; }
.wk-builder__row--detail .wk-builder__lbl { margin-bottom: 2px; }

/* Premium workout builder modal */
.modal--premium { max-width: min(1120px, 98vw) !important; max-height: 94vh; }
.modal__body--premium { padding: 0; overflow: hidden; flex: 1; min-height: 0; }
.modal__footer--sticky { position: sticky; bottom: 0; z-index: 2; background: var(--surface); box-shadow: 0 -8px 24px rgba(0,0,0,.12); }

/* grid-template-rows: minmax(0, 1fr) is load-bearing here, not decorative:
   without it a single-row grid sizes its row to CONTENT height ("auto"), so
   .wk-pro__main's overflow-y:auto never gets a height-constrained box to
   scroll inside -- the row just grows to fit all 12 sections, and anything
   past ~94vh is silently clipped by .modal__body--premium's overflow:hidden
   with no way to scroll to it. That's the real root cause behind "can't
   scroll" / "dead buttons" reports on this modal: sections below the fold
   were never unreachable because of touch/click handling -- they were
   invisible and clipped, on desktop and mobile alike. minmax(0, 1fr) forces
   the row to fill the available (already-capped) height instead of
   growing past it, which is what actually makes the child's overflow:auto
   activate. */
.wk-pro { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); gap: 0; min-height: min(72vh, 680px); max-height: calc(94vh - 120px); }
@media (min-width: 900px) {
  .wk-pro { grid-template-columns: 1fr 300px; }
}
.wk-pro__main { overflow-y: auto; padding: 12px 16px 20px; min-height: 0; }
.wk-pro__summary { display: none; border-left: 1px solid var(--border); background: var(--surface-2); padding: 16px; overflow-y: auto; }
@media (min-width: 900px) {
  .wk-pro__summary { display: block; position: sticky; top: 0; align-self: start; max-height: calc(94vh - 120px); }
}

.wk-pro__toolbar { display: grid; gap: 8px; margin-bottom: 14px; }
.wk-pro__progressTrack { height: 4px; border-radius: 999px; background: var(--border); overflow: hidden; }
.wk-pro__progress { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary), #38bdf8); transition: width .35s ease; }
.wk-pro__toolbarBtns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wk-pro__draftStatus { margin-left: auto; font-size: 11px; }

.wk-pro__quick { padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); margin-bottom: 14px; }
.wk-pro__quickInput { width: 100%; margin: 8px 0; }
.wk-pro__quickExamples { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.wk-pro__sections { display: grid; gap: 8px; }
.wk-pro__sections .collapse { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; transition: border-color .2s; }
.wk-pro__sections .collapse.is-open { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.wk-pro__sections .collapse__head { width: 100%; padding: 12px 14px; font-size: 13px; font-weight: 700; }
.wk-pro__sections .collapse__body { padding: 0 14px 14px; }
/* Quick vs Full builder mode -- Quick hides the advanced sections. */
.wk-pro__modeToggle { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.wk-pro__modeBtn { min-height: 40px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; font-weight: 700; cursor: pointer; color: var(--text); transition: background .15s, border-color .15s, color .15s; touch-action: manipulation; }
.wk-pro__modeBtn.is-active { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); color: var(--primary); }
.wk-pro__sections--quick .wk-pro__sec--advanced { display: none; }
.wk-pro__advancedToggle { margin-top: 10px; width: 100%; min-height: 44px; }

.wk-pro__section { display: grid; gap: 10px; }
.wk-pro__fieldHead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wk-pro__label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.wk-pro__hint { font-size: 11px; color: var(--muted); font-weight: 500; text-transform: none; }
.wk-pro__input { width: 100%; }
.wk-pro__input--title { font-size: 16px; font-weight: 700; padding: 10px 12px; }

.wk-pro__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-pro__badge {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 700;
  background: var(--surface-2); color: var(--text); cursor: pointer; transition: all .15s ease;
  touch-action: manipulation;
}
.wk-pro__badge:hover { border-color: color-mix(in srgb, var(--badge, var(--primary)) 50%, var(--border)); }
.wk-pro__badge.is-active { background: color-mix(in srgb, var(--badge, var(--primary)) 18%, var(--surface)); border-color: var(--badge, var(--primary)); color: var(--text); box-shadow: 0 0 0 1px color-mix(in srgb, var(--badge, var(--primary)) 30%, transparent); }

.wk-pro__cardGrid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .wk-pro__cardGrid { grid-template-columns: repeat(3, 1fr); } }
.wk-pro__metric { padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.wk-pro__metricComputed { margin-top: 6px; font-size: 22px; font-weight: 900; letter-spacing: -.02em; color: var(--text); }

.wk-pro__rpeRow { display: flex; align-items: center; gap: 12px; }
.wk-pro__rpe { flex: 1; accent-color: var(--primary); }
.wk-pro__rpeVal { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; min-width: 120px; text-align: right; }

.wk-pro__palette { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wk-pro__chip {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  border: 0; border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700;
  color: #fff; background: var(--chip, #64748b); cursor: pointer; transition: transform .12s, opacity .12s;
  touch-action: manipulation;
}
.wk-pro__chip:hover { transform: translateY(-1px); opacity: .92; }
.wk-pro__tpls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

.wk-pro__steps { display: grid; gap: 10px; max-height: 48vh; overflow-y: auto; padding-right: 4px; }
.wk-pro__step { border: 1px solid var(--border); border-left: 4px solid var(--chip, #64748b); border-radius: 12px; padding: 10px; background: var(--surface); transition: box-shadow .2s, transform .15s, opacity .15s; }
.wk-pro__step.is-dragging { opacity: .55; transform: scale(.98); }
.wk-pro__step.is-drag-over { box-shadow: 0 0 0 2px var(--primary); }
.wk-pro__stepHead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wk-pro__drag { cursor: grab; color: var(--muted); font-size: 14px; user-select: none; }
.wk-pro__stepKind { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--chip); color: #fff; margin-right: auto; }
.wk-pro__stepBody { display: grid; gap: 8px; }
.wk-pro__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wk-pro__miniLbl { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.wk-pro__radio { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; touch-action: manipulation; }
.wk-pro__iconBtn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1; border-radius: 8px;
  cursor: pointer; touch-action: manipulation;
}
.wk-pro__iconBtn:hover { background: var(--surface-2); color: var(--text); }

.wk-pro__empty { text-align: center; padding: 28px 16px; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); }

.wk-pro__summaryCard { border-radius: 14px; border: 1px solid var(--border); padding: 16px; background: var(--surface); }
.wk-pro__summaryDay { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: capitalize; }
.wk-pro__summaryTitle { margin: 0 0 12px; font-size: 17px; font-weight: 800; line-height: 1.25; }
.wk-pro__summarySteps { margin-bottom: 14px; }
.wk-pro__summaryLine { margin: 0 0 4px; font-size: 12px; color: var(--text); line-height: 1.4; }
.wk-pro__summaryGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wk-pro__summaryStat { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.wk-pro__summaryStatK { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.wk-pro__summaryStatV { font-size: 13px; font-weight: 800; }

.wk-pro__nutritionGrid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .wk-pro__nutritionGrid { grid-template-columns: repeat(3, 1fr); } }
.wk-pro__nutrition { padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.wk-pro__subLabel { margin: 0 0 6px; font-size: 12px; font-weight: 800; }
.wk-pro__nutritionList { display: grid; gap: 4px; margin-bottom: 8px; }
.wk-pro__nutritionItem { display: flex; align-items: center; justify-content: space-between; font-size: 12px; padding: 4px 8px; border-radius: 8px; background: var(--surface); }
.wk-pro__examples { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.wk-pro__exampleBtn {
  display: inline-flex; align-items: center; min-height: 44px;
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 600;
  background: var(--surface); color: var(--muted); cursor: pointer; touch-action: manipulation;
}
.wk-pro__exampleBtn:hover { border-color: var(--primary); color: var(--text); }

.wk-pro__check { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; min-height: 44px; cursor: pointer; touch-action: manipulation; }
.wk-pro__check--muted { opacity: .55; cursor: not-allowed; }
.wk-pro__pbRow { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .wk-pro__pbRow { grid-template-columns: repeat(3, 1fr); } }

.wk-pro__importRow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.wk-pro__attachList { display: grid; gap: 6px; margin-bottom: 12px; }
.wk-pro__attachItem { display: flex; align-items: center; justify-content: space-between; font-size: 12px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }

.wk-pro__aiActions { margin-top: 12px; }
.wk-pro__aiBox { margin-top: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); animation: wkProFadeIn .25s ease; }
.wk-pro__aiTitle { margin: 0 0 8px; font-size: 13px; font-weight: 800; }
.wk-pro__aiTip { margin: 0 0 4px; font-size: 12px; line-height: 1.45; color: var(--muted); }

.wk-pro__footer { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.wk-pro__footer .btn { flex: 1; min-width: 120px; min-height: 44px; }
.wk-pro__footer .btn--primary { flex: 1.4; }

@keyframes wkProFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 599px) {
  .modal--premium { max-height: 100vh; border-radius: 18px 18px 0 0; }
  .wk-pro { max-height: calc(100vh - 140px); min-height: 50vh; }
  .wk-pro__main { padding: 10px 12px 16px; }
  .wk-pro__steps { max-height: 36vh; }
}

.wk-sync-info { margin-bottom: 16px; padding: 14px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border)); }
.wk-sync-info__title { margin: 0 0 8px; font-size: 14px; font-weight: 800; }
.wk-sync-info__list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* ==========================================================================
   COACH DASHBOARD — Premium enterprise SaaS
   ========================================================================== */
/* ===== Coach module — premium mobile-first redesign (2026-07-26) ===== */
.coach-mode__sticky { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 8px 0; margin: -4px 0 8px; border-bottom: 1px solid var(--border); }
.coach-mode__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.coach-mode__brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.coach-mode__back { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; padding: 0; color: var(--muted); cursor: pointer; border-radius: 10px; flex: 0 0 auto; }
.coach-mode__back svg { width: 20px; height: 20px; }
.coach-mode__back:hover { color: var(--primary); background: var(--surface-2); }
.coach-mode__title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.coach-mode__badge { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; color: #d97706; flex: 0 0 auto; }
.coach-mode__badge svg { width: 16px; height: 16px; }
.coach-mode__actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.coach-mode__cta { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border: none; border-radius: 12px; background: var(--primary); color: var(--primary-ink, #fff); font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 35%, transparent); }
.coach-mode__cta:active { transform: scale(.97); }
.coach-mode__ctaIc { display: inline-flex; }
.coach-mode__ctaIc svg { width: 18px; height: 18px; }
.coach-mode__more { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); cursor: pointer; flex: 0 0 auto; }
.coach-mode__more svg { width: 20px; height: 20px; }
@media (max-width: 380px) { .coach-mode__ctaLbl { display: none; } .coach-mode__cta { width: 44px; padding: 0; justify-content: center; } }
.coach-mode__body { padding-bottom: 24px; }

/* Coach workspace owns its navigation (the top tab strip). Suppress the global
   bottom tabbar (which otherwise shows the org's member/race tabs -- a second,
   conflicting nav) AND every floating FAB/help bubble, so ONE nav system remains
   and no fixed element covers the page content. */
body.coach-workspace .tabbar,
body.coach-workspace .ep-fab,
body.coach-workspace #ep-fab,
body.coach-workspace .ai-fab,
body.coach-workspace .help-bubble { display: none !important; }
/* No tabbar to clear -> normal, safe-area-aware bottom padding (was reserving
   ~86px for a tabbar that isn't shown here). */
body.coach-workspace .content { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); }

/* ── Coach module polish (2026-07-27 audit): touch targets, empty/loading
   states, section headers, consistent animation ── */
/* .btn--sm is 34px app-wide; lift coach action buttons to the 44px minimum
   (scoped so the rest of the app's dense rows are untouched). */
body.coach-workspace .btn--sm { min-height: 44px; height: auto; }
.coach-empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 32px 16px; color: var(--muted); }
.coach-empty__ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--surface-2); color: var(--muted); }
.coach-empty__ic svg { width: 24px; height: 24px; }
.coach-empty__title { margin: 0; font-size: 15px; font-weight: 800; color: var(--text); }
.coach-empty__sub { margin: 0; font-size: 13px; max-width: 34ch; }
.coach-empty .btn { margin-top: 8px; }
.coach-sec-h { margin: 24px 0 8px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.coach-sec-h:first-child { margin-top: 0; }
.coach-loading { display: grid; justify-items: center; gap: 10px; padding: 40px 16px; color: var(--muted); }
.coach-tabpane { animation: coachFadeIn .25s ease; }

/* Scrollable tab strip (fixes cramped/partially-hidden tabs) */
.coach-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; margin: 0 -14px 16px; padding: 0 14px 2px; scroll-snap-type: x proximity; border-bottom: 1px solid var(--border); }
.coach-tabs::-webkit-scrollbar { display: none; }
.coach-tabs__btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: none; background: none; color: var(--muted); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; flex: 0 0 auto; scroll-snap-align: center; border-bottom: 2px solid transparent; }
.coach-tabs__ic { display: inline-flex; opacity: .8; }
.coach-tabs__ic svg { width: 17px; height: 17px; }
.coach-tabs__btn.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.coach-tabs__btn.is-active .coach-tabs__ic { opacity: 1; }

/* Dashboard: compact hero + KPI cards + quick access */
.cd-hero { margin-bottom: 16px; }
.cd-hero__greet { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.cd-hero__sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.cd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
@media (max-width: 360px) { .cd-kpis { grid-template-columns: repeat(2, 1fr); } }
.cd-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); min-height: 76px; }
.cd-kpi__ic { display: inline-flex; width: 22px; height: 22px; }
.cd-kpi__ic svg { width: 18px; height: 18px; }
.cd-kpi__v { font-size: 22px; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
.cd-kpi__l { font-size: 11px; font-weight: 600; color: var(--muted); }
.cd-kpi--blue .cd-kpi__ic { color: #3b82f6; }
.cd-kpi--violet .cd-kpi__ic { color: #8b5cf6; }
.cd-kpi--green .cd-kpi__ic { color: #10b981; }
.cd-kpi--amber .cd-kpi__ic { color: #f59e0b; }
.cd-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 24px; }
.cd-quick__btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; min-height: 72px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font-family: inherit; cursor: pointer; transition: border-color .15s, transform .1s; }
.cd-quick__btn:active { transform: scale(.97); }
.cd-quick__btn:hover { border-color: var(--primary); }
.cd-quick__ic { display: inline-flex; width: 24px; height: 24px; color: var(--primary); }
.cd-quick__ic svg { width: 22px; height: 22px; }
.cd-quick__lbl { font-size: 11.5px; font-weight: 700; text-align: center; line-height: 1.2; }

.coach-dash { display: grid; gap: 16px; animation: coachFadeIn .4s ease; }
@keyframes coachFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Hero */
.coach-hero { display: grid; gap: 16px; grid-template-columns: 1fr; padding: 20px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, var(--surface)), color-mix(in srgb, #38bdf8 8%, var(--surface))); border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.coach-hero--compact {
  padding: 14px 16px; gap: 12px; border-radius: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .coach-hero--compact { grid-template-columns: 1.4fr 1fr; align-items: center; }
}
.coach-hero__main { display: grid; gap: 10px; }
.coach-hero__intro { display: grid; gap: 4px; }
.coach-hero__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.coach-hero__badge {
  display: inline-flex; padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary);
}
.coach-hero__badge--muted { background: var(--surface-2); color: var(--muted); }
.coach-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.coach-hero__chip {
  display: flex; flex-direction: column; align-items: center; min-width: 56px;
  padding: 8px 10px; border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid var(--border);
}
.coach-hero__chipIcon { font-size: 14px; }
.coach-hero__chipVal { font-size: 16px; font-weight: 900; line-height: 1.1; }
.coach-hero__chipLbl { font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: .04em; }
.coach-hero__qa {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
@media (min-width: 720px) { .coach-hero__qa { grid-template-columns: repeat(3, 1fr); } }
.coach-hero__qa .coach-hero__action { padding: 8px 10px; font-size: 11px; font-weight: 700; }
.coach-skel--hero { height: 100px; }
.coach-kpi--slate { --kpi-accent: #64748b; }
.coach-kpi--indigo { --kpi-accent: #6366f1; }
.coach-athlete-card { transition: transform .15s, box-shadow .15s; }
.coach-athlete-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
@media (min-width: 800px) { .coach-hero { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.coach-hero__greet { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--muted); }
.coach-hero__org { margin: 0 0 2px; font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.coach-hero__role { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); }
.coach-hero__day { margin: 0 0 14px; font-size: 13px; color: var(--muted); text-transform: capitalize; }
.coach-hero__summary { padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); backdrop-filter: blur(8px); }
.coach-hero__summaryTitle { margin: 0 0 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.coach-hero__stats { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.coach-hero__qaTitle { margin: 0 0 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.coach-hero__actions { display: grid; gap: 8px; }
.coach-hero__action { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; font-size: 13px; font-weight: 700; background: var(--surface); color: var(--text); cursor: pointer; text-align: left; transition: transform .15s, box-shadow .15s, border-color .15s; }
.coach-hero__action:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.1); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.coach-hero__action--primary { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #38bdf8)); color: #fff; border-color: transparent; }

/* Toolbar */
.coach-toolbar { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: thin; }
.coach-toolbar__btn { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: transform .12s, box-shadow .12s; white-space: nowrap; }
.coach-toolbar__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.1); }
.coach-toolbar__ic { font-size: 16px; }
.coach-toolbar__lbl { font-size: 12px; font-weight: 700; }

/* KPI cards */
.coach-kpis { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .coach-kpis { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .coach-kpis { grid-template-columns: repeat(4, 1fr); } }
.coach-kpi { text-align: left; padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: transform .18s, box-shadow .18s; box-shadow: 0 4px 16px rgba(0,0,0,.04); }
.coach-kpi:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.coach-kpi__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.coach-kpi__icon { font-size: 20px; }
.coach-kpi__spark { width: 64px; height: 24px; opacity: .85; }
.coach-spark { width: 100%; height: 100%; }
.coach-kpi__value { display: block; font-size: 22px; font-weight: 900; letter-spacing: -.02em; margin-bottom: 2px; }
.coach-kpi__label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: .04em; }
.coach-kpi__trend { display: block; font-size: 11px; font-weight: 600; color: #22c55e; margin-top: 4px; }
.coach-kpi--blue { background: linear-gradient(145deg, color-mix(in srgb, #3b82f6 12%, var(--surface)), var(--surface)); }
.coach-kpi--violet { background: linear-gradient(145deg, color-mix(in srgb, #8b5cf6 12%, var(--surface)), var(--surface)); }
.coach-kpi--green { background: linear-gradient(145deg, color-mix(in srgb, #22c55e 12%, var(--surface)), var(--surface)); }
.coach-kpi--rose { background: linear-gradient(145deg, color-mix(in srgb, #f43f5e 12%, var(--surface)), var(--surface)); }
.coach-kpi--cyan { background: linear-gradient(145deg, color-mix(in srgb, #06b6d4 12%, var(--surface)), var(--surface)); }
.coach-kpi--amber { background: linear-gradient(145deg, color-mix(in srgb, #f59e0b 12%, var(--surface)), var(--surface)); }
.coach-kpi--orange { background: linear-gradient(145deg, color-mix(in srgb, #f97316 12%, var(--surface)), var(--surface)); }
.coach-kpi--teal { background: linear-gradient(145deg, color-mix(in srgb, #14b8a6 12%, var(--surface)), var(--surface)); }

/* Widget grid */
.coach-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .coach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .coach-grid { grid-template-columns: repeat(3, 1fr); } }
.coach-widget { border-radius: 16px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.05); transition: box-shadow .2s; }
.coach-widget:hover { box-shadow: 0 8px 28px rgba(0,0,0,.1); }
.coach-widget__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.coach-widget__title { margin: 0; font-size: 13px; font-weight: 800; }
.coach-widget__body { padding: 14px; }
.coach-live { font-size: 10px; font-weight: 700; color: #22c55e; animation: coachPulse 2s infinite; }
@keyframes coachPulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* Today sessions */
.coach-today__row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.coach-today__row:last-child { border-bottom: none; }
.coach-today__time { font-size: 12px; font-weight: 800; color: var(--primary); min-width: 44px; }
.coach-today__title { margin: 0 0 2px; font-size: 13px; font-weight: 700; }
.coach-today__meta { margin: 0 0 6px; font-size: 11px; color: var(--muted); }
.coach-today__bar { height: 4px; border-radius: 999px; background: var(--border); overflow: hidden; }
.coach-today__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), #38bdf8); transition: width .6s ease; }

/* Races */
.coach-races__row { padding: 4px 0; }
.coach-races__sep { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
.coach-races__title { margin: 0 0 2px; font-size: 13px; font-weight: 800; }
.coach-races__countdown { margin: 0; font-size: 12px; font-weight: 700; color: var(--primary); }
.coach-races__meta { margin: 2px 0 0; font-size: 11px; color: var(--muted); }

/* Athlete cards */
.coach-athletes { display: grid; gap: 10px; }
.coach-ath-card { padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); transition: transform .15s; }
.coach-ath-card:hover { transform: translateY(-2px); }
.coach-ath-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.coach-ath-card__avatar { width: 40px; height: 40px; border-radius: 12px; background: var(--surface); display: grid; place-items: center; font-size: 18px; }
.coach-ath-card__name { margin: 0; font-size: 14px; font-weight: 800; }
.coach-ath-card__status { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c, var(--primary)) 18%, var(--surface)); color: var(--c, var(--primary)); margin-top: 2px; }
.coach-ath-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.coach-ath-card__stat { padding: 6px 8px; border-radius: 8px; background: var(--surface); }
.coach-ath-card__k { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.coach-ath-card__v { font-size: 12px; font-weight: 700; }
.coach-ring { width: 48px; height: 48px; margin-left: auto; flex-shrink: 0; }
.coach-ring__txt { font-size: 10px; font-weight: 800; fill: var(--text); }

/* Timeline */
.coach-timeline__row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.coach-timeline__row:last-child { border-bottom: none; }
.coach-timeline__icon { flex-shrink: 0; }
.coach-timeline__text { flex: 1; font-weight: 600; }
.coach-timeline__time { font-size: 10px; color: var(--muted); white-space: nowrap; }

/* Mini calendar */
.coach-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 10px; }
.coach-cal__dow { font-size: 9px; font-weight: 700; text-align: center; color: var(--muted); padding: 4px 0; }
.coach-cal__day { position: relative; aspect-ratio: 1; border: none; border-radius: 8px; background: var(--surface-2); font-size: 11px; font-weight: 700; cursor: pointer; color: var(--text); padding-bottom: 6px; }
.coach-cal__day.is-today { background: color-mix(in srgb, var(--primary) 20%, var(--surface-2)); box-shadow: 0 0 0 2px var(--primary); }
.coach-cal__dots { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; }
.coach-cal__dot { width: 4px; height: 4px; border-radius: 999px; }
.coach-cal__legend { display: flex; flex-wrap: wrap; gap: 6px; font-size: 9px; color: var(--muted); }
.coach-cal__leg i { display: inline-block; width: 6px; height: 6px; border-radius: 999px; margin-right: 3px; vertical-align: middle; }

/* Charts */
.coach-bars { display: flex; align-items: flex-end; gap: 6px; height: 100px; }
.coach-bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.coach-bars__track { flex: 1; width: 100%; display: flex; align-items: flex-end; border-radius: 6px 6px 0 0; background: var(--surface-2); }
.coach-bars__fill { width: 100%; border-radius: 6px 6px 0 0; transition: height .5s ease; min-height: 4px; }
.coach-bars__lbl { font-size: 9px; font-weight: 700; color: var(--muted); }
.coach-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.coach-tabs__btn { border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; font-size: 10px; font-weight: 700; background: var(--surface-2); cursor: pointer; color: var(--muted); }
.coach-tabs__btn.is-active { background: var(--primary); color: #fff; border-color: transparent; }
.coach-compliance { display: flex; gap: 14px; align-items: center; }
.coach-donut { width: 90px; flex-shrink: 0; }
.coach-donut__txt { font-size: 14px; font-weight: 800; fill: var(--text); }
.coach-compliance__list { margin: 0; padding: 0; list-style: none; font-size: 12px; font-weight: 600; display: grid; gap: 4px; }

/* Fatigue, AI, notif */
.coach-fatigue__title { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: var(--muted); }
.coach-fatigue__row { display: flex; gap: 8px; flex-wrap: wrap; }
.coach-fatigue__pill { padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; background: var(--surface-2); }
.coach-ai { padding: 4px 0; }
.coach-ai__title { margin: 0 0 8px; font-size: 14px; font-weight: 800; }
.coach-ai__tip { margin: 0 0 6px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.coach-ai.is-pulse { animation: coachPulse .6s ease 3; }
.coach-notif { margin: 0; padding: 0; list-style: none; font-size: 13px; font-weight: 600; display: grid; gap: 8px; }

/* Heatmap */
.coach-heatmap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.coach-heatmap__cell { aspect-ratio: 1; border-radius: 3px; background: var(--surface-2); }
.coach-heatmap__cell--1 { background: color-mix(in srgb, var(--primary) 25%, var(--surface-2)); }
.coach-heatmap__cell--2 { background: color-mix(in srgb, var(--primary) 45%, var(--surface-2)); }
.coach-heatmap__cell--3 { background: color-mix(in srgb, var(--primary) 65%, var(--surface-2)); }
.coach-heatmap__cell--4 { background: var(--primary); }

/* Performance & weather */
.coach-perf { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.coach-perf__item { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.coach-perf__k { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.coach-perf__v { font-size: 14px; font-weight: 800; }
.coach-weather__temp { margin: 0 0 10px; font-size: 32px; font-weight: 900; }
.coach-weather__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; }
.coach-weather__item { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); }

/* Announcements */
.coach-ann__row { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 0; border: none; border-bottom: 1px solid var(--border); background: none; cursor: pointer; text-align: left; color: var(--text); }
.coach-ann__row:last-child { border-bottom: none; }
.coach-ann__title { font-size: 13px; font-weight: 600; }
.coach-ann__chev { color: var(--muted); }

/* Skeleton */
.coach-skel { border-radius: 16px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: coachShimmer 1.2s infinite; }
.coach-skel--hero { height: 100px; }
.coach-skel--kpi { height: 100px; flex: 1; }
.coach-skel-row { display: flex; gap: 10px; }
@keyframes coachShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.coach-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 16px; }

/* Command palette (the floating launcher button was removed -- it
   overlapped the global .ai-fab at the same bottom-right position and
   duplicated Ctrl+K, which remains the palette's one entry point) */
.coach-cmd { position: fixed; inset: 0; z-index: 200; display: grid; place-items: start center; padding-top: 12vh; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .18s; }
.coach-cmd.is-open { opacity: 1; }
.coach-cmd__panel { width: min(520px, 94vw); border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(0,0,0,.25); overflow: hidden; transform: translateY(-8px); transition: transform .18s; }
.coach-cmd.is-open .coach-cmd__panel { transform: none; }
.coach-cmd__head { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--border); }
.coach-cmd__kbd { font-size: 16px; font-weight: 800; color: var(--muted); }
.coach-cmd__input { flex: 1; border: none; background: transparent; font-size: 16px; font-weight: 600; color: var(--text); outline: none; }
.coach-cmd__list { max-height: 50vh; overflow-y: auto; padding: 8px; }
.coach-cmd__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; color: var(--text); font-size: 14px; font-weight: 600; }
.coach-cmd__item:hover, .coach-cmd__item.is-active { background: var(--surface-2); }
.coach-cmd__empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }

@media (max-width: 599px) {
  .coach-hero__org { font-size: 18px; }
  .coach-kpis { grid-template-columns: repeat(2, 1fr); }
  .coach-grid { grid-template-columns: 1fr; }
}

/* ========================================================================== */
/*  COACH DASHBOARD v2 (.cd-*) — Enterprise Today's Plan                       */
/* ========================================================================== */
.cd-dash {
  display: grid; gap: 10px; padding-bottom: 88px;
  animation: cdFadeIn .35s ease;
}
@keyframes cdFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cd-muted { margin: 0; font-size: 12px; color: var(--muted); }
.cd-link {
  border: none; background: none; padding: 0; font-size: 11px; font-weight: 700;
  color: var(--primary); cursor: pointer;
}
.cd-link:hover { text-decoration: underline; }
.cd-live { font-size: 10px; font-weight: 700; color: #22c55e; animation: coachPulse 2s infinite; }

/* Compact strip header (~60% smaller than old hero) */
.cd-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--surface)), color-mix(in srgb, #38bdf8 6%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}
.cd-strip__left { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.cd-strip__greet { font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.cd-strip__dot { width: 3px; height: 3px; border-radius: 999px; background: var(--muted); opacity: .5; }
.cd-strip__role, .cd-strip__org, .cd-strip__date { font-size: 11px; font-weight: 600; color: var(--muted); }
.cd-strip__org { color: var(--text); font-weight: 700; }
.cd-strip__stats { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-strip__chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--border);
}
.cd-strip__chip strong { font-size: 12px; font-weight: 900; }

/* Action toolbar */
.cd-toolbar {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: thin;
}
.cd-toolbar__btn {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 7px 11px;
  min-height: 44px; /* UX audit Wave 5 / M-4: the Dashboard's own quick-action row was under the 44px touch-target minimum */
  border-radius: 10px;
  /* Was surface@85%+transparent on a same-tone card -> the buttons and their
     labels were nearly invisible (reported 2026-07-24). Solid elevated surface,
     a primary-tinted border, and an explicit text colour so they read clearly. */
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  background: var(--surface-2); color: var(--text);
  cursor: pointer; white-space: nowrap;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.cd-toolbar__btn:hover {
  transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.1);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}
.cd-toolbar__ic { font-size: 14px; }
.cd-toolbar__lbl { font-size: 11px; font-weight: 700; color: var(--text); }

/* KPI row — 4 per row, dense */
.cd-kpis { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .cd-kpis { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .cd-kpis { grid-template-columns: repeat(5, 1fr); } }
.cd-kpi {
  text-align: left; padding: 10px 11px; border-radius: 12px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px); cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  transition: transform .15s, box-shadow .15s;
}
.cd-kpi:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.cd-kpi__row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.cd-kpi__ic { font-size: 16px; }
.cd-kpi__spark { width: 52px; height: 18px; opacity: .9; }
.cd-spark { width: 100%; height: 100%; display: block; }
.cd-kpi__val { display: block; font-size: 18px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.cd-kpi__lbl { display: block; font-size: 9px; font-weight: 800; text-transform: uppercase; color: var(--muted); letter-spacing: .05em; margin-top: 1px; }
.cd-kpi__meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; }
.cd-kpi__trend { font-size: 10px; font-weight: 700; color: #22c55e; }
.cd-kpi__delta, .cd-kpi__week { font-size: 9px; font-weight: 600; color: var(--muted); }
.cd-kpi--blue { background: linear-gradient(145deg, color-mix(in srgb, #3b82f6 10%, var(--surface)), var(--surface)); }
.cd-kpi--violet { background: linear-gradient(145deg, color-mix(in srgb, #8b5cf6 10%, var(--surface)), var(--surface)); }
.cd-kpi--green { background: linear-gradient(145deg, color-mix(in srgb, #22c55e 10%, var(--surface)), var(--surface)); }
.cd-kpi--rose { background: linear-gradient(145deg, color-mix(in srgb, #f43f5e 10%, var(--surface)), var(--surface)); }
.cd-kpi--cyan { background: linear-gradient(145deg, color-mix(in srgb, #06b6d4 10%, var(--surface)), var(--surface)); }
.cd-kpi--amber { background: linear-gradient(145deg, color-mix(in srgb, #f59e0b 10%, var(--surface)), var(--surface)); }
.cd-kpi--orange { background: linear-gradient(145deg, color-mix(in srgb, #f97316 10%, var(--surface)), var(--surface)); }
.cd-kpi--teal { background: linear-gradient(145deg, color-mix(in srgb, #14b8a6 10%, var(--surface)), var(--surface)); }
.cd-kpi--indigo { background: linear-gradient(145deg, color-mix(in srgb, #6366f1 10%, var(--surface)), var(--surface)); }
.cd-kpi--slate { background: linear-gradient(145deg, color-mix(in srgb, #64748b 10%, var(--surface)), var(--surface)); }

/* 12-col board */
.cd-board {
  display: grid; gap: 8px; grid-template-columns: repeat(12, 1fr);
}
.cd-w {
  grid-column: span 12; border-radius: 14px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(8px); overflow: hidden;
  box-shadow: 0 2px 14px rgba(0,0,0,.04);
  transition: box-shadow .18s;
}
.cd-w:hover { box-shadow: 0 6px 22px rgba(0,0,0,.08); }
.cd-w--3 { grid-column: span 12; }
.cd-w--4 { grid-column: span 12; }
.cd-w--8 { grid-column: span 12; }
.cd-w--12 { grid-column: span 12; }
@media (min-width: 720px) {
  .cd-w--3 { grid-column: span 3; }
  .cd-w--4 { grid-column: span 4; }
  .cd-w--8 { grid-column: span 8; }
}
.cd-w__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}
.cd-w__title { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.cd-w__subtitle { margin: 8px 0 4px; font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--muted); letter-spacing: .05em; }
.cd-w__body { padding: 10px 12px; }

/* Schedule */
.cd-schedule { display: grid; gap: 2px; }
.cd-schedule__row {
  display: grid; grid-template-columns: 42px 1fr auto; gap: 8px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.cd-schedule__row:last-child { border-bottom: none; }
.cd-schedule__row--dim { opacity: .65; grid-template-columns: 42px 1fr; }
.cd-schedule__time { font-size: 11px; font-weight: 800; color: var(--primary); }
.cd-schedule__main { min-width: 0; }
.cd-schedule__title { margin: 0 0 2px; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-schedule__type {
  display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--c, var(--primary)) 16%, var(--surface)); color: var(--c, var(--primary));
}
.cd-schedule__bar { height: 3px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 4px; }
.cd-schedule__fill { height: 100%; border-radius: 999px; transition: width .5s ease; }
.cd-schedule__pct { font-size: 10px; font-weight: 800; color: var(--muted); }

/* Workout timeline */
.cd-wktl { font-size: 11px; }
.cd-wktl__head, .cd-wktl__row {
  display: grid; grid-template-columns: 1.4fr 1fr .7fr .5fr .7fr .5fr; gap: 6px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.cd-wktl__head { font-size: 9px; font-weight: 800; text-transform: uppercase; color: var(--muted); letter-spacing: .04em; padding-top: 0; }
.cd-wktl__row:last-child { border-bottom: none; }
.cd-wktl__wk { display: flex; align-items: center; gap: 6px; font-weight: 700; min-width: 0; }
.cd-wktl__wk i { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.cd-pill {
  display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; text-transform: uppercase;
}
/* var(--yes)/var(--accent) instead of raw hex (UX audit Wave 5 / M-2): this
   used a different green/amber than the app's own semantic success/warning
   tokens, so "done" meant a different color here than everywhere else in
   the product, and never adapted for dark mode since it wasn't a var(). */
.cd-pill--ok { background: color-mix(in srgb, var(--yes) 18%, var(--surface)); color: var(--yes); }
.cd-pill--pend { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent); }
.cd-pill--skip { background: color-mix(in srgb, #94a3b8 18%, var(--surface)); color: #94a3b8; }

/* Athlete overview */
.cd-athletes { display: grid; gap: 6px; }
@media (min-width: 640px) { .cd-athletes { grid-template-columns: repeat(2, 1fr); } }
.cd-ath {
  padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); transition: transform .12s, box-shadow .12s;
}
.cd-ath:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.cd-ath__top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cd-ath__av {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  font-size: 13px; font-weight: 900; background: linear-gradient(135deg, var(--primary), #38bdf8); color: #fff;
}
.cd-ath__info { flex: 1; min-width: 0; }
.cd-ath__name { margin: 0; font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-ath__st {
  display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--c, var(--primary)) 14%, var(--surface)); color: var(--c, var(--primary));
}
.cd-ath__pct { font-size: 11px; font-weight: 900; color: var(--primary); }
.cd-ath__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.cd-ath__cell { padding: 4px 5px; border-radius: 6px; background: var(--surface); }
.cd-ath__k { display: block; font-size: 8px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.cd-ath__v { font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Charts */
.cd-bars { display: flex; align-items: flex-end; gap: 5px; height: 72px; }
.cd-bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; }
.cd-bars__track { flex: 1; width: 100%; display: flex; align-items: flex-end; border-radius: 4px 4px 0 0; background: var(--surface-2); }
.cd-bars__fill { width: 100%; border-radius: 4px 4px 0 0; transition: height .45s ease; min-height: 3px; }
.cd-bars__lbl { font-size: 8px; font-weight: 700; color: var(--muted); }

/* Heatmap */
.cd-heatmap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.cd-heatmap__c { aspect-ratio: 1; border-radius: 2px; background: var(--surface-2); transition: transform .1s; }
.cd-heatmap__c:hover { transform: scale(1.15); }
.cd-heatmap__c--0 { background: var(--surface-2); }
.cd-heatmap__c--1 { background: color-mix(in srgb, var(--primary) 22%, var(--surface-2)); }
.cd-heatmap__c--2 { background: color-mix(in srgb, var(--primary) 42%, var(--surface-2)); }
.cd-heatmap__c--3 { background: color-mix(in srgb, var(--primary) 62%, var(--surface-2)); }
.cd-heatmap__c--4 { background: var(--primary); }

/* Week calendar */
.cd-weekcal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cd-weekcal__day {
  text-align: center; padding: 6px 4px; border-radius: 8px; background: var(--surface-2);
  border: 1px solid transparent; transition: border-color .12s;
}
.cd-weekcal__day.is-today { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface-2)); }
.cd-weekcal__dow { display: block; font-size: 8px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.cd-weekcal__num { display: block; font-size: 13px; font-weight: 900; margin: 2px 0; }
.cd-weekcal__dots { display: flex; justify-content: center; gap: 2px; min-height: 6px; }
.cd-weekcal__dots i { width: 4px; height: 4px; border-radius: 999px; }

/* Notifications */
.cd-notif { display: grid; gap: 2px; }
.cd-notif__row {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: none; border-radius: 8px;
  min-height: 44px; /* UX audit Wave 5 / M-4 */
  background: transparent; cursor: pointer; text-align: left; color: var(--text);
  transition: background .12s;
}
.cd-notif__row:hover { background: var(--surface-2); }
.cd-notif__ic { font-size: 14px; }
.cd-notif__lbl { flex: 1; font-size: 12px; font-weight: 600; }
.cd-notif__cnt {
  font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted);
}
.cd-notif__cnt.has { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); color: var(--primary); }

/* AI Coach */
.cd-ai { display: grid; gap: 6px; }
.cd-ai__head { margin: 0; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cd-ai__tip {
  display: flex; align-items: flex-start; gap: 6px; padding: 6px 8px; border-radius: 8px;
  font-size: 11px; line-height: 1.4; background: var(--surface-2);
}
.cd-ai__badge {
  flex-shrink: 0; font-size: 8px; font-weight: 800; text-transform: uppercase; padding: 2px 5px;
  border-radius: 4px; background: color-mix(in srgb, var(--primary) 16%, var(--surface)); color: var(--primary);
}
.cd-ai__risk { margin: 4px 0 0; font-size: 11px; font-weight: 700; color: #f59e0b; }

/* Races */
.cd-races { display: grid; gap: 4px; }
.cd-races__row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.cd-races__row:last-child { border-bottom: none; }
.cd-races__title { margin: 0; font-size: 12px; font-weight: 800; }
.cd-races__meta { margin: 2px 0 0; font-size: 10px; color: var(--muted); }
.cd-races__cd {
  flex-shrink: 0; font-size: 11px; font-weight: 900; padding: 4px 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary);
}

/* Activity feed */
.cd-feed { display: grid; gap: 2px; }
.cd-feed__row {
  display: flex; align-items: center; gap: 6px; padding: 5px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent); font-size: 11px;
}
.cd-feed__row:last-child { border-bottom: none; }
.cd-feed__ic { flex-shrink: 0; }
.cd-feed__txt { flex: 1; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-feed__time { font-size: 9px; color: var(--muted); white-space: nowrap; }

/* Empty states */
.cd-empty {
  text-align: center; padding: 20px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
}
.cd-empty__ic { display: block; font-size: 28px; margin-bottom: 6px; }
.cd-empty__title { margin: 0 0 4px; font-size: 13px; font-weight: 800; color: var(--text); }
.cd-empty__hint { margin: 0 0 10px; font-size: 11px; color: var(--muted); line-height: 1.4; }

/* Skeleton */
.cd-skel { display: grid; gap: 8px; padding: 8px 0; }
.cd-skel__bar, .cd-skel__kpis, .cd-skel__grid {
  border-radius: 12px; height: 44px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: coachShimmer 1.2s infinite;
}
.cd-skel__kpis { height: 72px; }
.cd-skel__grid { height: 200px; }

/* Admin preview panel */
.cd-preview {
  margin-top: 12px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface);
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
}
.cd-preview__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cd-preview__title { margin: 0; font-size: 14px; font-weight: 800; }
.cd-preview__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cd-preview__kpi {
  text-align: center; padding: 8px 6px; border-radius: 10px; background: var(--surface-2);
  cursor: pointer; transition: transform .12s;
}
.cd-preview__kpi:hover { transform: translateY(-2px); }
.cd-preview__ic { display: block; font-size: 14px; }
.cd-preview__kpi strong { display: block; font-size: 16px; font-weight: 900; }
.cd-preview__lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.cd-preview__athletes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cd-preview__chip {
  padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border);
}

/* Coach Hub workspace */
.cd-hub { display: grid; gap: 10px; padding-bottom: 24px; }
.cd-hub-orgs { display: grid; gap: 8px; }
@media (min-width: 720px) { .cd-hub-orgs { grid-template-columns: repeat(2, 1fr); } }
.cd-hub-org {
  padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.cd-hub-org:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.cd-hub-org.is-active { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); }
.cd-hub-org__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cd-hub-org__name { margin: 0; font-size: 14px; font-weight: 800; }
.cd-hub-org__meta { margin: 2px 0 0; font-size: 11px; color: var(--muted); }
.cd-hub-org__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.cd-hub-org__stat { padding: 6px 8px; border-radius: 8px; background: var(--surface); text-align: center; }
.cd-hub-org__k { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.cd-hub-org__actions { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 599px) {
  .cd-strip { padding: 8px 10px; }
  .cd-strip__greet { font-size: 13px; }
  .cd-kpi__val { font-size: 16px; }
  .cd-wktl__head { display: none; }
  .cd-wktl__row { grid-template-columns: 1fr 1fr; gap: 4px; }
  .cd-ath__grid { grid-template-columns: repeat(2, 1fr); }
  .cd-preview__kpis { grid-template-columns: repeat(2, 1fr); }
  .cd-toolbar__lbl { display: none; }
  .cd-toolbar__btn { padding: 8px 10px; }
}

/* ========================================================================== */
/*  ATHLETE PROFILE v2 (.ap-*) — Enterprise Performance Dashboard            */
/* ========================================================================== */
.view--profile { padding-bottom: 88px; }

/* Race member profile (community — όχι Garmin dashboard) */
.rmp { display: grid; gap: 14px; }
.rmp-card { padding: 16px; }
.rmp-card__row { display: flex; gap: 14px; align-items: flex-start; }
.rmp-card__logo { width: 64px; height: 64px; flex: none; border-radius: 16px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
.rmp-card__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.rmp-card__info { flex: 1; min-width: 0; }
.rmp-card__role { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); margin-bottom: 4px; }
.rmp-card__name { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.rmp-sec__h { margin: 0 0 10px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rmp-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rmp-link { justify-content: flex-start; min-height: 44px; }
.view--profile .rc-am--tap { cursor: pointer; border: 0; background: var(--surface-2); color: var(--text); border-radius: 12px; padding: 10px 8px; font-family: inherit; text-align: center; }
.view--profile .badge-chip--earned { cursor: pointer; border: 0; font-family: inherit; }
.ap-dash { display: grid; gap: 10px; animation: apFadeIn .35s ease; }
@keyframes apFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ap-muted { margin: 0; font-size: 12px; color: var(--muted); }
.ap-link { border: none; background: none; padding: 0; font-size: 11px; font-weight: 700; color: var(--primary); cursor: pointer; }
.ap-link:hover { text-decoration: underline; }
.ap-pill { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.ap-pill--ok { background: color-mix(in srgb, #22c55e 18%, var(--surface)); color: #22c55e; }
.ap-pill--pend { background: color-mix(in srgb, #f59e0b 18%, var(--surface)); color: #f59e0b; }

/* Compact hero (~60% smaller than old red banner) */
.ap-hero {
  display: grid; gap: 12px; grid-template-columns: 1fr;
  padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--surface)), color-mix(in srgb, #38bdf8 8%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}
@media (min-width: 800px) { .ap-hero { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.ap-hero--member { grid-template-columns: 1fr; }
.ap-hero__left { display: flex; gap: 12px; align-items: flex-start; }
.ap-hero__av {
  width: 52px; height: 52px; border-radius: 14px; object-fit: cover; flex-shrink: 0;
  border: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
}
.ap-hero__av--ph {
  display: grid; place-items: center; font-size: 20px; font-weight: 900;
  background: linear-gradient(135deg, var(--primary), #38bdf8); color: #fff;
}
.ap-hero__info { flex: 1; min-width: 0; }
.ap-hero__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.ap-hero__badge {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary);
}
.ap-hero__badge--gold { background: color-mix(in srgb, #f59e0b 20%, var(--surface)); color: #f59e0b; }
.ap-hero__badge--ok { background: color-mix(in srgb, #22c55e 18%, var(--surface)); color: #22c55e; }
.ap-hero__name { margin: 0; font-size: 18px; font-weight: 900; letter-spacing: -.02em; }
.ap-hero__meta { margin: 4px 0 8px; font-size: 11px; color: var(--muted); font-weight: 600; }
.ap-hero__edit {
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px;
  font-size: 11px; font-weight: 700; background: var(--surface); cursor: pointer; color: var(--text);
  transition: transform .12s, box-shadow .12s;
}
.ap-hero__edit:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.ap-hero__right { min-width: 0; }
.ap-hero__status-title { margin: 0 0 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--muted); letter-spacing: .05em; }
.ap-hero__status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
@media (min-width: 500px) { .ap-hero__status-grid { grid-template-columns: repeat(3, 1fr); } }
.ap-hero__stat { padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.ap-hero__k { display: block; font-size: 8px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.ap-hero__v { display: block; font-size: 11px; font-weight: 800; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* KPI row */
.ap-kpis { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 640px) { .ap-kpis { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .ap-kpis { grid-template-columns: repeat(6, 1fr); } }
.ap-kpi {
  padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(6px); transition: transform .12s, box-shadow .12s;
}
.ap-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.ap-kpi__ic { display: block; font-size: 14px; margin-bottom: 2px; }
.ap-kpi__val { display: block; font-size: 14px; font-weight: 900; line-height: 1.1; }
.ap-kpi__lbl { display: block; font-size: 8px; font-weight: 800; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.ap-kpi__trend { display: block; font-size: 9px; font-weight: 600; color: #22c55e; margin-top: 2px; }

/* Board */
.ap-board { display: grid; gap: 8px; grid-template-columns: repeat(12, 1fr); }
.ap-w {
  grid-column: span 12; border-radius: 14px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(8px); overflow: hidden;
  box-shadow: 0 2px 14px rgba(0,0,0,.04); transition: box-shadow .18s;
}
.ap-w:hover { box-shadow: 0 6px 22px rgba(0,0,0,.08); }
.ap-w--4 { grid-column: span 12; }
.ap-w--6 { grid-column: span 12; }
.ap-w--12 { grid-column: span 12; }
@media (min-width: 720px) {
  .ap-w--4 { grid-column: span 4; }
  .ap-w--6 { grid-column: span 6; }
}
.ap-w__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 80%, transparent); }
.ap-w__title { margin: 0; font-size: 12px; font-weight: 800; }
.ap-w__subtitle { margin: 8px 0 4px; font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.ap-w__body { padding: 10px 12px; }

/* Performance */
.ap-perf { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
@media (min-width: 640px) { .ap-perf { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .ap-perf { grid-template-columns: repeat(7, 1fr); } }
.ap-perf__cell { padding: 8px; border-radius: 8px; background: var(--surface-2); text-align: center; }
.ap-perf__k { display: block; font-size: 8px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.ap-perf__v { display: block; font-size: 13px; font-weight: 900; margin-top: 2px; }

/* Charts */
.ap-bars { display: flex; align-items: flex-end; gap: 5px; height: 72px; }
.ap-bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; }
.ap-bars__track { flex: 1; width: 100%; display: flex; align-items: flex-end; border-radius: 4px 4px 0 0; background: var(--surface-2); }
.ap-bars__fill { width: 100%; border-radius: 4px 4px 0 0; transition: height .45s ease; min-height: 3px; }
.ap-bars__lbl { font-size: 8px; font-weight: 700; color: var(--muted); }

/* Activity feed */
.ap-feed { display: grid; gap: 2px; }
.ap-feed__row { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent); font-size: 11px; }
.ap-feed__row:last-child { border-bottom: none; }
.ap-feed__txt { flex: 1; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-feed__time { font-size: 9px; color: var(--muted); }

/* Workout list */
.ap-wklist { display: grid; gap: 2px; }
.ap-wklist__row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.ap-wklist__title { flex: 1; margin: 0; font-size: 12px; font-weight: 700; }
.ap-wklist__meta { font-size: 10px; color: var(--muted); }

/* Races */
.ap-races { display: grid; gap: 4px; }
.ap-races__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.ap-races__title { margin: 0; font-size: 12px; font-weight: 800; }
.ap-races__meta, .ap-races__notes { margin: 2px 0 0; font-size: 10px; color: var(--muted); }
.ap-races__cd { flex-shrink: 0; font-size: 11px; font-weight: 900; padding: 4px 8px; border-radius: 8px; background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }

/* PRs */
.ap-prs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (min-width: 640px) { .ap-prs { grid-template-columns: repeat(5, 1fr); } }
.ap-pr { text-align: center; padding: 8px 6px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.ap-pr.is-empty { opacity: .5; }
.ap-pr__dist { display: block; font-size: 10px; font-weight: 800; color: var(--primary); }
.ap-pr__time { display: block; font-size: 12px; font-weight: 900; margin-top: 2px; }

/* Badges grid */
.ap-badges { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .ap-badges { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .ap-badges { grid-template-columns: repeat(4, 1fr); } }
.ap-badge {
  padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2);
  transition: transform .12s, box-shadow .12s;
}
.ap-badge:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.ap-badge.is-locked { opacity: .55; filter: grayscale(.4); }
.ap-badge__ic { font-size: 22px; }
.ap-badge__title { margin: 4px 0 0; font-size: 12px; font-weight: 800; }
.ap-badge__desc { margin: 2px 0 6px; font-size: 10px; color: var(--muted); line-height: 1.3; }
.ap-badge__bar { height: 3px; border-radius: 999px; background: var(--border); overflow: hidden; }
.ap-badge__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), #38bdf8); }
.ap-badge__meta { display: flex; justify-content: space-between; margin-top: 4px; font-size: 9px; font-weight: 700; color: var(--muted); }

/* Devices */
.ap-devices { display: grid; gap: 6px; }
.ap-device { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.ap-device.is-on { border-color: color-mix(in srgb, #22c55e 40%, var(--border)); }
.ap-device__ic { font-size: 18px; }
.ap-device__info { flex: 1; min-width: 0; }
.ap-device__name { margin: 0; font-size: 12px; font-weight: 800; }
.ap-device__meta { margin: 2px 0 0; font-size: 10px; color: var(--muted); }

/* Coach */
.ap-coach { display: grid; gap: 8px; }
.ap-coach__top { display: flex; gap: 10px; align-items: center; }
.ap-coach__av { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; background: var(--surface-2); }
.ap-coach__name { margin: 0; font-size: 13px; font-weight: 800; }
.ap-coach__plan { margin: 2px 0 0; font-size: 11px; color: var(--muted); }
.ap-coach__comment { margin: 0; font-size: 11px; line-height: 1.4; color: var(--muted); padding: 8px; border-radius: 8px; background: var(--surface-2); }

/* Health */
.ap-health { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
@media (min-width: 640px) { .ap-health { grid-template-columns: repeat(4, 1fr); } }
.ap-health__cell { padding: 6px 8px; border-radius: 8px; background: var(--surface-2); }
.ap-health__k { display: block; font-size: 8px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.ap-health__v { font-size: 12px; font-weight: 800; }
.ap-health__zones { grid-column: 1 / -1; display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.ap-health__zone { font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--primary) calc(12% + var(--i, 0) * 8%), var(--surface)); }

/* Goals */
.ap-goals { display: grid; gap: 6px; }
.ap-goals__row { display: flex; justify-content: space-between; font-size: 12px; }
.ap-goals__k { color: var(--muted); font-weight: 600; }
.ap-goals__v { font-weight: 800; }
.ap-goals__bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 4px; }
.ap-goals__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), #22c55e); }
.ap-goals__pct { font-size: 10px; font-weight: 700; color: var(--muted); }

/* AI */
.ap-ai { display: grid; gap: 6px; }
.ap-ai__tip { display: flex; gap: 6px; padding: 6px 8px; border-radius: 8px; font-size: 11px; background: var(--surface-2); line-height: 1.4; }
.ap-ai__badge { flex-shrink: 0; font-size: 8px; font-weight: 800; text-transform: uppercase; padding: 2px 5px; border-radius: 4px; background: color-mix(in srgb, var(--primary) 16%, var(--surface)); color: var(--primary); }

/* Calendar */
.ap-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ap-cal__pad { aspect-ratio: 1; }
.ap-cal__day { aspect-ratio: 1; text-align: center; padding: 4px 2px; border-radius: 6px; background: var(--surface-2); border: 1px solid transparent; font-size: 10px; }
.ap-cal__day.is-today { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface-2)); }
.ap-cal__num { font-weight: 800; }
.ap-cal__dots { display: flex; justify-content: center; gap: 2px; min-height: 4px; margin-top: 2px; }
.ap-cal__dots i { width: 3px; height: 3px; border-radius: 999px; }

/* Achievements */
.ap-achieve { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-achieve__chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--border); }

/* Ring */
.ap-ring { position: relative; width: 48px; height: 48px; }
.ap-ring__svg { width: 100%; height: 100%; }
.ap-ring__val { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 900; }
.ap-ring__lbl { display: block; text-align: center; font-size: 8px; color: var(--muted); }

/* Load & Fatigue */
.ap-load__top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ap-load__top .ap-ring { width: 72px; height: 72px; flex-shrink: 0; }
.ap-load__top .ap-ring__val { font-size: 15px; }
.ap-load__reco { flex: 1; min-width: 200px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13px; font-weight: 600; line-height: 1.4; }
.ap-load__disclaimer { margin: 10px 0 0; font-size: 10px; color: var(--muted); line-height: 1.4; }

/* Race Predictor */
.ap-predict__table, .ap-predict__zones { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.ap-predict__row, .ap-predict__zonerow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); font-size: 12px; }
.ap-predict__dist, .ap-predict__zonename { font-weight: 700; }
.ap-predict__time { font-weight: 800; }
.ap-predict__pace, .ap-predict__zonepace { color: var(--muted); font-variant-numeric: tabular-nums; }
.ap-predict__zonenote { font-size: 10px; color: var(--muted); font-style: italic; }

/* PMC Chart (Performance Management Chart) — js/lib/athlete/pmc-chart.js */
.pmc__filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pmc__filterBtn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px;
  padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.pmc__filterBtn.is-active { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); border-color: var(--primary); color: var(--primary); }
.pmc__chartHost { position: relative; }
.pmc__chartWrap { position: relative; }
.pmc__svg { width: 100%; height: auto; display: block; overflow: visible; }
.pmc__empty { text-align: center; padding: 24px 0; }

.pmc__grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pmc__grid--zero { stroke: var(--muted); }
.pmc__tick { font-size: 9px; fill: var(--muted); font-family: inherit; }

.pmc__line { stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.pmc__line--ctl { stroke: var(--pmc-ctl); }
.pmc__line--atl { stroke: var(--pmc-atl); }
.pmc__line--tsb { stroke: var(--pmc-tsb); }

.pmc__dot { stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pmc__dot--ctl { fill: var(--pmc-ctl); }
.pmc__dot--atl { fill: var(--pmc-atl); }
.pmc__dot--tsb { fill: var(--pmc-tsb); }

.pmc__endLabel { font-size: 10px; font-weight: 800; fill: var(--text); font-family: inherit; }
.pmc__crosshair { stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.pmc__hit { fill: transparent; cursor: crosshair; touch-action: none; }

.pmc__tooltip {
  position: absolute; z-index: 2; min-width: 120px; padding: 8px 10px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  pointer-events: none;
}
.pmc__tooltipDate { margin: 0 0 4px; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: capitalize; }
.pmc__tooltipRow { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 1px 0; }
.pmc__tooltipKey { width: 10px; height: 2px; border-radius: 2px; flex-shrink: 0; }
.pmc__tooltipKey--ctl { background: var(--pmc-ctl); }
.pmc__tooltipKey--atl { background: var(--pmc-atl); }
.pmc__tooltipKey--tsb { background: var(--pmc-tsb); }
.pmc__tooltipLbl { color: var(--muted); flex: 1; }
.pmc__tooltipVal { color: var(--text); font-variant-numeric: tabular-nums; }

.pmc__legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.pmc__legendItem { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.pmc__legendKey { width: 14px; height: 2px; border-radius: 2px; flex-shrink: 0; }
.pmc__legendKey--ctl { background: var(--pmc-ctl); }
.pmc__legendKey--atl { background: var(--pmc-atl); }
.pmc__legendKey--tsb { background: var(--pmc-tsb); }

/* Season Timeline (Annual Training Plan) — js/lib/athlete/season-timeline.js
   UX audit Wave 5 / M-7: the SVG had zero responsive handling -- width:100%
   meant the whole diagram (bars AND phase-label text together, since SVG
   font-size lives in the same scaling viewBox coordinate space) shrank
   proportionally with the viewport, so labels sized to be readable at
   ~720px could render at a fraction of that on a narrow phone. Rather than
   add a resize-aware JS re-layout, this caps how far it can shrink and lets
   the wrapper scroll horizontally below that -- the same pattern already
   used for wide tables/code blocks -- so labels never render smaller than
   their designed size. */
.ptz__chartWrap { position: relative; overflow-x: auto; }
.ptz__svg { width: 100%; min-width: 480px; height: auto; display: block; overflow: visible; }
.ptz__empty { text-align: center; padding: 16px 0; }
.ptz__grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ptz__tick { font-size: 9px; fill: var(--muted); font-family: inherit; }
.ptz__bar { stroke: var(--surface); stroke-width: 2; }
.ptz__bar:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.ptz__bar--base { fill: var(--ptz-base); }
.ptz__bar--build { fill: var(--ptz-build); }
.ptz__bar--peak { fill: var(--ptz-peak); }
.ptz__bar--taper { fill: var(--ptz-taper); }
.ptz__bar--race { fill: var(--ptz-race); }
.ptz__bar--transition { fill: var(--ptz-transition); }
.ptz__bar--recovery { fill: var(--ptz-recovery); }
.ptz__barLabel { font-size: 10px; font-weight: 800; fill: #fff; font-family: inherit; pointer-events: none; }
.ptz__today { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.ptz__todayLbl { font-size: 9px; font-weight: 700; fill: var(--text); font-family: inherit; }

.ptz__tooltip {
  position: absolute; z-index: 2; min-width: 140px; max-width: 240px; padding: 8px 10px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); pointer-events: none;
}
.ptz__tooltipTitle { margin: 0 0 2px; font-size: 12px; font-weight: 800; color: var(--text); }
.ptz__tooltipRange { margin: 0 0 2px; font-size: 11px; color: var(--muted); }
.ptz__tooltipMeta { margin: 2px 0 0; font-size: 11px; color: var(--muted); }

.ptz__legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.ptz__legendItem { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted); }
.ptz__legendKey { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.ptz__legendKey--base { background: var(--ptz-base); }
.ptz__legendKey--build { background: var(--ptz-build); }
.ptz__legendKey--peak { background: var(--ptz-peak); }
.ptz__legendKey--taper { background: var(--ptz-taper); }
.ptz__legendKey--race { background: var(--ptz-race); }
.ptz__legendKey--transition { background: var(--ptz-transition); }
.ptz__legendKey--recovery { background: var(--ptz-recovery); }

/* Empty & skeleton */
.ap-empty { text-align: center; padding: 16px 12px; border-radius: 10px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent); }
.ap-empty__ic { display: block; font-size: 28px; margin-bottom: 6px; }
.ap-empty__title { margin: 0 0 4px; font-size: 13px; font-weight: 800; }
.ap-empty__hint { margin: 0 0 10px; font-size: 11px; color: var(--muted); line-height: 1.4; }
.ap-skel { display: grid; gap: 8px; }
.ap-skel__hero, .ap-skel__kpis, .ap-skel__grid { border-radius: 12px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: coachShimmer 1.2s infinite; }
.ap-skel__hero { height: 80px; }
.ap-skel__kpis { height: 60px; }
.ap-skel__grid { height: 200px; }

@media (max-width: 599px) {
  .ap-hero__name { font-size: 16px; }
  .ap-kpis { grid-template-columns: repeat(2, 1fr); }
  .ap-hero__status-grid { grid-template-columns: repeat(2, 1fr); }
  .ap-prs { grid-template-columns: repeat(2, 1fr); }
}

/* Athlete Module pages — shared shell extensions */
.ap-page { display: grid; gap: 10px; padding-bottom: 88px; animation: apFadeIn .35s ease; }
.ap-page__body { display: grid; gap: 8px; }
.ap-strip-wrap { display: grid; gap: 6px; }
.ap-back {
  display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 0;
  color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  justify-self: start;
}
.ap-back:hover { color: var(--primary); }

.ap-strip {
  display: grid; gap: 8px; padding: 10px 14px; border-radius: 14px;
  /* Was based on --surface, which is nearly the page background on the dark
     theme -> the whole hero + its chips read as dark-on-dark. Base it on the
     elevated --surface-2 with a stronger tint/border so it clearly lifts. */
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 15%, var(--surface-2)), color-mix(in srgb, #38bdf8 9%, var(--surface-2)));
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border));
  box-shadow: 0 4px 20px rgba(0,0,0,.08); backdrop-filter: blur(10px);
}
.ap-strip__left { display: flex; gap: 10px; align-items: flex-start; }
.ap-strip__icon { font-size: 22px; line-height: 1; }
.ap-strip__title { margin: 0; font-size: 16px; font-weight: 900; letter-spacing: -.02em; }
.ap-strip__desc { margin: 2px 0 0; font-size: 11px; color: var(--muted); font-weight: 600; }
.ap-strip__stats { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-strip__chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; color: var(--text);
  /* Solid elevated fill + explicit text colour so the numbers/icons read on
     the tinted hero instead of vanishing (was surface@70% over a dark strip). */
  background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
}
.ap-strip__chip strong { font-size: 11px; font-weight: 900; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ap-toolbar { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0; scrollbar-width: thin; }
.ap-toolbar__btn {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 7px 11px;
  border-radius: 10px; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); background: var(--surface-2);
  cursor: pointer; white-space: nowrap; transition: transform .12s, box-shadow .12s, border-color .12s;
}
.ap-toolbar__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.ap-toolbar__ic { font-size: 14px; }
.ap-toolbar__lbl { font-size: 11px; font-weight: 700; color: var(--text); }

/* Athlete Performance Profile (coach dashboard) */
.app-perf { display: grid; gap: 14px; }
.app-perf__top { display: grid; gap: 6px; }
.app-perf__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.app-perf__sec { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 12px 14px; }
.app-perf__secHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.app-perf__h { margin: 0; font-size: 14px; font-weight: 800; }
.app-perf__form { display: grid; gap: 10px; }
.app-perf__grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .app-perf__grid { grid-template-columns: repeat(3, 1fr); } }
.app-perf__list { display: grid; gap: 6px; margin-bottom: 10px; }
.app-perf__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.app-perf__row.is-active { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent); }
.app-perf__rowTitle { margin: 0; font-size: 13px; font-weight: 700; color: var(--text); }
.app-perf__rowActions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.app-perf__note { margin: 0; font-size: 13px; color: var(--text); }
.app-perf__addRow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.app-perf__addRow .input { flex: 1 1 120px; min-width: 0; }
.app-perf__zoneGrid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .app-perf__zoneGrid { grid-template-columns: repeat(2, 1fr); } }
.app-perf__zoneCard { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 10px 12px; }
.app-perf__zoneHead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.app-perf__zoneRows { display: grid; gap: 3px; }
.app-perf__zoneRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent); }
.app-perf__zoneRow:last-child { border-bottom: 0; }
.app-perf__zoneKey { font-weight: 800; color: var(--primary); }
.app-perf__riskHead { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.app-perf__riskScore { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; font-size: 22px; font-weight: 900; color: #fff; flex: 0 0 auto; }
.app-perf__riskScore--teal { background: #0f8a72; }
.app-perf__riskScore--amber { background: #d97706; }
.app-perf__riskScore--coral { background: #dc2626; }
.app-perf__factors { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.app-perf__factor { font-size: 13px; }
.app-perf__factor--high { color: #dc2626; font-weight: 700; }
.app-perf__factor--moderate { color: #d97706; }
.app-perf__factor--low { color: var(--muted); }

/* Phase 4 — Evolution + Development timeline */
.app-perf__evoGrid { display: grid; gap: 8px; grid-template-columns: 1fr; margin-bottom: 10px; }
@media (min-width: 640px) { .app-perf__evoGrid { grid-template-columns: repeat(3, 1fr); } }
.app-perf__evoCard { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.app-perf__evoLbl { font-size: 12px; font-weight: 700; color: var(--muted); }
.app-perf__evoVal { font-size: 18px; font-weight: 900; color: var(--text); }
.app-perf__evoDelta { font-size: 12px; font-weight: 700; }
.app-perf__evoDelta--up { color: #0f8a72; }
.app-perf__evoDelta--down { color: #dc2626; }
.app-perf__evoDelta--flat { color: var(--muted); }
.app-perf__evoPr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent); }
.app-perf__evoPr:last-child { border-bottom: 0; }
.app-perf__spark { width: 120px; height: 28px; flex: 0 0 auto; }
.app-perf__spark polyline { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.app-perf__spark--up polyline { stroke: #0f8a72; }
.app-perf__spark--down polyline { stroke: #dc2626; }
.app-perf__timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.app-perf__tlItem { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-left: 2px solid var(--border); margin-left: 6px; padding-left: 12px; position: relative; }
.app-perf__tlItem--test { border-left-color: #6366f1; }
.app-perf__tlItem--pr { border-left-color: #0f8a72; }
.app-perf__tlItem--goal { border-left-color: #d97706; }
.app-perf__tlIcon { font-size: 16px; flex: 0 0 auto; line-height: 1.2; }
.app-perf__tlBody { display: grid; gap: 1px; min-width: 0; }

/* ===== Coach registration / onboarding / directory ===== */
.coach-onb__wrap { max-width: 720px; margin: 0 auto; display: grid; gap: 14px; }
.coach-onb__head { text-align: center; }
.coach-onb__title { margin: 0; font-size: 20px; font-weight: 900; }
.coach-onb__prog { display: flex; gap: 6px; }
.coach-onb__progStep { flex: 1; display: grid; gap: 4px; justify-items: center; opacity: .5; }
.coach-onb__progStep.is-active, .coach-onb__progStep.is-done { opacity: 1; }
.coach-onb__progDot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--surface-2); color: var(--muted); border: 2px solid var(--border); }
.coach-onb__progStep.is-active .coach-onb__progDot { background: var(--primary); color: #fff; border-color: var(--primary); }
.coach-onb__progStep.is-done .coach-onb__progDot { background: #0f8a72; color: #fff; border-color: #0f8a72; }
.coach-onb__progLbl { font-size: 11px; color: var(--muted); text-align: center; }
.coach-onb__card { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 16px; }
.coach-onb__lead { margin: 0 0 12px; color: var(--muted); }
.coach-onb__nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }
.coach-onb__paths { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .coach-onb__paths { grid-template-columns: repeat(3, 1fr); } }
.coach-onb__pathCard, .coach-onb__roleCard { display: grid; gap: 4px; text-align: left; padding: 14px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface-2); cursor: pointer; transition: border-color .15s, transform .1s; color: var(--text); font-family: inherit; }
.coach-onb__pathCard:hover, .coach-onb__roleCard:hover { transform: translateY(-1px); }
.coach-onb__pathCard.is-active, .coach-onb__roleCard.is-active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.coach-onb__pathIcon { font-size: 26px; }
.coach-onb__roles { display: grid; gap: 8px; margin: 12px 0; }
.coach-onb__orgResults { display: grid; gap: 4px; margin: 6px 0; }
.coach-onb__orgOpt { text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); cursor: pointer; color: var(--text); font-family: inherit; }
.coach-onb__orgOpt.is-active { border-color: var(--primary); }
.coach-onb__ok { color: #0f8a72; font-weight: 700; margin: 0; }
.coach-onb__inviteInfo { margin-top: 10px; display: grid; gap: 8px; }
.coach-onb__statusCard, .coach-onb__welcome { text-align: center; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); padding: 28px 18px; display: grid; gap: 8px; justify-items: center; }
.coach-onb__statusIcon { font-size: 44px; }
.coach-onb__check { display: grid; gap: 8px; }
.coach-onb__checkTitle { margin: 6px 0; font-size: 15px; }
.coach-onb__checkRow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.coach-onb__checkMark { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; font-size: 13px; color: #fff; }
.coach-onb__checkMark.is-done { background: #0f8a72; border-color: #0f8a72; }
.coach-onb__checkLbl { flex: 1; font-size: 14px; }
.coach-form { display: grid; gap: 12px; }
.coach-form__grid2 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .coach-form__grid2 { grid-template-columns: 1fr 1fr; } }
.coach-form__photoRow { display: flex; align-items: center; gap: 14px; }
.coach-form__avatar { width: 72px; height: 72px; flex: 0 0 auto; border-radius: 50%; background: var(--surface-2) center/cover no-repeat; border: 1px solid var(--border); display: grid; place-items: center; font-size: 26px; }
.coach-form__check { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; font-size: 14px; }
.coach-dir__filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.coach-dir__grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .coach-dir__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .coach-dir__grid { grid-template-columns: repeat(3, 1fr); } }
.coach-dir__card { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); cursor: pointer; transition: transform .1s, box-shadow .1s; color: var(--text); font-family: inherit; }
.coach-dir__card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.coach-dir__avatar { flex: 0 0 auto; border-radius: 50%; background: var(--surface-2) center/cover no-repeat; display: grid; place-items: center; font-weight: 800; color: var(--muted); }
.coach-dir__name { margin: 0; font-weight: 800; }
.coach-dir__cardBody { min-width: 0; }
.coach-dir__head { display: flex; gap: 14px; align-items: center; }
.coach-dir__actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.coach-matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
.coach-matrix th, .coach-matrix td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; }
.coach-matrix th { background: var(--surface-2); font-weight: 700; }
.coach-matrix__cell { text-align: center; }

/* ===== Activity page ===== */
.act__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.act__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
@media (min-width: 640px) { .act__tiles { grid-template-columns: repeat(6, 1fr); } }
.act__tile { text-align: center; padding: 10px 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.act__tileV { display: block; font-size: 16px; font-weight: 900; color: var(--text); }
.act__tileK { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.act__insights { display: grid; gap: 8px; }
.act__insight { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.act__insightIcon { font-size: 18px; flex: 0 0 auto; line-height: 1.3; }
.act__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.act__badge { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.act__badge--gold { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #b45309; border-color: transparent; }
.act .atv__map { width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.act__map3d { width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); position: relative; }
.act__map3d canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; cursor: grab; }
.act__map3d canvas:active { cursor: grabbing; }
.act__media { display: flex; flex-wrap: wrap; gap: 8px; }
.act__photo { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.act__comments { display: grid; gap: 8px; margin-bottom: 8px; }
.act__comment { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.act__embed { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); cursor: pointer; margin-top: 8px; text-align: left; width: 100%; font-family: inherit; color: var(--text); }
.act__embed:hover { border-color: var(--primary); }
.act__embedIcon { font-size: 26px; flex: 0 0 auto; }

.ap-seg { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); overflow-x: auto; }
.ap-seg__btn {
  flex: 1; min-width: 0; padding: 8px 12px; border: none; border-radius: 9px;
  font-size: 12px; font-weight: 700; background: transparent; color: color-mix(in srgb, var(--text) 65%, transparent); cursor: pointer;
  transition: background .12s, color .12s;
}
/* Active tab: a clear primary tint instead of --surface (which was almost
   identical to the --surface-2 track on the dark theme). */
.ap-seg__btn.is-active { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.06); }

.ap-empty__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }

/* Training workout cards */
.ap-wkcard {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); margin-bottom: 6px; transition: transform .12s, box-shadow .12s;
}
.ap-wkcard:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.ap-wkcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ap-wkcard__title { margin: 0; font-size: 13px; font-weight: 800; }
.ap-wkcard__meta { margin: 2px 0 0; font-size: 11px; color: var(--muted); }
.ap-wkcard__actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ap-pill--skip { background: color-mix(in srgb, #94a3b8 18%, var(--surface)); color: #94a3b8; }
.ap-cal-panel { margin-top: 10px; }

/* Announcements news feed */
.ap-feed--news { display: grid; gap: 8px; }
.ap-news {
  padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2);
  transition: transform .12s, box-shadow .12s;
}
.ap-news:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.ap-news.is-unread { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.ap-news__head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ap-news__cat { font-size: 9px; font-weight: 800; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }
.ap-news__badge { font-size: 9px; font-weight: 800; color: var(--primary); }
.ap-news__title { margin: 0 0 4px; font-size: 14px; font-weight: 800; }
.ap-news__body { margin: 0 0 8px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.ap-news__meta { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
.ap-news__img { width: 100%; border-radius: 8px; margin: 8px 0; max-height: 160px; object-fit: cover; }
.ap-news__file { display: inline-block; font-size: 11px; font-weight: 700; margin-bottom: 8px; }
.ap-news__foot { margin-top: 8px; }

/* Chat layout */
.ap-chat__layout { display: grid; gap: 8px; grid-template-columns: 1fr; min-height: 420px; }
.ap-chat__mobile-tabs { display: block; margin-bottom: 8px; }
@media (min-width: 900px) {
  .ap-chat__layout { grid-template-columns: 200px 1fr 160px; }
  .ap-chat__mobile-tabs { display: none; }
}
.ap-chat__side, .ap-chat__right {
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2);
  padding: 10px; display: none; color: var(--text);
}
@media (min-width: 900px) { .ap-chat__side, .ap-chat__right { display: block; } }
.ap-chat__side-title { margin: 0 0 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--label); letter-spacing: .05em; }
.ap-chat__convo {
  display: flex; gap: 8px; width: 100%; padding: 8px; border: none; border-radius: 8px;
  background: transparent; cursor: pointer; text-align: left; margin-bottom: 4px; transition: background .12s;
  color: var(--text); font-family: inherit;
}
.ap-chat__convo:hover, .ap-chat__convo.is-active { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); }
.ap-chat__convo.is-active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, var(--border)); }
.ap-chat__convo-ic { font-size: 16px; }
.ap-chat__convo-lbl { margin: 0; font-size: 12px; font-weight: 800; color: var(--text); }
.ap-chat__convo-sub { margin: 2px 0 0; font-size: 10px; color: var(--text-secondary); }
.ap-chat__new { width: 100%; margin-top: 8px; }
.ap-chat__main {
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface);
  padding: 10px; min-height: 360px; overflow: hidden;
}
.ap-chat__main .chat__thread { max-height: 300px; overflow-y: auto; }
.ap-chat__online { display: grid; gap: 4px; margin-bottom: 12px; }
.ap-chat__member { font-size: 11px; font-weight: 600; padding: 4px 6px; border-radius: 6px; background: var(--surface); color: var(--text); border: 1px solid var(--border); }

/* Timeline */
.ap-timeline { display: grid; gap: 4px; }
.ap-timeline__row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent); }
.ap-timeline__row:last-child { border-bottom: none; }
.ap-timeline__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--border); flex-shrink: 0; }
.ap-timeline__dot--ok { background: #22c55e; }
.ap-timeline__dot--default { background: var(--primary); }
.ap-timeline__main { flex: 1; min-width: 0; }
.ap-timeline__title { margin: 0; font-size: 12px; font-weight: 700; }
.ap-timeline__meta { margin: 2px 0 0; font-size: 10px; color: var(--muted); }

/* My subscription */
.ap-mysub { display: grid; gap: 8px; }
.ap-mysub__badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; width: fit-content; }
.ap-mysub__badge--ok { background: color-mix(in srgb, #22c55e 18%, var(--surface)); color: #22c55e; }
.ap-mysub__badge--warn { background: color-mix(in srgb, #f59e0b 18%, var(--surface)); color: #f59e0b; }
.ap-mysub__badge--bad { background: color-mix(in srgb, #ef4444 18%, var(--surface)); color: #ef4444; }
.ap-mysub__rows { display: grid; gap: 6px; }
.ap-mysub__row { display: flex; justify-content: space-between; font-size: 12px; }
.ap-mysub__k { color: var(--muted); font-weight: 600; }
.ap-mysub__v { font-weight: 800; }
.ap-mysub__hint { margin: 0; font-size: 11px; color: #f59e0b; }
.ap-mysub__benefits { margin: 0; padding: 0 0 0 16px; font-size: 12px; line-height: 1.8; }
.ap-mysub__pay { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ap-mysub__iban { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; }

@media (max-width: 599px) {
  .ap-strip__chip strong { max-width: 56px; }
  .ap-toolbar__lbl { display: none; }
  .ap-toolbar__btn { padding: 8px 10px; }
}

/* ========================================================================== */
/*  SETTINGS CONTROL CENTER (.sc-*)                                            */
/* ========================================================================== */
.view--settings { padding-bottom: 24px; }
.sc { display: grid; gap: 16px; margin-top: 8px; animation: scFadeIn .35s ease; }
@keyframes scFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.sc-no-anim .sc, html.sc-no-anim .sc-card { animation: none !important; transition: none !important; }

.sc__header {
  position: sticky; top: 0; z-index: 30;
  display: grid; gap: 12px;
  padding: 12px 0 14px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  margin: -4px 0 0;
}
.sc-profile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sc-profile__avatarWrap { position: relative; flex-shrink: 0; }
.sc-profile__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 30%, var(--surface)), var(--surface-2));
  border: 2px solid color-mix(in srgb, var(--primary) 40%, var(--border));
  display: grid; place-items: center; overflow: hidden;
  font-size: 22px; font-weight: 800; color: var(--primary);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.sc-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sc-profile__online {
  position: absolute; bottom: 2px; right: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #22c55e; border: 2px solid var(--bg);
  box-shadow: 0 0 0 2px rgba(34,197,94,.25);
}
.sc-profile__info { flex: 1; min-width: 160px; }
.sc-profile__name { margin: 0 0 6px; font-size: 20px; font-weight: 900; letter-spacing: -.02em; }
.sc-profile__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.sc__search {
  width: 100%; padding: 10px 14px 10px 38px;
  border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") 12px center no-repeat;
  font-size: 14px; font-weight: 600;
  transition: border-color .15s, box-shadow .15s;
}
.sc__search:focus { outline: none; border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }

.sc__main {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .sc__main { grid-template-columns: 200px 1fr; align-items: start; }
}

.sc__sidebar {
  display: flex; gap: 4px; overflow-x: auto; padding: 4px 0;
  scrollbar-width: thin;
  position: sticky; top: 120px;
}
@media (min-width: 800px) {
  .sc__sidebar { flex-direction: column; overflow: visible; padding: 0; }
}

.sc__navItem {
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto; width: 100%;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid transparent; background: transparent;
  color: var(--muted); font-size: 13px; font-weight: 700;
  cursor: pointer; text-align: left;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.sc__navItem:hover { background: var(--surface-2); color: var(--text); transform: translateX(2px); }
.sc__navItem.is-active {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  color: var(--primary);
}
.sc-ic { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.sc-ic svg { width: 18px; height: 18px; }

.sc__content { display: grid; gap: 16px; min-width: 0; padding-bottom: 8px; }

.sc-card {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0,0,0,.06);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
html.sc-rounded .sc-card { border-radius: 16px; }
.sc-card:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,.1); border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); }
.sc-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 0; }
.sc-card__title { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.sc-card__body { padding: 12px 16px 16px; }

.sc-badge {
  display: inline-flex; align-items: center; padding: 3px 8px;
  border-radius: 999px; font-size: 10px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.sc-badge--default { background: var(--surface-2); color: var(--text); }
.sc-badge--primary { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
.sc-badge--muted { background: var(--surface-2); color: var(--muted); }
.sc-badge--gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #78350f; }
.sc-badge--new { background: #ef4444; color: #fff; animation: scPulse 2s infinite; }
@keyframes scPulse { 0%, 100% { opacity: 1; } 50% { opacity: .75; } }

.sc-form { display: grid; gap: 12px; }
.sc-field { display: grid; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.sc__input { width: 100%; }

.sc-stack { display: grid; gap: 10px; }
.sc-label { margin: 4px 0 0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sc-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

.sc-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.sc-toggle:last-child { border-bottom: none; }
.sc-toggle__text { display: grid; gap: 2px; min-width: 0; }
.sc-toggle__label { font-size: 14px; font-weight: 600; color: var(--text); }
.sc-toggle__hint { font-size: 11px; color: var(--muted); }

.sc-switchWrap { position: relative; flex-shrink: 0; }
.sc-switch {
  appearance: none; -webkit-appearance: none;
  width: 44px; height: 26px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  cursor: pointer; position: relative;
  transition: background .2s, border-color .2s;
}
.sc-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15);
  transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.sc-switch:checked { background: var(--primary); border-color: var(--primary); }
.sc-switch:checked::after { transform: translateX(18px); }
.sc-switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.sc-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-radio {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.sc-radio:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); }
.sc-radio input { accent-color: var(--primary); }

.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-chip {
  padding: 8px 14px; border-radius: 999px;
  border: 2px solid var(--border); background: var(--surface);
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: transform .12s, border-color .15s, box-shadow .15s;
}
.sc-chip::before {
  content: ''; display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; background: var(--chip); margin-right: 6px; vertical-align: middle;
}
.sc-chip.is-active { border-color: var(--chip); box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip) 25%, transparent); transform: scale(1.02); }

.sc-preview { margin-top: 8px; }
.sc-preview__card {
  padding: 16px; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), var(--surface-2));
  border: 1px dashed color-mix(in srgb, var(--primary) 30%, var(--border));
}
.sc-preview__card p { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.sc-preview__chip {
  display: inline-block; padding: 6px 12px; border-radius: 8px;
  background: var(--primary); color: #fff; font-size: 12px; font-weight: 700;
}

.sc-org__name { margin: 0 0 12px; font-size: 18px; font-weight: 900; }
.sc-org__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
@media (min-width: 500px) { .sc-org__grid { grid-template-columns: repeat(3, 1fr); } }
.sc-org__stat { padding: 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.sc-org__k { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 2px; }
.sc-org__v { display: block; font-size: 15px; font-weight: 800; }
.sc-org__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.sc-btnGrid { display: flex; flex-wrap: wrap; gap: 8px; }

.sc-integrations { display: grid; gap: 8px; }
.sc-integ {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-2);
  transition: border-color .15s;
}
.sc-integ:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.sc-integ strong { display: block; font-size: 14px; }
.sc-integ__btns { display: flex; gap: 6px; flex-shrink: 0; }

.sc-sub { display: grid; gap: 12px; }
.sc-sub__plan { padding: 14px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, #fbbf24 15%, var(--surface)), var(--surface-2)); border: 1px solid color-mix(in srgb, #fbbf24 30%, var(--border)); }
.sc-sub__k { margin: 0; font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.sc-sub__name { margin: 4px 0; font-size: 22px; font-weight: 900; }
.sc-sub__price { margin: 0; font-size: 14px; font-weight: 700; color: var(--primary); }
.sc-sub__meter { display: grid; gap: 4px; }
.sc-meter { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.sc-meter__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), #38bdf8); transition: width .4s ease; }

.sc-timeline { display: grid; gap: 12px; }
.sc-timeline__item { padding-left: 16px; border-left: 2px solid color-mix(in srgb, var(--primary) 40%, var(--border)); }
.sc-timeline__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.sc-timeline__list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text); }
.sc-timeline__list li { margin-bottom: 4px; }

.sc-about .sc-dl { display: grid; gap: 8px; margin: 12px 0 0; }
.sc-dl__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.sc-dl__row dt { color: var(--muted); font-weight: 600; }
.sc-dl__row dd { margin: 0; font-weight: 700; text-align: right; }

.sc-identities { display: grid; gap: 8px; }

.sc__logout { margin-top: 8px; }
.sc__logoutBtn {
  padding: 14px !important; font-size: 15px !important; font-weight: 800 !important;
  border-radius: 14px !important;
}

.sc__footer {
  margin-top: 8px; padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  backdrop-filter: blur(8px);
}
.sc-footer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 10px; }
@media (min-width: 600px) { .sc-footer__grid { grid-template-columns: repeat(4, 1fr); } }
.sc-footer__k { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.sc-footer__v { display: block; font-size: 13px; font-weight: 700; margin-top: 2px; }
.sc-footer__copy { margin: 8px 0 0; font-size: 11px; color: var(--muted); text-align: center; }

.sc-empty { text-align: center; padding: 32px 16px; color: var(--muted); font-size: 14px; }

html.sc-compact .sc-card__body { padding: 8px 12px 12px; }
html.sc-compact .sc-toggle { padding: 6px 0; }
html.sc-compact .sc-profile__avatar { width: 48px; height: 48px; }

.sc-athlete-public { margin-bottom: 8px; border-radius: 16px; }

@media (max-width: 599px) {
  .sc-profile__name { font-size: 17px; }
  .sc__header { top: -1px; }
  .sc-org__grid { grid-template-columns: 1fr 1fr; }
}