/* ============================================================
   ritm — stratul de brand (Manual de brand v1.0, oct. 2026)
   Se încarcă DUPĂ style.css și îl suprascrie la nivel de tokeni
   și componente. Paleta: Pădure + Lime. Font: Bricolage Grotesque,
   cifre tehnice și etichete: IBM Plex Mono.
   Regula de aur: lime doar pentru acțiunea principală, progres și
   punctul din logo (~7% din ecran). Niciodată lime pentru text pe alb.
   ============================================================ */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque.woff2") format("woff2"),
       url("../fonts/BricolageGrotesque.ttf") format("truetype");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"), url("../fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2"), url("../fonts/IBMPlexMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Paleta de brand + tokeni semantici (light) ---------- */
:root,
html[data-accent],
html[data-theme="light"][data-accent] {
  --padure:   #0E3B2E;
  --lime:     #C8F04A;
  --adanc:    #08241C;
  --salvie:   #4F6F63;
  --menta:    #E3F2EA;
  --aer:      #FAFCFA;
  --cer:      #BFE3FF;
  --cerneala: #0B1A15;
  --linie:    #D5E4DC;

  --bg:            var(--aer);
  --surface:       #FFFFFF;
  --surface-alt:   #F0F6F2;
  --border:        var(--linie);
  --border-strong: #B9D3C8;
  --text:          var(--cerneala);
  --text-muted:    #2C3D36;
  --text-soft:     var(--salvie);

  --primary:       var(--padure);
  --primary-hover: var(--adanc);
  --primary-fg:    var(--aer);
  --primary-soft:  rgba(14, 59, 46, .08);
  --accent:        var(--padure);
  --accent-hover:  var(--adanc);
  --accent-fg:     var(--aer);
  --accent-soft:   rgba(14, 59, 46, .06);

  /* acțiunea principală: una singură pe ecran */
  --cta:       var(--lime);
  --cta-hover: #B9E436;
  --cta-fg:    var(--adanc);

  --brand-navy: var(--padure);
  --brand-cyan: var(--primary);
  --brand-cyan-dark: var(--primary-hover);
  --brand-cyan-light: var(--primary-hover);
  --brand-cyan-soft: var(--menta);

  --success: #1F8A5B;
  --danger:  #B23B2A;
  --warning: #A66A06;
  --info:    #2C6E9E;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 2px rgba(8, 36, 28, .04), 0 1px 3px rgba(8, 36, 28, .05);
  --shadow-md: 0 6px 18px -8px rgba(8, 36, 28, .18), 0 2px 4px rgba(8, 36, 28, .04);
  --shadow-lg: 0 24px 48px -20px rgba(8, 36, 28, .35);
  --shadow-glow: 0 0 0 3px var(--cer);

  --font-primary:   "Bricolage Grotesque", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-secondary: "Bricolage Grotesque", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono:      "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* logo: varianta Primar */
  --rl-sq: var(--padure); --rl-b: var(--aer); --rl-m: var(--lime);
  --rl-w: var(--padure); --rl-ring: var(--padure); --rl-dot: var(--lime);

  --grain: none;
  color-scheme: light;
}

/* ---------- Dark mode = „Invers pe adânc” ---------- */
html[data-theme="dark"],
html[data-theme="dark"][data-accent] {
  --bg:            var(--adanc);
  --surface:       #0C3326;
  --surface-alt:   #124636;
  --border:        #1B5443;
  --border-strong: #2A6A56;
  --text:          var(--aer);
  --text-muted:    #B9D3C8;
  --text-soft:     #8FB0A3;

  --primary:       var(--lime);
  --primary-hover: #D7F67C;
  --primary-fg:    var(--adanc);
  --primary-soft:  rgba(200, 240, 74, .14);
  --accent:        var(--aer);
  --accent-hover:  #FFFFFF;
  --accent-fg:     var(--adanc);
  --accent-soft:   rgba(250, 252, 250, .08);

  --cta:       var(--lime);
  --cta-hover: #D7F67C;
  --cta-fg:    var(--adanc);

  --success: #7FD9A8;
  --danger:  #F2A08F;
  --warning: #F3C969;
  --info:    var(--cer);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 10px 24px -12px rgba(0, 0, 0, .55);
  --shadow-lg: 0 28px 56px -24px rgba(0, 0, 0, .7);

  --rl-sq: var(--lime); --rl-b: var(--padure); --rl-m: var(--padure);
  --rl-w: var(--aer); --rl-ring: var(--lime); --rl-dot: var(--lime);

  color-scheme: dark;
}

/* ---------- Logo ritm (SVG inline) ---------- */
.ritm-logo { display: block; height: 28px; width: auto; flex: 0 0 auto; overflow: visible; }
.ritm-logo .rl-sq   { fill: var(--rl-sq); }
.ritm-logo .rl-b    { fill: var(--rl-b); }
.ritm-logo .rl-m    { fill: var(--rl-m); }
.ritm-logo .rl-w    { fill: var(--rl-w); }
.ritm-logo .rl-ring { fill: var(--rl-ring); }
.ritm-logo .rl-dot  { fill: var(--rl-dot); }
/* Contexte întotdeauna întunecate → varianta „Invers” */
.auth-hero, .sidebar, .app-splash, .app-loader, .ritm-landing {
  --rl-sq: var(--lime); --rl-b: var(--padure); --rl-m: var(--padure);
  --rl-w: var(--aer); --rl-ring: var(--lime); --rl-dot: var(--lime);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sidebar .brand .ritm-logo { height: 30px; }
.mobile-topbar .brand .ritm-logo { height: 24px; }
.auth-hero .brand .ritm-logo { height: 36px; }
.auth-mobile-brand .ritm-logo, .role-shell .brand .ritm-logo, .public-brand .ritm-logo, .validation-shell .brand .ritm-logo { height: 30px; }
.onboarding-brand .ritm-logo { height: 24px; }

/* ---------- Tipografie ---------- */
html, body { font-family: var(--font-primary); }
body { font-size: 15.5px; line-height: 1.55; font-optical-sizing: auto; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); letter-spacing: -.03em; font-weight: 800; text-wrap: balance; }
h3, h4 { font-weight: 700; letter-spacing: -.02em; }
p { text-wrap: pretty; }
strong, b { font-weight: 700; }
input, select, textarea, button { font-family: var(--font-primary); }
code, kbd, .mono { font-family: var(--font-mono); }
/* Cifre mari: ExtraBold, tabular */
.stat-card .value, .value, .num, .onboarding-metrics strong {
  font-family: var(--font-primary);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
/* Etichete: 12 / 500 mono, majuscule */
.auth-eyebrow, .kicker, .dashboard-eyebrow, .onboarding-kicker, .profile-section-kicker, .coach-hero-date, .ritm-eyebrow, .stat-card .label {
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}
.auth-eyebrow, .onboarding-kicker, .ritm-eyebrow, .profile-section-kicker { color: var(--text-soft) !important; }
a { text-decoration-color: currentColor; }
a:hover { color: var(--primary); }
::selection { background: var(--lime); color: var(--adanc); }

/* ---------- Butoane: pastilă ---------- */
.btn, .button, .role-continue, #ob-next, #enter-app {
  font-family: var(--font-primary);
  font-weight: 700;
  border-radius: 999px !important;
  letter-spacing: -.005em;
}
.btn { border-width: 1.5px; }
/* Text fields show focus with their own border, not this blue ring. */
.btn:focus-visible, button:focus-visible, a:focus-visible, select:focus-visible,
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible, input[type="range"]:focus-visible {
  outline: 3px solid var(--cer) !important;
  outline-offset: 2px;
}
/* Primar = lime + adânc, în ambele teme */
.btn-primary, .role-continue, #ob-next, #enter-app, .hero-card .cta, body.ios-shell .hero-card .cta, .coach-hero-primary, #modal-confirm.btn-primary, .modal-actions .btn-primary {
  background: var(--cta) !important;
  border-color: var(--cta) !important;
  color: var(--cta-fg) !important;
}
.btn-primary:hover, .role-continue:hover:not(:disabled), #ob-next:hover, #enter-app:hover, .hero-card .cta:hover, .coach-hero-primary:hover {
  background: var(--cta-hover) !important;
  border-color: var(--cta-hover) !important;
  color: var(--cta-fg) !important;
}
/* Închis = pădure (dark: aer) */
.btn-accent { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-fg) !important; }
.btn-accent:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
/* Secundar = contur */
.btn-ghost {
  background: transparent !important;
  border: 1.5px solid var(--border-strong) !important;
  color: var(--text) !important;
}
.btn-ghost:hover { border-color: var(--text) !important; background: var(--primary-soft) !important; }
.btn:disabled, .btn[disabled], .role-continue:disabled {
  background: #EEF2F0 !important; border-color: #EEF2F0 !important; color: #8DA198 !important;
  cursor: not-allowed; opacity: 1 !important; transform: none !important;
}
[data-theme="dark"] .btn:disabled, [data-theme="dark"] .btn[disabled], [data-theme="dark"] .role-continue:disabled {
  background: #124636 !important; border-color: #124636 !important; color: #6E9284 !important;
}

/* ---------- Câmpuri: 14 px ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .input {
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background-color: var(--surface);
  color: var(--text);
  font-size: 15px;
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus, .input:focus {
  border-color: var(--primary) !important;
  box-shadow: none;
  outline: none;
}
input::placeholder, textarea::placeholder { color: #8DA198; }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #6E9284; }
.form-group label, label { font-weight: 500; }
.form-group label { color: var(--text-soft); font-size: 13px; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--padure); }
[data-theme="dark"] input[type="checkbox"], [data-theme="dark"] input[type="radio"], [data-theme="dark"] input[type="range"] { accent-color: var(--lime); }

/* ---------- Carduri: 20 px ---------- */
.card, .stat-card, .list-item, .profile-section, .quick-action-card, .dashboard-focus-card, .dashboard-status-card, .cs-rows, .cs-detail-card, .client-plan-accordion, .weight-input-card, .weight-stat, .weight-panel, .nutrition-plan-card, .profile-personalize {
  border-radius: 20px;
}
.card, .stat-card, .quick-action-card, .profile-section, .dashboard-focus-card {
  border: 1px solid var(--border);
  box-shadow: none;
}
.modal { border-radius: 24px; }

/* ---------- Etichete de stare (chips) ---------- */
.badge, .chip, .pill {
  border-radius: 999px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
.badge-primary { background: var(--lime) !important; color: var(--adanc) !important; }
.badge-accent  { background: var(--menta) !important; color: var(--padure) !important; }
.badge-muted   { background: transparent !important; color: var(--text-soft) !important; border: 1.5px solid var(--border) !important; }
[data-theme="dark"] .badge-accent { background: #124636 !important; color: var(--lime) !important; }
.pill.on { background: var(--lime); color: var(--adanc); }
.chip-pick.on { background: var(--padure); border-color: var(--padure); color: var(--aer); }
[data-theme="dark"] .chip-pick.on { background: var(--lime); border-color: var(--lime); color: var(--adanc); }

/* ---------- Blocul „pădure” (hero) — cel mai puternic element ---------- */
.hero-card, body.ios-shell .hero-card, #view-overview .coach-dashboard-hero, [data-theme="light"] #view-overview .coach-dashboard-hero, .coach-dashboard-hero {
  background: var(--padure) !important;
  background-image: none !important;
  border: 0 !important;
  color: var(--aer) !important;
  box-shadow: none !important;
  border-radius: 24px !important;
}
.hero-card *, .coach-dashboard-hero *, [data-theme="light"] #view-overview .coach-dashboard-hero h1, [data-theme="light"] #view-overview .coach-dashboard-hero p, .hero-card .title, .hero-card .sub {
  color: inherit !important;
}
.hero-card .sub, .coach-dashboard-hero p { color: #B9D3C8 !important; opacity: 1 !important; }
.hero-card .kicker, body.ios-shell .hero-card .kicker, .coach-hero-date, .hero-card .value, .coach-dashboard-hero strong { color: var(--lime) !important; }
.hero-card .cta, body.ios-shell .hero-card .cta { color: var(--cta-fg) !important; }
.hero-card::before, .hero-card::after, .coach-dashboard-hero::before, .coach-dashboard-hero::after { display: none !important; }
[data-theme="dark"] .hero-card, [data-theme="dark"] .coach-dashboard-hero, [data-theme="dark"] #view-overview .coach-dashboard-hero {
  background: var(--padure) !important;
  border: 1px solid #1B5443 !important;
}

/* Statistici */
.stat-card { background: var(--surface); }
.stat-card .value.accent, .stat-card:not(.hilite) .value.accent { color: var(--primary) !important; }
.dashboard-live-dot i { background: var(--lime) !important; color: var(--adanc) !important; }

/* Progres = lime pe pădure; pe alb, pădure pe linie */
.macro-bar .fill, .progress-fill, .progress > span { border-radius: 999px; }
.chart-line { stroke: var(--primary) !important; }
.chart-dot  { fill: var(--primary) !important; }

/* ---------- Sidebar desktop: invers pe pădure ---------- */
@media (min-width: 901px) {
  .sidebar, [data-theme="dark"] .sidebar {
    background: var(--padure) !important;
    border-right: 0 !important;
    color: var(--aer);
    --text: var(--aer);
    --text-muted: #B9D3C8;
    --text-soft: #8FB0A3;
    --border: #1B5443;
    --border-strong: #2A6A56;
    --surface-alt: #124636;
    --primary-soft: rgba(200, 240, 74, .14);
  }
  .sidebar .nav-item { color: #B9D3C8 !important; border-radius: 999px !important; font-weight: 500; background: transparent; }
  .sidebar .nav-item:hover { background: rgba(250, 252, 250, .06) !important; color: var(--aer) !important; }
  .sidebar .nav-item.active { background: var(--lime) !important; color: var(--adanc) !important; font-weight: 700; box-shadow: none !important; }
  .sidebar .nav-item.active::before { display: none !important; }
  .sidebar .nav-item .icon, .sidebar .nav-item svg { color: inherit !important; stroke: currentColor; }
  .sidebar .sidebar-role-badge {
    background: rgba(250, 252, 250, .08) !important; color: var(--lime) !important; border: 0 !important;
    font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; border-radius: 999px;
  }
  .sidebar .user-block .name { color: var(--aer) !important; }
  .sidebar .user-block .email { color: #8FB0A3 !important; }
  .sidebar .btn-ghost { border-color: #2A6A56 !important; color: var(--aer) !important; }
  .sidebar .btn-ghost:hover { background: rgba(250, 252, 250, .06) !important; border-color: var(--aer) !important; }
}

/* ---------- Bara de sus (mobil) ---------- */
.mobile-topbar, [data-theme="light"] .mobile-topbar {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.mobile-topbar .icon-btn { border-radius: 999px; color: var(--text); }

/* ---------- Tabbar (mobil) ---------- */
.tabbar, body.ios-shell .tabbar,
[data-theme="light"] .tabbar, [data-theme="light"] body.ios-shell .tabbar {
  background: rgba(255, 255, 255, .97) !important;
  border-color: var(--border) !important;
  box-shadow: 0 -1px 0 var(--border), 0 12px 32px -16px rgba(8, 36, 28, .25) !important;
}
[data-theme="dark"] .tabbar, [data-theme="dark"] body.ios-shell .tabbar {
  background: rgba(8, 36, 28, .97) !important;
  border-color: #1B5443 !important;
  box-shadow: 0 -1px 0 #1B5443 !important;
}
.tabbar-item { color: var(--text-soft) !important; font-family: var(--font-primary); }
.tabbar-item .tabbar-lbl { font-weight: 500; letter-spacing: 0; }
.tabbar-item.active, body.ios-shell .tabbar-item.active { color: var(--padure) !important; }
.tabbar-item.active .tabbar-lbl { font-weight: 700; color: var(--padure) !important; }
.tabbar-item.active .tabbar-icon, [data-theme="dark"] .tabbar-item.active .tabbar-icon { background: transparent !important; box-shadow: none !important; color: inherit !important; }
.tabbar-item.active, body.ios-shell .tabbar-item.active { background: var(--menta) !important; }
[data-theme="dark"] .tabbar-item.active, [data-theme="dark"] body.ios-shell .tabbar-item.active { background: var(--lime) !important; color: var(--adanc) !important; }
.tabbar-collapsed .tabbar-item.active .tabbar-icon { color: inherit !important; }
.tabbar-item.active::before, .tabbar-item.active::after { background: var(--lime) !important; }

/* ---------- Ecrane de autentificare ---------- */
.auth-hero { background: var(--padure) !important; background-image: none !important; color: var(--aer); }
.auth-hero::before, .auth-hero::after { display: none !important; }
.auth-hero h1 { color: var(--aer) !important; font-weight: 800; letter-spacing: -.035em; }
.auth-hero h1 em { font-style: normal; color: var(--lime); }
.auth-hero p { color: #B9D3C8 !important; }
.auth-hero .ritm-bars-deco { display: flex; gap: 12px; align-items: flex-end; height: 140px; margin-top: 36px; }
.auth-hero .ritm-bars-deco i { display: block; width: 26px; border-radius: 99px; background: #1B5443; }
.auth-hero .ritm-bars-deco i.l { background: var(--lime); }
.auth-panel { background: var(--bg); }
.auth-card h2 { font-weight: 800; letter-spacing: -.035em; }
.auth-footer a, .public-role-login a { color: var(--primary); font-weight: 700; }
.form-error { border-radius: 14px; }

/* Alegerea rolului */
.public-role-page, .validation-page, .onboarding-page { background: var(--bg); }
.public-role-card, .role-card {
  border-radius: 20px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
.public-role-card.selected, .role-card.selected, .role-card.active {
  border-color: var(--padure) !important;
  box-shadow: inset 0 0 0 1px var(--padure) !important;
  background: var(--surface) !important;
}
[data-theme="dark"] .public-role-card.selected, [data-theme="dark"] .role-card.selected { border-color: var(--lime) !important; box-shadow: inset 0 0 0 1px var(--lime) !important; }
.public-role-icon, .role-card .icon, .validation-icon {
  background: var(--menta) !important; color: var(--padure) !important; border-radius: 14px !important; box-shadow: none !important;
}
.public-role-card.selected .public-role-icon, .role-card.selected .icon { background: var(--lime) !important; color: var(--adanc) !important; }
[data-theme="dark"] .public-role-icon, [data-theme="dark"] .role-card .icon, [data-theme="dark"] .validation-icon { background: #124636 !important; color: var(--lime) !important; }
.public-role-card small { font-family: var(--font-mono); font-weight: 500; letter-spacing: .12em; color: var(--text-soft) !important; }
.public-role-card strong { font-weight: 800; letter-spacing: -.02em; }
.role-check { background: var(--lime) !important; color: var(--adanc) !important; }

/* Onboarding */
.onboarding-progress #progress-ring { stroke: var(--lime) !important; }
.onboarding-choice-grid button.active, .onboarding-choice-grid button.selected,
.onboarding-options button.active, .onboarding-options button.selected {
  border-color: var(--padure) !important; background: var(--menta) !important; color: var(--padure) !important;
}
[data-theme="dark"] .onboarding-choice-grid button.active, [data-theme="dark"] .onboarding-options button.active,
[data-theme="dark"] .onboarding-choice-grid button.selected, [data-theme="dark"] .onboarding-options button.selected {
  border-color: var(--lime) !important; background: #124636 !important; color: var(--aer) !important;
}
.onboarding-result .ritm-symbol-big { width: 72px; height: 72px; margin: 0 auto 8px; }

/* ---------- Toasts / notificări ---------- */
/* Card cu fundal de suprafață + accent colorat pe tip. Specificitate ridicată
   ca să bată regulile vechi din style.css (ios-shell, dark) care schimbau doar
   fundalul și lăsau textul fără contrast. */
:root .toast, :root body.ios-shell .toast, :root[data-theme] body .toast {
  background: var(--surface) !important; background-image: none !important; color: var(--text) !important;
  border: 1px solid var(--border-strong) !important; border-left: 4px solid var(--toast-accent, var(--primary)) !important;
  border-radius: 16px !important; box-shadow: var(--shadow-lg) !important; font-weight: 500;
}

/* ---------- Splash + loader: simbolul cu bare care pulsează ---------- */
.app-splash, .app-loader {
  background: var(--adanc) !important;
  color: var(--aer) !important;
}
.ritm-pulse {
  position: relative;
  width: 76px; height: 76px;
  border-radius: 22px;
  background: var(--padure);
  display: flex; align-items: flex-end; justify-content: center; gap: 8px;
  padding-bottom: 17px;
  box-shadow: 0 0 0 1px #1B5443;
}
.ritm-pulse i {
  display: block; width: 11px; border-radius: 99px; background: var(--aer);
  transform-origin: bottom;
  animation: ritmBeat 1.05s cubic-bezier(.45, 0, .25, 1) infinite;
}
.ritm-pulse i:nth-child(1) { height: 26px; animation-delay: -.30s; }
.ritm-pulse i:nth-child(2) { height: 40px; background: var(--lime); animation-delay: -.15s; }
.ritm-pulse i:nth-child(3) { height: 19px; animation-delay: 0s; }
@keyframes ritmBeat { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
@media (prefers-reduced-motion: reduce) { .ritm-pulse i { animation: none; } }
[data-motion="reduced"] .ritm-pulse i { animation: none; }

/* ---------- Pagina de start (index) ---------- */
body.ritm-landing {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--padure); color: var(--aer);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.ritm-landing.landing-auth-check { visibility: hidden; }
body.ritm-landing.landing-auth-check.landing-ready { visibility: visible; }
.rl-screen {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: max(20px, env(safe-area-inset-top)) clamp(20px, 5vw, 64px) max(20px, env(safe-area-inset-bottom));
  max-width: 1240px; margin: 0 auto;
}
.rl-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rl-top .ritm-logo { height: 32px; }
.rl-login { color: var(--aer); text-decoration: none; font-weight: 700; font-size: 15px; padding: 10px 18px; border: 1.5px solid #2A6A56; border-radius: 999px; }
.rl-login:hover { border-color: var(--aer); color: var(--aer); }
.rl-main { flex: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; padding-block: 40px; }
.rl-main h1 { margin: 18px 0 0; font-size: clamp(42px, 7.2vw, 88px); font-weight: 800; line-height: .98; letter-spacing: -.045em; color: var(--aer); }
.rl-main h1 em { font-style: normal; color: var(--lime); }
.rl-main p { margin: 22px 0 0; max-width: 46ch; color: #B9D3C8; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.55; }
.rl-kicker { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.rl-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.rl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; border: 1.5px solid transparent; }
.rl-btn.p { background: var(--lime); color: var(--adanc); }
.rl-btn.p:hover { background: #D7F67C; color: var(--adanc); }
.rl-btn.s { border-color: #2A6A56; color: var(--aer); }
.rl-btn.s:hover { border-color: var(--aer); color: var(--aer); }
.rl-bars { display: flex; gap: clamp(10px, 1.6vw, 18px); align-items: flex-end; justify-content: center; height: clamp(200px, 38vh, 360px); }
.rl-bars i { display: block; width: clamp(28px, 4vw, 46px); border-radius: 99px; background: #1B5443; animation: ritmBeat 2.4s cubic-bezier(.45, 0, .25, 1) infinite; transform-origin: bottom; }
.rl-bars i.l { background: var(--lime); }
.rl-bars i:nth-child(1) { height: 58%; animation-delay: -.4s; }
.rl-bars i:nth-child(2) { height: 100%; animation-delay: -1.2s; }
.rl-bars i:nth-child(3) { height: 40%; animation-delay: -.8s; }
.rl-bars i:nth-child(4) { height: 72%; animation-delay: -1.6s; }
.rl-bars i:nth-child(5) { height: 30%; animation-delay: -2s; }
.rl-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; max-width: 560px; }
.rl-roles div { border: 1px solid #1B5443; border-radius: 20px; padding: 16px 18px; }
.rl-roles b { display: block; font-size: 16px; font-weight: 700; color: var(--aer); }
.rl-roles span { display: block; margin-top: 4px; font-size: 14px; color: #B9D3C8; line-height: 1.45; }
.rl-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; color: #8FB0A3; }
@media (max-width: 860px) {
  .rl-main { grid-template-columns: 1fr; gap: 28px; padding-block: 28px; }
  .rl-bars { order: -1; height: 120px; justify-content: flex-start; }
  .rl-bars i { width: 22px; }
  .rl-actions { flex-direction: column; }
  .rl-btn { width: 100%; }
  .rl-roles { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .rl-bars i { animation: none; } }

/* ---------- Pagina de start pe telefon: întâi instalarea ---------- */
.rl-install { margin: 18px 0 6px; padding: 20px 16px 16px; border: 1px solid #1B5443; border-radius: 28px; background: linear-gradient(180deg, #123F32 0%, #0C3227 100%); color: var(--aer); animation: rliIn .5s cubic-bezier(.22, 1, .36, 1) both; }
.rli-head { display: flex; align-items: flex-start; gap: 14px; }
.rli-head img { flex: none; width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.rli-kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.rli-head h2 { margin: 6px 0 0; font-size: 23px; font-weight: 800; line-height: 1.08; letter-spacing: -.03em; color: var(--aer); }
.rli-head p { margin: 8px 0 0 !important; font-size: 14px !important; line-height: 1.45 !important; color: #B9D3C8; }
.rli-go { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; margin-top: 18px; border: 0; border-radius: 999px; background: var(--lime); color: var(--adanc); font: 800 16px/1 var(--font-primary); cursor: pointer; }
.rli-go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rli-or { margin: 10px 0 0 !important; text-align: center; font-size: 12.5px !important; color: #8FB0A3; }
.rli-warn { margin: 16px 0 0 !important; padding: 12px 14px; border-radius: 16px; background: rgba(200, 240, 74, .1); font-size: 13.5px !important; line-height: 1.45 !important; color: var(--aer); }
.rli-warn b { color: var(--lime); }
.rli-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-top: 18px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .25); }
.rli-tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: #B9D3C8; font: 700 14px/1 var(--font-primary); cursor: pointer; transition: background .2s, color .2s; }
.rli-tabs button small { font: 500 9.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.rli-tabs button.on { background: var(--aer); color: var(--adanc); }
.rli-steps { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rli-steps li { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 12px 12px 14px; border-radius: 18px; background: rgba(250, 252, 250, .06); animation: rliIn .45s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i) * 70ms + 80ms); }
.rli-n { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--adanc); font: 800 13px/1 var(--font-primary); }
.rli-t { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.4; color: #DCEAE3; }
.rli-t b { color: var(--aer); font-weight: 700; }
.rli-ico { flex: none; width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: rgba(250, 252, 250, .1); color: var(--aer); }
.rli-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rli-ico img { width: 100%; height: 100%; object-fit: cover; }
.rli-skip { display: block; margin-top: 14px; padding: 10px; text-align: center; font-size: 14px; font-weight: 600; color: #8FB0A3; text-decoration: none; }
.rli-done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 0 6px; text-align: center; }
.rli-done svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--lime); fill: none; stroke: var(--adanc); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rli-done strong { font-size: 18px; }
.rli-done span { font-size: 14px; color: #B9D3C8; }
@keyframes rliIn { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 860px) {
  .rl-has-install .rl-bars { display: none; }
  .rl-has-install .rl-main { padding-top: 18px; }
}
@media (min-width: 861px) { .rl-install { max-width: 520px; } }
@media (prefers-reduced-motion: reduce) { .rl-install, .rli-steps li { animation: none; } }

/* ---------- Promovare instalare PWA ---------- */
.ritm-install {
  position: fixed; z-index: 9990;
  left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  max-width: 440px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 14px;
  background: var(--padure); color: var(--aer);
  border-radius: 20px; box-shadow: var(--shadow-lg);
  font-family: var(--font-primary);
}
.ritm-install img { width: 40px; height: 40px; border-radius: 11px; flex: 0 0 40px; }
.ritm-install div { flex: 1; min-width: 0; }
.ritm-install strong { display: block; font-size: 15px; font-weight: 700; }
.ritm-install span { display: block; font-size: 13px; color: #B9D3C8; line-height: 1.35; }
.ritm-install button { border: 0; cursor: pointer; font: inherit; }
.ritm-install .ri-go { background: var(--lime); color: var(--adanc); font-weight: 700; border-radius: 999px; padding: 10px 16px; font-size: 14px; }
.ritm-install .ri-x { background: transparent; color: #8FB0A3; width: 32px; height: 32px; border-radius: 999px; font-size: 18px; line-height: 1; }
body:not(:has(.tabbar)) .ritm-install { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
.rl-main > * { min-width: 0; }
body.ritm-landing *, body.ritm-landing *::before, body.ritm-landing *::after { box-sizing: border-box; }

/* ============================================================
   ritm v2 — strat „clean”
   Fără umbre pe controale, fără blur, fără forme decorative
   moștenite. Ierarhia vine din culoare și spațiu, nu din umbre.
   ============================================================ */
button, .btn, .button, [role="button"], .icon-btn, .tabbar-item, .chip-pick, .quick-action-card, .coach-quick-strip button, .coach-schedule-launcher, .stat-card-button, .public-role-card, .role-card, input, select, textarea, .badge, .pill, .chip {
  box-shadow: none !important;
  text-shadow: none !important;
  background-image: none !important;
}
:focus-visible { box-shadow: none !important; }
.card, .stat-card, .list-item, .profile-section, .quick-action-card, .dashboard-focus-card, .dashboard-status-card, .client-plan-accordion, .weight-input-card, .weight-stat, .weight-panel, .wwk, .nutrition-plan-card, .nutri-card, .profile-personalize, .cs-rows, .cs-detail-card, .wss-row, .coach-health-card, .coach-request-card, .client-card {
  box-shadow: none !important;
}
*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.modal { box-shadow: 0 30px 80px -30px rgba(8, 36, 28, .45) !important; }
/* apăsare: răspuns tactil, fără umbră */
.btn:active, .quick-action-card:active, .coach-quick-strip button:active, .tabbar-item:active, .public-role-card:active {
  transform: scale(.97) !important;
  transition: transform .12s ease !important;
}

/* Iconițe SVG fără fill explicit: contur curat, niciodată pătrate negre */
[class*="icon"] > svg:not([fill]), .icon-btn svg:not([fill]), .coach-quick-strip span > svg:not([fill]), .nav-item .icon svg:not([fill]), .btn svg:not([fill]) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Panoul antrenorului: blocul „pădure” ---------- */
#view-overview, [data-theme="dark"] #view-overview {
  --cp-ink: var(--padure);
  --cp-tile: rgba(250, 252, 250, .07);
  --cp-tile-hi: rgba(250, 252, 250, .13);
  --cp-cyan: var(--lime);
  --cp-rule: var(--linie);
}
[data-theme="dark"] .coach-panel-slab { box-shadow: inset 0 0 0 1px #1B5443; }
.coach-panel-slab { border-radius: 28px !important; position: relative; overflow: hidden; }
#view-overview .coach-panel-slab .coach-hero-date { font-family: var(--font-mono) !important; font-weight: 500 !important; letter-spacing: .12em !important; text-transform: uppercase !important; font-size: 11px !important; }
#view-overview .coach-panel-slab .coach-dashboard-hero p { color: #B9D3C8 !important; }
#view-overview .coach-panel-slab .coach-compact-stats .label { color: #8FB0A3 !important; font-family: var(--font-mono) !important; }
#view-overview .coach-schedule-launcher { border: 1px solid var(--border) !important; border-radius: 20px !important; }
.coach-quick-strip button { border: 1px solid var(--border) !important; border-radius: 20px !important; }
.coach-quick-strip button > span:first-child {
  background: var(--menta) !important; color: var(--padure) !important; border-radius: 14px !important;
}
[data-theme="dark"] .coach-quick-strip button > span:first-child { background: #124636 !important; color: var(--lime) !important; }
.coach-quick-strip button i { color: var(--text-soft) !important; font-style: normal; font-family: var(--font-mono); }

/* ---------- Greutate: carduri fără decor moștenit ---------- */
.weight-stat::before, .weight-stat::after, .weight-input-card::before, .weight-input-card::after,
.weight-panel::before, .weight-panel::after { display: none !important; content: none !important; }
#view-weight .weight-stat .val { font-weight: 800 !important; letter-spacing: -.03em; }

/* ---------- Nutriție: macro în culorile brandului ---------- */
.food-pip-macro { border-top-color: var(--border) !important; }
[class*="macro"].p { --m: var(--padure); }
[class*="macro"].c { --m: #6FB6E8; }
[class*="macro"].f { --m: #9BC53D; }
[class*="supp"][class*="pill"], [class*="supp"][class*="chip"] {
  background: var(--menta) !important; color: var(--padure) !important; border-color: transparent !important;
}

/* ---------- Liste de planuri: acțiuni mici și calme ---------- */
.client-plan-accordion .btn, .workout-plans-list .btn, #workout-plans-list .btn, #meal-plans-list .btn {
  min-height: 38px !important; padding: 0 16px !important; font-size: 14px !important;
}
.wp-index, [class*="plan-num"] { font-family: var(--font-mono); }

/* Avatar gol din profil: inițiale pe lime */

/* Titluri de pagină: ritm editorial */
.page-head h1, .view.active > .page-head:first-child h1 { font-weight: 800 !important; letter-spacing: -.04em !important; }
.page-head .sub { color: var(--text-soft) !important; }
.section-title, .dashboard-section-head .section-title {
  font-family: var(--font-mono) !important; font-size: 11.5px !important; font-weight: 500 !important;
  letter-spacing: .12em !important; text-transform: uppercase; color: var(--text-soft) !important;
}

/* Conținutul nu se ascunde sub bara de jos */
@media (max-width: 900px) {
  .view.active { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Macro: proteine = pădure/lime, carbo = cer, grăsimi = salvie. Fără borduri colorate. */
:root { --m-p: var(--padure); --m-c: #5FA8DC; --m-f: #8DB33A; }
[data-theme="dark"] { --m-p: var(--lime); --m-c: var(--cer); --m-f: #A7C96A; }
.nutri-macros { background: var(--surface-alt) !important; border: 0 !important; border-radius: 20px !important; }
.nutri-kcal {
  background: var(--padure) !important; border: 0 !important; border-radius: 16px !important;
}
.nutri-kcal .val { color: var(--lime) !important; }
.nutri-kcal .lbl { color: #B9D3C8 !important; font-family: var(--font-mono); font-weight: 500 !important; }
.nutri-pill { border-top: 0 !important; border: 1px solid var(--border) !important; border-radius: 14px !important; background: var(--surface) !important; position: relative; }
.nutri-pill::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 3px; border-radius: 0 0 99px 99px; background: var(--m-p);
}
.nutri-pill.c::before { background: var(--m-c); }
.nutri-pill.f::before { background: var(--m-f); }
.nutri-pill small { font-family: var(--font-mono); font-weight: 500 !important; letter-spacing: .08em; }
.macro-bar.p .fill, .macro-bar.p > i { background: var(--m-p) !important; }
.macro-bar.c .fill, .macro-bar.c > i { background: var(--m-c) !important; }
.macro-bar.f .fill, .macro-bar.f > i { background: var(--m-f) !important; }
.food-pip-macro.protein { --pip: var(--m-p); } .food-pip-macro.carbs { --pip: var(--m-c); } .food-pip-macro.fats { --pip: var(--m-f); }
.avatar { background: var(--padure); color: var(--aer); font-weight: 700; }
[data-theme="dark"] .avatar { background: var(--lime); color: var(--adanc); }
.hero-card .avatar { background: var(--lime) !important; color: var(--adanc) !important; border: 0 !important; font-weight: 800; }
.section-title, .dashboard-section-head .section-title { text-transform: uppercase !important; }

/* ============================================================
   Carduri ritm: „Săptămâna ta” (client) și „Agenda de azi” (antrenor)
   ============================================================ */
.ritm-week, .ritm-agenda {
  margin: 14px 0 16px;
  padding: 20px 20px 18px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.ritm-week header, .ritm-agenda header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.ritm-week h3, .ritm-agenda h3 { margin: 6px 0 0; font-size: 1.32rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
.ritm-week header p, .ritm-agenda header p { margin: 4px 0 0; color: var(--text-soft); font-size: .9rem; }
.ritm-eyebrow { color: var(--text-soft); }
.ritm-streak {
  flex: 0 0 auto; min-width: 66px; padding: 10px 12px 9px; border-radius: 18px;
  background: var(--padure); color: var(--aer); text-align: center;
}
.ritm-streak b { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--lime); font-variant-numeric: tabular-nums; }
.ritm-streak small { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #B9D3C8; }
.ritm-week-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 20px 0 16px; height: 128px; align-items: end; }
.rw-day { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; }
.rw-track { position: relative; height: 100px; flex: none; width: 100%; max-width: 34px; display: flex; align-items: flex-end; }
.rw-track i {
  display: block; width: 100%; height: var(--h); min-height: 12px; border-radius: 999px;
  background: var(--surface-alt); transform-origin: bottom;
}
.rw-done .rw-track i { background: var(--lime); }
.rw-live .rw-track i { background: var(--cer); }
.rw-planned .rw-track i { background: transparent; border: 2px dashed var(--border-strong); }
.rw-missed .rw-track i { background: #E7D3CD; }
[data-theme="dark"] .rw-missed .rw-track i { background: #4A2E28; }
.rw-today .rw-track i { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--padure); }
[data-theme="dark"] .rw-today .rw-track i { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--lime); }
.rw-lbl { font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); }
.rw-today .rw-lbl { color: var(--text); font-weight: 500; }
.ritm-week footer { display: grid; grid-template-columns: 1fr; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); font-size: .88rem; color: var(--text-muted); }
.ritm-week footer b { color: var(--text); }
.ritm-week footer small { font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); letter-spacing: .04em; }
.rw-next { display: block; height: 8px; border-radius: 99px; background: var(--surface-alt); overflow: hidden; }
.rw-next i { display: block; height: 100%; width: var(--p); border-radius: 99px; background: var(--padure); }
[data-theme="dark"] .rw-next i { background: var(--lime); }

.ritm-agenda-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--lime); color: var(--adanc); }
.ritm-agenda-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ritm-agenda-list { display: grid; gap: 8px; margin: 16px 0 14px; }
.ritm-slot {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 12px 12px 14px; border-radius: 16px; border: 0;
  background: var(--surface-alt); color: var(--text); font: inherit;
}
.ritm-slot > b { font-family: var(--font-mono); font-weight: 500; font-size: 14px; min-width: 46px; }
.ritm-slot .grow { flex: 1; min-width: 0; }
.ritm-slot strong { display: block; font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ritm-slot small { display: block; color: var(--text-soft); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ritm-slot.is-next { background: var(--padure); color: var(--aer); }
.ritm-slot.is-next small { color: #B9D3C8; }
.ritm-slot.is-past { opacity: .62; }
.ritm-chip { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px; }
.ritm-chip-l { background: var(--lime); color: var(--adanc); }
.ritm-chip-o { border: 1.5px solid var(--border-strong); color: var(--text-soft); }
.ritm-chip-c { background: var(--cer); color: var(--cerneala); }
.ritm-chip-x { background: #F4E4DF; color: #7A2E1C; }
.is-next .ritm-chip-o { border-color: #2A6A56; color: #B9D3C8; }
.ritm-agenda-more { margin: -6px 0 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-soft); }
.ritm-agenda > .btn { margin-top: 2px; min-height: 46px; }
.ritm-agenda > .btn:first-of-type:last-child { margin-top: 16px; }
#view-overview #coach-schedule-launcher > .ritm-agenda { margin-top: 0; }

/* Barele ritm în blocul principal: țin ritmul, discret */
.hero-card, .coach-panel-slab { position: relative; overflow: hidden; isolation: isolate; }
.hero-card > *:not(.ritm-hero-bars), .coach-panel-slab > *:not(.ritm-hero-bars) { position: relative; z-index: 1; }
.ritm-hero-bars {
  position: absolute; z-index: 0; right: 22px; top: 22px;
  display: flex; align-items: flex-end; gap: 7px; height: 64px; pointer-events: none;
}
.ritm-hero-bars i {
  display: block; width: 12px; border-radius: 99px; background: rgba(250, 252, 250, .14);
  transform-origin: bottom; animation: ritmBeat 1.8s cubic-bezier(.45, 0, .25, 1) infinite;
}
.ritm-hero-bars i:nth-child(1) { height: 42%; animation-delay: -.6s; }
.ritm-hero-bars i:nth-child(2) { height: 100%; background: var(--lime); animation-delay: -.3s; }
.ritm-hero-bars i:nth-child(3) { height: 30%; animation-delay: 0s; }
.coach-panel-slab .ritm-hero-bars { top: 24px; right: 22px; }
[data-motion="reduced"] .ritm-hero-bars i { animation: none; }
@media (prefers-reduced-motion: reduce) { .ritm-hero-bars i { animation: none; } }

/* Scena 3D (three.js) */
[data-ritm-3d] { position: relative; }
.ritm-3d-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.ritm-3d-ready > i { opacity: 0; }
.rl-bars.ritm-3d-ready { width: 100%; height: clamp(300px, 56vh, 540px); }
.auth-hero .ritm-bars-deco.ritm-3d-ready { width: 100%; height: 240px; margin-top: 24px; }
@media (max-width: 860px) { .rl-bars.ritm-3d-ready { height: 230px; margin: -10px 0 -20px; } }
/* intrare GSAP pe pagina de start: elementele pornesc vizibile dacă JS lipsește */
.ritm-landing .rl-main h1 .ln { display: block; }

/* ============================================================
   Director antrenori (client) — card + profil „Vezi detalii”
   ============================================================ */
.cb-filters { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.cb-filter {
  height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  font: 600 .8rem/1 var(--font-primary); cursor: pointer;
}
.cb-filter:hover { border-color: var(--border-strong); color: var(--text); }
.cb-filter.on { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.cb-count { margin-left: auto; font: 500 .7rem/1 var(--font-mono); color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; }

.cb-list { display: flex; flex-direction: column; gap: 10px; }
.cb-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.cb-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.cb-card.current { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.cb-card-body {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px;
  padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit;
}
.cb-photo {
  flex: none; width: 64px; height: 64px; border-radius: 18px; overflow: hidden;
  display: grid; place-items: center; background: var(--surface-alt);
}
.cb-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-photo-initials { background: var(--primary); color: var(--primary-fg); font: 700 1.25rem/1 var(--font-primary); letter-spacing: .02em; }
.cb-photo-xl { width: 104px; height: 104px; border-radius: 28px; }
.cb-photo-xl.cb-photo-initials { font-size: 2rem; }

.cb-card-text { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cb-name { display: flex; align-items: center; gap: 5px; min-width: 0; font: 700 1rem/1.2 var(--font-primary); color: var(--text); }
.cb-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-verified { flex: none; display: inline-flex; width: 17px; height: 17px; color: var(--success); }
.cb-verified svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }
.cb-verified .cb-tick { fill: none; stroke: var(--surface); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cb-meta { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.cb-city, .cb-mode { display: inline-flex; align-items: center; gap: 4px; font: 500 .78rem/1 var(--font-primary); color: var(--text-muted); white-space: nowrap; }
.cb-city svg, .cb-mode svg, .cb-info svg {
  width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.cb-city svg { color: var(--text-soft); }
.cb-mode { height: 22px; padding: 0 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-weight: 600; font-size: .72rem; }
.cb-mode svg { width: 13px; height: 13px; }
.cb-headline { font-size: .8rem; line-height: 1.35; color: var(--text-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

.cb-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.cb-actions > .btn, .cb-actions > .pro-list-status { height: 40px; min-width: 132px; margin: 0; padding: 0 16px; border-radius: 12px; font-size: .82rem; justify-content: center; }
.cb-info {
  height: 40px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text);
  font: 600 .82rem/1 var(--font-primary); cursor: pointer;
}
.cb-info:hover { border-color: var(--border-strong); background: var(--surface-alt); }
.cb-info svg { width: 17px; height: 17px; }
.cb-card-body:focus-visible, .cb-info:focus-visible, .cb-filter:focus-visible { outline: none; box-shadow: var(--shadow-glow); border-radius: 12px; }

@media (max-width: 640px) {
  .cb-card { flex-wrap: wrap; padding: 12px; gap: 12px; }
  .cb-card-body { flex: 1 1 100%; gap: 12px; }
  .cb-photo { width: 56px; height: 56px; border-radius: 16px; }
  .cb-actions { flex: 1 1 100%; }
  .cb-actions > .btn, .cb-actions > .pro-list-status { flex: 1; min-width: 0; }
  .cb-info { flex: none; }
}

/* ---------- Profil antrenor (modal) ---------- */
/* motivul de bare din logo, discret, în colțul copertei */

/* ============================================================
   Fișa de antrenor (onboarding-coach.html)
   ============================================================ */
.coach-onboarding .ob-gap { margin-top: 16px; }
.coach-onboarding .onboarding-step label + label { margin-top: 16px; }
/* Pasul 1: poza, centrată */
.coach-onboarding .onboarding-step[data-step="1"] { text-align: center; }
.coach-onboarding .onboarding-step[data-step="1"] > p { margin-left: auto; margin-right: auto; max-width: 34ch; }
.coach-onboarding .onboarding-step[data-step="1"] label:not(.ob-photo) { text-align: left; }
.coach-onboarding .onboarding-step .ob-photo { position: relative; display: block; width: 132px; height: 132px; margin: 26px auto 10px; cursor: pointer; }
.ob-photo-preview {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  border: 2px dashed var(--border-strong); background: var(--surface-alt);
  color: var(--text-muted); font: 650 .8rem/1.25 var(--font-primary); text-align: center; transition: border-color .2s;
}
.ob-photo:hover .ob-photo-preview { border-color: var(--primary); }
.ob-photo-preview.has { border: 0; box-shadow: 0 0 0 4px var(--surface), 0 0 0 5.5px var(--border), var(--shadow-md); }
.ob-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-photo-badge { position: absolute; right: 2px; bottom: 2px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: var(--primary-fg); box-shadow: 0 0 0 4px var(--bg); }
.ob-photo-badge svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.ob-photo input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ob-photo-msg { display: block; margin-bottom: 22px; color: var(--text-soft); font-size: .78rem; }

.ob-group-label { margin: 20px 0 9px; color: var(--text-muted); font-size: .61rem; font-weight: 750; letter-spacing: .03em; }
.ob-group-label span { float: right; color: var(--text-soft); font-weight: 600; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ob-chips button {
  height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); font: 600 .78rem/1 var(--font-primary); cursor: pointer;
}
.ob-chips button.selected { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }

.ob-certs { display: flex; flex-direction: column; gap: 10px; }
.ob-cert { padding: 10px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.ob-cert-top { display: flex; gap: 8px; align-items: center; }
.coach-onboarding .ob-cert input[type="text"] { margin-top: 0; height: 50px; border-color: transparent !important; background: var(--surface-alt) !important; box-shadow: none !important; }
.ob-cert-del { flex: none; width: 44px; height: 44px; border-radius: 14px; border: 0; background: transparent; color: var(--text-soft); cursor: pointer; font-size: .9rem; }
.ob-cert-file { margin-top: 8px; }
.coach-onboarding .onboarding-step .ob-attach { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; margin: 0; border: 1.5px dashed var(--border-strong); border-radius: 14px; color: var(--primary) !important; font: 700 .82rem/1 var(--font-primary) !important; cursor: pointer; }
.ob-attach small { margin-left: 4px; color: var(--text-soft); font-weight: 500; }
.ob-attach svg, .ob-file i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ob-attach input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ob-file { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 6px 6px 10px; border-radius: 14px; background: color-mix(in srgb, var(--success) 10%, transparent); text-align: left; }
.ob-file i { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--surface); color: var(--success); }
.ob-file > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ob-file b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; color: var(--text); }
.ob-file small { font-size: .72rem; color: var(--success); font-weight: 600; }
.ob-file.loading { background: var(--surface-alt); }
.ob-file.loading small { color: var(--text-soft); }
.ob-file button { flex: none; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--text-soft); cursor: pointer; }
.ob-add {
  margin-top: 12px; height: 46px; padding: 0 16px; border-radius: 14px; border: 1.5px dashed var(--border-strong);
  background: transparent; color: var(--primary); font: 700 .8rem/1 var(--font-primary); cursor: pointer;
}
#consult-choice { margin-bottom: 14px; }
.ob-msg { min-height: 20px; padding: 0 2px 6px; color: var(--danger); font-size: .8rem; font-weight: 700; text-align: center; }
.ob-msg:empty { min-height: 0; padding: 0; }

.ob-preview { padding: 18px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); text-align: left; }
.ob-preview-head { display: flex; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.ob-preview-head img { width: 72px; height: 72px; border-radius: 20px; object-fit: cover; flex: none; }
.ob-preview-head div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ob-preview-head strong { font-size: 1.1rem; color: var(--text); }
.ob-preview-head span { font-size: .8rem; color: var(--text-muted); }
.ob-preview-head em { font-style: normal; font-size: .8rem; color: var(--text-soft); }
.ob-preview dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 16px 0 0; }
.ob-preview dt { margin-bottom: 4px; font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.ob-preview dd { margin: 0; font-size: .84rem; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.ob-preview dd small { color: var(--text-soft); }
.ob-review .form-error:empty { display: none; }
#ob-submit {
  width: 100%; height: 56px; margin-top: 16px; border: 0; border-radius: 17px; cursor: pointer;
  background: var(--cta); color: var(--cta-fg); font: 800 .9rem/1 var(--font-primary);
}
#ob-submit:disabled { opacity: .6; cursor: default; }
#ob-submit span { margin-left: 8px; }
/* Toți pașii: conținut aliniat sus, câmpuri pereche aliniate, butoane simetrice */
.coach-onboarding .onboarding-stage { align-items: flex-start; padding-top: clamp(8px, 4vh, 40px); }
.coach-onboarding [hidden] { display: none !important; }
.coach-onboarding .onboarding-step { margin: 0 auto; }
.coach-onboarding .onboarding-step > p, .ob-coaches > p { font-size: .86rem !important; line-height: 1.5; }
.coach-onboarding .onboarding-fields { align-items: end; }
.coach-onboarding .add { width: 100%; }
.coach-onboarding .ob-add { width: 100%; }
.coach-onboarding .onboarding-actions { display: grid; grid-template-columns: 1fr 1.6fr; grid-template-areas: "s s" "b n"; gap: 6px 10px; }
.coach-onboarding .onboarding-actions #save-state { grid-area: s; text-align: center; font-size: .7rem; }
.coach-onboarding .onboarding-actions #ob-back { grid-area: b; height: 54px; border: 1px solid var(--border-strong) !important; border-radius: 17px; background: transparent !important; font-weight: 750; }
.coach-onboarding .onboarding-actions #ob-next { grid-area: n; width: 100%; height: 54px; border-radius: 17px; }
.coach-onboarding .onboarding-actions:has(#ob-back[hidden]) #ob-next { grid-column: 1 / -1; }
.coach-onboarding .onboarding-actions:has(#ob-next[style*="none"]) #ob-back { grid-column: 1 / -1; }
.ob-preview dd .ob-att { margin-left: 6px; color: var(--success); font-size: .74rem; font-weight: 650; }
.ob-preview dd .ob-noatt { margin-left: 6px; color: var(--text-soft); font-size: .74rem; }
@media (max-width: 600px) {
  .ob-preview dl { grid-template-columns: 1fr; }
}

/* ============================================================
   Admin — mereu pe „adânc” (temă închisă), indiferent de tema
   telefonului; tokenii sunt redefiniți ca tot textul să aibă contrast.
   ============================================================ */
html body.admin-clean-page {
  --bg: #08241C; --surface: #0C3326; --surface-alt: #124636; --border: #1B5443; --border-strong: #2A6A56;
  --text: #FAFCFA; --text-muted: #C9DDD3; --text-soft: #9DBCAF;
  --primary: #C8F04A; --primary-hover: #D7F67C; --primary-fg: #08241C; --primary-soft: rgba(200,240,74,.14);
  --success: #7FD9A8; --danger: #F2A08F; --warning: #F3C969;
  --rl-sq: #C8F04A; --rl-b: #0E3B2E; --rl-m: #0E3B2E; --rl-w: #FAFCFA; --rl-ring: #C8F04A; --rl-dot: #C8F04A;
  color-scheme: dark; background: var(--bg) !important; color: var(--text) !important;
}
.admin-clean-page h1, .admin-clean-page h2, .admin-clean-page strong { color: var(--text) !important; }
.admin-clean-page #admin-logout { color: var(--text) !important; border-color: var(--border-strong) !important; background: transparent !important; }

.adm-photo { width: 46px; height: 46px; border-radius: 14px; object-fit: cover; display: block; }
.adm-photo-empty { display: grid; place-items: center; background: var(--surface-alt); color: var(--primary); font: 700 .8rem/1 var(--font-primary); }
.adm-meta { color: var(--text-muted) !important; }
.adm-stage { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; font: 700 .66rem/1 var(--font-primary); white-space: nowrap; }
.adm-stage::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.adm-stage.review { background: rgba(200,240,74,.14); color: #C8F04A; }
.adm-stage.incomplete { background: rgba(243,201,105,.14); color: #F3C969; }
.adm-stage.approved { background: rgba(127,217,168,.14); color: #7FD9A8; }
.adm-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px;
  border: 1px solid var(--border-strong); border-radius: 12px; background: transparent; color: var(--text);
  font: 700 .74rem/1 var(--font-primary); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.adm-btn:hover { border-color: var(--primary); color: var(--primary); }
.adm-btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.adm-btn.primary:hover { background: var(--primary-hover); color: var(--primary-fg); }
.adm-btn:focus-visible, .adm-sheet-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.adm-sheet { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(2, 12, 8, .78); }
.adm-sheet[hidden] { display: none; }
.adm-sheet-panel {
  position: relative; width: min(680px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto;
  padding: 26px; border: 1px solid var(--border-strong); border-radius: 24px; background: var(--surface); color: var(--text);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.adm-sheet-close {
  position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: var(--surface-alt); color: var(--text); cursor: pointer; font-size: .9rem;
}
.adm-sheet-panel header { display: flex; align-items: center; gap: 16px; padding-right: 44px; }
.adm-photo-xl { width: 92px; height: 92px; border-radius: 26px; flex: none; font-size: 1.4rem; }
.adm-sheet-panel header div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.adm-sheet .adm-sheet-panel h2 { margin: 0; font-size: 1.45rem; letter-spacing: -.02em; color: var(--text) !important; }
.adm-sheet-panel header span:not(.adm-stage) { color: var(--text-muted); font-size: .82rem; overflow-wrap: anywhere; }
.adm-sheet .adm-headline { margin: 16px 0 0; font-size: .98rem; font-weight: 600; color: var(--text) !important; }
.adm-sheet-panel dl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--border); }
.adm-sheet-panel dt, .adm-sheet-panel h3 { margin: 0 0 6px; color: var(--text-soft); font: 500 .64rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; }
.adm-sheet .adm-sheet-panel dd { margin: 0; font-size: .88rem; line-height: 1.45; overflow-wrap: anywhere; color: var(--text) !important; }
.adm-sheet-panel section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.adm-sheet .adm-sheet-panel section p, .adm-sheet .adm-sheet-panel section li { margin: 0; white-space: pre-wrap; font-size: .9rem; line-height: 1.6; color: var(--text) !important; }
.adm-sheet-panel section ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.adm-sheet .adm-empty { color: var(--text-soft) !important; }
.adm-sheet .adm-sheet-meta { margin: 18px 0 0; font: 500 .66rem/1.4 var(--font-mono); color: var(--text-soft) !important; }

.adm-approve { margin: 22px -26px -26px; padding: 20px 26px 24px; border-top: 1px solid var(--border-strong); background: var(--surface-alt); border-radius: 0 0 24px 24px; }
.adm-approve-head { display: flex; flex-direction: column; gap: 4px; }
.adm-approve-head strong { font-size: 1rem; }
.adm-approve-head span { color: var(--text-muted); font-size: .84rem; line-height: 1.45; }
.adm-approve.warn .adm-approve-head strong { color: var(--warning) !important; }
.adm-approve.done .adm-approve-head strong { color: var(--success) !important; }
.adm-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 14px; padding: 14px 16px; border: 1px dashed var(--primary); border-radius: 14px; }
.adm-code span { color: var(--text-soft); font: 500 .64rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; }
.adm-code strong { font: 600 1.15rem/1 var(--font-mono); letter-spacing: .12em; color: var(--primary) !important; }
.adm-approve-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-approve-actions .adm-btn { flex: 1 1 160px; height: 46px; }

@media (max-width: 640px) {
  .adm-sheet { padding: 0; align-items: end; }
  .adm-sheet-panel { max-height: 94dvh; border-radius: 22px 22px 0 0; padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px)); }
  .adm-approve { margin: 22px -18px calc(-22px - env(safe-area-inset-bottom, 0px)); padding: 18px 18px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 0; }
  .adm-sheet-panel dl { grid-template-columns: 1fr 1fr; gap: 14px; }
  .adm-code { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Editor plan de antrenament (wpe)
   ============================================================ */
#view-workout-plan-editor.active { padding-bottom: 0; }
.wpe { max-width: 760px; margin: 0 auto; padding-bottom: 24px; }
.wpe-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.wpe-back { display: inline-flex; align-items: center; gap: 4px; height: 40px; margin-left: -8px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; color: var(--primary); font: 700 .92rem/1 var(--font-primary); cursor: pointer; }
.wpe-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wpe-top-title { font: 500 .68rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }

.wpe-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 26px; }
.wpe-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font: 600 .74rem/1 var(--font-primary); }
.wpe .wpe-title {
  width: 100%; margin: 0; padding: 0; border: 0; outline: 0; resize: none; overflow: hidden; background: transparent; box-shadow: none;
  font: 800 clamp(1.9rem, 8.4vw, 2.75rem)/1.08 var(--font-primary); letter-spacing: -.035em; color: var(--text);
}
.wpe textarea.wpe-title { font-size: clamp(1.9rem, 8.4vw, 2.75rem) !important; min-height: 0 !important; border-radius: 0 !important; }
.wpe-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* textul chip-ului de grupă activ avea o culoare fixă, aproape neagră, pe verde închis */
.mp-sub.active, .mp-simple.active { color: var(--primary-fg) !important; }
.wpe .wpe-title::placeholder { color: color-mix(in srgb, var(--text-soft) 55%, transparent); }

.wpe-block { margin-bottom: 22px; }
.wpe-label { margin: 0 0 10px; font: 500 .66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft); }
.wpe-label small { margin-left: 6px; text-transform: none; letter-spacing: 0; font-family: var(--font-primary); }
.wpe-types { display: flex; flex-wrap: wrap; gap: 7px; }
.wpe-type { height: 40px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: 600 .86rem/1 var(--font-primary); cursor: pointer; }
.wpe-type:hover { border-color: var(--border-strong); }
.wpe-type.on { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }

.wpe-meta { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.wpe-stepper { display: flex; align-items: center; height: 52px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.wpe-stepper button { width: 46px; height: 100%; border: 0; background: transparent; color: var(--text); font-size: 1.3rem; cursor: pointer; }
.wpe-stepper span { min-width: 74px; text-align: center; font-size: .82rem; color: var(--text-soft); }
.wpe-stepper strong { font: 800 1.15rem/1 var(--font-primary); color: var(--text); font-variant-numeric: tabular-nums; }
.wpe-notes textarea { width: 100%; min-height: 52px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); font: 500 .9rem/1.45 var(--font-primary); resize: vertical; }


.wpe-section-head { display: flex; align-items: center; gap: 10px; margin: 30px 0 14px; padding-top: 22px; border-top: 1px solid var(--border); }
.wpe-section-head h2 { margin: 0; font: 800 1.35rem/1 var(--font-primary); letter-spacing: -.02em; color: var(--text); }
.wpe-section-head span { min-width: 28px; height: 24px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--surface-alt); color: var(--text-muted); font: 600 .74rem/1 var(--font-mono); }

/* Bara de jos: jumătate „+ Exercițiu”, jumătate „Salvează” */
.wpe-bar {
  position: sticky; bottom: 0; z-index: 20; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  max-width: 760px; margin: 0 auto; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 70%, color-mix(in srgb, var(--bg) 0%, transparent));
}
.wpe-add, .wpe-save { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 54px; border-radius: 16px; font: 750 .95rem/1 var(--font-primary); cursor: pointer; }
.wpe-add { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.wpe-add svg { width: 18px; height: 18px; }
.wpe-save { border: 0; background: var(--cta); color: var(--cta-fg); }
.wpe-save:disabled { opacity: .6; }
@media (max-width: 820px) {
  body:has(#view-workout-plan-editor.active) .tabbar, body:has(#view-meal-plan-editor.active) .tabbar { display: none !important; }
}
@media (max-width: 640px) {
  .wpe-meta { grid-template-columns: 1fr; }
  .wpe-stepper { width: max-content; }
  }

/* ---------- Căutare exerciții (lupa) ---------- */
.ex-picker { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(4, 18, 13, .55); }
.ex-picker-panel { display: flex; flex-direction: column; width: min(560px, 100%); height: min(720px, calc(100dvh - 40px)); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; }
.ex-picker-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 10px; }
.ex-picker-head h2 { margin: 0; font: 800 1.25rem/1 var(--font-primary); color: var(--text); }
.ex-picker-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-alt); color: var(--text); cursor: pointer; }
.ex-picker-search { position: relative; margin: 0 18px; }
.ex-picker-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--text-soft); stroke-width: 2; stroke-linecap: round; }
.ex-picker-search input { width: 100%; height: 48px; padding: 0 14px 0 42px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-alt); color: var(--text); font: 500 1rem/1 var(--font-primary); }
.ex-picker-search input:focus { outline: 0; border-color: var(--primary); }
.ex-picker-groups { display: flex; gap: 6px; padding: 12px 18px; overflow-x: auto; scrollbar-width: none; }
.ex-picker-groups::-webkit-scrollbar { display: none; }
.ex-picker-groups button { flex: none; height: 34px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font: 600 .8rem/1 var(--font-primary); cursor: pointer; }
.ex-picker-groups button.on { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.ex-picker-list { flex: 1; overflow-y: auto; padding: 4px 12px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.ex-pick { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.ex-pick:hover { background: var(--surface-alt); }
.ex-pick.on { background: var(--primary-soft); }
.ex-pick-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-alt); overflow: hidden; }
.ex-pick-ico img, .ex-pick-ico svg { width: 32px; height: 32px; object-fit: contain; }
.ex-pick-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ex-pick-name { font-size: .92rem; font-weight: 650; line-height: 1.3; }
.ex-pick small { font-size: .74rem; color: var(--text-soft); }
.ex-pick.custom { flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 8px; }
.ex-pick.custom .ex-pick-name { color: var(--primary); }
.ex-picker-empty { padding: 20px 8px; color: var(--text-soft); font-size: .88rem; }
@media (max-width: 640px) {
  .ex-picker { padding: 0; align-items: end; }
  .ex-picker-panel { width: 100%; height: 88dvh; border-radius: 22px 22px 0 0; }
}

/* ---------- Lista de planuri + atribuire ---------- */
.wpl-section + .wpl-section { margin-top: 28px; }
.wpl-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.wpl-head h2 { margin: 0; font: 800 1.15rem/1 var(--font-primary); color: var(--text); }
.wpl-head span { min-width: 26px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--surface-alt); color: var(--text-muted); font: 600 .72rem/1 var(--font-mono); }
.wpl-empty { margin: 0; padding: 18px; border: 1px dashed var(--border-strong); border-radius: 16px; color: var(--text-soft); font-size: .88rem; }
.wpa-hint { margin: 0 0 14px; color: var(--text-muted); font-size: .88rem; line-height: 1.45; }
.wpa-list { display: flex; flex-direction: column; gap: 6px; max-height: 50dvh; overflow-y: auto; }
.wpa-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); cursor: pointer; }
.wpa-row input { position: absolute; opacity: 0; pointer-events: none; }
.wpa-name { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wpa-name strong { font-size: .92rem; color: var(--text); }
.wpa-name small { font-size: .74rem; color: var(--text-soft); }
.wpa-check { flex: none; width: 24px; height: 24px; border: 1.5px solid var(--border-strong); border-radius: 8px; }
.wpa-row:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.wpa-row:has(input:checked) .wpa-check { background: var(--primary); border-color: var(--primary); box-shadow: inset 0 0 0 4px var(--surface); }
.wpa-save { margin-top: 14px; height: 52px; }

/* ============================================================
   Comportament de aplicație pe mobil: fără zoom la dublu tap,
   fără „elastic”/swipe orizontal de navigare, text la mărime fixă.
   ============================================================ */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; }
body { overscroll-behavior: none; overscroll-behavior-x: none; }

/* Pe mobil, formularele deschise ca pagină (programare, editări) ocupă tot
   ecranul: bara de navigare de jos nu mai acoperă butonul de salvare. */
@media (max-width: 820px) {
  body.modal-page-locked .tabbar,
  body:has(.modal-backdrop.active) .tabbar { display: none !important; }
}
/* iOS dă câmpurilor de dată/oră o lățime proprie, care ieșea din ecran. */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
}
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; }
.form-row-2 > * { min-width: 0; }

/* ---------- Instalează aplicația (Setări) ---------- */
.ri-card { display: flex; align-items: center; gap: 14px; margin: 14px 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.ri-card > img { width: 52px; height: 52px; border-radius: 14px; flex: none; box-shadow: var(--shadow-sm); }
.ri-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ri-card-body strong { font-size: .95rem; color: var(--text); }
.ri-card-body small { font-size: .78rem; line-height: 1.4; color: var(--text-soft); }
.ri-card-btn { flex: none; height: 40px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--cta); color: var(--cta-fg); font: 700 .82rem/1 var(--font-primary); cursor: pointer; }
.ri-card-ok { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); font-weight: 800; }

.ri-guide { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(4, 18, 13, .6); }
.ri-guide-panel { position: relative; width: min(420px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 26px 22px 20px; border-radius: 26px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); text-align: center; }
.ri-guide-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-alt); color: var(--text); cursor: pointer; }
.ri-guide-icon { width: 64px; height: 64px; border-radius: 18px; box-shadow: var(--shadow-md); }
.ri-guide-panel h2 { margin: 14px 0 18px; font: 800 1.35rem/1.15 var(--font-primary); letter-spacing: -.02em; color: var(--text); }
.ri-guide-panel ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.ri-guide-panel li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface-alt); }
.ri-step { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: var(--primary-fg); font: 700 .78rem/1 var(--font-primary); }
.ri-text { flex: 1; font-size: .88rem; line-height: 1.4; color: var(--text); }
.ri-text b { font-weight: 700; }
.ri-ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--surface); color: var(--info); }
.ri-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ri-ico img { width: 28px; height: 28px; border-radius: 7px; }
.ri-note { margin: 14px 0 0; font-size: .78rem; line-height: 1.45; color: var(--text-soft); }
.ri-copy { margin-top: 14px; width: 100%; height: 44px; border: 1px dashed var(--border-strong); border-radius: 12px; background: transparent; color: var(--primary); font: 600 .9rem/1 var(--font-mono); cursor: pointer; }
.ri-guide-done { width: 100%; height: 50px; margin-top: 16px; border: 0; border-radius: 14px; background: var(--primary); color: var(--primary-fg); font: 700 .92rem/1 var(--font-primary); cursor: pointer; }
@media (max-width: 640px) {
  .ri-guide { padding: 0; align-items: end; }
  .ri-guide-panel { width: 100%; border-radius: 24px 24px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* Pe telefon/tabletă pagina se derulează doar cât e conținutul: un singur
   spațiu jos, cât bara de navigare (68px + 12px + aer), în loc de trei
   spațieri adunate (~228px) și fără înălțimi minime care forțau scroll
   chiar și când totul încape pe ecran. */
@media (max-width: 1024px) {
  html body .app-shell { box-sizing: border-box !important; min-height: 100dvh !important; padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important; }
  html body .app-shell .main { min-height: 0 !important; padding-bottom: 0 !important; }
  html body .app-shell .main > .view.active { padding-bottom: 0 !important; margin-bottom: 0 !important; }
  /* fără bara de jos (editor, formulare pe tot ecranul) nu mai rezervăm spațiu */
  html body:has(#view-workout-plan-editor.active) .app-shell { padding-bottom: 0 !important; }
}

/* ============================================================
   Baza de alimente (fdb)
   ============================================================ */
.fdb { max-width: 860px; margin: 0 auto; }
.fdb-back { display: inline-flex; align-items: center; gap: 4px; height: 38px; margin: 0 0 6px -8px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; color: var(--primary); font: 700 .88rem/1 var(--font-primary); cursor: pointer; }
.fdb-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fdb-head h1 { margin: 0; font: 800 clamp(1.8rem, 7vw, 2.4rem)/1.05 var(--font-primary); letter-spacing: -.03em; color: var(--text); }
.fdb-head p { margin: 8px 0 18px; font-size: .9rem; line-height: 1.5; color: var(--text-soft); }
.fdb-search { position: relative; margin-bottom: 10px; }
.fdb-search svg { position: absolute; left: 16px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); fill: none; stroke: var(--text-soft); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.fdb .fdb-search input { width: 100%; height: 52px; padding: 0 16px 0 46px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); font: 500 1rem/1 var(--font-primary); }
.fdb .fdb-search input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.fdb-new { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; border: 0; border-radius: 16px; background: var(--cta); color: var(--cta-fg); font: 750 .95rem/1 var(--font-primary); cursor: pointer; }
.fdb-new svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.fdb-io { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.fdb-io-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; margin: 0; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); color: var(--text); font: 650 .88rem/1 var(--font-primary); cursor: pointer; }
.fdb-io-btn:hover { border-color: var(--primary); }
.fdb-io-btn:disabled { opacity: .5; cursor: default; }
.fdb-io-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#foods-msg:empty { display: none; }
#foods-msg { margin-top: 10px; }
.fdb-filters { display: flex; gap: 6px; margin: 20px 0 12px; }
.fdb-filters button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font: 600 .84rem/1 var(--font-primary); cursor: pointer; }
.fdb-filters small { font: 500 .7rem/1 var(--font-mono); color: var(--text-soft); }
.fdb-filters button.on { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.fdb-filters button.on small { color: inherit; opacity: .75; }

.fdb-list-head, .fdb-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 52px 52px 52px 72px; align-items: center; gap: 8px; }
.fdb-list-head { padding: 0 14px 8px; font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.fdb-list-head span:not(:first-child) { text-align: right; }
.fdb-list { border: 1px solid var(--border); border-radius: 18px; background: var(--surface); overflow: hidden; }
.fdb-row { min-height: 56px; padding: 10px 14px; }
.fdb-row + .fdb-row { border-top: 1px solid var(--border); }
.fdb-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fdb-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 600; color: var(--text); }
.fdb-badge { flex: none; padding: 3px 7px; border-radius: 999px; background: var(--surface-alt); color: var(--text-soft); font: 500 .6rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.fdb-badge.mine { background: var(--primary-soft); color: var(--primary); }
.fdb-kcal, .fdb-m { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.fdb-kcal { font-weight: 750; font-size: .92rem; }
.fdb-kcal small { display: none; }
.fdb-m { font-size: .86rem; color: var(--text-muted); }
.fdb-m small { display: none; }
.fdb-actions { display: flex; justify-content: flex-end; gap: 4px; }
.fdb-actions button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--surface-alt); color: var(--text-muted); cursor: pointer; }
.fdb-actions button.del { color: var(--danger); }
.fdb-actions svg { width: 15px; height: 15px; }
.fdb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px 0; font-size: .78rem; color: var(--text-soft); }
.fdb-foot button { height: 38px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text); font: 650 .82rem/1 var(--font-primary); cursor: pointer; }
.fdb-empty { padding: 28px 18px; border: 1px dashed var(--border-strong); border-radius: 18px; color: var(--text-soft); text-align: center; font-size: .9rem; line-height: 1.5; }

/* Pe telefon: numele pe un rând, valorile dedesubt, cu etichete */
@media (max-width: 640px) {
  .fdb-list-head { display: none; }
  .fdb-row { grid-template-columns: auto auto auto auto 1fr; grid-template-areas: "name name name name act" "kcal p c g act"; row-gap: 6px; column-gap: 12px; }
  .fdb-name { grid-area: name; }
  .fdb-kcal { grid-area: kcal; text-align: left; }
  .fdb-row > .fdb-m:nth-of-type(2) { grid-area: p; }
  .fdb-row > .fdb-m:nth-of-type(3) { grid-area: c; }
  .fdb-row > .fdb-m:nth-of-type(4) { grid-area: g; }
  .fdb-actions { grid-area: act; align-self: center; }
  .fdb-kcal small, .fdb-m small { display: inline; color: var(--text-soft); font-weight: 500; font-size: .74rem; }
  .fdb-m { text-align: left; font-size: .82rem; }
}
.fdb-actions svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   Editor plan nutrițional (mpe) — aceleași piese ca editorul de antrenament
   ============================================================ */
.mpe-select { position: relative; }
.mpe .mpe-select select {
  width: 100%; height: 52px; padding: 0 44px 0 16px; border: 1px solid var(--border); border-radius: 16px !important;
  background: var(--surface); color: var(--text); font: 650 1rem/1 var(--font-primary); -webkit-appearance: none; appearance: none;
}
.mpe-select svg { position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--text-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.mpe-target { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 8px; }
.mpe-target label { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 12px 12px 10px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.mpe-target label.kcal { background: var(--primary); border-color: var(--primary); }
.mpe-target span { font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.mpe-target label.kcal span { color: color-mix(in srgb, var(--primary-fg) 75%, transparent); }
.mpe .mpe-target input {
  width: 100%; height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  font: 800 1.35rem/1.1 var(--font-primary) !important; color: var(--text); font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.mpe .mpe-target label.kcal input { color: var(--primary-fg); }
.mpe-target input::-webkit-outer-spin-button, .mpe-target input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mpe-target b { position: absolute; right: 12px; bottom: 12px; font: 500 .74rem/1 var(--font-primary); color: var(--text-soft); }
.mpe-source { margin: 10px 2px 0; font-size: .8rem; line-height: 1.45; color: var(--text-soft); }
.mpe-source.calculated { color: var(--text-muted); }
.mpe-source.confirmed { color: var(--success); font-weight: 600; }
.mpe-source.default { color: var(--warning); }
.mpe-bar .wpe-add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.mpe-summary { margin-top: 20px; border-radius: 20px !important; box-shadow: none !important; }

/* Bara de jos: totalurile pe un rând, apoi „+ Masă” | „Salvează” */
.mpe-bar { grid-template-columns: 1fr 1fr; row-gap: 8px; }
.mpe-bar .editor-bottom-bar.mpe-totals {
  position: static !important; left: auto !important; right: auto !important; grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 10px 12px !important;
  border: 1px solid var(--border) !important; border-radius: 16px; background: var(--surface) !important; box-shadow: none !important;
}
.mpe-totals .ebb-label { font-size: .6rem; }
.mpe-totals .ebb-val { font-size: .86rem; white-space: nowrap; }
.mpe-totals .ebb-val .of { font-size: .66rem; }

@media (max-width: 1024px) {
  body:has(#view-meal-plan-editor.active) .tabbar { display: none !important; }
  html body:has(#view-meal-plan-editor.active) .app-shell { padding-bottom: 0 !important; }
}
@media (max-width: 640px) {
  .mpe-target { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mpe-target label.kcal { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .mpe .mpe-target input { font-size: 1.2rem !important; }
  .mpe-bar .editor-bottom-bar.mpe-totals { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; overflow: visible !important; }
  .mpe-bar .mpe-totals .ebb-item { min-width: 0 !important; width: auto !important; flex: none !important; }
  .mpe-bar .mpe-totals .ebb-item:nth-child(-n+4) { display: block !important; }
  .mpe-bar .mpe-totals .ebb-item:nth-child(5) { display: none !important; }
}

/* Selector Antrenament | Nutriție, deasupra ambelor liste de planuri */
.plans-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-width: 420px; margin: 0 0 18px; padding: 4px; border-radius: 16px; background: var(--surface-alt); }
.plans-switch button { height: 42px; border: 0; border-radius: 12px; background: transparent; color: var(--text-muted); font: 700 .9rem/1 var(--font-primary); cursor: pointer; }
.plans-switch button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
@media (max-width: 640px) { .plans-switch { max-width: none; } }

/* ============================================================
   Calendar antrenor (cal) + programare (ses)
   Fizic = verde pădure, Online = albastru — aceleași culori peste tot.
   ============================================================ */
:root { --mode-fizic: #1F8A5B; --mode-fizic-soft: #E3F2EA; --mode-online: #2C6E9E; --mode-online-soft: #E4EFF8; --mode-ink: #FFFFFF; }
html[data-theme="dark"] { --mode-fizic: #7FD9A8; --mode-fizic-soft: rgba(127,217,168,.13); --mode-online: #9FD2FF; --mode-online-soft: rgba(159,210,255,.13); --mode-ink: #08241C; }

.cal { max-width: 900px; margin: 0 auto; }
.cal-eyebrow { display: block; margin-bottom: 6px; font: 500 .66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }
.cal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.cal-head h1 { margin: 0; font: 800 clamp(1.6rem, 6.4vw, 2.2rem)/1.05 var(--font-primary); letter-spacing: -.03em; color: var(--text); }
.cal-head p { margin: 6px 0 0; font-size: .86rem; color: var(--text-soft); }
.cal-add { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--cta); color: var(--cta-fg); font: 750 .9rem/1 var(--font-primary); cursor: pointer; }
.cal-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

.cal-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.cal-arrow, .cal-today { height: 38px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: 700 .86rem/1 var(--font-primary); cursor: pointer; }
.cal-arrow { width: 38px; font-size: 1.2rem; }
.cal-today { padding: 0 14px; }
.cal-legend { display: flex; gap: 12px; margin-left: auto; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; font: 600 .76rem/1 var(--font-primary); color: var(--text-muted); }
.cal-legend span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.cal-legend .fizic::before { background: var(--mode-fizic); }
.cal-legend .online::before { background: var(--mode-online); }
.cal-views { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 0 14px; padding: 4px; border-radius: 14px; background: var(--surface-alt); }
.cal-views button { height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); font: 700 .86rem/1 var(--font-primary); cursor: pointer; }
.cal-views button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.cal-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 6px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.cal-day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 7px; border: 0; border-radius: 14px; background: transparent; color: var(--text); cursor: pointer; }
.cal-day span { font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); }
.cal-day b { font: 800 1.12rem/1 var(--font-primary); font-variant-numeric: tabular-nums; }
.cal-day em { display: flex; gap: 3px; height: 6px; font-style: normal; }
.cal-day em i { width: 6px; height: 6px; border-radius: 50%; }
.cal-day em i.fizic { background: var(--mode-fizic); }
.cal-day em i.online { background: var(--mode-online); }
.cal-day em i.none { background: transparent; }
.cal-day.today b { color: var(--success); }
.cal-day.on { background: var(--primary); color: var(--primary-fg); }
.cal-day.on span, .cal-day.on b { color: var(--primary-fg); }
.cal-day.on em i.fizic, .cal-day.on em i.online { box-shadow: 0 0 0 1.5px var(--primary); background: var(--primary-fg); }

.cal-agenda { margin-top: 18px; }
.cal-agenda > header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.cal-agenda h2 { margin: 0; font: 800 1.25rem/1.1 var(--font-primary); text-transform: capitalize; color: var(--text); }
.cal-agenda h2 small { margin-left: 8px; font: 500 .82rem/1 var(--font-primary); text-transform: none; color: var(--text-soft); }
.cal-agenda > header > span { font: 500 .7rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); }
.cal-list { display: flex; flex-direction: column; gap: 8px; }
.cal-session {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px 12px 12px; border: 1px solid var(--border); border-left: 4px solid var(--mode-fizic); border-radius: 16px;
  background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit;
}
.cal-session.online { border-left-color: var(--mode-online); }
.cal-session:hover { border-color: var(--border-strong); border-left-color: inherit; }
.cal-time { display: flex; flex-direction: column; gap: 3px; }
.cal-time b { font: 800 1rem/1 var(--font-primary); font-variant-numeric: tabular-nums; }
.cal-time small { font: 500 .7rem/1 var(--font-mono); color: var(--text-soft); }
.cal-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.cal-body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; color: var(--text-soft); }
.cal-mode { padding: 5px 9px; border-radius: 999px; background: var(--mode-fizic-soft); color: var(--mode-fizic); font: 700 .7rem/1 var(--font-primary); }
.cal-session.online .cal-mode { background: var(--mode-online-soft); color: var(--mode-online); }
.cal-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 28px 16px; border: 1.5px dashed var(--border-strong); border-radius: 18px; background: transparent; color: var(--text-soft); cursor: pointer; font: inherit; }
.cal-empty strong { font-size: 1rem; color: var(--text); }
.cal-empty span { font-size: .84rem; }

/* Grila pe ore (tabletă / desktop) */
.cal-grid-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.cal-grid { display: grid; grid-template-columns: 56px repeat(7, minmax(96px, 1fr)); min-width: 760px; }
.cal-grid-corner, .cal-grid-day { position: sticky; top: 0; z-index: 2; height: 54px; background: var(--surface); border-bottom: 1px solid var(--border); }
.cal-grid-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; border-bottom: 1px solid var(--border); color: var(--text); cursor: pointer; }
.cal-grid-day span { font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; color: var(--text-soft); }
.cal-grid-day b { font: 800 1rem/1 var(--font-primary); }
.cal-grid-day.today b { color: var(--success); }
.cal-grid-hour { height: 56px; padding: 6px 8px 0 0; text-align: right; font: 500 .66rem/1 var(--font-mono); color: var(--text-soft); border-top: 1px solid var(--border); }
.cal-grid-cell { position: relative; height: 56px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); cursor: copy; }
.cal-grid-cell:hover { background: color-mix(in srgb, var(--surface-alt) 60%, transparent); }
.cal-grid-session {
  position: absolute; z-index: 1; top: calc(var(--start) / 60 * 56px + 2px);
  left: calc(3px + (100% - 6px) / var(--cols) * var(--col)); width: calc((100% - 6px) / var(--cols) - 2px);
  height: calc(var(--mins) / 60 * 56px - 4px); min-height: 34px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; overflow: hidden;
  padding: 4px 6px; border: 0; border-radius: 12px; background: var(--mode-fizic); color: var(--mode-ink);
  text-align: center; cursor: pointer; font: inherit; box-shadow: 0 2px 8px -4px rgba(8,36,28,.35);
}
.cal-grid-session.online { background: var(--mode-online); }
.cal-grid-session b { font: 600 .7rem/1 var(--font-mono); opacity: .85; }
.cal-grid-session strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 750 .84rem/1.1 var(--font-primary); }

@media (max-width: 767px) {
  .cal-head { align-items: flex-start; }
  .cal-add span { display: none; }
  .cal-add { width: 46px; padding: 0; justify-content: center; }
  .cal-legend { gap: 10px; }
}

/* ---------- Formular programare ---------- */
.modal.ses-modal { width: min(560px, calc(100vw - 32px)); max-width: 560px; max-height: min(92dvh, 860px); overflow-y: auto; padding: 24px 24px 0 !important; border-radius: 26px; }
.ses-head { margin-bottom: 20px; }
.ses-head h2 { margin: 0; font: 800 1.5rem/1.1 var(--font-primary); letter-spacing: -.02em; color: var(--text); }
.ses-block { margin-bottom: 20px; }
/* Client: un singur selector pe toată lățimea, cu listă dedesubt */
.ses-picker { display: flex; flex-direction: column; gap: 6px; }
.ses-picker-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 58px; padding: 0 16px 0 10px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text);
  font: 700 1rem/1.2 var(--font-primary); text-align: left; cursor: pointer;
}
.ses-picker-btn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ses-picker-btn .ses-placeholder { padding-left: 6px; color: var(--text-soft); font-weight: 600; }
.ses-picker-btn svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--text-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.ses-picker-btn.open { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.ses-picker-btn.open svg { transform: rotate(180deg); }
.ses-picker-btn:disabled { cursor: default; background: var(--surface-alt); }
.ses-picker-btn:disabled svg { display: none; }
.ses-picker-btn .avatar, .ses-client .avatar { flex: none; width: 38px !important; height: 38px !important; font-size: .74rem; }
.ses-picker-list[hidden] { display: none !important; }
.ses-picker-list { display: flex; flex-direction: column; max-height: 264px; overflow-y: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.ses-client { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 16px 8px 10px; border: 0; background: transparent; color: var(--text); font: 650 .95rem/1.2 var(--font-primary); text-align: left; cursor: pointer; }
.ses-client + .ses-client { border-top: 1px solid var(--border); }
.ses-client span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ses-client i { flex: none; width: 22px; height: 22px; border: 1.5px solid var(--border-strong); border-radius: 50%; }
.ses-client.on { background: var(--primary-soft); }
.ses-client.on i { border-color: var(--primary); background: var(--primary); box-shadow: inset 0 0 0 4px var(--surface); }
.ses-work-list { max-height: 340px; }
.ses-work-head { position: sticky; top: 0; z-index: 1; padding: 10px 16px 6px; background: var(--surface); font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft); }
.ses-work-head ~ .ses-client, .ses-work-head + .ses-client { border-top: 1px solid var(--border); }
.ses-work-ico { flex: none !important; width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: var(--surface-alt); color: var(--text-soft); }
.ses-work-ico img, .ses-work-ico svg { width: 30px; height: 30px; object-fit: contain; }
.ses-work-ico .plan-icon { display: grid; place-items: center; width: 100%; height: 100%; }
.ses-work small { display: block; margin-top: 2px; font: 500 .74rem/1.2 var(--font-primary); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; }
.ses-picker-btn .ses-work-ico { width: 34px; height: 34px; }
.ses-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-alt); }
.ses-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border: 0; border-radius: 11px; background: transparent; color: var(--text-muted); font: 700 .88rem/1 var(--font-primary); cursor: pointer; }
.ses-seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.ses-modes i { width: 10px; height: 10px; border-radius: 50%; }
.ses-modes .fizic i { background: var(--mode-fizic); }
.ses-modes .online i { background: var(--mode-online); }
.ses-modes .fizic.on { background: var(--mode-fizic-soft); color: var(--mode-fizic); box-shadow: inset 0 0 0 1.5px var(--mode-fizic); }
.ses-modes .online.on { background: var(--mode-online-soft); color: var(--mode-online); box-shadow: inset 0 0 0 1.5px var(--mode-online); }
.ses-panel { margin-top: 10px; }
.ses-panel[hidden] { display: none !important; }
/* grile egale: 9 grupe = 3×3, 6 durate = 3×2 */
.ses-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ses-grid button { height: 44px; padding: 0 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: 650 .86rem/1 var(--font-primary); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ses-grid button.on { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.ses-custom[hidden] { display: none !important; }
.ses-custom { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 0 16px; height: 54px; border: 1px solid var(--primary); border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--primary); }
.ses-modal .ses-custom input { flex: 1; min-width: 0; height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font: 800 1.25rem/1 var(--font-primary) !important; color: var(--text); text-align: left; -moz-appearance: textfield; }
.ses-custom input::-webkit-outer-spin-button, .ses-custom input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ses-custom span { font: 600 .9rem/1 var(--font-primary); color: var(--text-soft); }
.ses-plans { display: flex; flex-direction: column; gap: 8px; max-height: 248px; overflow-y: auto; }
.ses-plan { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 12px 8px 8px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.ses-plan.on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.ses-plan-ico { flex: none; width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: var(--surface-alt); }
.ses-plan-ico img, .ses-plan-ico svg { width: 34px; height: 34px; object-fit: contain; }
.ses-plan strong { display: block; font-size: .9rem; }
.ses-plan small { font-size: .74rem; color: var(--text-soft); }
/* Data și ora: aceeași înălțime, conținut centrat pe ambele axe */
.ses-when { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ses-when label { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.ses-modal .ses-when input {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 52px !important; min-height: 52px !important;
  padding: 0 12px !important; border: 1px solid var(--border); border-radius: 16px !important; background: var(--surface); color: var(--text);
  font: 700 1rem/52px var(--font-primary) !important; text-align: center; -webkit-appearance: none; appearance: none;
}
.ses-modal .ses-when input::-webkit-date-and-time-value { text-align: center; margin: 0; }
.ses-modal .ses-when input::-webkit-datetime-edit { display: inline-flex; justify-content: center; padding: 0; }
.ses-modal .ses-when input::-webkit-calendar-picker-indicator { margin: 0 0 0 6px; opacity: .55; }
.ses-note { margin: 0; font-size: .82rem; color: var(--text-soft); }
#ses-end { color: var(--text-muted); }
.ses-delete { display: block; width: 100%; height: 46px; margin: 4px 0 8px; border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border)); border-radius: 14px; background: transparent; color: var(--danger); font: 700 .88rem/1 var(--font-primary); cursor: pointer; }
/* Butoanele de jos: două jumătăți egale, pe toată lățimea conținutului */
.ses-bar { position: sticky; bottom: 0; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 0; padding: 14px 0 calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--surface); }
.ses-cancel, .ses-save { width: 100%; height: 58px; border-radius: 17px; font: 750 1rem/1 var(--font-primary); cursor: pointer; }
.ses-cancel { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.ses-save { border: 0; background: var(--cta); color: var(--cta-fg); }
.ses-save:disabled { opacity: .45; cursor: default; }
@media (max-width: 1024px) {
  .modal-backdrop.active > .modal.ses-modal { width: 100vw !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; padding: var(--ritm-page-top, 56px) 16px 0 !important; }
  .ses-bar { background: var(--bg); }
}
@media (max-width: 380px) {
  .ses-grid button { font-size: .8rem; }
}

/* Tipul sesiunii în alte locuri (agenda din panou, aplicația clientului) */
.ses-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--mode-fizic); vertical-align: 1px; }
.ses-dot.online { background: var(--mode-online); }
.ses-modal .wpe-label { margin: 0 0 10px !important; font: 500 .66rem/1 var(--font-mono) !important; text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft) !important; }
.ses-modal .wpe-label small { margin-left: 6px; font-family: var(--font-primary); text-transform: none; letter-spacing: 0; }

.cal-week-list { display: flex; flex-direction: column; gap: 6px; }
.cal-week-list .cal-agenda { margin-top: 10px; }
.cal-week-list .cal-agenda.is-today h2 { color: var(--success); }
.cal-list-empty { margin-top: 4px; }
@media (max-width: 767px) {
  .cal-grid { grid-template-columns: 44px repeat(7, minmax(84px, 1fr)); min-width: 640px; }
  .cal-grid-hour { padding-right: 6px; }
}
.ses-modal .ses-custom input:focus { outline: none !important; }

/* ---------- Răspunsul clientului + ora curentă (antrenor) ---------- */
.cal-resp { align-self: flex-start; margin-top: 2px; padding: 3px 8px; border-radius: 999px; font: 700 .68rem/1.2 var(--font-primary); font-style: normal; background: var(--surface-alt); color: var(--text-soft); }
.cal-resp.accepted { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.cal-resp.declined { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.cal-resp.proposed { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.cal-session.past, .cal-grid-session.past { opacity: .5; }
.cal-grid-session .cal-mark { position: absolute; top: 3px; right: 4px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.92); font: 800 .62rem/1 var(--font-primary); font-style: normal; }
.cal-mark.accepted { color: #1F8A5B; }
.cal-mark.declined { color: #B23B2A; }
.cal-mark.proposed { color: #A66A06; }
/* linia orei curente, în coloana zilei de azi */
.cal-now { position: absolute; z-index: 3; left: -1px; right: 0; top: calc(var(--min) / 60 * 56px); height: 2px; background: var(--danger); pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }

.ses-resp { margin: -6px 0 18px; padding: 12px 14px; border-radius: 16px; background: var(--surface-alt); }
.ses-resp strong { display: block; font-size: .92rem; color: var(--text); }
.ses-resp p { margin: 6px 0 0; font-size: .86rem; color: var(--text-muted); }
.ses-resp.accepted { background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
.ses-resp.accepted strong { color: var(--success); }
.ses-resp.declined { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.ses-resp.declined strong { color: var(--danger); }
.ses-resp.proposed { background: color-mix(in srgb, var(--warning) 14%, var(--surface)); }
.ses-resp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ses-resp-actions button { height: 44px; border: 1px solid var(--border-strong); border-radius: 13px; background: var(--surface); color: var(--text); font: 700 .86rem/1 var(--font-primary); cursor: pointer; }
.ses-resp-actions button.primary { border-color: var(--primary); background: var(--primary); color: var(--primary-fg); }

/* ---------- Sesiunile clientului ---------- */
.csx-list { display: flex; flex-direction: column; gap: 10px; }
.csx-empty { margin: 0; padding: 18px; border: 1px dashed var(--border-strong); border-radius: 16px; color: var(--text-soft); font-size: .88rem; line-height: 1.5; }
.csx { border: 1px solid var(--border); border-left: 4px solid var(--mode-fizic); border-radius: 18px; background: var(--surface); overflow: hidden; }
.csx.online { border-left-color: var(--mode-online); }
.csx.today { box-shadow: 0 0 0 1px var(--primary) inset, var(--shadow-sm); }
.csx.past { opacity: .62; }
.csx-top { display: flex; align-items: center; gap: 14px; padding: 14px 14px 12px; }
.csx-top[role="button"] { cursor: pointer; }
.csx-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.csx-info strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; color: var(--text); }
.csx-meta { display: flex; align-items: center; gap: 8px; font: 600 .84rem/1 var(--font-primary); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.csx-mode { padding: 3px 8px; border-radius: 999px; background: var(--mode-fizic-soft); color: var(--mode-fizic); font: 700 .68rem/1.2 var(--font-primary); font-style: normal; }
.csx-mode.online { background: var(--mode-online-soft); color: var(--mode-online); }
.csx-chip { padding: 4px 9px; border-radius: 999px; font: 700 .72rem/1.3 var(--font-primary); background: var(--surface-alt); color: var(--text-muted); }
.csx-chip.ok { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.csx-chip.no { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.csx-chip.ask { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.csx-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
.csx-btn { flex: 1 1 0; min-width: 0; height: 46px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); color: var(--text); font: 700 .9rem/1 var(--font-primary); cursor: pointer; }
.csx-btn.yes { border-color: var(--primary); background: var(--primary); color: var(--primary-fg); }
.csx-link { flex: 1 1 100%; height: 34px; border: 0; background: transparent; color: var(--text-soft); font: 600 .82rem/1 var(--font-primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.csx-past { margin-top: 16px; }
.csx-past summary { display: flex; align-items: center; gap: 8px; padding: 10px 2px; list-style: none; cursor: pointer; font: 700 .92rem/1 var(--font-primary); color: var(--text-muted); }
.csx-past summary::-webkit-details-marker { display: none; }
.csx-past summary::after { content: "⌄"; margin-left: auto; color: var(--text-soft); }
.csx-past[open] summary::after { transform: rotate(180deg); }
.csx-past summary span { min-width: 24px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--surface-alt); font: 600 .72rem/1 var(--font-mono); color: var(--text-soft); }
.csx-propose-sub { margin: 6px 0 0; font-size: .86rem; color: var(--text-soft); }
.csx-note { width: 100%; min-height: 76px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); font: 500 .95rem/1.4 var(--font-primary); resize: vertical; }

/* Propunerea clientului: aceeași formă, contur punctat, fără umplere */
.cal-grid-session.ghost { background: color-mix(in srgb, var(--mode-fizic) 8%, var(--surface)); color: var(--mode-fizic); border: 2px dashed var(--mode-fizic); box-shadow: none; }
.cal-grid-session.ghost.online { background: color-mix(in srgb, var(--mode-online) 8%, var(--surface)); color: var(--mode-online); border-color: var(--mode-online); }
.cal-session.ghost { border: 2px dashed var(--mode-fizic); background: color-mix(in srgb, var(--mode-fizic) 5%, var(--surface)); }
.cal-session.ghost.online { border-color: var(--mode-online); background: color-mix(in srgb, var(--mode-online) 5%, var(--surface)); }
.cal-session.ghost .cal-mode { background: transparent; border: 1.5px dashed currentColor; }
.cal-day em i.ghost { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--mode-fizic); }
.cal-day em i.ghost.online { box-shadow: inset 0 0 0 1.5px var(--mode-online); }
.cal-day.on em i.ghost { box-shadow: inset 0 0 0 1.5px var(--primary-fg); }

/* Notificări: animațiile sunt făcute în notifications.js (Web Animations);
   aici doar starea finală + bara fină care arată cât mai rămâne. */
:root .toast, :root .toast.show { opacity: 1; transform: none; transition: none !important; position: relative; overflow: hidden; touch-action: pan-y; will-change: transform, opacity; }
:root .toast.timed::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--toast-accent, var(--primary)); opacity: .45; transform-origin: left;
  animation: toast-life var(--toast-life, 4500ms) linear forwards;
}
@keyframes toast-life { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { :root .toast.timed::after { animation: none; } }

/* Glisare spre stânga pe cardul sesiunii → „Șterge” */
.cal-swipe { position: relative; border-radius: 16px; overflow: hidden; transition: opacity .25s, transform .25s; }
.cal-swipe .cal-session { position: relative; z-index: 1; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cal-swipe-del {
  position: absolute; inset: 0 0 0 auto; width: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 0; border-radius: 0 16px 16px 0; background: var(--danger); color: #fff; font: 700 .78rem/1 var(--font-primary); cursor: pointer;
  opacity: 0; transition: opacity .15s;
}
.cal-swipe-del svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cal-swipe.open .cal-swipe-del, .cal-swipe:has(.cal-session[style*="translateX"]) .cal-swipe-del { opacity: 1; }
.cal-swipe.removing { opacity: 0; transform: translateX(-24px); pointer-events: none; }
html[data-theme="dark"] .cal-swipe-del { color: var(--adanc); }

/* Notificări: mereu sus, centrate, aceeași lățime pe telefon și desktop */

/* ---------- Antrenament (client): program pe zile, compact ---------- */
.csx-hero { margin: 4px 0 16px; }
.csx-hero .nutri-hero-title { margin: 6px 0 0; }
.csx-program { display: flex; flex-direction: column; gap: 22px; margin-top: 4px; }
.csx-section-title { margin: 0 0 10px; font: 800 1.15rem/1 var(--font-primary); letter-spacing: -.01em; color: var(--text); }
.csx-day + .csx-day { margin-top: 14px; }
.csx-day h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font: 750 .95rem/1 var(--font-primary); color: var(--text); }
.csx-day h3 small { font: 500 .78rem/1 var(--font-primary); color: var(--text-soft); }
.csx-day.today h3 { color: var(--success); }
.csx-list { gap: 8px; }
/* card compact: ora în stânga, titlul + etichetele pe un rând */
.csx-top { gap: 12px; padding: 12px 12px 10px; }
.csx-when { flex: none; width: 54px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0; border-radius: 12px; background: var(--surface-alt); }
.csx-when b { font: 800 1rem/1 var(--font-primary); color: var(--text); font-variant-numeric: tabular-nums; }
.csx-when small { font: 500 .64rem/1 var(--font-mono); color: var(--text-soft); }
.csx-info { gap: 6px; }
.csx-info strong { font-size: .95rem; }
.csx-meta { flex-wrap: wrap; gap: 6px; }
.csx-actions { gap: 6px; padding: 0 12px 12px; }
.csx-btn { height: 40px; border-radius: 12px; font-size: .85rem; }
.csx-link { height: 28px; font-size: .78rem; }
/* istoric: rânduri subțiri, estompate, fără carduri */
.csx-history .csx-section-title { color: var(--text-muted); }
.csx-hist-list { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
.csx-hist { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-left: 3px solid var(--mode-fizic); }
.csx-hist.online { border-left-color: var(--mode-online); }
.csx-hist + .csx-hist { border-top: 1px solid var(--border); }
.csx-hist-date { font: 600 .74rem/1.1 var(--font-mono); color: var(--text-soft); text-transform: uppercase; }
.csx-hist-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.csx-hist-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; font-weight: 650; color: var(--text-muted); }
.csx-hist-main small { font-size: .72rem; color: var(--text-soft); }
.csx-hist .csx-chip { font-size: .68rem; }
.csx-hist-acts { display: flex; gap: 6px; }
.csx-hist-acts button { width: 34px; height: 34px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text-muted); font: 800 .9rem/1 var(--font-primary); cursor: pointer; }
.csx-hist-acts button:first-child { border-color: var(--success); color: var(--success); }
.csx-empty.slim { padding: 12px 14px; font-size: .82rem; }
.csx-history .csx-past { margin-top: 10px; }
.csx-link.inline { flex: none; height: auto; padding: 0 2px; font-size: .74rem; }

/* ============================================================
   Clienți (antrenor): listă compactă + profil
   ============================================================ */
.clx-head h1 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 800 clamp(1.7rem, 7vw, 2.3rem)/1.05 var(--font-primary); letter-spacing: -.03em; color: var(--text); }
.clx-head h1 span { min-width: 30px; height: 26px; padding: 0 9px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--surface-alt); font: 600 .8rem/1 var(--font-mono); color: var(--text-muted); }
.clx-filters { margin: 12px 0 14px; }
.clx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mode-fizic); }
.clx-dot.online { background: var(--mode-online); }
.clx-filters button.on .clx-dot { box-shadow: 0 0 0 2px var(--primary-fg); }
.clx-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); overflow: hidden; }
.clx-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.clx-row + .clx-row { border-top: 1px solid var(--border); }
.clx-row:hover { background: var(--surface-alt); }
.clx-row .avatar { flex: none; width: 42px !important; height: 42px !important; font-size: .8rem; }
.clx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.clx-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.clx-main small { font-size: .78rem; color: var(--text-soft); }
.clx-main em { font-style: normal; opacity: .7; }
.clx-mode { flex: none; padding: 5px 10px; border-radius: 999px; background: var(--mode-fizic-soft); color: var(--mode-fizic); font: 700 .72rem/1 var(--font-primary); }
.clx-mode.online { background: var(--mode-online-soft); color: var(--mode-online); }
.clx-mode.none { background: transparent; color: var(--text-soft); }
.clx-chev { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--text-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.cdx { max-width: 820px; margin: 0 auto; padding-bottom: 24px; }
.cdx-hero { display: flex; align-items: center; gap: 16px; margin: 6px 0 18px; }
.cdx-hero > .avatar { flex: none; width: 76px !important; height: 76px !important; font-size: 1.3rem; }
.cdx-id { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cdx-id h1 { margin: 0; font: 800 clamp(1.5rem, 6vw, 2rem)/1.1 var(--font-primary); letter-spacing: -.02em; color: var(--text); }
.cdx-id > small { font-size: .78rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; }
.cdx-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cdx-city { font: 600 .82rem/1 var(--font-primary); color: var(--text-muted); }
.cdx-edit { padding: 0; border: 0; background: none; color: var(--primary); font: 700 .8rem/1 var(--font-primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.cdx-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.cdx-actions button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 10px 6px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); font: 700 .82rem/1.15 var(--font-primary); text-align: center; cursor: pointer; }
.cdx-actions button:hover { border-color: var(--primary); }
.cdx-actions svg { width: 24px; height: 24px; fill: none; stroke: var(--primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cdx-actions small { display: block; margin-top: 3px; font: 500 .68rem/1 var(--font-mono); color: var(--text-soft); }

.cdx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.cdx-kpis > div { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 16px; background: var(--surface-alt); min-width: 0; }
.cdx-kpis span { font: 500 .6rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.cdx-kpis b { font: 800 1.3rem/1 var(--font-primary); color: var(--text); font-variant-numeric: tabular-nums; }
.cdx-kpis b small { font-size: .74rem; font-weight: 600; color: var(--text-soft); }
.cdx-kpis b.down { color: var(--success); }
.cdx-kpis b.up { color: var(--warning); }
.cdx-kpis em { font-style: normal; font-size: .7rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cdx-sec { margin-bottom: 10px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); overflow: hidden; }
.cdx-sec summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; list-style: none; cursor: pointer; }
.cdx-sec summary::-webkit-details-marker { display: none; }
.cdx-sec summary > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cdx-sec summary strong { font: 750 1rem/1.1 var(--font-primary); color: var(--text); }
.cdx-sec summary small { font-size: .78rem; color: var(--text-soft); }
.cdx-sec summary svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--text-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.cdx-sec[open] summary svg { transform: rotate(180deg); }
.cdx-sec-body { padding: 0 16px 16px; }
.cdx-sub { margin: 16px 0 10px; font: 500 .64rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft); }
.cdx-sec-body > .cdx-sub:first-child { margin-top: 2px; }
.cdx-muted { margin: 0; font-size: .86rem; color: var(--text-soft); }
.cdx-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.cdx-facts > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--surface-alt); }
.cdx-facts span { font: 500 .6rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); }
.cdx-facts b { font-size: .9rem; color: var(--text); }
.cdx-note { margin-top: 10px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--warning) 10%, var(--surface)); }
.cdx-note span { font: 500 .6rem/1 var(--font-mono); text-transform: uppercase; color: var(--warning); }
.cdx-note p { margin: 6px 0 0; font-size: .88rem; color: var(--text); white-space: pre-wrap; }

/* Calorii pe 14 zile, cu linia țintei */

.cdx-fb { display: flex; flex-direction: column; gap: 8px; }
.cdx-fb-item { padding: 12px; border-radius: 14px; background: var(--surface-alt); }
.cdx-fb-item header { display: flex; justify-content: space-between; gap: 10px; }
.cdx-fb-item header strong { font-size: .9rem; color: var(--text); }
.cdx-fb-item header span { font: 500 .7rem/1.3 var(--font-mono); color: var(--text-soft); }
.cdx-fb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cdx-fb-tags i { padding: 3px 8px; border-radius: 999px; background: var(--surface); font: 650 .7rem/1.2 var(--font-primary); font-style: normal; color: var(--text-muted); }
.cdx-fb-tags i.ok { color: var(--success); background: color-mix(in srgb, var(--success) 13%, transparent); }
.cdx-fb-tags i.no { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.cdx-fb-item p { margin: 8px 0 0; font-size: .86rem; line-height: 1.45; color: var(--text); }

.cdx-plans { display: flex; flex-direction: column; gap: 6px; }
.cdx-plan { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.cdx-plan-ico { flex: none; width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border-radius: 12px; background: var(--surface-alt); }
.cdx-plan-ico img, .cdx-plan-ico svg { width: 36px; height: 36px; object-fit: contain; }
.cdx-plan-ico b { font: 800 .82rem/1 var(--font-primary); }
.cdx-plan-ico small { font: 500 .56rem/1 var(--font-mono); color: var(--text-soft); }
.cdx-plan strong { display: block; font-size: .9rem; }
.cdx-plan small { font-size: .74rem; color: var(--text-soft); }
.cdx-remove { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; margin-top: 18px; border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border)); border-radius: 14px; background: transparent; color: var(--danger); font: 700 .88rem/1 var(--font-primary); cursor: pointer; }
.cdx-remove svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.cdx-input { width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--border); border-radius: 16px !important; background: var(--surface); color: var(--text); font: 600 1rem/1 var(--font-primary); }
@media (max-width: 640px) {
  .cdx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Poze de progres ---------- */
.pp-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pp-strip::-webkit-scrollbar { display: none; }
.pp-thumb { flex: none; width: 112px; display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; scroll-snap-align: start; font: inherit; }
.pp-thumb img { width: 112px; height: 150px; object-fit: cover; border-radius: 14px; background: var(--surface-alt); }
.pp-thumb span { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; color: var(--text-soft); }
.pp-thumb b { font: 600 .7rem/1 var(--font-mono); color: var(--text); }
.pp-empty { margin: 0; font-size: .86rem; color: var(--text-soft); }
.pp-viewer { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; background: rgba(4, 12, 9, .96); color: #fff; padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px calc(env(safe-area-inset-bottom, 0px) + 14px); touch-action: pan-y; }
.pp-viewer-top { display: flex; align-items: center; justify-content: space-between; height: 44px; font: 600 .8rem/1 var(--font-mono); opacity: .85; }
.pp-x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 1rem; cursor: pointer; }
.pp-stage { flex: 1; min-height: 0; display: grid; gap: 10px; align-items: center; }
.pp-stage.split { grid-template-columns: 1fr 1fr; }
.pp-stage figure { margin: 0; height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.pp-stage img { max-width: 100%; max-height: calc(100% - 28px); object-fit: contain; border-radius: 14px; }
.pp-stage figcaption { font: 500 .78rem/1.2 var(--font-mono); opacity: .85; text-align: center; }
.pp-viewer-bar { display: grid; grid-template-columns: 52px 1fr 52px; gap: 10px; align-items: center; padding-top: 10px; }
.pp-viewer-bar > button[data-pp-step] { height: 52px; border: 0; border-radius: 16px; background: rgba(255,255,255,.12); color: #fff; font-size: 1.5rem; cursor: pointer; }
.pp-viewer-bar button:disabled { opacity: .3; }
.pp-compare { height: 52px; border: 1px solid rgba(255,255,255,.3); border-radius: 16px; background: transparent; color: #fff; font: 700 .9rem/1 var(--font-primary); cursor: pointer; }
.pp-compare.on { background: #fff; color: #08241C; }

/* Card poze (client, tab Greutate) */
.pp-card { padding: 18px !important; }
.pp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pp-head h3 { margin: 4px 0 0; }
.pp-week { font: 600 .74rem/1 var(--font-mono); color: var(--text-soft); }
.pp-add { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 16px; border: 1.5px dashed var(--border-strong); border-radius: 18px; background: var(--surface-alt); text-align: center; cursor: pointer; }
.pp-add-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: var(--primary-fg); }
.pp-add-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pp-add strong { font-size: .98rem; color: var(--text); }
.pp-add small { font-size: .8rem; color: var(--text-soft); }
.pp-this.has { display: flex; gap: 14px; align-items: flex-start; }
.pp-this-img { flex: none; padding: 0; border: 0; background: none; cursor: pointer; }
.pp-this-img img { width: 104px; height: 140px; object-fit: cover; border-radius: 14px; display: block; }
.pp-this-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pp-this-info strong { font-size: .95rem; color: var(--text); }
.pp-this-info span { font-size: .8rem; line-height: 1.4; color: var(--text-soft); }
.pp-this-acts { display: flex; gap: 8px; margin-top: 4px; }
.pp-btn { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--primary); color: var(--primary-fg); font: 700 .82rem/1 var(--font-primary); cursor: pointer; }
.pp-btn.ghost { border: 1px solid var(--border-strong); background: transparent; color: var(--text); }
.pp-this.busy { opacity: .5; pointer-events: none; }
.pp-tips { margin-top: 14px; border-radius: 14px; background: var(--surface-alt); }
.pp-tips summary { padding: 12px 14px; font: 700 .86rem/1 var(--font-primary); color: var(--text); cursor: pointer; list-style: none; }
.pp-tips summary::-webkit-details-marker { display: none; }
.pp-tips summary::after { content: "⌄"; float: right; color: var(--text-soft); }
.pp-tips ol { margin: 0; padding: 0 14px 14px 32px; display: flex; flex-direction: column; gap: 8px; font-size: .84rem; line-height: 1.45; color: var(--text-muted); }
.pp-tips b { color: var(--text); }
.pp-history { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.clx-search { position: relative; margin-bottom: 0; }
.clx-search input { width: 100%; height: 52px; padding: 0 16px 0 46px !important; border: 1px solid var(--border); border-radius: 16px !important; background: var(--surface); color: var(--text); font: 500 1rem/1 var(--font-primary); }
.clx-search input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
/* grafic calorii: barele și linia țintei se raportează la aceeași zonă */
/* vizualizatorul de poze stă deasupra barei de navigare */
.pp-viewer { z-index: 10050; background: #06130e; }
body:has(#pp-viewer) .tabbar { display: none !important; }

/* Cardul „Bună, …” al clientului: poză de antrenament în fundal, text deasupra */
html body .hero-card.hero-photo {
  position: relative; overflow: hidden; isolation: isolate; min-height: 232px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 22px !important;
  border: 0 !important; border-radius: 26px !important; color: #fff !important;
  background: #06130e url("../img/ritm/hero-client.webp") 62% 38% / cover no-repeat !important;
  box-shadow: 0 18px 40px -22px rgba(4, 14, 10, .65) !important;
}
/* gradient: întunecă stânga-jos unde stă textul, lasă sportivul vizibil */
html body .hero-card.hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, rgba(4, 14, 10, .92) 0%, rgba(4, 14, 10, .55) 42%, rgba(4, 14, 10, 0) 72%),
    linear-gradient(90deg, rgba(4, 14, 10, .7) 0%, rgba(4, 14, 10, .15) 55%, rgba(4, 14, 10, 0) 100%);
}
html body .hero-card.hero-photo .kicker { color: var(--lime) !important; font-family: var(--font-mono); letter-spacing: .12em; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
html body .hero-card.hero-photo .title { color: #fff !important; font-size: clamp(1.9rem, 8vw, 2.6rem) !important; line-height: 1.02; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
html body .hero-card.hero-photo .sub { max-width: 30ch; color: rgba(255,255,255,.86) !important; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
html body .hero-card.hero-photo .cta { align-self: flex-start; margin-top: 10px; background: var(--lime) !important; color: #08241C !important; border: 0 !important; box-shadow: none !important; }
html body .hero-card.hero-photo .cta svg { stroke: currentColor; }
@media (min-width: 768px) { html body .hero-card.hero-photo { min-height: 260px; background-position: 70% 35% !important; } }

/* ---------- Ținta (antrenor) ---------- */
.tgx-hero { padding: 18px; border-radius: 20px; background: var(--primary); color: var(--primary-fg); margin-bottom: 14px; }
.tgx-total { display: flex; align-items: baseline; gap: 8px; }
.tgx-total b { font: 800 2.6rem/1 var(--font-primary); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tgx-total span { font: 500 .78rem/1 var(--font-mono); opacity: .75; }
.tgx-split { display: flex; gap: 3px; height: 10px; margin-top: 14px; border-radius: 999px; overflow: hidden; }
.tgx-split i { flex: 1 1 0; min-width: 4px; transition: flex-grow .25s ease; }
.tgx-split i.p, .tgx-row.p .tgx-name i, .tgx-split-legend .p::before { background: #7FD9A8; }
.tgx-split i.c, .tgx-row.c .tgx-name i, .tgx-split-legend .c::before { background: #9FD2FF; }
.tgx-split i.f, .tgx-row.f .tgx-name i, .tgx-split-legend .f::before { background: #F3C969; }
.tgx-split-legend { display: flex; gap: 14px; margin-top: 10px; font: 600 .74rem/1 var(--font-mono); opacity: .9; }
.tgx-split-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tgx-split-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.tgx-macros { display: flex; flex-direction: column; gap: 8px; }
.tgx-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.tgx-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; font: 700 .95rem/1.1 var(--font-primary); color: var(--text); }
.tgx-name i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; }
.tgx-name small { font: 500 .72rem/1 var(--font-mono); color: var(--text-soft); }
.tgx-step { flex: none; display: flex; align-items: center; gap: 6px; }
.tgx-step button { width: 38px; height: 44px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-alt); color: var(--text); font: 600 1.2rem/1 var(--font-primary); cursor: pointer; }
.tgx-step label { display: flex; align-items: baseline; gap: 3px; height: 44px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); align-items: center; }
.tgx .tgx-step input { width: 52px; height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font: 800 1.15rem/1 var(--font-primary) !important; text-align: right; color: var(--text); -moz-appearance: textfield; }
.tgx-step input::-webkit-outer-spin-button, .tgx-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tgx-step input:focus { outline: none; }
.tgx-step label span { font: 600 .8rem/1 var(--font-primary); color: var(--text-soft); }
.tgx-auto { margin-top: 14px; padding: 14px; border-radius: 18px; background: var(--surface-alt); }
.tgx-auto > label { display: block; margin-bottom: 8px; font: 500 .64rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft); }
.tgx-auto > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.tgx .tgx-auto input { height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: 12px !important; background: var(--surface); color: var(--text); font: 700 1rem/1 var(--font-primary); }
.tgx-auto button { height: 46px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--primary); color: var(--primary-fg); font: 700 .86rem/1 var(--font-primary); cursor: pointer; }
.tgx-auto small { display: block; margin-top: 8px; font-size: .74rem; line-height: 1.4; color: var(--text-soft); }

/* ---------- Evoluție greutate: listă pe săptămâni ---------- */
.cdx-weeks { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.cdx-week { display: grid; grid-template-columns: minmax(0, 1fr) auto 76px; align-items: center; gap: 12px; min-height: 54px; padding: 8px 14px; }
.cdx-week + .cdx-week { border-top: 1px solid var(--border); }
.cdx-week.current { background: var(--surface-alt); }
.cdx-week-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cdx-week-label b { font-size: .88rem; color: var(--text); }
.cdx-week-label small { font-size: .72rem; color: var(--text-soft); }
.cdx-week strong { font: 800 1.05rem/1 var(--font-primary); color: var(--text); font-variant-numeric: tabular-nums; }
.cdx-week strong small { font-size: .72rem; font-weight: 600; color: var(--text-soft); }
.cdx-week em { justify-self: end; padding: 4px 8px; border-radius: 999px; font: 700 .72rem/1 var(--font-mono); font-style: normal; background: var(--surface-alt); color: var(--text-soft); }
.cdx-week em.down { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.cdx-week em.up { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }

/* ============================================================
   Greutate (client): card cu poză, start → țintă
   ============================================================ */
.wgx-hero {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 18px;
  min-height: 300px; padding: 20px; border-radius: 26px; color: #fff;
  background: #050807 url("../img/ritm/hero-weight.webp") 70% 42% / cover no-repeat;
  box-shadow: 0 18px 40px -22px rgba(4, 14, 10, .7);
}
.wgx-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(4,10,8,.94) 0%, rgba(4,10,8,.55) 48%, rgba(4,10,8,.2) 100%), linear-gradient(90deg, rgba(4,10,8,.55), rgba(4,10,8,0) 70%); }
.wgx-top { display: flex; align-items: center; justify-content: space-between; }
.wgx-kicker { font: 600 .7rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--lime); }
.wgx-goal-btn { height: 34px; padding: 0 14px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font: 700 .78rem/1 var(--font-primary); cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wgx-now { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.wgx-now strong { font: 800 clamp(3rem, 15vw, 4rem)/.95 var(--font-primary); letter-spacing: -.04em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.wgx-now strong small { font-size: 1.1rem; font-weight: 600; letter-spacing: 0; opacity: .8; }
.wgx-now span { font-size: .84rem; color: rgba(255,255,255,.78); }
.wgx-track { display: flex; flex-direction: column; gap: 10px; }
.wgx-ends { display: flex; justify-content: space-between; }
.wgx-ends span { display: flex; flex-direction: column; gap: 3px; }
.wgx-ends span.goal { align-items: flex-end; }
.wgx-ends small { font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.65); }
.wgx-ends b { font: 750 1rem/1 var(--font-primary); }
.wgx-ends .goal b { color: var(--lime); }
.wgx-bar { position: relative; height: 8px; border-radius: 999px; background: rgba(255,255,255,.18); }
.wgx-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--lime); }
.wgx-bar em { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--lime); transform: translate(-50%, -50%); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.wgx-msg { margin: 0; font-size: .86rem; color: rgba(255,255,255,.85); }
.wgx-msg b { color: #fff; }

.wgx-add { margin-top: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }
.wgx-add label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.wgx-add label span { font: 750 .98rem/1 var(--font-primary); color: var(--text); }
.wgx-add label small { font-size: .74rem; color: var(--text-soft); }
.wgx-add-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.wgx-input { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--surface); }
.wgx-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.weight-page .wgx-input input { flex: 1; min-width: 0; height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font: 800 1.5rem/1 var(--font-primary) !important; color: var(--text); -moz-appearance: textfield; }
.wgx-input input:focus { outline: none; }
.wgx-input input::-webkit-outer-spin-button, .wgx-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wgx-input span { font: 600 .9rem/1 var(--font-primary); color: var(--text-soft); }
.wgx-save { height: 56px; padding: 0 22px; border: 0; border-radius: 16px; background: var(--cta); color: var(--cta-fg); font: 750 .95rem/1 var(--font-primary); cursor: pointer; }
.wgx-save:disabled { opacity: .6; }

.wgx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.wgx-stats > div { display: flex; flex-direction: column; gap: 5px; padding: 14px; border-radius: 18px; background: var(--surface-alt); min-width: 0; }
.wgx-stats span { font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.wgx-stats b { font: 800 1.35rem/1 var(--font-primary); color: var(--text); font-variant-numeric: tabular-nums; }
.wgx-stats b small { font-size: .74rem; font-weight: 600; color: var(--text-soft); }
.wgx-stats b.down { color: var(--success); }
.wgx-stats b.up { color: var(--warning); }
.wgx-stats em { font-style: normal; font-size: .72rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weight-page .pp-card { margin-top: 0; }
/* poza: gantera și brațul vizibile, întunecat doar unde stă textul */
.wgx-hero { background-position: 58% 64%; min-height: 320px; }
.wgx-hero::before { background:
  linear-gradient(0deg, rgba(4,10,8,.92) 0%, rgba(4,10,8,.6) 34%, rgba(4,10,8,.08) 62%, rgba(4,10,8,0) 100%),
  linear-gradient(90deg, rgba(4,10,8,.45), rgba(4,10,8,0) 60%); }

/* Fișa clientului, tema întunecată: fără resturi turcoaz din vechiul brand */
.onboarding-step input:focus, .onboarding-step select:focus, .onboarding-step textarea:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 4px var(--primary-soft) !important; }
.onboarding-metrics strong { color: var(--primary) !important; }
.onboarding-result > button { background: var(--cta) !important; color: var(--cta-fg) !important; }
/* loader-ul rămâne vizibil cât pagina de start e ascunsă pentru verificarea contului */
#app-boot { visibility: visible; }
/* Loader complet și în paginile care încarcă doar ritm.css (pagina de start) */
.app-loader { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; transition: opacity .3s ease; }
.app-loader.hide { opacity: 0; pointer-events: none; }

/* ---------- Stele rating ---------- */
.rt { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.rt svg { flex: none; }
.rt .rt-bg { fill: var(--border-strong); }
.rt .rt-fg { fill: #F2B632; }
.rt b { margin-left: 5px; font: 750 .8rem/1 var(--font-primary); color: var(--text); }
.rt small { margin-left: 3px; font: 500 .72rem/1 var(--font-primary); color: var(--text-soft); }
.rt-empty { font: 600 .72rem/1 var(--font-primary); color: var(--text-soft); }
.cb-rating { display: flex; }

/* ============================================================
   Profil antrenor (client) — cp3
   ============================================================ */
.modal.cp3 { position: relative; width: min(560px, calc(100vw - 32px)); max-width: 560px; max-height: min(92dvh, 900px); overflow-y: auto; padding: 0 20px !important; border-radius: 26px; }
.cp3-back { display: inline-flex; align-items: center; gap: 4px; height: 40px; margin: 14px 0 6px -8px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; color: var(--primary); font: 700 .9rem/1 var(--font-primary); cursor: pointer; }
.cp3-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cp3-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cp3-cover { align-self: stretch; height: 92px; border-radius: 20px; background: radial-gradient(120% 140% at 85% 0%, #1B5443 0%, #0E3B2E 45%, #08241C 100%); }
.cp3 .cb-photo-xl { width: 104px; height: 104px; margin-top: -52px; border-radius: 30px; box-shadow: 0 0 0 5px var(--surface), var(--shadow-md); }
.cp3-hero h1 { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 0; font: 800 1.6rem/1.1 var(--font-primary); letter-spacing: -.025em; color: var(--text); }
.cp3-hero h1 .cb-verified { width: 21px; height: 21px; }
.cp3-headline { margin: 6px 0 0; font-size: .95rem; line-height: 1.4; color: var(--text-muted); }
.cp3-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }
.cp3-open { display: inline-flex; align-items: center; gap: 6px; font: 600 .74rem/1 var(--font-primary); color: var(--text-soft); }
.cp3-open i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cp3-open.on { color: var(--success); }

.cp3-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0 6px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cp3-stats > * { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 0 6px; border: 0; background: none; font: inherit; color: inherit; text-align: center; }
.cp3-stats > * + * { border-left: 1px solid var(--border); }
.cp3-stats button { cursor: pointer; }
.cp3-stats b { font: 800 1.3rem/1 var(--font-primary); color: var(--text); font-variant-numeric: tabular-nums; }
.cp3-stats span { font-size: .72rem; color: var(--text-soft); }

.cp3-sec { padding: 20px 0 6px; }
.cp3-sec + .cp3-sec { border-top: 1px solid var(--border); }
.cp3-sec h3 { margin: 0 0 12px; font: 500 .66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }
.cp3-bio { margin: 0; white-space: pre-wrap; font-size: .95rem; line-height: 1.6; color: var(--text); }
.cp3-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.cp3-tags span { padding: 7px 12px; border-radius: 999px; background: var(--surface-alt); color: var(--text); font: 600 .8rem/1.1 var(--font-primary); }
.cp3-langs { margin: 12px 0 0; font-size: .82rem; color: var(--text-soft); }
.cp3-certs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cp3-certs li { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; color: var(--text); }
.cp3 .cp3-certs svg { width: 20px; height: 20px; flex: none; padding: 3px; border-radius: 50%; background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cp3-prices { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.cp3-prices > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; }
.cp3-prices > div + div { border-top: 1px solid var(--border); }
.cp3-prices span { font-size: .9rem; color: var(--text); }
.cp3-prices b { font: 750 1rem/1 var(--font-primary); color: var(--text); white-space: nowrap; }
.cp3-prices small { font: 500 .72rem/1 var(--font-primary); color: var(--text-soft); }

.cp3-score { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cp3-score > b { font: 800 2.4rem/1 var(--font-primary); color: var(--text); letter-spacing: -.03em; }
.cp3-score > div { display: flex; flex-direction: column; gap: 6px; }
.cp3-score span { font-size: .8rem; color: var(--text-soft); }
.cp3-reviews { display: flex; flex-direction: column; gap: 8px; }
.cp3-review { padding: 12px 14px; border-radius: 16px; background: var(--surface-alt); }
.cp3-review header { display: flex; align-items: center; gap: 8px; }
.cp3-review-av { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: var(--primary-fg); font: 700 .74rem/1 var(--font-primary); }
.cp3-review strong { flex: 1; font-size: .88rem; color: var(--text); }
.cp3-review p { margin: 8px 0 0; font-size: .88rem; line-height: 1.5; color: var(--text); }
.cp3-muted { margin: 0; font-size: .88rem; color: var(--text-soft); }
.cp3-rate { margin-top: 14px; padding: 16px; border: 1px dashed var(--border-strong); border-radius: 18px; text-align: center; }
.cp3-rate > strong { display: block; font-size: .95rem; color: var(--text); }
.cp3-stars { display: flex; justify-content: center; gap: 6px; margin: 12px 0; }
.cp3-stars button { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.cp3-stars svg { width: 34px; height: 34px; fill: var(--border-strong); transition: transform .15s, fill .15s; }
.cp3-stars button.on svg { fill: #F2B632; }
.cp3-stars button:active svg { transform: scale(.9); }
.cp3-rate textarea { width: 100%; min-height: 64px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: 500 .9rem/1.4 var(--font-primary); resize: vertical; }
.cp3-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.cp3-links a { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; color: var(--text); text-decoration: none; }
.cp3-links span { font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.cp3-links b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 600; }

.cp3-bar { position: sticky; bottom: 0; z-index: 2; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; margin: 18px -20px 0; padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--surface); }
.cp3-from { display: flex; flex-direction: column; gap: 4px; }
.cp3-from span { font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.cp3-from b { font: 800 1.15rem/1 var(--font-primary); color: var(--text); white-space: nowrap; }
.cp3-from small { font: 500 .72rem/1 var(--font-primary); color: var(--text-soft); }
.cp3-from b.ask { font-size: .9rem; font-weight: 650; }
.cp3-btn { width: 100%; height: 52px; border: 0; border-radius: 16px; background: var(--cta); color: var(--cta-fg); font: 750 .95rem/1 var(--font-primary); cursor: pointer; }
.cp3-btn.ghost { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.cp3-btn.small { width: auto; height: 44px; margin-top: 10px; padding: 0 20px; }
.cp3-btn:disabled { opacity: .45; cursor: default; }
.cp3-state { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; justify-self: end; text-align: right; font: 700 .88rem/1.2 var(--font-primary); color: var(--text-muted); }
.cp3-state.ok { color: var(--success); }
.cp3-state small { font-weight: 500; font-size: .72rem; color: var(--text-soft); }
@media (max-width: 1024px) {
  .modal-backdrop.active > .modal.cp3 { width: 100vw !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; padding: var(--ritm-page-top, 44px) 16px 0 !important; }
  .cp3-back { margin-top: 0; }
  .cp3-bar { margin: 18px -16px 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--bg); }
}

/* Fișa clientului — ultimul pas: alege antrenorul */
.ob-coaches { width: min(100%, 560px); margin: 0 auto !important; }
.ob-coach-list { display: flex; flex-direction: column; gap: 8px; max-height: 52dvh; overflow-y: auto; margin-top: 4px; padding: 2px; }
.ob-coach { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.ob-coach.on { border-color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary); }
.ob-coach > img, .ob-coach-ini { flex: none; width: 58px; height: 58px; border-radius: 16px; object-fit: cover; }
.ob-coach-ini { display: grid; place-items: center; background: var(--primary); color: var(--primary-fg); font: 750 1.05rem/1 var(--font-primary); }
.ob-coach-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ob-coach-main strong { font-size: .98rem; color: var(--text); }
.ob-coach-main small { font-size: .78rem; color: var(--text-soft); }
.ob-coach-main em { font-style: normal; font-size: .78rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-rt { display: inline-flex; align-items: center; gap: 2px; color: var(--border-strong); }
.ob-rt b { margin-left: 5px; font: 750 .78rem/1 var(--font-primary); color: var(--text); }
.ob-rt small { margin-left: 3px; font-size: .72rem; color: var(--text-soft); }
.ob-rt.new { font: 600 .72rem/1 var(--font-primary); color: var(--text-soft); }
.ob-coach-check { flex: none; width: 24px; height: 24px; border: 1.5px solid var(--border-strong); border-radius: 50%; }
.ob-coach.on .ob-coach-check { border-color: var(--primary); background: var(--primary); box-shadow: inset 0 0 0 4px var(--surface); }
.ob-coach-empty { margin: 0; padding: 18px; border: 1px dashed var(--border-strong); border-radius: 16px; color: var(--text-soft); font-size: .9rem; line-height: 1.5; }
.ob-coach-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 16px; }
.ob-coach-actions button { height: 54px; border-radius: 16px; font: 750 .92rem/1 var(--font-primary); cursor: pointer; }
.ob-skip { border: 1px solid var(--border-strong); background: transparent; color: var(--text); }
#ob-send { border: 0; background: var(--cta); color: var(--cta-fg); }
#ob-send:disabled { opacity: .45; cursor: default; }
.ob-coach-err { margin: 10px 0 0; min-height: 1em; font-size: .82rem; color: var(--danger); text-align: center; }

/* Admin — diplome atașate */
.adm-certs { display: flex; flex-direction: column; gap: 8px; }
.adm-cert { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--border); border-radius: 14px; }
.adm-cert.missing { border-style: dashed; }
.adm-cert-thumb { flex: none; width: 56px; height: 56px; padding: 0; overflow: hidden; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--surface-alt); color: var(--text); font: 800 .72rem/1 var(--font-mono); cursor: pointer; }
.adm-cert-thumb img { width: 100%; height: 100%; object-fit: cover; }
.adm-cert-thumb.pdf { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.adm-cert-thumb.none { cursor: default; color: var(--text-soft); }
.adm-cert > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.adm-sheet .adm-cert strong { font-size: .9rem; color: var(--text) !important; }
.adm-sheet .adm-cert span { font-size: .76rem; color: var(--text-soft) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-cert span button { padding: 0; border: 0; background: none; color: var(--cta); font: 700 .76rem/1 var(--font-primary); cursor: pointer; text-decoration: underline; }

/* ============================================================
   Notificări — buton cu număr, ecranul de notificări, cereri
   ============================================================ */
.cal-head-actions { display: flex; gap: 8px; flex: none; }
.cal-add.ntf-bell { position: relative; width: 46px; padding: 0; justify-content: center; background: var(--surface); color: var(--primary); box-shadow: inset 0 0 0 1px var(--border-strong); }
.cal-add.ntf-bell svg { width: 21px; height: 21px; stroke-width: 1.8; stroke-linejoin: round; }
.ntf-count, .tabbar-badge {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px; background: #E5484D; color: #fff;
  font: 750 .68rem/1 var(--font-primary); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2.5px var(--bg);
}
.ntf-count[hidden], .tabbar-badge[hidden] { display: none; }
.tabbar-icon { position: relative; }
.tabbar-badge { top: -7px; right: -10px; min-width: 18px; height: 18px; font-size: .62rem; box-shadow: 0 0 0 2px var(--surface); }
.clx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.clx-head h1 { margin-bottom: 0 !important; }
.csx-hero.csx-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }

.ntf { width: min(100%, 640px); margin: 0 auto; padding-bottom: 120px; }
.ntf-back { display: inline-flex; align-items: center; gap: 4px; height: 40px; margin: 0 0 8px -8px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; color: var(--primary); font: 700 .9rem/1 var(--font-primary); cursor: pointer; }
.ntf-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ntf-head { margin-bottom: 22px; }
.ntf-head span { display: block; margin-bottom: 8px; font: 500 .68rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-soft); }
.ntf-head h1 { margin: 0; font: 800 clamp(1.9rem, 8vw, 2.6rem)/1.02 var(--font-primary); letter-spacing: -.035em; color: var(--text); }
.ntf-group { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font: 500 .66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-soft); }
.ntf-group span { padding: 4px 8px; border-radius: 999px; background: var(--cta); color: var(--cta-fg); font-weight: 700; letter-spacing: 0; }
.ntf-list { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }
.ntf-item { position: relative; display: flex; align-items: flex-start; gap: 13px; width: 100%; padding: 15px 16px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.ntf-item + .ntf-item, .ntf-req + .ntf-req { border-top: 1px solid var(--border); }
.ntf-item:active { background: var(--surface-alt); }
.ntf-item.new, .ntf-req.new { background: color-mix(in srgb, var(--cta) 7%, var(--surface)); }
.ntf-ico { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--surface-alt); color: var(--primary); }
.ntf-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ntf-ico.success { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.ntf-ico.error { background: color-mix(in srgb, #E5484D 13%, transparent); color: #D03B40; }
.ntf-ico.warning { background: color-mix(in srgb, #F2B632 20%, transparent); color: #A86F00; }
.ntf-ico.review { background: color-mix(in srgb, #F2B632 20%, transparent); color: #E0A21A; }
.ntf-ico.review svg { fill: currentColor; stroke: none; }
.ntf-ico.plan, .ntf-ico.request { background: var(--primary); color: var(--cta); }
.ntf-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ntf-text strong { font: 700 .95rem/1.3 var(--font-primary); color: var(--text); }
.ntf-text > span { font-size: .86rem; line-height: 1.4; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ntf-text time { margin-top: 3px; font: 500 .68rem/1 var(--font-mono); color: var(--text-soft); }
.ntf-dot { flex: none; align-self: center; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
[data-theme="dark"] .ntf-dot { background: var(--cta); }
.ntf-req { padding: 16px; }
.ntf-req-top { display: flex; align-items: center; gap: 12px; }
.ntf-req-top .avatar { width: 46px; height: 46px; flex: none; }
.ntf-req-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.ntf-req-actions button { height: 46px; border-radius: 14px; font: 750 .9rem/1 var(--font-primary); cursor: pointer; }
.ntf-ghost { border: 1px solid var(--border-strong); background: transparent; color: var(--text); }
.ntf-cta { border: 0; background: var(--cta); color: var(--cta-fg); }
.ntf-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 40px; padding: 36px 24px; border: 1px dashed var(--border-strong); border-radius: 24px; text-align: center; }
.ntf-empty > span { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 6px; border-radius: 22px; background: var(--primary); color: var(--cta); }
.ntf-empty > span svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ntf-empty strong { font: 750 1.1rem/1.2 var(--font-primary); color: var(--text); }
.ntf-empty p { max-width: 32ch; margin: 0; font-size: .88rem; line-height: 1.5; color: var(--text-soft); }

/* ============================================================
   Profil — hub comun (antrenor + client)
   ============================================================ */
.pf { width: min(100%, 640px); margin: 0 auto; padding-bottom: 120px; }
.pf-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 0 22px; }
.pf-avatar { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.pf-avatar:disabled { cursor: default; }
.pf-avatar .avatar { width: 96px !important; height: 96px !important; font-size: 1.9rem !important; box-shadow: 0 0 0 4px var(--bg), 0 0 0 5.5px var(--border); }
.pf-avatar-cam { position: absolute; right: -2px; bottom: -2px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #0E3B2E; color: #C8F04A; box-shadow: 0 0 0 3px var(--bg); }
[data-theme="dark"] .pf-avatar-cam { background: #C8F04A; color: #0E3B2E; }
.pf-avatar-cam svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.pf-head h1 { margin: 14px 0 0; font: 800 1.7rem/1.1 var(--font-primary); letter-spacing: -.03em; color: var(--text); }
.pf-head > p { margin: 5px 0 0; font-size: .86rem; color: var(--text-soft); }
.pf-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.pf-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--surface-alt); color: var(--text); font: 650 .76rem/1 var(--font-primary); cursor: default; }
button.pf-chip { cursor: pointer; }
.pf-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pf-chip.ok { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.pf-chip.cta { background: var(--cta); color: var(--cta-fg); }
.pf-chip .rt b { font-size: .74rem; }

.pf-group { margin-top: 22px; }
.pf-group-title { margin: 0 0 8px 4px; font: 500 .66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-soft); }
.pf-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pf-group-head .pf-group-title { margin-bottom: 0; }
.pf-group-head button { padding: 4px 6px; border: 0; background: none; color: var(--primary); font: 700 .82rem/1 var(--font-primary); cursor: pointer; }
.pf-group-note { margin: 8px 4px 0; font-size: .76rem; line-height: 1.4; color: var(--text-soft); }
.pf-card { overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.pf-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.pf-card > * + * { border-top: 1px solid var(--border); }
button.pf-row:active { background: var(--surface-alt); }
.pf-row-ico { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--surface-alt); color: var(--primary); }
.pf-row-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-row-text strong { font: 650 .93rem/1.25 var(--font-primary); color: var(--text); }
.pf-row-text small { font-size: .77rem; line-height: 1.3; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-row-val { font: 650 .82rem/1 var(--font-primary); color: var(--text-muted); }
.pf-row-chev { flex: none; color: var(--text-soft); display: grid; }
.pf-row-chev svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-switch-row { cursor: pointer; position: relative; }
.pf-switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.pf-switch { flex: none; position: relative; width: 48px; height: 29px; border-radius: 999px; background: var(--border-strong); transition: background .2s; }
.pf-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .22s cubic-bezier(.3,1.4,.5,1); }
.pf-switch-row input:checked + .pf-switch { background: var(--success); }
.pf-switch-row input:checked + .pf-switch::after { transform: translateX(19px); }
.pf-switch-row input:focus-visible + .pf-switch { outline: 2px solid var(--primary); outline-offset: 2px; }
.pf-theme-row { cursor: default; flex-wrap: wrap; }
.pf-seg { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--surface-alt); }
.pf-seg button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); font: 650 .8rem/1 var(--font-primary); cursor: pointer; }
.pf-seg button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pf-seg button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.pf-logout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; margin-top: 26px; border: 1px solid color-mix(in srgb, #E5484D 35%, var(--border)); border-radius: 16px; background: transparent; color: #D03B40; font: 700 .9rem/1 var(--font-primary); cursor: pointer; }
.pf-logout svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf .ri-card { margin-top: 22px; }
.pf-lead { margin: -6px 0 18px; font-size: .9rem; line-height: 1.5; color: var(--text-muted); }

/* Sub-page header (also used by one-section settings pages) */
.pf-sub-head { margin-bottom: 18px; }
.pf-back { display: inline-flex; align-items: center; gap: 4px; height: 40px; margin: 0 0 6px -8px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; color: var(--primary); font: 700 .9rem/1 var(--font-primary); cursor: pointer; }
.pf-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-kicker { display: block; font: 500 .66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-soft); }
.pf-sub-head h1 { margin: 8px 0 0; font: 800 clamp(1.7rem, 7vw, 2.3rem)/1.05 var(--font-primary); letter-spacing: -.03em; color: var(--text); }
.pf-sub-wrap { display: none; }
#view-settings.settings-single .pf-sub-wrap { display: block; }
#view-settings.settings-single > .page-head, #view-settings.settings-single #settings-nav { display: none !important; }
.pf-form { padding: 16px; }
.pf-form .coach-profile-stats-form { margin: 0; }

/* Energia ta */
.pf-energy-card, .pf-macro-card { margin-top: 4px; padding: 18px; border-radius: 24px; background: #0E3B2E; color: #fff; }
[data-theme="dark"] .pf-energy-card { background: #164A3A; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent); }
.pf-macro-card { margin-top: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.pf-energy-card header, .pf-macro-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.pf-energy-card .pf-kicker { color: color-mix(in srgb, #fff 60%, transparent); }
.pf-diff { padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, #fff 12%, transparent); font: 650 .7rem/1 var(--font-primary); font-style: normal; color: #fff; }
.pf-diff.minus, .pf-diff.plus { background: var(--cta); color: var(--cta-fg); }
.pf-energy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pf-energy > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 10px; border-radius: 16px; background: color-mix(in srgb, #fff 8%, transparent); }
.pf-energy > div.hl { background: var(--cta); color: var(--cta-fg); }
.pf-energy span { font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.pf-energy strong { font: 800 1.45rem/1 var(--font-primary); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pf-energy small { font-size: .68rem; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf > .pf-sub-head + .pf-energy > div { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.pf > .pf-sub-head + .pf-energy > div.hl { background: var(--cta); border-color: var(--cta); color: var(--cta-fg); }
.pf-scale { position: relative; height: 10px; margin: 34px 2px 8px; border-radius: 999px; background: color-mix(in srgb, #fff 12%, transparent); }
.pf-scale-fill { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--cta); transition: width .9s cubic-bezier(.16,1,.3,1); }
.pf-scale b { position: absolute; top: -6px; width: 2px; height: 22px; margin-left: -1px; border-radius: 2px; background: #fff; }
.pf-scale b span { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 500 .6rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: color-mix(in srgb, #fff 70%, transparent); }
.pf-pre .pf-scale-fill { width: 0; }
.pf-energy-card.empty, .pf-macro-card.empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pf-energy-card.empty strong, .pf-macro-card.empty strong { font: 750 1.1rem/1.25 var(--font-primary); }
.pf-energy-card.empty p, .pf-macro-card.empty p { margin: 0; font-size: .86rem; line-height: 1.45; opacity: .8; }
.pf-cta { margin-top: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 13px; background: var(--cta); color: var(--cta-fg); font: 750 .86rem/1 var(--font-primary); cursor: pointer; }

/* Macro pe plan */
.pf-macro-card header button { display: inline-flex; align-items: center; gap: 2px; max-width: 60%; padding: 0; border: 0; background: none; color: var(--primary); font: 700 .8rem/1.2 var(--font-primary); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="dark"] .pf-macro-card header button { color: var(--cta); }
.pf-macro-card header button svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.pf-macro { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; }
.pf-ring { position: relative; width: 132px; height: 132px; }
.pf-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pf-ring circle { fill: none; stroke-width: 11; }
.pf-ring .bg { stroke: var(--surface-alt); }
.pf-ring .seg { stroke-dasharray: var(--len) var(--c); transition: stroke-dasharray 1s cubic-bezier(.16,1,.3,1), opacity .2s, stroke-width .2s; }
.pf-pre .pf-ring .seg { stroke-dasharray: 0 var(--c); }
.pf-ring .seg.p, .pf-macro-row.p i, .pf-macro-row.p .pf-macro-bar span { stroke: #2F8F6B; background: #2F8F6B; }
.pf-ring .seg.c, .pf-macro-row.c i, .pf-macro-row.c .pf-macro-bar span { stroke: #E0A21A; background: #E0A21A; }
.pf-ring .seg.f, .pf-macro-row.f i, .pf-macro-row.f .pf-macro-bar span { stroke: #4F7BD9; background: #4F7BD9; }
.pf-ring.focus .seg { opacity: .2; }
.pf-ring.focus .seg.on { opacity: 1; stroke-width: 13; }
.pf-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pf-ring-center strong { font: 800 1.45rem/1 var(--font-primary); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.pf-ring-center span { margin-top: 4px; font-size: .68rem; color: var(--text-soft); }
.pf-macro-list { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-macro-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 4px 10px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 14px; background: var(--surface-alt); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.pf-macro-row.on { border-color: var(--border-strong); background: var(--surface); }
.pf-macro-row i { width: 10px; height: 10px; border-radius: 3px; }
.pf-macro-row > span:not(.pf-macro-bar) { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pf-macro-row strong { font: 650 .84rem/1.2 var(--font-primary); color: var(--text); }
.pf-macro-row small { font-size: .68rem; color: var(--text-soft); }
.pf-macro-row b { font: 800 1.05rem/1 var(--font-primary); color: var(--text); font-variant-numeric: tabular-nums; }
.pf-macro-row b em { margin-left: 1px; font-style: normal; font-size: .72rem; font-weight: 600; color: var(--text-soft); }
.pf-macro-bar { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: var(--border); overflow: hidden; }
.pf-macro-bar span { display: block; height: 100%; width: var(--w); border-radius: inherit; transition: width .9s cubic-bezier(.16,1,.3,1); }
.pf-pre .pf-macro-bar span { width: 0; }
.pf-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pf-facts > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.pf-facts span { font: 500 .6rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }
.pf-facts strong { font: 700 .88rem/1.2 var(--font-primary); color: var(--text); overflow: hidden; text-overflow: ellipsis; }
/* Entrance only when the page opens (pf-enter), never on a live re-render. */
.pf-enter .pf-energy-card, .pf-enter .pf-macro-card, .pf-enter .pf-group, .pf-enter .ri-card, .pf-enter > * { animation: pf-in .5s cubic-bezier(.16,1,.3,1) both; }
.pf > :nth-child(2) { animation-delay: .04s; } .pf > :nth-child(3) { animation-delay: .08s; } .pf > :nth-child(4) { animation-delay: .12s; } .pf > :nth-child(5) { animation-delay: .16s; } .pf > :nth-child(6) { animation-delay: .2s; }
@keyframes pf-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pf * { animation: none !important; transition: none !important; } }
:root[data-motion="reduced"] .pf * { animation: none !important; transition: none !important; }
@media (max-width: 380px) { .pf-macro { grid-template-columns: 1fr; justify-items: center; } .pf-macro-list { width: 100%; } .pf-energy strong { font-size: 1.2rem; } }

[data-theme="dark"] .ntf-ico.plan, [data-theme="dark"] .ntf-ico.request, [data-theme="dark"] .ntf-empty > span { background: #C8F04A; color: #0E3B2E; }
.ntf-ico.plan, .ntf-ico.request, .ntf-empty > span { background: #0E3B2E; color: #C8F04A; }
#view-settings.settings-single .card-head h3 { display: none; }
#view-settings.settings-single .card-head:not(:has(> :not(h3))) { display: none; }
.pf-form .coach-profile-save-row { margin-top: 14px; border-top: 0; padding-top: 0; }

/* ============================================================
   Masă nouă — nmx
   ============================================================ */
.nmx { width: min(100%, 680px); margin: 0 auto; padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
.nmx-head { margin-bottom: 16px; }
.nmx-head h1 { margin: 8px 0 0; font: 800 clamp(1.8rem, 7.5vw, 2.4rem)/1.05 var(--font-primary); letter-spacing: -.03em; color: var(--text); }
.nmx-id { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; padding: 14px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }
.nmx-photo { position: relative; width: 96px; height: 96px; display: grid; place-items: center; overflow: hidden; border: 1.5px dashed var(--border-strong); border-radius: 20px; background: var(--surface-alt); color: var(--text-soft); cursor: pointer; transition: border-color .2s; }
.nmx-photo:hover { border-color: var(--primary); }
.nmx-photo.has, .nmx-photo:has(img) { border-style: solid; border-color: transparent; }
.nmx-photo > span { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; height: 100%; justify-content: center; }
.nmx-photo svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.nmx-photo small { font: 600 .7rem/1 var(--font-primary); }
.nmx-photo img { width: 100%; height: 100%; object-fit: cover; }
.nmx-name { min-width: 0; }
.nmx-name label { display: block; margin-bottom: 6px; font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }
.nmx-name input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-alt); color: var(--text); font: 700 1.05rem/1 var(--font-primary); }
.nmx-name input:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.nmx-name input.shake { animation: nmx-shake .4s; border-color: #E5484D; }
@keyframes nmx-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.nmx-quick { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.nmx-quick::-webkit-scrollbar { display: none; }
.nmx-quick button { flex: none; height: 30px; padding: 0 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font: 600 .74rem/1 var(--font-primary); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.nmx-quick button.on { border-color: #0E3B2E; background: #0E3B2E; color: #fff; }
[data-theme="dark"] .nmx-quick button.on { border-color: #C8F04A; background: #C8F04A; color: #0E3B2E; }

/* Live summary, kept in view while scrolling */
.nmx-sum { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 5; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin-top: 12px; padding: 14px 16px; border-radius: 22px; background: #0E3B2E; color: #fff; box-shadow: 0 10px 30px -14px rgba(8,36,28,.6); }
[data-theme="dark"] .nmx-sum { background: #164A3A; }
.nmx-kcal { display: flex; flex-direction: column; align-items: flex-start; min-width: 84px; }
.nmx-kcal strong { font: 800 2rem/1 var(--font-primary); letter-spacing: -.03em; color: #C8F04A; font-variant-numeric: tabular-nums; }
.nmx-kcal span { margin-top: 3px; font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; opacity: .7; }
.nmx-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nmx-m { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nmx-m span { font-size: .68rem; opacity: .75; }
.nmx-m b { font: 750 .82rem/1 var(--font-primary); font-variant-numeric: tabular-nums; }
.nmx-m i { margin-top: 2px; height: 5px; border-radius: 999px; background: color-mix(in srgb, #fff 14%, transparent); overflow: hidden; }
.nmx-m em { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .6s cubic-bezier(.16,1,.3,1); }
.nmx-m.p em { background: #5BC79A; } .nmx-m.c em { background: #F2B632; } .nmx-m.f em { background: #7FA3F0; }
.nmx-sum.empty .nmx-kcal strong { color: color-mix(in srgb, #fff 45%, transparent); }

.nmx-block { margin-top: 22px; }
.nmx-block-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 4px 10px; }
.nmx-block-head h2 { margin: 0; font: 750 1.1rem/1 var(--font-primary); color: var(--text); }
.nmx-block-head span { font: 500 .68rem/1 var(--font-mono); color: var(--text-soft); }
.nmx-search { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.nmx-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }
.nmx-search svg { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--text-soft); stroke-width: 2; stroke-linecap: round; }
.nmx-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font: 500 .95rem/1 var(--font-primary); outline: none; }
.nmx-results { display: none; margin-top: 6px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-md); }
.nmx-results.open { display: block; animation: nmx-drop .2s ease-out; }
@keyframes nmx-drop { from { opacity: 0; transform: translateY(-4px); } }
.nmx-results button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nmx-results button + button { border-top: 1px solid var(--border); }
.nmx-results button:active { background: var(--surface-alt); }
.nmx-results button > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nmx-results strong { font: 650 .9rem/1.25 var(--font-primary); color: var(--text); }
.nmx-results small { font-size: .7rem; color: var(--text-soft); }
.nmx-results b { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--cta); color: var(--cta-fg); }
.nmx-results b svg, .nmx-step svg, .nmx-del svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nmx-noresult { margin: 0; padding: 14px; font-size: .84rem; color: var(--text-soft); }
.nmx-foods { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.nmx-food { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.nmx-food.enter { animation: nmx-in .35s cubic-bezier(.16,1,.3,1); }
.nmx-food.leave { animation: nmx-out .18s ease-in forwards; }
@keyframes nmx-in { from { opacity: 0; transform: translateY(-6px) scale(.98); background: color-mix(in srgb, var(--cta) 25%, var(--surface)); } }
@keyframes nmx-out { to { opacity: 0; transform: translateX(24px); } }
.nmx-food-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nmx-food-main strong { font: 650 .9rem/1.25 var(--font-primary); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nmx-food-main small { font-size: .7rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.nmx-step { display: flex; align-items: center; height: 38px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-alt); }
.nmx-step button { width: 32px; height: 100%; display: grid; place-items: center; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.nmx-step label { display: flex; align-items: baseline; gap: 1px; }
.nmx-step input { width: 40px; padding: 0; border: 0; background: transparent; color: var(--text); font: 750 .9rem/1 var(--font-primary); text-align: right; -moz-appearance: textfield; }
.nmx-step input::-webkit-outer-spin-button, .nmx-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nmx-step input:focus { outline: none; }
.nmx-step span { font-size: .72rem; color: var(--text-soft); }
.nmx-del { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--text-soft); cursor: pointer; }
.nmx-del:hover, .nmx-del:active { background: color-mix(in srgb, #E5484D 12%, transparent); color: #D03B40; }
.nmx-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 20px; border: 1.5px dashed var(--border-strong); border-radius: 20px; text-align: center; }
.nmx-empty svg { width: 34px; height: 34px; margin-bottom: 4px; fill: none; stroke: var(--text-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nmx-empty strong { font: 700 .98rem/1.2 var(--font-primary); color: var(--text); }
.nmx-empty p { max-width: 30ch; margin: 0; font-size: .82rem; line-height: 1.45; color: var(--text-soft); }
.nmx-note-toggle { display: flex; align-items: center; gap: 10px; width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); font: 650 .9rem/1 var(--font-primary); cursor: pointer; }
.nmx-note-toggle svg { width: 18px; height: 18px; fill: none; stroke: var(--primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nmx-note-toggle small { margin-left: auto; font: 500 .7rem/1 var(--font-primary); color: var(--text-soft); }
.nmx-note-toggle[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.nmx-block textarea#nm-notes { display: block; width: 100%; margin-top: -1px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 0 0 16px 16px; background: var(--surface); color: var(--text); font: 500 .9rem/1.45 var(--font-primary); resize: vertical; }
.nmx-block textarea#nm-notes[hidden] { display: none; }
.nmx-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1.7fr; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nmx-bar button { height: 52px; border-radius: 16px; font: 750 .92rem/1 var(--font-primary); cursor: pointer; }
.nmx-cancel { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.nmx-save { border: 0; background: var(--cta); color: var(--cta-fg); font-variant-numeric: tabular-nums; }
body:has(#view-meal-builder.active .nmx) #tabbar { display: none !important; }
@media (min-width: 1025px) { .nmx-bar { left: auto; right: 0; width: min(680px, 100%); margin: 0 auto; position: sticky; bottom: 0; border-radius: 18px 18px 0 0; } }
@media (max-width: 380px) { .nmx-food { grid-template-columns: 1fr auto; } .nmx-food .nmx-del { grid-row: 1; grid-column: 2; } .nmx-step { grid-column: 1 / -1; justify-self: start; } .nmx-sum { grid-template-columns: 1fr; } }

.nmx .nmx-search input, .nmx .nmx-step input { height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.nmx .nmx-search input { height: 100% !important; font-size: .95rem !important; }
.nmx .nmx-step input { width: 40px !important; font: 750 .9rem/1 var(--font-primary) !important; text-align: right; }
.nmx-results.open + .nmx-foods .nmx-empty { display: none; }
.nmx-m span { white-space: nowrap; }
.nmx-m b { font-size: .95rem; }

.nmx { padding-bottom: 24px; }
.nmx .nmx-bar { position: sticky; left: auto; right: auto; bottom: 0; margin: 22px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; border-radius: 0; }
@media (min-width: 1025px) { .nmx .nmx-bar { margin: 22px 0 0; border: 1px solid var(--border); border-radius: 18px; } }

/* ============================================================
   Masa în planul alimentar — card compact (mpc)
   ============================================================ */
#meals-wrap { display: flex; flex-direction: column; gap: 12px; }
.mpc { overflow: hidden; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); animation: pf-in .45s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--meal-delay, 0ms); transition: transform .2s, opacity .2s, box-shadow .2s; }
.mpc:hover { box-shadow: var(--shadow-md); }
.mpc.leave { opacity: 0; transform: translateX(30px) scale(.98); }
.mpc-open { display: block; width: 100%; padding: 14px 14px 10px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mpc-head { display: flex; align-items: center; gap: 12px; }
.mpc-thumb { flex: none; width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border-radius: 15px; background: var(--surface-alt); color: var(--text-soft); }
.mpc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mpc-thumb svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mpc-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mpc-title small { font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }
.mpc-title strong { font: 750 1.08rem/1.2 var(--font-primary); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpc-kcal { flex: none; display: flex; flex-direction: column; align-items: flex-end; padding: 8px 11px; border-radius: 14px; background: #0E3B2E; color: #fff; }
[data-theme="dark"] .mpc-kcal { background: #164A3A; }
.mpc-kcal b { font: 800 1.1rem/1 var(--font-primary); color: #C8F04A; font-variant-numeric: tabular-nums; }
.mpc-kcal small { margin-top: 2px; font: 500 .56rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.mpc-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 12px; }
.mpc-m { display: grid; grid-template-columns: 1fr auto; gap: 4px; min-width: 0; }
.mpc-m span { font-size: .7rem; color: var(--text-soft); }
.mpc-m b { font: 750 .8rem/1 var(--font-primary); color: var(--text); font-variant-numeric: tabular-nums; }
.mpc-m i { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.mpc-m em { display: block; height: 100%; border-radius: inherit; }
.mpc-m.p em { background: #2F8F6B; } .mpc-m.c em { background: #E0A21A; } .mpc-m.f em { background: #4F7BD9; }
.mpc-foods { margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.mpc-foods li { display: grid; grid-template-columns: 1fr auto 52px; align-items: baseline; gap: 10px; padding: 8px 2px; border-bottom: 1px dashed var(--border); }
.mpc-foods li:last-child { border-bottom: 0; }
.mpc-foods span { font-size: .86rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpc-foods small { font: 500 .74rem/1 var(--font-mono); color: var(--text-soft); }
.mpc-foods b { font: 650 .8rem/1 var(--font-primary); color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.mpc-foods b::after { content: " kcal"; font-weight: 500; font-size: .66rem; color: var(--text-soft); }
.mpc-empty { margin: 12px 0 0; padding: 12px; border: 1.5px dashed var(--border-strong); border-radius: 14px; font-size: .84rem; color: var(--text-soft); text-align: center; }
.mpc-note { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-alt); font-size: .8rem; line-height: 1.45; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mpc-actions { display: grid; grid-template-columns: 1fr 44px 44px; gap: 8px; padding: 0 14px 14px; }
.mpc-actions button { height: 44px; border-radius: 13px; cursor: pointer; }
.mpc-edit { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: 700 .86rem/1 var(--font-primary); }
.mpc-icon { display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); }
.mpc-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mpc-icon.danger:hover, .mpc-icon.danger:active { border-color: color-mix(in srgb, #E5484D 40%, var(--border)); background: color-mix(in srgb, #E5484D 10%, transparent); color: #D03B40; }

/* ============================================================
   Specialiști — tipuri (antrenor, nutriționist, kineto, maseur)
   Fiecare tip are o culoare proprie: --sp (text/icon) și --sp-soft.
   ============================================================ */
:root, html[data-theme="light"] {
  --sp-trainer: #1F7A4F;      --sp-trainer-soft: #E2F3E9;
  --sp-nutritionist: #A35F00; --sp-nutritionist-soft: #FBEFD9;
  --sp-physio: #22628F;       --sp-physio-soft: #E1EEF8;
  --sp-masseur: #7C4AA0;      --sp-masseur-soft: #F1E7F8;
}
html[data-theme="dark"] {
  --sp-trainer: #7FD9A8;      --sp-trainer-soft: rgba(127, 217, 168, .13);
  --sp-nutritionist: #F3C969; --sp-nutritionist-soft: rgba(243, 201, 105, .13);
  --sp-physio: #9FD3FF;       --sp-physio-soft: rgba(159, 211, 255, .13);
  --sp-masseur: #D9B3F0;      --sp-masseur-soft: rgba(217, 179, 240, .13);
}
.t-trainer { --sp: var(--sp-trainer); --sp-soft: var(--sp-trainer-soft); }
.t-nutritionist { --sp: var(--sp-nutritionist); --sp-soft: var(--sp-nutritionist-soft); }
.t-physio { --sp: var(--sp-physio); --sp-soft: var(--sp-physio-soft); }
.t-masseur { --sp: var(--sp-masseur); --sp-soft: var(--sp-masseur-soft); }
body.sp-trainer { --sp: var(--sp-trainer); --sp-soft: var(--sp-trainer-soft); }
body.sp-nutritionist { --sp: var(--sp-nutritionist); --sp-soft: var(--sp-nutritionist-soft); }
body.sp-physio { --sp: var(--sp-physio); --sp-soft: var(--sp-physio-soft); }
body.sp-masseur { --sp: var(--sp-masseur); --sp-soft: var(--sp-masseur-soft); }

.spx-chip, .coach-hero-type, .sp-type-chip, .ob-preview-type {
  display: inline-flex; align-items: center; gap: 6px;
}
.spx-chip svg, .coach-hero-type svg, .sp-type-chip svg, .ob-preview-type svg, .spx-slot-ico svg, .spx-type svg, .csx-who svg, .ob-type-ico svg {
  width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.spx-chip {
  height: 26px; padding: 0 10px; border-radius: 999px; background: var(--sp-soft, var(--surface-alt)); color: var(--sp, var(--text));
  font: 600 .66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; align-self: flex-start;
}
.spx-chip.sm { height: 22px; padding: 0 8px; font-size: .6rem; }
.spx-chip.sm svg { width: 13px; height: 13px; }

/* ---------- Panou client: „Echipa ta” ---------- */

/* ---------- Pagina Specialiști ---------- */
.spx { display: flex; flex-direction: column; gap: 26px; padding-bottom: 24px; }
.spx-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.spx-head .coach-browse-back { margin-bottom: 8px; }
.spx-eyebrow { font: 500 .68rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--text-soft); }
.spx-head h1 { margin: 0; font: 800 clamp(1.9rem, 6vw, 2.5rem)/1.05 var(--font-primary); letter-spacing: -.035em; color: var(--text); }
.spx-head p { max-width: 56ch; margin: 2px 0 0; font-size: .92rem; line-height: 1.5; color: var(--text-muted); }
.spx-sec { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 80px; }
.spx-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.spx-sec-head h2 { margin: 0; font: 750 1.12rem/1.2 var(--font-primary); letter-spacing: -.02em; color: var(--text); }
.spx-sec-head span { font: 500 .66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }

.spx-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .spx-slots { grid-template-columns: 1fr; } }
.spx-slot {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm);
  color: var(--text); text-align: left; font: inherit; overflow: hidden;
}
.spx-slot.filled::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--sp); }
.spx-slot.empty, .spx-slot.waiting { flex-direction: row; align-items: center; gap: 14px; box-shadow: none; }
.spx-slot.empty { border-style: dashed; border-color: var(--border-strong); background: transparent; cursor: pointer; transition: border-color .15s, background .15s; }
.spx-slot.empty:hover { border-color: var(--sp); background: var(--sp-soft); }
.spx-slot.waiting { background: var(--sp-soft); border-color: transparent; }
.spx-slot-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--sp-soft); color: var(--sp); }
.spx-slot.waiting .spx-slot-ico { background: var(--surface); }
.spx-slot-ico svg { width: 22px; height: 22px; }
.spx-slot-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.spx-slot-text small { font: 500 .6rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--sp); }
.spx-slot-text strong { font-size: .95rem; line-height: 1.25; }
.spx-slot-text em { font-style: normal; font-size: .8rem; line-height: 1.35; color: var(--text-soft); }
.spx-add { flex: none; height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--sp); color: var(--surface); font: 700 .78rem/1 var(--font-primary); }
[data-theme="dark"] .spx-add { color: var(--adanc); }
.spx-slot-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.spx-since { font: 500 .64rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); }
.spx-person { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.spx-person:disabled { cursor: default; }
.spx-person .cb-photo { width: 54px; height: 54px; border-radius: 17px; }
.spx-person-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.spx-person-text strong { font: 750 1.05rem/1.2 var(--font-primary); letter-spacing: -.01em; }
.spx-person-text small { font-size: .8rem; line-height: 1.35; color: var(--text-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.spx-chev { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--text-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spx-slot-actions { display: flex; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--border); }
.spx-link { padding: 6px 2px; border: 0; background: none; color: var(--primary); font: 700 .82rem/1.2 var(--font-primary); cursor: pointer; }
.spx-link.muted { color: var(--text-soft); font-weight: 600; }
.spx-link.muted:hover { color: var(--danger); }

.spx-history { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.spx-past { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.spx-past + .spx-past { border-top: 1px solid var(--border); }
.spx-past:hover { background: var(--surface-alt); }
.spx-past .cb-photo { width: 44px; height: 44px; border-radius: 14px; filter: grayscale(.35); }
.spx-past .cb-photo-initials { font-size: .85rem; background: var(--surface-alt); color: var(--text-muted); }
.spx-past-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.spx-past-text strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spx-past-text small { font-size: .76rem; color: var(--text-soft); }
.spx-past-text em { font-style: normal; font: 500 .62rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--primary); }

.spx-types { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
.spx-types::-webkit-scrollbar { display: none; }
.spx-type {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted);
  font: 650 .82rem/1 var(--font-primary); cursor: pointer; white-space: nowrap;
}
.spx-type svg { color: var(--sp); }
.spx-type small { font: 500 .66rem/1 var(--font-mono); color: var(--text-soft); }
.spx-type:hover { border-color: var(--border-strong); color: var(--text); }
.spx-type.on { background: var(--sp, var(--primary)); border-color: var(--sp, var(--primary)); color: var(--surface); }
.spx-type.on svg, .spx-type.on small { color: inherit; opacity: .9; }
[data-theme="dark"] .spx-type.on { color: var(--adanc); }
.cb-card { position: relative; overflow: hidden; }
.cb-card[class*="t-"]::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--sp); opacity: .8; }
.pro-list-status.muted { background: var(--surface-alt); color: var(--text-soft); }

.spx-leave-sheet .spx-steps { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; padding: 0; list-style: none; }
.spx-steps li { display: flex; align-items: flex-start; gap: 12px; }
.spx-steps b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-alt); font: 600 .78rem/1 var(--font-mono); color: var(--text); }
.spx-steps span { display: flex; flex-direction: column; gap: 2px; font-size: .84rem; line-height: 1.4; color: var(--text-muted); }
.spx-steps strong { font-size: .92rem; color: var(--text); }
.ses-save.danger { background: var(--danger); color: #fff; }
[data-theme="dark"] .ses-save.danger { color: var(--adanc); }

.modal.spx-archive { display: flex; flex-direction: column; gap: 12px; }
.spx-archive-head { display: flex; align-items: center; gap: 14px; }
.spx-archive-head > div { flex: 1; min-width: 0; }
.spx-archive-head h2 { margin: 4px 0 2px; font: 800 1.35rem/1.15 var(--font-primary); letter-spacing: -.02em; }
.spx-archive-head p { margin: 0; font-size: .82rem; color: var(--text-soft); }
.modal .spx-archive-sub, .spx-archive-sub { margin: 10px 0 0; letter-spacing: .08em !important; font-size: .66rem !important; font: 500 .66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }
.spx-arch-plan summary { list-style: none; cursor: pointer; }
.spx-arch-plan summary::-webkit-details-marker { display: none; }
.spx-arch-meals { display: flex; flex-direction: column; gap: 8px; }
.spx-arch-meal { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.spx-arch-meal summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; list-style: none; cursor: pointer; }
.spx-arch-meal summary::-webkit-details-marker { display: none; }
.spx-arch-meal summary span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.spx-arch-meal summary small { font-size: .76rem; color: var(--text-soft); }
.spx-arch-meal summary b { font: 750 1.05rem/1 var(--font-primary); }
.spx-arch-meal summary b small { font-weight: 500; }
.spx-arch-macros { display: flex; gap: 6px; padding: 0 14px 8px; }
.spx-arch-macros span { padding: 5px 9px; border-radius: 999px; background: var(--surface-alt); font: 500 .68rem/1 var(--font-mono); color: var(--text-muted); }
.spx-arch-meal ul { margin: 0; padding: 0 14px 14px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.spx-arch-meal li { display: flex; flex-direction: column; gap: 2px; font-size: .82rem; color: var(--text-muted); }
.spx-arch-meal li strong { font-size: .86rem; color: var(--text); }
.spx-muted { margin: 0; font-size: .88rem; color: var(--text-soft); }

.csx-who { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--sp-soft); color: var(--sp); font: 600 .68rem/1 var(--font-primary); font-style: normal; }
.csx-who svg { width: 11px; height: 11px; }

/* ---------- Panou specialist ---------- */
.coach-hero-type { height: 26px; margin-bottom: 10px; padding: 0 10px; border-radius: 999px; background: var(--sp-soft); color: var(--sp); font: 600 .66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.coach-dashboard-hero .coach-hero-type { background: rgba(250, 252, 250, .12); color: var(--lime); }
.coach-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.pf-chip.sp-type-chip { background: var(--sp-soft); color: var(--sp); }
.clx-leaves { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 12px; padding: 12px 14px; border: 0; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--warning) 13%, var(--surface)); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.clx-leaves > b { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--warning); color: var(--surface); font: 700 .9rem/1 var(--font-primary); }
[data-theme="dark"] .clx-leaves > b { color: var(--adanc); }
.clx-leaves span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.clx-leaves small { font-size: .78rem; color: var(--text-muted); }
.clx-leaves svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ntf-req.leave { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }
.cdx-facts > div.wide { grid-column: 1 / -1; }
/* Nutriționistul are meniurile primele. */
body.sp-nutritionist .plans-switch button:last-child { order: -1; }

/* ---------- Fișe client (maseur) ---------- */
.shx { display: flex; flex-direction: column; gap: 12px; }
.shx .clx-head .btn { height: 42px; }
.shx-lead { margin: -4px 0 4px; font-size: .88rem; color: var(--text-soft); }
.shx-alert { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--text); text-align: left; font: inherit; font-size: .86rem; line-height: 1.4; }
.shx-alert > b { flex: none; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 50%; background: var(--danger); color: #fff; font: 700 .85rem/1 var(--font-primary); }
[data-theme="dark"] .shx-alert > b { color: var(--adanc); }
.shx-alert.soft { background: color-mix(in srgb, var(--warning) 12%, var(--surface)); cursor: pointer; }
.shx-alert.soft > b { background: var(--warning); }
.shx-list { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.shx-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 66px; padding: 10px 14px; border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.shx-row + .shx-row { border-top: 1px solid var(--border); }
.shx-row:hover { background: var(--surface-alt); }
.shx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.shx-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shx-main small { font-size: .78rem; color: var(--text-soft); }
.shx-tag { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font: 650 .7rem/1 var(--font-primary); font-style: normal; white-space: nowrap; }
.shx-tag.ok { background: var(--sp-soft); color: var(--sp); }
.shx-tag.todo { background: color-mix(in srgb, var(--warning) 14%, var(--surface)); color: var(--warning); }
.shx-tag.warn { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.shx-sub { margin: 14px 0 0; font: 500 .68rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }
.shx-sessions { display: flex; flex-direction: column; gap: 8px; }
.shx-session { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.shx-session:hover { border-color: var(--border-strong); }
.shx-date { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 46px; height: 50px; border-radius: 13px; background: var(--sp-soft); color: var(--sp); }
.shx-date b { font: 800 1.15rem/1 var(--font-primary); }
.shx-date small { font: 500 .6rem/1.3 var(--font-mono); text-transform: uppercase; }
.shx-session-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.shx-session-main strong { font-size: .9rem; }
.shx-session-main small { font-size: .78rem; color: var(--text-soft); }
.shx-session-main em { font-style: normal; font-size: .8rem; line-height: 1.4; color: var(--text-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.shx-pain { flex: none; align-self: center; padding: 5px 8px; border-radius: 999px; background: var(--surface-alt); font: 500 .66rem/1 var(--font-mono); font-style: normal; color: var(--text-muted); white-space: nowrap; }
.shx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.shx-chip { height: 36px; padding: 0 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font: 600 .8rem/1 var(--font-primary); cursor: pointer; }
.shx-chip.on { background: var(--sp-soft, var(--primary-soft)); border-color: var(--sp, var(--primary)); color: var(--sp, var(--primary)); }
.shx-chip.warn { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: transparent; color: var(--danger); }
.shx-editor [data-contra].on { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: var(--danger); color: var(--danger); }
.shx-chips.static .shx-chip { display: inline-flex; align-items: center; height: 30px; cursor: default; }
.shx-pain-row { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.shx-pain-row button { height: 38px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-muted); font: 650 .82rem/1 var(--font-primary); cursor: pointer; }
.shx-pain-row button.on { background: var(--sp); border-color: var(--sp); color: var(--surface); }
[data-theme="dark"] .shx-pain-row button.on { color: var(--adanc); }
.shx-medical { margin: 0 0 6px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--warning) 10%, var(--surface)); }
.shx-medical span { font: 500 .6rem/1 var(--font-mono); text-transform: uppercase; color: var(--warning); }
.shx-medical p { margin: 6px 0 0; font-size: .86rem; white-space: pre-wrap; }
.shx-pick { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
.shx-pick .ses-client { width: 100%; }
.shx-pick .shx-tag { margin-left: auto; }

/* ---------- Creare cont: alegerea tipului ---------- */

.ob-types { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.ob-type {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 16px;
  border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer;
}
.ob-type strong { display: block; font: 750 1.02rem/1.2 var(--font-primary); }
.ob-type small { display: block; margin-top: 3px; font-size: .8rem; line-height: 1.4; color: var(--text-soft); }
.ob-type-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--sp-soft); color: var(--sp); }
.ob-type-ico svg { width: 22px; height: 22px; }
.ob-type-check { opacity: 0; color: var(--sp); }
.ob-type.selected { border-color: var(--sp); box-shadow: inset 0 0 0 1px var(--sp); }
.ob-type.selected .ob-type-ico { background: var(--sp); color: var(--surface); }
.ob-type.selected .ob-type-check { opacity: 1; }
.ob-type:disabled { opacity: .4; cursor: default; }
.ob-preview-type { margin-bottom: 4px; font: 600 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }
.ob-preview-type svg { width: 13px; height: 13px; }
.ses-seg.shx-seg3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shx-editor .shx-alert { margin-bottom: 4px; }

/* Fișe client: câmpuri de text */
.shx-editor input.cdx-input, .shx-editor select.cdx-input { font-weight: 500; font-size: .95rem; }
.shx-editor input.cdx-input::placeholder { font-weight: 400; color: var(--text-soft); }
.shx-note { display: flex; flex-direction: column; gap: 10px; }
.shx-phrases { display: flex; gap: 6px; overflow-x: auto; margin: 0 -2px; padding: 2px; scrollbar-width: none; }
.shx-phrases::-webkit-scrollbar { display: none; }
.shx-phrases button {
  flex: none; height: 32px; padding: 0 12px; border: 1px dashed var(--border-strong); border-radius: 999px;
  background: transparent; color: var(--text-muted); font: 600 .76rem/1 var(--font-primary); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.shx-phrases button:hover { border-color: var(--sp, var(--primary)); color: var(--sp, var(--primary)); }
.shx-phrases button.used { border-style: solid; background: var(--sp-soft, var(--primary-soft)); border-color: transparent; color: var(--sp, var(--primary)); }
.shx-note-box {
  position: relative; border: 1px solid var(--border); border-radius: 18px; background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.shx-note-box:focus-within { border-color: var(--sp, var(--primary)); box-shadow: 0 0 0 4px var(--sp-soft, var(--primary-soft)); }
.ses-modal .shx-note-box textarea {
  display: block; width: 100%; min-height: 112px; max-height: 320px; height: auto !important;
  padding: 16px 18px 30px !important; border: 0 !important; border-radius: 18px !important; background: transparent !important;
  box-shadow: none !important; outline: none; resize: none; overflow-y: auto;
  color: var(--text); font: 450 .97rem/1.55 var(--font-primary) !important;
}
.shx-note-box textarea::placeholder { color: var(--text-soft); font-weight: 400; }
.shx-count { position: absolute; right: 14px; bottom: 10px; font: 500 .64rem/1 var(--font-mono); color: var(--text-soft); pointer-events: none; }
.shx-count.near { color: var(--warning); }

/* Programare suprapusă */
.ses-clash {
  display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  animation: shx-shake .35s ease;
}
.ses-clash strong { font-size: .9rem; color: var(--danger); }
.ses-clash span { font-size: .82rem; color: var(--text-muted); }
@keyframes shx-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.ob-optional { display: inline-flex; align-items: center; gap: 6px; height: 26px; margin: 10px 0 -2px; padding: 0 11px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font: 600 .7rem/1 var(--font-primary); }
.ob-optional::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.onboarding-step .ob-optional + h1 { margin-top: 12px; }

/* ============================================================
   Kinetoterapie — programe de recuperare
   ============================================================ */
.rhx-eyebrow { font: 500 .66rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sp, var(--primary)); }
.rhx-start { margin: 0 0 26px; padding: 20px; border-radius: var(--radius-xl); background: var(--sp-soft, var(--surface-alt)); }
.rhx-start h2 { margin: 8px 0 6px; font: 750 1.2rem/1.2 var(--font-primary); letter-spacing: -.02em; color: var(--text); }
.rhx-start p { margin: 0; max-width: 60ch; font-size: .86rem; line-height: 1.5; color: var(--text-muted); }
.rhx-templates { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(172px, 1fr); gap: 10px; margin: 16px -20px -4px; padding: 0 20px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rhx-templates::-webkit-scrollbar { display: none; }
.rhx-tpl {
  scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 132px; padding: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text);
  text-align: left; font: inherit; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s;
}
.rhx-tpl:hover { transform: translateY(-2px); border-color: var(--sp); box-shadow: var(--shadow-md); }
.rhx-tpl-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: auto; border-radius: 12px; background: var(--sp-soft); color: var(--sp); }
.rhx-tpl-ico svg { width: 22px; height: 22px; }
.rhx-tpl strong { font-size: .92rem; line-height: 1.25; }
.rhx-tpl small { font-size: .74rem; color: var(--text-soft); }

.rhx-editor .wpe-label { margin-top: 18px; }
.rhx-editor .wpe-label:first-child { margin-top: 0; }
.rhx-phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rhx-phases button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; min-height: 92px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text);
  text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, background .15s;
}
.rhx-phases b { font: 500 .66rem/1 var(--font-mono); color: var(--text-soft); }
.rhx-phases strong { font-size: .9rem; }
.rhx-phases small { font-size: .72rem; line-height: 1.3; color: var(--text-soft); }
.rhx-phases button.on { border-color: var(--sp); background: var(--sp-soft); box-shadow: inset 0 0 0 1px var(--sp); }
.rhx-phases button.on b { color: var(--sp); }
.rhx-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
.rhx-pain strong { color: var(--sp); }
@media (max-width: 640px) {
  .rhx-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rhx-row { grid-template-columns: 1fr; gap: 0; }
}
/* Exercițiile de recuperare nu folosesc RIR sau tehnici de intensitate. */

.rhx-food { margin: 0 0 22px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); }
.rhx-food h2 { margin: 8px 0 6px; font: 750 1.2rem/1.2 var(--font-primary); }
.rhx-food-head p { margin: 0; max-width: 62ch; font-size: .86rem; line-height: 1.5; color: var(--text-muted); }
.rhx-tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.rhx-tips li { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--surface-alt); }
.rhx-tips b { font-size: .88rem; color: var(--text); }
.rhx-tips span { font-size: .8rem; line-height: 1.4; color: var(--text-muted); }
.rhx-note { margin: 12px 0 0; font-size: .74rem; color: var(--text-soft); }

/* Client: program de recuperare */
.rhx-banner { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; padding: 14px; border-radius: 16px; background: var(--sp-physio-soft); }
.rhx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rhx-chips span { height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: var(--surface); color: var(--sp-physio); font: 650 .76rem/1 var(--font-primary); }
.rhx-banner p { display: flex; align-items: center; gap: 12px; margin: 0; font-size: .84rem; line-height: 1.4; color: var(--text); }
.rhx-banner p b { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--surface); color: var(--sp-physio); font: 800 .9rem/1 var(--font-primary); }
.rhx-row { margin-top: 6px; }

/* Panoul specialistului: poză în fundalul cardului de sus (antrenor, maseur),
   ca la client. Gradientul ține textul și cifrele lizibile. */
body.sp-trainer #view-overview .coach-panel-slab,
body.sp-masseur #view-overview .coach-panel-slab {
  background: #06130e url("../img/ritm/hero-trainer.webp") 50% 42% / cover no-repeat !important;
  box-shadow: 0 18px 40px -22px rgba(4, 14, 10, .7) !important;
}
body.sp-masseur #view-overview .coach-panel-slab { background-image: url("../img/ritm/hero-masseur.webp") !important; background-position: 62% 64% !important; }
body.sp-trainer #view-overview .coach-panel-slab::before,
body.sp-masseur #view-overview .coach-panel-slab::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(4, 14, 10, .95) 0%, rgba(4, 14, 10, .7) 38%, rgba(4, 14, 10, .15) 70%, rgba(4, 14, 10, .35) 100%),
    linear-gradient(90deg, rgba(4, 14, 10, .65) 0%, rgba(4, 14, 10, 0) 70%);
}
body.sp-trainer #view-overview .coach-panel-slab .coach-dashboard-hero,
body.sp-masseur #view-overview .coach-panel-slab .coach-dashboard-hero { padding-top: 120px !important; }
body.sp-trainer #view-overview .coach-panel-slab .coach-dashboard-hero h1,
body.sp-masseur #view-overview .coach-panel-slab .coach-dashboard-hero h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .45) !important; }
body.sp-trainer #view-overview .coach-panel-slab .coach-dashboard-hero p,
body.sp-masseur #view-overview .coach-panel-slab .coach-dashboard-hero p { color: rgba(255, 255, 255, .86) !important; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
body.sp-trainer #view-overview .coach-panel-slab .coach-compact-stats .stat-card:nth-child(n),
body.sp-masseur #view-overview .coach-panel-slab .coach-compact-stats .stat-card:nth-child(n) {
  background: rgba(8, 36, 28, .55) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(250, 252, 250, .08) !important;
}
body.sp-trainer #view-overview .coach-panel-slab .ritm-hero-bars,
body.sp-masseur #view-overview .coach-panel-slab .ritm-hero-bars { display: none; }
@media (min-width: 768px) {
  body.sp-trainer #view-overview .coach-panel-slab .coach-dashboard-hero,
  body.sp-masseur #view-overview .coach-panel-slab .coach-dashboard-hero { padding-top: 150px !important; }
  body.sp-trainer #view-overview .coach-panel-slab { background-position: 50% 38% !important; }
}
body.sp-trainer #view-overview .coach-panel-slab { background-position: 46% 74% !important; }
body.sp-trainer #view-overview .coach-panel-slab::before {
  background:
    linear-gradient(0deg, rgba(4, 14, 10, .94) 0%, rgba(4, 14, 10, .62) 34%, rgba(4, 14, 10, 0) 64%),
    linear-gradient(90deg, rgba(4, 14, 10, .55) 0%, rgba(4, 14, 10, 0) 60%);
}
@media (min-width: 768px) { body.sp-trainer #view-overview .coach-panel-slab { background-position: 50% 70% !important; } }

/* ============================================================
   Ecranul de încărcare (boot-screen.js): identic cu ecranul nativ de
   pornire, pe tot ecranul (și sub bara de acasă), simbolul în centru.
   ============================================================ */
html.ritm-booting, html.ritm-booting body { background-color: #08241C !important; transition: none !important; }
/* The page colour reaches every edge (under the status bar and home indicator). */
html:has(body .app-shell) { background-color: var(--bg); transition: none; }
.ritm-boot {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  height: 100%; min-height: 100vh;
  background: #08241C; opacity: 1;
  transition: opacity .45s cubic-bezier(.4, 0, .2, 1);
}
@supports (min-height: 100lvh) { .ritm-boot { min-height: 100lvh; } }
.ritm-boot-mark {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .38s ease;
}
.ritm-boot.out { opacity: 0; pointer-events: none; }
.ritm-boot.out .ritm-boot-mark { transform: translate(-50%, -50%) scale(1.12); opacity: 0; }
/* The first frame matches the launch screen exactly. Then a short, even
   beat: the bars keep the logo's shape and only hop in a quick wave, the
   tile breathes and a thin ring spreads out from it — all transforms
   (drawn by the GPU), so it stays smooth while the app loads.
   --boot-t (boot-screen.js) carries the beat over from the previous page. */
.ritm-boot-mark::before { content: ""; position: absolute; inset: 0; border-radius: 22px; border: 1.5px solid rgba(200, 240, 74, .55); opacity: 0; animation: bootRing 1.4s cubic-bezier(.2, .7, .3, 1) calc(var(--boot-t, 0ms) + .25s) infinite; will-change: transform, opacity; }
.ritm-boot .ritm-pulse { animation: bootBreath 1.4s cubic-bezier(.45, 0, .55, 1) calc(var(--boot-t, 0ms) + .25s) infinite; will-change: transform; }
.ritm-boot .ritm-pulse i { transform: none; will-change: transform; animation: bootHop 1.4s cubic-bezier(.33, 0, .25, 1) infinite; }
.ritm-boot .ritm-pulse i:nth-child(1) { height: 23px; animation-delay: calc(var(--boot-t, 0ms) + .25s); }
.ritm-boot .ritm-pulse i:nth-child(2) { height: 25px; animation-delay: calc(var(--boot-t, 0ms) + .35s); }
.ritm-boot .ritm-pulse i:nth-child(3) { height: 11px; animation-delay: calc(var(--boot-t, 0ms) + .45s); }
@keyframes bootHop { 0%, 34%, 100% { transform: translateY(0); } 15% { transform: translateY(-7px); } }
@keyframes bootBreath { 0%, 100% { transform: scale(1); } 22% { transform: scale(1.045); } }
@keyframes bootRing { 0% { opacity: 0; transform: scale(1); } 12% { opacity: 1; } 70%, 100% { opacity: 0; transform: scale(1.55); } }
@media (prefers-reduced-motion: reduce) { .ritm-boot .ritm-pulse, .ritm-boot .ritm-pulse i, .ritm-boot-mark::before { animation: none !important; } }

/* Panou client: un singur buton spre Specialiști */
.sp-pick {
  display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 14px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); color: var(--text);
  text-align: left; font: inherit; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.sp-pick:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.sp-pick:active { transform: scale(.985); }
/* Cardul specialiștilor vine direct sub Nutriție / Antrenament (client nou)
   sau sub „Încă n-ai primit planuri” — fără margine proprie s-ar lipi de ele. */
:is(.ov-plans, .ov-empty) + .sp-pick { margin-top: 14px; }
.sp-pick-faces { flex: none; display: flex; }
.sp-pick-faces > span { margin-left: -10px; border-radius: 15px; box-shadow: 0 0 0 3px var(--surface); }
.sp-pick-faces > span:first-child { margin-left: 0; }
.sp-pick-faces .cb-photo { width: 44px; height: 44px; border-radius: 14px; }
.sp-pick-faces .cb-photo-initials { font-size: .85rem; background: var(--sp, var(--primary)); color: var(--surface); }
.sp-pick-plus { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--cta); color: var(--cta-fg); }
.sp-pick-plus svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-pick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sp-pick-text strong { font: 750 1rem/1.2 var(--font-primary); }
.sp-pick-text small { font-size: .8rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-pick-arrow { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--text-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.sp-pick:hover .sp-pick-arrow { transform: translateX(3px); stroke: var(--text); }
.spx-leave-sheet .spx-steps b { background: var(--primary-soft); color: var(--primary); }
.spx-reason { width: 100%; min-height: 96px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); font: 450 .95rem/1.5 var(--font-primary); resize: vertical; }
.spx-reason:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }

/* ============================================================
   Clase de grup
   ============================================================ */
.ses-kind { margin: 0 0 6px; }
.ses-kind button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ses-class-name { font-weight: 600 !important; }
.ses-members-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ses-members-head small { margin-left: 6px; color: var(--primary); font-weight: 600; }
.ses-all { padding: 4px 2px; border: 0; background: none; color: var(--primary); font: 700 .82rem/1 var(--font-primary); cursor: pointer; }
.ses-members { display: flex; flex-direction: column; max-height: 290px; overflow-y: auto; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.ses-member { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 16px 8px 10px; border: 0; background: transparent; color: var(--text); font: 650 .95rem/1.2 var(--font-primary); text-align: left; cursor: pointer; transition: background .15s; }
.ses-member + .ses-member { border-top: 1px solid var(--border); }
.ses-member span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ses-member i { flex: none; position: relative; width: 22px; height: 22px; border: 1.5px solid var(--border-strong); border-radius: 7px; transition: background .15s, border-color .15s; }
.ses-member.on { background: var(--primary-soft); }
.ses-member.on i { border-color: var(--primary); background: var(--primary); }
.ses-member.on i::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--primary-fg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ses-member:disabled { opacity: .5; }
.ses-members-resp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ses-members-resp span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--surface); font: 600 .76rem/1 var(--font-primary); color: var(--text-muted); }
.ses-members-resp span.accepted { color: var(--success); }
.ses-members-resp span.declined { color: var(--danger); }
.ses-members-resp i { font-style: normal; }

/* Calendar: o clasă e o singură intrare, cu numele ei */
.cal-session.group .cal-body strong { display: inline-flex; align-items: center; gap: 6px; }
.cal-group-ico { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--primary-soft); color: var(--primary); }
.cal-group-ico svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cal-grid-session.group strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-grid-session.group { box-shadow: inset 3px 0 0 var(--primary); }

/* Client: eticheta „Clasă” */
.csx-class { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font: 700 .68rem/1 var(--font-primary); font-style: normal; }
.csx-class svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ses-modal [hidden] { display: none !important; }

/* Cardul de sus al specialistului: eticheta și data sus, salutul jos. */
#view-overview .coach-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; align-self: stretch; width: 100%; }
#view-overview .coach-hero-top .coach-hero-type { margin: 0 !important; }
#view-overview .coach-panel-slab .coach-hero-top .coach-hero-date { margin: 0 !important; }
.coach-hero-copy h1 { margin-top: 0 !important; }

body.sp-trainer #view-overview .coach-panel-slab .coach-dashboard-hero,
body.sp-masseur #view-overview .coach-panel-slab .coach-dashboard-hero {
  display: flex !important; flex-direction: column; justify-content: space-between;
  min-height: 236px; padding: 18px 20px 18px !important;
}
body.sp-trainer #view-overview .coach-hero-top .coach-hero-type,
body.sp-masseur #view-overview .coach-hero-top .coach-hero-type,
body.sp-trainer #view-overview .coach-panel-slab .coach-hero-top .coach-hero-date,
body.sp-masseur #view-overview .coach-panel-slab .coach-hero-top .coach-hero-date {
  height: 28px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 999px;
  background: rgba(4, 14, 10, .5) !important; color: var(--lime) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(250, 252, 250, .1);
}
body.sp-trainer #view-overview .coach-panel-slab .coach-hero-top .coach-hero-date,
body.sp-masseur #view-overview .coach-panel-slab .coach-hero-top .coach-hero-date { color: rgba(255, 255, 255, .9) !important; font-size: 10.5px !important; }
body.sp-trainer #view-overview .coach-panel-slab::before,
body.sp-masseur #view-overview .coach-panel-slab::before {
  background:
    linear-gradient(0deg, rgba(4, 14, 10, .95) 0%, rgba(4, 14, 10, .62) 34%, rgba(4, 14, 10, 0) 60%),
    linear-gradient(180deg, rgba(4, 14, 10, .45) 0%, rgba(4, 14, 10, 0) 22%) !important;
}
@media (min-width: 768px) {
  body.sp-trainer #view-overview .coach-panel-slab .coach-dashboard-hero,
  body.sp-masseur #view-overview .coach-panel-slab .coach-dashboard-hero { min-height: 280px; padding: 22px 26px !important; }
}

/* Antrenoare: altă poză (sexul din profil). */
body.sp-trainer.coach-f #view-overview .coach-panel-slab {
  background-image: url("../img/ritm/hero-trainer-f.webp") !important;
  background-position: 50% 38% !important;
}
@media (min-width: 768px) { body.sp-trainer.coach-f #view-overview .coach-panel-slab { background-position: 50% 42% !important; } }

.ob-sex-label { margin-top: 22px; }

/* Agenda de azi: rândurile nu se lățesc după text; textul lung se taie. */
.ritm-agenda { min-width: 0; overflow: hidden; }
.ritm-agenda-list { grid-template-columns: minmax(0, 1fr); }
.ritm-slot { min-width: 0; max-width: 100%; }
.ritm-slot .grow strong, .ritm-slot .grow small { max-width: 100%; }
.ritm-slot .ritm-chip { max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ritm-slot-group { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 6px; background: var(--primary-soft); color: var(--primary); vertical-align: -3px; }
.ritm-slot.is-next .ritm-slot-group { background: rgba(200, 240, 74, .18); color: var(--lime); }
.ritm-slot-group svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   Notificări: o capsulă mică, sus, câte una
   ============================================================ */
.rt-toast-host {
  position: fixed; z-index: 12000; left: 0; right: 0;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  display: flex; justify-content: center; padding: 0 16px; pointer-events: none;
}
.rt-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px;
  max-width: min(420px, 100%); min-height: 46px; padding: 7px 8px 7px 8px;
  border-radius: 999px; background: #0B1A15; color: #FAFCFA;
  box-shadow: 0 14px 34px -14px rgba(4, 14, 10, .55), 0 0 0 1px rgba(250, 252, 250, .06);
  font-family: var(--font-primary); touch-action: none; user-select: none; -webkit-user-select: none;
}
[data-theme="dark"] .rt-toast { background: #F2F7F4; color: #0B1A15; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .7); }
.rt-toast-dot { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lime); color: var(--adanc); }
.rt-toast-dot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rt-toast.error .rt-toast-dot { background: #F2A08F; color: #3A0F07; }
.rt-toast.warning .rt-toast-dot { background: #F3C969; color: #3A2A05; }
.rt-toast.info .rt-toast-dot { background: #BFE3FF; color: #0B2A40; }
.rt-toast-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-right: 8px; }
.rt-toast-text strong { font-size: .88rem; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-toast-text small { font-size: .76rem; line-height: 1.25; opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-toast-btn {
  flex: none; height: 32px; padding: 0 14px; border: 0; border-radius: 999px;
  background: rgba(250, 252, 250, .12); color: inherit; font: 700 .8rem/1 var(--font-primary); cursor: pointer;
}
[data-theme="dark"] .rt-toast-btn { background: rgba(11, 26, 21, .08); }
.rt-toast-btn.primary { background: var(--lime); color: var(--adanc); }
.rt-toast-btn + .rt-toast-btn { margin-left: -4px; }
/* Vechiul teanc de notificări nu mai e folosit. */
#toast-stack { display: none !important; }

/* Numărul de pe tab: o singură animație, cu respectarea preferinței de mișcare. */
[data-inbox-count].bump { animation: inbox-pop .65s cubic-bezier(.34, 1.56, .64, 1); }
[data-inbox-count].bump::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent); animation: inbox-ring .8s ease-out; pointer-events: none; }
@keyframes inbox-pop { 0% { transform: scale(.6); } 45% { transform: scale(1.25); } 70% { transform: scale(.95); } 100% { transform: scale(1); } }
@keyframes inbox-ring { to { box-shadow: 0 0 0 9px transparent; } }
@media (prefers-reduced-motion: reduce) {
  [data-inbox-count].bump, [data-inbox-count].bump::after { animation: none; }
  [data-inbox-count].bump::after { content: none; }
}

/* Profil client: șase pași, aceleași repere vizuale în ambele teme. */
.client-onboarding::before { background: radial-gradient(ellipse at 85% 10%, var(--primary-soft), transparent 55%); inset: 0; }
.client-onboarding .onboarding-shell { max-width: 780px; gap: 20px; }
.client-onboarding .onboarding-stage { padding: 12px 0 20px; }
.ob-step-track { display: flex; gap: 7px; }
.ob-step-track span { flex: 1; height: 4px; background: var(--border); border-radius: 10px; overflow: hidden; }
.ob-step-track span.done { background: var(--primary); }
.ob-step-track span.current { background: var(--lime); }
.client-onboarding .onboarding-step { padding: clamp(22px,4vw,38px); background: var(--surface); border: 1px solid var(--border); border-radius: 28px; box-shadow: 0 18px 55px -35px rgba(8,36,28,.3); }
.ob-step-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 24px; border-radius: 17px; background: var(--primary-soft); color: var(--primary); }
.ob-step-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.client-onboarding .onboarding-step h1 { margin: 0 0 12px; font: 800 clamp(1.8rem,5vw,2.8rem)/1.08 var(--font-primary); letter-spacing: -.04em; color: var(--text); }
.client-onboarding .onboarding-step > p { font: 400 .95rem/1.6 var(--font-primary); color: var(--text-soft); margin-bottom: 26px; }
.client-onboarding .onboarding-kicker { font: 500 .65rem/1.4 var(--font-mono); letter-spacing: .13em; margin-bottom: 10px; }
.client-onboarding .onboarding-step label { color: var(--text-muted); font: 600 .86rem/1.4 var(--font-primary); }
.client-onboarding .onboarding-step input, .client-onboarding .onboarding-step select, .client-onboarding .onboarding-step textarea { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); font: 600 1rem/1.4 var(--font-primary); }
.client-onboarding .onboarding-step input { font-variant-numeric: tabular-nums; }
.client-onboarding .onboarding-choice-grid button, .client-onboarding .onboarding-options button { background: var(--surface-alt); color: var(--text); border-color: var(--border); font-family: var(--font-primary); font-size: .93rem; }
.client-onboarding .onboarding-options button.selected, .client-onboarding .onboarding-choice-grid button.selected { color: var(--text) !important; background: var(--primary-soft) !important; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); transform: none; }
.client-onboarding .ob-activity { gap: 10px; }
.client-onboarding .ob-activity button { display: flex; align-items: center; gap: 14px; padding: 16px; min-height: 94px; }
.ob-activity-bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 36px; height: 32px; flex: none; }
.ob-activity-bars i { width: 5px; height: 35%; border-radius: 3px; background: var(--border); }
.ob-activity-bars i:nth-child(2) { height: 55%; }.ob-activity-bars i:nth-child(3) { height: 75%; }.ob-activity-bars i:nth-child(4) { height: 100%; }
.ob-activity-bars i.filled { background: var(--primary); }
.ob-activity-copy { flex: 1; min-width: 0; }
.client-onboarding .ob-activity button strong { font-size: .98rem; }
.client-onboarding .ob-activity button small { color: var(--text-soft); font-size: .78rem; line-height: 1.45; }
.ob-activity-copy em { display: block; margin-top: 6px; color: var(--text-muted); font: 500 .62rem/1.4 var(--font-mono); font-style: normal; }
.ob-option-check { flex: none; display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid var(--border-strong); border-radius: 50%; color: transparent; }
.selected .ob-option-check { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.client-onboarding .onboarding-actions { display: grid; grid-template-columns: 1fr 1.6fr; grid-template-areas: 'save save' 'back next'; gap: 10px; }
.client-onboarding #save-state { grid-area: save; text-align: center; color: var(--text-soft); font: 500 .68rem/1.4 var(--font-mono); }
.client-onboarding #ob-back { grid-area: back; border: 1px solid var(--border); color: var(--text-muted); }
.client-onboarding #ob-next { grid-area: next; background: var(--lime); color: var(--adanc); }
.client-onboarding .onboarding-actions button { height: 54px; font: 700 .95rem/1 var(--font-primary); border-radius: 17px; }
.ob-form-error { color: var(--danger); font-size: .86rem; line-height: 1.5; margin: 0; }
.ob-form-error:empty { display: none; }
.client-onboarding .onboarding-result { text-align: center; }
@media (max-width: 480px) { .client-onboarding .onboarding-shell { padding-left: 16px; padding-right: 16px; gap: 16px; }.client-onboarding .onboarding-step { padding: 22px 18px; border-radius: 24px; }.client-onboarding .ob-activity button { padding: 12px; gap: 10px; }.client-onboarding .ob-activity button small { font-size: .74rem; }.ob-step-icon { margin-bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { .client-onboarding .onboarding-step.active { animation: none; } }
.client-onboarding #ob-next { background: var(--lime) !important; color: var(--adanc) !important; }
.client-onboarding .onboarding-step input, .client-onboarding .onboarding-step select, .client-onboarding .onboarding-step textarea { background: var(--surface-alt) !important; color: var(--text) !important; }
.client-onboarding .onboarding-progress strong { font: 500 .72rem/1 var(--font-mono); }
.client-onboarding .onboarding-step { box-sizing: border-box; }
html .client-onboarding .onboarding-actions #ob-next { background: var(--lime) !important; color: var(--adanc) !important; }
.client-onboarding .onboarding-actions #save-state { display: block !important; }
@media (max-width: 480px) {
  .client-onboarding .ob-activity button { min-height: 82px; }
  .client-onboarding .onboarding-step[data-step="3"] .ob-step-icon { width: 44px; height: 44px; margin-bottom: 14px; }
  .client-onboarding .onboarding-step[data-step="3"] > p { margin-bottom: 18px; }
}

/* Fișa specialistului: conținut derulabil, acțiuni accesibile deasupra zonei sigure iOS. */
.coach-onboarding::before { inset: 0; background: radial-gradient(ellipse at 90% 10%, var(--primary-soft), transparent 55%); }
.coach-onboarding .onboarding-shell { max-width: 780px; gap: 18px; padding-top: max(24px, calc(env(safe-area-inset-top, 0px) + 16px)) !important; padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
.coach-onboarding .onboarding-stage { flex: none; align-items: flex-start; padding: 8px 0 20px; min-width: 0; }
.coach-onboarding .onboarding-step { box-sizing: border-box; width: 100%; padding: clamp(22px,4vw,36px); background: var(--surface); border: 1px solid var(--border); border-radius: 28px; box-shadow: 0 18px 55px -35px rgba(8,36,28,.3); }
.coach-onboarding .onboarding-step h1 { margin: 0 0 12px; font: 800 clamp(1.8rem,6vw,2.7rem)/1.08 var(--font-primary); letter-spacing: -.04em; color: var(--text); }
.coach-onboarding .onboarding-step > p { margin: 0 0 24px; line-height: 1.6; color: var(--text-soft); }
.coach-onboarding .onboarding-kicker { margin-bottom: 10px; font: 500 .65rem/1.4 var(--font-mono); letter-spacing: .13em; }
.coach-onboarding .onboarding-step label { font: 600 .86rem/1.4 var(--font-primary); color: var(--text-muted); }
.coach-onboarding .onboarding-step input:not([type="file"]), .coach-onboarding .onboarding-step textarea { background: var(--surface-alt) !important; color: var(--text) !important; font-family: var(--font-primary); font-size: 1rem; border-color: var(--border); }
.coach-onboarding .onboarding-step .ob-photo input { display: none; }
.coach-onboarding .onboarding-options button, .coach-onboarding .onboarding-choice-grid button { background: var(--surface-alt); color: var(--text); border-color: var(--border); font-family: var(--font-primary); font-size: .93rem; }
.coach-onboarding .onboarding-options button small { font-size: .8rem; line-height: 1.45; color: var(--text-soft); }
.coach-onboarding .ob-types { gap: 10px; margin-top: 16px; }
.coach-onboarding .ob-type { padding: 14px; gap: 12px; border-radius: 18px; background: var(--surface-alt); }
.coach-onboarding .ob-type strong { font-size: 1rem; }
.coach-onboarding .ob-type small { font-size: .78rem; }
.coach-onboarding .ob-type.selected { background: var(--sp-soft); }
.coach-onboarding .onboarding-actions { position: fixed; z-index: 40; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%,780px); box-sizing: border-box; margin: 0; padding: 12px clamp(16px,5vw,54px) calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--border); gap: 9px 10px; }
.coach-onboarding .onboarding-actions #save-state { display: block !important; font: 500 .65rem/1.4 var(--font-mono); color: var(--text-soft); }
.coach-onboarding .onboarding-actions button { min-height: 54px; font: 700 .93rem/1.2 var(--font-primary); }
html .coach-onboarding .onboarding-actions #ob-next, html .coach-onboarding .onboarding-actions #ob-submit { grid-area: n; width: 100%; border: 0; border-radius: 17px; background: var(--lime) !important; color: var(--adanc) !important; padding: 0 16px; }
html .coach-onboarding .onboarding-actions:has(#ob-next[style*="none"]) #ob-back { grid-column: auto; }
.coach-onboarding .onboarding-progress strong { font: 500 .72rem/1 var(--font-mono); }
.coach-onboarding .ob-msg:not(:empty) { padding: 12px 16px; border: 1px solid var(--danger); border-radius: 14px; background: var(--surface); margin: 0; }
@media (max-width: 480px) {
  .coach-onboarding .onboarding-shell { padding-left: 16px; padding-right: 16px; gap: 16px; }
  .coach-onboarding .onboarding-step { padding: 22px 18px; border-radius: 24px; }
  .coach-onboarding .onboarding-step[data-step="0"] .ob-step-icon { display: none; }
  .coach-onboarding .onboarding-step .ob-photo { width: 110px; height: 110px; margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { .coach-onboarding .onboarding-step.active { animation: none; } }

/* Confirmarea specialistului: stare clară, cod de acces și următorul pas. */
.specialist-confirmation { display: block; padding: max(24px,calc(env(safe-area-inset-top,0px) + 16px)) 16px calc(24px + env(safe-area-inset-bottom,0px)); }
.specialist-confirmation .validation-shell { max-width: 540px; width: 100%; margin: 0 auto; padding: 0; background: transparent; border: 0; box-shadow: none; }
.specialist-confirmation .validation-shell > .brand { margin: 0 0 30px; }
.validation-card { padding: clamp(24px,5vw,36px); border: 1px solid var(--border); border-radius: 28px; background: var(--surface); box-shadow: 0 18px 55px -35px rgba(8,36,28,.3); }
.specialist-confirmation .validation-icon { width: 54px; height: 54px; border-radius: 18px; margin-bottom: 20px; background: var(--primary-soft); color: var(--primary); }
.validation-status { display: inline-block; padding: 6px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font: 600 .73rem/1.4 var(--font-primary); margin: 12px 0 18px; }
.specialist-confirmation h1 { margin: 0 0 14px; font: 800 clamp(1.8rem,6vw,2.4rem)/1.1 var(--font-primary); letter-spacing: -.04em; color: var(--text); }
.specialist-confirmation .validation-card > p { font-size: .92rem; line-height: 1.6; color: var(--text-soft); }
.validation-journey { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 16px; }
.validation-journey li { display: flex; align-items: flex-start; gap: 12px; }
.validation-journey i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 50%; color: var(--text-soft); font: 600 .75rem/1 var(--font-mono); font-style: normal; }
.validation-journey .done i { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.validation-journey .current i { background: var(--lime); color: var(--adanc); border-color: var(--lime); }
.validation-journey strong, .validation-journey small { display: block; }
.validation-journey strong { color: var(--text); font-size: .85rem; }.validation-journey small { color: var(--text-soft); font-size: .77rem; line-height: 1.5; margin-top: 3px; }
.specialist-confirmation #validation-form { padding-top: 22px; border-top: 1px solid var(--border); }
.specialist-confirmation #code { width: 100%; height: 58px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-alt); color: var(--text); font: 500 1.05rem/1 var(--font-mono); letter-spacing: .12em; padding: 0 16px; margin: 8px 0; text-transform: uppercase; }
#code-help { display: block; font-size: .75rem; color: var(--text-soft); line-height: 1.5; }
html .specialist-confirmation #validate-btn { height: 54px; border-radius: 17px; background: var(--lime) !important; color: var(--adanc) !important; margin-top: 20px; }
.validation-secondary { display: flex; gap: 10px; margin-top: 16px; }.validation-secondary .btn { font-size: .82rem; }
@media (max-width: 480px) {
  .specialist-confirmation .validation-shell > .brand { margin-bottom: 22px; }
  .specialist-confirmation .validation-card { padding: 24px 20px; border-radius: 24px; }
  .specialist-confirmation .validation-icon { margin-bottom: 16px; }
  .specialist-confirmation .validation-status { margin: 8px 0 14px; }
  .specialist-confirmation .validation-journey { margin: 22px 0; gap: 12px; }
}

/* Profil specialist: identitate profesională și administrare, într-un singur loc. */
.sp-profile { width: min(100%,1040px); }
.sp-profile-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 28px; }
.sp-profile-public, .sp-profile-manage { min-width: 0; }
.sp-profile-identity { padding: 24px; border: 1px solid var(--border); border-radius: 28px; background: var(--surface); }
.sp-profile-identity-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 24px; font-size: .82rem; color: var(--text-soft); }
.sp-profile-verified { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; }
.sp-profile-verified.is-approved { color: var(--primary); }
.sp-profile-verified svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.sp-profile-person { display: grid; grid-template-columns: 86px minmax(0,1fr); align-items: center; gap: 18px; }
.sp-profile-avatar { position: relative; border: 0; padding: 0; background: transparent; border-radius: 50%; cursor: pointer; }
.sp-profile-avatar .avatar { width: 86px !important; height: 86px !important; border-radius: 50% !important; font-size: 1.8rem !important; }
.sp-profile-avatar > span { display: grid; place-items: center; position: absolute; right: -4px; bottom: -4px; width: 30px; height: 30px; border: 3px solid var(--surface); border-radius: 50%; background: var(--primary); color: var(--primary-fg); }
.sp-profile-avatar > span svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.sp-profile-type { display: inline-flex; align-items: center; gap: 6px; color: var(--sp,var(--primary)); font-size: .8rem; font-weight: 650; }
.sp-profile-type svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sp-profile-person h1 { margin: 7px 0 8px; color: var(--text); font: 800 clamp(1.6rem,5vw,2.2rem)/1.05 var(--font-primary); letter-spacing: -.04em; overflow-wrap: anywhere; }
.sp-profile-person p { margin: 0; color: var(--text-muted); font-size: .85rem; line-height: 1.5; }
.sp-profile-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 16px; margin: 22px 0; color: var(--text-soft); font-size: .78rem; }
.sp-profile-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.sp-profile-meta > span > svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sp-profile-edit { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 15px 17px; background: var(--primary); color: var(--primary-fg); border: 0; border-radius: 16px; font: 700 .84rem/1.35 var(--font-primary); text-align: left; cursor: pointer; }
.sp-profile-edit svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.sp-profile-availability { margin-top: 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--primary-soft); }
.sp-profile-availability .pf-row { min-height: 82px; padding: 16px 18px; }
.sp-profile-availability .pf-row-text strong { font-size: .88rem; }
.sp-profile-availability .pf-row-text small { font-size: .75rem; line-height: 1.5; }
.sp-profile-intro { margin: 28px 4px 0; }
.sp-profile-intro h2, .sp-profile .pf-group-title { color: var(--text); font: 700 1rem/1.3 var(--font-primary); text-transform: none; letter-spacing: -.01em; margin: 0 0 12px; }
.sp-profile-intro > p { color: var(--text-muted); font-size: .9rem; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.sp-profile-specialties { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0; }
.sp-profile-specialties span { padding: 6px 11px; border-radius: 10px; background: var(--sp-soft,var(--primary-soft)); color: var(--sp,var(--primary)); font-size: .74rem; font-weight: 600; }
.sp-profile-facts { display: flex; flex-wrap: wrap; gap: 18px 26px; border-top: 1px solid var(--border); margin: 22px 0 0; padding-top: 18px; }
.sp-profile-facts div { min-width: 0; }.sp-profile-facts dt { color: var(--text-soft); font-size: .73rem; }.sp-profile-facts dd { margin: 5px 0 0; color: var(--text); font-size: .85rem; font-weight: 700; }
.sp-profile .pf-group:first-child { margin-top: 0; }
.sp-profile .pf-row-ico { background: transparent; color: var(--primary); }
.sp-profile .pf-card { border-radius: 18px; box-shadow: none; }
.sp-profile button:focus-visible, .sp-profile input:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
@media (min-width: 980px) { .sp-profile-layout { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 36px; align-items: start; }.sp-profile-public { position: sticky; top: 30px; } }
@media (max-width: 380px) { .sp-profile-identity { padding: 20px; }.sp-profile-person { grid-template-columns: 72px minmax(0,1fr); gap: 14px; }.sp-profile-avatar .avatar { width: 72px !important; height: 72px !important; } }

/* ============================================================
   Planuri antrenament 2026 — pictograme, listă (wpc) și
   cardul de exercițiu din editor (wx)
   ============================================================ */
/* Pictograma grupei: siluetă desenată în currentColor. Containerele își
   setează mărimea; implicit are 32px. */
:where(svg.mi) { display: block; width: 32px; height: 32px; flex: none; }
.plan-icon.mi-wrap { width: 100%; height: 100%; display: grid; place-items: center; color: var(--primary); }
.plan-icon.mi-wrap svg.mi { width: 92%; height: 92%; }
.ex-pick-ico, .ses-plan-ico, .cdx-plan-ico { color: var(--primary); background: var(--primary-soft); }

/* ---------- Lista de planuri ---------- */
.wpc-list { display: flex; flex-direction: column; gap: 10px; }
.wpc { border: 1px solid var(--border); border-radius: 22px; background: var(--surface); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.wpc.open { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.wpc-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 12px 14px 12px 12px; border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.wpc-ico { flex: none; align-self: flex-start; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--primary-soft); color: var(--primary); }
.wpc-ico svg.mi { width: 52px; height: 52px; }
.wpc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wpc-main strong { font: 700 1rem/1.25 var(--font-primary); letter-spacing: -.01em; overflow-wrap: anywhere; }
.wpc-main small { font-size: .78rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpc-who { align-self: flex-start; max-width: 100%; margin-top: 2px; padding: 5px 9px; border-radius: 999px; background: var(--surface-alt); color: var(--text-muted); font: 600 .7rem/1 var(--font-primary); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpc-who.idle { background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--text-soft); }
.wpc-chev { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--text-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.wpc.open .wpc-chev { transform: rotate(180deg); }
.wpc-body { padding: 0 14px 14px; }
.wpc-notes { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-alt); font-size: .84rem; line-height: 1.45; color: var(--text-muted); }
.wpc-exs, .wpc-ss ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.wpc-exs { border-top: 1px solid var(--border); }
.wpc-ex { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.wpc-ex-ico { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-alt); color: var(--primary); }
.wpc-ex-ico svg.mi { width: 40px; height: 40px; }
.wpc-ex-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wpc-ex-txt b { font-size: .9rem; font-weight: 650; line-height: 1.25; }
.wpc-ex-txt small { font: 500 .74rem/1.3 var(--font-mono); color: var(--text-soft); }
.wpc-ss { position: relative; padding: 8px 0 0 14px; border-bottom: 1px solid var(--border); }
.wpc-ss::before { content: ""; position: absolute; left: 0; top: 30px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--cta); }
.wpc-ss-tag { font: 600 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }
.wpc-ss .wpc-ex:last-child { border-bottom: 0; }
.wpc-none { padding: 12px 0; font-size: .84rem; color: var(--text-soft); }
.wpc-actions { display: flex; gap: 8px; margin-top: 14px; }
.wpc-btn { flex: 1; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); color: var(--text); font: 700 .88rem/1 var(--font-primary); cursor: pointer; }
.wpc-btn.primary { border-color: var(--primary); background: var(--primary); color: var(--primary-fg); }
.wpc-btn.danger { flex: none; width: 46px; padding: 0; color: var(--danger); }
.wpc-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Editor: pictograma planului ---------- */
.wpe-icons { display: grid; grid-auto-flow: column; grid-auto-columns: 84px; gap: 8px; margin: 0 -16px; padding: 2px 16px 6px; overflow-x: auto; scrollbar-width: none; }
.wpe-icons::-webkit-scrollbar { display: none; }
.wpe-icon { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 6px 11px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text-muted); font: 600 .72rem/1.1 var(--font-primary); cursor: pointer; transition: border-color .15s, background .15s; }
.wpe-icon-art { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; background: var(--surface-alt); color: var(--text-soft); transition: background .15s, color .15s; }
.wpe-icon-art svg.mi { width: 50px; height: 50px; }
.wpe-icon.on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); color: var(--text); }
.wpe-icon.on .wpe-icon-art { background: var(--primary-soft); color: var(--primary); }
@media (min-width: 641px) { .wpe-icons { grid-auto-flow: row; grid-template-columns: repeat(8, 1fr); grid-auto-columns: auto; margin: 0; padding: 0; overflow: visible; } }

/* ---------- Editor: cardul de exercițiu ---------- */
.wx-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.wx { position: relative; padding: 14px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); }
.wx.ss { margin-top: -4px; border-left: 3px solid var(--cta); }
.wx-ss-tag { position: absolute; top: -11px; left: 16px; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--cta); color: var(--cta-fg); font: 700 .66rem/1 var(--font-primary); }
.wx-ss-tag svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.wx-head { display: flex; align-items: center; gap: 12px; }
.wx-ico { flex: none; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 15px; background: var(--primary-soft); color: var(--primary); cursor: pointer; }
.wx-ico svg.mi { width: 48px; height: 48px; }
.wx-kicker { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font: 500 .68rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-kicker b { font-weight: 600; color: var(--text); }
.wx-tools { flex: none; display: flex; gap: 2px; }
.wx-move, .wx-del { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 11px; background: transparent; color: var(--text-soft); cursor: pointer; }
.wx-move:hover:not(:disabled), .wx-del:hover { background: var(--surface-alt); color: var(--text); }
.wx-del:hover { color: var(--danger); }
.wx-move:disabled { opacity: .3; cursor: default; }
.wx-move svg, .wx-del svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.wx-name { position: relative; margin: 12px 0; }
.wpe .wx-name input { width: 100%; height: 54px; margin: 0; padding: 0 56px 0 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-alt); color: var(--text); font: 700 1rem/1.2 var(--font-primary); text-align: left; box-shadow: none; }
.wpe .wx-name input::placeholder { font-weight: 500; color: var(--text-soft); }
.wpe .wx-name input:focus { border-color: var(--primary); background: var(--surface); outline: 0; box-shadow: 0 0 0 3px var(--primary-soft); }
.wx-search { position: absolute; top: 6px; right: 6px; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: var(--primary); color: var(--primary-fg); cursor: pointer; }
.wx-search svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.wx-seg { display: inline-flex; padding: 3px; margin-bottom: 10px; border-radius: 12px; background: var(--surface-alt); }
.wx-seg button { height: 30px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--text-soft); font: 650 .78rem/1 var(--font-primary); cursor: pointer; }
.wx-seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.wx-stats, .wx-adv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wx-stat { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 8px 8px; border-radius: 16px; background: var(--surface-alt); }
.wx-stat label { padding-left: 4px; font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); white-space: nowrap; }
.wx-stat label small { text-transform: none; letter-spacing: 0; opacity: .8; }
.wx-pair, .wx-step { display: flex; align-items: center; justify-content: center; gap: 2px; height: 38px; }
.wx-pair i { flex: none; font: 500 .8rem/1 var(--font-primary); font-style: normal; color: var(--text-soft); }
.wpe .wx-stat input { flex: 1 1 0; min-width: 0; width: 100%; height: 38px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: 750 1.2rem/1 var(--font-primary); text-align: center; font-variant-numeric: tabular-nums; box-shadow: none; -moz-appearance: textfield; appearance: textfield; }
.wpe .wx-stat input::placeholder { color: var(--text-soft); font-weight: 500; }
.wpe .wx-stat input:focus { background: var(--surface); outline: 0; box-shadow: 0 0 0 2px var(--primary-soft); }
.wx-stat input::-webkit-outer-spin-button, .wx-stat input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wx-step button { flex: none; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: var(--surface); color: var(--text); font: 600 1rem/1 var(--font-primary); cursor: pointer; box-shadow: var(--shadow-sm); }

.wx-switch { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 600 .84rem/1.2 var(--font-primary); color: var(--text-muted); cursor: pointer; }
.wx-switch input { position: absolute; opacity: 0; pointer-events: none; }
.wx-switch-ui { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: var(--border-strong); transition: background .2s; }
.wx-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.wx-switch input:checked + .wx-switch-ui { background: var(--primary); }
.wx-switch input:checked + .wx-switch-ui::after { transform: translateX(16px); }
.wx-switch input:focus-visible + .wx-switch-ui { box-shadow: 0 0 0 3px var(--primary-soft); }

.wx-adv { margin-top: 12px; border-top: 1px solid var(--border); }
.wx-adv summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-top: 10px; list-style: none; cursor: pointer; }
.wx-adv summary::-webkit-details-marker { display: none; }
.wx-adv summary span { font: 700 .86rem/1 var(--font-primary); color: var(--text); }
.wx-adv summary small { flex: 1; min-width: 0; font: 500 .72rem/1.2 var(--font-mono); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-adv summary svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--text-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.wx-adv[open] summary svg { transform: rotate(180deg); }
.wx-adv-body { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
.wx-adv-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.wx-field { display: flex; flex-direction: column; gap: 8px; }
.wx-field > label { font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.wpe .wx-field > input, .wpe .wx-field > textarea { width: 100%; margin: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-alt); color: var(--text); font: 500 .9rem/1.4 var(--font-primary); box-shadow: none; resize: vertical; }
.wpe .wx-field > input:focus, .wpe .wx-field > textarea:focus { border-color: var(--primary); background: var(--surface); outline: 0; }
.wx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wx-chips button { height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font: 600 .78rem/1 var(--font-primary); cursor: pointer; }
.wx-chips button.on { border-color: var(--primary); background: var(--primary); color: var(--primary-fg); }
.wx-tech-desc { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--primary-soft); font-size: .8rem; line-height: 1.45; color: var(--text-muted); }
.wx-drops { display: flex; flex-direction: column; gap: 6px; }
.wx-drops .drop-row { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 14px; background: var(--surface-alt); }
.wx-drops .drop-row > span { flex: 1; font: 600 .8rem/1 var(--font-primary); }
.wpe .wx-drops .drop-row input { width: 56px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 9px; background: var(--surface); color: var(--text); font: 700 .9rem/1 var(--font-primary); text-align: center; }
.wx-drops .drop-row i { font: 500 .72rem/1 var(--font-primary); font-style: normal; color: var(--text-soft); }
.wx-drops .drop-row button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--text-soft); cursor: pointer; }
.wx-drops svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wx-drop-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px dashed var(--border-strong); border-radius: 999px; background: transparent; color: var(--text); font: 600 .78rem/1 var(--font-primary); cursor: pointer; }
@media (max-width: 380px) {
  .wx-stat input { font-size: 1.05rem !important; }
  .wx-step button { width: 24px; height: 24px; }
}
/* Pictogramele cu linie (cardio, mobilitate, altul) stau mai mici în dală. */
svg.mi.mi-line { padding: 20%; box-sizing: border-box; }
/* Harta anatomică umple dala până la margini (o „fereastră” pe zona lucrată). */
:is(.wpc-ico, .wpc-ex-ico, .wx-ico, .wpe-icon-art, .ex-pick-ico, .ses-plan-ico, .cdx-plan-ico, .client-plan-icon, .wc-workout-title > span, .mp-group-tile-ico, .mp-simple-ico) { overflow: hidden; }
:is(.wpc-ico, .wpc-ex-ico, .wx-ico, .wpe-icon-art, .ex-pick-ico, .ses-plan-ico, .cdx-plan-ico, .client-plan-icon, .wc-workout-title > span) svg.mi:not(.mi-line),
:is(.wpc-ico, .wpc-ex-ico, .wx-ico, .wpe-icon-art, .ex-pick-ico, .ses-plan-ico, .cdx-plan-ico, .client-plan-icon, .wc-workout-title > span) .plan-icon.mi-wrap svg.mi:not(.mi-line) { width: 100%; height: 100%; }
/* Accent pe grupa lucrată: mușchii vizați sunt roșu închis (convenția hărților
   musculare), restul corpului e o umbră în culoarea dalei / albă pe dark. */
:root { --mi-base: currentColor; --mi-hot: #B3261E; --mi-hot-line: transparent; }
html[data-theme="dark"] { --mi-base: var(--aer); --mi-hot: #E5483F; --mi-hot-line: transparent; }
svg.mi .mi-base { fill: var(--mi-base); }
svg.mi .mi-hot { fill: var(--mi-hot); stroke: var(--mi-hot-line); stroke-width: 9; stroke-linejoin: round; paint-order: stroke; }

/* ============================================================
   Nutriție 2026 — pictograme Lucide, lista de planuri (wpc),
   suplimente (sup) și fereastra de supliment (spx)
   ============================================================ */
:root { --nut-tile: color-mix(in srgb, var(--lime) 38%, var(--surface)); --nut-ink: var(--padure); }
html[data-theme="dark"] { --nut-tile: color-mix(in srgb, var(--lime) 14%, transparent); --nut-ink: var(--lime); }
svg.lc { display: block; width: 22px; height: 22px; flex: none; }
.wpc-ico.nut, .wpc-ex-ico.nut, .sup-ico, .mpc-thumb:not(:has(img)) { background: var(--nut-tile); color: var(--nut-ink); }
.wpc-ico.nut svg.lc { width: 26px; height: 26px; }
.wpc-ex-ico.nut svg.lc { width: 20px; height: 20px; }
.mpc-thumb svg.lc { width: 24px; height: 24px; stroke-width: 1.75; }

.mpl-split { display: flex; gap: 2px; width: min(160px, 100%); height: 5px; margin-top: 2px; }
.mpl-split i { min-width: 6px; border-radius: 3px; }
.mpl-split .p { background: var(--primary); }
.mpl-split .c { background: #6FB3E0; }
.mpl-split .f { background: var(--lime); }
.mpl-sub { margin: 18px 0 8px; font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft); }
.wpc-body .macro-summary { margin: 0; }
.mpl-meal .wpc-ex-txt { flex: 1; }
.mpl-meal .wpc-ex-txt b i { margin-left: 4px; font: 500 .72rem/1 var(--font-mono); font-style: normal; color: var(--text-soft); }
.mpl-meal .wpc-ex-txt small { font-family: var(--font-primary); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mpl-kcal { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mpl-kcal b { font: 750 .95rem/1 var(--font-primary); font-variant-numeric: tabular-nums; }
.mpl-kcal small { font: 500 .6rem/1 var(--font-mono); color: var(--text-soft); }

/* Suplimente */
.sup-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sup-row { display: flex; align-items: center; gap: 4px; min-height: 64px; padding: 8px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.sup-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.sup-row > .sup-ico { margin-right: 8px; }
.sup-ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; }
.sup-ico svg.lc { width: 22px; height: 22px; }
.sup-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sup-txt b { font: 700 .92rem/1.25 var(--font-primary); }
.sup-txt small { font: 500 .74rem/1.3 var(--font-mono); color: var(--text-soft); }
.sup-txt em { font-size: .76rem; font-style: normal; line-height: 1.35; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-del { flex: none; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--text-soft); cursor: pointer; }
.sup-del:hover { background: var(--surface-alt); color: var(--danger); }
.sup-del svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sup-add { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 16px 8px 8px; border: 1.5px dashed var(--border-strong); border-radius: 18px; background: transparent; color: var(--text); font: 700 .9rem/1 var(--font-primary); text-align: left; cursor: pointer; }
.sup-add .sup-ico { background: var(--surface-alt); color: var(--text-soft); }
.sup-add > span:nth-child(2) { flex: 1; }
.sup-add > svg:last-of-type { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* Fereastra de supliment */
.spx { display: flex; flex-direction: column; gap: 16px; }
.spx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.spx-opt { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; min-height: 92px; padding: 12px 6px 10px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); font: 600 .74rem/1.2 var(--font-primary); text-align: center; cursor: pointer; }
.spx-opt svg.lc { width: 38px; height: 38px; padding: 8px; box-sizing: border-box; border-radius: 12px; background: var(--nut-tile); color: var(--nut-ink); }
.spx-opt.on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.spx-opt.on svg.lc { background: var(--primary); color: var(--primary-fg); }
.spx-field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.spx-field > span { font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft); }
.spx-field > span small { text-transform: none; letter-spacing: 0; }
.modal .spx-field input, .modal .spx-field textarea { width: 100%; margin: 0; padding: 13px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-alt); color: var(--text); font: 600 .95rem/1.3 var(--font-primary); box-shadow: none; }
.modal .spx-field textarea { font-weight: 500; resize: vertical; }
.modal .spx-field input:focus, .modal .spx-field textarea:focus { border-color: var(--primary); background: var(--surface); outline: 0; }
.spx-times { display: flex; flex-wrap: wrap; gap: 6px; }
.spx-times button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font: 600 .78rem/1 var(--font-primary); cursor: pointer; }
.spx-times button svg.lc { width: 16px; height: 16px; }
.spx-times button.on { border-color: var(--primary); background: var(--primary); color: var(--primary-fg); }
@media (min-width: 560px) { .spx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.spx-field[hidden] { display: none; }
.mpl-split .f { background: #9BC53D; }

/* Pornire blocată (auth.js): mesaj cu „Reîncearcă” în loc de un panou gol. */
.ritm-stall { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.ritm-stall > div { max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ritm-stall strong { font: 750 1.2rem/1.2 var(--font-primary); color: var(--text); }
.ritm-stall p { margin: 0 0 8px; font-size: .9rem; line-height: 1.45; color: var(--text-soft); }
.ritm-stall button { height: 50px; padding: 0 28px; border: 0; border-radius: 16px; background: var(--cta); color: var(--cta-fg); font: 750 .95rem/1 var(--font-primary); cursor: pointer; }

/* ============================================================
   Fișa clientului — graficul de nutriție (nch)
   Culori de stare validate (dataviz): în țintă / sub / peste.
   ============================================================ */
:root { --st-ok: #1F8A5B; --st-under: #3B82C4; --st-over: #D08A12; }
html[data-theme="dark"] { --st-ok: #2FA36B; --st-under: #4A98D8; --st-over: #BE7F1C; }
.nch-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.nch-figs > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px; background: var(--surface-alt); }
.nch-figs span { font: 500 .6rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.nch-figs b { font: 750 1.35rem/1 var(--font-primary); letter-spacing: -.02em; color: var(--text); white-space: nowrap; }
.nch-figs b small { margin-left: 3px; font: 500 .7rem/1 var(--font-primary); color: var(--text-soft); }
.nch-figs em { font-size: .7rem; font-style: normal; line-height: 1.3; color: var(--text-soft); }
.nch-figs em::before { content: ""; display: none; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; }
.nch-figs em.ok::before, .nch-figs em.under::before, .nch-figs em.over::before { display: inline-block; }
.nch-figs em.ok::before { background: var(--st-ok); }
.nch-figs em.under::before { background: var(--st-under); }
.nch-figs em.over::before { background: var(--st-over); }

.nch { padding: 16px 14px 10px 10px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.nch-plot { position: relative; height: 160px; margin: 8px 0 0 44px; }
.nch-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--border); }
.nch-grid.base { border-top-color: var(--border-strong); }
.nch-grid small, .nch-target small { position: absolute; right: 100%; top: 0; margin-right: 8px; transform: translateY(-50%); font: 500 .58rem/1 var(--font-mono); color: var(--text-soft); white-space: nowrap; text-align: right; }
.nch-band { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--st-ok) 9%, transparent); }
.nch-target { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid color-mix(in srgb, var(--st-ok) 55%, var(--border-strong)); }
.nch-target small { display: flex; flex-direction: column; gap: 2px; color: var(--text-soft); }
.nch-target small b { font: 650 .66rem/1 var(--font-mono); color: var(--text); }
.nch-cols { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px; }
.nch-col { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nch-col span { width: min(14px, 64%); border-radius: 4px 4px 0 0; background: var(--border-strong); transition: opacity .15s; }
.nch-col.ok span { background: var(--st-ok); }
.nch-col.under span { background: var(--st-under); }
.nch-col.over span { background: var(--st-over); }
.nch-col.none::after { content: ""; position: absolute; bottom: 0; width: 5px; height: 5px; border-radius: 50%; transform: translateY(50%); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.nch-cols:has(.nch-col.sel) .nch-col:not(.sel) span { opacity: .35; }
.nch-col:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.nch-days { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px; margin: 8px 0 0 44px; }
.nch-days span { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 500 .56rem/1 var(--font-mono); color: var(--text-soft); }
.nch-days b { font-weight: 500; opacity: .65; }
.nch-days .today { color: var(--text); font-weight: 700; }
.nch-days .today b { opacity: 1; }
.nch-tip { margin: 10px 0 0; min-height: 1.2em; font: 500 .74rem/1.3 var(--font-mono); color: var(--text-muted); text-align: center; }
.nch-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.nch-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--text-muted); }
.nch-legend i { width: 10px; height: 10px; border-radius: 3px; }
.nch-legend .ok i { background: var(--st-ok); }
.nch-legend .under i { background: var(--st-under); }
.nch-legend .over i { background: var(--st-over); }
.nch-legend .band i { width: 14px; background: color-mix(in srgb, var(--st-ok) 14%, transparent); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--st-ok) 55%, var(--border-strong)); }
@media (max-width: 380px) { .nch-figs b { font-size: 1.15rem; } }

/* ============================================================
   Client 2026 — nutriție (nd/ndt/ndm), „Altceva” (nsx),
   jurnal (ncx), panou (ov) + jurnalul din fișa antrenorului (mj)
   ============================================================ */
:root { --m-p: var(--primary); --m-c: #6FB3E0; --m-f: #9BC53D; --ms-eaten: var(--st-ok); --ms-sub: var(--st-under); --ms-skip: var(--danger); }
html[data-theme="dark"] { --ms-skip: #E5674F; }
.nd { display: flex; flex-direction: column; gap: 14px; padding-bottom: 12px; }
.nd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nd-back { display: inline-flex; align-items: center; gap: 2px; height: 40px; margin-left: -8px; padding: 0 12px 0 6px; border: 0; border-radius: 12px; background: transparent; color: var(--primary); font: 700 .9rem/1 var(--font-primary); cursor: pointer; }
.nd-back svg.lc { width: 22px; height: 22px; }
.nd-actions { display: flex; gap: 8px; }
.nd-act { display: inline-flex; align-items: center; gap: 6px; height: 40px; min-width: 40px; justify-content: center; padding: 0 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: 700 .84rem/1 var(--font-primary); cursor: pointer; }
.nd-act.primary { border-color: var(--primary); background: var(--primary); color: var(--primary-fg); }
.nd-act svg.lc { width: 18px; height: 18px; }
.nd-title { display: flex; flex-direction: column; gap: 6px; }
.nd-kicker, .nsx-kicker { font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }
.nd-title h1 { margin: 0; font: 800 clamp(1.6rem, 7vw, 2.1rem)/1.08 var(--font-primary); letter-spacing: -.025em; color: var(--text); }
.nd-title p { margin: 0; font-size: .86rem; color: var(--text-soft); }
.nd-title p b { color: var(--text); font-weight: 650; }
.nd-switch { position: relative; display: flex; align-items: center; }
.nd-switch select { width: 100%; height: 52px; padding: 0 44px 0 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); font: 750 1.1rem/1 var(--font-primary); appearance: none; -webkit-appearance: none; }
.nd-switch.small select { height: 44px; font-size: .92rem; }
.nd-switch svg.lc { position: absolute; right: 14px; width: 18px; height: 18px; transform: rotate(90deg); pointer-events: none; color: var(--text-soft); }
.nd-h { margin: 8px 0 -4px; font: 750 1.05rem/1.2 var(--font-primary); letter-spacing: -.01em; color: var(--text); }
.nd-empty { margin: 0; padding: 18px; border: 1px dashed var(--border-strong); border-radius: 16px; font-size: .86rem; color: var(--text-soft); text-align: center; }

/* Azi */
.ndt { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 24px; background: var(--primary); color: var(--primary-fg); }
html[data-theme="dark"] .ndt { background: var(--surface-alt); color: var(--text); }
.ndt.compact { cursor: pointer; padding: 16px; border-radius: 20px; }
.ndt-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 500 .66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; opacity: .8; }
.ndt-head b { font-weight: 600; }
.ndt-kcal { display: flex; align-items: baseline; gap: 8px; }
.ndt-kcal strong { font: 800 2.4rem/1 var(--font-primary); letter-spacing: -.03em; }
.ndt.compact .ndt-kcal strong { font-size: 1.9rem; }
.ndt-kcal span { font-size: .86rem; opacity: .75; }
.ndt-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, currentColor 16%, transparent); overflow: hidden; }
.ndt-bar i { display: block; height: 100%; border-radius: inherit; background: var(--lime); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.ndt-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.ndt-m { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 10px; border-radius: 14px; background: color-mix(in srgb, currentColor 8%, transparent); }
.ndt-m span { font: 500 .58rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.ndt-m b { font: 750 1rem/1 var(--font-primary); white-space: nowrap; }
.ndt-m b small { margin-left: 3px; font: 500 .66rem/1 var(--font-primary); opacity: .7; }
.ndt-m i { height: 4px; border-radius: 99px; background: color-mix(in srgb, currentColor 16%, transparent); overflow: hidden; }
.ndt-m em { display: block; height: 100%; border-radius: inherit; }
.ndt-m.p em { background: var(--lime); } .ndt-m.c em { background: var(--m-c); } .ndt-m.f em { background: var(--m-f); }
html[data-theme="dark"] .ndt-m.p em { background: var(--lime); }

/* Masa */
.ndm-list { display: flex; flex-direction: column; gap: 12px; }
.ndm { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); transition: border-color .2s, background .2s; }
.ndm.st-eaten { border-color: color-mix(in srgb, var(--ms-eaten) 45%, var(--border)); }
.ndm.st-substituted { border-color: color-mix(in srgb, var(--ms-sub) 45%, var(--border)); }
.ndm.st-skipped { background: color-mix(in srgb, var(--surface-alt) 60%, var(--surface)); }
.ndm.st-skipped .ndm-foods, .ndm.st-skipped .ndm-macros { opacity: .55; }
.ndm-head { display: flex; align-items: center; gap: 12px; }
.ndm-ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: var(--nut-tile); color: var(--nut-ink); }
.ndm-ico.sm { width: 38px; height: 38px; border-radius: 12px; }
.ndm-ico img { width: 100%; height: 100%; object-fit: cover; }
.ndm-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ndm-title small { font: 500 .66rem/1 var(--font-mono); color: var(--text-soft); }
.ndm-title strong { font: 750 1.05rem/1.2 var(--font-primary); color: var(--text); }
.ndm-kcal { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ndm-kcal b { font: 800 1.15rem/1 var(--font-primary); color: var(--text); }
.ndm-kcal small { font: 500 .58rem/1 var(--font-mono); color: var(--text-soft); }
.ndm-macros { display: flex; gap: 12px; margin: 0; font: 500 .72rem/1 var(--font-mono); color: var(--text-muted); }
.ndm-macros span { display: inline-flex; align-items: center; gap: 5px; }
.ndm-macros i { width: 6px; height: 6px; border-radius: 50%; }
.ndm-macros .p { background: var(--m-p); } .ndm-macros .c { background: var(--m-c); } .ndm-macros .f { background: var(--m-f); }
.ndm-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-alt); font-size: .82rem; line-height: 1.45; color: var(--text-muted); }
.ndm-foods { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.ndm-foods button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 42px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: 600 .9rem/1.25 var(--font-primary); text-align: left; cursor: pointer; }
.ndm-foods li:last-child button { border-bottom: 0; }
.ndm-foods small { font-weight: 500; color: var(--text-soft); }
.ndm-foods b { flex: none; font: 600 .78rem/1 var(--font-mono); color: var(--text-soft); }
.ndm-done { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; font-size: .82rem; line-height: 1.35; }
.ndm-done svg.lc { width: 18px; height: 18px; }
.ndm-done span { flex: 1; min-width: 0; }
.st-eaten .ndm-done { background: color-mix(in srgb, var(--ms-eaten) 12%, transparent); color: var(--text); }
.st-eaten .ndm-done svg { color: var(--ms-eaten); }
.st-substituted .ndm-done { background: color-mix(in srgb, var(--ms-sub) 12%, transparent); color: var(--text); }
.st-substituted .ndm-done svg { color: var(--ms-sub); }
.st-skipped .ndm-done { background: color-mix(in srgb, var(--ms-skip) 10%, transparent); color: var(--text-muted); }
.st-skipped .ndm-done svg { color: var(--ms-skip); }
.ndm-done button { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border: 0; border-radius: 8px; background: var(--surface); color: var(--text); font: 650 .74rem/1 var(--font-primary); cursor: pointer; }
.ndm-done button svg.lc { width: 14px; height: 14px; color: inherit; }
.ndm-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ndm-actions button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text-muted); font: 700 .8rem/1 var(--font-primary); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.ndm-actions button svg.lc { width: 17px; height: 17px; }
.ndm-actions .eaten.on { border-color: var(--ms-eaten); background: var(--ms-eaten); color: #fff; }
.ndm-actions .substituted.on { border-color: var(--ms-sub); background: var(--ms-sub); color: #fff; }
.ndm-actions .skipped.on { border-color: var(--ms-skip); background: color-mix(in srgb, var(--ms-skip) 12%, var(--surface)); color: var(--ms-skip); }
.ndm-actions button:active { transform: scale(.97); }

/* „Altceva” */

.nsx-head, .ncx-head { display: flex; align-items: flex-start; gap: 12px; }
.nsx-head > div, .ncx-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nsx-head h2, .ncx-head h2 { margin: 0; font: 800 1.35rem/1.15 var(--font-primary); color: var(--text); }
.nsx-head small { font-size: .78rem; color: var(--text-soft); }
.nsx-ico { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--nut-tile); color: var(--nut-ink); }
.nsx-x { flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: var(--surface-alt); color: var(--text); cursor: pointer; }
.nsx-x svg.lc { width: 18px; height: 18px; }
.nsx-f { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0; }
.nsx-f > span { font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft); }
.modal .nsx-f input, .modal .nsx-f textarea { width: 100%; margin: 0; padding: 13px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-alt); color: var(--text); font: 600 1rem/1.3 var(--font-primary); box-shadow: none; }
.modal .nsx-f textarea { resize: vertical; }
.modal .nsx-f input:focus, .modal .nsx-f textarea:focus { border-color: var(--primary); background: var(--surface); outline: 0; }
.nsx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nsx-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; }
.nsx-quick { display: flex; gap: 6px; margin-top: -6px; overflow-x: auto; scrollbar-width: none; }
.nsx-quick button { flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font: 600 .76rem/1 var(--font-mono); cursor: pointer; }
.nsx-more summary { cursor: pointer; font: 650 .84rem/1.2 var(--font-primary); color: var(--primary); list-style: none; }
.nsx-more summary::-webkit-details-marker { display: none; }
.nsx-hint { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .78rem; color: var(--text-soft); }
.nsx-hint svg.lc { width: 16px; height: 16px; }
.nsx-save { height: 54px; border: 0; border-radius: 16px; background: var(--cta); color: var(--cta-fg); font: 750 1rem/1 var(--font-primary); cursor: pointer; }

/* Jurnal */

.ncx { display: flex; flex-direction: column; gap: 12px; }
.ncx-month { display: flex; align-items: center; gap: 10px; text-align: center; }
.ncx-month > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ncx-month h3 { margin: 0; font: 750 1.05rem/1.2 var(--font-primary); color: var(--text); text-transform: capitalize; }
.ncx-month small { font-size: .74rem; color: var(--text-soft); }
.ncx-nav { flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); cursor: pointer; }
.ncx-nav svg.lc { width: 18px; height: 18px; }
.ncx-week, .ncx-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ncx-week span { font: 500 .6rem/1 var(--font-mono); text-align: center; color: var(--text-soft); }
.ncx-day { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 1px solid transparent; border-radius: 12px; background: var(--surface-alt); color: var(--text); font: inherit; cursor: pointer; }
.ncx-day.blank { background: transparent; }
.ncx-day b { font: 650 .84rem/1 var(--font-primary); }
.ncx-day i { width: 60%; height: 3px; border-radius: 99px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.ncx-day i::after { content: ""; display: block; width: var(--p); height: 100%; border-radius: inherit; background: currentColor; }
.ncx-day.good { background: color-mix(in srgb, var(--ms-eaten) 16%, var(--surface)); color: var(--ms-eaten); }
.ncx-day.missed { background: color-mix(in srgb, var(--st-over) 16%, var(--surface)); color: var(--st-over); }
.ncx-day.good b, .ncx-day.missed b { color: var(--text); }
.ncx-day.none { color: var(--text-soft); }
.ncx-day.future { opacity: .4; cursor: default; }
.ncx-day.future i { visibility: hidden; }
.ncx-day.today { border-color: var(--text); }
.ncx-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.ncx-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--text-muted); }
.ncx-legend i { width: 10px; height: 10px; border-radius: 3px; }
.ncx-legend .good i { background: var(--ms-eaten); } .ncx-legend .missed i { background: var(--st-over); } .ncx-legend .none i { background: var(--surface-alt); box-shadow: inset 0 0 0 1px var(--border-strong); }
.ncx-today { align-self: center; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--surface-alt); color: var(--text); font: 650 .8rem/1 var(--font-primary); cursor: pointer; }
.ncx-rows { display: flex; flex-direction: column; gap: 8px; }
.ncx-row { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.ncx-row-top, .ncx-row-mid { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ncx-row-top b { font: 700 .92rem/1 var(--font-primary); text-transform: capitalize; }
.ncx-chip { padding: 4px 8px; border-radius: 999px; font: 650 .66rem/1 var(--font-primary); font-style: normal; background: var(--surface-alt); color: var(--text-soft); }
.ncx-chip.good { background: color-mix(in srgb, var(--ms-eaten) 14%, transparent); color: var(--ms-eaten); }
.ncx-chip.missed { background: color-mix(in srgb, var(--st-over) 16%, transparent); color: var(--st-over); }
.ncx-chip.open { background: var(--primary-soft); color: var(--primary); }
.ncx-dots { display: flex; gap: 4px; }
.ncx-dot { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-alt); color: #fff; }
.ncx-dot svg.lc { width: 13px; height: 13px; stroke-width: 2.4; }
.ncx-dot.eaten { background: var(--ms-eaten); } .ncx-dot.substituted { background: var(--ms-sub); } .ncx-dot.skipped { background: color-mix(in srgb, var(--ms-skip) 18%, var(--surface)); color: var(--ms-skip); }
.ncx-dot.pending { box-shadow: inset 0 0 0 1.5px var(--border-strong); background: transparent; }
.ncx-kcal { font: 500 .74rem/1 var(--font-mono); color: var(--text-soft); text-align: right; }
.ncx-kcal b { font-weight: 650; color: var(--text); }
.ncx-subs { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 8px 0 0; list-style: none; border-top: 1px solid var(--border); }
.ncx-subs li { display: flex; align-items: flex-start; gap: 6px; font-size: .78rem; line-height: 1.35; color: var(--text-muted); }
.ncx-subs svg.lc { width: 14px; height: 14px; margin-top: 2px; color: var(--ms-sub); }

/* Panou client */
.ov-h { margin: 20px 0 10px; font: 750 1.05rem/1.2 var(--font-primary); letter-spacing: -.01em; color: var(--text); }
.ov-today { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 700px) { .ov-today { grid-template-columns: 1fr 1fr; } }
.ovt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: transform .15s; }
.ovt:active, .ovq:active, .ndt.compact:active { transform: scale(.985); }
.ovt-kicker { display: inline-flex; align-items: center; gap: 6px; font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft); }
.ovt-kicker svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ovt-time { display: flex; align-items: baseline; gap: 8px; }
.ovt-time b { font: 800 1.9rem/1 var(--font-primary); letter-spacing: -.03em; }
.ovt-time small { font-size: .8rem; color: var(--text-soft); }
.ovt strong { font: 700 1rem/1.25 var(--font-primary); }
.ovt > small { font-size: .82rem; color: var(--text-soft); }
.ovt-status { padding: 4px 9px; border-radius: 999px; font: 650 .7rem/1 var(--font-primary); background: var(--surface-alt); color: var(--text-muted); }
.ovt-status.accepted { background: color-mix(in srgb, var(--ms-eaten) 14%, transparent); color: var(--ms-eaten); }
.ovt-status.pending, .ovt-status.proposed { background: color-mix(in srgb, var(--st-over) 16%, transparent); color: var(--st-over); }
.ovt-status.declined { background: color-mix(in srgb, var(--ms-skip) 12%, transparent); color: var(--ms-skip); }
.ovt.today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.ovn { display: flex; flex-direction: column; gap: 8px; }
.ovn-next { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.ovn-next-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ovn-next-txt small { font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.ovn-next-txt b { font: 700 .95rem/1.2 var(--font-primary); color: var(--text); }
.ovn-ok { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--ms-eaten); color: #fff; font: 700 .82rem/1 var(--font-primary); cursor: pointer; }
.ovn-ok svg.lc { width: 16px; height: 16px; }
.ovn-all { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--ms-eaten) 12%, transparent); font-size: .84rem; color: var(--text); }
.ovn-all svg.lc { width: 18px; height: 18px; color: var(--ms-eaten); }
.ovq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ovq { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 112px; padding: 14px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: transform .15s, border-color .15s; }
.ovq:hover { border-color: var(--border-strong); }
.ovq-ico { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: auto; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.ovq-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ovq strong { margin-top: 10px; font: 700 .95rem/1.2 var(--font-primary); }
.ovq small { font-size: .76rem; color: var(--text-soft); }
.ov-empty { margin: 16px 0 0; padding: 18px; border: 1px dashed var(--border-strong); border-radius: 16px; font-size: .86rem; line-height: 1.45; color: var(--text-soft); text-align: center; }

/* Fișa antrenorului: jurnal pe zile */
.mj { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mj-day { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.mj-day.none { flex-direction: row; justify-content: space-between; align-items: center; padding: 10px 14px; background: transparent; border-style: dashed; }
.mj-date { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 700 .9rem/1.2 var(--font-primary); color: var(--text); }
.mj-date small { font: 500 .7rem/1 var(--font-mono); color: var(--text-soft); }
.mj-empty { font-size: .76rem; color: var(--text-soft); }
.mj-day > ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.mj-meal { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); }
.mj-meal > i { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); color: #fff; }
.mj-meal > i svg.lc { width: 13px; height: 13px; stroke-width: 2.4; }
.mj-meal.eaten > i { background: var(--ms-eaten); box-shadow: none; }
.mj-meal.substituted > i { background: var(--ms-sub); box-shadow: none; }
.mj-meal.skipped > i { background: color-mix(in srgb, var(--ms-skip) 16%, var(--surface)); box-shadow: none; color: var(--ms-skip); }
.mj-meal > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .84rem; color: var(--text); }
.mj-meal > span b { font-weight: 650; }
.mj-meal > span em { font-style: normal; font-size: .78rem; color: var(--text-muted); }
.mj-meal > small { flex: none; font: 500 .68rem/1 var(--font-mono); color: var(--text-soft); }
.nsx-in { display: flex; flex-direction: column; gap: 16px; }
.ndm-actions button span { white-space: nowrap; }
.mj-dots { display: flex; align-items: center; gap: 4px; }
.mj-dots em { margin-left: 6px; font-size: .76rem; font-style: normal; color: var(--text-soft); }
.mj-day > ul { margin-top: 2px; }

/* Clienții mei — rând compact cu programare, planuri și aderență */
.clx-filters { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
.clx-filters::-webkit-scrollbar { display: none; }
.clx-filters button { flex: none; }
.clx-main strong { display: inline-flex; align-items: center; gap: 6px; }
.clx-main small { display: flex; align-items: center; gap: 6px; min-width: 0; }
.clx-main small > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clx-next { display: inline-flex; align-items: center; gap: 4px; }
.clx-next svg.lc { width: 13px; height: 13px; }
.clx-next.today { color: var(--text); font-weight: 650; }
.clx-flag { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: color-mix(in srgb, var(--ms-sub) 16%, transparent); color: var(--ms-sub); font-style: normal; }
.clx-flag svg.lc { width: 12px; height: 12px; stroke-width: 2.2; }
.clx-glance { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.clx-adh { font: 650 .72rem/1 var(--font-mono); padding: 3px 6px; border-radius: 6px; }
.clx-adh.good { background: color-mix(in srgb, var(--st-ok) 14%, transparent); color: var(--st-ok); }
.clx-adh.mid { background: color-mix(in srgb, var(--st-over) 16%, transparent); color: var(--st-over); }
.clx-adh.low { background: color-mix(in srgb, var(--ms-skip) 12%, transparent); color: var(--ms-skip); }
.clx-plans { display: flex; gap: 4px; }
.clx-plan { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--border); color: var(--text-soft); opacity: .45; }
.clx-plan.on { opacity: 1; box-shadow: none; background: var(--primary-soft); color: var(--primary); }
.clx-plan svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   Antrenament în desfășurare (wr) + finalizare (wfx)
   ============================================================ */
html.wr-open, html.wr-open body { overflow: hidden; }
html.wr-open .tabbar { display: none !important; }
.wr { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; background: var(--bg); color: var(--text); }
.wr-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; border-bottom: 1px solid var(--border); background: var(--bg); }
.wr-min { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 10px 0 4px; border: 0; border-radius: 12px; background: transparent; color: var(--primary); font: 700 .9rem/1 var(--font-primary); cursor: pointer; }
.wr-min svg.lc { width: 22px; height: 22px; }
.wr-clock { display: inline-flex; align-items: center; gap: 6px; font: 600 1rem/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.wr-clock svg.lc { width: 16px; height: 16px; color: var(--text-soft); }
.wr-finish { height: 40px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--cta); color: var(--cta-fg); font: 750 .9rem/1 var(--font-primary); cursor: pointer; }
.wr-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px calc(110px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; max-width: 720px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.wr-hero { display: flex; flex-direction: column; gap: 8px; }
.wr-kicker { font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }
.wr-hero h1 { margin: 0; font: 800 1.7rem/1.1 var(--font-primary); letter-spacing: -.02em; }
.wr-progress { height: 8px; border-radius: 99px; background: var(--surface-alt); overflow: hidden; }
.wr-progress i { display: block; height: 100%; border-radius: inherit; background: var(--st-ok); transition: width .4s cubic-bezier(.2,.8,.2,1); }
.wr-hero small { font: 500 .74rem/1 var(--font-mono); color: var(--text-soft); }
.wr-plan-note { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-alt); font-size: .84rem; line-height: 1.45; color: var(--text-muted); }
.wr-ex { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); transition: border-color .2s; }
.wr-ex.next { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.wr-ex.done { opacity: .72; }
.wr-ex-head { display: flex; align-items: center; gap: 12px; }
.wr-ex-ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.wr-ex-ico svg.mi { width: 100%; height: 100%; }
.wr-ex-ico svg.mi.mi-line { width: 100%; height: 100%; }
.wr-ex-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wr-ex-title strong { font: 750 1rem/1.25 var(--font-primary); }
.wr-ex-title small { font: 500 .72rem/1.3 var(--font-mono); color: var(--text-soft); }
.wr-ex-count { flex: none; font: 650 .8rem/1 var(--font-mono); color: var(--text-soft); }
.wr-ex.done .wr-ex-count { color: var(--st-ok); }
.wr-ex-note { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-alt); font-size: .8rem; line-height: 1.4; color: var(--text-muted); }
.wr-sets { display: flex; flex-direction: column; gap: 6px; }
.wr-set { display: grid; grid-template-columns: 34px 1fr 1fr 48px; align-items: center; gap: 8px; }
.wr-set.head span { font: 500 .58rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); text-align: center; }
.wr-set > b { display: grid; place-items: center; height: 44px; border-radius: 12px; background: var(--surface-alt); font: 700 .9rem/1 var(--font-mono); color: var(--text-muted); }
.wr .wr-set input { width: 100%; height: 44px; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-alt); color: var(--text); font: 700 1.05rem/1 var(--font-primary); text-align: center; font-variant-numeric: tabular-nums; box-shadow: none; -moz-appearance: textfield; appearance: textfield; }
.wr .wr-set input::-webkit-outer-spin-button, .wr .wr-set input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wr .wr-set input:focus { border-color: var(--primary); background: var(--surface); outline: 0; }
.wr-check { display: grid; place-items: center; height: 44px; padding: 0; border: 1.5px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text-soft); cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .1s; }
.wr-check svg.lc { width: 22px; height: 22px; stroke-width: 2.4; }
.wr-check:active { transform: scale(.94); }
.wr-set.done > b { background: color-mix(in srgb, var(--st-ok) 16%, transparent); color: var(--st-ok); }
.wr-set.done input { background: transparent; border-color: transparent; color: var(--text-muted); }
.wr-set.done .wr-check { border-color: var(--st-ok); background: var(--st-ok); color: #fff; }
.wr-ss { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 26px; background: color-mix(in srgb, var(--cta) 18%, transparent); }
.wr-ss-tag { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; font: 650 .74rem/1 var(--font-primary); color: var(--text); }
.wr-ss-tag svg.lc { width: 14px; height: 14px; }
.wr-rest { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 910; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--primary); color: var(--primary-fg); box-shadow: var(--shadow-lg); }
html[data-theme="dark"] .wr-rest { background: var(--surface-alt); color: var(--text); }
.wr-rest[hidden] { display: none; }
.wr-rest span { font: 500 .64rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.wr-rest b { min-width: 52px; font: 750 1.4rem/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.wr-rest button { height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; font: 700 .82rem/1 var(--font-primary); cursor: pointer; }
.wr-rest button:last-child { background: var(--cta); color: var(--cta-fg); }

.wfx-ico { background: color-mix(in srgb, var(--st-ok) 14%, transparent) !important; color: var(--st-ok) !important; }
.wfx-effort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wfx-effort button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); cursor: pointer; }
.wfx-effort b { font: 750 .95rem/1 var(--font-primary); }
.wfx-effort small { font-size: .68rem; color: var(--text-soft); text-align: center; }
.wfx-effort button.on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--primary-soft); }
.wfx-scale { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.wfx-scale.rpe { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.wfx-scale button { height: 40px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: 650 .85rem/1 var(--font-mono); cursor: pointer; }
.wfx-scale button.on { border-color: var(--primary); background: var(--primary); color: var(--primary-fg); }

.wpc-btn.done { flex: 1; color: var(--st-ok); border-color: color-mix(in srgb, var(--st-ok) 40%, var(--border)); background: color-mix(in srgb, var(--st-ok) 10%, var(--surface)); cursor: default; }
.wpc-btn svg.lc { width: 18px; height: 18px; }
.wpc-who.live { background: color-mix(in srgb, var(--st-ok) 14%, transparent); color: var(--st-ok); }

.cdx-fb-sets { display: flex; flex-direction: column; margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.cdx-fb-sets li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: .8rem; }
.cdx-fb-sets li:last-child { border-bottom: 0; }
.cdx-fb-sets b { font-weight: 600; color: var(--text); }
.cdx-fb-sets span { flex: none; font: 500 .74rem/1.3 var(--font-mono); color: var(--text-soft); }
.cdx-fb-sets li.miss span { color: var(--ms-skip); }
html.wr-open .modal-backdrop { z-index: 960 !important; }
.wr-rest button { white-space: nowrap; }

/* ---------- Antrenament în focus: un exercițiu pe ecran ---------- */
.wr-progress-bar { flex: none; height: 4px; background: var(--surface-alt); }
.wr-progress-bar i { display: block; height: 100%; width: 0; background: var(--st-ok); border-radius: 0 4px 4px 0; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.wr-strip { flex: none; display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.wr-strip::-webkit-scrollbar { display: none; }
.wr-strip button { flex: none; display: inline-flex; align-items: center; gap: 7px; max-width: 160px; height: 36px; padding: 0 12px 0 5px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font: 650 .78rem/1 var(--font-primary); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.wr-strip button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-strip button i { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-alt); font: 700 .74rem/1 var(--font-mono); font-style: normal; color: var(--text-soft); }
.wr-strip button i svg.lc { width: 15px; height: 15px; stroke-width: 2.6; }
.wr-strip button.part i { background: color-mix(in srgb, var(--st-ok) 20%, transparent); color: var(--st-ok); }
.wr-strip button.done { color: var(--text-soft); }
.wr-strip button.done i { background: var(--st-ok); color: #fff; }
.wr-strip button.on { border-color: var(--text); background: var(--text); color: var(--bg); }
.wr-strip button.on i { background: color-mix(in srgb, var(--bg) 18%, transparent); color: var(--bg); }
.wr-strip button.on.done i { background: var(--st-ok); color: #fff; }
.wr .wr-body { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
.wr-stage { display: flex; flex-direction: column; gap: 12px; }
.wr-stage.in-right { animation: wrInR .38s cubic-bezier(.22, 1, .36, 1) both; }
.wr-stage.in-left { animation: wrInL .38s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes wrInR { from { opacity: 0; transform: translateX(28px); } }
@keyframes wrInL { from { opacity: 0; transform: translateX(-28px); } }
.wr-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); }
.wr-card.done { border-color: color-mix(in srgb, var(--st-ok) 45%, var(--border)); }
.wr-card-head { display: flex; align-items: center; gap: 12px; }
.wr-card-head .wr-ex-ico { width: 54px; height: 54px; border-radius: 16px; }
.wr-card-head .wr-ex-title strong { font-size: 1.15rem; line-height: 1.2; }
.wr-card-head .wr-ex-count { padding: 6px 9px; border-radius: 999px; background: var(--surface-alt); }
.wr-card.done .wr-ex-count { background: color-mix(in srgb, var(--st-ok) 16%, transparent); color: var(--st-ok); }
.wr-past { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px; background: var(--surface-alt); }
.wr-past-row { display: grid; grid-template-columns: 18px auto minmax(0, 1fr); align-items: center; gap: 8px; font-size: .78rem; color: var(--text-soft); }
.wr-past-row svg.lc { width: 16px; height: 16px; color: var(--text-soft); }
.wr-past-row b { justify-self: end; text-align: right; font: 650 .78rem/1.35 var(--font-mono); color: var(--text); }
.wr-past-row:has(+ .wr-trend) svg.lc, .wr-past-sets + .wr-past-row svg.lc { color: #D9A520; }
.wr-past-sets { display: flex; flex-wrap: wrap; gap: 5px; margin: -1px 0 4px 26px; }
.wr-past-sets span { padding: 5px 8px; border-radius: 8px; background: var(--surface); font: 650 .72rem/1 var(--font-mono); color: var(--text); white-space: nowrap; }
.wr-trend { display: flex; align-items: flex-end; gap: 6px; height: 74px; margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--border); }
.wr-trend > span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; min-width: 0; }
.wr-trend i { display: block; width: 100%; max-width: 26px; height: var(--h); border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--primary) 45%, transparent); transition: height .5s cubic-bezier(.2, .8, .2, 1); }
.wr-trend > span:nth-last-child(2) i { background: var(--primary); }
.wr-trend .now i { height: 100% !important; background: transparent; border: 1.5px dashed var(--border-strong); }
.wr-trend small { font: 500 .56rem/1 var(--font-mono); color: var(--text-soft); white-space: nowrap; }
.wr-first { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px; border-radius: 16px; background: var(--primary-soft); font-size: .82rem; line-height: 1.4; color: var(--text); }
.wr-first svg.lc { flex: none; width: 18px; height: 18px; color: var(--primary); }
.wr .wr-set { display: grid; grid-template-columns: 30px minmax(0, 1fr) 52px; grid-template-areas: "n f c" "n foot foot"; align-items: center; column-gap: 10px; row-gap: 4px; padding: 10px; border: 1.5px solid transparent; border-radius: 18px; background: var(--surface-alt); transition: border-color .2s, background .2s, opacity .2s; }
.wr .wr-set.current { border-color: var(--primary); background: var(--surface); box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 16%, transparent); }
.wr .wr-set.done { background: color-mix(in srgb, var(--st-ok) 8%, var(--surface)); }
.wr-set-n { grid-area: n; align-self: start; display: grid; place-items: center; width: 30px; height: 30px; margin-top: 18px; border-radius: 50%; background: var(--surface); font: 700 .82rem/1 var(--font-mono); color: var(--text-muted); }
.wr-set.current .wr-set-n { background: var(--primary); color: var(--primary-fg); }
.wr-set.done .wr-set-n { background: var(--st-ok); color: #fff; }
.wr-set-n svg.lc { width: 16px; height: 16px; stroke-width: 2.8; }
.wr-set-fields { grid-area: f; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }
.wr-set-fields label { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
.wr-set-fields small { font: 500 .56rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); padding-left: 4px; }
.wr-step { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; height: 46px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.wr-step button { height: 100%; padding: 0; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; display: grid; place-items: center; }
.wr-step button:active { background: var(--surface-alt); color: var(--text); }
.wr-step button svg.lc { width: 17px; height: 17px; stroke-width: 2.4; }
.wr .wr-step input { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font: 800 1.15rem/1 var(--font-primary); text-align: center; font-variant-numeric: tabular-nums; box-shadow: none; -moz-appearance: textfield; appearance: textfield; }
.wr .wr-step input:focus { outline: 0; background: var(--primary-soft); }
.wr .wr-step input.bump { animation: wrBump .25s ease; }
@keyframes wrBump { 50% { transform: scale(1.18); color: var(--primary); } }
.wr-set.done .wr-step { border-color: transparent; background: transparent; }
.wr-set.done .wr-step button { opacity: .35; }
.wr-set.done .wr-step input { color: var(--text-muted); }
.wr .wr-set .wr-check { grid-area: c; width: 52px; height: 52px; margin-top: 16px; border-radius: 16px; }
.wr .wr-set.current .wr-check { border-color: var(--primary); color: var(--primary); }
.wr-set.pop .wr-check { animation: wrPop .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes wrPop { 40% { transform: scale(1.18); } }
.wr-set-foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 0; padding-left: 4px; }
.wr-set-foot:empty { display: none; }
.wr-set-foot span { font: 500 .66rem/1.3 var(--font-mono); color: var(--text-soft); }
.wr-pr { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: #F3C969; color: #3A2A00; font: 750 .66rem/1 var(--font-primary); font-style: normal; animation: wrPop .5s cubic-bezier(.3, 1.6, .5, 1); }
.wr-pr svg.lc { width: 12px; height: 12px; stroke-width: 2.4; }
.wr-up-next { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; border: 1.5px dashed var(--border-strong); border-radius: 20px; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.wr-up-next span { flex: none; font: 500 .6rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }
.wr-up-next strong { flex: 1; min-width: 0; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-up-next.last { flex-direction: column; align-items: flex-start; cursor: default; }
.wr-up-next.last strong { white-space: normal; font-weight: 600; color: var(--text-muted); }
.wr-up-next svg.lc { width: 18px; height: 18px; color: var(--text-soft); }
.wr-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 905; display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.wr-nav button { height: 48px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); cursor: pointer; display: grid; place-items: center; }
.wr-nav button:disabled { opacity: .35; cursor: default; }
.wr-nav button svg.lc { width: 22px; height: 22px; }
.wr-nav > span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wr-nav > span b { font: 750 .9rem/1 var(--font-primary); }
.wr-nav > span small { font: 500 .66rem/1 var(--font-mono); color: var(--text-soft); }
.wr .wr-rest { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); gap: 10px; padding: 8px 8px 8px 8px; max-width: calc(100% - 24px); animation: wrRestIn .35s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes wrRestIn { from { opacity: 0; transform: translate(-50%, 16px); } }
.wr-rest-ring { position: relative; flex: none; width: 52px; height: 52px; display: grid; place-items: center; }
.wr-rest-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.wr-rest-ring circle { fill: none; stroke-width: 3.5; stroke: color-mix(in srgb, currentColor 22%, transparent); }
.wr-rest-ring #wr-rest-arc { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 0; transition: stroke-dashoffset .25s linear; }
.wr .wr-rest-ring b { position: relative; min-width: 0; font: 750 .8rem/1 var(--font-mono); }
.wr-rest-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-right: 4px; }
.wr .wr-rest-txt span { opacity: .75; }
.wr-rest-txt small { font: 650 .78rem/1.2 var(--font-primary); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-rest-txt small:empty { display: none; }
.wr-flash { position: absolute; left: 50%; top: calc(110px + env(safe-area-inset-top, 0px)); z-index: 920; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: .84rem; box-shadow: var(--shadow-lg); transform: translateX(-50%); animation: wrFlash 2.2s ease both; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-flash svg.lc { flex: none; width: 17px; height: 17px; color: #F3C969; }
@keyframes wrFlash { 0% { opacity: 0; transform: translate(-50%, -10px); } 12%, 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } }
/* Felicitări la final */
.wr-win { position: absolute; inset: 0; z-index: 940; display: grid; place-items: center; padding: 20px; overflow: hidden; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: wrFade .3s ease both; }
@keyframes wrFade { from { opacity: 0; } }
.wr-confetti { position: absolute; inset: 0; pointer-events: none; }
.wr-confetti i { position: absolute; top: -20px; left: var(--x); width: 9px; height: 15px; border-radius: 2px; background: var(--c); animation: wrConfetti var(--t) cubic-bezier(.25, .6, .4, 1) var(--d) both; }
.wr-confetti i:nth-child(3n) { width: 11px; height: 11px; border-radius: 50%; }
@keyframes wrConfetti { from { transform: translateY(0) rotate(0); opacity: 1; } to { transform: translateY(105vh) rotate(var(--r)); opacity: .9; } }
.wr-win-in { position: relative; width: min(420px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 20px 18px; border-radius: 30px; background: var(--surface); box-shadow: var(--shadow-lg); text-align: center; animation: wrWinIn .55s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes wrWinIn { from { opacity: 0; transform: scale(.86) translateY(20px); } }
.wr-win-badge { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #F7D774, #E3A92A); color: #4A3300; box-shadow: 0 10px 30px rgba(227, 169, 42, .45); animation: wrPop .7s .25s cubic-bezier(.3, 1.6, .5, 1) both; }
.wr-win-badge svg.lc { width: 38px; height: 38px; stroke-width: 2; }
.wr-win-in h2 { margin: 2px 0 0; font: 800 1.9rem/1.05 var(--font-primary); letter-spacing: -.03em; color: var(--text); }
.wr-win-in > p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--text-muted); }
.wr-win-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; margin-top: 6px; }
.wr-win-stats > div { display: flex; flex-direction: column; gap: 5px; padding: 12px 4px; border-radius: 16px; background: var(--surface-alt); }
.wr-win-stats strong { font: 800 1.2rem/1 var(--font-primary); font-variant-numeric: tabular-nums; color: var(--text); }
.wr-win-stats span { font-size: .66rem; color: var(--text-soft); }
.wr-win-stats .gold { background: #FBEFC8; }
.wr-win-stats .gold strong, .wr-win-stats .gold span { color: #6B4D00; }
.wr-win-diff { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 0 !important; padding: 6px 12px; border-radius: 999px; font: 700 .8rem/1 var(--font-primary) !important; }
.wr-win-diff svg.lc { width: 16px; height: 16px; }
.wr-win-diff.up { background: color-mix(in srgb, var(--st-ok) 14%, transparent); color: var(--st-ok) !important; }
.wr-win-diff.down { background: var(--surface-alt); color: var(--text-muted) !important; }
.wr-win-diff.down svg.lc { transform: scaleY(-1); }
.wr-win-prs { width: 100%; margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.wr-win-prs li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #FBEFC8; color: #4A3300; font-size: .84rem; text-align: left; }
.wr-win-prs li svg.lc { flex: none; width: 16px; height: 16px; }
.wr-win-prs li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-win-prs li b { font: 700 .78rem/1 var(--font-mono); }
.wr-win-level { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; margin-top: 4px; padding: 12px; border-radius: 16px; border: 1px dashed var(--border-strong); }
.wr-win-level span { display: inline-flex; align-items: center; gap: 6px; font: 750 .92rem/1 var(--font-primary); color: var(--text); }
.wr-win-level svg.lc { width: 18px; height: 18px; color: var(--primary); }
.wr-win-level small { font-size: .76rem; color: var(--text-soft); }
.wr-win-go { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 54px; margin-top: 8px; border: 0; border-radius: 16px; background: var(--cta); color: var(--cta-fg); font: 750 .95rem/1 var(--font-primary); cursor: pointer; }
.wr-win-go svg.lc { width: 18px; height: 18px; }
.wr-win-close { width: 100%; height: 46px; border: 0; border-radius: 14px; background: transparent; color: var(--text-muted); font: 650 .9rem/1 var(--font-primary); cursor: pointer; }
html[data-theme="dark"] .wr-win-stats .gold, html[data-theme="dark"] .wr-win-prs li { background: rgba(243, 201, 105, .16); color: #F3C969; }
html[data-theme="dark"] .wr-win-stats .gold strong, html[data-theme="dark"] .wr-win-stats .gold span { color: #F3C969; }
@media (prefers-reduced-motion: reduce) { .wr-confetti { display: none; } .wr-stage.in-right, .wr-stage.in-left, .wr-win-in, .wr-flash { animation: none; } }

/* ============================================================
   Disponibilitate — client (av) și calendarul antrenorului
   ============================================================ */
:root { --avail: #4F6F63; --avail-soft: rgba(79, 111, 99, .07); }
html[data-theme="dark"] { --avail: #B9D3C8; --avail-soft: rgba(185, 211, 200, .08); }

/* Butonul din calendarul clientului */
.av-cta { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 16px; padding: 14px; border: 1.5px dashed var(--border-strong); border-radius: 20px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, transform .15s; }
.av-cta:hover { border-color: var(--primary); }
.av-cta:active { transform: scale(.985); }
.av-cta-ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--primary); color: var(--primary-fg); }
.av-cta-ico svg.lc { width: 22px; height: 22px; }
.av-cta-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.av-cta-txt strong { font: 750 1rem/1.2 var(--font-primary); }
.av-cta-txt small { font-size: .8rem; line-height: 1.35; color: var(--text-soft); }
.av-cta-go { flex: none; display: inline-flex; align-items: center; gap: 2px; font: 700 .82rem/1 var(--font-primary); color: var(--primary); }
.av-cta-go svg.lc { width: 16px; height: 16px; }

/* Ecranul „Când poți veni?” */
.av { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; padding-bottom: 96px; }
.av-top { display: flex; align-items: center; }
.av-title { display: flex; flex-direction: column; gap: 6px; }
.av-title h1 { margin: 0; font: 800 clamp(1.7rem, 7vw, 2.2rem)/1.08 var(--font-primary); letter-spacing: -.025em; }
.av-title p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--text-soft); }
.av-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: var(--surface-alt); }
.av-seg button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border: 0; border-radius: 12px; background: transparent; color: var(--text-muted); font: 700 .86rem/1.1 var(--font-primary); cursor: pointer; }
.av-seg button small { font: 500 .66rem/1 var(--font-mono); color: var(--text-soft); }
.av-seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.av-days { display: flex; flex-direction: column; gap: 10px; }
.av-day { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); transition: border-color .15s; }
.av-day.has { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.av-day.past { padding: 10px 14px; background: transparent; border-style: dashed; opacity: .6; }
.av-day > header { display: flex; align-items: baseline; gap: 8px; }
.av-day > header strong { font: 750 .98rem/1.2 var(--font-primary); text-transform: capitalize; }
.av-day > header small { font: 500 .72rem/1 var(--font-mono); color: var(--text-soft); }
.av-day > header .av-st { margin-left: auto; }
.av-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 560px) { .av-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.av-chip { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 10px; border: 1.5px dashed var(--border-strong); border-radius: 14px; background: transparent; color: var(--text-muted); text-align: left; font: inherit; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.av-chip svg.lc { width: 18px; height: 18px; flex: none; }
.av-chip span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.av-chip b { font: 700 .84rem/1.1 var(--font-primary); }
.av-chip small { font: 500 .66rem/1 var(--font-mono); color: var(--text-soft); }
.av-chip.on { border-style: solid; border-color: var(--primary); background: var(--primary); color: var(--primary-fg); }
.av-chip.on small { color: inherit; opacity: .75; }
.av-chip.accepted { border-color: var(--st-ok); background: var(--st-ok); color: #fff; }
.av-chip.declined { border-color: color-mix(in srgb, var(--ms-skip) 45%, var(--border)); background: color-mix(in srgb, var(--ms-skip) 8%, transparent); color: var(--ms-skip); }
.av-chip:disabled { cursor: default; }
.av-custom { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--primary); color: var(--primary-fg); font: 650 .84rem/1 var(--font-mono); }
.av-custom.accepted { background: var(--st-ok); color: #fff; }
.av-custom.declined { background: color-mix(in srgb, var(--ms-skip) 10%, transparent); color: var(--ms-skip); }
.av-custom span { display: inline-flex; align-items: center; gap: 6px; }
.av-custom svg.lc { width: 15px; height: 15px; }
.av-custom button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: color-mix(in srgb, currentColor 15%, transparent); color: inherit; cursor: pointer; }
.av-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--surface-alt); color: var(--text); font: 650 .78rem/1 var(--font-primary); cursor: pointer; }
.av-add svg.lc { width: 15px; height: 15px; }
.av-add-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.av-add-form label { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.av-add-form span { font: 500 .6rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.av .av-add-form input { width: 100%; height: 44px; margin: 0; padding: 0 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-alt); color: var(--text); font: 650 .95rem/1 var(--font-mono); }
.av-add-ok { height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--primary); color: var(--primary-fg); font: 700 .84rem/1 var(--font-primary); cursor: pointer; }
.av-st { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: var(--surface-alt); color: var(--text-soft); font: 650 .68rem/1 var(--font-primary); font-style: normal; }
.av-st svg.lc { width: 12px; height: 12px; }
.av-st.ok { background: color-mix(in srgb, var(--st-ok) 14%, transparent); color: var(--st-ok); }
.av-st.no { background: color-mix(in srgb, var(--ms-skip) 12%, transparent); color: var(--ms-skip); }
.av-replies { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.av-replies p { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .8rem; line-height: 1.35; color: var(--text-muted); }
.av-replies p span { min-width: 0; }
.av-bar { position: sticky; bottom: 0; z-index: 20; max-width: 720px; margin: 0 auto; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--bg) 70%, transparent); }
.av-bar .nsx-save { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.av-bar .nsx-save svg.lc { width: 18px; height: 18px; }
.av-bar .nsx-save:disabled { opacity: .55; cursor: default; }
@media (max-width: 820px) { body:has(#view-availability.active) .tabbar { display: none !important; } }

/* Calendarul antrenorului: intervalele în care clientul poate veni */
.cal-legend span.avail::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--avail); border-radius: 3px; }
.cal-day em i.avail { background: transparent; box-shadow: inset 0 0 0 1.5px var(--avail); }
.cal-grid-avail {
  position: absolute; z-index: 0; left: 3px; right: 3px; top: calc(var(--start) / 60 * 56px + 2px);
  height: calc(var(--mins) / 60 * 56px - 4px); min-height: 34px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 6px 4px; overflow: hidden;
  border: 1.5px dashed var(--avail); border-radius: 12px; background: var(--avail-soft); color: var(--avail);
  font: inherit; text-align: center; cursor: pointer;
}
.cal-grid-avail strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .76rem/1.1 var(--font-primary); }
.cal-grid-avail small { font: 500 .6rem/1 var(--font-mono); opacity: .8; }
.cal-session.avail { border: 1.5px dashed var(--avail) !important; border-left-width: 1.5px !important; background: var(--avail-soft) !important; box-shadow: none !important; }
.cal-session.avail .cal-mode { background: transparent; box-shadow: inset 0 0 0 1px var(--avail); color: var(--avail); }
.cal-resp.avail { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }

/* Fereastra antrenorului pentru un interval */
.avs .nsx-head .avatar { flex: none; }
.avs-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-alt); font-size: .86rem; line-height: 1.45; color: var(--text-muted); }
.avs-note svg.lc { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.avs-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.avs-actions .nsx-save { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.avs-actions .nsx-save svg.lc, .avs-decline .nsx-save svg.lc { width: 18px; height: 18px; }
.avs-no { height: 50px; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--surface); color: var(--text); font: 700 .95rem/1 var(--font-primary); cursor: pointer; }
.avs-no[hidden], .avs-decline[hidden] { display: none; }
.avs-decline { display: flex; flex-direction: column; gap: 10px; }
.avs-decline .nsx-save { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.avs-others { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.avs-others .nsx-kicker { width: 100%; }
.avs-others button { height: 34px; padding: 0 12px; border: 1.5px dashed var(--avail); border-radius: 999px; background: var(--avail-soft); color: var(--text); font: 600 .78rem/1 var(--font-mono); cursor: pointer; }
.cal-avail-count { font-weight: 650; color: var(--text); }
/* Disponibilitate pe ore: zile care se deschid, câte o oră pe căsuță */
.av-day { gap: 0; padding: 0; overflow: hidden; }
.av-day.past { padding: 0; }
.av-day-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 12px 14px; border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.av-day-head:disabled { cursor: default; }
.av-day-head > svg.lc { flex: none; width: 18px; height: 18px; color: var(--text-soft); transition: transform .2s; }
.av-day.open .av-day-head > svg.lc { transform: rotate(90deg); }
.av-day-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.av-day-name strong { font: 750 .98rem/1.2 var(--font-primary); text-transform: capitalize; }
.av-day-name small { font: 500 .72rem/1 var(--font-mono); color: var(--text-soft); }
.av-day-sum { flex: none; max-width: 52%; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 .74rem/1 var(--font-mono); color: var(--text-soft); }
.av-day-sum.on { color: var(--text); }
.av-day-sum b { flex: none; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--primary); color: var(--primary-fg); font: 700 .7rem/1 var(--font-mono); }
.av-day.open { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.av-hours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 2px 12px 14px; }
@media (min-width: 560px) { .av-hours { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.av-hour { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; height: 46px; padding: 0 6px; border: 1.5px dashed var(--border-strong); border-radius: 12px; background: transparent; color: var(--text-muted); font: 600 .82rem/1 var(--font-mono); font-variant-numeric: tabular-nums; text-align: center; cursor: pointer; transition: background .12s, border-color .12s, color .12s, transform .1s; }
.av-hour i { font-style: normal; opacity: .55; }
.av-hour:active { transform: scale(.96); }
.av-hour.on { border-style: solid; border-color: var(--primary); background: var(--primary); color: var(--primary-fg); }
.av-hour.on.accepted { border-color: var(--st-ok); background: var(--st-ok); color: #fff; }
.av-hour.on.declined { border-color: color-mix(in srgb, var(--ms-skip) 45%, var(--border)); background: color-mix(in srgb, var(--ms-skip) 8%, transparent); color: var(--ms-skip); }
.av-hour em { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: inherit; box-shadow: 0 0 0 1.5px currentColor; font-style: normal; }
.av-hour em svg.lc { width: 11px; height: 11px; stroke-width: 2.6; }
.av-hour:disabled:not(.on) { opacity: .35; cursor: default; text-decoration: line-through; }
.av-hour:disabled.on { cursor: default; }
.av-day .av-custom { margin: 0 12px 10px; }
.av-day .av-replies { margin: 0 14px; padding: 10px 0 12px; }
.av-hour em { top: 50%; right: 5px; transform: translateY(-50%); width: 16px; height: 16px; box-shadow: none; background: color-mix(in srgb, currentColor 22%, transparent); }
.av-hour.on.accepted, .av-hour.on.declined { padding-right: 22px; }
.av-hour.on.accepted, .av-hour.on.declined { padding-right: 6px; }
.av-replies .av-st { flex: none; white-space: nowrap; }

/* ============================================================
   Setări calendar (cs), programare client (bk), cereri Pending
   ============================================================ */
/* Butonul din antet, același pătrat ca notificările */
.cal-add.cal-settings-btn { position: relative; width: 46px; padding: 0; justify-content: center; background: var(--surface); color: var(--primary); box-shadow: inset 0 0 0 1px var(--border-strong); }
.cal-add.cal-settings-btn svg.lc { width: 20px; height: 20px; stroke-width: 1.9; }
.cal-add.cal-settings-btn.on::after { content: ""; position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--st-ok); box-shadow: 0 0 0 2px var(--surface); }
.cal-head-actions { gap: 8px; }

/* Ecranul de setări */
.cs-head h1 { margin: 0; font: 800 clamp(1.8rem, 7.6vw, 2.4rem)/1.05 var(--font-primary); letter-spacing: -.025em; }
.cs-head p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--text-soft); }
.cs-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 22px; padding: 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); cursor: pointer; }
.cs-card.slim { margin: 0; padding: 12px 14px; border-radius: 14px; }
.cs-card.cs-main { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.cs-card-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-card-txt strong { font: 750 1rem/1.2 var(--font-primary); color: var(--text); }
.cs-card-txt small { font-size: .8rem; line-height: 1.35; color: var(--text-soft); }
.cs .wx-switch { margin: 0; flex: none; }
.cs-sub { margin-top: 16px !important; }
.cs-week { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); overflow: hidden; }
.cs-day { display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 10px; padding: 10px 12px; }
.cs-day + .cs-day { border-top: 1px solid var(--border); }
.cs-day-name { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; }
.cs-day-name b { font: 700 .9rem/1 var(--font-primary); color: var(--text-soft); }
.cs-day.on .cs-day-name b { color: var(--text); }
.cs-ivs { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cs-iv { display: flex; align-items: center; gap: 6px; }
.cs-iv i { font-style: normal; color: var(--text-soft); }
.cs .cs-iv input, .cs .cs-ex-dates input { flex: 1; min-width: 0; height: 40px; margin: 0; padding: 0 8px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-alt); color: var(--text); font: 650 .9rem/1 var(--font-mono); text-align: center; box-shadow: none; }
.cs-x { flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-soft); cursor: pointer; }
.cs-x:hover { background: var(--surface-alt); color: var(--text); }
.cs-x.add { color: var(--primary); }
.cs-x svg.lc { width: 17px; height: 17px; }
.cs-off { font: 500 .8rem/1 var(--font-mono); color: var(--text-soft); }
.cs-chips button { min-width: 64px; }
.cs-seg button { gap: 4px; padding: 12px 8px; }
.cs-seg button svg.lc { width: 20px; height: 20px; margin-bottom: 2px; }
.cs-seg button span { font: 750 .9rem/1 var(--font-primary); }
.cs-seg button small { font: 500 .68rem/1.25 var(--font-primary); text-align: center; }
.cs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px 12px 10px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.cs-row > span { font: 600 .88rem/1.3 var(--font-primary); color: var(--text); }
.cs-step { flex: none; gap: 6px; height: 40px; }
.cs-step span { min-width: 96px; display: grid; place-items: center; text-align: center; }
.cs-step span b { font: 750 1.1rem/1 var(--font-primary); }
.cs-step span em { font: 600 .76rem/1 var(--font-primary); font-style: normal; color: var(--text-soft); }
.cs-step button { width: 36px; height: 36px; background: var(--surface-alt); box-shadow: none; }
.cs-exs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cs-ex { display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 10px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.cs-ex-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--st-over) 14%, transparent); color: var(--st-over); }
.cs-ex-ico svg.lc { width: 19px; height: 19px; }
.cs-ex-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cs-ex-txt b { font: 700 .9rem/1.2 var(--font-primary); }
.cs-ex-txt small { font: 500 .74rem/1.2 var(--font-mono); color: var(--text-soft); }
.cs-empty { margin: 0; padding: 14px; border: 1px dashed var(--border-strong); border-radius: 14px; font-size: .84rem; line-height: 1.4; color: var(--text-soft); }
.cs-ex-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--primary); border-radius: 18px; background: var(--surface); }
.cs-ex-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cs-ex-dates label { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.cs-ex-dates span { font: 500 .6rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.cs-ex-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.cs-ex-btns .avs-no, .cs-ex-btns .nsx-save { height: 46px; }
.cs-preview { padding: 14px; border: 1.5px dashed var(--border-strong); border-radius: 18px; background: var(--surface); }
.cs-preview b { display: block; margin-bottom: 10px; font: 700 .9rem/1.2 var(--font-primary); text-transform: capitalize; }
.cs-preview > div { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-preview span { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font: 650 .8rem/1 var(--font-mono); }
.cs-preview span small { font: 500 .58rem/1 var(--font-primary); opacity: .8; }
.cs-preview p { margin: 0; font-size: .84rem; line-height: 1.4; color: var(--text-soft); }
@media (max-width: 380px) { .cs-day { grid-template-columns: 1fr; } }
@media (max-width: 820px) { body:has(#view-calendar-settings.active) .tabbar, body:has(#view-booking.active) .tabbar { display: none !important; } }

/* Cereri Pending și zile libere în calendarul antrenorului */
.cal-session.request { border: 1.5px dashed var(--st-over) !important; border-left-width: 4px !important; background: color-mix(in srgb, var(--st-over) 7%, var(--surface)) !important; }
.cal-resp.request { background: color-mix(in srgb, var(--st-over) 16%, transparent); color: var(--st-over); }
.cal-grid-session.request { background: var(--surface) !important; color: var(--st-over) !important; box-shadow: inset 0 0 0 1.5px var(--st-over) !important; }
.cal-mark.request { background: var(--st-over); color: #fff; }
.cal-grid-day.off b, .cal-grid-day.off span { color: var(--text-soft); text-decoration: line-through; }
.cal-off { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--st-over) 12%, transparent); font-size: .82rem; color: var(--text); }
.cal-off svg.lc { width: 16px; height: 16px; color: var(--st-over); }
.bkr-warn { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--st-over) 12%, transparent); font-size: .82rem; line-height: 1.4; color: var(--text); }
.bkr-warn svg.lc { width: 16px; height: 16px; margin-top: 1px; color: var(--st-over); flex: none; }
.bkr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Programare client */
.bk-cta .av-cta-ico { background: var(--cta); color: var(--cta-fg); }
.bk-cta { border-style: solid; border-color: var(--primary); }
.bk-days { display: flex; gap: 6px; margin: 0 -16px; padding: 2px 16px 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.bk-days::-webkit-scrollbar { display: none; }
.bk-day { flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; scroll-snap-align: center; }
.bk-day span { font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); }
.bk-day b { font: 800 1.25rem/1 var(--font-primary); }
.bk-day small { font: 500 .6rem/1 var(--font-mono); color: var(--st-ok); }
.bk-day:disabled { opacity: .4; cursor: default; }
.bk-day:disabled small { color: var(--text-soft); }
.bk-day.on { border-color: var(--primary); background: var(--primary); color: var(--primary-fg); }
.bk-day.on span, .bk-day.on small { color: inherit; opacity: .8; }
.av-day-head.static { cursor: default; }
.bk-hour { flex-direction: column; height: auto; min-height: 46px; padding: 6px; gap: 2px; }
.bk-t { display: flex; align-items: center; gap: 4px; }
.bk-t i { font-style: normal; opacity: .55; }
.bk-hour small { font: 600 .6rem/1 var(--font-primary); color: var(--st-ok); }
.bk-hour.on small { color: inherit; opacity: .85; }
.bk-none { margin: 0; padding: 4px 14px 16px; font-size: .86rem; color: var(--text-soft); }
.bk-day.is-full small, .bk-day.is-week small { color: var(--st-over); }
.bk-day.is-closed, .bk-day.is-past, .bk-day.is-off { opacity: .45; }
.bk-day.on.is-closed, .bk-day.on.is-past, .bk-day.on.is-off { opacity: 1; }
.bk-left { margin-left: auto; align-self: center; font: 600 .74rem/1 var(--font-primary); font-style: normal; color: var(--st-ok); white-space: nowrap; }
.bk-hour.full { opacity: .45; cursor: default; }
.bk-hour.full small { color: var(--text-soft); }
.bk-hour.full .bk-t { text-decoration: line-through; }
.bk-rules { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bk-rules li { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--text-soft); }
.bk-rules svg.lc { width: 15px; height: 15px; flex: none; }
.cs-day { grid-template-columns: 1fr; gap: 8px; padding: 12px 14px; }
.cs-day:not(.on) { grid-template-columns: auto 1fr; }
.cs-day:not(.on) .cs-ivs { align-items: flex-end; }
.cs .cs-iv input { min-width: 104px; font-size: .95rem; }
.cs-bar { grid-template-columns: 1fr !important; }
@media (min-width: 560px) { .cs-day.on { grid-template-columns: 150px 1fr; } }
.bk-limit { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--st-over) 12%, transparent); font-size: .82rem; line-height: 1.4; color: var(--text); }
.bk-limit svg.lc { width: 16px; height: 16px; margin-top: 1px; flex: none; color: var(--st-over); }

/* ============================================================
   Setări calendar v2 (cs2) — carduri, ore simetrice, alegere oră
   ============================================================ */
.cs2 { display: flex; flex-direction: column; gap: 14px; overflow-x: hidden; }
.cs2 .wpe-top { margin-bottom: 4px; }
.cs2-title { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.cs2-title h1 { margin: 0; font: 800 clamp(1.9rem, 8vw, 2.4rem)/1.05 var(--font-primary); letter-spacing: -.025em; color: var(--text); }
.cs2-title p { margin: 0; max-width: 46ch; font-size: .9rem; line-height: 1.45; color: var(--text-soft); }
.cs2-ico { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--primary-soft); color: var(--primary); }
.cs2-ico svg.lc { width: 18px; height: 18px; }
.cs2-ico.big { width: 44px; height: 44px; border-radius: 14px; }
.cs2-ico.big svg.lc { width: 22px; height: 22px; }

.cs2-hero { display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px; border: 1.5px solid var(--border-strong); border-radius: 22px; background: var(--surface); cursor: pointer; transition: border-color .2s, background .2s; }
.cs2-hero.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.cs2-hero.on .cs2-ico { background: var(--primary); color: var(--primary-fg); }
.cs2-hero-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cs2-hero-txt strong { font: 750 1.02rem/1.2 var(--font-primary); color: var(--text); }
.cs2-hero-txt small { font-size: .8rem; line-height: 1.35; color: var(--text-soft); }
.cs2 .wx-switch { flex: none; margin: 0; }

.cs2-sec { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }
.cs2-sec > header { display: flex; align-items: center; gap: 12px; }
.cs2-sec > header > span:last-of-type { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cs2-sec > header strong { font: 750 1rem/1.2 var(--font-primary); color: var(--text); }
.cs2-sec > header small { font-size: .78rem; line-height: 1.3; color: var(--text-soft); text-transform: none; }
.cs2-label { margin: 4px 0 -4px; font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft); }

/* Zilele: un rând compact fiecare, se deschide la tap */
.cs2-week { display: flex; flex-direction: column; margin: 0 -4px; }
.cs2-day { border-radius: 16px; transition: background .15s; }
.cs2-day + .cs2-day { margin-top: 2px; }
.cs2-day.open { background: var(--surface-alt); }
.cs2-day-head { display: grid; grid-template-columns: 112px 1fr 20px; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 12px; border: 0; border-radius: 16px; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.cs2-day-head:hover { background: var(--surface-alt); }
.cs2-day-name { display: inline-flex; align-items: center; gap: 10px; font: 700 .92rem/1 var(--font-primary); }
.cs2-day-name i { width: 8px; height: 8px; border-radius: 50%; background: var(--st-ok); }
.cs2-day.off .cs2-day-name { color: var(--text-soft); }
.cs2-day.off .cs2-day-name i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.cs2-day-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font: 500 .8rem/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.cs2-day.off .cs2-day-sum { color: var(--text-soft); }
.cs2-day-head > svg.lc { width: 18px; height: 18px; color: var(--text-soft); transition: transform .2s; }
.cs2-day.open .cs2-day-head > svg.lc { transform: rotate(180deg); }
.cs2-day-body { display: flex; flex-direction: column; gap: 10px; padding: 2px 12px 14px; }

.cs2-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; min-height: 44px; padding: 0 4px; font: 600 .88rem/1.2 var(--font-primary); color: var(--text); cursor: pointer; }

/* Intervalul: două căsuțe egale, ora centrată */
.cs2-range { display: grid; grid-template-columns: 1fr 24px 1fr 40px; align-items: center; gap: 8px; }
.cs2-range.dates, .cs2-ex-form .cs2-range { grid-template-columns: 1fr 24px 1fr; }
.cs2-time { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; height: 58px; margin: 0; padding: 0 6px; border: 1.5px solid var(--border-strong); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; text-align: center; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.cs2-time:hover { border-color: var(--primary); }
.cs2-time:focus-visible { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.cs2-time small { font: 500 .56rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft); }
.cs2-time b { font: 700 1.15rem/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.cs2 .cs2-time input { width: 100%; height: 24px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); font: 650 .9rem/1 var(--font-mono); text-align: center; box-shadow: none; }
.cs2-time input::-webkit-calendar-picker-indicator { opacity: .5; margin: 0; }
.cs2-arrow { display: grid; place-items: center; color: var(--text-soft); }
.cs2-arrow svg.lc { width: 16px; height: 16px; }
.cs2-del { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--text-soft); cursor: pointer; }
.cs2-del:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.cs2-del:disabled { opacity: .25; cursor: default; }
.cs2-del svg.lc { width: 17px; height: 17px; }
.cs2-day-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cs2-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 10px; border: 1.5px dashed var(--border-strong); border-radius: 12px; background: transparent; color: var(--text); font: 650 .8rem/1 var(--font-primary); cursor: pointer; }
.cs2-ghost svg.lc { width: 15px; height: 15px; }
.cs2-ghost:hover { border-color: var(--primary); color: var(--primary); }
.cs2-ghost.wide { width: 100%; height: 48px; }

/* Opțiuni: grile egale */
.cs2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cs2-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs2-grid button { height: 44px; padding: 0 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text-muted); font: 650 .84rem/1 var(--font-primary); cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.cs2-grid button.on { border-color: var(--primary); background: var(--primary); color: var(--primary-fg); }
.cs2-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cs2-pair > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 96px; padding: 12px 8px; border: 1.5px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); font: inherit; text-align: center; cursor: pointer; }
.cs2-pair > button svg.lc { width: 22px; height: 22px; margin-bottom: 2px; color: var(--text-soft); }
.cs2-pair > button b { font: 750 .92rem/1.1 var(--font-primary); }
.cs2-pair > button small { font-size: .7rem; line-height: 1.3; color: var(--text-soft); }
.cs2-pair > button.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); box-shadow: inset 0 0 0 1px var(--primary); }
.cs2-pair > button.on svg.lc { color: var(--primary); }
.cs2-pair.actions > button { min-height: 48px; }

.cs2-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 0 0 4px; }
.cs2-row + .cs2-row { border-top: 1px solid var(--border); }
.cs2-row > span { font: 600 .88rem/1.3 var(--font-primary); color: var(--text); }
.cs2-step { flex: none; display: grid; grid-template-columns: 40px 104px 40px; align-items: center; height: 44px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-alt); overflow: hidden; }
.cs2-step button { height: 100%; border: 0; background: transparent; color: var(--text); font: 600 1.15rem/1 var(--font-primary); cursor: pointer; }
.cs2-step button:active { background: var(--border); }
.cs2-step output { display: grid; place-items: center; height: 100%; border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--surface); }
.cs2-step output b { font: 750 1.1rem/1 var(--font-primary); }
.cs2-step output em { font: 600 .74rem/1 var(--font-primary); font-style: normal; color: var(--text-soft); }

.cs2-exs { display: flex; flex-direction: column; gap: 8px; }
.cs2-ex { display: flex; align-items: center; gap: 12px; padding: 8px 6px 8px 8px; border-radius: 14px; background: var(--surface-alt); }
.cs2-ex-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--st-over) 16%, transparent); color: var(--st-over); }
.cs2-ex-ico svg.lc { width: 19px; height: 19px; }
.cs2-ex-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cs2-ex-txt b { font: 700 .9rem/1.2 var(--font-primary); }
.cs2-ex-txt small { font: 500 .72rem/1.2 var(--font-mono); color: var(--text-soft); }
.cs2-ex-form { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1.5px solid var(--primary); border-radius: 18px; }
.cs2-btn { height: 48px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); color: var(--text); font: 700 .9rem/1 var(--font-primary); cursor: pointer; }
.cs2-btn.primary { border: 0; background: var(--cta); color: var(--cta-fg); }

.cs2-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cs2-preview span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 50px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.cs2-preview b { font: 700 .86rem/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.cs2-preview small { font: 500 .58rem/1 var(--font-primary); opacity: .8; }
.cs2-preview p { grid-column: 1 / -1; margin: 0; font-size: .84rem; line-height: 1.4; color: var(--text-soft); }

/* Fereastra de alegere a orei */
.tpk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-height: min(52vh, 420px); overflow-y: auto; padding: 2px; }
.tpk-grid button { height: 46px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: 650 .95rem/1 var(--font-mono); font-variant-numeric: tabular-nums; cursor: pointer; }
.tpk-grid button.on { border-color: var(--primary); background: var(--primary); color: var(--primary-fg); }
.tpk-grid button:disabled { opacity: .3; cursor: default; }
@media (max-width: 360px) { .cs2-day-head { grid-template-columns: 96px 1fr 18px; } .cs2-step { grid-template-columns: 36px 88px 36px; } }
.cs2-day-head { min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
.cs2-day-sum { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: normal; overflow: visible; line-height: 1.1; }
.cs2-range.dates { grid-template-columns: 1fr 1fr; }
.cs2 .cs2-range.dates .cs2-time input { font-size: .8rem; }
.cs2-range.dates .cs2-time input::-webkit-calendar-picker-indicator { width: 12px; height: 12px; }
.cs2-step { grid-template-columns: 38px 84px 38px; }
.cs2-row > span { flex: 1; min-width: 0; }

/* Swipe ca să ștergi: zona roșie crește cu degetul, rândul se strânge lin */
.cal-swipe { --p: 0; transition: height .3s cubic-bezier(.4,0,.2,1), margin .3s cubic-bezier(.4,0,.2,1), opacity .3s; background: color-mix(in srgb, var(--danger) calc(var(--p) * 100%), transparent); }
.cal-swipe .cal-session { will-change: transform; }
.cal-swipe-del { opacity: 1 !important; width: 100%; inset: 0; justify-content: center; align-items: flex-end; padding-right: 26px; background: transparent; border-radius: 16px; transition: none; }
.cal-swipe-del svg, .cal-swipe-del span { opacity: var(--p); transform: scale(calc(.6 + var(--p) * .4)); transition: transform .2s cubic-bezier(.22,1,.36,1); }
.cal-swipe.armed .cal-swipe-del svg { transform: scale(1.18); }
.cal-swipe.armed { background: var(--danger); }
.cal-swipe.removing { opacity: 1; transform: none; overflow: hidden; }
.cal-list .cal-swipe.removing { margin-bottom: calc(-1 * var(--gap, 0px)); }
@media (prefers-reduced-motion: reduce) { .cal-swipe, .cal-swipe .cal-session { transition: none !important; } }
.cal-list { --gap: 8px; }
.cal-swipe { background: transparent; }
.cal-swipe::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--danger); opacity: var(--p); transition: opacity .2s; }
.cal-swipe.armed::before { opacity: 1; filter: saturate(1.2); }
.cal-swipe-del { z-index: 0; }
.cal-swipe { --rev: 0px; }
.cal-swipe::before { left: auto; right: 0; width: calc(var(--rev) + 18px); opacity: 1; transition: width .42s cubic-bezier(.22,1,.36,1); }
.cal-swipe:not(.open):not(.armed):not(.removing)::before { opacity: var(--p); }
.cal-swipe.removing::before { transition: width .3s cubic-bezier(.4,0,.2,1); }
.cal-swipe-del { left: auto; width: max(96px, var(--rev)); padding-right: 0; align-items: center; }
/* Ținta din ziua respectivă, când era alta decât cea de acum */
.nch-own { position: absolute; left: 50%; z-index: 2; width: min(22px, 86%); height: 0; transform: translateX(-50%); border-top: 2px dashed color-mix(in srgb, var(--text) 55%, transparent); pointer-events: none; }
.nch-change { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-alt); font-size: .8rem; line-height: 1.4; color: var(--text-muted); }
.nch-change svg.lc { width: 15px; height: 15px; margin-top: 1px; flex: none; }

/* ============================================================
   Profil: prezentare, prețuri, contact, cont (ps) — stilul cs2
   ============================================================ */
#view-settings .card.ps { display: flex; flex-direction: column; gap: 12px; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
#view-settings .card.ps > .card-head { display: none; }
.ps-intro { margin: 0 2px; font-size: .9rem; line-height: 1.45; color: var(--text-soft); }
.ps-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }
.ps-head { display: flex; align-items: center; gap: 12px; }
.ps-head > span:last-of-type { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ps-head strong { font: 750 1rem/1.2 var(--font-primary); color: var(--text); }
.ps-head small { font-size: .78rem; line-height: 1.3; color: var(--text-soft); }
.ps-field { display: flex; flex-direction: column; gap: 7px; margin: 0; min-width: 0; }
.ps-field-label { font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft); }
.ps-field-label small { text-transform: none; letter-spacing: 0; font-family: var(--font-primary); font-size: .72rem; }
.ps-input { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface-alt); transition: border-color .15s, background .15s, box-shadow .15s; box-sizing: border-box; }
.ps-input:focus-within { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-soft); }
.ps-input i { flex: none; display: grid; place-items: center; color: var(--text-soft); font-style: normal; }
.ps-input i svg.lc { width: 18px; height: 18px; }
#view-settings .ps-input input { flex: 1; min-width: 0; width: 100%; height: 48px; margin: 0; padding: 0; border: 0 !important; border-radius: 0; background: transparent !important; color: var(--text); font: 600 .98rem/1.2 var(--font-primary); box-shadow: none !important; outline: 0; }
.ps-input em { flex: none; font: 500 .8rem/1 var(--font-primary); font-style: normal; color: var(--text-soft); white-space: nowrap; }
.ps-input em b { font: 650 .8rem/1 var(--font-mono); color: var(--text-muted); }
.ps-input.locked { background: transparent; border-style: dashed; }
.ps-input.locked input { color: var(--text-soft) !important; }
#view-settings .ps-field textarea, #view-settings .ps-pkg .pkg-desc, #view-settings .ps-pkg .pkg-name { width: 100%; margin: 0; padding: 14px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface-alt); color: var(--text); font: 500 .95rem/1.5 var(--font-primary); box-shadow: none; resize: vertical; box-sizing: border-box; }
#view-settings .ps-field textarea:focus, #view-settings .ps-pkg input:focus { border-color: var(--primary); background: var(--surface); outline: 0; }
.ps-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ps-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
#view-settings .ps-chips .chip-pick, #view-settings .cs2-grid .chip-pick { height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font: 650 .82rem/1 var(--font-primary); }
#view-settings .cs2-grid .chip-pick { border-radius: 12px; height: 44px; }
#view-settings .ps-chips .chip-pick.on, #view-settings .cs2-grid .chip-pick.on { border-color: var(--primary); background: var(--primary); color: var(--primary-fg); }
.cs2-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ps-list { display: flex; flex-direction: column; gap: 8px; }
.ps-row { display: grid; grid-template-columns: 1fr 40px; align-items: center; gap: 6px; }
.ps-pkg { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: var(--surface-alt); }
.ps-pkg-top { display: grid; grid-template-columns: 1fr 128px 40px; align-items: center; gap: 6px; }
#view-settings .ps-pkg .pkg-name { height: 48px; padding: 0 12px; background: var(--surface); font-weight: 650; }
#view-settings .ps-pkg .pkg-desc { height: 44px; padding: 0 12px; background: var(--surface); font-size: .86rem; }
.ps-price { min-height: 48px; padding: 0 10px; background: var(--surface); }
#view-settings .ps-price input { height: 44px; text-align: right; font-family: var(--font-mono); }
.ps-save { width: 100%; height: 54px; margin-top: 4px; border: 0; border-radius: 16px; background: var(--cta); color: var(--cta-fg); font: 750 1rem/1 var(--font-primary); cursor: pointer; }
.ps-save:disabled { opacity: .6; }
#view-settings .card.ps .cs2-hero { margin: 0; }
.ps-account { align-items: center; text-align: center; padding: 22px 16px; }
.ps-avatar { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--border); }
.ps-avatar .avatar { width: 100% !important; height: 100% !important; font-size: 2.2rem !important; }
.ps-photo-acts { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ps-photo-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; background: var(--primary); color: var(--primary-fg); font: 700 .86rem/1 var(--font-primary); cursor: pointer; }
.ps-photo-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ps-photo-link { border: 0; background: none; color: var(--danger); font: 650 .84rem/1 var(--font-primary); cursor: pointer; }
.ps-photo-link[hidden] { display: none; }
.ps-note { margin: 0; max-width: 32ch; font-size: .8rem; line-height: 1.4; color: var(--text-soft); }
@media (max-width: 380px) { .ps-two { grid-template-columns: 1fr; } .ps-pkg-top { grid-template-columns: 1fr 108px 36px; } }
/* Rândurile din profil nu mai moștenesc grila veche a pachetelor */
#view-settings .ps-pkg.package-row { display: flex; flex-direction: column; grid-template-areas: none; }
#view-settings .ps-pkg .pkg-name, #view-settings .ps-pkg .pkg-price, #view-settings .ps-pkg .pkg-desc { grid-area: auto; }
#view-settings .ps-pkg-top { display: grid; grid-template-columns: minmax(0, 1fr) 128px 40px; grid-template-areas: none; align-items: center; gap: 6px; }
#view-settings .ps-pkg .ps-price input { padding: 0; border: 0; }
#view-settings .ps-row.dynamic-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px; }
#view-settings .ps-row .ps-input input { padding: 0; }
@media (max-width: 380px) { #view-settings .ps-pkg-top { grid-template-columns: minmax(0, 1fr) 104px 36px; } }
/* Date corporale și calorii: același stil de câmpuri ca restul profilului */
.pf .coach-profile-stats-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf .cpsf-cell { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pf .cpsf-cell label { margin: 0; font: 500 .62rem/1 var(--font-mono) !important; text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft) !important; }
.pf .cpsf-cell input, .pf .cpsf-cell select { width: 100%; height: 52px !important; margin: 0; padding: 0 14px !important; border: 1.5px solid var(--border) !important; border-radius: 14px !important; background-color: var(--surface-alt) !important; color: var(--text) !important; font: 650 .98rem/1 var(--font-primary) !important; box-shadow: none !important; box-sizing: border-box; }
.pf .cpsf-cell input:focus, .pf .cpsf-cell select:focus { border-color: var(--primary) !important; background-color: var(--surface) !important; outline: 0; box-shadow: 0 0 0 3px var(--primary-soft) !important; }
.pf .coach-profile-save-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 4px; }
.pf .coach-profile-save-row .btn { width: 100%; height: 54px; border: 0; border-radius: 16px; background: var(--cta) !important; color: var(--cta-fg) !important; font: 750 1rem/1 var(--font-primary); }
.pf .pf-form { padding: 16px; border-radius: 22px; }
.pf .pf-energy > div { border-radius: 18px; }
/* Swipe v3: nimic nu se animă cât trage degetul; la eliberare, revenire scurtă */
.cal-swipe { --rev: 0px; transition: height .22s cubic-bezier(.4,0,.2,1), opacity .22s; }
.cal-swipe .cal-session { transition: transform .26s cubic-bezier(.22,1,.36,1); }
.cal-swipe::before { inset: 0; left: 0; right: 0; width: auto; opacity: 1; clip-path: inset(0 0 0 calc(100% - var(--rev) - 18px) round 16px); transition: clip-path .26s cubic-bezier(.22,1,.36,1), background-color .15s; }
.cal-swipe:not(.open):not(.armed):not(.removing):not(.dragging)::before { opacity: 1; }
.cal-swipe-del { width: auto !important; left: auto; right: 0; min-width: 96px; }
.cal-swipe-del svg, .cal-swipe-del span { opacity: 1; transform: none; transition: transform .15s; }
.cal-swipe.armed .cal-swipe-del svg { transform: scale(1.15); }
.cal-swipe.dragging, .cal-swipe.dragging .cal-session, .cal-swipe.dragging::before { transition: none !important; }
.cal-swipe.removing .cal-session { transition: transform .2s cubic-bezier(.4,0,1,1); }
.cal-swipe.removing { opacity: .0; transition: height .22s cubic-bezier(.4,0,.2,1) .08s, opacity .2s .08s; }
.cal-swipe::before { opacity: 1 !important; }
.cal-swipe.armed { background: transparent; }
.cal-swipe.armed::before { clip-path: inset(0 round 16px); }
.cal-swipe::before { clip-path: inset(0 0 0 calc(100% - var(--rev) - min(18px, var(--rev))) round 16px); }
.cal-swipe-del { opacity: 1; clip-path: inset(0 0 0 calc(100% - var(--rev)) round 16px); }
.cal-swipe.armed .cal-swipe-del { clip-path: none; }

/* „Ce lucrați”: omul care se colorează + căutare în tipuri și grupe */
.wtg-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }
.wtg-top { display: flex; align-items: center; gap: 16px; }
.wtg-fig { flex: none; width: 104px; height: 128px; display: grid; place-items: center; overflow: hidden; border-radius: 18px; background: var(--primary-soft); color: var(--primary); }
.wtg-fig svg.mi { width: 100%; height: 100%; }
.wtg-fig svg.mi.mi-line { padding: 26%; }
.wtg-sum { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.wtg-sum b { font: 750 1.05rem/1.25 var(--font-primary); color: var(--text); }
.wtg-sum small { font-size: .8rem; line-height: 1.4; color: var(--text-soft); }
.wtg-clear { padding: 0; border: 0; background: none; color: var(--danger); font: 650 .8rem/1 var(--font-primary); cursor: pointer; }
.wtg-search { display: flex; align-items: center; gap: 10px; height: 48px; margin: 0; padding: 0 14px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface-alt); }
.wtg-search:focus-within { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-soft); }
.wtg-search svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--text-soft); stroke-width: 2; stroke-linecap: round; }
.wpe .wtg-search input { flex: 1; min-width: 0; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); font: 600 .95rem/1 var(--font-primary); box-shadow: none; outline: 0; }
.wtg-group h4 { margin: 0 0 8px; font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft); }
.wtg-group[hidden], .wtg-chip[hidden], .wtg-none[hidden] { display: none; }
.wtg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wtg-chip { height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font: 650 .84rem/1 var(--font-primary); cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.wtg-chip.on { border-color: var(--primary); background: var(--primary); color: var(--primary-fg); }
.wtg-none { margin: 0; font-size: .84rem; color: var(--text-soft); }
.wpe .wtg-search input[type="search"] { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; height: 44px !important; min-height: 0 !important; -webkit-appearance: none; appearance: none; }
/* Omul întreg: înălțimea dalei, lățimea după proporții (nu întins) */
/* Cardio / HIIT / mobilitate: silueta în culoarea dalei, accentul în roșul mușchilor */
svg.mi-duo .mi-acc { fill: var(--mi-hot); stroke: none; }
svg.mi-duo .mi-acc-line { stroke: var(--mi-hot); stroke-width: 1.8; }
svg.mi.mi-line.mi-duo { padding: 16%; }

/* „Ce lucrați” v2 (după critică): omul mai mare, regiuni, roșul mușchilor pe chips */
.wtg-card { gap: 16px; }
.wtg-top { align-items: stretch; gap: 14px; }
.wtg-fig { width: 112px; height: 148px; border-radius: 20px; }
.wtg-sum { justify-content: center; gap: 4px; }
.wtg-sum b { font-size: 1.12rem; letter-spacing: -.01em; }
.wtg-sum small { font-size: .8rem; }
.wtg-clear { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; height: 30px; padding: 0 12px 0 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font-size: .76rem; }
.wtg-clear[hidden] { display: none; }
.wtg-clear svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.wtg-group h4 { margin-bottom: 10px; }
.wtg-region { display: grid; grid-template-columns: 62px 1fr; align-items: start; gap: 8px; padding: 8px 0; border-top: 1px dashed var(--border); }
.wtg-region:first-of-type { border-top: 0; padding-top: 0; }
.wtg-region[hidden] { display: none; }
.wtg-region > span { padding-top: 10px; font: 650 .74rem/1.2 var(--font-primary); color: var(--text-soft); }
.wtg-chip { height: 36px; padding: 0 13px; font-size: .82rem; }
.wtg-chip.m { display: inline-flex; align-items: center; gap: 7px; padding-left: 11px; }
.wtg-chip.m i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--mi-hot) 55%, transparent); transition: background .12s, border-color .12s; }
.wtg-chip.m.implied { border-color: color-mix(in srgb, var(--mi-hot) 35%, var(--border)); background: color-mix(in srgb, var(--mi-hot) 8%, var(--surface)); color: var(--text); }
.wtg-chip.m.implied i { background: color-mix(in srgb, var(--mi-hot) 55%, transparent); border-color: transparent; }
.wtg-chip.m.on { border-color: var(--mi-hot); background: var(--mi-hot); color: #fff; }
.wtg-chip.m.on i { background: #fff; border-color: #fff; }
.wtg-chip:active { transform: scale(.96); }
.wtg-region { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 0; }
.wtg-region > .wtg-chips { display: contents; }
.wtg-region > span { width: 58px; padding: 0; font: 500 .6rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.wtg-chip[hidden], .wtg-region[hidden], .wtg-group[hidden] { display: none !important; }
/* Cardio / HIIT / mobilitate pe omul anatomic */
svg.mi-body .mi-ov { fill: var(--mi-hot); }
svg.mi-body .mi-ov-soft { fill: var(--mi-hot); opacity: .32; }
svg.mi-body g.mi-ov path { stroke: var(--primary-soft); stroke-width: .9; paint-order: stroke; }
svg.mi-body .mi-ov-ring { fill: none; stroke: var(--mi-hot); stroke-width: 11; opacity: .45; }
svg.mi-body .mi-ov-soft { opacity: .42; }
svg.mi-body g.mi-ov path { stroke-width: 1.4; }
svg.mi-body .mi-ov-ring { stroke-width: 13; opacity: .5; }
svg.mi-body g.mi-ov-heart path { stroke: none; }
svg.mi .mi-ov { fill: var(--mi-hot); }
svg.mi g.mi-ov path { stroke: none; }
svg.mi .mi-ov-ring { fill: none; stroke: var(--mi-hot); stroke-width: 13; opacity: .5; }

/* „Ce lucrați” v3: grilă ordonată, omul încadrat cu aer */
.wtg-card { gap: 18px; padding: 16px; }
.wtg-top { display: grid; grid-template-columns: 116px 1fr; gap: 16px; align-items: stretch; }
.wtg-fig { width: 116px; height: 156px; padding: 8px 0; border-radius: 20px; overflow: visible; }
.wtg-fig svg.mi.mi-line { padding: 24%; }
.wtg-sum { display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 6px 0 2px; min-width: 0; }
.wtg-sum b { font-size: 1.15rem; line-height: 1.2; overflow-wrap: anywhere; }
.wtg-sum small { font-size: .8rem; line-height: 1.4; }
.wtg-clear { margin-top: auto; align-self: flex-start; }
.wtg-search { height: 44px; border-width: 1px; background: var(--surface); }
.wpe .wtg-search input[type="search"] { height: 40px !important; font-size: .9rem; }
.wtg-group h4 { margin: 0 0 10px; }
/* Tipuri: 4 coloane egale */
.wtg-group[data-group="type"] > .wtg-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wtg-group[data-group="type"] .wtg-chip { width: 100%; padding: 0 4px; justify-content: center; font-size: .78rem; }
/* Grupe: două coloane, fiecare zonă = etichetă + listă */
.wtg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.wtg-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wtg-region { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; }
.wtg-region > span { width: auto; padding: 0 0 2px 2px; font: 500 .6rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft); }
.wtg-region > .wtg-chips { display: flex; flex-direction: column; gap: 6px; }
.wtg-chip.m { width: 100%; height: 36px; justify-content: flex-start; padding: 0 12px; border-radius: 12px; font-size: .82rem; }
.wtg-chip.m i { flex: none; }
.wtg-chip.t { border-radius: 12px; }
.wtg-region { align-items: stretch; }
.wtg-region > span { text-align: left; }
.wtg-region > .wtg-chips { align-items: stretch; flex-wrap: nowrap; }
.wtg-chip.m { width: 100%; }
.wtg-col[hidden] { display: none !important; }

/* Omul întreg: umple dala, proporțiile le păstrează viewBox-ul (Safari taie
   un SVG cu width:auto), deci se vede mereu complet. */
:has(> svg.mi.mi-body), :has(> .plan-icon.mi-wrap > svg.mi.mi-body) { position: relative; }
.plan-icon.mi-wrap:has(> svg.mi.mi-body) { position: absolute !important; inset: 0; width: auto !important; height: auto !important; margin: 0; padding: 0; background: none; }
svg.mi.mi-body:not(.x):not(.y) { position: absolute; left: 4%; top: 4%; display: block; width: 92% !important; height: 92% !important; max-width: none; max-height: none; padding: 0 !important; margin: 0; }
.wtg-fig { padding: 0; }

/* Numele planului: casetă, ca restul câmpurilor */
.wpe textarea.wpe-title { display: block; width: 100%; box-sizing: border-box; min-height: 60px !important; padding: 14px 16px !important; border: 1px solid var(--border) !important; border-radius: 16px !important; background: var(--surface) !important; font-size: 1.45rem !important; line-height: 1.25 !important; letter-spacing: -.01em; resize: none; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.wpe textarea.wpe-title:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-soft) !important; outline: none !important; }

/* Căutare fără chenarul albastru al browserului */
input[type="search"] { -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.wtg-search input:focus, .wtg-search input:focus-visible, #ex-picker-q:focus, #ex-picker-q:focus-visible { outline: none !important; box-shadow: none !important; }
.ex-picker-search input:focus { border-color: var(--primary); background: var(--surface); }
.wpe-head { align-items: stretch; }
.wpe-head > .wpe-chip { align-self: flex-start; }

/* Parolă: același limbaj ca restul paginilor din Profil */
.ps.cs-pw { display: flex; flex-direction: column; gap: 12px; }
.ps-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.ps-ico svg.lc { width: 22px; height: 22px; }
.pw-input input { flex: 1; min-width: 0; height: 48px; margin: 0; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; color: var(--text); font: 600 1rem/1 var(--font-primary); letter-spacing: .02em; }
.pw-input input::placeholder { font-weight: 500; letter-spacing: 0; color: var(--text-soft); }
.pw-eye { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: -8px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--text-soft); cursor: pointer; }
.pw-eye:active { background: var(--surface-alt); }
.pw-eye svg.lc { width: 19px; height: 19px; }
.pw-meter { display: flex; align-items: center; gap: 12px; margin-top: -4px; }
.pw-bars { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pw-bars span { height: 5px; border-radius: 99px; background: var(--border); transition: background .2s; }
.pw-meter small { flex: none; min-width: 112px; text-align: right; font: 650 .74rem/1 var(--font-primary); color: var(--text-soft); }
.pw-meter[data-level="1"] .pw-bars span:nth-child(-n+1) { background: var(--danger); }
.pw-meter[data-level="2"] .pw-bars span:nth-child(-n+2) { background: #E08A1E; }
.pw-meter[data-level="3"] .pw-bars span:nth-child(-n+3) { background: var(--primary); }
.pw-meter[data-level="4"] .pw-bars span { background: var(--primary); }
.pw-meter[data-level="1"] small { color: var(--danger); }
.pw-meter[data-level="2"] small { color: #C2700E; }
.pw-meter[data-level="3"] small, .pw-meter[data-level="4"] small { color: var(--primary); }
.pw-rules { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pw-rules li { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 8px; border-radius: 999px; background: var(--surface-alt); color: var(--text-soft); font: 600 .74rem/1 var(--font-primary); transition: background .15s, color .15s; }
.pw-rules li svg.lc { width: 13px; height: 13px; stroke-width: 3; opacity: .35; }
.pw-rules li.ok { background: var(--primary-soft); color: var(--primary); }
.pw-rules li.ok svg.lc { opacity: 1; }
.pw-match { margin-top: -6px; font: 600 .76rem/1.2 var(--font-primary); color: var(--danger); }
.pw-match.ok { color: var(--primary); }
.pw-match[hidden] { display: none; }

/* Invită un client: codul mare, WhatsApp, lista invitațiilor */
.clx-acts { display: flex; align-items: center; gap: 8px; }
.clx-invite svg.lc { width: 20px; height: 20px; }
.inv { display: flex; flex-direction: column; gap: 14px; }
.inv .ntf-head { margin-bottom: 0; }
.inv-lead { margin: -4px 0 2px; font-size: .92rem; line-height: 1.5; color: var(--text-soft); }
.inv-lead b { color: var(--text); }
.inv-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 18px 18px; border-radius: 24px; background: var(--primary); color: var(--primary-fg); text-align: center; overflow: hidden; }
.inv-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: color-mix(in srgb, var(--cta) 18%, transparent); pointer-events: none; }
.inv-loading { display: flex; align-items: center; gap: 10px; min-height: 120px; font-size: .9rem; opacity: .8; }
.inv-label { font: 500 .62rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.inv-code { font: 600 2.4rem/1.1 var(--font-mono); letter-spacing: .12em; color: var(--cta); }
.inv-meta { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; opacity: .8; }
.inv-meta svg.lc { width: 14px; height: 14px; }
.inv-link { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 14px; background: color-mix(in srgb, currentColor 8%, transparent); color: inherit; font: 500 .8rem/1.2 var(--font-mono); text-align: left; cursor: pointer; }
.inv-link svg.lc { flex: none; width: 15px; height: 15px; opacity: .8; }
.inv-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-link em { flex: none; font: 700 .76rem/1 var(--font-primary); font-style: normal; color: var(--cta); }
.inv-new { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 6px 10px; border: 0; border-radius: 999px; background: none; color: inherit; font: 650 .78rem/1 var(--font-primary); opacity: .75; cursor: pointer; }
.inv-new svg.lc { width: 14px; height: 14px; }
.inv-err { margin: 0; padding: 20px 0; font-size: .88rem; }
.inv-phone .ps-input input { flex: 1; min-width: 0; height: 48px; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; padding: 0 !important; color: var(--text); font: 600 1rem/1 var(--font-primary); }
.inv-wa { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; border: 0; border-radius: 16px; background: #25D366; color: #06331A; font: 750 1rem/1 var(--font-primary); cursor: pointer; }
.inv-wa svg { width: 22px; height: 22px; }
.inv-wa:disabled, .inv-ghost:disabled { opacity: .5; }
.inv-row { display: flex; gap: 8px; }
.inv-ghost { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: 650 .88rem/1 var(--font-primary); cursor: pointer; }
.inv-ghost svg.lc { width: 17px; height: 17px; }
.inv .ntf-group { margin: 10px 0 0; }
.inv-list { display: flex; flex-direction: column; gap: 6px; }
.inv-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.inv-item.current { border-color: var(--primary); }
.inv-item-code { flex: none; font: 600 .86rem/1 var(--font-mono); letter-spacing: .06em; color: var(--text); }
.inv-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.inv-item-main b { font: 650 .86rem/1.2 var(--font-primary); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-item-main small { font-size: .74rem; color: var(--text-soft); }
.inv-item.open .inv-item-main b { color: var(--primary); }
.inv-item.used .inv-item-main b::before { content: "✓ "; color: var(--primary); }
.inv-item.off { opacity: .6; }
.inv-revoke { flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--text-muted); font: 650 .76rem/1 var(--font-primary); cursor: pointer; }
.inv-empty { margin: 0; font-size: .86rem; color: var(--text-soft); }
.ntf-empty .ntf-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; }
.ntf-empty .ntf-cta svg.lc { width: 18px; height: 18px; }
.inv-card { background: #0E3B2E; color: #fff; }
html[data-theme="dark"] .inv-card { background: #0B2E24; border: 1px solid color-mix(in srgb, #C8F04A 25%, transparent); }
.inv-code, .inv-link em { color: #C8F04A; }
.inv-card::after { background: color-mix(in srgb, #C8F04A 16%, transparent); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .inv-card { background: #0B2E24; } }
.inv { padding-bottom: 120px; }
/* Client: cod de invitație în pagina Specialiști */
.spx-inv-card { display: grid; grid-template-columns: 44px 1fr; gap: 12px 12px; align-items: center; padding: 16px; border: 1px dashed var(--border); border-radius: 22px; background: var(--surface); }
.spx-inv-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.spx-inv-ico svg.lc { width: 20px; height: 20px; }
.spx-inv-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.spx-inv-txt strong { font: 750 .98rem/1.25 var(--font-primary); color: var(--text); }
.spx-inv-txt small { font-size: .8rem; line-height: 1.35; color: var(--text-soft); }
.spx-inv-form { grid-column: 1 / -1; display: flex; gap: 8px; margin: 0; }
.spx-inv-form input { flex: 1; min-width: 0; height: 50px; margin: 0; padding: 0 14px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface-alt); color: var(--text); font: 600 1.1rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; outline: none; box-shadow: none; }
.spx-inv-form input:focus { border-color: var(--primary); background: var(--surface); }
.spx-inv-form input::placeholder { color: var(--text-soft); opacity: .6; }
.spx-inv-form button { flex: none; height: 50px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--cta); color: var(--cta-fg); font: 750 .92rem/1 var(--font-primary); cursor: pointer; }
.spx-inv-form button:disabled { opacity: .6; }
.spx-inv-err { grid-column: 1 / -1; margin: -4px 0 0; font-size: .82rem; color: var(--danger); }
.spx-inv-err:empty { display: none; }
.inv-confirm { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--text-soft); }
.inv-confirm b { color: var(--text); }
/* Cont nou: invitația de la specialist */
.rg-inv { margin: 0 0 16px; }
.rg-inv[hidden] { display: none; }
.rg-inv-card { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--primary); border-radius: 18px; background: var(--primary-soft); }
.rg-inv-ava { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--primary); color: var(--primary-fg); font: 750 .95rem/1 var(--font-primary); }
.rg-inv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rg-inv-txt small { font: 500 .62rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft); }
.rg-inv-txt strong { font: 750 1.05rem/1.2 var(--font-primary); color: var(--text); }
.rg-inv-txt em { font-style: normal; font-size: .78rem; line-height: 1.35; color: var(--text-muted); }
.rg-inv-code { flex: none; align-self: flex-start; padding: 5px 8px; border-radius: 8px; background: var(--surface); font: 600 .72rem/1 var(--font-mono); letter-spacing: .06em; color: var(--primary); }
.rg-inv-msg { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); font-size: .84rem; }
.rg-inv-ask { padding: 12px 14px; border: 1px dashed var(--border); border-radius: 16px; background: var(--surface-alt); }
.rg-inv-ask summary { cursor: pointer; font: 650 .9rem/1.3 var(--font-primary); color: var(--primary); list-style: none; }
.rg-inv-ask summary::-webkit-details-marker { display: none; }
.rg-inv-ask summary::after { content: " ›"; }
.rg-inv-ask[open] summary::after { content: ""; }
.rg-inv-ask small { display: block; margin-top: 8px; font-size: .76rem; color: var(--text-soft); }
.rg-inv-form { display: flex; gap: 8px; margin-top: 10px; }
.rg-inv-form input { flex: 1; min-width: 0; height: 48px; margin: 0; padding: 0 14px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: 600 1.05rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.rg-inv-form button { flex: none; height: 48px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--primary); color: var(--primary-fg); font: 700 .9rem/1 var(--font-primary); cursor: pointer; }
.rg-inv, .rg-inv-ask { min-width: 0; max-width: 100%; box-sizing: border-box; }
.rg-inv-form input, .spx-inv-form input { width: 0; }

/* Fișele de început (antrenor și client): pe tot ecranul, ca restul aplicației —
   fără card în mijloc; antet sus, întrebarea direct pe pagină, butoane jos. */
:is(.coach-onboarding, .client-onboarding) .onboarding-shell { width: 100%; max-width: 680px; min-height: 100dvh; box-sizing: border-box; padding-left: 20px; padding-right: 20px; }
:is(.coach-onboarding, .client-onboarding) .onboarding-stage { flex: 1; display: block; align-items: stretch; padding: 10px 0 24px; }
:is(.coach-onboarding, .client-onboarding) .onboarding-step { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
:is(.coach-onboarding, .client-onboarding) .onboarding-step h1 { font-size: clamp(2rem, 8.6vw, 2.8rem); line-height: 1.05; }
:is(.coach-onboarding, .client-onboarding) .onboarding-step > p { font-size: .95rem; }
:is(.coach-onboarding, .client-onboarding) .ob-step-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--primary-soft); color: var(--primary); }
:is(.coach-onboarding, .client-onboarding) .onboarding-step input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), :is(.coach-onboarding, .client-onboarding) .onboarding-step textarea { background: var(--surface) !important; border: 1.5px solid var(--border) !important; border-radius: 14px; }
:is(.coach-onboarding, .client-onboarding) .onboarding-step input:focus, :is(.coach-onboarding, .client-onboarding) .onboarding-step textarea:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-soft); outline: none; }
:is(.coach-onboarding, .client-onboarding) .ob-type, :is(.coach-onboarding, .client-onboarding) .onboarding-options button, :is(.coach-onboarding, .client-onboarding) .onboarding-choice-grid button { background: var(--surface); }
.client-onboarding .onboarding-shell { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
.client-onboarding .onboarding-actions { position: fixed; z-index: 40; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 680px); box-sizing: border-box; margin: 0; padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--border); }
.coach-onboarding .onboarding-actions { width: min(100%, 680px); padding-left: 20px; padding-right: 20px; }
@media (max-width: 480px) {
  :is(.coach-onboarding, .client-onboarding) .onboarding-shell { padding-left: 18px; padding-right: 18px; }
  :is(.coach-onboarding, .client-onboarding) .onboarding-step { padding: 0 !important; }
}
.client-onboarding .onboarding-actions #ob-back[style*="hidden"] { display: none; }
.client-onboarding .onboarding-actions:has(#ob-back[style*="hidden"]) #ob-next { grid-column: 1 / -1; }
.coach-onboarding .onboarding-step[data-step="1"] .ob-step-icon { display: grid; place-items: center; margin-left: auto; margin-right: auto; }

/* Fișele de început: jos doar Înapoi + Continuă, fără bară sau chenar.
   Pagina (html + body) are aceeași culoare până în colțul de jos al ecranului,
   iar butoanele stau deasupra barei iPhone (safe area). */
html:has(body.onboarding-page) { background: var(--bg); }
body.onboarding-page { background: var(--bg); }
:is(.coach-onboarding, .client-onboarding) .onboarding-actions {
  display: grid !important; grid-template-columns: 1fr 1.6fr; grid-template-areas: "b n" !important; gap: 10px;
  background: linear-gradient(to top, var(--bg) 62%, color-mix(in srgb, var(--bg) 0%, transparent)) !important;
  border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  padding: 26px 20px max(14px, env(safe-area-inset-bottom, 0px)) !important; min-height: 0;
}
:is(.coach-onboarding, .client-onboarding) .onboarding-actions #save-state { display: none !important; }
:is(.coach-onboarding, .client-onboarding) .onboarding-actions #ob-back { grid-area: b !important; grid-column: auto; height: 54px; margin: 0; border: 1.5px solid var(--border) !important; background: var(--surface) !important; }
:is(.coach-onboarding, .client-onboarding) .onboarding-actions :is(#ob-next, #ob-submit) { grid-area: n !important; height: 54px; margin: 0; }
:is(.coach-onboarding, .client-onboarding) .onboarding-actions:has(#ob-back[hidden], #ob-back[style*="hidden"]) :is(#ob-next, #ob-submit) { grid-column: 1 / -1 !important; grid-area: auto !important; }
:is(.coach-onboarding, .client-onboarding) .onboarding-shell { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important; }
:is(.coach-onboarding, .client-onboarding) .onboarding-actions:has(#ob-back[hidden], #ob-back[style*="hidden"]) :is(#ob-next, #ob-submit) { grid-area: 1 / 1 / 2 / 3 !important; }
/* O singură culoare de fundal, până jos: fără nuanța decorativă care făcea o bandă sub butoane. */
body.onboarding-page:is(.coach-onboarding, .client-onboarding)::before { display: none; }
html[data-theme] body.onboarding-page, body.onboarding-page { background: var(--bg) !important; }

/* Fișele de început v3: navigația sus — ← Înapoi | progres | Continuă → —
   fixată, deasupra zonei sigure iOS; jos nu mai rămâne nimic. */
body:is(.coach-onboarding, .client-onboarding) .onboarding-shell { padding-top: calc(max(14px, env(safe-area-inset-top, 0px) + 6px) + 64px) !important; padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important; }
body:is(.coach-onboarding, .client-onboarding) .ob-nav {
  position: fixed; z-index: 50; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, 680px); box-sizing: border-box; margin: 0;
  display: grid; grid-template-columns: 48px 1fr auto; grid-template-areas: "back prog next"; align-items: center; gap: 12px;
  padding: max(14px, calc(env(safe-area-inset-top, 0px) + 6px)) 20px 10px; background: var(--bg);
}
body:is(.coach-onboarding, .client-onboarding) .ob-nav .onboarding-actions { display: contents !important; }
body:is(.coach-onboarding, .client-onboarding) .ob-nav .onboarding-actions[hidden] { display: none !important; }
body:is(.coach-onboarding, .client-onboarding) .ob-nav .onboarding-progress { grid-area: prog; justify-self: center; }
body:is(.coach-onboarding, .client-onboarding) .ob-nav #ob-back {
  grid-area: back !important; grid-column: auto !important; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; margin: 0;
  border: 1.5px solid var(--border) !important; border-radius: 50% !important; background: var(--surface) !important; color: var(--text) !important; cursor: pointer;
}
body:is(.coach-onboarding, .client-onboarding) .ob-nav #ob-back[hidden] { display: none; }
body:is(.coach-onboarding, .client-onboarding) .ob-nav :is(#ob-next, #ob-submit) {
  grid-area: next !important; grid-column: auto !important; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: auto !important; min-width: 48px; height: 48px; padding: 0 14px !important; margin: 0;
  border: 0 !important; border-radius: 999px !important; background: var(--lime) !important; color: var(--adanc) !important;
  font: 750 .9rem/1 var(--font-primary) !important; white-space: nowrap; cursor: pointer;
}
body:is(.coach-onboarding, .client-onboarding) .ob-nav #ob-next:has(> svg:only-child) { width: 48px !important; padding: 0 !important; }
body:is(.coach-onboarding, .client-onboarding) .ob-nav #ob-submit[hidden] { display: none !important; }
body:is(.coach-onboarding, .client-onboarding) .ob-nav :is(#ob-back, #ob-next, #ob-submit) svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
body:is(.coach-onboarding, .client-onboarding) .ob-nav :is(#ob-next, #ob-submit):disabled { opacity: .45; }
body:is(.coach-onboarding, .client-onboarding) .ob-step-track { margin-top: 2px; }
body:is(.coach-onboarding, .client-onboarding) .ob-nav .onboarding-actions:has(#ob-back) :is(#ob-next, #ob-submit) { grid-area: next !important; }

/* Fișele de început: fiecare pas încape pe un ecran, fără derulare.
   Pictograma pasului dispare (rămâne eticheta mică), titluri mai mici,
   chip-uri / câmpuri / carduri mai joase. */
body:is(.coach-onboarding, .client-onboarding) .onboarding-shell { padding-top: calc(max(12px, env(safe-area-inset-top, 0px) + 4px) + 56px) !important; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; min-height: 0; }
body:is(.coach-onboarding, .client-onboarding) .ob-nav { padding-top: max(12px, calc(env(safe-area-inset-top, 0px) + 4px)); padding-bottom: 8px; grid-template-columns: 44px 1fr auto; }
body:is(.coach-onboarding, .client-onboarding) .ob-nav #ob-back { width: 44px; height: 44px; }
body:is(.coach-onboarding, .client-onboarding) .ob-nav :is(#ob-next, #ob-submit) { height: 44px; min-width: 44px; }
body:is(.coach-onboarding, .client-onboarding) .ob-nav #ob-next:has(> svg:only-child) { width: 44px !important; }
body:is(.coach-onboarding, .client-onboarding) .ob-nav .onboarding-progress { transform: scale(.86); }
body:is(.coach-onboarding, .client-onboarding) .onboarding-stage { padding: 4px 0 0 !important; }
body:is(.coach-onboarding, .client-onboarding) .onboarding-step .ob-step-icon { display: none !important; }
body:is(.coach-onboarding, .client-onboarding) .onboarding-kicker { margin: 14px 0 6px !important; }
body:is(.coach-onboarding, .client-onboarding) .onboarding-step h1 { margin: 0 0 8px !important; font-size: clamp(1.6rem, 7.2vw, 2.1rem) !important; line-height: 1.08 !important; }
body:is(.coach-onboarding, .client-onboarding) .onboarding-step > p { margin: 0 0 14px !important; font-size: .86rem !important; line-height: 1.45 !important; }
body:is(.coach-onboarding, .client-onboarding) .onboarding-step label { margin-top: 10px; font-size: .82rem; }
body:is(.coach-onboarding, .client-onboarding) .onboarding-step input:not([type="file"]):not([type="checkbox"]):not([type="radio"]) { height: 48px !important; min-height: 0 !important; margin-top: 6px; font-size: .95rem; }
body:is(.coach-onboarding, .client-onboarding) .onboarding-step textarea { min-height: 76px !important; margin-top: 6px; font-size: .92rem; }
body:is(.coach-onboarding, .client-onboarding) .onboarding-choice-grid { gap: 6px !important; }
body:is(.coach-onboarding, .client-onboarding) .onboarding-choice-grid button { min-height: 36px !important; height: 36px; padding: 0 12px !important; font-size: .82rem !important; }
body:is(.coach-onboarding, .client-onboarding) .ob-group-label { margin: 12px 0 6px !important; }
body:is(.coach-onboarding, .client-onboarding) .onboarding-options { gap: 6px !important; }
body:is(.coach-onboarding, .client-onboarding) .onboarding-options button { min-height: 48px !important; padding: 9px 12px !important; }
body:is(.coach-onboarding, .client-onboarding) .ob-types { gap: 8px !important; margin-top: 8px !important; }
body:is(.coach-onboarding, .client-onboarding) .ob-type { padding: 11px 12px !important; }
body:is(.coach-onboarding, .client-onboarding) .ob-activity button { padding: 9px 12px !important; }
.coach-onboarding .onboarding-step .ob-photo { width: 92px !important; height: 92px !important; margin-top: 4px !important; }
.coach-onboarding .ob-photo-msg { margin-top: 4px; }
/* Verifică fișa: antet compact, rândurile pe două coloane */
.coach-onboarding .ob-preview { padding: 14px !important; }
.coach-onboarding .ob-preview-head { padding-bottom: 12px !important; gap: 12px !important; }
.coach-onboarding .ob-preview-head img { width: 56px !important; height: 56px !important; border-radius: 16px !important; }
html body .coach-onboarding .ob-preview dl, .coach-onboarding .onboarding-step .ob-preview dl { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px 14px !important; margin: 12px 0 0 !important; }
.coach-onboarding .ob-preview dl > div { min-width: 0; }
.coach-onboarding .ob-preview dd { font-size: .8rem !important; line-height: 1.35 !important; }
/* Telefoane scunde (iPhone SE): încă puțin mai strâns */
@media (max-height: 720px) {
  body:is(.coach-onboarding, .client-onboarding) .onboarding-step > p { display: none; }
  body:is(.coach-onboarding, .client-onboarding) .onboarding-step h1 { font-size: clamp(1.5rem, 6.6vw, 1.85rem) !important; margin-bottom: 12px !important; }
  body:is(.coach-onboarding, .client-onboarding) .onboarding-kicker { margin-top: 8px !important; }
  body:is(.coach-onboarding, .client-onboarding) .onboarding-choice-grid button { height: 34px; min-height: 34px !important; }
  body:is(.coach-onboarding, .client-onboarding) .ob-type small, body:is(.coach-onboarding, .client-onboarding) .ob-activity button small { display: none; }
}
@media (max-height: 720px) {
  body:is(.coach-onboarding, .client-onboarding) .onboarding-choice-grid { gap: 5px !important; }
  body:is(.coach-onboarding, .client-onboarding) .onboarding-choice-grid button { height: 31px; min-height: 31px !important; padding: 0 10px !important; font-size: .78rem !important; }
  body:is(.coach-onboarding, .client-onboarding) .onboarding-step input:not([type="file"]):not([type="checkbox"]):not([type="radio"]) { height: 44px !important; }
  body:is(.coach-onboarding, .client-onboarding) .ob-group-label { margin: 8px 0 5px !important; }
  body:is(.coach-onboarding, .client-onboarding) .onboarding-step label { margin-top: 6px; }
}
/* Chip-urile de specializări / limbi (.ob-chips) */
.coach-onboarding .ob-chips { gap: 6px !important; }
.coach-onboarding .ob-chips button { min-height: 0 !important; height: 34px !important; padding: 0 12px !important; font-size: .8rem !important; }
@media (max-height: 720px) {
  .coach-onboarding .ob-chips { gap: 5px !important; }
  .coach-onboarding .ob-chips button { height: 30px !important; padding: 0 10px !important; font-size: .76rem !important; }
}

/* Ultimul pas (codul de acces): pe tot ecranul, fără card, încape fără derulare. */
html:has(body.specialist-confirmation), body.specialist-confirmation { background: var(--bg) !important; }
body.specialist-confirmation { padding: max(14px, calc(env(safe-area-inset-top, 0px) + 6px)) 20px calc(14px + env(safe-area-inset-bottom, 0px)) !important; min-height: 100dvh; box-sizing: border-box; }
body.specialist-confirmation::before { display: none !important; }
.specialist-confirmation .validation-shell { max-width: 520px; }
.specialist-confirmation .validation-shell > .brand { margin: 4px 0 18px !important; }
.specialist-confirmation .validation-card { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.specialist-confirmation .validation-icon { display: none !important; }
.specialist-confirmation .validation-card > .auth-eyebrow { display: inline-block; margin: 0 8px 0 0; vertical-align: middle; }
.specialist-confirmation .validation-status { margin: 0 0 10px !important; vertical-align: middle; padding: 4px 10px; font-size: .7rem; }
.specialist-confirmation h1 { margin: 6px 0 8px !important; font-size: clamp(1.55rem, 7vw, 2rem) !important; line-height: 1.08 !important; }
.specialist-confirmation .validation-card > p { margin: 0; font-size: .86rem !important; line-height: 1.45 !important; }
.specialist-confirmation .validation-journey { margin: 16px 0 !important; gap: 10px !important; padding: 12px 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.specialist-confirmation .validation-journey i { width: 24px; height: 24px; font-size: .7rem; }
.specialist-confirmation .validation-journey strong { font-size: .82rem; }
.specialist-confirmation .validation-journey small { margin-top: 1px; font-size: .74rem; line-height: 1.35; }
.specialist-confirmation #validation-form { padding-top: 0 !important; border-top: 0 !important; }
.specialist-confirmation #validation-form label { font-size: .82rem; }
.specialist-confirmation #code { height: 52px !important; margin-top: 6px; background: var(--surface) !important; border-width: 1.5px !important; text-align: center; }
.specialist-confirmation #code-help { margin-top: 6px; font-size: .72rem; }
html .specialist-confirmation #validate-btn { height: 52px !important; margin-top: 12px !important; }
.specialist-confirmation .validation-secondary { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; margin-top: 10px !important; }
.specialist-confirmation .validation-secondary .btn { height: 44px; min-height: 0; margin: 0; padding: 0 10px; font-size: .8rem; }
@media (max-height: 720px) {
  .specialist-confirmation .validation-shell > .brand { margin-bottom: 10px !important; }
  .specialist-confirmation .validation-journey small, .specialist-confirmation #code-help { display: none; }
  .specialist-confirmation .validation-journey { margin: 12px 0 !important; gap: 8px !important; }
}

/* Login: Ai uitat parola? */
.auth-card .form-group:has(#password) { position: relative; }
.auth-forgot { display: block; margin: 8px 0 0 auto; padding: 4px 0; border: 0; background: none; color: var(--primary); font: 650 .82rem/1.2 var(--font-primary); cursor: pointer; }
.auth-back { padding: 4px 0; border: 0; background: none; color: var(--text-muted); font: 650 .86rem/1.2 var(--font-primary); cursor: pointer; }
.auth-note { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; font-size: .86rem; line-height: 1.45; }
.auth-note.ok { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.auth-note[hidden], #login-view[hidden], #reset-view[hidden], #reset-sent[hidden] { display: none !important; }
.auth-sent-ico { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 18px; background: var(--primary-soft); color: var(--primary); }
.auth-sent-ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#reset-sent .sub b { color: var(--text); overflow-wrap: anywhere; }
.auth-steps { margin: 4px 0 20px; padding: 14px 16px 14px 32px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-alt); color: var(--text-soft); font-size: .84rem; line-height: 1.5; }
.auth-steps li + li { margin-top: 6px; }
.auth-steps b { color: var(--text); }
.auth-resend { display: block; width: 100%; margin-top: 10px; padding: 12px 0; border: 0; background: none; color: var(--primary); font: 650 .88rem/1.2 var(--font-primary); cursor: pointer; }
.auth-resend:disabled { color: var(--text-soft); cursor: default; }
.auth-card input:focus, .auth-card input:focus-visible { outline: none !important; border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-soft) !important; }
/* Cardul de sus: atinge ca să schimbi poza */
.hero-pickable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hero-pickable.hero-swap { animation: hero-swap .45s cubic-bezier(.2,.8,.2,1); }
@keyframes hero-swap { from { filter: brightness(1.35) saturate(.85); } to { filter: none; } }
@media (prefers-reduced-motion: reduce) { .hero-pickable.hero-swap { animation: none; } }
/* Admin: clienții unui antrenor */
.adm-clients h3 { display: flex; align-items: center; gap: 8px; }
.adm-count { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font: 600 .74rem/1 var(--font-mono); }
.adm-client-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; max-height: 360px; overflow-y: auto; }
.adm-client-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.adm-client-list li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-client-list strong { font-size: .9rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-client-list small { font-size: .76rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-client-since { flex: none; text-align: right; font: 500 .66rem/1.35 var(--font-mono); color: var(--text-soft); }
.adm-photo.adm-photo-sm { width: 38px; height: 38px; border-radius: 50%; flex: none; font-size: .78rem; }

/* Pozele de profil: decupajul pornește din treimea de sus (fața), nu din mijloc. */
.cb-photo img, .adm-photo, img.adm-photo, .avatar img, [class*="avatar"] img, .ob-photo-preview img, .ps-avatar img, .photo-preview img { object-position: 50% 22% !important; }
.cp3-photo-btn { position: relative; display: block; margin: 0 auto; padding: 0; border: 0; background: none; border-radius: 30px; cursor: zoom-in; }
.cp3-photo-btn::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E3B2E' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m20 20-4.5-4.5M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center / 15px no-repeat; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.photo-full { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); background: rgba(3, 12, 9, .94); animation: pf-in .18s ease both; cursor: zoom-out; }
.photo-full.out { animation: pf-out .18s ease both; }
.photo-full img { max-width: 100%; max-height: 100%; border-radius: 18px; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.photo-full-x { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.1rem; }
@keyframes pf-in { from { opacity: 0; } } @keyframes pf-out { to { opacity: 0; } }

/* ---------- Antrenament: varianta curată (după critica de design) ---------- */
.wr .wr-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; }
.wr-head { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.wr-head strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 750 .9rem/1.1 var(--font-primary); }
.wr-head .wr-clock { font-size: .78rem; color: var(--text-soft); }
.wr-head .wr-clock svg.lc { width: 13px; height: 13px; }
.wr .wr-finish { background: transparent; color: var(--text); border: 1.5px solid var(--border-strong); padding: 0 14px; }
.wr-sound { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--surface-alt); color: var(--text-muted); cursor: pointer; }
.wr-sound svg.lc { width: 19px; height: 19px; }
.wr-sound[aria-pressed="false"] { color: var(--text-soft); opacity: .7; }
.wr .wr-plan-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; font-size: .8rem; }
.wr .wr-plan-note svg.lc { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--text-soft); }
.wr-target { display: flex; flex-wrap: wrap; gap: 4px; }
.wr-target i { padding: 4px 7px; border-radius: 7px; background: var(--surface-alt); font: 600 .7rem/1 var(--font-mono); font-style: normal; color: var(--text-muted); white-space: nowrap; }
.wr-past { gap: 8px; }
.wr-past-row { grid-template-columns: 18px minmax(0, 1fr) auto; font-size: .8rem; }
.wr-past-row b { font-size: .8rem; }
.wr-past-row.rec svg.lc { color: #D9A520; }
.wr-sets-head { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 52px; gap: 10px; padding: 0 10px; }
.wr-sets-head span { text-align: center; font: 600 .66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft); }
.wr-sets-head span:first-child { text-align: left; }
.wr .wr-set { grid-template-columns: 30px minmax(0, 1fr) 52px; padding: 8px 10px; }
.wr .wr-set .wr-set-n { margin-top: 0; align-self: center; }
.wr .wr-set .wr-check { margin-top: 0; }
.wr .wr-step { height: 52px; grid-template-columns: 38px minmax(0, 1fr) 38px; }
.wr .wr-step input { font-size: 1.25rem; }
.wr .wr-set.done { padding-block: 4px; }
.wr .wr-set.done .wr-step { height: 38px; grid-template-columns: 0 minmax(0, 1fr) 0; }
.wr .wr-set.done .wr-step button { visibility: hidden; }
.wr .wr-set.done .wr-step input { font-size: 1rem; font-weight: 650; }
.wr .wr-set.done .wr-check { width: 40px; height: 40px; justify-self: center; border-radius: 12px; }
.wr .wr-set.done .wr-set-foot span { display: none; }
.wr-set-foot span { font-size: .7rem; }
html[data-theme="dark"] .wr .wr-finish { color: var(--text); }

/* ---------- Progres: istoric și evoluție (o singură serie, o nuanță) ----------
   --chart e validat (lightness band, chroma, contrast) pe suprafața fiecărei teme. */
:root { --chart: #1F8A5B; --chart-wash: rgba(31, 138, 91, .10); }
html[data-theme="dark"] { --chart: #62A532; --chart-wash: rgba(98, 165, 50, .12); }
.csx-hero-acts { display: flex; gap: 8px; }
.cal-add.pg-open { width: 46px; padding: 0; justify-content: center; background: var(--surface); color: var(--primary); box-shadow: inset 0 0 0 1px var(--border-strong); }
.cal-add.pg-open svg { width: 21px; height: 21px; stroke-width: 1.9; }
.pg-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pg-tiles > div { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.pg-tiles span { font: 500 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }
.pg-tiles strong { font: 800 1.6rem/1 var(--font-primary); letter-spacing: -.02em; color: var(--text); }
.pg-tiles strong.up { color: var(--text); }
.pg-tiles strong.up::before { content: "▲ "; font-size: .7em; color: var(--chart); vertical-align: .15em; }
.pg-tiles small { font-size: .74rem; color: var(--text-soft); }
.pg-tiles .gold { background: #FBF3DA; border-color: #EEDDA3; }
html[data-theme="dark"] .pg-tiles .gold { background: rgba(243, 201, 105, .1); border-color: rgba(243, 201, 105, .25); }
.pg-sec { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }
.pg-sec > header { display: flex; flex-direction: column; gap: 3px; }
.pg-sec h2 { margin: 0; font: 750 1rem/1.2 var(--font-primary); color: var(--text); }
.pg-sec header small { font-size: .76rem; color: var(--text-soft); }
.pg-chart { position: relative; touch-action: pan-y; }
.pg-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.pg-grid { stroke: var(--border); stroke-width: 1; }
.pg-tick { fill: var(--text-soft); font: 500 10px var(--font-mono); }
.pg-end { fill: var(--text); font: 700 11px var(--font-primary); }
.pg-line { fill: none; stroke: var(--chart); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pg-area { fill: var(--chart-wash); }
.pg-dot { fill: var(--chart); stroke: var(--surface); stroke-width: 2; }
.pg-hot { fill: var(--chart); stroke: var(--surface); stroke-width: 2.5; pointer-events: none; }
.pg-cross { stroke: var(--text-soft); stroke-width: 1; pointer-events: none; }
.pg-bar { fill: color-mix(in srgb, var(--chart) 55%, var(--surface)); transition: fill .15s; }
.pg-bar.now, .pg-bar.hl { fill: var(--chart); }
.pg-tip { position: absolute; z-index: 2; transform: translate(-50%, -100%); min-width: 110px; max-width: 200px; padding: 8px 10px; border-radius: 12px; background: var(--text); color: var(--bg); font-size: .74rem; line-height: 1.35; pointer-events: none; box-shadow: var(--shadow-lg); }
.pg-tip b { display: block; margin-bottom: 2px; font-weight: 750; }
.pg-tip span { display: block; font: 500 .7rem/1.45 var(--font-mono); opacity: .85; }
.pg-list, .pg-log { display: flex; flex-direction: column; }
.pg-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 0; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.pg-row:first-child { border-top: 0; }
.pg-row > svg.lc { flex: none; width: 18px; height: 18px; color: var(--text-soft); }
.pg-row-txt { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pg-row-txt strong { font-size: .92rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-row-txt small { font-size: .72rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-delta { flex: none; padding: 4px 8px; border-radius: 999px; background: var(--surface-alt); font: 700 .72rem/1 var(--font-mono); color: var(--text-muted); }
.pg-delta.up { background: color-mix(in srgb, var(--chart) 14%, transparent); color: var(--text); }
.pg-delta.up::before { content: "▲ "; color: var(--chart); font-size: .8em; }
.pg-spark { flex: none; width: 64px; height: 26px; }
.pg-spark polyline { fill: none; stroke: var(--text-soft); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; opacity: .6; }
.pg-spark circle { fill: var(--chart); stroke: var(--surface); stroke-width: 1.5; }
.pg-log-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.pg-log-row:first-child { border-top: 0; }
.pg-log-row time { flex: none; width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 12px; background: var(--surface-alt); }
.pg-log-row time b { font: 800 1rem/1 var(--font-primary); color: var(--text); }
.pg-log-row time small { font: 500 .58rem/1 var(--font-mono); text-transform: uppercase; color: var(--text-soft); }
.pg-log-txt { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pg-log-txt strong { font-size: .9rem; font-weight: 650; }
.pg-log-txt small { font-size: .74rem; color: var(--text-soft); }
.pg-pr { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: #F3C969; color: #3A2A00; font: 750 .72rem/1 var(--font-primary); }
.pg-pr svg.lc { width: 13px; height: 13px; }
.pg-table { display: flex; flex-direction: column; }
.pg-table-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--border); }
.pg-table-row:first-child { border-top: 0; }
.pg-table-row time { padding-top: 5px; font: 600 .74rem/1 var(--font-mono); color: var(--text-soft); }
.pg-table-row span { display: flex; flex-wrap: wrap; gap: 5px; }
.pg-table-row i { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 8px; background: var(--surface-alt); font: 600 .74rem/1 var(--font-mono); font-style: normal; color: var(--text); }
.pg-table-row i.top { box-shadow: inset 0 0 0 1.5px var(--chart); }
.pg-table-row i svg.lc { width: 12px; height: 12px; color: #D9A520; }
.pg-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 20px; border: 1.5px dashed var(--border-strong); border-radius: 22px; text-align: center; }
.pg-empty svg.lc { width: 32px; height: 32px; color: var(--chart); }
.pg-empty strong { font-size: 1rem; }
.pg-empty p { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--text-soft); }
.pg-cross[hidden], .pg-hot[hidden] { display: none; }
/* Rândul de set: loc pentru cifre de 3 caractere și pe ecrane de 360px. */
.wr .wr-body { padding-left: 12px; padding-right: 12px; }
.wr .wr-card { padding: 14px 12px; }
.wr .wr-set, .wr-sets-head { grid-template-columns: 24px minmax(0, 1fr) 46px; column-gap: 8px; }
.wr-sets-head { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) 46px; padding: 0 8px; }
.wr .wr-set { padding: 8px; }
.wr .wr-set-n { width: 24px; height: 24px; font-size: .74rem; }
.wr .wr-set .wr-check { width: 46px; height: 46px; border-radius: 14px; }
.wr .wr-step { grid-template-columns: 28px minmax(0, 1fr) 28px; }
.wr .wr-step input[type="number"] { width: 100% !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.wr .wr-set.done .wr-step { grid-template-columns: 0 minmax(0, 1fr) 0; }

/* ---------- Antrenament v3: fără bara de jos, supersetul pe runde, serii sărite ---------- */
.wr .wr-body { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
.wr .wr-rest { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.wr-head .wr-clock em { font: 600 .74rem/1 var(--font-mono); font-style: normal; color: var(--text-soft); }
.wr-head .wr-clock em:not(:empty)::before { content: "·"; margin: 0 5px; }
/* Fiecare exercițiu din bandă are un cerc care se umple pe măsură ce bifezi. */
.wr-strip button i { --ring: var(--surface); background: radial-gradient(closest-side, var(--ring) 76%, transparent 78%), conic-gradient(var(--st-ok) calc(var(--p, 0) * 1%), var(--border) 0); }
.wr-strip button.on i { --ring: var(--text); color: var(--bg); }
.wr-strip button.done i, .wr-strip button.on.done i { background: var(--st-ok); color: #fff; }
.wr-strip button.skip i { background: radial-gradient(closest-side, var(--ring) 76%, transparent 78%), conic-gradient(var(--st-ok) calc(var(--p, 0) * 1%), color-mix(in srgb, var(--danger, #D9534F) 55%, transparent) 0); }
/* Superset */
.wr-ss-card { gap: 10px; }
.wr-ss-card > .wr-ss-tag { align-self: flex-start; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--cta) 22%, transparent); font-size: .72rem; }
.wr-ss-ex { display: flex; flex-direction: column; gap: 8px; }
.wr-ss-ex + .wr-ss-ex { padding-top: 10px; border-top: 1px dashed var(--border); }
.wr-ss-ex .wr-card-head .wr-ex-ico { width: 46px; height: 46px; }
.wr-ss-ex .wr-past { padding: 8px 10px; }
.wr-ex-ico { position: relative; overflow: visible !important; }
.wr-ex-ico > svg { border-radius: inherit; overflow: hidden; }
.wr-letter { position: absolute; left: -5px; top: -5px; width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid var(--surface); border-radius: 50%; background: var(--text); color: var(--bg); font: 800 .7rem/1 var(--font-primary); }
.wr-round { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1.5px solid transparent; border-radius: 20px; background: var(--surface-alt); }
.wr-round.current { border-color: var(--primary); background: var(--surface); }
.wr-round.done { background: color-mix(in srgb, var(--st-ok) 7%, var(--surface)); }
.wr-round-n { padding: 2px 4px 0; font: 600 .64rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }
.wr-round.current .wr-round-n { color: var(--primary); }
.wr-round .wr-set { background: transparent; box-shadow: none; }
.wr-round .wr-set.current { border-color: transparent; background: var(--primary-soft); box-shadow: none; }
.wr-round .wr-set.done { background: transparent; }
.wr-round + .wr-round { margin-top: 2px; }
/* Serii sărite (după „Termină”) */
.wr .wr-set.skipped { opacity: .62; background: transparent; border: 1.5px dashed var(--border-strong); }
.wr-set.skipped .wr-set-n { background: color-mix(in srgb, var(--danger, #D9534F) 16%, transparent); color: var(--danger, #D9534F); }
.wr-set.skipped .wr-step { border-color: transparent; background: transparent; grid-template-columns: 0 minmax(0, 1fr) 0; }
.wr-set.skipped .wr-step button { visibility: hidden; }
.wr-set.skipped .wr-step input { text-decoration: line-through; color: var(--text-soft) !important; }
.wr-skip-tag { grid-area: c; justify-self: center; font: 600 .66rem/1 var(--font-mono); text-transform: uppercase; color: var(--danger, #D9534F); }
p.wr-up-next.last { display: flex; align-items: center; gap: 10px; margin: 0; cursor: default; flex-direction: row; }
p.wr-up-next.last span { flex: 1; font: 500 .82rem/1.4 var(--font-primary); text-transform: none; letter-spacing: 0; color: var(--text-muted); }
p.wr-up-next.last svg.lc { color: var(--primary); }
/* Rezultatul: un cerc, trei cifre, câștigurile pe rânduri la fel */
.wr-win-ring { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.wr-win-ring > svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.wr-win-ring circle { fill: none; stroke: var(--surface-alt); stroke-width: 10; }
.wr-win-ring .arc { stroke: var(--st-ok); stroke-linecap: round; stroke-dashoffset: var(--off); animation: wrRing 1.1s .15s cubic-bezier(.22, 1, .36, 1) both; }
.wr-win-ring.full .arc { stroke: #E3A92A; }
@keyframes wrRing { from { stroke-dashoffset: 326.7; } }
.wr-win-ring > span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wr-win-ring > span svg.lc { width: 48px; height: 48px; color: #D9A520; stroke-width: 1.8; animation: wrPop .6s .9s cubic-bezier(.3, 1.6, .5, 1) both; }
.wr-win-ring b { font: 800 1.9rem/1 var(--font-primary); color: var(--text); }
.wr-win-ring small { font-size: .72rem; color: var(--text-soft); }
.wr-win-in > p { font-size: .84rem; }
.wr-win-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wr-win-stats strong em { font-style: normal; font-size: .7em; color: var(--text-soft); }
.wr-win-list { width: 100%; margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.wr-win-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px 10px 10px; border-radius: 16px; background: var(--surface-alt); text-align: left; }
.wr-win-list .ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--surface); color: var(--text-muted); }
.wr-win-list .ic svg.lc { width: 18px; height: 18px; }
.wr-win-list .t { font: 650 .84rem/1.3 var(--font-primary); color: var(--text); }
.wr-win-list b { font: 700 .78rem/1 var(--font-mono); color: var(--text); white-space: nowrap; }
.wr-win-list li.gold { background: #FBF3DA; }
.wr-win-list li.gold .ic { background: #F3C969; color: #4A3300; }
.wr-win-list li.up .ic { background: color-mix(in srgb, var(--chart, #1F8A5B) 16%, transparent); color: var(--chart, #1F8A5B); }
.wr-win-list li.muted { background: transparent; border: 1px dashed var(--border-strong); }
.wr-win-list li.muted .ic { color: var(--danger, #D9534F); }
html[data-theme="dark"] .wr-win-list li.gold { background: rgba(243, 201, 105, .12); }
@media (prefers-reduced-motion: reduce) { .wr-win-ring .arc, .wr-win-ring > span svg.lc { animation: none; } }
.wr-head .wr-clock { white-space: nowrap; }

/* Ecranul de antrenament ține tot ecranul, fără ca pagina din spate să se miște. */
html.wr-open, html.wr-open body { height: 100%; overscroll-behavior: none; }
.wr { height: 100vh; height: 100dvh; overscroll-behavior: contain; }
.wr .wr-body { overscroll-behavior: contain; }

/* ---------- Progres comun: linia de țintă, zile fără date ---------- */
.pg-ref { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 4 3; }
.pg-ref-t { fill: var(--text-muted); font: 600 9.5px var(--font-mono); }
.pg-none { stroke: var(--border-strong); stroke-width: 2; stroke-linecap: round; }
.pg-tiles strong small { font-size: .55em; font-weight: 600; color: var(--text-soft); }
.nutri-hero > .cal-add.pg-open { flex: none; align-self: center; }
/* Fișa clientului (antrenor): trei uși spre progres */
.cdx-hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 6px; }
.cdx-hub-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, transform .15s; }
.cdx-hub-card:hover { border-color: var(--border-strong); }
.cdx-hub-card:active { transform: scale(.985); }
.cdx-hub-top { display: flex; align-items: center; gap: 8px; font: 650 .82rem/1 var(--font-primary); color: var(--text-muted); }
.cdx-hub-top > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdx-hub-top i { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--chart) 14%, transparent); color: var(--chart); font-style: normal; }
.cdx-hub-top i svg.lc { width: 17px; height: 17px; }
.cdx-hub-top > svg.lc { flex: none; width: 16px; height: 16px; color: var(--text-soft); }
.cdx-hub-card > b { font: 800 1.5rem/1 var(--font-primary); letter-spacing: -.02em; }
.cdx-hub-card > b small { font-size: .5em; font-weight: 600; color: var(--text-soft); letter-spacing: 0; }
.cdx-hub-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.cdx-hub-foot em { font-size: .74rem; font-style: normal; line-height: 1.3; color: var(--text-soft); }
@media (max-width: 640px) {
  .cdx-hub { grid-template-columns: 1fr; }
  .cdx-hub-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top top" "val spark"; row-gap: 8px; }
  .cdx-hub-top { grid-area: top; }
  .cdx-hub-card > b { grid-area: val; align-self: end; }
  .cdx-hub-foot { grid-area: spark; flex-direction: column; align-items: flex-end; gap: 4px; }
  .cdx-hub-foot em { text-align: right; }
}
.cdx-pg { padding-bottom: 40px; }
.cdx-pg .pg-sec .cdx-fb, .cdx-pg .pg-sec .mj { margin: 0; }

/* ---------- Fișa clientului: acțiuni discrete, ținta cu necesar și propuneri ---------- */
.cdx-actions button { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; min-height: 0; padding: 12px; text-align: left; font-weight: 600; transition: border-color .15s, background .15s; }
.cdx-actions button:hover { border-color: var(--border-strong); }
.cdx-actions button > i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-alt); color: var(--text-muted); font-style: normal; }
.cdx-actions button > i svg.lc { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.75; }
.cdx-actions button > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; width: 100%; }
.cdx-actions button strong { font: 700 .84rem/1.15 var(--font-primary); color: var(--text); }
.cdx-actions button small { margin: 0; font: 500 .72rem/1.25 var(--font-primary); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdx-actions button.todo { border-style: dashed; border-color: var(--border-strong); }
.cdx-actions button.todo > i { background: var(--primary-soft); color: var(--primary); }
.tgx-need { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: var(--surface-alt); }
.tgx-need-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tgx-need-nums > div { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; background: var(--surface); }
.tgx-need-nums span, .tgx-need-label { font: 500 .6rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }
.tgx-need-nums b { font: 800 1.1rem/1 var(--font-primary); color: var(--text); font-variant-numeric: tabular-nums; }
.tgx-need-nums small { font-size: .68rem; color: var(--text-soft); }
.tgx-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; }
.tgx-presets button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.tgx-presets b { font: 800 .98rem/1 var(--font-primary); font-variant-numeric: tabular-nums; }
.tgx-presets span { font: 650 .76rem/1.1 var(--font-primary); }
.tgx-presets small { font-size: .64rem; color: var(--text-soft); }
.tgx-presets button.own small { color: var(--primary); font-weight: 650; }
.tgx-presets button.on { border-color: var(--primary); background: var(--primary-soft); }
.tgx-why { margin: 0; font-size: .74rem; line-height: 1.4; color: var(--text-muted); }
.tgx-nodata { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 12px; border-radius: 14px; background: var(--surface-alt); font-size: .8rem; line-height: 1.4; color: var(--text-muted); }
.tgx-nodata svg.lc { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.tgx-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 4px 4px; text-align: center; }
.tgx-done-ico svg.lc { width: 48px; height: 48px; color: var(--st-ok); }
.tgx-done h2 { margin: 0; font: 800 1.4rem/1.1 var(--font-primary); }
.tgx-done p { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--text-muted); }
.tgx-done .ses-save, .tgx-done .ses-cancel { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tgx-done .ses-save svg.lc { width: 18px; height: 18px; }

/* ---------- Plan alimentar inteligent: necesar, mese pe zi, cât mai rămâne ---------- */
.mpx-tips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.mpx-tips li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-alt); font-size: .84rem; line-height: 1.4; color: var(--text); }
.mpx-tips li svg.lc { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--chart); }
.mpx-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mpx-count button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); cursor: pointer; font: inherit; }
.mpx-count b { font: 800 1.15rem/1 var(--font-primary); }
.mpx-count small { font: 500 .66rem/1 var(--font-mono); color: var(--text-soft); }
.mpx-count button.on { border-color: var(--primary); background: var(--primary-soft); }
.mpx-left { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.mpx-left header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mpx-left header strong { display: inline-flex; align-items: center; gap: 6px; font: 750 .95rem/1.2 var(--font-primary); }
.mpx-left header strong svg.lc { width: 18px; height: 18px; color: var(--st-ok); }
.mpx-left header small { font: 500 .7rem/1 var(--font-mono); color: var(--text-soft); }
.mpx-left.ok { border-color: color-mix(in srgb, var(--st-ok) 50%, var(--border)); background: color-mix(in srgb, var(--st-ok) 6%, var(--surface)); }
.mpx-left.over header strong { color: var(--danger); }
.mpx-row { display: grid; grid-template-columns: 96px auto 1fr; grid-template-areas: "l v s" "bar bar bar"; align-items: baseline; column-gap: 8px; row-gap: 5px; }
.mpx-row > span { grid-area: l; font-size: .78rem; color: var(--text-muted); }
.mpx-row > b { grid-area: v; font: 750 .86rem/1 var(--font-primary); font-variant-numeric: tabular-nums; }
.mpx-row > b small { font-weight: 500; color: var(--text-soft); }
.mpx-row > small { grid-area: s; justify-self: end; font: 500 .7rem/1 var(--font-mono); color: var(--text-soft); }
.mpx-row > i { grid-area: bar; height: 6px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.mpx-row > i em { display: block; height: 100%; border-radius: inherit; background: var(--chart); transition: width .5s cubic-bezier(.16,1,.3,1); }
.mpx-row.p > i em { background: #5BC79A; } .mpx-row.c > i em { background: #F2B632; } .mpx-row.f > i em { background: #7FA3F0; }
.mpx-row.over > small { color: var(--danger); }
.mpc-kcal small { white-space: nowrap; }
/* Constructorul de masă: ținta mesei și ziua */
.nmx-kcal small { margin-top: 5px; max-width: 120px; font: 500 .66rem/1.25 var(--font-primary); opacity: .75; }
.nmx-m b small { font-weight: 500; opacity: .7; }
.nmx-m em.over { background: #F2A08F !important; }
.nmx-day { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, #fff 14%, transparent); font-size: .76rem; }
.nmx-day[hidden] { display: none; }
.nmx-day b { color: #fff; }
.nmx-day em { font-style: normal; opacity: .8; }
.nmx-day.ok { justify-content: flex-start; color: #C8F04A; font-size: .86rem; }
.nmx-day.ok svg.lc { width: 20px; height: 20px; }
.nmx-day.ok b { color: #C8F04A; }
.nmx-day.over em { color: #F2A08F; opacity: 1; }
.nmx-day.last.under em { color: #F3C969; opacity: 1; }
.nmx-ideas { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: 18px; }
.nmx-ideas > header { display: flex; align-items: center; gap: 6px; font: 650 .8rem/1 var(--font-primary); color: var(--text-muted); }
.nmx-ideas > header svg.lc { width: 16px; height: 16px; color: var(--chart); }
.nmx-idea-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.nmx-idea-list button { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.nmx-idea-list button > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nmx-idea-list strong { font-size: .8rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nmx-idea-list small { font: 500 .68rem/1.2 var(--font-mono); color: var(--text-soft); }
.nmx-idea-list button.p { box-shadow: inset 3px 0 0 #5BC79A; } .nmx-idea-list button.c { box-shadow: inset 3px 0 0 #F2B632; } .nmx-idea-list button.f { box-shadow: inset 3px 0 0 #7FA3F0; }
.nmx-idea-list svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--text-soft); stroke-width: 2; stroke-linecap: round; }
.nmx-ideas[hidden] { display: none; }

/* ---------- Suplimente bifate ---------- */
.sup-tick { width: 100%; color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.sup-tick .sup-txt { flex: 1; }
.sup-check { flex: none; width: 34px; height: 34px; display: grid; place-items: center; margin-left: auto; border: 1.5px solid var(--border-strong); border-radius: 50%; color: transparent; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.sup-check svg.lc { width: 18px; height: 18px; stroke-width: 2.6; }
.sup-tick.on { border-color: color-mix(in srgb, var(--st-ok) 45%, var(--border)); background: color-mix(in srgb, var(--st-ok) 6%, var(--surface)); }
.sup-tick.on .sup-check { border-color: var(--st-ok); background: var(--st-ok); color: #fff; animation: wrPop .35s cubic-bezier(.3, 1.6, .5, 1); }
.sup-tick.on .sup-txt em { color: var(--st-ok); }
.sup-count { margin-left: 8px; padding: 3px 8px; border-radius: 999px; background: var(--surface-alt); font: 600 .7rem/1 var(--font-mono); color: var(--text-soft); vertical-align: middle; }
.sup-count.all { background: color-mix(in srgb, var(--st-ok) 16%, transparent); color: var(--st-ok); }
.pg-sup { display: flex; flex-direction: column; gap: 10px; }
.pg-sup-row { display: flex; flex-direction: column; gap: 6px; }
.pg-sup-row > span:first-child { display: flex; justify-content: space-between; gap: 8px; }
.pg-sup-row strong { font-size: .86rem; font-weight: 650; }
.pg-sup-row small { font: 500 .72rem/1 var(--font-mono); color: var(--text-soft); }
.pg-sup-dots { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; }
.pg-sup-dots i { height: 14px; border-radius: 4px; background: var(--surface-alt); }
.pg-sup-dots i.on { background: var(--chart); }
.mj-sup { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: .76rem; color: var(--text-muted); }
.mj-sup svg.lc { width: 14px; height: 14px; color: var(--chart); }

/* ---------- Preferințe alimentare (client) ---------- */
.fp { padding-bottom: 120px; }
.fp-sec { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }
.fp-sec h2 { display: flex; align-items: center; gap: 6px; margin: 0; font: 750 1rem/1.2 var(--font-primary); }
.fp-sec h2 small { font: 500 .72rem/1 var(--font-primary); color: var(--text-soft); }
.fp-sec h2 svg.lc { width: 18px; height: 18px; color: var(--danger); }
.fp-sec > p { margin: -4px 0 2px; font-size: .8rem; color: var(--text-soft); }
.fp-sec.danger { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.fp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fp-chips, .fp-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-row .fp-chip { flex: 1; justify-content: center; }
.fp-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: 650 .84rem/1.2 var(--font-primary); cursor: pointer; transition: border-color .15s, background .15s; }
.fp-row .fp-chip { align-items: center; }
.fp-chip small { font: 500 .66rem/1.2 var(--font-primary); color: var(--text-soft); }
.fp-chip.on { border-color: var(--primary); background: var(--primary-soft); }
.fp-sec.danger .fp-chip.on { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.fp-add { display: flex; gap: 6px; margin: 0; }
.fp-add input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-alt); color: var(--text); font: inherit; }
.fp-add button { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--surface-alt); color: var(--text); cursor: pointer; }
.fp-add button svg.lc { width: 18px; height: 18px; }
.fp-sec textarea { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-alt); color: var(--text); font: inherit; resize: vertical; box-sizing: border-box; }
.fp-card { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 16px; padding: 14px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.fp-card.todo { border-style: dashed; border-color: var(--primary); background: var(--primary-soft); }
.fp-card-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-alt); color: var(--primary); }
.fp-card-ico svg.lc { width: 20px; height: 20px; }
.fp-card-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fp-card-txt strong { font-size: .92rem; font-weight: 700; }
.fp-card-txt small { font-size: .76rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-card > svg.lc { flex: none; width: 18px; height: 18px; color: var(--text-soft); }
.nutri-wait { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 20px; border: 1.5px dashed var(--border-strong); border-radius: 22px; text-align: center; }
.nutri-wait svg.lc { width: 34px; height: 34px; color: var(--chart); }
.nutri-wait strong { font-size: 1rem; }
.nutri-wait p { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--text-soft); }

/* ---------- Preferințele clientului la antrenor ---------- */
.fpc { display: flex; flex-wrap: wrap; gap: 6px; }
.fpc-chip { padding: 6px 10px; border-radius: 999px; background: var(--surface-alt); font: 600 .76rem/1.1 var(--font-primary); color: var(--text); }
.fpc-chip.allergy { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.fpc-chip.diet { background: color-mix(in srgb, #F3C969 22%, transparent); }
.fpc-chip.dislike { background: color-mix(in srgb, var(--text-soft) 14%, transparent); }
.fpc-chip.like { background: color-mix(in srgb, var(--chart) 14%, transparent); }
.fpc-note { margin: 8px 0 0; font-size: .82rem; font-style: italic; line-height: 1.4; color: var(--text-muted); }
.fpc-empty { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: .82rem; line-height: 1.4; color: var(--text-soft); }
.fpc-empty svg.lc { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.fp-bad { margin-left: 6px; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); font: 650 .66rem/1 var(--font-primary); text-transform: none; letter-spacing: 0; }
.fp-warn { display: inline-flex; align-items: center; gap: 4px; margin: 2px 0; font: 650 .7rem/1.2 var(--font-primary); font-style: normal; color: #8A6400; }
.fp-warn svg.lc { width: 12px; height: 12px; }
.fp-warn.allergy, .fp-warn.diet { color: var(--danger); }
html[data-theme="dark"] .fp-warn { color: #F3C969; }
html[data-theme="dark"] .fp-warn.allergy, html[data-theme="dark"] .fp-warn.diet { color: var(--danger); }
.mpc-foods li[class^="fp-"] span { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.mpc-foods li[class^="fp-"] span svg.lc { width: 13px; height: 13px; }
.mpc-foods li[class^="fp-"] em { width: 100%; font: 650 .68rem/1.2 var(--font-primary); font-style: normal; color: #8A6400; }
.mpc-foods li.fp-allergy em, .mpc-foods li.fp-diet em, .mpc-foods li.fp-allergy span svg.lc, .mpc-foods li.fp-diet span svg.lc { color: var(--danger); }
.fp-save { width: 100%; margin-top: 4px; }
.fp-save { display: flex; align-items: center; justify-content: center; gap: 8px; }
.fp-save svg.lc { width: 18px; height: 18px; }

/* ---------- Editor plan alimentar compact ---------- */
.mpe-client { margin-top: 2px; }
.mpx-tabs { display: flex; gap: 6px; margin: 2px 0 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mpx-tabs::-webkit-scrollbar { display: none; }
.mpx-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: 650 .8rem/1 var(--font-primary); cursor: pointer; white-space: nowrap; }
.mpx-tab svg.lc { width: 15px; height: 15px; color: var(--text-soft); }
.mpx-tab b { font: 750 .78rem/1 var(--font-mono); color: var(--text-muted); }
.mpx-tab.on { border-color: var(--text); background: var(--text); color: var(--bg); }
.mpx-tab.on svg.lc, .mpx-tab.on b { color: var(--bg); }
.mpx-tab.bad { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.mpx-badge { min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; background: var(--surface-alt); font: 700 .66rem/1 var(--font-mono); font-style: normal; color: var(--text-muted); }
.mpx-badge.bad { background: var(--danger); color: #fff; }
.mpx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.mpx-panel { margin: 0 0 12px; padding: 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); animation: rliIn .25s ease both; }
.mpx-panel[hidden] { display: none; }
.mpx-panel .mpe-source { margin-bottom: 0; }
.fp-bad-line { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font: 650 .8rem/1.3 var(--font-primary); color: var(--danger); }
.fp-bad-line svg.lc { width: 15px; height: 15px; }
.mpx-meals-head { align-items: center; }
.mpx-count-mini { display: flex; gap: 4px; margin-left: auto; padding: 3px; border-radius: 999px; background: var(--surface-alt); }
.mpx-count-mini button { width: 30px; height: 28px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); font: 700 .8rem/1 var(--font-mono); cursor: pointer; }
.mpx-count-mini button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.mpx-left { gap: 8px; padding: 12px 14px; }
.mpx-left .mpx-row { grid-template-columns: 82px auto 1fr; }
/* Acțiunile din fișa clientului: card + „plan nou” */
.cdx-act { position: relative; display: flex; min-width: 0; }
.cdx-actions .cdx-act-main { flex: 1; width: 100%; }
.cdx-act.todo .cdx-act-main { border-style: dashed; border-color: var(--border-strong); }
.cdx-act.todo .cdx-act-main > i { background: var(--primary-soft); color: var(--primary); }
.cdx-actions .cdx-act-new { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; min-height: 0; padding: 0; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text-muted); }
.cdx-actions .cdx-act-new:hover { border-color: var(--primary); color: var(--primary); }
.cdx-actions .cdx-act-new svg.lc { width: 15px; height: 15px; stroke: currentColor; }
.cdx-act-main > span { padding-right: 18px; }

/* ---------- Masă nouă: căutare sus, card compact, propunere ---------- */
.nmx-find { position: relative; margin-top: 12px; }
.nmx-find .nmx-results { position: relative; z-index: 6; }
.nmx-sum.compact { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; }
.nmc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nmc-top > span { display: flex; align-items: baseline; gap: 6px; }
.nmc-top strong { font: 800 1.7rem/1 var(--font-primary); letter-spacing: -.03em; color: #C8F04A; font-variant-numeric: tabular-nums; }
.nmc-top em { font-style: normal; font-size: .78rem; opacity: .75; }
.nmx-sum .lft { font: 600 .7rem/1 var(--font-mono); color: #C8F04A; white-space: nowrap; }
.nmx-sum .lft.over { color: #F2A08F; }
.nmx-sum .lft.ok { color: #fff; opacity: .8; }
.nmc-bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, #fff 14%, transparent); overflow: hidden; }
.nmc-bar i { display: block; height: 100%; border-radius: inherit; background: #C8F04A; transition: width .4s cubic-bezier(.16,1,.3,1); }
.nmc-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nmc-m { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nmc-m > span { font-size: .66rem; opacity: .75; }
.nmc-m b { font: 750 .86rem/1 var(--font-primary); font-variant-numeric: tabular-nums; }
.nmc-m b small { font-weight: 500; opacity: .7; }
.nmc-m i { height: 4px; border-radius: 999px; background: color-mix(in srgb, #fff 14%, transparent); overflow: hidden; }
.nmc-m em { display: block; height: 100%; border-radius: inherit; transition: width .4s cubic-bezier(.16,1,.3,1); }
.nmc-m.p em { background: #5BC79A; } .nmc-m.c em { background: #F2B632; } .nmc-m.f em { background: #7FA3F0; } .nmc-m em.over { background: #F2A08F; }
.nmx-sum.compact .nmx-day { padding-top: 8px; }
.nmx-ideas { border: 0; padding: 0; }
.nmx-ideas.open { padding: 12px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.nmx-suggest { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1.5px dashed var(--primary); border-radius: 18px; background: var(--primary-soft); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.nmx-suggest > svg.lc { flex: none; width: 22px; height: 22px; color: var(--primary); }
.nmx-suggest span { display: flex; flex-direction: column; gap: 3px; }
.nmx-suggest strong { font: 700 .9rem/1.2 var(--font-primary); }
.nmx-suggest small { font-size: .74rem; color: var(--text-soft); }
.nmx-full { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--surface-alt); font-size: .82rem; color: var(--text-muted); }
.nmx-full svg.lc { width: 17px; height: 17px; color: var(--st-ok); }
.nmx-ideas.open > header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 700 .86rem/1.2 var(--font-primary); color: var(--text); }
.nmx-ideas.open > header > svg.lc { width: 17px; height: 17px; color: var(--primary); }
.nmx-ideas.open > header > span { flex: 1; }
.nmx-sugg-x { border: 0; background: transparent; color: var(--text-soft); cursor: pointer; padding: 4px; font: 600 .8rem/1 var(--font-primary); }
.nmx-sugg-x svg.lc { width: 18px; height: 18px; }
.nmx-sugg { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.nmx-sugg li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-alt); }
.nmx-sugg li > i { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--surface); font-style: normal; }
.nmx-sugg li > i svg.lc { width: 15px; height: 15px; }
.nmx-sugg li.p > i { color: #2E9C6A; } .nmx-sugg li.c > i { color: #C68A12; } .nmx-sugg li.f > i { color: #4D74C9; } .nmx-sugg li.veg > i { color: var(--chart); }
.nmx-sugg li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nmx-sugg strong { font-size: .84rem; font-weight: 650; }
.nmx-sugg small { font: 500 .7rem/1 var(--font-mono); color: var(--text-soft); }
.nmx-sugg-after { margin: 10px 0 0; font-size: .78rem; line-height: 1.4; color: var(--text-muted); }
.nmx-sugg-after b { color: var(--text); }
.nmx-sugg-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.nmx-sugg-acts button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: 14px; font: 700 .86rem/1 var(--font-primary); cursor: pointer; }
.nmx-sugg-acts svg.lc { width: 16px; height: 16px; }
.nmx-sugg-other { border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.nmx-sugg-apply { border: 0; background: var(--cta); color: var(--cta-fg); }
.nmx-sum.compact { align-items: stretch; text-align: left; }
.nmx-sum.compact .nmc-top { justify-content: space-between; }

/* ---------- Masă nouă: inele (masa asta | ziua), lipite deasupra butoanelor ---------- */
.nmx-rings { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 5; display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; border-radius: 22px; background: #0E3B2E; color: #fff; box-shadow: 0 14px 34px -16px rgba(8,36,28,.7); overflow: hidden; }
[data-theme="dark"] .nmx-rings { background: #164A3A; }
.nmx-rings.no-target { grid-template-columns: 1fr; }
.nr-half { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 10px 10px; }
.nr-half.day { background: color-mix(in srgb, #fff 6%, transparent); }
.nr-half header { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.nr-half header strong { font: 750 .78rem/1 var(--font-primary); }
.nr-half header span { font: 500 .64rem/1 var(--font-mono); opacity: .7; white-space: nowrap; }
.nr-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.nr { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.nr-ring { position: relative; width: 100%; max-width: 40px; aspect-ratio: 1; display: grid; place-items: center; }
.nr-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.nr-ring circle { fill: none; stroke-width: 3.6; }
.nr-ring .t { stroke: color-mix(in srgb, #fff 14%, transparent); }
.nr-ring .v { stroke-linecap: round; stroke-dasharray: 94.25; transition: stroke-dashoffset .5s cubic-bezier(.16,1,.3,1), stroke .2s; }
.nr.kcal .v { stroke: #C8F04A; } .nr.p .v { stroke: #5BC79A; } .nr.c .v { stroke: #F2B632; } .nr.f .v { stroke: #7FA3F0; }
.nr.over .v { stroke: #F2A08F; }
.nr-ring b { position: relative; font: 700 .62rem/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.nr.kcal .nr-ring b { font-size: .58rem; }
.nr small { font: 600 .6rem/1 var(--font-mono); opacity: .7; text-transform: uppercase; }
.nr.full small::after { content: " ✓"; color: #C8F04A; }
.nr-half p { display: flex; align-items: center; gap: 4px; margin: 0; font: 600 .7rem/1.2 var(--font-primary); color: #C8F04A; }
.nr-half p.over { color: #F2A08F; }
.nr-half p.under { color: #fff; opacity: .85; }
.nr-half p svg.lc { width: 14px; height: 14px; }
.nmx-rings.done .nr-half.day { background: color-mix(in srgb, #C8F04A 14%, transparent); }
.nmx-rings.done .nr-half.day .v { filter: drop-shadow(0 0 3px color-mix(in srgb, #C8F04A 60%, transparent)); }
/* „Plan nou” din editorul planului */
.wpe-top { display: flex; align-items: center; }
.wpe-new { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text); font: 700 .84rem/1 var(--font-primary); cursor: pointer; white-space: nowrap; }
.wpe-new svg.lc { width: 16px; height: 16px; }
.wpe-new:active { transform: scale(.97); }

/* ---------- Masă nouă: card cu două fețe (masa asta / ziua) ---------- */
.nmx-rings.nf { display: block; background: transparent; box-shadow: none; overflow: visible; perspective: 1200px; }
.nf-inner { display: grid; transition: transform .6s cubic-bezier(.3, 1.25, .5, 1); transform-style: preserve-3d; }
.nf.flipped .nf-inner { transform: rotateY(180deg); }
.nf-face { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 12px; border-radius: 22px; background: #0E3B2E; color: #fff; box-shadow: 0 14px 34px -16px rgba(8,36,28,.7); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.nf-face.back { transform: rotateY(180deg); background: #133F31; box-shadow: 0 14px 34px -16px rgba(8,36,28,.7), inset 0 0 0 1px color-mix(in srgb, #C8F04A 25%, transparent); }
[data-theme="dark"] .nf-face { background: #164A3A; }
[data-theme="dark"] .nf-face.back { background: #1A5241; }
.nf-face header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nf-face header > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nf-face header strong { font: 750 .92rem/1 var(--font-primary); }
.nf-face header em { font: 500 .7rem/1 var(--font-mono); font-style: normal; opacity: .7; }
.nf-turn { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid color-mix(in srgb, #fff 22%, transparent); border-radius: 999px; background: color-mix(in srgb, #fff 8%, transparent); color: #fff; font: 700 .78rem/1 var(--font-primary); cursor: pointer; }
.nf-turn svg.lc { width: 15px; height: 15px; }
.nf-turn:active { transform: scale(.96); }
.nf-turn i { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #C8F04A; color: #0E3B2E; font: 800 .66rem/1 var(--font-primary); font-style: normal; }
.nf .nr-row { gap: 8px; }
.nf .nr-ring { max-width: 62px; }
.nf .nr-ring circle { stroke-width: 3.2; }
.nf .nr-ring b { font-size: .8rem; }
.nf .nr.kcal .nr-ring b { font-size: .74rem; }
.nf .nr small { font: 600 .66rem/1 var(--font-primary); text-transform: none; opacity: .75; }
.nf-face > p { display: flex; align-items: center; gap: 6px; margin: 0; padding-top: 10px; border-top: 1px solid color-mix(in srgb, #fff 12%, transparent); font: 600 .78rem/1.3 var(--font-primary); color: #C8F04A; }
.nf-face > p.over { color: #F2A08F; }
.nf-face > p.under { color: #fff; opacity: .9; }
.nf-face > p svg.lc { width: 16px; height: 16px; }
.nmx-rings.nf.done .nf-face.back { background: color-mix(in srgb, #C8F04A 16%, #0E3B2E); }
@media (prefers-reduced-motion: reduce) { .nf-inner { transition: none; } }

/* ---------- Editor plan: rând de iconițe, toate pe ecran ---------- */
.mpx-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; overflow: visible; margin: 4px 0 10px; }
.mpx-tab { display: flex; flex-direction: column; align-items: center; gap: 5px; height: auto; min-width: 0; padding: 4px 2px; border: 0; border-radius: 14px; background: transparent; color: var(--text-muted); font: inherit; white-space: nowrap; }
.mpx-tab .mpx-ico { position: relative; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); color: var(--text); transition: background .15s, border-color .15s, color .15s; }
.mpx-tab .mpx-ico svg.lc { width: 20px; height: 20px; color: inherit; }
.mpx-tab small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font: 600 .66rem/1 var(--font-primary); color: var(--text-soft); }
.mpx-tab small b { font: 700 .68rem/1 var(--font-mono); color: var(--text); }
.mpx-tab.on { background: transparent; color: var(--text); }
.mpx-tab.on .mpx-ico { border-color: var(--text); background: var(--text); color: var(--bg); }
.mpx-tab.on small { color: var(--text); }
.mpx-tab.bad .mpx-ico { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); }
.mpx-tab .mpx-badge { position: absolute; top: -6px; right: -6px; border: 2px solid var(--bg); }
.mpx-tab .mpx-dot { position: absolute; top: 6px; right: 6px; }
.mpx-panel-h { display: flex; align-items: baseline; gap: 6px; margin: 0 0 10px; font: 750 .9rem/1.2 var(--font-primary); color: var(--text); }
.mpx-panel-h small { font: 500 .72rem/1 var(--font-primary); color: var(--text-soft); }

/* ---------- Nutriție (client): lista de planuri, simplă ---------- */
.npl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; }
.npl-head h1 { margin: 0; font: 800 clamp(1.7rem, 7vw, 2.1rem)/1.05 var(--font-primary); letter-spacing: -.025em; color: var(--text); }
.npl-acts { display: flex; gap: 8px; }
.npl-act { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); cursor: pointer; }
.npl-act svg.lc { width: 20px; height: 20px; }
.npl-list { display: flex; flex-direction: column; gap: 12px; }
.npl-card { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 18px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; animation: rliIn .45s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--d, 0ms); transition: border-color .15s, transform .15s; }
.npl-card:hover { border-color: var(--border-strong); }
.npl-card:active { transform: scale(.99); }
.npl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.npl-top strong { font: 750 1.08rem/1.25 var(--font-primary); letter-spacing: -.01em; }
.npl-top svg.lc { flex: none; width: 20px; height: 20px; color: var(--text-soft); }
.npl-kcal { display: flex; align-items: baseline; gap: 6px; }
.npl-kcal b { font: 800 2.1rem/1 var(--font-primary); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.npl-kcal small { font-size: .82rem; color: var(--text-soft); }
.npl-split { display: flex; gap: 3px; height: 8px; }
.npl-split i { min-width: 6px; border-radius: 999px; }
.npl-split .p, .npl-macros .p i { background: #5BC79A; } .npl-split .c, .npl-macros .c i { background: #F2B632; } .npl-split .f, .npl-macros .f i { background: #7FA3F0; }
.npl-macros { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--text-muted); }
.npl-macros > span { display: inline-flex; align-items: center; gap: 6px; }
.npl-macros i { width: 8px; height: 8px; border-radius: 50%; }
.npl-macros b { color: var(--text); font-weight: 700; }
.npl-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); font-size: .78rem; color: var(--text-soft); }
.npl-foot em { flex: none; padding: 5px 10px; border-radius: 999px; background: var(--surface-alt); font: 650 .72rem/1 var(--font-mono); font-style: normal; color: var(--text-muted); }
.npl-foot em.all { background: color-mix(in srgb, var(--st-ok) 16%, transparent); color: var(--st-ok); }

/* Planurile de antrenament: aceeași carte ca planul alimentar, se deschide pe loc. */
.tpl-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.npl-card.tpl { gap: 0; cursor: default; }
.tpl-head { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.tpl .npl-top svg.lc { transition: transform .2s; }
.tpl.open .npl-top svg.lc { transform: rotate(180deg); }
.tpl.open { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.tpl-body { padding: 14px 0 0; }
.npl-foot em.live { background: color-mix(in srgb, var(--lime) 30%, transparent); color: var(--text); }

/* Azi: scurtături spre planuri, sub cardul de salut. */
.ov-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 460px; margin: 12px 0 0; }
.ovp { --ac: var(--lime); display: flex; align-items: center; gap: 10px; min-width: 0; height: 58px; padding: 0 14px 0 9px; border: 1px solid color-mix(in srgb, var(--ac) 50%, var(--border)); border-radius: 18px; background: color-mix(in srgb, var(--ac) 14%, var(--surface)); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: transform .15s, border-color .15s; }
.ovp:hover { border-color: var(--ac); }
.ovp:active { transform: scale(.97); }
html[data-theme="dark"] .ovp { border-color: color-mix(in srgb, var(--ac) 26%, var(--border)); background: color-mix(in srgb, var(--ac) 7%, var(--surface)); }
html[data-theme="dark"] .ovp:hover { border-color: color-mix(in srgb, var(--ac) 55%, var(--border)); }
/* Cardul „Azi”: cifrele cresc când bifezi o masă */
.ndt [data-ndt] { display: inline-block; transition: transform .2s; }
.ndt [data-ndt].bump { transform: scale(1.08); }
.ndt [data-ndt-bar] { transition: width .8s cubic-bezier(.16, 1, .3, 1); }

/* ---------- Ingredient (client): fereastră în tema aplicației ---------- */
.modal.fdx { width: min(420px, 100%); color: var(--text); }
.fdx-in { display: flex; flex-direction: column; gap: 16px; max-width: 520px; margin: 0 auto; }
.fdx-head { display: flex; align-items: center; gap: 12px; }
.fdx-ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.fdx-ico svg.lc { width: 22px; height: 22px; }
.fdx-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fdx-title h2 { margin: 0; font: 800 1.2rem/1.2 var(--font-primary); letter-spacing: -.01em; }
.fdx-title small { font-size: .76rem; color: var(--text-soft); }
.fdx-x { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface-alt); color: var(--text); cursor: pointer; }
.fdx-x svg.lc { width: 18px; height: 18px; }
.fdx-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 16px; border-radius: 20px; background: var(--primary); color: var(--primary-fg); }
.fdx-hero div { display: flex; align-items: baseline; gap: 6px; }
.fdx-hero strong { font: 800 2.4rem/1 var(--font-primary); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fdx-hero span { font-size: .82rem; opacity: .75; }
.fdx-hero em { padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); font: 700 .86rem/1 var(--font-mono); font-style: normal; }
.fdx-split { display: flex; gap: 3px; height: 8px; }
.fdx-split i { min-width: 6px; border-radius: 999px; }
.fdx-split .p, .fdx-m.p span i { background: #5BC79A; } .fdx-split .c, .fdx-m.c span i { background: #F2B632; } .fdx-split .f, .fdx-m.f span i { background: #7FA3F0; }
.fdx-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fdx-m { display: flex; flex-direction: column; gap: 5px; padding: 12px; border-radius: 16px; background: var(--surface-alt); }
.fdx-m > span { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--text-soft); }
.fdx-m > span i { width: 8px; height: 8px; border-radius: 50%; }
.fdx-m b { font: 800 1.25rem/1 var(--font-primary); font-variant-numeric: tabular-nums; }
.fdx-m b small { font-size: .62em; font-weight: 600; color: var(--text-soft); }
.fdx-m > small { font: 500 .66rem/1 var(--font-mono); color: var(--text-soft); }
.fdx-share { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: baseline; margin: 0; }
.fdx-share span { font-size: .8rem; color: var(--text-muted); }
.fdx-share b { font: 750 .9rem/1 var(--font-mono); }
.fdx-share i { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.fdx-share em { display: block; height: 100%; border-radius: inherit; background: var(--chart, var(--primary)); }
.fdx-100 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.fdx-100 span { margin-right: auto; font: 500 .66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }
.fdx-100 b { padding: 5px 9px; border-radius: 999px; background: var(--surface-alt); font: 650 .74rem/1 var(--font-mono); color: var(--text-muted); }

/* ---------- Profilul specialistului (client): poza e eroul ---------- */
.cp4-hero { position: relative; margin: 6px 0 0; border-radius: 28px; overflow: hidden; background: #0E3B2E; aspect-ratio: 4 / 5; max-height: min(62dvh, 520px); width: 100%; }
.cp4-hero.none { aspect-ratio: auto; min-height: 280px; display: grid; place-items: center; }
.cp4-photo { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.cp4-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.cp4-initials { font: 800 5rem/1 var(--font-primary); letter-spacing: -.04em; color: #C8F04A; }
.cp4-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 62%; background: linear-gradient(180deg, transparent, rgba(6, 24, 18, .55) 45%, rgba(6, 24, 18, .9)); pointer-events: none; }
.cp4-open { position: absolute; z-index: 1; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(6, 24, 18, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font: 650 .74rem/1 var(--font-primary); }
.cp4-open i { width: 7px; height: 7px; border-radius: 50%; background: #F2A08F; }
.cp4-open.on i { background: #7FD9A8; }
.cp4-id { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: #fff; pointer-events: none; }
.cp4-id .spx-chip { pointer-events: auto; }
.cp4-id h1 { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 clamp(1.7rem, 7vw, 2.2rem)/1.05 var(--font-primary); letter-spacing: -.025em; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }
.cp4-id h1 .cb-verified { display: inline-grid; color: #C8F04A; }
.cp4-id p { margin: 0; max-width: 34ch; font-size: .9rem; line-height: 1.4; color: rgba(255, 255, 255, .88); }
.cp4-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 2px 0; }
.cp4-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); overflow: hidden; }
.cp4-stats > * { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 6px; border: 0; background: transparent; color: var(--text); font: inherit; text-align: center; }
.cp4-stats > * + * { border-left: 1px solid var(--border); }
.cp4-stats button { cursor: pointer; }
.cp4-stats b { font: 800 1.35rem/1 var(--font-primary); font-variant-numeric: tabular-nums; }
.cp4-stats span { font-size: .72rem; color: var(--text-soft); }
/* Secțiunile, ca restul aplicației: carduri */
.cp3 .cp3-sec { margin-top: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }
.cp3 .cp3-sec + .cp3-sec { border-top: 1px solid var(--border); }
.cp3 .cp3-sec h3 { margin-bottom: 10px; font: 750 .95rem/1.2 var(--font-primary); text-transform: none; letter-spacing: 0; color: var(--text); }
.cp4-hero.none { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 16px; min-height: 0; padding: 60px 18px 18px; }
.cp4-hero.none::after { display: none; }
.cp4-hero.none .cp4-initials { width: 92px; height: 92px; display: grid; place-items: center; border-radius: 28px; background: rgba(200, 240, 74, .12); font-size: 2.4rem; }
.cp4-hero.none .cp4-id { position: static; }

/* ---------- Specialiști (client): echipa pe scurt + listă curată ---------- */
.sp2-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp2-tools { display: flex; gap: 8px; }
.sp2-tool { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); cursor: pointer; }
.sp2-tool svg { width: 20px; height: 20px; }
.sp2-tool i { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: #0E3B2E; color: #C8F04A; font: 700 .64rem/1 var(--font-primary); font-style: normal; }
.sp2-title { margin: 10px 0 14px; font: 800 1.9rem/1.05 var(--font-primary); letter-spacing: -.03em; }
.sp2-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sp2-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 12px 4px 10px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.sp2-tile .cb-photo { width: 52px; height: 52px; border-radius: 17px; margin-bottom: 4px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sp); font-size: 1rem; }
.sp2-tile-ico { position: absolute; top: 46px; left: calc(50% + 14px); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--sp); color: #fff; box-shadow: 0 0 0 2px var(--surface); }
.sp2-tile-ico svg { width: 12px; height: 12px; }
.sp2-tile strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .82rem/1.2 var(--font-primary); }
.sp2-tile small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .66rem; color: var(--text-soft); }
.sp2-tile.wait .cb-photo { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--border-strong, var(--border)); opacity: .75; }
.sp2-tile.wait .sp2-tile-ico { background: var(--text-soft); }
.sp2-tile.add { border-style: dashed; background: transparent; }
.sp2-tile-plus { width: 52px; height: 52px; margin-bottom: 4px; display: grid; place-items: center; border-radius: 17px; background: var(--sp-soft); color: var(--sp); }
.sp2-tile-plus svg { width: 22px; height: 22px; }
.sp2-tile.add small { color: var(--sp); font-weight: 650; }
.sp2-tile:disabled { cursor: default; }
.sp2-browse { margin-top: 22px; }
.sp2-search { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.sp2-search svg { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--text-soft); stroke-width: 2; stroke-linecap: round; }
.sp2-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: 500 1rem/1 var(--font-primary); }
.sp2-chips { display: flex; gap: 8px; overflow-x: auto; margin: 12px -16px 0; padding: 0 16px 2px; scrollbar-width: none; }
.sp2-chips::-webkit-scrollbar { display: none; }
.sp2-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: 650 .85rem/1 var(--font-primary); cursor: pointer; }
.sp2-chip svg { width: 15px; height: 15px; color: var(--sp, var(--text)); }
.sp2-chip small { font: 600 .7rem/1 var(--font-primary); color: var(--text-soft); }
.sp2-chip.on { background: #0E3B2E; border-color: #0E3B2E; color: #fff; }
.sp2-chip.on svg { color: #C8F04A; }
.sp2-chip.on small { color: rgba(255, 255, 255, .7); }
.sp2-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; }
.sp2-seg { display: inline-flex; padding: 3px; border-radius: 13px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.sp2-seg button { height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text-soft); font: 650 .8rem/1 var(--font-primary); cursor: pointer; }
.sp2-seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.sp2-count { font-size: .76rem; color: var(--text-soft); white-space: nowrap; }
.cb2-list { display: flex; flex-direction: column; gap: 10px; }
.cb2 { display: flex; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.cb2:active { transform: scale(.985); }
.cb2.current { border-color: var(--sp); box-shadow: inset 0 0 0 1px var(--sp); }
.cb2-photo { position: relative; flex: none; align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer; }
.cb2-photo .cb-photo { width: 76px; height: 76px; border-radius: 20px; font-size: 1.25rem; }
.cb2-type { position: absolute; right: -5px; bottom: -5px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--sp); color: #fff; box-shadow: 0 0 0 3px var(--surface); }
.cb2-type svg { width: 14px; height: 14px; }
.cb2-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cb2-name { display: flex; align-items: center; gap: 6px; font: 750 1.02rem/1.2 var(--font-primary); }
.cb2-name .cb-verified { display: inline-grid; flex: none; }
.cb2-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; line-height: 1.35; color: var(--text-soft); }
.cb2-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .76rem; color: var(--text-soft); }
.cb2-meta span { display: inline-flex; align-items: center; gap: 4px; }
.cb2-meta svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cb2-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.cb2-rate { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; }
.cb2-rate svg { width: 15px; height: 15px; fill: #F5B83D; }
.cb2-rate small { color: var(--text-soft); font-size: .74rem; }
.cb2-rate small.new { padding: 4px 8px; border-radius: 999px; background: var(--sp-soft); color: var(--sp); font-weight: 650; }
.cb2-send { height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: #C8F04A; color: #0E3B2E; font: 750 .84rem/1 var(--font-primary); cursor: pointer; }
.cb2-send:disabled { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-soft); }
.cb2-state { display: inline-flex; align-items: center; gap: 5px; font: 650 .78rem/1.2 var(--font-primary); color: var(--text-soft); text-align: right; }
.cb2-state svg { width: 14px; height: 14px; }
.cb2-state.ok { color: var(--sp); }
.sp2-sheet .spx-sec { margin: 0; padding: 0; border: 0; }
.sp2-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sp2-sheet-head h2 { margin: 0; font: 800 1.3rem/1.1 var(--font-primary); }
.cp3-current { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; }
.cp3-leave { border: 0; background: none; padding: 8px 0; color: var(--text-soft); font: 600 .82rem/1 var(--font-primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sp2-tile-ico svg, .cb2-type svg, .sp2-chip svg, .sp2-tile-plus svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp2-search input, .sp2-search input:focus { height: 100%; padding: 0; border: 0 !important; border-radius: 0; box-shadow: none !important; background: transparent; }
.sp2-search:focus-within { border-color: var(--sp-trainer, #1F8A5B); }
.sp2-find .sp2-browse { margin-top: 8px; }
.sp2-sheet .sp2-team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sp2-sheet .sp2-tile { padding: 18px 8px 14px; }
.sp2-sheet .sp2-tile .cb-photo, .sp2-sheet .sp2-tile-plus { width: 68px; height: 68px; border-radius: 22px; }
.sp2-sheet .sp2-tile-ico { top: 64px; left: calc(50% + 20px); }
.sp2-sheet .sp2-tile strong { font-size: .95rem; }
.sp2-sheet .sp2-tile small { font-size: .74rem; }

/* ---------- Tabbar: sticlă mată, contur fin egal ---------- */
.tabbar, body.ios-shell .tabbar,
[data-theme="light"] .tabbar, [data-theme="light"] body.ios-shell .tabbar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(244, 250, 246, .66)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.8) !important;
  backdrop-filter: blur(22px) saturate(1.8) !important;
  border: 1px solid rgba(14, 59, 46, .15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 10px 30px -12px rgba(8, 36, 28, .28),
    0 2px 6px -2px rgba(8, 36, 28, .08) !important;
}
[data-theme="dark"] .tabbar, [data-theme="dark"] body.ios-shell .tabbar {
  background:
    linear-gradient(180deg, rgba(22, 64, 50, .72), rgba(8, 36, 28, .66)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.6) !important;
  backdrop-filter: blur(22px) saturate(1.6) !important;
  border: 1px solid rgba(200, 240, 74, .14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 12px 32px -12px rgba(0, 0, 0, .55) !important;
}

/* ---------- Cardul „Ziua ta” (client): flip, inel, XP, serie ---------- */
.hero-card.zt { position: relative; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; perspective: 1400px; min-height: 236px; }
.hero-card.zt::before, .hero-card.zt::after { display: none !important; }
.zt-in { position: relative; min-height: 236px; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.zt.flipped .zt-in { transform: rotateY(180deg); }
.zt-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 18px 18px 16px; border-radius: 28px; overflow: hidden; color: #fff; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(200, 240, 74, .22), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(98, 165, 50, .28), transparent 60%),
    linear-gradient(160deg, #134A39, #0E3B2E 55%, #08241C);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px -22px rgba(8, 36, 28, .7); }
.zt-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px); background-size: 14px 14px; mask-image: linear-gradient(200deg, #000, transparent 70%); -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); }
.zt-front { cursor: pointer; }
.zt-back { transform: rotateY(180deg); }
.zt-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zt-lv { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, .1); font: 650 .76rem/1 var(--font-primary); color: rgba(255, 255, 255, .9); }
.zt-lv b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #C8F04A; color: #0E3B2E; font: 800 .74rem/1 var(--font-primary); }
.zt-streak { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .08); font: 600 .76rem/1 var(--font-primary); color: rgba(255, 255, 255, .6); }
.zt-streak svg { width: 15px; height: 15px; }
.zt-streak b { font-weight: 800; color: #fff; }
.zt-streak.on { background: rgba(255, 159, 67, .16); color: #FFD3A8; }
.zt-streak.on svg { color: #FF9F43; fill: rgba(255, 159, 67, .35); animation: zt-flame 1.6s ease-in-out infinite; }
.zt-streak.risk svg { animation-duration: .9s; }
@keyframes zt-flame { 50% { transform: scale(1.12) rotate(-4deg); } }
.zt-main { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin: 14px 0 12px; }
.zt-hello { flex: 1; min-width: 0; }
.zt-hello h2 { margin: 0 0 6px; font: 800 clamp(1.6rem, 7vw, 2rem)/1.05 var(--font-primary); letter-spacing: -.03em; color: #fff; }
.zt-hello p { margin: 0; font-size: .86rem; line-height: 1.4; color: rgba(255, 255, 255, .72); }
.zt-ring { position: relative; flex: none; width: 96px; height: 96px; }
.zt-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.zt-ring circle { fill: none; stroke-width: 9; }
.zt-ring-bg { stroke: rgba(255, 255, 255, .1); }
.zt-ring-fg { stroke: #C8F04A; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 0 6px rgba(200, 240, 74, .45)); }
.zt-ring span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.zt-ring b { font: 800 1.35rem/1 var(--font-primary); font-variant-numeric: tabular-nums; color: #fff; }
.zt-ring small { margin-top: 3px; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.zt.complete .zt-ring { animation: zt-pulse 2.4s ease-in-out infinite; }
@keyframes zt-pulse { 50% { transform: scale(1.05); } }
.zt-xp { position: relative; z-index: 1; margin-top: auto; }
.zt-xp-row { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 7px; font-size: .74rem; color: rgba(255, 255, 255, .62); }
.zt-xp-row b { font-weight: 700; color: #C8F04A; font-variant-numeric: tabular-nums; }
.zt-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.zt-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #62A532, #C8F04A); box-shadow: 0 0 10px rgba(200, 240, 74, .5); transition: width 1s ease; }
.zt-hint { position: absolute; z-index: 1; right: 16px; bottom: 44px; display: none; }
.zt-front .zt-hint { position: relative; right: auto; bottom: auto; display: inline-flex; align-self: center; align-items: center; gap: 6px; margin-top: 10px; font: 600 .72rem/1 var(--font-primary); color: rgba(255, 255, 255, .5); }
.zt-hint svg { width: 13px; height: 13px; }
.zt-back-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.zt-back-head strong { font: 800 1.05rem/1 var(--font-primary); }
.zt-flip { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.zt-flip svg { width: 16px; height: 16px; }
.zt-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.zt-m { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .07); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.zt-m-ico { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, .1); }
.zt-m-ico svg { width: 15px; height: 15px; }
.zt-m-txt { flex: 1; min-width: 0; font: 600 .84rem/1.2 var(--font-primary); }
.zt-m small { flex: none; font: 700 .7rem/1 var(--font-primary); color: #C8F04A; }
.zt-m.done { background: rgba(200, 240, 74, .1); }
.zt-m.done .zt-m-ico { background: #C8F04A; color: #0E3B2E; }
.zt-m.done .zt-m-txt { color: rgba(255, 255, 255, .7); }
.zt-m.done small { color: rgba(200, 240, 74, .55); text-decoration: line-through; }
@media (prefers-reduced-motion: reduce) {
  .zt-in, .zt-ring-fg, .zt-bar i { transition: none; }
  .zt-streak.on svg, .zt.complete .zt-ring { animation: none; }
}
.hero-card.zt .zt-face { background:
    radial-gradient(120% 90% at 100% 0%, rgba(200, 240, 74, .22), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(98, 165, 50, .28), transparent 60%),
    linear-gradient(160deg, #134A39, #0E3B2E 55%, #08241C) !important;
  border: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px -22px rgba(8, 36, 28, .7) !important; }
.hero-card.zt, .zt-in { min-height: 0; height: 272px; }
.zt-m { padding: 5px 10px 5px 5px; }
.zt-list { gap: 5px; }
.hero-card.zt, .zt-in { height: 284px; }
/* iOS Safari ignoră backface-visibility când fața are straturi proprii
   (z-index, ::after): ascundem fața nevăzută exact la jumătatea rotirii. */
.zt-front { transform: rotateY(0deg) translateZ(1px); }
.zt-back { transform: rotateY(180deg) translateZ(1px); }
.zt .zt-front, .zt .zt-back { transition: visibility 0s linear .35s; }
.zt .zt-back, .zt.flipped .zt-front { visibility: hidden; pointer-events: none; }
.zt.flipped .zt-back { visibility: visible; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .zt .zt-front, .zt .zt-back { transition: none; } }
/* Flip 2D (JS): o singură față vizibilă, fără 3D între fețe. */
.hero-card.zt { perspective: none; }
.hero-card.zt .zt-in, .hero-card.zt.flipped .zt-in { transform: none; transform-style: flat; transition: none; will-change: transform; }
.hero-card.zt .zt-face { transform: none !important; -webkit-backface-visibility: visible; backface-visibility: visible; transition: none !important; visibility: visible !important; pointer-events: auto !important; }
.hero-card.zt .zt-back, .hero-card.zt.flipped .zt-front { display: none; }
.hero-card.zt.flipped .zt-back { display: flex; }

/* ---------- Greutate (client): inel spre țintă, etape, cântărire cu +/- ---------- */
.wg2-hero { position: relative; overflow: hidden; padding: 16px 18px 18px; border-radius: 28px; color: #fff;
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(200, 240, 74, .2), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(98, 165, 50, .26), transparent 60%),
    linear-gradient(160deg, #134A39, #0E3B2E 55%, #08241C);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px -22px rgba(8, 36, 28, .7); }
.wg2-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px); background-size: 14px 14px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%); }
.wg2-hero > * { position: relative; z-index: 1; }
.wg2-hero.pop { animation: wg2-pop .6s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes wg2-pop { 30% { transform: scale(1.025); } }
.wg2-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wg2-streak { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); font: 600 .76rem/1 var(--font-primary); color: rgba(255, 255, 255, .6); }
.wg2-streak svg { width: 15px; height: 15px; }
.wg2-streak b { color: #fff; font-weight: 800; }
.wg2-streak.on { background: rgba(255, 159, 67, .16); color: #FFD3A8; }
.wg2-streak.on svg { color: #FF9F43; fill: rgba(255, 159, 67, .35); animation: zt-flame 1.6s ease-in-out infinite; }
.wg2-goal { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; font: 700 .8rem/1 var(--font-primary); cursor: pointer; }
.wg2-goal svg { width: 15px; height: 15px; color: #C8F04A; }
.wg2-gauge { position: relative; width: 232px; max-width: 76%; margin: 6px auto 0; aspect-ratio: 1; }
.wg2-gauge svg { width: 100%; height: 100%; transform: rotate(135deg); overflow: visible; }
.wg2-gauge circle { fill: none; }
.wg2-arc-bg, .wg2-arc { stroke-width: 12; stroke-linecap: round; }
.wg2-arc-bg { stroke: rgba(255, 255, 255, .1); }
.wg2-arc { stroke: url(#none); stroke: #C8F04A; transition: stroke-dashoffset 1.2s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 0 8px rgba(200, 240, 74, .45)); }
.wg2-tick { fill: #0E3B2E !important; stroke: rgba(255, 255, 255, .3); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transition: all .4s ease; }
.wg2-tick.on { fill: #C8F04A !important; stroke: #0E3B2E; }
.wg2-now { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding-bottom: 10px; }
.wg2-now strong { display: flex; align-items: baseline; gap: 4px; font: 800 3.1rem/1 var(--font-primary); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.wg2-now strong small { font-size: 1rem; font-weight: 700; letter-spacing: 0; color: rgba(255, 255, 255, .6); }
.wg2-now em { font-style: normal; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); font: 650 .74rem/1 var(--font-primary); color: rgba(255, 255, 255, .8); }
.wg2-now em.down { background: rgba(200, 240, 74, .16); color: #C8F04A; }
.wg2-now em.up { background: rgba(255, 159, 67, .16); color: #FFD3A8; }
.wg2-ends { position: absolute; left: 6%; right: 6%; bottom: 4%; display: flex; justify-content: space-between; }
.wg2-ends span { display: flex; flex-direction: column; align-items: center; font: 750 .86rem/1.1 var(--font-primary); }
.wg2-ends small { font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.wg2-msg { margin: 6px 0 12px; text-align: center; font-size: .86rem; color: rgba(255, 255, 255, .72); }
.wg2-msg b { color: #fff; }
.wg2-stones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wg2-stones span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; border-radius: 14px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .35); font: 700 .72rem/1 var(--font-primary); }
.wg2-stones svg { width: 17px; height: 17px; }
.wg2-stones span.on { background: rgba(200, 240, 74, .14); color: #C8F04A; box-shadow: inset 0 0 0 1px rgba(200, 240, 74, .3); }
.wg2-add { margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); }
.wg2-add-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.wg2-add-head strong { display: inline-flex; align-items: center; gap: 6px; font: 750 .98rem/1 var(--font-primary); }
.wg2-add-head strong svg { width: 17px; height: 17px; color: var(--success, #1F8A5B); }
.wg2-add-head small { font-size: .76rem; color: var(--text-soft); }
.wg2-step { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 10px; }
.wg2-pm { height: 56px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); cursor: pointer; transition: transform .1s ease; }
.wg2-pm:active { transform: scale(.92); background: color-mix(in srgb, var(--text) 6%, transparent); }
.wg2-pm svg { width: 22px; height: 22px; }
.wg2-val { display: flex; align-items: baseline; justify-content: center; gap: 4px; height: 56px; border-radius: 18px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.wg2-val input { width: 5ch; padding: 0; border: 0 !important; outline: 0; box-shadow: none !important; background: transparent; color: var(--text); text-align: right; font: 800 2rem/56px var(--font-primary); letter-spacing: -.03em; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.wg2-val input::-webkit-outer-spin-button, .wg2-val input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wg2-val span { font: 700 .95rem/1 var(--font-primary); color: var(--text-soft); }
.wg2-val.bump input { animation: wg2-bump .22s ease; }
@keyframes wg2-bump { 40% { transform: translateY(-2px) scale(1.06); } }
.wg2-save { width: 100%; height: 52px; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 18px; background: #C8F04A; color: #0E3B2E; font: 800 .98rem/1 var(--font-primary); cursor: pointer; }
.wg2-save small { padding: 4px 8px; border-radius: 999px; background: rgba(14, 59, 46, .12); font: 700 .7rem/1 var(--font-primary); }
.wg2-add.done .wg2-save { background: #0E3B2E; color: #fff; }
.wg2-add.done .wg2-save small { background: rgba(200, 240, 74, .18); color: #C8F04A; }
.wg2-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); overflow: hidden; }
.wg2-stats > div { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 13px 4px; }
.wg2-stats > div + div { border-left: 1px solid var(--border); }
.wg2-stats span { font-size: .7rem; color: var(--text-soft); }
.wg2-stats b { font: 800 1.15rem/1 var(--font-primary); font-variant-numeric: tabular-nums; }
.wg2-stats b.down { color: var(--success, #1F8A5B); }
.wg2-chart { margin-top: 12px; padding: 14px 12px 8px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); }
.wg2-chart-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 6px; }
.wg2-chart-head strong { font: 750 .98rem/1 var(--font-primary); }
.wg2-chart-head small { font-size: .74rem; color: var(--text-soft); }
.wg2 .weight-panel, .wg2 .pp-card, .wg2 > section.card { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .wg2-arc { transition: none; } .wg2-hero.pop, .wg2-val.bump input, .wg2-streak.on svg { animation: none; } }
.wg2-val input, .wg2-val input:focus { background: transparent !important; height: 56px; min-height: 0; border-radius: 0; }
.wg2 .wg2-val input[type="number"] { width: 5ch !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 2rem !important; }
[data-theme] #view-weight .wg2-val input, #view-weight .wg2-val input { background: transparent !important; }

/* ---------- „Ziua ta”: mișcare discretă ---------- */
.zt-aura { position: absolute; z-index: 0; width: 70%; aspect-ratio: 1; border-radius: 50%; filter: blur(38px); opacity: .55; pointer-events: none; }
.zt-aura.a1 { top: -35%; right: -20%; background: radial-gradient(circle, rgba(200, 240, 74, .55), transparent 65%); animation: zt-drift1 14s ease-in-out infinite alternate; }
.zt-aura.a2 { bottom: -45%; left: -25%; background: radial-gradient(circle, rgba(70, 190, 140, .5), transparent 65%); animation: zt-drift2 18s ease-in-out infinite alternate; }
@keyframes zt-drift1 { to { transform: translate(-22%, 18%) scale(1.15); } }
@keyframes zt-drift2 { to { transform: translate(28%, -14%) scale(.9); } }
.zt-sheen { position: absolute; z-index: 0; inset: -20% auto -20% -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .09) 45%, rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, .09) 55%, transparent); transform: skewX(-18deg); pointer-events: none; animation: zt-sheen 9s ease-in-out 2s infinite; }
@keyframes zt-sheen { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.zt-front > :not(.zt-aura):not(.zt-sheen) { position: relative; z-index: 1; }
.zt-date { display: block; margin-bottom: 4px; font: 600 .7rem/1 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #C8F04A; opacity: .85; }
.hero-card.zt .zt-ring-fg { stroke: url(#zt-grad); }
.zt-ring::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(200, 240, 74, .18), transparent 70%); animation: zt-breathe 4s ease-in-out infinite; }
@keyframes zt-breathe { 50% { transform: scale(1.12); opacity: .6; } }
.zt-bar i { position: relative; overflow: hidden; }
.zt-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-100%); animation: zt-shine 3.2s ease-in-out 1.2s infinite; }
@keyframes zt-shine { 60%, 100% { transform: translateX(100%); } }
/* intrare: pe rând, o dată pe sesiune */
.zt.intro .zt-top, .zt.intro .zt-hello, .zt.intro .zt-ring, .zt.intro .zt-xp, .zt.intro .zt-hint { animation: zt-in .7s cubic-bezier(.2, .8, .2, 1) both; }
.zt.intro .zt-hello { animation-delay: .08s; }
.zt.intro .zt-ring { animation-name: zt-in-ring; animation-delay: .16s; }
.zt.intro .zt-xp { animation-delay: .24s; }
.zt.intro .zt-hint { animation-delay: .32s; }
@keyframes zt-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes zt-in-ring { from { opacity: 0; transform: scale(.8) rotate(-20deg); } }
@media (prefers-reduced-motion: reduce) {
  .zt-aura, .zt-sheen, .zt-ring::before, .zt-bar i::after { animation: none; }
  .zt.intro * { animation: none !important; }
}

/* ---------- „Ziua ta”: mai scurt + o lumină care se plimbă pe contur ---------- */
.hero-card.zt, .zt-in { height: 232px; }
.zt-main { margin: 10px 0 8px; }
.zt-ring { width: 84px; height: 84px; }
.zt-hello h2 { font-size: clamp(1.45rem, 6.4vw, 1.8rem); }
.zt-top-r { display: inline-flex; align-items: center; gap: 6px; }
.zt-turn { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .7); }
.zt-turn svg { width: 14px; height: 14px; }
.zt-front:active .zt-turn { transform: rotate(90deg); transition: transform .25s ease; }
/* spatele: rânduri mai strânse ca să încapă în cardul mai scurt */
.zt-back { padding: 14px 14px 12px; }
.zt-back-head { margin-bottom: 6px; }
.zt-flip { width: 30px; height: 30px; }
.zt-list { gap: 4px; }
.zt-m { padding: 4px 10px 4px 4px; border-radius: 12px; }
.zt-m-ico { width: 26px; height: 26px; border-radius: 8px; }
.zt-m-txt { font-size: .8rem; }
/* lumina de pe contur */
@property --zt-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.zt-edge { position: absolute; z-index: 2; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--zt-a), transparent 0deg, transparent 290deg, rgba(200, 240, 74, .0) 300deg, rgba(228, 255, 138, .95) 340deg, rgba(200, 240, 74, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: zt-edge 7s linear infinite; filter: drop-shadow(0 0 4px rgba(200, 240, 74, .6)); }
@keyframes zt-edge { to { --zt-a: 360deg; } }
.zt-sheen { display: none; }
@media (prefers-reduced-motion: reduce) { .zt-edge { animation: none; opacity: .4; } }
.zt-list { flex: 1; min-height: 0; gap: 4px; }
.zt-m { padding: 3px 10px 3px 3px; }
.zt-m-ico { width: 24px; height: 24px; }
.zt-m-ico svg { width: 13px; height: 13px; }
.zt-back-head strong { font-size: .98rem; }
.zt-back { padding: 12px 14px 10px; }

/* ---------- „Ziua ta”: iconițele misiunilor în locul XP ---------- */
.zt-xp, .zt-m small { display: none; }
.zt-chips { position: relative; z-index: 1; display: flex; gap: 8px; margin-top: auto; }
.zt-chip { --p: 0; position: relative; flex: 1; height: 40px; display: grid; place-items: center; border-radius: 14px; color: rgba(255, 255, 255, .55);
  background: linear-gradient(0deg, rgba(200, 240, 74, .22) calc(var(--p) * 1%), rgba(255, 255, 255, .07) calc(var(--p) * 1%)); }
.zt-chip svg { width: 18px; height: 18px; }
.zt-chip.part { color: #E4FF8A; }
.zt-chip.done { background: #C8F04A; color: #0E3B2E; box-shadow: 0 6px 16px -8px rgba(200, 240, 74, .8); }
.zt-chip i { position: absolute; top: -5px; right: -5px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: #0E3B2E; color: #C8F04A; box-shadow: 0 0 0 2px #C8F04A; font-style: normal; }
.zt-chip i svg { width: 10px; height: 10px; stroke-width: 3; }
.zt.intro .zt-chip { animation: zt-in .6s cubic-bezier(.2, .8, .2, 1) both; }
.zt.intro .zt-chip:nth-child(2) { animation-delay: .26s; } .zt.intro .zt-chip:nth-child(3) { animation-delay: .32s; }
.zt.intro .zt-chip:nth-child(4) { animation-delay: .38s; } .zt.intro .zt-chip:nth-child(5) { animation-delay: .44s; }
.zt-m > svg.lc { flex: none; width: 16px; height: 16px; color: rgba(255, 255, 255, .45); }
.zt-top > span:first-child:empty { display: none; }
.zt-top { justify-content: flex-end; }
/* Safari nu taie copiii cu blur/transform animat la border-radius: tăiem explicit. */
.hero-card.zt .zt-face { clip-path: inset(0 round 28px); -webkit-mask-image: -webkit-radial-gradient(white, black); isolation: isolate; }
.wg2-hero { clip-path: inset(0 round 28px); isolation: isolate; }

/* ---------- Notificări push: cererea de permisiune ---------- */
.pask { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; justify-content: center; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: rgba(6, 24, 18, 0); transition: background .3s ease; }
.pask.on { background: rgba(6, 24, 18, .45); }
.pask-card { position: relative; width: min(440px, 100%); padding: 26px 20px 16px; border-radius: 30px; text-align: center; color: #fff; overflow: hidden; clip-path: inset(0 round 30px);
  background: radial-gradient(110% 80% at 100% 0%, rgba(200, 240, 74, .22), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(98, 165, 50, .26), transparent 60%), linear-gradient(160deg, #134A39, #0E3B2E 55%, #08241C);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6); transform: translateY(110%); transition: transform .45s cubic-bezier(.2, .9, .25, 1); }
.pask.on .pask-card { transform: none; }
.pask-bell { width: 64px; height: 64px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 22px; background: #C8F04A; color: #0E3B2E; box-shadow: 0 10px 28px -10px rgba(200, 240, 74, .8); }
.pask-bell svg { width: 30px; height: 30px; transform-origin: 50% 10%; animation: pask-ring 2.6s ease-in-out .5s infinite; }
@keyframes pask-ring { 0%, 60%, 100% { transform: rotate(0); } 64% { transform: rotate(14deg); } 70% { transform: rotate(-12deg); } 76% { transform: rotate(8deg); } 82% { transform: rotate(-5deg); } }
.pask-card h2 { margin: 0 0 8px; font: 800 1.4rem/1.15 var(--font-primary); letter-spacing: -.02em; color: #fff; }
.pask-card p { margin: 0 auto 16px; max-width: 32ch; font-size: .88rem; line-height: 1.45; color: rgba(255, 255, 255, .72); }
.pask-card ul { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; text-align: left; }
.pask-card li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .07); font: 600 .88rem/1.3 var(--font-primary); }
.pask-card li svg { flex: none; width: 18px; height: 18px; color: #C8F04A; }
.pask-yes { width: 100%; height: 54px; border: 0; border-radius: 18px; background: #C8F04A; color: #0E3B2E; font: 800 1rem/1 var(--font-primary); cursor: pointer; }
.pask-no { width: 100%; height: 44px; margin-top: 6px; border: 0; background: none; color: rgba(255, 255, 255, .6); font: 650 .9rem/1 var(--font-primary); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .pask, .pask-card { transition: none; } .pask-bell svg { animation: none; } }

/* ---------- Notificări push: setări ---------- */
.pns { display: flex; flex-direction: column; gap: 12px; }
.pns-status { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.pns-status.on { background: color-mix(in srgb, #1F8A5B 12%, transparent); }
.pns-status.no { background: color-mix(in srgb, #D9534F 10%, transparent); }
.pns-ico { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: var(--surface); color: var(--text-soft); }
.pns-status.on .pns-ico { background: #1F8A5B; color: #fff; }
.pns-status.no .pns-ico { background: #D9534F; color: #fff; }
.pns-ico svg { width: 18px; height: 18px; }
.pns-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pns-txt strong { font: 750 .92rem/1.25 var(--font-primary); }
.pns-txt small { font-size: .76rem; line-height: 1.4; color: var(--text-soft); }
.pns-on { flex: none; height: 38px; padding: 0 16px; border: 0; border-radius: 13px; background: #C8F04A; color: #0E3B2E; font: 800 .86rem/1 var(--font-primary); cursor: pointer; }
.pns-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); overflow: hidden; }
.pns-list.dim { opacity: .55; }
.pns-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; cursor: pointer; }
.pns-row + .pns-row { border-top: 1px solid var(--border); }
.pns-row-ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.pns-row-ico svg { width: 17px; height: 17px; }
.pns-row-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pns-row-txt strong { font: 700 .9rem/1.25 var(--font-primary); }
.pns-row-txt small { font-size: .74rem; line-height: 1.35; color: var(--text-soft); }
.pns-sw { position: relative; flex: none; width: 50px; height: 30px; }
.pns-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pns-sw i { position: absolute; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 18%, transparent); transition: background .2s ease; pointer-events: none; }
.pns-sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .22s cubic-bezier(.3, .8, .3, 1.2); }
.pns-sw input:checked + i { background: #1F8A5B; }
.pns-sw input:checked + i::after { transform: translateX(20px); }
.pns-off { align-self: center; border: 0; background: none; padding: 8px; color: var(--text-soft); font: 650 .84rem/1 var(--font-primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
body:has(.pask) .tabbar { display: none !important; }
.pns-h { margin: 6px 4px -4px; font: 750 .78rem/1 var(--font-primary); letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft); }
.pns-list.fun .pns-row-ico { background: color-mix(in srgb, #C8F04A 35%, transparent); color: #0E3B2E; }
[data-theme="dark"] .pns-list.fun .pns-row-ico { color: #C8F04A; background: rgba(200, 240, 74, .14); }
/* misiune gata: fără lime plin, doar o bifă discretă */
.zt-chip.done { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85); box-shadow: none; }
.zt-chip i { top: 4px; right: 4px; width: 13px; height: 13px; background: rgba(200, 240, 74, .9); color: #0E3B2E; box-shadow: none; }
.zt-chip i svg { width: 8px; height: 8px; stroke-width: 3.5; }

/* ---------- Profil client: antet compact, grupuri clare ---------- */
.pf2-head { width: 100%; display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; padding: 14px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pf2-av { position: relative; flex: none; }
.pf2-av .avatar { width: 58px !important; height: 58px !important; font-size: 1.15rem; }
.pf2-av i { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #0E3B2E; color: #C8F04A; box-shadow: 0 0 0 2px var(--surface); }
.pf2-av i svg { width: 12px; height: 12px; }
.pf2-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pf2-id strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 1.2rem/1.15 var(--font-primary); letter-spacing: -.02em; }
.pf2-id small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; color: var(--text-soft); }
.pf2 .pf-group { margin-top: 18px; }
.pf2 .pf-group > .pf-energy-card, .pf2 .pf-group > .pf-macro-card { margin: 0; }
.pf2-facts { margin-top: 10px; }
.pf2-facts > div { padding: 10px 12px; }
.pf2-av i svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* confirmarea după „Allow” */
.pask-card.ok ul, .pask-card.ok .pask-yes, .pask-card.ok .pask-no { opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.pask-card.ok .pask-bell { animation: pask-pop .5s cubic-bezier(.2, .9, .3, 1.4); box-shadow: 0 0 0 0 rgba(200, 240, 74, .6); }
.pask-card.ok .pask-bell::after { content: ""; position: absolute; inset: -6px; border-radius: 26px; border: 2px solid rgba(200, 240, 74, .7); animation: pask-wave .9s ease-out forwards; }
.pask-bell { position: relative; }
.pask-card.ok .pask-bell svg { animation: none; stroke-width: 2.6; }
@keyframes pask-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes pask-wave { to { inset: -26px; opacity: 0; border-radius: 40px; } }
.pask:not(.on) .pask-card { transition-duration: .3s; }

/* ---------- Datele mele (client): live + carduri de ales ---------- */
.dm { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; }
.dm-live { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px; border-radius: 24px; color: #fff; clip-path: inset(0 round 24px);
  background: radial-gradient(110% 80% at 100% 0%, rgba(200, 240, 74, .2), transparent 55%), linear-gradient(160deg, #134A39, #0E3B2E 55%, #08241C); }
.dm-live > div { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .07); }
.dm-live > div.hl { background: #C8F04A; color: #0E3B2E; }
.dm-live span { font: 600 .64rem/1 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.dm-live b { font: 800 1.3rem/1 var(--font-primary); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.dm-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); }
.dm-card h3 { margin: 0 2px 2px; font: 750 .98rem/1 var(--font-primary); }
.dm-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 16px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.dm-seg button { height: 42px; border: 0; border-radius: 12px; background: transparent; color: var(--text-soft); font: 700 .9rem/1 var(--font-primary); cursor: pointer; }
.dm-seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.dm-step { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dm-step-lbl { font: 650 .9rem/1 var(--font-primary); }
.dm-step-ctl { display: grid; grid-template-columns: 42px 112px 42px; align-items: center; gap: 6px; }
.dm-step-ctl button { height: 42px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); cursor: pointer; }
.dm-step-ctl button:active { transform: scale(.92); }
.dm-step-ctl button svg { width: 18px; height: 18px; }
.dm-step-ctl label { height: 42px; display: flex; align-items: baseline; justify-content: center; gap: 4px; border-radius: 14px; background: color-mix(in srgb, var(--text) 5%, transparent); }
#view-settings .dm-step-ctl input[type="number"] { width: 4.2ch !important; min-width: 0 !important; height: 42px; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: right; font: 800 1.15rem/42px var(--font-primary) !important; color: var(--text) !important; -moz-appearance: textfield; }
.dm-step-ctl input::-webkit-outer-spin-button, .dm-step-ctl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dm-step-ctl em { font-style: normal; font: 650 .76rem/1 var(--font-primary); color: var(--text-soft); }
.dm-acts { display: flex; flex-direction: column; gap: 6px; }
.dm-acts button { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.dm-acts button.on { border-color: #1F8A5B; box-shadow: inset 0 0 0 1px #1F8A5B; background: color-mix(in srgb, #1F8A5B 7%, var(--surface)); }
.dm-bars { flex: none; display: flex; align-items: flex-end; gap: 2px; height: 20px; }
.dm-bars i { width: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text) 14%, transparent); }
.dm-bars i:nth-child(1) { height: 30%; } .dm-bars i:nth-child(2) { height: 42%; } .dm-bars i:nth-child(3) { height: 55%; } .dm-bars i:nth-child(4) { height: 70%; } .dm-bars i:nth-child(5) { height: 85%; } .dm-bars i:nth-child(6) { height: 100%; }
.dm-bars i.f { background: #1F8A5B; }
.dm-act-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-act-txt strong { font: 700 .88rem/1.2 var(--font-primary); }
.dm-act-txt small { font-size: .74rem; color: var(--text-soft); }
.dm-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); }
.dm-acts button.on .dm-dot { border-color: #1F8A5B; background: radial-gradient(circle, #1F8A5B 45%, transparent 50%); }
.dm-goals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dm-goals button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px 12px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.dm-goals button svg { width: 22px; height: 22px; color: var(--text-soft); }
.dm-goals strong { font: 750 .82rem/1.15 var(--font-primary); text-align: center; }
.dm-goals small { font-size: .7rem; color: var(--text-soft); }
.dm-goals button.on { background: #0E3B2E; border-color: #0E3B2E; color: #fff; }
.dm-goals button.on svg { color: #C8F04A; }
.dm-goals button.on small { color: rgba(255, 255, 255, .7); }
.dm-save { height: 54px; border: 0; border-radius: 18px; background: #C8F04A; color: #0E3B2E; font: 800 1rem/1 var(--font-primary); cursor: pointer; }
.dm-save:disabled { opacity: .7; }
.pf2 .pf-group > .pf-energy-card + .pf-macro-card { margin-top: 10px; }

/* ---------- Fișele de început în stilul „Datele mele” ---------- */
.dm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-chips button { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: 650 .84rem/1 var(--font-primary); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.dm-chips button svg { width: 16px; height: 16px; color: var(--text-soft); }
.dm-chips button.on { border-color: #1F8A5B; box-shadow: inset 0 0 0 1px #1F8A5B; background: color-mix(in srgb, #1F8A5B 10%, var(--surface)); }
.dm-chips button.on svg { color: #1F8A5B; }
.dm-chips button:active, .dm-seg button:active, .dm-goals button:active, .dm-acts button:active { transform: scale(.97); }
.dm-sub[hidden] { display: none; }
.dm-sub { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.dm-sub small { font-size: .78rem; color: var(--text-soft); }
.dm-seg.c7 { grid-template-columns: repeat(7, 1fr); }
.dm-seg.c7 button { font-variant-numeric: tabular-nums; }
.dm-seg.c2x2 { grid-template-columns: 1fr 1fr; gap: 4px; }
.dm-goals.g2 { grid-template-columns: 1fr 1fr; }
.dm-goals.g2 button { display: grid; grid-template-columns: 22px 1fr; align-items: center; column-gap: 10px; row-gap: 2px; padding: 12px; text-align: left; }
.dm-goals.g2 strong { text-align: left; }
.dm-goals.g2 button > svg { grid-row: 1 / 3; align-self: center; }
.dm-goals.g2 small { grid-column: 2; }
body.onboarding-page .dm { gap: 10px; padding-bottom: 8px; }
body.onboarding-page .dm-card h3 { margin-top: 0; }
body.onboarding-page .onboarding-step .dm-step-ctl label { display: flex !important; margin: 0 !important; color: var(--text); font-size: inherit; }
body.onboarding-page .onboarding-step .dm-step-ctl input:not([type="file"]):not([type="checkbox"]):not([type="radio"]) { width: 4.2ch !important; min-width: 0 !important; height: 42px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; text-align: right; font: 800 1.15rem/42px var(--font-primary) !important; color: var(--text) !important; -moz-appearance: textfield; }
body.onboarding-page .onboarding-step .dm-input:not([type="file"]):not([type="checkbox"]):not([type="radio"]) { margin: 0 !important; }
body.onboarding-page .onboarding-step textarea.dm-input { min-height: 64px !important; }
body.onboarding-page .dm-live b { font-size: 1.2rem; }
.client-onboarding .onboarding-result .dm { margin: 4px 0 18px; text-align: left; }
@media (max-height: 720px) {
  body.onboarding-page .dm-card { padding: 12px; gap: 8px; }
  body.onboarding-page .dm-live { padding: 10px; }
  .dm-chips button { height: 34px; padding: 0 12px; font-size: .8rem; }
  .dm-acts button { padding: 8px 12px; }
  .dm-goals.g2 button { padding: 10px; }
}
[data-theme="dark"] .dm-chips button.on { border-color: #C8F04A; box-shadow: inset 0 0 0 1px #C8F04A; background: rgba(200, 240, 74, .12); }
[data-theme="dark"] .dm-chips button.on svg { color: #C8F04A; }
.dm-acts .dm-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: color-mix(in srgb, #1F8A5B 12%, transparent); color: #1F8A5B; }
.dm-acts .dm-ico svg { width: 18px; height: 18px; }
.dm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dm-field { display: flex; flex-direction: column; gap: 6px; }
.dm-field > span { font: 650 .8rem/1.2 var(--font-primary); color: var(--text-soft); }
.dm-field > span small { font-weight: 500; opacity: .8; }
.dm-card h3 .dm-h-note { margin-left: 6px; font: 500 .74rem/1 var(--font-primary); color: var(--text-soft); }
body.onboarding-page .onboarding-step .dm-field { margin: 0 !important; text-align: left; }
body.onboarding-page .onboarding-step .dm-field > span { float: none !important; display: block; margin: 0 2px; color: var(--text-soft) !important; }
body.onboarding-page .dm-card { text-align: left; }
.coach-onboarding .dm-chips button { height: 34px; padding: 0 12px; font-size: .8rem; }
.dm-note { display: flex; align-items: center; gap: 6px; margin: -2px 2px 0; font-size: .74rem; color: var(--text-soft); }
.dm-note svg { flex: none; width: 14px; height: 14px; }

/* ---------- Pro (client): mesele mele, cumpărături, marketplace ---------- */
.pro-free { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: var(--lime); color: var(--adanc); font: 700 .74rem/1 var(--font-primary); }
.pro-free svg.lc { width: 14px; height: 14px; }
.pro-lead { margin: -4px 0 16px; font-size: .9rem; line-height: 1.45; color: var(--text-soft); }
.pro-tiles { display: flex; flex-direction: column; gap: 10px; }
.pro-tile { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 78px; padding: 12px 16px 12px 12px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: transform .15s, border-color .15s; }
.pro-tile:active { transform: scale(.99); }
.pro-tile > svg.lc { flex: none; width: 20px; height: 20px; color: var(--text-soft); }
.pro-tile-ico { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: var(--cerneala); }
.pro-tile-ico svg.lc { width: 24px; height: 24px; }
.pro-tile.meals .pro-tile-ico { background: var(--cer); }
.pro-tile.lists .pro-tile-ico { background: var(--lime); }
.pro-tile.market .pro-tile-ico { background: var(--surface-alt); color: var(--text-soft); }
.pro-tile-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pro-tile-txt b { font: 750 1rem/1.2 var(--font-primary); letter-spacing: -.01em; }
.pro-tile-txt small { font-size: .78rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-soon { flex: none; padding: 5px 9px; border-radius: 999px; background: var(--surface-alt); font: 650 .68rem/1 var(--font-mono); font-style: normal; color: var(--text-muted); }
.pro .av-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.pro-title-input { width: 100%; margin: 4px 0 12px; padding: 4px 0; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: 800 1.6rem/1.15 var(--font-primary); letter-spacing: -.02em; outline: none; }
.pro-title-input:focus { border-bottom-color: var(--text); }
.pro-total { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; padding: 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.pro-items, .pro-results, .pro-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.pro-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pro-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pro-item-txt b { font-size: .9rem; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.pro-item-txt small { font: 500 .72rem/1 var(--font-mono); color: var(--text-soft); }
.pro-grams { flex: none; display: flex; align-items: center; gap: 4px; height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font: 500 .8rem/1 var(--font-mono); color: var(--text-soft); }
.pro-grams input { width: 46px; border: 0; background: none; color: var(--text); font: 650 .9rem/1 var(--font-mono); text-align: right; outline: none; }
.pro-x { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--text-soft); cursor: pointer; }
.pro-x svg.lc { width: 17px; height: 17px; }
.pro-none { display: flex; align-items: center; gap: 8px; padding: 14px 0; font-size: .85rem; color: var(--text-soft); }
.pro-none svg.lc { width: 18px; height: 18px; color: var(--st-ok, var(--success)); }
.pro-search { display: flex; align-items: center; gap: 10px; height: 48px; margin-top: 14px; padding: 0 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text-soft); }
.pro-search svg.lc { flex: none; width: 18px; height: 18px; }
.pro-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: 500 16px/1 var(--font-primary); outline: none; }
.pro-result { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; padding: 11px 4px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.pro-result > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pro-result b { font-size: .88rem; font-weight: 650; }
.pro-result small { font: 500 .7rem/1.2 var(--font-mono); color: var(--text-soft); }
.pro-result svg.lc { flex: none; width: 18px; height: 18px; color: var(--text); }
.pro-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pro-actions .btn { flex: 1 1 160px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pro-actions .btn svg.lc { width: 18px; height: 18px; }
.pro-bar { display: block; height: 6px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.pro-bar i { display: block; height: 100%; border-radius: inherit; background: var(--lime); transition: width .3s; }
.pro-list-card .npl-foot > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-add { display: flex; gap: 8px; margin-bottom: 8px; }
.pro-add input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: 500 16px/1 var(--font-primary); outline: none; }
.pro-add input:focus { border-color: var(--text); }
.pro-add .npl-act { height: 46px; width: 46px; background: var(--cta); border-color: var(--cta); color: var(--cta-fg); }
.pro-check { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--border); }
.pro-check-btn { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 12px 0; border: 0; background: none; color: var(--text); text-align: left; font: 500 .95rem/1.3 var(--font-primary); cursor: pointer; }
.pro-check-btn > span:not(.sup-check) { overflow-wrap: anywhere; }
.pro-check .sup-check { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 1.5px solid var(--border-strong); border-radius: 8px; color: transparent; }
.pro-check .sup-check svg.lc { width: 15px; height: 15px; }
.pro-check.on .sup-check { border-color: var(--lime); background: var(--lime); color: var(--adanc); }
.pro-check.on .pro-check-btn > span:not(.sup-check) { color: var(--text-soft); text-decoration: line-through; }
.pro-done-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 2px; font: 650 .72rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.pro-done-head button { border: 0; background: none; color: var(--danger); font: 650 .78rem/1 var(--font-primary); text-transform: none; letter-spacing: 0; cursor: pointer; }
.pro-market-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 20px; border: 1px dashed var(--border-strong); border-radius: 24px; text-align: center; }
.pro-market-hero > svg.lc { width: 34px; height: 34px; color: var(--text-soft); }
.pro-market-hero strong { font: 750 1.05rem/1.2 var(--font-primary); }
.pro-market-hero p { margin: 0; max-width: 320px; font-size: .86rem; line-height: 1.45; color: var(--text-soft); }
.pro-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.pro-cat { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); opacity: .7; }
.pro-cat svg.lc { width: 22px; height: 22px; color: var(--text-soft); }
.pro-cat b { font: 650 .84rem/1.25 var(--font-primary); }
/* Câmpurile din Pro stau în propriile chenare: fără stilul global de input. */
.pro-search input, .pro-grams input, .pro .pro-title-input { min-height: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; padding-left: 0; padding-right: 0; }
.pro .pro-title-input { border-bottom: 1px solid var(--border) !important; font-size: 1.6rem !important; }
.pro .pro-title-input:focus { border-bottom-color: var(--text) !important; }
.pro-grams input { padding: 0; }

/* ---------- Progres (greutate): în stilul paginilor de planuri ---------- */
.wg3-head { margin-bottom: 12px; }
.wg3-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.wg3-h h2, .wg3-h h3 { margin: 0; font: 750 1.05rem/1.2 var(--font-primary); letter-spacing: -.01em; color: var(--text); }
.wg3-h h3 { font-size: .92rem; }
.wg3-h small { font-size: .76rem; color: var(--text-soft); }
.wg3-h.sm { margin-bottom: 10px; }
.weight-page.wg2 .wg2-add, .weight-page.wg2 .wg2-chart, .weight-page.wg2 .pp-card { margin-top: 12px; padding: 18px !important; border: 1px solid var(--border) !important; border-radius: 24px !important; background: var(--surface) !important; box-shadow: none !important; }
.weight-page.wg2 .wg2-stats { border-radius: 24px; }
.weight-page.wg2 .wg2-chart { padding-bottom: 10px !important; }
.weight-page.wg2 .pp-history { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.wg3-weeks { margin-top: 22px; }
.wg3-wk { gap: 0; cursor: default; }
.wg3-wk .npl-top strong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.wg3-wk .npl-top strong small { flex-basis: 100%; font: 500 .76rem/1.2 var(--font-primary); color: var(--text-soft); letter-spacing: 0; }
.wg3-now { padding: 4px 8px; border-radius: 999px; background: var(--lime); color: var(--adanc); font: 700 .66rem/1 var(--font-mono); font-style: normal; text-transform: uppercase; letter-spacing: .04em; }
.wg3-wk .npl-top svg.lc { align-self: flex-start; transition: transform .2s; }
.wg3-wk.open .npl-top svg.lc { transform: rotate(180deg); }
.wg3-wk.open { border-color: var(--border-strong); }
.npl-foot em.wg3-d.down { background: color-mix(in srgb, var(--st-ok, #1F8A5B) 16%, transparent); color: var(--st-ok, #1F8A5B); }
.npl-foot em.wg3-d.up { background: color-mix(in srgb, #F2B632 22%, transparent); color: var(--warning); }
.wg3-days { display: none; margin-top: 12px; }
.wg3-wk.open .wg3-days { display: block; }
.wg3-day { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: .86rem; color: var(--text-muted); }
.wg3-day > span { flex: 1; }
.wg3-day b { font: 700 .95rem/1 var(--font-primary); color: var(--text); font-variant-numeric: tabular-nums; }
.wg3-day b small { font-size: .72rem; font-weight: 500; color: var(--text-soft); }

/* ---------- Program (client): în stilul paginilor de planuri ---------- */
#view-workouts .npl-act.ntf-bell { position: relative; }
#view-workouts .bk-cta { margin-bottom: 4px; }
#view-workouts .bk-cta .pro-tile-ico { background: var(--lime); color: var(--adanc); }
#view-workouts .csx-program { gap: 26px; }
#view-workouts .csx-section > .wg3-h { margin-bottom: 14px; }
#view-workouts .csx-day + .csx-day { margin-top: 18px; }
#view-workouts .csx-day h3 { margin: 0 0 10px; font: 650 .82rem/1 var(--font-primary); color: var(--text-soft); }
#view-workouts .csx-day h3 small { font-size: .78rem; }
#view-workouts .csx-day.today h3 { color: var(--text); }
.csx3 { gap: 12px; cursor: default; }
.csx3.today { border-color: color-mix(in srgb, var(--lime) 70%, var(--border)); }
.csx3-head { display: flex; flex-direction: column; gap: 10px; }
.csx3-head[role="button"] { cursor: pointer; }
.csx3 .npl-top strong { overflow-wrap: anywhere; }
.csx3 .npl-kcal b { font-size: 1.9rem; }
.csx3 .csx-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.csx3 .csx-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--border); }
.csx3 .csx-btn { height: 44px; border-radius: 14px; }
#view-workouts .csx-empty { padding: 20px; border-radius: 24px; text-align: center; }
#view-workouts .csx-hist-list { border-radius: 24px; padding: 4px 6px; }
#view-workouts .csx-hist { border-left: 0; grid-template-columns: 56px minmax(0, 1fr) auto; padding: 10px 10px; }
#view-workouts .csx-past summary { padding: 12px 4px; }
#view-workouts .npl-act.ntf-bell > svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* Notificările intră pe rând când deschizi ecranul. */
.ntf-item { animation: rliIn .42s cubic-bezier(.22, 1, .36, 1) both; }
.ntf-list .ntf-item:nth-child(2) { animation-delay: 40ms; } .ntf-list .ntf-item:nth-child(3) { animation-delay: 80ms; }
.ntf-list .ntf-item:nth-child(4) { animation-delay: 120ms; } .ntf-list .ntf-item:nth-child(5) { animation-delay: 160ms; }
.ntf-list .ntf-item:nth-child(n+6) { animation-delay: 200ms; }
@media (prefers-reduced-motion: reduce) { .ntf-item { animation: none; } }
/* Ce apare nou într-o pagină actualizată pe loc (morphInto). */
.mx-in { animation: mxIn .24s ease-out; }
@keyframes mxIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mx-in { animation: none; } }

/* ---------- Pro: hub schițat ---------- */
.pro-free { border: 0; cursor: pointer; }
.pro-tile.ebooks .pro-tile-ico { background: color-mix(in srgb, #F2B632 55%, var(--surface)); }
.pro-tile.supps .pro-tile-ico { background: color-mix(in srgb, #E58FA6 50%, var(--surface)); }
.pro-tile.pro-auto { margin-bottom: 12px; border-style: dashed; border-color: color-mix(in srgb, var(--lime) 70%, var(--border)); }
.pro-tile.pro-auto .pro-tile-ico { background: var(--lime); }
.pro-sp { margin-top: 24px; }
.pro-link { border: 0; background: none; color: var(--text); font: 650 .8rem/1 var(--font-primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pro-sp-row { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pro-sp-row::-webkit-scrollbar { display: none; }
.pro-sp-card { flex: none; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; scroll-snap-align: start; }
.pro-sp-card .cb-photo { width: 64px; height: 64px; border-radius: 20px; overflow: hidden; }
.pro-sp-card .cb-photo img { object-position: 50% 0%; }
.pro-sp-card b { font: 700 .86rem/1.1 var(--font-primary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-sp-card small { font-size: .7rem; color: var(--text-soft); }
.pro-soon-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pro-soon-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.pro-soon-row > span:last-of-type { display: flex; flex-direction: column; gap: 2px; }
.pro-soon-row b { font: 700 .92rem/1.2 var(--font-primary); }
.pro-soon-row small { font-size: .78rem; color: var(--text-soft); }
.pro-soon-row .sup-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; }
.pro-soon-row .sup-ico svg.lc { width: 20px; height: 20px; }
.pro-note { margin: 12px 2px 0; font-size: .78rem; color: var(--text-soft); }
.pro-books { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pro-brands, .pad-brands { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.pro-brand { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 14px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.pro-brand img { display: block; max-width: 118px; max-height: 30px; width: auto; height: auto; }
.pro-brand img[src$=".png"] { max-height: 40px; }
.pro-locked .pro-lock-card { background-color: #0E3B2E !important; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px; border: 0; border-radius: 26px; background: radial-gradient(120% 90% at 100% 0%, rgba(200, 240, 74, .28), transparent 55%), linear-gradient(160deg, #134A39, #0E3B2E 55%, #08241C); color: #fff; text-align: left; font: inherit; cursor: pointer; }
.pro-lock-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--lime); color: var(--adanc); }
.pro-lock-ico svg.lc { width: 24px; height: 24px; }
.pro-lock-card b { margin-top: 6px; font: 800 1.4rem/1.1 var(--font-primary); letter-spacing: -.02em; }
.pro-lock-card small { font-size: .88rem; line-height: 1.45; color: rgba(255, 255, 255, .72); }
.pro-lock-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font: 700 .86rem/1 var(--font-primary); color: var(--lime); }
.pro-lock-go svg.lc { width: 16px; height: 16px; }

/* ---------- Pro: prezentarea (reclamă pe tot ecranul) ---------- */
html.pad-open, html.pad-open body { overflow: hidden; }
.pad { position: fixed; inset: 0; z-index: 9995; display: flex; flex-direction: column; overflow: hidden; background: #08241C; color: #fff; opacity: 0; transform: scale(1.03); transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1); }
.pad.in { opacity: 1; transform: none; }
.pad.out { opacity: 0; transform: scale(.98); transition-duration: .28s; }
.pad-glow { position: absolute; width: 120vw; height: 120vw; max-width: 720px; max-height: 720px; border-radius: 50%; filter: blur(10px); pointer-events: none; }
.pad-glow.g1 { top: -38%; right: -45%; background: radial-gradient(closest-side, rgba(226, 188, 85, .26), transparent); animation: padFloat 9s ease-in-out infinite; }
.pad-glow.g2 { bottom: -45%; left: -50%; background: radial-gradient(closest-side, rgba(191, 227, 255, .2), transparent); animation: padFloat 11s ease-in-out infinite reverse; }
@keyframes padFloat { 50% { transform: translate(-6%, 5%) scale(1.06); } }
.pad-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 6px; }
.pad-bars { flex: 1; display: flex; gap: 5px; }
.pad-bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.pad-bars i { display: block; height: 100%; background: #E2BC55; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.pad-x { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.pad-x svg.lc { width: 18px; height: 18px; }
.pad-track { position: relative; z-index: 1; flex: 1; display: flex; min-height: 0; transition: transform .55s cubic-bezier(.22, 1, .36, 1); touch-action: pan-y; }
.pad-slide { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 8px 24px 12px; text-align: center; overflow-y: auto; }
.pad-slide > * { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.pad-slide.on > * { opacity: 1; transform: none; }
.pad-slide.on > :nth-child(2) { transition-delay: .08s; } .pad-slide.on > :nth-child(3) { transition-delay: .16s; }
.pad-slide.on > :nth-child(4) { transition-delay: .24s; } .pad-slide.on > :nth-child(5) { transition-delay: .3s; } .pad-slide.on > :nth-child(6) { transition-delay: .36s; }
.pad-slide h2 { color: #fff; margin: 6px 0 0; font: 800 clamp(1.9rem, 8.5vw, 2.5rem)/1.02 var(--font-primary); letter-spacing: -.035em; }
.pad-slide h2 em { font-style: normal; background: linear-gradient(135deg, #FBEBB0, #E2BC55 35%, #B8862B 65%, #E9C766); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pad-slide p { max-width: 340px; margin: 0; font-size: .98rem; line-height: 1.5; color: rgba(255, 255, 255, .74); }
.pad-vis { position: relative; width: 100%; max-width: 330px; display: grid; place-items: center; margin-bottom: 10px; }
.pad-hero { height: 190px; }
.pad-hero.sm { height: 140px; }
.pad-crown { position: relative; z-index: 1; width: 96px; height: 96px; display: block; border-radius: 28px; }
.pad-crown svg { display: block; width: 100%; height: 100%; }
.pad-hero.sm .pad-crown { width: 76px; height: 76px; border-radius: 22px; }
@keyframes padBob { 50% { transform: translateY(-8px) rotate(-3deg); } }
.pad-ring { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border: 1.5px solid rgba(201, 162, 77, .45); border-radius: 50%; animation: padRing 2.8s ease-out infinite; }
.pad-ring.r2 { animation-delay: 1.4s; }
@keyframes padRing { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.pad-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 340px; }
.pad-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); font: 650 .8rem/1 var(--font-primary); }
.pad-chips svg.lc { width: 15px; height: 15px; color: #E2BC55; }
.pad-card { width: 100%; padding: 18px; border-radius: 24px; background: #FAFCFA; color: #0B1A15; text-align: left; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6); transform: rotate(-2deg); }
.pad-card-top { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.pad-card-top b { font: 800 1.05rem/1.2 var(--font-primary); }
.pad-card-top small { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: #4F6F63; }
.pad-magic svg.lc { width: 14px; height: 14px; color: #62A532; }
.pad-kcal { display: flex; align-items: baseline; gap: 5px; }
.pad-kcal b { font: 800 2.2rem/1 var(--font-primary); letter-spacing: -.03em; }
.pad-kcal small { color: #4F6F63; }
.pad-bar { display: flex; gap: 3px; height: 8px; margin: 10px 0 12px; }
.pad-bar i { border-radius: 999px; }
.pad-card ul { margin: 0; padding: 0; list-style: none; }
.pad-card li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #D5E4DC; font-size: .86rem; }
.pad-checks li { justify-content: flex-start; }
.pad-checks i { width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px solid #B9D3C8; border-radius: 7px; color: transparent; }
.pad-checks li.on i { border-color: #E2BC55; background: #E2BC55; color: #1F1606; }
.pad-checks li.on { color: #4F6F63; text-decoration: line-through; }
.pad-checks svg.lc { width: 14px; height: 14px; }
.pad-supps li { justify-content: flex-start; }
.pad-supps i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, #C8F04A 40%, #fff); color: #0E3B2E; }
.pad-supps i svg.lc { width: 19px; height: 19px; }
.pad-supps span { display: flex; flex-direction: column; gap: 2px; }
.pad-supps small { font-size: .74rem; color: #4F6F63; }
.pad-books { height: 230px; }
.pad-slide.on .pad-book.a { animation: padBookA .8s cubic-bezier(.22, 1, .36, 1) both .15s; }
.pad-slide.on .pad-book.b { animation: padBookB .8s cubic-bezier(.22, 1, .36, 1) both .25s; }
@keyframes padBookA { from { transform: translateX(0) rotate(0); } }
@keyframes padBookB { from { transform: translateX(0) rotate(0); } }
.pad .pro-brand { border-color: transparent; }
.pad-note { font: 600 .7rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .5); }
.pad-code { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.pad-code input { height: 56px; border: 1.5px solid rgba(255, 255, 255, .2) !important; border-radius: 16px !important; background: rgba(255, 255, 255, .08) !important; color: #fff !important; text-align: center; font: 800 1.4rem/1 var(--font-mono) !important; letter-spacing: .3em; outline: none; }
.pad-code input::placeholder { font: 500 1rem/1 var(--font-primary); letter-spacing: 0; color: rgba(255, 255, 255, .45); }
.pad-code input:focus { border-color: #E2BC55 !important; }
.pad-unlock { height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 16px; background: #E2BC55; color: #1F1606; font: 800 1rem/1 var(--font-primary); cursor: pointer; }
.pad-unlock svg.lc { width: 18px; height: 18px; }
.pad-err { min-height: 1em; font-size: .82rem; color: #F2A08F; }
.pad-code.shake { animation: padShake .4s; }
@keyframes padShake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pad.unlocked .pad-crown { animation: padWin .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes padWin { 0%, 100% { opacity: 1; } }
.pad-foot { position: relative; z-index: 2; display: flex; justify-content: center; padding: 10px 20px calc(env(safe-area-inset-bottom, 0px) + 16px); }
.pad-prev { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.pad-next { width: 100%; max-width: 360px; height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 18px; background: #E2BC55; color: #1F1606; font: 800 1rem/1 var(--font-primary); cursor: pointer; transition: opacity .25s, transform .25s; }
.pad-prev svg.lc { width: 18px; height: 18px; } .pad-next svg.lc { width: 20px; height: 20px; }
.pad.at-end .pad-next { opacity: 0; pointer-events: none; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) { .pad, .pad-track, .pad-slide > *, .pad-glow, .pad-crown, .pad-ring { transition: none !important; animation: none !important; } }
.pro-replay { width: 100%; display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 14px 16px 14px 14px; border: 0; border-radius: 22px; background-color: #0E3B2E !important; color: #fff; text-align: left; font: inherit; cursor: pointer; transition: transform .15s; }
.pro-replay:active { transform: scale(.985); }
.pro-replay-ico { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--lime); color: var(--adanc); }
.pro-replay-ico svg.lc { width: 24px; height: 24px; }
.pro-replay-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pro-replay-txt b { font: 750 1rem/1.2 var(--font-primary); }
.pro-replay-txt small { font-size: .8rem; color: rgba(255, 255, 255, .7); }
.pro-replay-go { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--lime); }
.pro-replay-go svg.lc { width: 18px; height: 18px; }
html[data-theme="dark"] .pro-replay { background-color: #134A39 !important; }

/* Rețeta din prezentare: fotografia sus. */
.pad-recipe { padding: 0 0 16px; overflow: hidden; }
.pad-recipe .pad-card-top, .pad-recipe .pad-kcal, .pad-recipe .pad-bar { margin-left: 16px; margin-right: 16px; }
.pad-recipe .pad-card-top { margin-top: 14px; margin-bottom: 6px; }
.pad-photo { position: relative; display: block; aspect-ratio: 36 / 25; overflow: hidden; }
.pad-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pad-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 110% at 50% 40%, transparent 55%, rgba(8, 20, 16, .35)); }
.pad-macros { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font: 600 .74rem/1 var(--font-mono); color: #2C3D36; }
.pad-macros i { width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--c); }
.pad-recipe .pad-kcal { align-items: center; }
.pad-recipe .pad-bar { margin-top: 10px; margin-bottom: 0; }
.npl-acts .pro-free { align-self: center; }

/* ---------- Pro: liste grupate pe magazine ---------- */
.pro-store-logo { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; overflow: hidden; }
.pro-store-logo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pro-store-logo.sm { width: 24px; height: 24px; border-radius: 7px; }
.pro-store-logo.lg { width: 46px; height: 46px; border-radius: 13px; }
.pro-store-logo.none { background: var(--surface-alt); box-shadow: none; color: var(--text-soft); }
.pro-store-logo.none svg.lc { width: 15px; height: 15px; }
.pro-store-logo.sm.none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.pro-store-logo.sm.none svg.lc { width: 12px; height: 12px; }
.pro-stores { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 10px; padding: 2px 16px; scrollbar-width: none; }
.pro-stores::-webkit-scrollbar { display: none; }
.pro-store-pick { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 7px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: 650 .84rem/1 var(--font-primary); cursor: pointer; transition: border-color .15s, background .15s; }
.pro-store-pick.on { border-color: var(--text); background: var(--surface-alt); }
.pro-store-head { display: flex; align-items: center; gap: 10px; margin: 16px 0 2px; }
.pro-store-head b { font: 750 .95rem/1 var(--font-primary); }
.pro-store-head small { margin-left: auto; padding: 4px 8px; border-radius: 999px; background: var(--surface-alt); font: 650 .7rem/1 var(--font-mono); color: var(--text-muted); }
.pro-store-btn { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.pro-card-stores { display: flex; gap: 6px; }
/* Prezentare: lista pe magazine */
.pad-shop { padding-bottom: 10px; }
.pad-store { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; }
.pad-store .pro-store-logo { width: 26px; height: 26px; border-radius: 8px; }
.pad-store b { font: 750 .86rem/1 var(--font-primary); }
.pad-shop .pad-checks li { padding: 6px 0; font-size: .82rem; }
.pad-stores { display: flex; justify-content: center; gap: 12px; }

.pro-check .pro-check-btn { justify-content: flex-start; text-align: left; }
.pro-check .sup-check { margin-left: 0; }

/* Prezentare Pro: prima pagină, ca o reclamă */
.pad-slide.hero { gap: 12px; }
.pad-slide.hero .pad-hero { height: 128px; margin-bottom: 0; }
.pad-slide.hero .pad-crown { width: 104px; height: 104px; border-radius: 30px; }
.pad-slide.hero p { font-size: 1rem; }
.pad-perks { width: 100%; max-width: 340px; margin: 6px 0 0; padding: 6px 16px; list-style: none; border: 1px solid rgba(226, 188, 85, .35); border-radius: 22px; background: rgba(226, 188, 85, .06); text-align: left; }
.pad-perks li { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.pad-perks li + li { border-top: 1px solid rgba(226, 188, 85, .16); }
.pad-perks i { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: rgba(226, 188, 85, .14); color: #E9C766; }
.pad-perks i svg.lc { width: 18px; height: 18px; }
.pad-perks span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pad-perks b { font: 750 .95rem/1.2 var(--font-primary); color: #fff; }
.pad-perks small { font-size: .78rem; color: rgba(255, 255, 255, .62); }
.pro-store-logo.sm img, .pad-store .pro-store-logo img { border-radius: 6px; }
/* Logo-urile magazinelor: exact cum vin, fără colțuri rotunjite. */
.pro-store-logo:not(.none), .pro-store-logo.sm:not(.none), .pro-store-logo.lg, .pad-store .pro-store-logo { border-radius: 0; overflow: visible; }
.pro-store-logo img, .pro-store-logo.sm img, .pad-store .pro-store-logo img { border-radius: 0; object-fit: contain; }

/* ---------- E-book-uri: coperți realiste ---------- */
.bk { position: relative; display: flex; flex-direction: column; aspect-ratio: 2 / 3; border-radius: 3px 9px 9px 3px; background: var(--band); color: #fff; text-align: left; overflow: hidden; isolation: isolate;
  box-shadow: 3px 3px 0 -1px #F4F1EA, 3px 3px 0 0 rgba(0, 0, 0, .12), 5px 5px 0 -2px #ECE7DC, 5px 5px 0 -1px rgba(0, 0, 0, .1), 0 22px 34px -18px rgba(0, 0, 0, .65); }
.bk-photo { position: relative; flex: 0 0 58%; overflow: hidden; }
.bk-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(.95); }
.bk-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 30%, transparent 55%, var(--band)); }
.bk-mark { position: absolute; z-index: 2; top: 9%; left: 13%; width: auto; height: 7%; max-height: 16px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); }
.bk-band { position: relative; flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 4% 9% 9% 13%; }
.bk-band small { font: 700 .54rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: #E2BC55; }
.bk-band b { font: 800 1.02rem/1.04 var(--font-primary); letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.bk-band i { font-size: .66rem; font-style: normal; line-height: 1.25; color: rgba(255, 255, 255, .7); }
.bk-band em { margin-top: auto; padding-top: 6px; border-top: 1px solid rgba(226, 188, 85, .4); font: 600 .5rem/1 var(--font-mono); font-style: normal; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .55); }
/* cotorul și reflexul */
.bk::before { content: ""; position: absolute; z-index: 3; inset: 0 auto 0 0; width: 9%; background: linear-gradient(90deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .08) 55%, rgba(255, 255, 255, .16) 70%, transparent); pointer-events: none; }
.bk::after { content: ""; position: absolute; z-index: 3; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .2), transparent 28%, transparent 70%, rgba(255, 255, 255, .06)); pointer-events: none; }
.pro-books { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; padding: 4px 6px 6px 0; }
/* în prezentare: trei cărți în evantai */
.pad-books { height: 250px; }
.pad-books .bk.pad-book { position: absolute; width: 138px; height: auto; padding: 0; }
.pad-books .bk.pad-book.a { transform: translateX(-92px) rotate(-10deg); }
.pad-books .bk.pad-book.b { transform: translateX(92px) rotate(9deg); }
.pad-books .bk.pad-book.c { z-index: 1; transform: translateY(-6px) scale(1.06); }
.pad-books .bk-band b { font-size: .92rem; }
.pad-books .bk-band i { display: none; }

/* ---------- Pro: scanare cod de bare ---------- */
.pro-add .pro-scan-btn { background: var(--surface); border-color: var(--border); color: var(--text); }
.pro-tile.pro-prod-tile { margin-bottom: 12px; }
.pro-tile.pro-prod-tile .pro-tile-ico { background: color-mix(in srgb, #E2BC55 45%, var(--surface)); }
.scn { position: fixed; inset: 0; z-index: 9996; display: flex; flex-direction: column; background: #000; color: #fff; overflow: hidden; }
.scn-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scn-play { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 24px; border: 0; border-radius: 999px; background: #E2BC55; color: #08241C; font: 750 1rem/1 var(--font-primary); cursor: pointer; }
.scn-play[hidden] { display: none; }
.scn-play svg.lc { width: 20px; height: 20px; }
.scn-play { flex-direction: column; justify-content: center; gap: 4px; height: auto; min-height: 54px; padding: 12px 24px; }
.scn-play-main { display: inline-flex; align-items: center; gap: 10px; }
.scn-play small { max-width: 70vw; font: 500 .6rem/1.2 var(--font-mono); opacity: .7; }
.scn-play small:empty { display: none; }
.scn-log { position: absolute; left: 16px; right: 16px; top: calc(env(safe-area-inset-top, 0px) + 70px); z-index: 4; margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .6); font: 500 .62rem/1.4 var(--font-mono); color: rgba(255, 255, 255, .8); text-align: center; word-break: break-word; }
.scn-log[hidden] { display: none; }
.scn-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px; background: linear-gradient(180deg, rgba(0, 0, 0, .6), transparent); }
.scn-top b { font: 750 1rem/1 var(--font-primary); }
.scn-x { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; }
.scn-x svg.lc { width: 18px; height: 18px; }
.scn-aim { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; pointer-events: none; }
.scn-frame { position: relative; width: min(78vw, 320px); height: 150px; border-radius: 20px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5); }
.scn-frame::before { content: ""; position: absolute; inset: 0; border: 2.5px solid #E2BC55; border-radius: inherit; -webkit-mask: linear-gradient(#000 0 0) top left / 34px 34px no-repeat, linear-gradient(#000 0 0) top right / 34px 34px no-repeat, linear-gradient(#000 0 0) bottom left / 34px 34px no-repeat, linear-gradient(#000 0 0) bottom right / 34px 34px no-repeat; mask: linear-gradient(#000 0 0) top left / 34px 34px no-repeat, linear-gradient(#000 0 0) top right / 34px 34px no-repeat, linear-gradient(#000 0 0) bottom left / 34px 34px no-repeat, linear-gradient(#000 0 0) bottom right / 34px 34px no-repeat; }
.scn-laser { position: absolute; left: 14px; right: 14px; top: 50%; height: 2px; border-radius: 2px; background: #E2BC55; box-shadow: 0 0 12px 2px rgba(226, 188, 85, .7); animation: scnLaser 1.8s ease-in-out infinite; }
@keyframes scnLaser { 0%, 100% { transform: translateY(-46px); } 50% { transform: translateY(46px); } }
.scn-aim p { margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, .45); font: 600 .86rem/1 var(--font-primary); }
.scn.found .scn-aim { opacity: 0; transition: opacity .2s; }
.scn-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: 12px; padding: 18px 18px calc(env(safe-area-inset-bottom, 0px) + 18px); border-radius: 26px 26px 0 0; background: #0C2A20; animation: scnUp .35s cubic-bezier(.22, 1, .36, 1); }
.scn-sheet[hidden] { display: none; }
@keyframes scnUp { from { transform: translateY(100%); } }
.scn-msg { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0; text-align: center; }
.scn-msg > svg.lc { width: 30px; height: 30px; color: #E2BC55; }
.scn-msg b { font: 750 1.05rem/1.2 var(--font-primary); }
.scn-msg p { margin: 0; font-size: .86rem; line-height: 1.45; color: rgba(255, 255, 255, .7); }
.scn-spin { width: 28px; height: 28px; border: 3px solid rgba(255, 255, 255, .2); border-top-color: #E2BC55; border-radius: 50%; animation: scnSpin .8s linear infinite; }
@keyframes scnSpin { to { transform: rotate(360deg); } }
.scn-prod { display: flex; gap: 14px; align-items: flex-start; }
.scn-img { flex: none; width: 78px; height: 78px; border-radius: 14px; object-fit: contain; background: #fff; }
.scn-img.none { display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .6); }
.scn-img.none svg.lc { width: 30px; height: 30px; }
.scn-info { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.scn-info b { font: 750 1.05rem/1.2 var(--font-primary); }
.scn-info small { font-size: .8rem; color: rgba(255, 255, 255, .65); }
.scn-kcal { font-size: .76rem; color: rgba(255, 255, 255, .75); }
.scn-kcal em { margin-right: 6px; font-style: normal; font-weight: 700; color: #E9C766; }
.scn-kcal i { font-style: normal; opacity: .6; }
.scn-code-tag { display: inline-flex; align-items: center; gap: 5px; font: 500 .7rem/1 var(--font-mono); color: rgba(255, 255, 255, .5); }
.scn-code-tag svg.lc { width: 13px; height: 13px; }
.scn-name, .scn-code input { height: 50px; padding: 0 14px; border: 1.5px solid rgba(255, 255, 255, .18) !important; border-radius: 14px !important; background: rgba(255, 255, 255, .06) !important; color: #fff !important; font-size: 16px; outline: none; }
.scn-code { display: flex; flex-direction: column; gap: 10px; }
.scn-save { display: flex; align-items: center; gap: 10px; font-size: .86rem; color: rgba(255, 255, 255, .8); }
.scn-save input { width: 20px; height: 20px; accent-color: #E2BC55; }
.scn-acts { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.scn-again { height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 16px; background: transparent; color: #fff; font: 700 .9rem/1 var(--font-primary); cursor: pointer; }
.scn-again svg.lc, .scn-add svg.lc { width: 18px; height: 18px; }
.scn-add .pro-store-logo { width: 22px; height: 22px; }
.pro-prods { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.pro-prod { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pro-prod > img, .pro-prod > .none { flex: none; width: 46px; height: 46px; border-radius: 12px; object-fit: contain; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.pro-prod > .none { display: grid; place-items: center; background: var(--surface-alt); color: var(--text-soft); }
.pro-prod > .none svg.lc { width: 20px; height: 20px; }
.pro-prod-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pro-prod-txt b { font-size: .92rem; font-weight: 650; overflow-wrap: anywhere; }
.pro-prod-txt small { font-size: .76rem; color: var(--text-soft); }
@media (prefers-reduced-motion: reduce) { .scn-laser { animation: none; } }
.scn-aim p { color: #fff; }
.scn-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: center; padding: 0 20px calc(env(safe-area-inset-bottom, 0px) + 24px); }
.scn-type { height: 48px; padding: 0 20px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: rgba(0, 0, 0, .45); color: #fff; font: 650 .9rem/1 var(--font-primary); cursor: pointer; }
.scn-bottom { gap: 8px; }
.scn-photo { height: 48px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border: 0; border-radius: 999px; background: #E2BC55; color: #08241C; font: 700 .9rem/1 var(--font-primary); cursor: pointer; }
.scn-photo svg.lc, .scn-photo-again svg.lc { width: 18px; height: 18px; }
.scn-photo-again { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* ---------- Pro: rețete cu poză ---------- */
.npl-card.rcp { padding: 0; gap: 0; overflow: hidden; }
.rcp-body { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.rcp-photo { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-alt); }
.rcp-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rcp-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 110% at 50% 40%, transparent 60%, rgba(8, 20, 16, .28)); }
.rcp-add-photo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 16 / 9; margin: 4px 0 14px; border: 1.5px dashed var(--border-strong); border-radius: 22px; background: var(--surface); color: var(--text-soft); cursor: pointer; }
.rcp-add-photo svg.lc { width: 26px; height: 26px; margin-bottom: 4px; }
.rcp-add-photo b { font: 700 .95rem/1.2 var(--font-primary); color: var(--text); }
.rcp-add-photo small { font-size: .78rem; }
.rcp-edit-photo { position: relative; aspect-ratio: 16 / 10; margin: 4px 0 14px; border-radius: 22px; overflow: hidden; }
.rcp-edit-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rcp-photo-btn { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font: 650 .82rem/1 var(--font-primary); cursor: pointer; }
.rcp-photo-btn svg.lc { width: 16px; height: 16px; }
.rcp-photo-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; cursor: pointer; }
.rcp-photo-x svg.lc { width: 16px; height: 16px; }

/* ---------- Pro: e-book-uri ---------- */
.ebk-list { display: flex; flex-direction: column; gap: 14px; }
.ebk { display: flex; gap: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); }
.ebk-cover { flex: none; width: 104px; padding: 2px 6px 6px 0; }
.ebk-cover .bk-band b { font-size: .74rem; }
.ebk-cover .bk-band small { font-size: .42rem; }
.ebk-cover .bk-band i { display: none; }
.ebk-cover .bk-band em { font-size: .38rem; padding-top: 4px; }
.ebk-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ebk-info small { font: 700 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: #B8862B; }
.ebk-info b { font: 800 1.08rem/1.15 var(--font-primary); letter-spacing: -.015em; color: var(--text); }
.ebk-info p { margin: 0; font-size: .82rem; line-height: 1.4; color: var(--text-soft); }
.ebk-meta { display: inline-flex; align-items: center; gap: 5px; font: 500 .7rem/1 var(--font-mono); color: var(--text-soft); }
.ebk-meta svg.lc { width: 13px; height: 13px; }
.ebk-buy { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 40px; margin-top: auto; padding: 0 16px; border: 0; border-radius: 12px; background: #E2BC55; color: #1F1606; font: 750 .86rem/1 var(--font-primary); cursor: pointer; }
.ebk-buy.off { background: var(--surface-alt); color: var(--text-soft); cursor: not-allowed; }
.ebk-buy svg.lc { width: 15px; height: 15px; }
html[data-theme="dark"] .ebk-info small { color: #E2BC55; }

/* ---------- Pro: suplimente ---------- */
.sup2-mine { margin-bottom: 22px; }
.sup2 { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }
.sup2-top { display: flex; align-items: center; gap: 12px; }
.sup2-top > span:last-of-type { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sup2-top b { font: 750 1rem/1.2 var(--font-primary); }
.sup2-top small { font-size: .8rem; line-height: 1.35; color: var(--text-soft); }
.sup2-ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--nut-tile); color: var(--nut-ink); }
.sup2-ico svg.lc { width: 21px; height: 21px; }
.sup2-how { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-alt); font-size: .82rem; color: var(--text-muted); }
.sup2-how svg.lc { flex: none; width: 15px; height: 15px; color: var(--text-soft); }
.sup2-find { font: 650 .66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-soft); }
.sup2-shops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sup2-shop { display: grid; place-items: center; height: 44px; padding: 0 10px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.sup2-shop img { display: block; max-width: 100%; max-height: 22px; width: auto; height: auto; }
.sup2-shop img[src$=".png"] { max-height: 30px; }
.sup2-goals { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px; scrollbar-width: none; }
.sup2-goals::-webkit-scrollbar { display: none; }
.sup2-goal { flex: none; height: 38px; padding: 0 16px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: 650 .84rem/1 var(--font-primary); cursor: pointer; }
.sup2-goal.on { border-color: var(--text); background: var(--text); color: var(--bg); }
.pro-note svg.lc { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }

/* ---------- Tastatura ---------- */
/* While typing, the tab bar steps aside (it would float over the keyboard). */
@media (max-width: 900px) {
  html.kb-open .tabbar { opacity: 0; pointer-events: none; transform: translateY(24px); transition: opacity .15s, transform .2s; }
}
/* Full-screen panels end where the keyboard starts. */
.pad { bottom: var(--kb, 0px); transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1), bottom .25s ease; }
html.kb-open .pad-foot { display: none; }
.scn-sheet { bottom: var(--kb, 0px); transition: bottom .25s ease; }

/* Căutarea de alimente (rețete) */
.pro-search-open { width: 100%; border: 1px solid var(--border); text-align: left; font: inherit; cursor: pointer; }
.pro-search-open span { flex: 1; color: var(--text-soft); font: 500 .95rem/1.2 var(--font-primary); }
.fsr { position: fixed; top: 0; left: 0; right: 0; bottom: var(--kb, 0px); z-index: 9996; display: flex; flex-direction: column; background: var(--bg); animation: fsrIn .22s ease-out; }
@keyframes fsrIn { from { opacity: 0; transform: translateY(12px); } }
.fsr-head { display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px; border-bottom: 1px solid var(--border); }
.fsr-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 14px; background: var(--surface-alt); color: var(--text-soft); }
.fsr-field svg.lc { flex: none; width: 18px; height: 18px; }
.fsr-field input { flex: 1; min-width: 0; min-height: 0 !important; height: 100%; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--text); font: 500 16px/1 var(--font-primary) !important; outline: none; }
.fsr-done { flex: none; height: 46px; padding: 0 6px; border: 0; background: none; color: var(--text); font: 750 1rem/1 var(--font-primary); cursor: pointer; }
.fsr-added { display: flex; align-items: center; gap: 8px; margin: 8px 14px 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--lime) 28%, var(--surface)); font-size: .84rem; color: var(--text); }
.fsr-added[hidden] { display: none; }
.fsr-added svg.lc { flex: none; width: 17px; height: 17px; color: var(--st-ok, #1F8A5B); }
.fsr-added b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.fsr-added.pop { animation: fsrPop .3s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes fsrPop { from { transform: scale(.96); } }
.fsr-list { flex: 1; min-height: 0; margin: 0; padding: 4px 14px 14px; list-style: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.fsr-cap { padding: 14px 2px 6px; font: 650 .7rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }
.fsr-row { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.fsr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fsr-txt b { font-size: .94rem; font-weight: 650; line-height: 1.25; }
.fsr-txt small { font: 500 .72rem/1.2 var(--font-mono); color: var(--text-soft); }
.fsr-txt small i { font-style: normal; opacity: .7; }
.fsr-add { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-alt); color: var(--text); transition: background .15s; }
.fsr-add svg.lc { width: 17px; height: 17px; }
.fsr-row.on .fsr-add { background: var(--lime); color: var(--adanc); }
html.kb-open .pad-slide.final .pad-vis { display: none; }
html.kb-open .pad-slide.final { justify-content: flex-start; padding-top: 18px; }
.pad-code input:focus, .pad-code input:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(226, 188, 85, .25) !important; }

/* ---------- Pro: liste mai clare ---------- */
.shl-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.shl { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px 14px 14px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; animation: rliIn .45s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--d, 0ms); }
.shl > svg.lc { flex: none; width: 20px; height: 20px; color: var(--text-soft); }
.shl-ring { flex: none; position: relative; width: 58px; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: conic-gradient(var(--lime) calc(var(--p) * 1%), var(--surface-alt) 0); }
.shl-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
.shl-ring b, .shl-ring small { position: relative; }
.shl-ring b { font: 800 1.15rem/1 var(--font-primary); }
.shl-ring small { font: 600 .52rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); margin-top: 2px; }
.shl.all .shl-ring b { color: var(--st-ok, #1F8A5B); }
.shl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.shl-txt strong { font: 750 1.05rem/1.2 var(--font-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shl-txt small { font-size: .8rem; color: var(--text-soft); }
.shg { margin-top: 12px; padding: 4px 14px 2px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.shg .pro-store-head { margin: 10px 0 4px; }
.shg .pro-checks .pro-check:last-child { border-bottom: 0; }
.pro-check-btn { min-height: 48px; font-size: 1rem; }
.pro-check .sup-check { width: 26px; height: 26px; }
.spd-done { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border: 0; border-radius: 20px; background: var(--primary); color: var(--primary-fg); text-align: left; font: inherit; cursor: pointer; }
.spd-done > svg.lc:first-child { flex: none; width: 22px; height: 22px; }
.spd-done > svg.lc:last-of-type { flex: none; width: 18px; height: 18px; opacity: .7; }
.spd-done span { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.spd-done b { font: 750 .98rem/1.2 var(--font-primary); }
.spd-done small { font-size: .78rem; opacity: .75; }

/* ---------- Pro: cheltuieli ---------- */
.spd-tile { width: 100%; display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 18px; border: 0; border-radius: 24px; background-color: #0E3B2E !important; color: #fff; text-align: left; font: inherit; cursor: pointer; }
html[data-theme="dark"] .spd-tile { background-color: #134A39 !important; }
.spd-tile-txt { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.spd-tile-txt small { font: 600 .7rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .6); }
.spd-tile-txt b { font: 800 1.9rem/1 var(--font-primary); letter-spacing: -.03em; }
.spd-tile-txt i { font-size: .8rem; font-style: normal; color: rgba(255, 255, 255, .7); }
.spd-tile-ico { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: #E2BC55; color: #1F1606; }
.spd-tile-ico svg.lc { width: 24px; height: 24px; }
.spd-sheet-wrap { position: fixed; inset: 0; z-index: 9996; }
.spd-back { position: absolute; inset: 0; background: rgba(8, 20, 16, .45); animation: spdFade .2s ease-out; }
@keyframes spdFade { from { opacity: 0; } }
.spd-sheet { position: absolute; left: 0; right: 0; bottom: var(--kb, 0px); display: flex; flex-direction: column; gap: 14px; padding: 10px 18px calc(env(safe-area-inset-bottom, 0px) + 18px); border-radius: 26px 26px 0 0; background: var(--bg); animation: scnUp .32s cubic-bezier(.22, 1, .36, 1); transition: bottom .25s ease; }
html.kb-open .spd-sheet { padding-bottom: 14px; }
.spd-sheet-wrap.out .spd-back { opacity: 0; transition: opacity .2s; }
.spd-sheet-wrap.out .spd-sheet { transform: translateY(100%); transition: transform .22s ease-in; }
.spd-grab { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--border-strong); }
.spd-title { font: 800 1.2rem/1.2 var(--font-primary); }
.spd-amount { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 6px 0; }
.spd-amount input { width: 60%; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--text); text-align: right; font: 800 3rem/1 var(--font-primary) !important; letter-spacing: -.03em; outline: none; }
.spd-amount span { font: 700 1.4rem/1 var(--font-primary); color: var(--text-soft); width: 40%; }
.spd-amount.shake { animation: padShake .4s; }
.spd-stores { display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px; padding: 0 18px; scrollbar-width: none; }
.spd-stores::-webkit-scrollbar { display: none; }
.spd-date { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text-soft); }
.spd-date svg.lc { flex: none; width: 18px; height: 18px; }
.spd-date input { flex: 1; min-height: 0 !important; height: 100%; padding: 0 !important; border: 0 !important; background: none !important; color: var(--text); font: 600 16px/1 var(--font-primary) !important; }
.spd-clear { color: var(--text-muted); }
.spd-save { width: 100%; }
.spd-hero { padding: 20px 18px 16px; border-radius: 26px; background-color: #0E3B2E; color: #fff; }
html[data-theme="dark"] .spd-hero { background-color: #134A39; }
.spd-hero > small { font: 600 .72rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .6); }
.spd-hero > b { display: block; margin: 8px 0 6px; font: 800 2.6rem/1 var(--font-primary); letter-spacing: -.035em; }
.spd-hero > span { font-size: .84rem; color: rgba(255, 255, 255, .72); }
.spd-hero em { font-style: normal; font-weight: 700; }
.spd-hero em.up { color: #F3C969; } .spd-hero em.down { color: #C8F04A; }
.spd-chart { display: flex; align-items: flex-end; gap: 8px; height: 110px; margin-top: 18px; }
.spd-chart span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.spd-chart i { width: 100%; max-width: 34px; border-radius: 8px 8px 4px 4px; background: rgba(255, 255, 255, .18); }
.spd-chart span.cur i { background: #E2BC55; }
.spd-chart small { font: 600 .62rem/1 var(--font-mono); text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.spd-sec { margin-top: 24px; }
.spd-stores-rep { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }
.spd-st { display: flex; align-items: center; gap: 12px; }
.spd-st > .pro-store-logo { width: 34px; height: 34px; }
.spd-st-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.spd-st-top { display: flex; justify-content: space-between; gap: 8px; }
.spd-st-top b { font: 700 .92rem/1.2 var(--font-primary); }
.spd-st-top em { font: 750 .92rem/1.2 var(--font-primary); font-style: normal; }
.spd-st-bar { height: 7px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.spd-st-bar i { display: block; height: 100%; border-radius: inherit; background: #E2BC55; }
.spd-st small { font-size: .72rem; color: var(--text-soft); }
.spd-notes { margin: 0; padding: 4px 16px; list-style: none; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }
.spd-notes li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; font-size: .88rem; line-height: 1.4; color: var(--text-muted); }
.spd-notes li + li { border-top: 1px solid var(--border); }
.spd-notes svg.lc { flex: none; width: 18px; height: 18px; margin-top: 1px; color: #B8862B; }
.spd-notes b { color: var(--text); }
.spd-month { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 2px 6px; }
.spd-month b { font: 750 .9rem/1 var(--font-primary); text-transform: capitalize; }
.spd-month em { font: 700 .86rem/1 var(--font-primary); font-style: normal; color: var(--text-soft); }
.spd-hist { margin: 0; padding: 0 14px; list-style: none; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.spd-hist li { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.spd-hist li + li { border-top: 1px solid var(--border); }
.spd-hist li > span:not(.pro-store-logo) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.spd-hist b { font-size: .9rem; font-weight: 650; }
.spd-hist small { font-size: .74rem; color: var(--text-soft); }
.spd-hist em { font: 750 .95rem/1 var(--font-primary); font-style: normal; }
.shl-ok svg.lc { width: 24px; height: 24px; color: var(--st-ok, #1F8A5B); stroke-width: 2.4; }
.spd-amount input:focus, .spd-amount input:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; }

/* ---------- Cantitatea unui ingredient ---------- */
.qty-wrap { z-index: 9997; }
.qty-head { display: flex; flex-direction: column; gap: 3px; }
.qty-head b { font: 800 1.12rem/1.2 var(--font-primary); }
.qty-head small { font-size: .78rem; color: var(--text-soft); }
.qty-units { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-alt); }
.qty-unit { height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); font: 700 .9rem/1 var(--font-primary); cursor: pointer; transition: background .15s, color .15s; }
.qty-unit.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(8, 36, 28, .12); }
.qty-row { display: flex; align-items: center; gap: 12px; }
.qty-step { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); cursor: pointer; }
.qty-step svg.lc { width: 20px; height: 20px; }
.qty-val { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.qty-val input { width: 60%; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--text); text-align: right; font: 800 2.6rem/1 var(--font-primary) !important; letter-spacing: -.03em; outline: none; }
.qty-val input:focus, .qty-val input:focus-visible, .qty-per input:focus { outline: none !important; box-shadow: none !important; }
.qty-val span { width: 40%; font: 700 1.2rem/1 var(--font-primary); color: var(--text-soft); }
.qty-per { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .86rem; color: var(--text-soft); }
.qty-per[hidden] { display: none; }
.qty-per input { width: 64px; height: 34px; min-height: 0 !important; padding: 0 8px !important; border: 1px solid var(--border) !important; border-radius: 10px !important; background: var(--surface) !important; color: var(--text); text-align: center; font: 700 15px/1 var(--font-primary) !important; }
.qty-sum { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-alt); text-align: center; font: 500 .8rem/1.4 var(--font-mono); color: var(--text-muted); }
.qty-sum b { color: var(--text); }
.pro-qty { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; min-width: 64px; height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: 700 .9rem/1 var(--font-primary); cursor: pointer; }
.pro-qty small { font: 500 .66rem/1 var(--font-mono); color: var(--text-soft); }

/* Editor rețetă: salvare sus, nume în chenar, căutare deasupra ingredientelor */
.av-top-acts { display: flex; gap: 8px; }
.npl-act.rcp-save { background: var(--cta); border-color: var(--cta); color: var(--cta-fg); }
.npl-act.rcp-save svg.lc { width: 22px; height: 22px; stroke-width: 2.4; }
.npl-act.rcp-save.busy { opacity: .6; }
.rcp-name { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.rcp-name span { font: 650 .74rem/1 var(--font-primary); color: var(--text-soft); padding-left: 2px; }
.rcp-name input { height: 52px; padding: 0 14px !important; border: 1.5px solid var(--border) !important; border-radius: 14px !important; background: var(--surface) !important; color: var(--text); font: 700 1.05rem/1 var(--font-primary) !important; }
.rcp-name input:focus { border-color: var(--text) !important; box-shadow: none !important; }
.pro-meal-editor .pro-search-open, .pro .pro-search-open { margin: 0 0 6px; }
.pro-total + .pro-search-open { margin-top: 0; }
.pro-actions .btn { flex: 1 1 100%; }
/* Cât ai cheltuit: suma centrată, data încadrată */
.spd-amount { flex-direction: column; align-items: center; gap: 2px; }
.spd-amount input { width: 100%; text-align: center; }
.spd-amount span { width: auto; font-size: .95rem; }
.spd-date { justify-content: space-between; height: 52px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); }
.spd-date-l { display: inline-flex; align-items: center; gap: 8px; font: 650 .92rem/1 var(--font-primary); color: var(--text); }
.spd-date-l svg.lc { width: 18px; height: 18px; color: var(--text-soft); }
.spd-date input { flex: 0 1 auto; width: auto; text-align: right; -webkit-appearance: none; appearance: none; color: var(--text); }
.spd-date input::-webkit-date-and-time-value { text-align: right; }

/* ---------- Toate butoanele „Înapoi”: o iconiță, ca la Nutriție ---------- */
:is(.nd-back, .pf-back, .cs-back, .coach-browse-back, .ntf-back, .wpe-back, .fdb-back, .modal-page-back) {
  position: relative !important; flex: none !important; width: 44px !important; height: 44px !important; min-width: 0 !important; min-height: 0 !important;
  place-items: center !important; align-items: center !important; justify-content: center !important; gap: 0 !important; margin: 0 !important; padding: 0 !important;
  border: 1px solid var(--border) !important; border-radius: 14px !important; background: var(--surface) !important; color: var(--text) !important;
  font-size: 0 !important; line-height: 0 !important; text-decoration: none !important; box-shadow: none !important; cursor: pointer;
}
:is(.nd-back, .pf-back, .cs-back, .coach-browse-back, .ntf-back, .wpe-back, .fdb-back, .modal-page-back) > span {
  position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
}
:is(.nd-back, .pf-back, .cs-back, .coach-browse-back, .ntf-back, .wpe-back, .fdb-back, .modal-page-back) svg {
  width: 20px !important; height: 20px !important; margin: 0 !important; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
:is(.nd-back, .pf-back, .cs-back, .coach-browse-back, .ntf-back, .wpe-back, .fdb-back, .modal-page-back):active { transform: scale(.94); }
/* Shown/hidden exactly as before; only the look changes. */
:is(.nd-back, .pf-back, .cs-back, .coach-browse-back, .ntf-back, .wpe-back, .fdb-back) { display: inline-grid !important; }


/* ---------- Cât ai cheltuit: zile, intrare fluidă ---------- */
.spd-days { display: flex; gap: 6px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px; scrollbar-width: none; }
.spd-days::-webkit-scrollbar { display: none; }
.spd-day { position: relative; flex: none; width: 50px; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.spd-day small { font: 600 .62rem/1 var(--font-primary); text-transform: capitalize; color: var(--text-soft); }
.spd-day b { font: 800 1.05rem/1 var(--font-primary); }
.spd-day.on { border-color: var(--text); background: var(--text); color: var(--bg); }
.spd-day.on small { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.spd-day-pick { color: var(--text-soft); }
.spd-day-pick svg.lc { width: 20px; height: 20px; }
.spd-day-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.spd-day-pick.on { color: var(--bg); }
.spd-sheet-wrap:not(.qty-wrap) .spd-sheet { animation: none; transform: translateY(105%); transition: transform .42s cubic-bezier(.22, 1, .36, 1), bottom .25s ease; }
.spd-sheet-wrap:not(.qty-wrap) .spd-back { animation: none; opacity: 0; transition: opacity .3s ease; }
.spd-sheet-wrap.in .spd-sheet { transform: none; }
.spd-sheet-wrap.in .spd-back { opacity: 1; }
.spd-sheet-wrap.out .spd-sheet { transform: translateY(105%); transition: transform .26s ease-in; }
.spd-sheet-wrap.out .spd-back { opacity: 0; }
.shl-ring b { font-size: 1.35rem; }

/* ---------- Glisează ca să ștergi o listă ---------- */
.shl-swipe { --rev: 0px; position: relative; border-radius: 22px; overflow: hidden; transition: height .3s cubic-bezier(.4, 0, .2, 1), margin .3s cubic-bezier(.4, 0, .2, 1); }
.shl-swipe::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: calc(var(--rev) + 22px); border-radius: inherit; background: var(--danger); transition: width .42s cubic-bezier(.22, 1, .36, 1); }
.shl-swipe.dragging::before { transition: none; }
.shl-swipe:not(.open):not(.armed):not(.removing):not(.dragging)::before { width: 0; }
.shl-swipe.armed::before { filter: saturate(1.25); }
.shl-swipe .shl { position: relative; z-index: 1; touch-action: pan-y; user-select: none; -webkit-user-select: none; will-change: transform; transition: transform .42s cubic-bezier(.22, 1, .36, 1); animation-delay: var(--d, 0ms); }
.shl-swipe.dragging .shl { transition: none; }
.shl-del { position: absolute; z-index: 0; top: 0; bottom: 0; right: 0; width: max(96px, var(--rev)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; background: transparent; color: #fff; font: 700 .74rem/1 var(--font-primary); cursor: pointer; }
.shl-del svg.lc { width: 20px; height: 20px; transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
.shl-swipe.armed .shl-del svg.lc { transform: scale(1.2); }
.shl-swipe.removing { pointer-events: none; }
.shl-swipe.removing .shl { transition: transform .28s ease-in; }
.shl-list .shl-swipe.removing { margin-bottom: -10px; }
@media (prefers-reduced-motion: reduce) { .shl-swipe, .shl-swipe .shl { transition: none !important; } }

/* ---------- Din produsele mele (bife, pe magazine) ---------- */
.pty-open { width: 100%; display: flex; align-items: center; gap: 10px; height: 48px; margin: 2px 0 4px; padding: 0 14px; border: 1.5px dashed color-mix(in srgb, #E2BC55 70%, var(--border)); border-radius: 14px; background: color-mix(in srgb, #E2BC55 8%, var(--surface)); color: var(--text); font: 700 .92rem/1 var(--font-primary); cursor: pointer; }
.pty-open svg.lc { width: 18px; height: 18px; color: #B8862B; }
.pty-open span { flex: 1; text-align: left; }
.pty-open em { padding: 4px 9px; border-radius: 999px; background: var(--surface-alt); font: 700 .74rem/1 var(--font-mono); font-style: normal; color: var(--text-muted); }
.pty-sheet { max-height: 86vh; max-height: 86dvh; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
.pty-head { display: flex; flex-direction: column; gap: 3px; }
.pty-head b { font: 800 1.2rem/1.2 var(--font-primary); }
.pty-head small { font-size: .8rem; color: var(--text-soft); }
.pty-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -18px; padding: 0 18px 6px; -webkit-overflow-scrolling: touch; }
.pty-group ul { margin: 0; padding: 0; list-style: none; }
.pty-group .pro-store-head { margin: 14px 0 4px; }
.pty-row { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.pty-row .sup-check { flex: none; width: 26px; height: 26px; margin-left: 0; display: grid; place-items: center; border: 1.5px solid var(--border-strong); border-radius: 8px; color: transparent; transition: background .12s, border-color .12s; }
.pty-row .sup-check svg.lc { width: 15px; height: 15px; }
.pty-row.on .sup-check { border-color: var(--lime); background: var(--lime); color: var(--adanc); }
.pty-row > img { flex: none; width: 36px; height: 36px; border-radius: 10px; object-fit: contain; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.pty-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pty-txt b { font-size: .95rem; font-weight: 600; overflow-wrap: anywhere; }
.pty-txt small { font-size: .72rem; color: var(--text-soft); }
.pty-row.in { opacity: .5; cursor: default; }
.pty-row.in .sup-check { border-style: dashed; }
.pty-add { width: 100%; flex: none; }
.pty-add:disabled { background: var(--surface-alt); color: var(--text-soft); cursor: default; }

/* ---------- Rigla pentru sumă (ca un metru) ---------- */
.spd-amount input[readonly] { cursor: pointer; caret-color: transparent; }
.spd-amount span { font-size: .78rem; color: var(--text-soft); }
.rul { position: relative; height: 74px; margin: -4px -18px 0; }
.rul-track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.rul-track::-webkit-scrollbar { display: none; }
.rul-track::before, .rul-track::after { content: ""; flex: 0 0 50%; }
.rul-ticks { position: relative; flex: none; height: 100%;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 1.5px, transparent 1.5px 12px) 0 8px / 100% 18px no-repeat; }
.rul-ticks span { position: absolute; top: 8px; width: 2px; height: 30px; margin-left: -.25px; border-radius: 2px; background: var(--text-muted); }
.rul-ticks span b { position: absolute; top: 38px; left: 50%; transform: translateX(-50%); font: 700 .74rem/1 var(--font-mono); color: var(--text-soft); }
.rul-mark { position: absolute; top: 0; left: 50%; width: 3px; height: 48px; margin-left: -1.5px; border-radius: 3px; background: #E2BC55; box-shadow: 0 0 0 3px color-mix(in srgb, #E2BC55 25%, transparent); pointer-events: none; }

/* ---------- Adaugă produse (ecran separat) ---------- */
.pro-add-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text-soft); font: 500 .95rem/1 var(--font-primary); text-align: left; cursor: pointer; }
.pro-add-open svg.lc { flex: none; width: 18px; height: 18px; color: var(--text); }
.pro-add-open span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pas-stores { display: flex; gap: 8px; overflow-x: auto; padding: 10px 14px 2px; scrollbar-width: none; }
.pas-stores::-webkit-scrollbar { display: none; }
.pas-new .fsr-add { background: var(--lime); color: var(--adanc); }
.pas-img { flex: none; width: 34px; height: 34px; border-radius: 9px; object-fit: contain; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.fsr-field input:focus, .fsr-field input:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; }

/* Buton „Adaugă la …” și scanare mare */
.pro-add { display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px; }
.pro-add-btn { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--cta); color: var(--cta-fg); font: 800 1rem/1 var(--font-primary); cursor: pointer; transition: transform .12s; }
.pro-add-btn:active, .pro-scan-big:active { transform: scale(.97); }
.pro-add-btn > svg.lc { width: 20px; height: 20px; stroke-width: 2.4; }
.pro-add-btn .pro-store-logo { width: 26px; height: 26px; }
.pro-add-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-scan-big { flex: none; width: 76px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1.5px solid var(--border-strong); border-radius: 16px; background: var(--surface); color: var(--text); font: 700 .66rem/1 var(--font-primary); cursor: pointer; }
.pro-scan-big svg.lc { width: 24px; height: 24px; }
/* Ecranul de adăugare: gol */
.pas-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 20px; text-align: center; }
.pas-empty > svg.lc { width: 34px; height: 34px; color: var(--text-soft); }
.pas-empty b { font: 750 1.05rem/1.25 var(--font-primary); color: var(--text); }
.pas-empty span:not(.pro-store-logo) { max-width: 280px; font: 400 .9rem/1.45 var(--font-primary); color: var(--text-soft); }
/* Riglele de sumă */
.spd-amount { display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 8px; padding: 2px 0 0; }
.spd-amount b { font: 800 3.1rem/1 var(--font-primary); letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--text); display: inline-block; }
.spd-amount b.bump { animation: amtBump .18s ease-out; }
@keyframes amtBump { 40% { transform: scale(1.035); } }
.spd-amount span { width: auto; font: 700 1.2rem/1 var(--font-primary); color: var(--text-soft); }
.rul { position: relative; height: 72px; margin: 0 -18px; }
.rul.fine { height: 56px; margin-top: -6px; }
.rul-cap { position: absolute; left: 18px; top: 0; z-index: 2; font: 650 .62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-soft); }
.rul-ticks { background: repeating-linear-gradient(90deg, var(--border-strong) 0 1.5px, transparent 1.5px var(--st, 12px)) 0 14px / 100% 16px no-repeat; }
.rul-ticks span { top: 14px; height: 28px; }
.rul-ticks span b { top: 34px; }
.rul.fine .rul-ticks { background-size: 100% 11px; background-position: 0 12px; }
.rul.fine .rul-ticks span { top: 12px; height: 20px; background: var(--text-soft); }
.rul.fine .rul-ticks span b { top: 25px; font-size: .64rem; }
.rul-mark { top: 6px; height: 44px; border-radius: 3px; }
.rul-mark::before { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #E2BC55; }
.rul.fine .rul-mark { top: 6px; height: 32px; }

/* ---------- Pro: prima pagină, compactă ---------- */
.phd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.phd h1 { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 clamp(1.7rem, 7vw, 2.1rem)/1.05 var(--font-primary); letter-spacing: -.025em; color: var(--text); }
.pst { display: grid; grid-template-columns: 1.25fr 1fr .7fr; gap: 8px; margin-bottom: 14px; }
.pst-i { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.pst-i small { max-width: 100%; font: 600 .62rem/1.1 var(--font-primary); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pst-i b { max-width: 100%; font: 800 1rem/1 var(--font-primary); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Cumpărături: liste și lista deschisă ---------- */
.shp-h1 { margin: 4px 0 -4px; font: 800 2rem/1.05 var(--font-primary); letter-spacing: -.03em; }
.shp-new { width: 100%; height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 18px; background: var(--cta); color: var(--cta-fg); font: 800 1.02rem/1 var(--font-primary); cursor: pointer; transition: transform .12s; }
.shp-new:active { transform: scale(.98); }
.shp-new svg.lc { width: 22px; height: 22px; stroke-width: 2.4; }
.shp-hint { margin: 10px 0 0; font-size: .74rem; color: var(--text-soft); text-align: center; }

body:has(#view-pro.active .shp-page) .tabbar { display: none !important; }
.shp-page { padding-bottom: 24px; }
.shp-prog { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; }
.shp-prog-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.shp-prog-bar i { display: block; height: 100%; border-radius: inherit; background: var(--st-ok); transition: width .3s; }
.shp-prog small { font: 600 .74rem/1 var(--font-mono); color: var(--text-soft); white-space: nowrap; }
.shp-add { position: sticky; top: 0; z-index: 15; margin: 0 -16px 4px; padding: calc(env(safe-area-inset-top, 0px) * 0 + 8px) 16px 10px; background: var(--bg); }
.shp-add-row { display: flex; gap: 8px; }
.shp-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 14px; border: 1.5px solid var(--border-strong); border-radius: 18px; background: var(--surface); cursor: text; transition: border-color .15s, box-shadow .15s; }
.shp-field:focus-within { border-color: var(--text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 35%, transparent); }
.shp-field svg.lc { flex: none; width: 20px; height: 20px; color: var(--text-soft); stroke-width: 2.2; }
.shp-field input { flex: 1; min-width: 0; height: 100%; padding: 0 !important; border: 0 !important; background: none !important; color: var(--text); font: 600 16px/1 var(--font-primary); outline: none; box-shadow: none !important; }
.shp-scan { flex: none; width: 54px; height: 54px; display: grid; place-items: center; border: 1.5px solid var(--border-strong); border-radius: 18px; background: var(--surface); color: var(--text); cursor: pointer; }
.shp-scan svg.lc { width: 22px; height: 22px; }
.shp-where { display: flex; align-items: center; gap: 8px; margin: 12px -16px 0; padding: 2px 16px 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.shp-where::-webkit-scrollbar { display: none; }
.shp-where > span { flex: none; margin-right: 2px; font: 600 .7rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.shp-st { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 5px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: 650 .86rem/1 var(--font-primary); cursor: pointer; scroll-snap-align: start; box-shadow: 0 1px 2px rgba(8, 36, 28, .05); transition: border-color .15s, background .15s, transform .12s; }
.shp-st:active { transform: scale(.96); }
.shp-st:first-of-type { padding-left: 16px; }
.shp-st .pro-store-logo.sm { width: 32px; height: 32px; margin: 0; padding: 4px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(8, 36, 28, .08); }
.shp-st .pro-store-logo.sm img { width: 100%; height: 100%; object-fit: contain; }
.shp-st.on { border-color: var(--text); background: var(--text); color: var(--bg); box-shadow: 0 6px 14px -8px rgba(8, 36, 28, .5); }
html[data-theme="dark"] .shp-st.on { border-color: var(--lime); background: var(--lime); color: var(--adanc); }
.shp-sug { margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 12px 30px rgba(8, 36, 28, .12); max-height: 46vh; overflow-y: auto; }
.shp-sug[hidden] { display: none; }
.shp-sug-new { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--cta); color: var(--cta-fg); text-align: left; font: 600 .95rem/1.2 var(--font-primary); cursor: pointer; }
.shp-sug-new svg.lc { flex: none; width: 20px; height: 20px; stroke-width: 2.4; }
.shp-sug-new span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.shp-sug-new small { flex: none; font: 600 .7rem/1 var(--font-mono); opacity: .7; }
.shp-sug-cap { margin: 12px 2px 8px; font: 600 .72rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); }
.shp-sug-new + .shp-sug-cap { margin-top: 14px; }
.shp-sug > .shp-sug-cap:first-child { margin-top: 2px; }
.shp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.shp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-alt); color: var(--text); font: 600 .88rem/1.2 var(--font-primary); cursor: pointer; }
.shp-chip svg.lc { width: 15px; height: 15px; color: var(--text-soft); stroke-width: 2.4; }
.shp-chip:active { transform: scale(.96); }
.shp-sug-done { display: block; width: 100%; height: 44px; margin-top: 12px; border: 0; border-radius: 14px; background: var(--surface-alt); color: var(--text); font: 700 .9rem/1 var(--font-primary); cursor: pointer; }
.shp-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 26px; padding: 26px 20px; border: 1.5px dashed var(--border-strong); border-radius: 22px; text-align: center; color: var(--text-soft); }
.shp-empty svg.lc { width: 30px; height: 30px; margin-bottom: 4px; }
.shp-empty b { font: 750 1rem/1.2 var(--font-primary); color: var(--text); }
.shp-empty span { font-size: .86rem; line-height: 1.45; }
.shp-bar { position: sticky; bottom: 0; z-index: 14; margin: 0 -16px; padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 12px); background: linear-gradient(to top, var(--bg) 75%, transparent); }
.shp-bar .spd-done { margin-top: 0; }
html.shp-typing .shp-bar { display: none; }
.pro-check.bought .pro-check-btn { cursor: default; opacity: 1; }
.pro-check.bought .sup-check { border-color: var(--text-soft); background: var(--text-soft); color: var(--bg); }
.pro-check.bought .pro-check-btn > span:not(.sup-check) { color: var(--text-soft); text-decoration: line-through; }
.pro-check.bought .pro-store-btn { opacity: .5; }
.shp-field:focus-within { box-shadow: none; }

/* ---------- Azi (client): cardul de salut; pe spate, macro de azi ---------- */
.ovh { --ovh-p: #C8F04A; --ovh-c: #BFE3FF; --ovh-f: #E2BC55; display: block; color: #FAFCFA; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ovh[role="group"] { cursor: default; }
.ovh-in { position: relative; display: grid; }
.ovh-face { grid-area: 1 / 1; position: relative; min-height: 148px; overflow: hidden; border-radius: 26px; background: linear-gradient(160deg, #134A39, #0E3B2E 65%); }
html[data-theme="dark"] .ovh-face { background: linear-gradient(160deg, #175440, #11402F 65%); box-shadow: inset 0 0 0 1px rgba(250, 252, 250, .08); }
.ovh-back { visibility: hidden; }
.ovh.flipped .ovh-front { visibility: hidden; }
.ovh.flipped .ovh-back { visibility: visible; }
.ovh-front { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 250px; padding: 22px 16px 16px; background-color: #06130e; background-position: 62% 30%; background-size: cover; background-repeat: no-repeat; isolation: isolate; }
.ovh-front::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(4, 14, 10, .94) 0%, rgba(4, 14, 10, .6) 45%, rgba(4, 14, 10, 0) 78%), linear-gradient(90deg, rgba(4, 14, 10, .65) 0%, rgba(4, 14, 10, .1) 60%, rgba(4, 14, 10, 0) 100%); }
html[data-theme="dark"] .ovh-front { background-color: #06130e; background-position: 62% 30%; background-size: cover; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(250, 252, 250, .08); }
.ovh-front > .ovh-date, .ovh-front > h2, .ovh-front > p { padding: 0 6px; }
.ovh-strip { display: flex; margin-top: 12px; padding: 12px 4px; border: 1px solid rgba(250, 252, 250, .14); border-radius: 18px; background: rgba(8, 36, 28, .45); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.ovh-s { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 2px 4px; }
@media (max-width: 380px) { .ovh-s { gap: 4px; padding: 2px 3px; } .ovh-s > svg.lc { width: 15px; height: 15px; } .ovh-s b { font-size: .94rem; } }
.ovh-s + .ovh-s { border-left: 1px solid rgba(250, 252, 250, .12); }
.ovh-s > svg.lc { flex: none; width: 17px; height: 17px; color: rgba(250, 252, 250, .7); stroke-width: 2.2; }
.ovh-s b { display: inline-flex; align-items: center; min-width: 0; font: 800 1.04rem/1 var(--font-primary); letter-spacing: -.02em; white-space: nowrap; }
.ovh-s b svg.lc { width: 18px; height: 18px; stroke-width: 2.6; }
.ovh-s.ok > svg.lc, .ovh-s.ok b { color: var(--lime); }
.ovh-s.fire > svg.lc { color: #F2A33A; }
.ovh-date { font: 600 .68rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: rgba(250, 252, 250, .6); }
.ovh-front h2 { margin: 2px 0 0; font: 800 1.75rem/1.05 var(--font-primary); letter-spacing: -.025em; color: inherit; }
.ovh-front p { margin: 0; max-width: 30ch; font-size: .88rem; line-height: 1.4; color: rgba(250, 252, 250, .82); }
.ovh-turn { position: absolute !important; top: 14px; right: 14px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(250, 252, 250, .1); color: rgba(250, 252, 250, .75); }
.ovh-turn svg.lc { width: 15px; height: 15px; }
.ovh-back { display: flex; flex-direction: column; justify-content: center; padding: 40px 14px 24px; }
.ovh-back-head { position: absolute; top: 16px; left: 14px; right: 14px; }
.ovh-back-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; font: 600 .68rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: rgba(250, 252, 250, .6); }
.ovh-back-head svg.lc { width: 15px; height: 15px; }
.ovh-rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ovh-mr { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.ovh-mr-c { position: relative; width: 76px; height: 76px; margin-bottom: 4px; }
.ovh-mr-c svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ovh-track { fill: none; stroke: rgba(250, 252, 250, .12); stroke-width: 7; }
.ovh-arc { fill: none; stroke: var(--dot); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.ovh-mr-c > span { position: absolute; inset: 0; display: grid; place-items: center; }
.ovh-mr-c > span > b { display: inline-flex; align-items: baseline; gap: 1px; }
.ovh-mr-c b { font: 800 1.15rem/1 var(--font-primary); letter-spacing: -.02em; }
.ovh-mr-c small { font: 600 .7rem/1 var(--font-mono); color: rgba(250, 252, 250, .6); }
.ovh-mr strong { font: 700 .82rem/1.1 var(--font-primary); }
.ovh-mr > small { font: 500 .66rem/1.1 var(--font-mono); color: rgba(250, 252, 250, .55); }
.ovh-mr.p { --dot: var(--ovh-p); }
.ovh-mr.c { --dot: var(--ovh-c); }
.ovh-mr.f { --dot: var(--ovh-f); }

/* Nutriție / Antrenament: doar numele, pe culoare plină. */
.ov-plans { max-width: none; }
.ovp { justify-content: center; gap: 10px; height: 58px; padding: 0 14px; border: 0 !important; border-radius: 20px; font: inherit; cursor: pointer; transition: transform .12s, filter .15s; }
.ovp svg.lc { flex: none; width: 21px; height: 21px; stroke-width: 2.1; }
.ovp b { font: 800 1rem/1 var(--font-primary); letter-spacing: -.01em; }
.ovp.nut { background: var(--lime); color: var(--adanc); }
.ovp.fit { background: var(--padure); color: var(--aer); }
.ovp.fit svg.lc { color: var(--lime); }
html[data-theme="dark"] .ovp.fit { background: var(--cer); color: var(--adanc); }
html[data-theme="dark"] .ovp.fit svg.lc { color: var(--adanc); }
.ovp:hover { filter: brightness(1.04); }
html[data-theme="dark"] .ovp.nut { background: var(--lime); color: var(--adanc); }

/* Cumpărături — ecranul cu liste */
.shp-home { display: flex; flex-direction: column; gap: 22px; padding-bottom: 12px; }
.shp-home > .av-top { margin-bottom: -10px; }
.shp-home .shl-list { margin-bottom: 0; }
.shp-spend { padding: 18px 18px 6px; border-radius: 26px; background: linear-gradient(160deg, #134A39, #0E3B2E 65%); color: #FAFCFA; }
html[data-theme="dark"] .shp-spend { background: linear-gradient(160deg, #175440, #11402F 65%); box-shadow: inset 0 0 0 1px rgba(250, 252, 250, .08); }
.shp-spend-top { display: flex; align-items: flex-start; gap: 12px; }
.shp-spend-sum { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.shp-spend-sum small { font: 600 .68rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: rgba(250, 252, 250, .6); }
.shp-spend-sum b { font: 800 2.2rem/1 var(--font-primary); letter-spacing: -.03em; }
.shp-spend-sum i { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; font-style: normal; color: rgba(250, 252, 250, .7); }
.shp-spend-add { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #E2BC55; color: #1F1606; cursor: pointer; box-shadow: 0 8px 18px -8px rgba(226, 188, 85, .7); transition: transform .12s; }
.shp-spend-add:active { transform: scale(.94); }
.shp-spend-add svg.lc { width: 24px; height: 24px; stroke-width: 2.6; }
.shp-spend-link { width: 100%; display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 14px 0 12px; border: 0; border-top: 1px solid rgba(250, 252, 250, .12); background: none; color: #FAFCFA; font: 650 .88rem/1 var(--font-primary); cursor: pointer; }
.shp-spend-link span { flex: 1; text-align: left; }
.shp-spend-link svg.lc { width: 17px; height: 17px; flex: none; }
.shp-spend-link svg.lc:first-of-type { color: #E2BC55; }
.shp-spend-link svg.lc:last-of-type { opacity: .6; }
.shp-sec { display: flex; flex-direction: column; }
.shp-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; margin-bottom: 10px; }
.shp-sec-h h2 { margin: 0; font: 750 1.08rem/1.2 var(--font-primary); letter-spacing: -.01em; }
.shp-sec-h h2 small { margin-left: 4px; font: 600 .78rem/1 var(--font-mono); color: var(--text-soft); }
.shp-new-pill { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: var(--cta); color: var(--cta-fg); font: 750 .88rem/1 var(--font-primary); cursor: pointer; }
.shp-new-pill svg.lc { width: 18px; height: 18px; stroke-width: 2.6; }
.shp-first { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 20px 20px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); text-align: center; }
.shp-first-ico { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 18px; background: var(--lime); color: var(--adanc); }
.shp-first-ico svg.lc { width: 26px; height: 26px; }
.shp-first b { font: 750 1.05rem/1.2 var(--font-primary); }
.shp-first p { max-width: 30ch; margin: 0 0 8px; font-size: .86rem; line-height: 1.45; color: var(--text-soft); }
.shp-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shp-tools.one { grid-template-columns: 1fr; }
.shp-tool { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: transform .12s; }
.shp-tool:active { transform: scale(.97); }
.shp-tool-ico { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 13px; color: var(--adanc); }
.shp-tool-ico.wk { background: var(--cer); }
.shp-tool-ico.pr { background: #EED9A0; }
.shp-tool-ico svg.lc { width: 20px; height: 20px; }
.shp-tool b { font: 750 .95rem/1.2 var(--font-primary); }
.shp-tool small { font-size: .74rem; color: var(--text-soft); }

/* Progres: cardul de greutate compact */
.wgc { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.wgc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wgc-now { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.wgc-now strong { display: flex; align-items: baseline; gap: 4px; font: 800 2.6rem/1 var(--font-primary); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.wgc-now strong small { font-size: .95rem; font-weight: 700; letter-spacing: 0; color: rgba(255, 255, 255, .6); }
.wgc-now em { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); font: 650 .74rem/1 var(--font-primary); font-style: normal; color: rgba(255, 255, 255, .8); }
.wgc-now em.down { background: rgba(200, 240, 74, .16); color: #C8F04A; }
.wgc-now em.up { background: rgba(255, 159, 67, .16); color: #FFD3A8; }
.wgc-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.wgc-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8DB33A, #C8F04A); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.wgc-ends { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
.wgc-ends span { display: flex; flex-direction: column; gap: 5px; }
.wgc-ends span:nth-child(2) { align-items: center; }
.wgc-ends span:last-child { align-items: flex-end; }
.wgc-ends small { font: 600 .64rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .55); }
.wgc-ends b { font: 750 .98rem/1 var(--font-primary); white-space: nowrap; }
.wgc-ends b.down { color: #C8F04A; }
.wgc-ends b.up { color: #FFD3A8; }

/* Pro: meniul pe secțiuni */
.pgr { margin-top: 20px; }
.pgr h2 { margin: 0 4px 8px; font: 600 .72rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }
.pgr-card { overflow: hidden; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }
.pgr-row { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 16px 12px 12px; border: 0; background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: background .12s; }
.pgr-row + .pgr-row { border-top: 1px solid var(--border); }
.pgr-row:active { background: var(--surface-alt); }
.pgr-ico { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--adanc); }
.pgr-ico svg.lc { width: 20px; height: 20px; }
.pgr-ico.sky { background: var(--cer); }
.pgr-ico.rose { background: #F4C6D2; }
.pgr-ico.lime { background: var(--lime); }
.pgr-ico.gold { background: #EED9A0; }
.pgr-ico.sand { background: #E7DCC4; }
.pgr-ico.muted { background: var(--surface-alt); color: var(--text-soft); }
.pgr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pgr-txt b { font: 700 .98rem/1.2 var(--font-primary); }
.pgr-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; color: var(--text-soft); }
.pgr-row > svg.lc { flex: none; width: 18px; height: 18px; color: var(--text-soft); }
.pgr-row em { flex: none; padding: 4px 8px; border-radius: 999px; background: var(--surface-alt); font: 650 .6rem/1 var(--font-mono); font-style: normal; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); }
.pgr-row.soon .pgr-txt b { color: var(--text-muted); }


/* Profil (client) v3: antetul ca un card de identitate — poza mare, numele,
   emailul și câteva etichete; „Ieșire din cont” ca un rând de listă, cu text
   roșu, ca în Setări pe iPhone. */
.pf3-hero {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%;
  margin: 6px 0 22px; padding: 24px 18px 18px;
  border: 1px solid var(--border); border-radius: 28px;
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--lime) 18%, transparent), transparent 70%),
    var(--surface);
  color: var(--text); font: inherit; text-align: center; cursor: pointer;
  transition: transform .15s;
}
.pf3-hero:active { transform: scale(.985); }
.pf3-av { position: relative; margin-bottom: 10px; }
.pf3-av .avatar { width: 92px !important; height: 92px !important; font-size: 2rem !important; box-shadow: 0 0 0 4px var(--surface), 0 10px 28px -10px rgba(8, 36, 28, .45); }
.pf3-av i {
  position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: #0E3B2E; color: #C8F04A; box-shadow: 0 0 0 3px var(--surface);
}
.pf3-av i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf3-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 1.5rem/1.15 var(--font-primary); letter-spacing: -.03em; }
.pf3-mail { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; color: var(--text-soft); }
.pf3-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.pf3-chips > span {
  padding: 6px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  font: 700 .74rem/1 var(--font-primary); color: var(--text);
}
.pf3-chips > span:first-child { background: var(--lime); color: #0E3B2E; }
.pf3-edit { display: inline-flex; align-items: center; gap: 2px; margin-top: 14px; font: 700 .86rem/1 var(--font-primary); color: var(--primary); }
.pf3-edit svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
html[data-theme="dark"] .pf3-chips > span:first-child { color: #0E3B2E; }

.pf-logout {
  height: 54px !important; margin-top: 26px !important;
  border: 1px solid var(--border) !important; border-radius: 20px !important;
  background: var(--surface) !important; color: #E5484D !important;
  font: 700 1rem/1 var(--font-primary) !important;
}
.pf-logout svg { display: none; }
.pf-logout:active { background: color-mix(in srgb, #E5484D 8%, var(--surface)) !important; }


/* Pro v3: mai puțin pe ecran — Cumpărături și Rețete ca plăci mari, restul o
   listă scurtă, „în curând” un singur rând. */
.ph2-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 18px; }
.ph2-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; height: 128px; padding: 14px;
  border: 0; border-radius: 24px; color: #0E3B2E; font: inherit; text-align: left; cursor: pointer;
  transition: transform .15s;
}
.ph2-tile:active { transform: scale(.97); }
.ph2-tile.lime { background: var(--lime); }
.ph2-tile.sky { background: #CFE8F7; }
.ph2-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: auto; border-radius: 14px; background: rgba(255, 255, 255, .55); }
.ph2-ico svg.lc { width: 21px; height: 21px; }
.ph2-tile b { font: 800 1.1rem/1.1 var(--font-primary); letter-spacing: -.02em; }
.ph2-tile small { font: 600 .8rem/1.2 var(--font-primary); opacity: .72; }
html[data-theme="dark"] .ph2-tile.sky { background: #23465A; color: #EAF6FF; }
html[data-theme="dark"] .ph2-tile.sky .ph2-ico { background: rgba(255, 255, 255, .12); }
.ph2-soon { display: flex; align-items: center; gap: 10px; margin: 18px 4px 0; font-size: .8rem; line-height: 1.4; color: var(--text-soft); }
.ph2-soon svg.lc { flex: none; width: 18px; height: 18px; color: var(--gold, #C9A227); }
.ph2-soon b { font-weight: 700; color: var(--text); }

/* Lista de cumpărături v3: numele fără linie de formular, scanarea în câmpul
   de adăugare, magazinele într-un rând care începe la margine (fără „lipire”
   care îl tăia), lista goală fără chenar. */
.pro .pro-title-input { border-bottom: 0 !important; margin: 6px 0 14px; padding: 2px 0 !important; font-size: 1.75rem !important; }
.pro .pro-title-input:focus { border-bottom: 0 !important; }
.pro .pro-title-input::placeholder { color: var(--text-soft); }
.shp-field { padding-right: 6px; }
.shp-field .shp-scan { width: 42px; height: 42px; margin: 0; border: 0; border-radius: 13px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.shp-field .shp-scan svg.lc { width: 20px; height: 20px; color: var(--text); }
.shp-where { scroll-snap-type: none; gap: 6px; margin-top: 10px; scroll-padding-inline: 16px; }
.shp-st { height: 38px; padding: 0 14px 0 4px; font-size: .84rem; }
.shp-st:first-of-type { padding-left: 14px; }
.shp-st .pro-store-logo.sm { width: 30px; height: 30px; padding: 3px; }
.shp-empty { margin-top: 34px; padding: 10px 24px; border: 0; }
.shp-empty svg.lc { width: 34px; height: 34px; padding: 10px; box-sizing: content-box; border-radius: 18px; background: color-mix(in srgb, var(--lime) 35%, transparent); color: var(--text); }

/* Confirmarea emailului (verify-email.html) */
.ve-mail { display: grid; place-items: center; width: 84px; height: 84px; margin: 6px auto 18px; border-radius: 26px; background: color-mix(in srgb, var(--lime) 45%, transparent); color: #0E3B2E; }
.ve-mail svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ve-resend { margin-top: 10px; }
.ve-resend:disabled { opacity: .55; }
.ve-hint { margin: 14px 0 0; font-size: .82rem; line-height: 1.5; color: var(--text-soft); text-align: center; }
.ve-hint b { color: var(--text); }

/* „Continuă cu Google” (login / register) */
.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; font: 600 .78rem/1 var(--font-primary); color: var(--text-soft); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: #fff; color: #1F1F1F;
  font: 700 .98rem/1 var(--font-primary); cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.btn-google:active { transform: scale(.98); }
.btn-google:disabled { opacity: .6; }
.btn-google svg { width: 20px; height: 20px; flex: none; }
html[data-theme="dark"] .btn-google { background: #131314; color: #E3E3E3; border-color: #8E918F; }

/* Profil: amintire pentru un cont mai vechi cu emailul neconfirmat */
.ev-banner {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: -8px 0 18px; padding: 12px 14px;
  border: 1px solid color-mix(in srgb, #E8A23A 45%, var(--border)); border-radius: 18px;
  background: color-mix(in srgb, #E8A23A 10%, var(--surface)); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.ev-banner:disabled { cursor: default; }
.ev-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #E8A23A; box-shadow: 0 0 0 4px color-mix(in srgb, #E8A23A 25%, transparent); }
.ev-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ev-txt b { font: 750 .9rem/1.2 var(--font-primary); }
.ev-txt small { font-size: .8rem; color: var(--text-soft); }
.sp-profile > .ev-banner { margin: 0 0 14px; }