/* ============================================================
   SMART TRAINER — пълен редизайн (v2)
   Зарежда се СЛЕД styles.css. Изцяло нова визуална система в
   езика на сайта: черно/огън, Sofia Sans Extra Condensed,
   остри карти, моно етикети. JS логиката не се пипа.
   ============================================================ */

/* Шрифтовете идват от <link> в app.html — без дублиращ @import */

/* Стойностите идват от tokens.css — единен бранд с лендинга.
   Порталът е тъмен по дизайн (tokens: color-scheme dark по подразбиране). */
:root {
  --bg: var(--ink-bg);
  --panel: var(--ink-surface);
  --panel-strong: var(--ink-surface-2);
  --panel-3: var(--ink-surface-3);
  --stroke: var(--ink-line);
  --stroke-2: var(--ink-line-2);
  --text: var(--ink-text);
  --muted: var(--ink-muted);
  --muted-2: var(--ink-muted-2);
  --accent: var(--brand-fire);
  --accent-2: var(--brand-fire-hi);
  --accent-soft: var(--brand-fire-soft);
  --violet: var(--brand-fire);          /* старите violet референции стават огън */
  --ok: var(--status-ok);
  --warn: var(--status-warn);
  --danger: var(--status-bad);
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, .7);
  --radius: var(--shape-radius);
  --f-disp: var(--type-display);
  --f-body: var(--type-body);
  --f-mono: var(--type-mono);
}

/* ---------- ОСНОВА ---------- */
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--f-body) !important;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: #fff }

/* Фонова текстура — dot grid вместо старите blur петна */
.bg-blur, .blur-a, .blur-b { display: none !important }
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, #1E1E24 1px, transparent 1.2px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 80%);
  opacity: .5;
}

/* ---------- ТИПОГРАФИЯ ---------- */
h1, h2, h3, h4, .eyebrow + h1, .section-head h2, .auth-header h1 {
  font-family: var(--f-disp) !important;
  text-transform: uppercase;
  letter-spacing: .01em !important;
  line-height: .95 !important;
  color: var(--text) !important;
}
.eyebrow, .tiny, .brand-sub, .auth-sub, .section-note {
  font-family: var(--f-mono) !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  font-size: .68rem !important;
  color: var(--muted) !important;
}
.eyebrow { color: var(--accent) !important }

/* ---------- КАРТИ И ПАНЕЛИ ---------- */
.glass, .panel, .auth-card, .chart-card, .checkin-card, .calculator-card,
.progress-card, .daily-log-card, .custom-food-card, .scanner-card,
.premium-card, .body-map-card, .single-control-card, .wizard-focus-card,
.nutrition-support-card, .choice-card {
  background: var(--panel) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.glass:hover, .choice-card:hover, .chart-card:hover {
  border-color: var(--stroke-2) !important;
}
.premium-card {
  border-color: var(--accent) !important;
  background:
    linear-gradient(180deg, var(--accent-soft), transparent 40%),
    var(--panel) !important;
}

/* ---------- БУТОНИ ---------- */
button, .primary-btn, .secondary-btn {
  font-family: var(--f-body) !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  letter-spacing: .01em;
  transition: transform .18s, background .18s, border-color .18s, box-shadow .18s !important;
}
.primary-btn, button[type="submit"], .auth-submit {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}
.primary-btn:hover, button[type="submit"]:hover, .auth-submit:hover {
  background: var(--accent-2) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 30px -10px rgba(255, 77, 18, .5) !important;
}
.primary-btn:active { transform: scale(.98) }
.secondary-btn, .ghost-btn, .sound-btn, .muscle-picker-btn {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--stroke) !important;
}
.secondary-btn:hover, .ghost-btn:hover, .muscle-picker-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent-2) !important;
  background: transparent !important;
}

/* ---------- ФОРМИ ---------- */
input, select, textarea {
  background: var(--panel-strong) !important;
  border: 1px solid var(--stroke) !important;
  color: var(--text) !important;
  border-radius: 9px !important;
  font-family: var(--f-body) !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
input::placeholder, textarea::placeholder { color: var(--muted-2) !important }
label, .field > span {
  font-family: var(--f-mono) !important;
  font-size: .66rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  color: var(--muted) !important;
}
input[type="range"] { accent-color: var(--accent) }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent) }

/* ---------- AUTH ЕКРАН ---------- */
.auth-overlay {
  background: var(--bg) !important;
  backdrop-filter: none !important;
}
.auth-card {
  border-top: 3px solid var(--accent) !important;
  box-shadow: var(--shadow) !important;
  animation: authIn .6s cubic-bezier(.2,.75,.2,1) both;
}
@keyframes authIn {
  from { opacity: 0; transform: translateY(24px) }
  to   { opacity: 1; transform: none }
}
.auth-tabs {
  background: var(--panel-strong) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 10px !important;
  padding: 3px !important;
}
.auth-tab {
  border-radius: 7px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  background: transparent !important;
  border: none !important;
}
.auth-tab.active {
  background: var(--accent) !important;
  color: #fff !important;
}
.auth-feedback { font-family: var(--f-mono) !important; font-size: .78rem !important }

/* ---------- НАВИГАЦИЯ ---------- */
.site-header, .top-nav {
  background: rgba(10, 10, 12, .88) !important;
  backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--stroke) !important;
  box-shadow: none !important;
}
.nav-link {
  color: var(--muted) !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  transition: color .18s, border-color .18s !important;
}
.nav-link:hover { color: var(--text) !important }
.nav-link.active {
  color: var(--text) !important;
  border-bottom-color: var(--accent) !important;
  background: transparent !important;
}
.user-badge {
  background: var(--panel-strong) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 999px !important;
  font-family: var(--f-mono) !important;
  font-size: .72rem !important;
}

/* ---------- ЗНАЧКИ, ЧИПОВЕ, ПИЛСОВЕ ---------- */
.benefit-pill, .muscle-tag, .shortcut-chip, .coach-badge, .about-pills span {
  background: var(--accent-soft) !important;
  color: var(--accent-2) !important;
  border: 1px solid rgba(255, 77, 18, .3) !important;
  border-radius: 999px !important;
  font-family: var(--f-mono) !important;
  font-size: .66rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}
.shortcut-link {
  border: 1px solid var(--stroke) !important;
  background: var(--panel) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
}
.shortcut-link:hover { border-color: var(--accent) !important }

/* ---------- ПРОГРЕС И ДАННИ ---------- */
progress, [class*="progress-bar"], .setup-progress {
  background: var(--panel-strong) !important;
  border-radius: 99px !important;
}
progress::-webkit-progress-bar { background: var(--panel-strong) !important; border-radius: 99px }
progress::-webkit-progress-value { background: var(--accent) !important; border-radius: 99px }
.target-track { stroke: var(--stroke) !important }
.target-ring circle:last-child { stroke: var(--accent) !important }
.nutrient-box, .summary-item {
  background: var(--panel-strong) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 10px !important;
}
.nutrient-box b, .summary-item b, .range-readout {
  font-family: var(--f-mono) !important;
  color: var(--text) !important;
}
.nutrition-kpi-strip {
  border-block: 1px solid var(--stroke) !important;
  background: transparent !important;
}

/* ---------- ТАБЛИЦИ И СПИСЪЦИ ---------- */
table { border-color: var(--stroke) !important }
th {
  font-family: var(--f-mono) !important;
  font-size: .64rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--stroke) !important;
  background: transparent !important;
}
td { border-bottom: 1px solid var(--stroke) !important; color: var(--text) }
tr:hover td { background: var(--panel-strong) !important }
.progress-list li, .summary-list li {
  border-bottom: 1px dashed var(--stroke) !important;
}

/* ---------- CHECK-IN И WIZARD ---------- */
.setup-bar, .setup-progress-top {
  background: var(--panel) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 10px !important;
}
.wizard-nav button { min-width: 110px }
.single-question-stage h2 em, .consult-banner-accent { color: var(--accent) !important }
.choice-card.selected, .choice-card.active {
  border-color: var(--accent) !important;
  background: linear-gradient(180deg, var(--accent-soft), transparent 50%), var(--panel) !important;
}

/* ---------- SCANNER / BODY MAP ---------- */
.scanner-frame {
  border: 1.5px dashed var(--stroke-2) !important;
  border-radius: 12px !important;
  background: var(--panel-strong) !important;
}
.scanner-frame:hover { border-color: var(--accent) !important }
.body-map-status {
  font-family: var(--f-mono) !important;
  color: var(--accent) !important;
  letter-spacing: .14em;
}
.selected-muscle-panel {
  border-left: 3px solid var(--accent) !important;
  background: var(--panel) !important;
}

/* ---------- КОУЧ ЕЛЕМЕНТИ ---------- */
.coach-bubble {
  background: var(--panel-strong) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 12px 12px 12px 3px !important;
}
.typewriter-quote, .typewriter-inline { color: var(--muted) !important }
.whisper, .whisper-a, .whisper-b, .whisper-c { color: var(--muted-2) !important }
.consult-banner {
  background: linear-gradient(120deg, var(--accent-soft), transparent 60%), var(--panel) !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--radius) !important;
}

/* ---------- TOAST ---------- */
.toast {
  background: var(--panel-3) !important;
  border: 1px solid var(--stroke-2) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  font-family: var(--f-body) !important;
  box-shadow: var(--shadow) !important;
}

/* ---------- FOOTER ---------- */
.site-footer {
  border-top: 1px solid var(--stroke) !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-family: var(--f-mono) !important;
  font-size: .68rem !important;
  letter-spacing: .16em !important;
}

/* ---------- ЛИНКОВЕ ---------- */
a { color: var(--accent) }
a:hover { color: var(--accent-2) }
.nav-link, .shortcut-link { color: var(--muted) }

/* ---------- РАЗДЕЛИТЕЛИ / СКРОЛБАР ---------- */
hr, .divider { border-color: var(--stroke) !important; background: var(--stroke) !important }
::-webkit-scrollbar { width: 8px; height: 8px }
::-webkit-scrollbar-track { background: var(--bg) }
::-webkit-scrollbar-thumb { background: var(--stroke-2); border-radius: 4px }
::-webkit-scrollbar-thumb:hover { background: var(--accent) }

/* ============================================================
   SMART TRAINER значка (горе вдясно)
   ============================================================ */
.legacy-badge {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  background: var(--panel-strong);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: .45rem .5rem .45rem .85rem;
  font-family: var(--f-mono) !important;
  font-size: .68rem;
  letter-spacing: .18em;
  z-index: 999;
  box-shadow: var(--shadow);
  animation: legacyIn .6s ease .3s both;
}
@keyframes legacyIn {
  from { opacity: 0; transform: translateY(-8px) }
  to   { opacity: 1; transform: none }
}
.legacy-badge .lb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 77, 18, .25);
  animation: pulseLB 1.8s ease-in-out infinite;
}
@keyframes pulseLB {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 77, 18, .25) }
  50%      { box-shadow: 0 0 0 7px rgba(255, 77, 18, 0) }
}
.legacy-badge .lb-text { color: var(--muted) }
.legacy-badge .lb-link {
  background: var(--accent) !important;
  color: #fff !important;
  padding: .35rem .8rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: .66rem;
  letter-spacing: .14em;
  transition: background .18s, transform .18s;
}
.legacy-badge .lb-link:hover {
  background: var(--accent-2) !important;
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  .legacy-badge {
    top: .6rem; right: .6rem;
    padding: .35rem .4rem .35rem .7rem;
    font-size: .62rem; gap: .5rem;
  }
  .legacy-badge .lb-link { padding: .3rem .6rem; font-size: .6rem }
}


/* ============================================================
   СИНХРОНИЗАЦИЯ СЪС СТУДИОТО — карта в началния екран
   ============================================================ */
.studio-sync-card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  margin: 1.2rem 0;
  animation: legacyIn .5s ease both;
}
.ss-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem }
.ss-eyebrow {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .64rem; letter-spacing: .22em; color: var(--accent); margin-bottom: .3rem;
}
.ss-head h3 { font-size: 1.5rem; margin: 0 }
.ss-streak {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(255,77,18,.12); border: 1px solid var(--accent);
  border-radius: 999px; padding: .35rem .8rem;
  font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: var(--accent-2);
}
.ss-streak svg { width: 14px; height: 14px; color: var(--accent) }
.ss-streak b { color: var(--accent); font-size: .85rem }
.ss-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem }
.ss-list li {
  display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px dashed var(--stroke); font-size: .92rem;
}
.ss-list li:last-child { border-bottom: none }
.ss-date { font-family: 'JetBrains Mono', monospace; font-size: .74rem; color: var(--muted) }
.ss-kcal { color: var(--text) }
.ss-score { font-family: 'JetBrains Mono', monospace; font-size: .95rem }
.ss-score.ok { color: #4ADE80 } .ss-score.warn { color: #FBBF24 } .ss-score.bad { color: #F87171 }
.ss-empty { color: var(--muted); font-size: .92rem; margin-bottom: 1rem }
.ss-link { color: var(--accent) !important; font-weight: 700; text-decoration: none }
.ss-link:hover { color: var(--accent-2) !important }


/* ---------- Локални профили: нови елементи ---------- */
.auth-note {
  font-size: .82rem; color: var(--muted); line-height: 1.5;
  border-left: 2px solid var(--accent); padding-left: .8rem; margin: .2rem 0 .4rem;
}
.opt-label { color: var(--muted-2); font-weight: 400; font-size: .78em }
.auth-import {
  width: 100%; margin-top: .5rem; font-size: .85rem;
  border: 1px dashed var(--stroke-2) !important; background: transparent !important;
}
.auth-import:hover { border-color: var(--accent) !important; color: var(--accent-2) }