/* =====================================================================
   GymDiet Master — Design System
   Single source of visual truth, derived pixel-for-pixel from the
   reference PNG (68a6eeec…). Pure presentation layer: it only retunes
   existing design tokens and the shared structural primitives, so every
   screen inherits the same look. No markup / JS / route / backend change.

   Extracted tokens (from the PNG):
     bg              #070f22  (deep navy-black)
     card surface    #161d33 → #0f1628  (slate-navy, subtle violet border)
     accent          #6a4fe0  gradient #5b3fd6 → #7b5cf0   deep #3a2596
     accent soft     rgba(106,79,224,.14)  border rgba(124,108,230,.35)
     text            #eef0fa   muted #8b96b8   kicker rgba(150,140,225,.75)
     positive/check  #5cf0c8   premium gold #f4c560
     radius          card 20 · button 14 · input 14 · pill 999
     shadow          0 14px 34px rgba(3,7,20,.50)
   ===================================================================== */

/* ---- 1. Tokens (apply to every theme selector so the app always shows
        the single PNG look, regardless of the light/dark toggle) -------- */
:root,
:root[data-theme='light'],
:root[data-theme='dark'],
body.dark-theme {
  /* DS scale */
  --ds-bg: #070f22;
  --ds-bg-2: #0a1228;
  --ds-card-top: #161d33;
  --ds-card-bottom: #0f1628;
  --ds-card-border: rgba(124, 108, 230, 0.16);
  --ds-card-border-strong: rgba(124, 108, 230, 0.32);
  --ds-accent: #6a4fe0;
  --ds-accent-2: #7b5cf0;
  --ds-accent-deep: #3a2596;
  --ds-accent-grad: linear-gradient(135deg, #5b3fd6 0%, #7b5cf0 100%);
  --ds-accent-soft: rgba(106, 79, 224, 0.14);
  --ds-accent-soft-border: rgba(124, 108, 230, 0.38);
  --ds-positive: #5cf0c8;
  --ds-gold: #f4c560;
  --ds-text: #eef0fa;
  --ds-text-muted: #8b96b8;
  --ds-kicker: rgba(150, 140, 225, 0.78);
  --ds-radius-card: 20px;
  --ds-radius-btn: 14px;
  --ds-radius-input: 14px;
  --ds-radius-pill: 999px;
  --ds-shadow-card: 0 14px 34px rgba(3, 7, 20, 0.5);
  --ds-shadow-accent: 0 12px 26px rgba(91, 63, 214, 0.42);

  /* Legacy green/blue accent -> violet (drives menu period/meals active,
     selected chips, .btn primaries, focus rings across many screens) */
  --primary: var(--ds-accent);
  --primary-dark: var(--ds-accent-deep);
  --primary-light: var(--ds-accent-2);
  --primary-gradient: var(--ds-accent-grad);

  /* Map the app's existing global tokens onto the DS palette */
  --bg-primary: var(--ds-bg);
  --bg-card: var(--ds-card-top);
  --bg-card-glass: rgba(22, 29, 51, 0.86);
  --text-primary: var(--ds-text);
  --text-secondary: var(--ds-text-muted);
  --border-color: var(--ds-card-border);
  --border-light: var(--ds-card-border);
  --shadow-card: var(--ds-shadow-card);
  --shadow-button: var(--ds-shadow-accent);

  /* Dashboard surfaces -> unified navy card */
  --dashboard-title-color: var(--ds-text);
  --dashboard-muted-color: var(--ds-text-muted);
  --dashboard-kicker-color: var(--ds-kicker);
  --dashboard-hero-bg: linear-gradient(160deg, var(--ds-card-top), var(--ds-card-bottom));
  --dashboard-hero-border: var(--ds-card-border);
  --dashboard-hero-shadow: var(--ds-shadow-card);
  --dashboard-hero-glow-top: rgba(106, 79, 224, 0.28);
  --dashboard-hero-glow-bottom: rgba(106, 79, 224, 0.14);
  --dashboard-surface-bg: linear-gradient(160deg, var(--ds-card-top), var(--ds-card-bottom));
  --dashboard-surface-border: var(--ds-card-border);
  --dashboard-surface-shadow: var(--ds-shadow-card);
  --dashboard-stat-bg: rgba(124, 108, 230, 0.08);
  --dashboard-stat-border: var(--ds-card-border);
  --dashboard-stat-label: var(--ds-text-muted);
  --dashboard-stat-value: var(--ds-text);
  --dashboard-stat-card-bg: linear-gradient(150deg, rgba(124, 108, 230, 0.12), rgba(124, 108, 230, 0.04));
  --dashboard-soft-panel: rgba(124, 108, 230, 0.08);
  --dashboard-soft-border: var(--ds-card-border);
  --dashboard-divider-color: rgba(124, 108, 230, 0.18);
  --dashboard-menu-card-border: var(--ds-card-border);
  --dashboard-menu-card-hover-border: var(--ds-card-border-strong);
  --dashboard-menu-icon-bg: rgba(124, 108, 230, 0.16);

  /* Accent-driven pieces -> violet */
  --dashboard-pill-bg: var(--ds-accent-soft);
  --dashboard-pill-border: var(--ds-accent-soft-border);
  --dashboard-pill-text: #c7bcff;
  --progress-ring-fill: var(--ds-accent);
  --progress-hero-bar-fill: linear-gradient(90deg, var(--ds-accent), var(--ds-accent-2));
  --progress-fill-protein: linear-gradient(90deg, #5b3fd6, #7b5cf0);
  --progress-fill-fat: linear-gradient(90deg, #f4c560, #f08a3c);
  --progress-fill-carbs: linear-gradient(90deg, #6a4fe0, #a855f7);
  --progress-fill-water: linear-gradient(90deg, #4aa8ff, #6a4fe0);

  /* Premium CTA / logo -> violet+gold to match PNG header */
  --dashboard-logo-gradient: linear-gradient(135deg, #c9bcff 0%, #8b78ff 50%, #5cf0c8 100%);
  --dashboard-premium-cta-bg:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.18), transparent 58%),
    var(--ds-accent-grad);
  --dashboard-premium-cta-border: var(--ds-accent-soft-border);
  --dashboard-premium-cta-shadow: var(--ds-shadow-accent), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Page background */
html, body { background: var(--ds-bg); }
#app, .screen { background: transparent; }

/* ---- 2. Shared primitives restyled to the PNG ---------------------- */

/* AppCard — every card-like surface */
.gd-card,
.dashboard-surface-card,
.dashboard-progress-card,
.card:not(.menu-card),
.ds-app-card {
  background: linear-gradient(160deg, var(--ds-card-top), var(--ds-card-bottom));
  border: 1px solid var(--ds-card-border);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
}

/* Section kicker / heading typography */
.dashboard-section-kicker,
.ds-kicker {
  color: var(--ds-kicker);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* GradientButton — primary CTA */
.btn.btn-primary,
.gd-btn-primary,
.share-progress-btn,
.ds-gradient-button {
  background: var(--ds-accent-grad);
  border: none;
  border-radius: var(--ds-radius-btn);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--ds-shadow-accent);
}
.btn.btn-primary:active,
.ds-gradient-button:active { transform: translateY(1px); }
.btn.btn-primary:disabled { opacity: 0.5; box-shadow: none; }

/* SecondaryButton — outline violet pill */
.btn.btn-secondary,
.btn.btn-outline,
.ds-secondary-button {
  background: var(--ds-accent-soft);
  border: 1px solid var(--ds-accent-soft-border);
  border-radius: var(--ds-radius-btn);
  color: #c7bcff;
  font-weight: 600;
}
.btn.btn-secondary:active,
.btn.btn-outline:active { transform: translateY(1px); }

/* InputField — dark fields / textareas / selects */
.food-input,
.input-field,
input[type='text'], input[type='number'], input[type='time'],
input[type='search'], input[type='email'], textarea, select,
.ds-input {
  background: rgba(124, 108, 230, 0.07);
  border: 1px solid var(--ds-card-border);
  border-radius: var(--ds-radius-input);
  color: var(--ds-text);
}
.food-input::placeholder, textarea::placeholder, input::placeholder { color: var(--ds-text-muted); }
.food-input:focus, .input-field:focus, input:focus, textarea:focus, select:focus,
.ds-input:focus {
  outline: none;
  border-color: var(--ds-accent-soft-border);
  box-shadow: 0 0 0 3px rgba(106, 79, 224, 0.18);
}

/* SegmentTabs — inactive = dark outline pill, active = solid violet pill (PNG) */
.tab-btn,
.ds-segmented-item { color: var(--ds-text-muted); }
.tab-btn.active,
.tab-btn.is-active,
.ds-segmented-item.is-active {
  color: #fff;
  background: var(--ds-accent-grad);
  border-color: transparent;
  box-shadow: var(--ds-shadow-accent);
}

/* BottomNav — active item violet */
.bottom-nav { background: rgba(9, 14, 33, 0.96); border-top: 1px solid var(--ds-card-border); }
.nav-item { color: var(--ds-text-muted); }
.nav-item.active,
.nav-item.is-active { color: #8b78ff; }
.nav-item.active .nav-icon,
.nav-item.active svg { color: #8b78ff; }

/* ProgressBar / ProgressRing helpers (named DS components) */
.ds-progress-bar { height: 8px; border-radius: 6px; background: rgba(124, 108, 230, 0.16); overflow: hidden; }
.ds-progress-bar > .fill { height: 100%; border-radius: inherit; background: var(--ds-accent-grad); }
.ds-progress-ring { color: var(--ds-accent); }

/* ChartCard / AiCard / EmptyState / BottomSheet */
.ds-chart-card { background: linear-gradient(160deg, var(--ds-card-top), var(--ds-card-bottom)); border: 1px solid var(--ds-card-border); border-radius: var(--ds-radius-card); padding: 16px; box-shadow: var(--ds-shadow-card); }
.ds-ai-card,
.ai-recs-panel,
.home-ai {
  background: linear-gradient(120deg, rgba(123, 92, 240, 0.22), rgba(106, 79, 224, 0.10));
  border: 1px solid var(--ds-accent-soft-border);
  border-radius: var(--ds-radius-btn);
  color: var(--ds-text);
}
.ds-empty-state,
.empty-state {
  background: rgba(124, 108, 230, 0.06);
  border: 1px dashed var(--ds-card-border-strong);
  border-radius: var(--ds-radius-card);
  color: var(--ds-text-muted);
  text-align: center;
}
.ds-bottom-sheet,
.dc-corr-sheet,
.modal-sheet {
  background: linear-gradient(180deg, var(--ds-card-top), var(--ds-bg-2));
  border: 1px solid var(--ds-card-border);
  border-radius: 24px 24px 0 0;
}

/* Premium pill — gold outline as in PNG header */
.dashboard-premium-badge,
.menu-premium-pill {
  color: var(--ds-gold) !important;
  border: 1px solid rgba(244, 197, 96, 0.5) !important;
  background: rgba(244, 197, 96, 0.10) !important;
  border-radius: var(--ds-radius-pill) !important;
  -webkit-text-fill-color: var(--ds-gold) !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}

/* Workout: ONLY restyle containers / accent colour, never the muscle picker
   imagery, geometry or its interactive logic. */
.workout-card, .workout-section.card { background: linear-gradient(160deg, var(--ds-card-top), var(--ds-card-bottom)); border: 1px solid var(--ds-card-border); border-radius: var(--ds-radius-card); }
#screen-workout {
  --workout-cyan: var(--ds-accent-2);
  --workout-active-green: var(--ds-accent);
  --workout-violet: var(--ds-accent);
}
/* Primary CTAs inside workout (e.g. «Далее») -> violet gradient, not teal */
#screen-workout .workout-donor-footer-next,
#screen-workout .workout-next-exercise,
#screen-workout .btn.btn-primary {
  background: var(--ds-accent-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ---- 3. Finance — same GymDiet system (PNG: violet primary, teal charts).
        Retune the screen's local --fin-* tokens so cards/tabs/charts/buttons
        match the rest of the app. Selector mirrors finance.css specificity and
        loads later, so it wins. Logic/markup untouched. ------------------- */
#screen-finance.finance-screen {
  --fin-bg: var(--ds-bg);
  --fin-panel: linear-gradient(160deg, var(--ds-card-top), var(--ds-card-bottom));
  --fin-panel-2: var(--ds-card-bottom);
  --fin-line: var(--ds-card-border);
  --fin-text: var(--ds-text);
  --fin-muted: var(--ds-text-muted);
  --fin-blue: var(--ds-accent);
  --fin-cyan: var(--ds-accent-2);
  --fin-violet: var(--ds-accent);
  --fin-green: var(--ds-positive);
  background:
    radial-gradient(70% 35% at 50% 0%, rgba(106, 79, 224, 0.20), transparent 64%),
    linear-gradient(180deg, var(--ds-bg-2) 0%, var(--ds-bg) 100%);
}
#screen-finance::before {
  background:
    radial-gradient(70% 42% at 50% 112%, rgba(106, 79, 224, 0.16), transparent 70%),
    radial-gradient(52% 30% at 90% 16%, rgba(123, 92, 240, 0.12), transparent 72%);
}
/* SegmentTabs in finance: active = solid violet pill */
#screen-finance .finance-top-tabs button,
#screen-finance .finance-chart-switch button {
  border: 1px solid var(--ds-card-border);
  border-radius: var(--ds-radius-btn);
  background: rgba(124, 108, 230, 0.06);
}
#screen-finance .finance-top-tabs button.is-active,
#screen-finance .finance-chart-switch button.is-active {
  color: #fff;
  border-color: transparent;
  background: var(--ds-accent-grad);
  box-shadow: var(--ds-shadow-accent);
}
/* Finance cards / hero -> AppCard */
#screen-finance .finance-hero,
#screen-finance .finance-card,
#screen-finance .finance-panel,
#screen-finance .finance-tab-panel > section {
  border-radius: var(--ds-radius-card);
  border: 1px solid var(--ds-card-border);
}

/* ---- 4. Analysis (#screen-analysis) — local cyan/blue tokens -> violet --- */
#screen-analysis {
  --fa-blue: var(--ds-accent);
  --fa-cyan: var(--ds-accent-2);
  --fa-cyan-soft: #b9a9ff;
}
/* "AI Nutrition" badge: recolour green/cyan spark to the violet system (kept,
   not a separate brand — same GymDiet header). */
#screen-analysis .fa-spark { background: var(--ds-accent) !important; }
#screen-analysis .fa-badge { color: #c7bcff; border-color: var(--ds-accent-soft-border); }

/* =====================================================================
   Bottom-nav always visible + content not hidden behind it.
   Fixes nav disappearing/overlap after «Сохранить меню».
   ===================================================================== */
.bottom-nav,
#bottom-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;
}
/* keep the profile-edit hide working */
.bottom-nav.nav--hidden { transform: translateY(120%); }

/* Toast must sit BELOW the nav, never cover it */
#toast-container { z-index: 9998 !important; }

/* Only the OUTER scroll container clears the fixed nav. The inner blocks must
   NOT carry that padding, or a big empty gap appears before «Сохранить меню». */
#screen-menu .main-content,
#screen-my-menu .main-content {
  padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
}
#menu-result-days { padding-bottom: 0; margin-bottom: 12px; }
#menu-result-shopping { padding-bottom: 0; margin-bottom: 20px; }
#menu-result-actions { margin-top: 0; }

/* =====================================================================
   PNG redesign — page-level visuals only.
   Applies the navy + violet page background, soft top vignette, and a
   few extra component polishes that exist in the mockup but aren't tied
   to any data, IDs, or business logic. Safe to disable by removing
   this stylesheet — nothing structural depends on it.
   ===================================================================== */
body,
#app {
  background:
    radial-gradient(80% 40% at 50% -8%, rgba(123, 92, 240, 0.22), transparent 62%),
    radial-gradient(60% 30% at 100% 0%, rgba(106, 79, 224, 0.10), transparent 70%),
    var(--ds-bg);
  background-attachment: fixed;
}
.screen { background: transparent; }

/* Soft top glow on top of any screen main-content — visible on all pages */
.screen > .main-content {
  position: relative;
}
.screen > .main-content::before {
  content: "";
  position: absolute;
  inset: -10px 0 auto 0;
  height: 160px;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(123, 92, 240, 0.10), transparent 70%);
  z-index: 0;
}
.screen > .main-content > * { position: relative; z-index: 1; }

/* Header — flat, no heavy shadow, matches PNG */
.header {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: blur(12px);
}
.header.screen-header,
.screen .header {
  background: rgba(7, 15, 34, 0.72);
  border-bottom: 1px solid rgba(124, 108, 230, 0.10);
}

/* Bottom nav — matches the PNG, sits as a glassy strip */
.bottom-nav,
#bottom-nav {
  background: rgba(7, 15, 34, 0.86) !important;
  border-top: 1px solid rgba(124, 108, 230, 0.16) !important;
  backdrop-filter: blur(18px);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
}
.nav-item { color: var(--ds-text-muted); }
.nav-item.is-active,
.nav-item.active { color: #c7bcff; }
.nav-item.is-active .nav-icon,
.nav-item.active .nav-icon { color: var(--ds-accent-2); }

/* Tighten the calorie ring's surroundings to feel more like the PNG hero */
.dashboard-progress-card {
  position: relative;
  overflow: hidden;
}
.dashboard-progress-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 60%;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(123, 92, 240, 0.18), transparent 70%);
}

/* Status pill — pill-shaped, subtle violet */
.dashboard-goal-pill,
.dashboard-calorie-status,
.dashboard-water-status,
.ai-recs-kicker,
.dashboard-water-kicker {
  border-radius: var(--ds-radius-pill) !important;
}

/* Primary button: ensure gradient + radius matches PNG across all screens */
.btn,
.btn-full,
.gd-btn {
  border-radius: var(--ds-radius-btn);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.btn.btn-primary,
.btn-full.btn-primary,
[data-role="primary"] {
  background: var(--ds-accent-grad);
  border: none;
  color: #fff;
  box-shadow: var(--ds-shadow-accent);
}
.btn.btn-primary:hover { filter: brightness(1.06); }
.btn.btn-primary:disabled { opacity: 0.55; box-shadow: none; }

/* Outline / secondary button — soft violet */
.btn.btn-secondary,
.btn.btn-outline,
.btn-outline {
  background: var(--ds-accent-soft);
  border: 1px solid var(--ds-accent-soft-border);
  color: #c7bcff;
}
.btn.btn-secondary:hover { background: rgba(124, 108, 230, 0.22); }

/* Tab / segmented control — active = solid violet pill */
.tab-btn,
.segmented,
.menu-type-btn,
.menu-meals-btn,
.period-toggle button,
.goal-btn {
  border-radius: var(--ds-radius-btn);
  background: rgba(124, 108, 230, 0.06);
  border: 1px solid var(--ds-card-border);
  color: var(--ds-text-muted);
}
.tab-btn.active,
.tab-btn.is-active,
.menu-type-btn.active,
.menu-meals-btn.active,
.goal-btn.active,
.period-toggle button.is-active {
  background: var(--ds-accent-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--ds-shadow-accent);
}

/* Empty / hint blocks — dashed subtle violet */
.empty-state,
.no-data,
.diary-empty,
.analysis-empty {
  border-radius: var(--ds-radius-card);
  background: rgba(124, 108, 230, 0.05);
  border: 1px dashed rgba(124, 108, 230, 0.28);
  color: var(--ds-text-muted);
  text-align: center;
}

/* Section heading (h3 / section-title) — tighter, brighter */
.section-title,
.section-h3,
.dashboard-progress-heading,
.ai-recs-title {
  color: var(--ds-text);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---- "Все разделы" tiles (PNG style: 3-col, line icons, violet) -------- */
.all-sections-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.section-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 104px;
  padding: 14px 12px;
  border-radius: 18px;
  border: 1px solid var(--ds-card-border);
  background: linear-gradient(160deg, var(--ds-card-top, #161d33), var(--ds-card-bottom, #10162a));
  box-shadow: var(--ds-shadow-card, 0 14px 34px rgba(2, 6, 23, 0.34));
  color: var(--ds-text);
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.section-tile:hover,
.section-tile:focus-visible {
  transform: translateY(-2px);
  border-color: var(--ds-card-border-strong);
  outline: none;
}

.section-tile:active { transform: translateY(0); }

.section-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--dashboard-menu-icon-bg, rgba(124, 108, 230, 0.16));
  border: 1px solid var(--ds-card-border);
  color: #b9aaff;
}
.section-tile-icon svg { width: 22px; height: 22px; }

.section-tile-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ds-text);
}

.section-tile-caption {
  font-size: 11px;
  line-height: 1.3;
  color: var(--ds-text-muted);
  /* keep tiles uniform height: cap caption to two lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Featured tile (AI Coach) — violet glow, same size */
.section-tile-featured {
  border-color: var(--ds-accent-soft-border);
  background:
    radial-gradient(circle at top right, rgba(123, 92, 240, 0.28), transparent 60%),
    linear-gradient(160deg, #1b1740, #14122e);
  box-shadow:
    0 0 0 1px var(--ds-accent-soft-border),
    0 16px 40px rgba(91, 63, 214, 0.34),
    0 0 30px rgba(123, 92, 240, 0.26);
}
.section-tile-featured .section-tile-icon {
  background: var(--ds-accent-grad);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(91, 63, 214, 0.45);
}

/* Workout tile — align icon+text to left edge */
[data-screen="workout"].section-tile {
  padding-left: 8px;
}

@media (max-width: 360px) {
  .all-sections-grid { gap: 8px; }
  .section-tile { min-height: 98px; padding: 12px 10px; }
}

/* ============================================================================
   Profile redesign — centered hero + vertical metric rows (violet example)
   ============================================================================ */
#screen-profile .header .screen-title { flex: 1; text-align: center; }
#screen-profile .profile-ai-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px;
  border-radius: 11px; font-size: 12px; font-weight: 700; color: #d9d2ff; flex: none;
  background: linear-gradient(180deg, rgba(27, 23, 64, 0.9), rgba(16, 16, 38, 0.85));
  border: 1px solid rgba(123, 92, 240, 0.3);
}
#screen-profile .profile-ai-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #7b5cf0;
  box-shadow: 0 0 8px rgba(123, 92, 240, 0.85);
}

/* centered hero */
#screen-profile .profile-hero-card--centered {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 22px 18px;
}
#screen-profile .profile-hero-card--centered .profile-avatar-wrap {
  position: relative; width: 92px; height: 92px; margin-bottom: 6px;
}
#screen-profile .profile-hero-card--centered .profile-avatar {
  width: 92px; height: 92px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 800; color: #fff;
  background: radial-gradient(circle at 50% 40%, #2a2350, #14122e);
  box-shadow: 0 0 0 2px rgba(123, 92, 240, 0.7), 0 0 26px rgba(123, 92, 240, 0.5);
}
#screen-profile .profile-hero-card--centered .profile-avatar-glow {
  position: absolute; inset: -8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 92, 240, 0.4), transparent 70%);
  filter: blur(6px); pointer-events: none;
}
#screen-profile .profile-hero-card--centered .profile-account-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ds-text-muted, rgba(255, 255, 255, 0.55));
}
#screen-profile .profile-hero-card--centered .profile-name {
  margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--ds-text, #fff);
}
#screen-profile .profile-hero-card--centered .profile-subtitle {
  margin: 0; color: var(--ds-text-muted, rgba(255, 255, 255, 0.5)); font-size: 14px;
}
#screen-profile .profile-hero-card--centered .profile-edit-btn {
  width: 100%; justify-content: center; margin-top: 14px; min-height: 48px;
  border-radius: 16px;
}

/* metric + extra param cards -> single vertical column of full-width rows */
#screen-profile .profile-metrics-grid,
#screen-profile .profile-compact-grid {
  display: flex; flex-direction: column; gap: 10px;
}
#screen-profile .profile-metric-card { padding: 14px 16px; }
#screen-profile .profile-metric-head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
}
#screen-profile .profile-metric-head-copy { min-width: 0; }
#screen-profile .profile-metric-value-row { display: flex; align-items: baseline; gap: 5px; }
#screen-profile .profile-metric-note { margin: 8px 0 0; }

/* Purple profile reference skin, loaded after the violet design-system block. */
#screen-profile {
  background:
    radial-gradient(circle at 50% -8%, rgba(155, 92, 255, 0.12), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(66, 165, 245, 0.12), transparent 32%),
    linear-gradient(180deg, #07091a 0%, #0a0420 100%);
}

#screen-profile.active,
#screen-profile.active .main-content > *,
#screen-profile .profile-hero-card,
#screen-profile .profile-metric-card,
#screen-profile .profile-compact-card,
#screen-profile .profile-info-card {
  opacity: 1;
}

#screen-profile .profile-main {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px calc(110px + env(safe-area-inset-bottom, 0));
  gap: 14px;
}

#screen-profile > .header {
  position: sticky;
  top: 0;
  z-index: 90;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(7, 17, 32, 0.94), rgba(7, 15, 31, 0.78));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#screen-profile > .header .back-btn {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.84);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

#screen-profile > .header .screen-title {
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

#screen-profile .profile-ai-chip {
  color: #b9aaff;
  border-color: rgba(155, 92, 255, 0.35);
  background: rgba(155, 92, 255, 0.10);
  box-shadow: 0 0 22px -10px rgba(155, 92, 255, 0.95);
}

#screen-profile .profile-ai-dot {
  background: #9b5cff;
  box-shadow: 0 0 10px rgba(155, 92, 255, 0.75);
}

#screen-profile .profile-hero-card,
#screen-profile .profile-metric-card,
#screen-profile .profile-compact-card,
#screen-profile .profile-info-card {
  animation: none;
  transform: none;
  border-radius: 24px;
  border: 1px solid rgba(155, 92, 255, 0.18);
  background:
    radial-gradient(circle at 50% 0%, rgba(155, 92, 255, 0.10), transparent 44%),
    linear-gradient(155deg, rgba(20, 32, 68, 0.96), rgba(8, 17, 38, 0.96));
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#screen-profile .profile-hero-card::before,
#screen-profile .profile-metric-card::before,
#screen-profile .profile-compact-card::before,
#screen-profile .profile-info-card::before {
  background:
    radial-gradient(circle at top left, rgba(155, 92, 255, 0.15), transparent 32%),
    radial-gradient(circle at top right, rgba(66, 165, 245, 0.13), transparent 30%);
}

#screen-profile .profile-hero-card--centered {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 22px 18px 18px;
  text-align: center;
}

#screen-profile .profile-hero-card--centered .profile-avatar-wrap {
  width: 104px;
  height: 104px;
  margin-bottom: 10px;
}

#screen-profile .profile-hero-card--centered .profile-avatar-glow {
  inset: 8px;
  background: radial-gradient(circle, rgba(155, 92, 255, 0.48), rgba(66, 165, 245, 0.20) 48%, transparent 74%);
  filter: blur(10px);
}

#screen-profile .profile-hero-card--centered .profile-avatar {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 50% 40%, #2a2350, #14122e);
  box-shadow:
    0 0 0 2px rgba(155, 92, 255, 0.7),
    0 0 34px -10px rgba(155, 92, 255, 0.95),
    0 18px 36px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

#screen-profile .profile-hero-card--centered .profile-account-label {
  margin-top: 2px;
  color: rgba(155, 92, 255, 0.82);
  background: rgba(155, 92, 255, 0.10);
  border: 1px solid rgba(155, 92, 255, 0.22);
}

#screen-profile .profile-hero-card--centered .profile-name {
  margin-top: 8px;
  color: #fff;
  font-size: 30px;
}

#screen-profile .profile-hero-card--centered .profile-subtitle {
  color: rgba(255, 255, 255, 0.56);
}

#screen-profile .profile-hero-card--centered .profile-edit-btn {
  margin-top: 16px;
  width: 100%;
  min-height: 50px;
  justify-content: center;
  border-radius: 18px;
  color: #fff;
  border-color: rgba(155, 92, 255, 0.42);
  background: linear-gradient(180deg, #7b5cf0, #5b3fd6 58%, #4a2fbf);
  box-shadow: 0 14px 34px -10px rgba(123, 92, 240, 0.88), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

#screen-profile .profile-metrics-grid,
#screen-profile .profile-compact-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#screen-profile .profile-metric-card,
#screen-profile .profile-compact-card {
  padding: 14px;
}

#screen-profile .profile-metric-icon,
#screen-profile .profile-compact-icon {
  border-radius: 16px;
  color: #c4b5fd;
}

#screen-profile .profile-metric-card[data-accent="green"] {
  --profile-accent: linear-gradient(180deg, #b9aaff, #7b5cf0);
  --profile-accent-soft: rgba(155, 92, 255, 0.26);
}

#screen-profile .profile-metric-card[data-accent="blue"] {
  --profile-accent: linear-gradient(180deg, #79c2ff, #2f8cff);
  --profile-accent-soft: rgba(66, 165, 245, 0.24);
}

#screen-profile .profile-metric-card[data-accent="purple"] {
  --profile-accent: linear-gradient(180deg, #ff9bd0, #9b5cff);
  --profile-accent-soft: rgba(168, 85, 247, 0.24);
}

#screen-profile .profile-metric-value {
  color: #fff;
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
}

#screen-profile .profile-metric-status {
  min-height: 30px;
  color: #d4c4ff;
  border-color: rgba(155, 92, 255, 0.20);
  background: rgba(155, 92, 255, 0.08);
}

#screen-profile .profile-compact-card[data-accent="purple"],
#screen-profile .profile-compact-card[data-accent="cyan"],
#screen-profile .profile-compact-card[data-accent="orange"],
#screen-profile .profile-compact-card[data-accent="pink"] {
  --profile-accent: linear-gradient(180deg, #c084fc, #7c3aed);
}

#screen-profile .profile-info-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  padding: 16px;
}

#screen-profile .profile-info-icon {
  color: #fff;
  background: linear-gradient(180deg, #7b5cf0, #5b3fd6);
}

#screen-profile .profile-info-copy h3 {
  font-size: 15px;
}

#screen-profile .profile-info-btn {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 2px;
}