/* ==========================================
   NegoBrain Web – Clean Minimalist Design
   White, Flat, Épuré — Inspired by OpenAI/Apple
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Text:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0&display=block');

/* Force block display to prevent FOUC (icons show as raw text before font loads) */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-display: block;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48;
}

/* Material Icon helper */
.mi {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 1;
}

:root {
  /* Colors – Clean White Minimalist */
  --nb-bg: #ffffff;
  --nb-bg-secondary: #f5f5f7;
  --nb-glass: #ffffff;
  --nb-glass-border: #e8e8ed;
  --nb-surface: #f5f5f7;
  --nb-surface-hover: #eaeaec;

  --nb-border: #e8e8ed;
  --nb-border-hover: #c7c7cc;

  /* Text - Black on White */
  --nb-text: #1d1d1f;
  --nb-text-secondary: #6e6e73;
  --nb-text-muted: #aeaeb2;

  /* Accent – Gris foncé */
  --nb-accent: #3a3a3c;
  --nb-accent-hover: #2c2c2e;
  --nb-accent-bg: rgba(58, 58, 60, 0.07);
  --nb-glow: none;

  /* Palette */
  --nb-green: #34C759;
  --nb-green-bg: rgba(52, 199, 89, 0.08);
  --nb-purple: #AF52DE;
  --nb-purple-bg: rgba(175, 82, 222, 0.08);
  --nb-orange: #FF9F0A;
  --nb-orange-bg: rgba(255, 159, 10, 0.08);
  --nb-red: #FF3B30;
  --nb-red-bg: rgba(255, 59, 48, 0.06);

  /* Gradients - None (flat) */
  --gradient-bg: none;
  --gradient-logo: #3a3a3c;

  /* Spacing — 4px grid */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-xxl: 32px;
  --sp-3xl: 48px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 100px;

  /* Shadows – Subtle */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.06);

  /* Typography */
  --font: 'Google Sans', 'Google Sans Text', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;

  /* Shared app page width */
  --page-max-width: 960px;
}

/* Dark Theme */
[data-theme="dark"] {
  --nb-bg: #000000;
  --nb-bg-secondary: #1c1c1e;
  --nb-glass: #1c1c1e;
  --nb-glass-border: #2c2c2e;
  --nb-surface: #1c1c1e;
  --nb-surface-hover: #2c2c2e;

  --nb-border: #2c2c2e;
  --nb-border-hover: #3a3a3c;

  --nb-text: #f5f5f7;
  --nb-text-secondary: #98989d;
  --nb-text-muted: #48484a;

  --nb-accent: #8e8e93;
  --nb-accent-hover: #aeaeb2;
  --nb-accent-bg: rgba(142, 142, 147, 0.12);
  --nb-glow: none;

  --nb-green: #30D158;
  --nb-green-bg: rgba(48, 209, 88, 0.1);
  --nb-purple: #BF5AF2;
  --nb-purple-bg: rgba(191, 90, 242, 0.1);
  --nb-orange: #FF9F0A;
  --nb-orange-bg: rgba(255, 159, 10, 0.1);
  --nb-red: #FF453A;
  --nb-red-bg: rgba(255, 69, 58, 0.1);

  --gradient-bg: none;
  --gradient-logo: #8e8e93;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* ==========================================
   Interface Pastel (data-style="pastel")
   Fond noir flat, cartes anthracite, accents pastel
   (bleu pervenche, corail, pêche, sauge, lavande).
   Activable depuis le menu profil.
   ========================================== */
[data-style="pastel"] {
  --nb-bg: #0a0a0c;
  --nb-bg-secondary: #151518;
  --nb-glass: #151518;
  --nb-glass-border: rgba(255, 255, 255, 0.07);
  --nb-surface: #151518;
  --nb-surface-hover: #1c1c20;

  --nb-border: rgba(255, 255, 255, 0.09);
  --nb-border-hover: rgba(255, 255, 255, 0.18);

  --nb-text: #f5f6fa;
  --nb-text-secondary: #a4a8b8;
  --nb-text-muted: #70758a;

  --nb-accent: #84a9f5;          /* bleu pervenche */
  --nb-accent-hover: #a3c0fa;
  --nb-accent-bg: rgba(132, 169, 245, 0.13);
  --nb-glow: none;

  --nb-green: #9ecfbb;           /* sauge */
  --nb-green-bg: rgba(158, 207, 187, 0.13);
  --nb-purple: #d9b9f7;          /* lavande */
  --nb-purple-bg: rgba(217, 185, 247, 0.13);
  --nb-orange: #e8835f;          /* corail */
  --nb-orange-bg: rgba(232, 131, 95, 0.13);
  --nb-red: #f08a8a;
  --nb-red-bg: rgba(240, 138, 138, 0.13);

  --gradient-bg: none;
  --gradient-logo: #84a9f5;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 6px 28px rgba(0, 0, 0, 0.45);
}

/* Fond noir flat : on coupe l'animation DarkVeil et les dégradés */
[data-style="pastel"] .app-background {
  display: none;
}

[data-style="pastel"] body,
[data-style="pastel"] .app-layout.has-gradient-bg {
  background: #0a0a0c;
  background-image: none;
}

/* ── Home Pastel (composant HomePastel) ── */
.hp-page { max-width: 1180px; }

.hp-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.hp-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.01em; color: var(--nb-text); }
.hp-head p { color: var(--nb-text-secondary); font-size: 14px; margin-top: 3px; }
.hp-badge { position: relative; z-index: 5; display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: #0a0a0c; background: #c3d9d0; border-radius: 999px; padding: 7px 14px; }

.hp-layout { display: grid; grid-template-columns: 1fr 332px; gap: 20px; margin-top: 24px; }
@media (max-width: 980px) { .hp-layout { grid-template-columns: 1fr; } }

.hp-main { min-width: 0; }
.hp-rail { display: flex; flex-direction: column; gap: 16px; }

/* Reprendre */
.hp-resume { width: 100%; display: flex; align-items: center; gap: 18px; padding: 22px 24px; border: none; border-radius: 22px; background: #d9b9f7; color: #16091f; cursor: pointer; text-align: left; transition: filter 0.2s; }
.hp-resume:hover { filter: brightness(1.05); }
.hp-resume-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; flex: none; }
.hp-resume-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hp-resume-kicker { font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 800; opacity: 0.65; }
.hp-resume-title { font-size: 17.5px; font-weight: 800; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-resume-sub { font-size: 12.5px; opacity: 0.7; margin-top: 2px; font-weight: 600; }
.hp-resume-go { display: inline-flex; align-items: center; gap: 8px; background: #0a0a0c; color: #fff; font-weight: 700; font-size: 13.5px; padding: 12px 20px; border-radius: 14px; white-space: nowrap; flex: none; }
@media (max-width: 700px) { .hp-resume { flex-wrap: wrap; } .hp-resume-title { white-space: normal; } }

/* Progression */
.hp-progress { margin-top: 16px; padding: 20px 22px; display: grid; grid-template-columns: 1fr auto auto; gap: 26px; align-items: center; background: var(--nb-surface, #151518); border: 1px solid var(--nb-border, rgba(255,255,255,0.09)); border-radius: 20px; }
@media (max-width: 700px) { .hp-progress { grid-template-columns: 1fr; gap: 14px; } }
.hp-xp { min-width: 0; }
.hp-xp-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--nb-text-secondary); margin-bottom: 8px; flex-wrap: wrap; }
.hp-xp-row b { color: var(--nb-text); font-size: 13px; }
.hp-bar { height: 9px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.hp-bar i { display: block; height: 100%; border-radius: 99px; background: #84a9f5; transition: width 0.4s ease; }
.hp-pill { display: flex; align-items: center; gap: 11px; }
.hp-pill-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #0a0a0c; flex: none; }
.hp-pill b { font-size: 16.5px; display: block; line-height: 1.2; color: var(--nb-text); }
.hp-pill small { font-size: 11.5px; color: var(--nb-text-secondary); display: block; }

/* Sections */
.hp-sec { display: flex; justify-content: space-between; align-items: baseline; margin: 28px 0 13px; }
.hp-sec h2 { font-size: 19px; font-weight: 800; color: var(--nb-text); }
.hp-sec-link { background: none; border: none; cursor: pointer; font-size: 13px; color: var(--nb-text-secondary); padding: 0; }
.hp-sec-link:hover { color: var(--nb-text); }

/* Modules */
.hp-modules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 701px) { .hp-modules { grid-template-columns: repeat(3, 1fr); } }
.hp-mod { background: var(--nb-surface, #151518); border: 1px solid var(--nb-border, rgba(255,255,255,0.09)); border-radius: 20px; overflow: hidden; cursor: pointer; transition: transform 0.2s, border-color 0.2s; display: flex; flex-direction: column; padding: 0; text-align: left; }
.hp-mod:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.2); }
.hp-mod-top { height: 96px; display: flex; align-items: center; justify-content: center; color: #0a0a0c; }
.hp-mod-body { padding: 15px 16px 17px; display: flex; flex-direction: column; flex: 1; }
.hp-mod-title { font-size: 15px; font-weight: 800; color: var(--nb-text); display: flex; align-items: center; gap: 8px; }
.hp-mod-title em { font-style: normal; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nb-text-secondary); border: 1px solid var(--nb-border); border-radius: 999px; padding: 2px 8px; }
.hp-mod-desc { font-size: 12px; color: var(--nb-text-secondary); margin-top: 5px; line-height: 1.45; flex: 1; }
.hp-mod-chips { display: flex; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
.hp-mod-chips span { font-size: 11px; font-weight: 600; color: var(--nb-text-secondary); background: rgba(255, 255, 255, 0.06); border-radius: 999px; padding: 5px 11px; }

/* Sessions récentes */
.hp-list { display: flex; flex-direction: column; gap: 9px; }
.hp-item { display: flex; align-items: center; gap: 13px; background: var(--nb-surface, #151518); border: 1px solid var(--nb-border, rgba(255,255,255,0.09)); border-radius: 15px; padding: 13px 16px; cursor: pointer; transition: background 0.2s; text-align: left; width: 100%; color: var(--nb-text-secondary); }
.hp-item:hover { background: var(--nb-surface-hover, #1c1c20); }
.hp-item-sq { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #0a0a0c; flex: none; }
.hp-item-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hp-item-copy b { font-size: 13.5px; font-weight: 700; color: var(--nb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-item-copy small { font-size: 11.5px; color: var(--nb-text-secondary); margin-top: 2px; }

/* Conseil du jour */
.hp-tip-block { position: relative; display: flex; flex-direction: column; align-items: stretch; }
.hp-tip-character { display: block; width: clamp(220px, 98%, 300px); height: auto; margin: 0 auto -18px; object-fit: contain; object-position: bottom center; pointer-events: none; transform: scaleX(-1); filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.34)); }
.hp-tip-block .hp-tip { position: relative; z-index: 1; }
.hp-tip { border-radius: 20px; overflow: hidden; background: var(--nb-surface, #151518); border: 1px solid var(--nb-border, rgba(255,255,255,0.09)); }
.hp-tip-band { background: #f4d0ad; color: #1f1206; padding: 13px 20px; display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; }
.hp-tip-inner { padding: 17px 20px 19px; }
.hp-tip-content { font-size: 13px; color: var(--nb-text-secondary); line-height: 1.55; }
.hp-tip-author { display: flex; align-items: center; gap: 10px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--nb-border, rgba(255,255,255,0.09)); }
.hp-tip-avatar { width: 34px; height: 34px; border-radius: 50%; background: #f4d0ad; color: #1f1206; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex: none; }
.hp-tip-author b { font-size: 12.5px; display: block; color: var(--nb-text); }
.hp-tip-author small { font-size: 11px; color: var(--nb-text-secondary); display: block; }

/* Aujourd'hui */
.hp-goal { padding: 20px; background: var(--nb-surface, #151518); border: 1px solid var(--nb-border, rgba(255,255,255,0.09)); border-radius: 20px; }
.hp-goal-kicker { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nb-text-secondary); font-weight: 800; margin-bottom: 13px; }
.hp-goal-item { display: flex; align-items: center; gap: 11px; padding: 9px 0; font-size: 13px; color: var(--nb-text-secondary); }
.hp-goal-item.is-done { color: var(--nb-text); }
.hp-goal-check { width: 21px; height: 21px; border-radius: 7px; border: 1.5px solid rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; flex: none; color: transparent; }
.hp-goal-item.is-done .hp-goal-check { background: #c3d9d0; border-color: #c3d9d0; color: #0a0a0c; }
.hp-goal-streak { margin-top: 11px; font-size: 12px; font-weight: 600; color: #1f1206; background: #e8835f; border-radius: 12px; padding: 11px 14px; display: flex; gap: 9px; align-items: center; }

/* Upsell */
.hp-upsell { padding: 19px 20px; background: var(--nb-surface, #151518); border: 1px solid var(--nb-border, rgba(255,255,255,0.09)); border-radius: 20px; }
.hp-upsell-kicker { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nb-text-secondary); font-weight: 700; }
.hp-upsell b { display: block; font-size: 14px; margin: 7px 0 4px; color: var(--nb-text); }
.hp-upsell p { font-size: 12.5px; color: var(--nb-text-secondary); }
.hp-upsell button { margin-top: 13px; width: 100%; padding: 12px; border-radius: 14px; border: none; background: #ffffff; color: #0a0a0c; font-weight: 700; font-size: 13px; cursor: pointer; transition: background 0.2s; }
.hp-upsell button:hover { background: #e8e8ec; }

/* Dark theme: fix low-contrast stat labels */
[data-theme="dark"] .home-stat-label {
  color: rgba(255, 255, 255, 0.65);
}

[data-theme="dark"] .gaming-stat-label {
  color: rgba(255, 255, 255, 0.65);
}

/* ==========================================
   Reset & Base
   ========================================== */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

html,
body,
#root {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font);
  background: #04000f;
  color: var(--nb-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: inherit;
}

/* ==========================================
   Accessibilité — focus clavier global
   Indicateur visible uniquement au clavier
   (n'affecte pas le focus à la souris)
   ========================================== */
:where(a, button, input, textarea, select, [role="button"], [role="tab"], [tabindex]):focus-visible {
  outline: 2px solid var(--nb-accent-hover, #aeaeb2);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 8px);
}

input,
textarea,
select {
  font-family: inherit;
  font-size: 16px;
  /* Prevents iOS zoom on focus */
}

::selection {
  background: var(--nb-accent);
  color: white;
}

/* ==========================================
   Layout
   ========================================== */

.app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
  width: 100%;
}

.app-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.72;
  pointer-events: none;
  background: #050713;
}

.app-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(79, 124, 255, 0.14), transparent 32%),
    linear-gradient(90deg, rgba(5, 7, 19, 0.58), rgba(5, 7, 19, 0.88) 42%, rgba(5, 7, 19, 0.78));
}

/* Sidebar */
.sidebar {
  width: 260px;
  min-width: 260px;
  background: rgba(18, 18, 31, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(79, 124, 255, 0.12);
  box-shadow: 18px 0 48px rgba(5, 8, 20, 0.2);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  gap: 16px;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  margin-bottom: 8px;
}

.sidebar-logo .logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.26) 0%, rgba(168, 85, 247, 0.26) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.sidebar-logo:hover .logo-icon {
  transform: translateY(-1px);
}

.sidebar-logo h1 {
  font-size: 16px;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.4px;
}

.sidebar-logo p {
  font-size: 11px;
  color: #64748b;
  margin-top: 1px;
}

.sidebar-logo-copy {
  min-width: 0;
}

.sidebar-logo-badge {
  margin-left: auto;
  background: rgba(168, 85, 247, 0.16);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.28);
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.sidebar-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px;
}

.sidebar-nav-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-nav-label {
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}

.sidebar-nav-bottom {
  padding-top: 16px;
  border-top: 1px solid rgba(79, 124, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Sidebar Nav */
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 3px solid transparent;
  font-size: 13px;
  font-weight: 500;
  color: #94a3b8;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: all 0.2s ease;
  cursor: pointer;
}

.nav-item:hover {
  background: rgba(26, 26, 46, 0.72);
  color: #f1f5f9;
}

.nav-item.active {
  background: rgba(26, 26, 46, 0.9);
  color: #4f7cff;
  font-weight: 600;
  border-left-color: #4f7cff;
  box-shadow: inset 0 0 0 1px rgba(79, 124, 255, 0.08);
}

.nav-icon {
  width: 18px;
  min-width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-item svg,
.sidebar-link svg {
  color: currentColor;
}

.nav-item .nav-subtitle {
  font-size: 11px;
  color: #64748b;
  font-weight: 400;
}

.nav-item.active .nav-subtitle {
  color: rgba(241, 245, 249, 0.68);
}

.nav-item-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nav-item-mobile-only {
  display: none;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  color: #64748b;
  transition: all 0.2s ease;
  cursor: pointer;
}

.sidebar-link:hover {
  background: rgba(26, 26, 46, 0.72);
  color: #cbd5e1;
}

.sidebar-link .nav-subtitle {
  color: rgba(148, 163, 184, 0.55);
}

.sidebar-link-admin {
  color: #f1f5f9;
}

.sidebar-link-admin .nav-subtitle {
  color: rgba(168, 85, 247, 0.82);
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(79, 124, 255, 0.12);
}

.account-card {
  overflow: hidden;
  border-radius: 24px;
  background: rgba(27, 28, 37, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
}

.account-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 16px;
}

.account-card-avatar {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.account-card-copy {
  min-width: 0;
  flex: 1;
}

.account-card-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-card-plan {
  margin-top: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.48);
}

.account-card-section {
  padding: 16px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.account-card-metric {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.account-card-metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.account-card-metric-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.account-card-metric-value {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.account-card-chip {
  border: none;
  border-radius: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.account-card-progress {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.account-card-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd52e 0%, #c3f028 100%);
}

.account-card-caption {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.46);
}

.account-card-upgrade {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.account-card-upgrade-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.account-card-upgrade-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.account-card-upgrade-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 212, 46, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.account-card-upgrade-title {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}

.account-card-upgrade-subtitle {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.44);
}

.account-card-upgrade-btn {
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  background: linear-gradient(90deg, #ffd52e 0%, #bff328 100%);
  color: #111318;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  width: 100%;
}

.account-card-actions {
  display: flex;
  flex-direction: column;
}

.account-card-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: transparent;
  width: 100%;
  color: rgba(255, 255, 255, 0.82);
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.18s ease, color 0.18s ease;
}

.account-card-action--toggle {
  justify-content: space-between;
  gap: 16px;
}

.account-card-action--toggle.is-active {
  background: rgba(79, 124, 255, 0.08);
  color: #ffffff;
}

.account-card-action:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}

.account-card-action-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.account-card-action-title {
  font-size: 13px;
  font-weight: 700;
  color: inherit;
}

.account-card-action-subtitle {
  font-size: 10px;
  line-height: 1.35;
  color: rgba(148, 163, 184, 0.68);
}

.account-card-action--toggle.is-active .account-card-action-subtitle {
  color: rgba(191, 210, 255, 0.9);
}

.account-card-switch {
  width: 40px;
  height: 24px;
  border-radius: 999px;
  padding: 2px;
  background: rgba(148, 163, 184, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.account-card-switch.is-on {
  background: rgba(79, 124, 255, 0.9);
  border-color: rgba(79, 124, 255, 0.84);
  justify-content: flex-end;
}

.account-card-switch-knob {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

.account-card-email {
  padding: 16px 18px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(148, 163, 184, 0.62);
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.account-card-body {
  display: block;
}

/* Main Content */
.main-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-xl) var(--sp-xxl);
  position: relative;
  z-index: 1;
}

.app-page {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
}

/* ==========================================
   Legal Pages
   ========================================== */

.legal-page {
  width: 100%;
  padding: 40px 0 56px;
  color: #fff;
}

.legal-page--landing {
  padding: 0;
}

.legal-nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}

.legal-nav-links a {
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.legal-nav-links a:hover,
.legal-nav-links a.is-active {
  color: #fff;
}

.legal-nav-cta {
  min-width: 176px;
  justify-content: center;
}

.legal-hero {
  padding: 72px 0 40px;
}

.legal-hero-grid {
  align-items: center;
}

.legal-hero-copy {
  max-width: 620px;
}

.legal-hero-proof {
  max-width: 620px;
}

.legal-preview {
  display: flex;
  flex-direction: column;
  height: clamp(390px, 34vw, 470px);
  padding: 0 !important;
  overflow: hidden !important;
}

.legal-preview-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 18px 18px 20px;
}

.legal-preview-topline {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.legal-preview-title {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.4px;
}

.legal-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
}

.legal-preview-section {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-preview-section strong {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 13px;
}

.legal-preview-section p {
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
  line-height: 1.6;
}

.legal-preview-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

.legal-preview-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.55;
}

.legal-facts-banner {
  padding-top: 18px;
}

.legal-facts-row {
  justify-content: space-between;
  gap: 12px 18px;
}

.legal-fact {
  min-width: 0;
  overflow-wrap: anywhere;
}

.legal-article-section {
  padding: 44px 24px 96px;
}

.legal-article-panel {
  background: rgba(255, 255, 255, 0.05) !important;
}

.legal-article-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.legal-article-bottom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.legal-article-divider {
  height: 1px;
  margin: 24px 0;
  background: rgba(255, 255, 255, 0.08);
}

.legal-article-block h3 {
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: #fff;
  margin-bottom: 14px;
}

.legal-article-block p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: 1.65;
}

.legal-bullet-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

.legal-bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.55;
}

.legal-bullet-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--legal-bullet-accent, rgba(255, 255, 255, 0.48));
}

.legal-note-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 191, 94, 0.12);
  color: #ffbf5e;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.legal-article-block--contact .legal-contact-link {
  color: #fff;
  font-weight: 600;
  word-break: break-word;
}

.legal-contact-link:hover {
  text-decoration: underline;
}

.legal-page-hint {
  margin-top: 12px;
}

.legal-footer {
  padding: 0 24px 40px;
}

.legal-footer-inner {
  color: rgba(255, 255, 255, 0.46);
}

.legal-page-shell {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.legal-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.legal-page-copy {
  max-width: 760px;
}

.legal-page-kicker {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.legal-page-header h1 {
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -1.2px;
  color: #fff;
}

.legal-page-intro {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  max-width: 760px;
}

.legal-page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 13px;
}

.legal-page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  min-width: 250px;
}

.legal-page-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.legal-page-action--secondary {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.88);
}

.legal-page-action--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.legal-page-action--secondary.is-active {
  background: rgba(125, 162, 255, 0.2);
  border-color: rgba(125, 162, 255, 0.44);
  color: #fff;
}

.legal-page-action--primary {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #09090b;
  gap: 8px;
}

.legal-page-action--primary:hover {
  background: #fff;
  transform: translateY(-1px);
}

.legal-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.85fr);
  gap: 18px;
  align-items: start;
}

.legal-page-panel {
  min-width: 0;
}

.legal-page-section + .legal-page-section {
  margin-top: 26px;
}

.legal-page-section h2 {
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: #fff;
  margin-bottom: 14px;
}

.legal-bullet-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

.legal-bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.55;
}

.legal-bullet-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  margin-top: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.48);
}

.legal-bullet-list--highlight .legal-bullet-dot {
  background: #30d158;
}

.legal-page-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.legal-page-panel--note {
  background: rgba(255, 149, 0, 0.08) !important;
  border-color: rgba(255, 149, 0, 0.18) !important;
}

.legal-note-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 149, 0, 0.14);
  color: #ffbf5e;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.legal-page-panel--note h2,
.legal-page-panel--contact h2 {
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: #fff;
  margin-bottom: 14px;
}

.legal-page-panel--note p,
.legal-page-panel--contact p {
  color: rgba(255, 255, 255, 0.66);
  font-size: 14px;
  line-height: 1.65;
}

.legal-contact-link {
  display: inline-flex;
  margin-top: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  word-break: break-word;
}

.legal-contact-link:hover {
  text-decoration: underline;
}

.legal-page-hint {
  margin-top: 12px;
}

.legal-page-footer {
  display: flex;
  align-items: center;
  gap: 14px 18px;
  flex-wrap: wrap;
  padding-top: 4px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 13px;
}

.legal-page-footer-label {
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
}

.legal-page-footer a.is-active {
  color: #fff;
}

/* ==========================================
   Grid Utilities
   ========================================== */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-lg);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-lg);
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.gap-sm {
  gap: var(--sp-sm);
}

.gap-md {
  gap: var(--sp-md);
}

.gap-lg {
  gap: var(--sp-lg);
}

.gap-xl {
  gap: var(--sp-xl);
}

/* ==========================================
   Card System
   ========================================== */

.card {
  background: var(--nb-bg);
  border: 1px solid var(--nb-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl);
  transition: all 0.2s ease;
}

.card:hover {
  border-color: var(--nb-border-hover);
}

.card.interactive {
  cursor: pointer;
}

.card.interactive:hover {
  border-color: var(--nb-text);
}

/* ==========================================
   Page Header
   ========================================== */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--sp-xxl);
}

.page-header h1 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.8px;
  color: var(--nb-text);
}

.page-header p {
  font-size: 15px;
  color: var(--nb-text-secondary);
  margin-top: 8px;
  font-weight: 400;
  max-width: 600px;
  line-height: 1.5;
}

/* ==========================================
   Buttons
   ========================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 12px var(--sp-xl);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  border: none;
  transition: all 0.25s ease;
  letter-spacing: -0.1px;
}

.btn-primary {
  background: var(--nb-accent);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--nb-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(58, 58, 60, 0.25);
}

.btn-secondary {
  background: var(--nb-bg);
  color: var(--nb-text);
  border: 1px solid var(--nb-border);
}

.btn-secondary:hover {
  background: var(--nb-surface);
  border-color: var(--nb-border-hover);
}

.btn-danger {
  background: var(--nb-red-bg);
  color: var(--nb-red);
}

.btn-danger:hover {
  background: rgba(255, 59, 48, 0.2);
}

.btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
  color: var(--nb-text-secondary);
  transition: all 0.2s ease;
}

.btn-icon:hover {
  background: var(--nb-surface-hover);
  color: var(--nb-text);
}

/* ==========================================
   Topic Grid
   ========================================== */

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--sp-lg);
}

.topic-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-xl);
  background: var(--nb-bg);
  border: 1px solid var(--nb-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  position: relative;
}

.topic-card--wide {
  grid-column: span 2;
  position: relative;
  align-items: flex-start;
}

.topic-card:hover {
  border-color: var(--nb-text);
}

.topic-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
  width: 100%;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.topic-card-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(42%, 220px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 18px 0 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.topic-card-media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center right;
  opacity: 1;
  filter: none;
}

.topic-card--wide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 10, 16, 0.10) 0%, rgba(10, 10, 16, 0.08) 55%, rgba(10, 10, 16, 0.18) 100%);
  z-index: 0;
  pointer-events: none;
}

.topic-card--wide .topic-card-content {
  align-items: center;
  justify-content: center;
  height: 100%;
  width: min(520px, calc(100% - min(42%, 220px)));
  max-width: min(520px, calc(100% - min(42%, 220px)));
  padding-left: 8px;
  padding-right: 0;
  text-align: center;
}

.topic-card--wide .topic-card-content h3,
.topic-card--wide .topic-card-content .topic-desc {
  text-align: center;
}

.topic-card--wide .topic-card-content .topic-icon {
  margin: 0 auto;
}

.topic-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  transition: transform 0.2s ease;
}

.topic-card:hover .topic-icon {
  transform: scale(1.1) rotate(5deg);
}

.topic-card h3 {
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: var(--nb-text);
  letter-spacing: -0.2px;
}

/* ==========================================
   Chat
   ========================================== */

.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 64px);
  background: var(--nb-bg);
  overflow: hidden;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-xl);
  border-bottom: 1px solid var(--nb-border);
}

.chat-header .back-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--nb-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.chat-header .back-btn:hover {
  background: var(--nb-surface);
  color: var(--nb-text);
}

.chat-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--nb-text);
}

.chat-header-dot {
  font-size: 8px;
  color: var(--nb-green);
  animation: pulse 2s infinite;
}

.battle-intro-header .back-btn {
  color: rgba(255, 255, 255, 0.72);
}

.battle-intro-header .back-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

@keyframes battle-spin {
  to {
    transform: rotate(360deg);
  }
}

.battle-live-badge.is-active {
  color: #bff328;
  border-color: rgba(191, 243, 40, 0.24);
  background: rgba(191, 243, 40, 0.08);
}

.battle-chat-container .chat-messages {
  width: min(760px, calc(100% - 40px));
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(8, 10, 24, 0.72);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  min-height: 0;
}

.battle-chat-container .chat-messages-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
}

.battle-chat-container .message-content {
  padding: 14px 16px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.battle-chat-container .message-user-pill {
  background: linear-gradient(135deg, rgba(122, 106, 255, 0.30), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(122, 106, 255, 0.22);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.battle-message.user {
  justify-content: flex-end;
}

.battle-quick-replies .suggestion-chip {
  white-space: normal;
}

.battle-chat-container .chat-bottom {
  width: min(760px, calc(100% - 40px));
  max-width: 760px;
  margin: 0 auto;
  padding: 0 0 var(--sp-xl);
}

.battle-chat-container .chat-input-area {
  background: rgba(255, 255, 255, 0.105) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.battle-chat-container .chat-textarea {
  min-height: 26px;
  max-height: 140px;
}

.battle-chat-container .chat-input-actions {
  padding-top: 4px;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

/* Messages area */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-xl) 0;
  scroll-behavior: smooth;
}

.chat-messages-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--sp-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
}

.message {
  animation: messageIn 0.3s ease forwards;
  opacity: 0;
}

@keyframes messageIn {
  to {
    opacity: 1;
  }
}

.message.user {
  display: flex;
  justify-content: flex-end;
}

/* AI messages — clean text, no bubble */
.message-content {
  font-size: 15px;
  line-height: 1.7;
  color: var(--nb-text);
  position: relative;
}

.message-copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--nb-text-secondary);
  transition: all 0.2s ease;
  padding: 4px 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
}

.message-copy-btn:hover {
  color: var(--nb-text);
  background: var(--nb-surface);
}

.message-copy-btn.copied {
  color: var(--nb-green);
}

/* TTS speaker button */
.tts-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  opacity: 0.35;
  transition: all 0.2s ease;
  padding: 4px 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
}

.tts-btn:hover {
  opacity: 0.8;
  background: var(--nb-surface);
}

.tts-btn.active {
  opacity: 1;
  animation: ttsPulse 1.5s infinite ease-in-out;
}

.tts-btn:disabled {
  cursor: wait;
  opacity: 0.2;
}

@keyframes ttsPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.message-content p {
  margin: 0 0 12px 0;
}

.message-content p:last-child {
  margin-bottom: 0;
}

.message-content strong {
  font-weight: 700;
}

.message-content ul,
.message-content ol {
  margin: 8px 0;
  padding-left: 20px;
}

.message-content li {
  margin-bottom: 4px;
}

.message-content code {
  background: var(--nb-surface);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

/* User messages — subtle pill */
.message-user-pill {
  display: inline-block;
  padding: 10px 18px;
  background: var(--nb-surface);
  border-radius: 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--nb-text);
  max-width: 85%;
}

/* Typing indicator */
.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}

.typing-label {
  margin-left: 6px;
  font-size: 14px;
  color: var(--nb-text-primary);
  font-weight: 700;
  opacity: 0.96;
}

.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nb-accent);
  box-shadow: 0 0 12px rgba(10, 132, 255, 0.55);
  animation: typing 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) {
  animation-delay: 0s;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.3;
  }

  50% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* Bottom area */
.chat-bottom {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--sp-xl);
}

.suggestions {
  display: flex;
  gap: var(--sp-sm);
  padding-bottom: var(--sp-md);
  flex-wrap: wrap;
}

.suggestion-chip {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--nb-border);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--nb-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.suggestion-chip:hover {
  border-color: var(--nb-text);
  color: var(--nb-text);
  background: var(--nb-surface);
}

/* Chat input */
.chat-input-area {
  padding-bottom: var(--sp-lg);
}

.chat-input {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-sm);
  padding: 12px;
  background: var(--nb-bg);
  border: 1px solid var(--nb-border);
  border-radius: 26px;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  /* Floating effect */
}

.chat-input:focus-within {
  border-color: var(--nb-border-hover);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.chat-input textarea {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--nb-text);
  font-size: 15px;
  line-height: 1.5;
  outline: none;
  resize: none;
  min-height: 24px;
  max-height: 120px;
  font-family: inherit;
  padding: 2px 0;
}

.send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--nb-text);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.send-btn:hover {
  opacity: 0.8;
}

.send-btn:disabled {
  background: var(--nb-border);
  cursor: not-allowed;
}

/* Voice Pill Button (Siri/Apple style) */
.voice-pill-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 40px;
  background: #28cd41;
  /* Apple Green */
  color: white;
  border: none;
  border-radius: 20px;
  /* Pillow */
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(40, 205, 65, 0.25);
  margin-right: 8px;
}

.voice-pill-btn:hover {
  transform: scale(1.02);
  filter: brightness(1.05);
}

.voice-pill-btn:active {
  transform: scale(0.98);
}

.voice-pill-btn.active {
  background: #3a3a3c;
  /* Apple Blue */
  box-shadow: 0 4px 12px rgba(58, 58, 60, 0.3);
  animation: voicePulse 2s infinite;
}

.voice-pill-btn.connecting {
  background: var(--nb-text-muted);
  animation: voicePulse 1s infinite;
}

@keyframes voicePulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(58, 58, 60, 0.4);
  }

  70% {
    transform: scale(1.02);
    box-shadow: 0 0 0 6px rgba(58, 58, 60, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(58, 58, 60, 0);
  }
}

/* ==========================================
   Conversations List
   ========================================== */

.conversations-section h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: var(--sp-md);
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  letter-spacing: -0.3px;
}

.conversation-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--nb-text);
  background: var(--nb-surface);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}

.conversation-row {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(18, 18, 24, 0.42);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  margin-bottom: 8px;
}

.conversation-row:hover {
  background: rgba(28, 28, 36, 0.55);
  border-color: rgba(255, 255, 255, 0.22);
}

.conversation-row .conv-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.conversation-row .conv-info {
  flex: 1;
  min-width: 0;
}

.conversation-row .conv-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--nb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-row .conv-meta {
  font-size: 12px;
  color: var(--nb-text-muted);
  margin-top: 2px;
}

.resume-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--nb-accent);
  background: var(--nb-accent-bg);
  padding: 6px var(--sp-md);
  border-radius: var(--radius-pill);
  border: none;
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  transition: all 0.2s;
}

.resume-btn:hover {
  background: var(--nb-accent-bg);
}

/* ==========================================
   Live Coaching
   ========================================== */

.live-mode-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.live-mode-btn.active {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.25);
}

.live-mode-btn.active small {
  opacity: 0.85;
}

.mic-button {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.3);
  outline: none;
}

.mic-button:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.07);
  box-shadow: 0 16px 48px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.35);
}

.mic-button:active {
  transform: scale(0.96);
}

.mic-button .inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mic-button svg {
  width: 64px;
  height: 64px;
  color: white;
}

.how-it-works {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-lg);
  width: 100%;
}

.step-card {
  text-align: center;
  padding: var(--sp-xxl) var(--sp-xl);
  background: var(--nb-bg);
  border: 1px solid var(--nb-border);
  border-radius: var(--radius-md);
}

.step-card .step-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-lg);
  position: relative;
}

.step-card .step-number {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--nb-text);
  letter-spacing: -0.2px;
}

.step-card p {
  font-size: 13px;
  color: var(--nb-text-secondary);
  line-height: 1.5;
}

/* Audio visualizer */
.audio-visualizer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 60px;
  padding: var(--sp-lg);
}

.audio-bar {
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(to top, var(--nb-green), var(--nb-accent));
  transition: height 0.15s ease;
}

/* Transcript panel */
.transcript-panel {
  max-height: 200px;
  overflow-y: auto;
}

/* Tips */
.tip-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
  padding: var(--sp-md);
  background: var(--nb-surface);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 6px;
}

.tip-card:hover {
  background: var(--nb-surface-hover);
}

.tip-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}

.tip-card h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--nb-text);
}

.tip-card p {
  font-size: 13px;
  color: var(--nb-text-secondary);
  margin-top: var(--sp-xs);
  line-height: 1.5;
}

/* Speaker Segments (Voxtral Diarization) */
.speaker-segment {
  padding: 8px 12px;
  border-left: 3px solid var(--nb-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--nb-surface);
  transition: all 0.2s;
}

.speaker-segment:hover {
  background: var(--nb-surface-hover);
}

.speaker-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ==========================================
   Dynamic Island (Floating)
   ========================================== */

.dynamic-island {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: var(--nb-text);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  min-width: 380px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
  animation: islandIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes islandIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px) scale(0.8);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.island-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 20px;
}

.island-bar {
  width: 3px;
  border-radius: 2px;
  background: var(--nb-green) !important;
  transition: height 0.15s ease;
}

.island-text {
  font-size: 13px;
  font-weight: 600;
  color: white;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.island-stop {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--nb-red);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.island-stop:hover {
  transform: scale(1.1);
}

/* ==========================================
   Section Titles
   ========================================== */

.section-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: var(--sp-lg);
  color: var(--nb-text);
  letter-spacing: -0.3px;
}

/* ==========================================
   Scrollbar – Minimal
   ========================================== */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* ==========================================
   Mobile Menu Toggle
   ========================================== */

.mobile-menu-toggle {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 1000;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--nb-bg);
  border: 1px solid var(--nb-border);
  color: var(--nb-text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}

.page-side-toggle,
.page-side-backdrop,
.page-side-close {
  display: none;
}

.coach-library-desktop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================
   Responsive – Tablet (≤1024px)
   ========================================== */

@media (max-width: 1024px) {
  .sidebar {
    width: 220px;
    min-width: 220px;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .topic-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .how-it-works {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================
   Responsive – Mobile (≤768px)
   ========================================== */

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: none;
    /* Hide toggle since menu is always at bottom */
  }

  /* Bottom Navigation Bar */
  .sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    z-index: 999;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--nb-border);
    border-right: none;
    flex-direction: row;
    padding: 0 var(--sp-sm);
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .sidebar-logo,
  .sidebar-footer,
  .sidebar-nav-label,
  .sidebar-nav-bottom,
  .nav-subtitle {
    display: none;
  }

  .sidebar-main,
  .sidebar-nav-section,
  .sidebar-nav {
    width: 100%;
  }

  .nav-item {
    flex-direction: column;
    padding: 8px;
    gap: 4px;
    width: auto;
    font-size: 10px;
    justify-content: center;
    color: var(--nb-text-secondary);
    border-left: none;
  }

  .nav-item.active {
    color: var(--nb-text);
    box-shadow: none;
  }

  .nav-item-mobile-only {
    display: flex;
  }

  .nav-item svg {
    width: 20px;
    height: 20px;
  }

  .main-content {
    padding: var(--sp-lg);
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  .page-header {
    flex-direction: column;
    gap: var(--sp-md);
  }

  .page-header h1 {
    font-size: var(--font-size-2xl);
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .topic-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-sm);
  }

  .topic-card--wide {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
  }

  .topic-card {
    padding: var(--sp-lg) var(--sp-md);
  }

  .topic-card-content {
    align-items: center;
    text-align: center;
  }

  .topic-card--wide .topic-card-content {
    align-items: center;
    text-align: center;
    padding-right: 0;
    width: 100%;
    max-width: 100%;
  }

  .topic-card--wide .topic-card-content h3,
  .topic-card--wide .topic-card-content .topic-desc {
    text-align: center;
  }

  .topic-card-media {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 112px;
    padding: 0;
    order: 2;
  }

  .topic-card--wide::after {
    background: linear-gradient(180deg, rgba(10, 10, 16, 0.08) 0%, rgba(10, 10, 16, 0.28) 100%);
  }

  .topic-icon {
    width: 48px;
    height: 48px;
    font-size: 22px;
  }

  .how-it-works {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-sm);
  }

  .chat-header {
    padding: var(--sp-md);
  }

  .suggestions {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .conversation-row {
    flex-wrap: wrap;
    gap: var(--sp-sm);
  }

  .resume-btn {
    margin-left: auto;
  }

  .dynamic-island {
    min-width: auto;
    width: calc(100% - 32px);
    left: 16px;
    transform: none;
  }

  @keyframes islandIn {
    from {
      opacity: 0;
      transform: translateY(-20px) scale(0.8);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .live-start {
    padding: var(--sp-xxl) 0;
  }

  .mic-button {
    width: 130px;
    height: 130px;
  }

  .mic-button .inner {
    width: 120px;
    height: 120px;
  }

  .mic-button svg {
    width: 40px;
    height: 40px;
  }

  .home-stats {
    grid-template-columns: 1fr;
  }

  .home-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .home-greeting {
    font-size: var(--font-size-2xl);
  }
}

/* ==========================================
   Responsive – Small Mobile (≤480px)
   ========================================== */

@media (max-width: 480px) {
  .main-content {
    padding: var(--sp-md);
    padding-top: 56px;
  }

  .page-header h1 {
    font-size: var(--font-size-xl);
  }

  .topic-grid {
    grid-template-columns: 1fr 1fr;
  }

  .how-it-works {
    grid-template-columns: 1fr;
  }

  .conversation-row {
    padding: var(--sp-sm);
  }

  .step-card {
    padding: var(--sp-xl) var(--sp-lg);
  }
}

/* ==========================================
   Home Page
   ========================================== */

.home-page {
  width: 100%;
  position: relative;
}

.home-session-lane {
  margin-bottom: var(--sp-xxl);
}

.home-hero {
  margin-bottom: var(--sp-xxl);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.home-greeting {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.8px;
  color: var(--nb-text);
  margin-bottom: 0;
}

.home-subtitle {
  font-size: 16px;
  color: var(--nb-text-secondary);
  font-weight: 400;
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: var(--sp-xxl);
}

.home-stat-card {
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
  border-radius: 20px;
  padding: 18px 20px 16px;
  min-height: 122px;
  text-align: left;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.home-stat-card:hover {
  border-color: var(--nb-border-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.home-stat-top {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.home-stat-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.home-stat-icon--large {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 18px;
}

.home-stat-copy {
  min-width: 0;
  flex: 1;
}

.home-stat-value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.7px;
  margin-bottom: 6px;
}

.home-stat-label {
  font-size: 11px;
  color: var(--nb-text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.home-stat-meta {
  font-size: 12px;
  line-height: 1.45;
  color: var(--nb-text-secondary);
}

.home-progress-bar {
  margin-top: 2px;
  height: 4px;
  background: var(--nb-border);
  border-radius: 4px;
  overflow: hidden;
}

.home-progress-bar--thin {
  height: 4px;
}

.home-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #30D158, #34C759);
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.home-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--nb-text);
  margin-bottom: var(--sp-lg);
  letter-spacing: -0.3px;
}

.home-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
}

.home-feature-card {
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl);
  text-align: left;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--feature-color);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.home-feature-card:hover {
  border-color: var(--feature-color);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.home-feature-card:hover::before {
  opacity: 1;
}

.home-feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--feature-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-md);
  transition: transform 0.2s ease;
  align-self: flex-start;
}

.home-feature-card:hover .home-feature-icon {
  transform: scale(1.08) rotate(3deg);
}

.home-feature-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--nb-text);
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}

.home-feature-card p {
  font-size: 13px;
  color: var(--nb-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--sp-md);
}

.home-feature-arrow {
  font-size: 18px;
  color: var(--feature-color);
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.2s ease;
  display: block;
}

.home-feature-card:hover .home-feature-arrow {
  opacity: 1;
  transform: translateX(0);
}

.home-tip-wrap {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-lg);
}

.home-tip {
  background: rgba(18, 18, 24, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl) calc(var(--sp-xl) + 10px);
  border-left: 3px solid #FF9F0A;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  flex: 1;
}

.home-tip-image {
  width: 118px;
  height: auto;
  min-width: 118px;
  border-radius: 0;
  object-fit: contain;
  border: none;
  background: transparent;
}

@media (min-width: 769px) {
  .home-page {
    --home-character-slot: clamp(240px, 22vw, 360px);
    --home-character-width: clamp(300px, 28vw, 440px);
    --home-character-gap: 0px;
  }

  .home-session-lane {
    position: relative;
    z-index: 2;
    padding-left: calc(var(--home-character-slot) + var(--home-character-gap));
  }

  .home-tip-wrap {
    display: block;
    position: relative;
    z-index: 2;
    min-height: clamp(290px, 36vh, 420px);
    padding-left: calc(var(--home-character-slot) + var(--home-character-gap));
  }

  .home-tip-image {
    position: fixed;
    left: 0;
    bottom: 0;
    width: var(--home-character-width);
    min-width: var(--home-character-width);
    height: auto;
    max-height: min(620px, calc(100vh - 200px));
    transform: translateX(0);
    z-index: 5;
    pointer-events: none;
  }
}

.home-method-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 13px;
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 0;
  white-space: nowrap;
}
.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  animation: lp-pulse 2s infinite;
}
@keyframes lp-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.home-feature-cta {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--feature-color);
  opacity: 0.9;
  transition: opacity 0.2s;
}
.home-feature-card:hover .home-feature-cta {
  opacity: 1;
}
.home-tip-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.home-tip-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid rgba(17, 17, 17, 0.08);
}
.home-tip-author-name {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
}
.home-tip-author-role {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.home-tip-main {
  width: 100%;
}

.home-tip-badge {
  font-size: 11px;
  font-weight: 700;
  color: #FF9F0A;
  margin-bottom: var(--sp-md);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Tip markdown styling */
.tip-markdown {
  color: var(--nb-text);
}

.home-tip .tip-markdown,
.home-tip .tip-markdown p,
.home-tip .tip-markdown strong {
  color: rgba(255, 255, 255, 0.92);
}

.home-tip .tip-loading {
  color: rgba(255, 255, 255, 0.45) !important;
}

.tip-markdown p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--nb-text);
  margin-bottom: 8px;
}

.tip-markdown p:last-child {
  margin-bottom: 0;
}

.tip-markdown strong {
  font-weight: 700;
  color: var(--nb-text);
}

/* First paragraph (title) gets bigger */
.tip-markdown p:first-child {
  font-size: 15px;
  font-weight: 600;
  color: var(--nb-text);
  margin-bottom: 10px;
}

.tip-markdown p:first-child strong {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

/* Section labels like "Pourquoi ça marche :" */
.tip-markdown strong:only-child {
  display: block;
}

.tip-loading {
  font-size: 14px;
  color: var(--nb-text-muted);
  font-style: italic;
}

.home-tip .tip-markdown p:first-child,
.home-tip .tip-markdown p:first-child strong,
.home-tip .tip-loading {
  color: rgba(245, 245, 247, 0.85);
}

@media (max-width: 768px) {

  .home-stats {
    grid-template-columns: 1fr;
  }

  .home-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .home-stat-card {
    min-height: 0;
    padding: 16px 16px 14px;
  }

  .home-tip {
    padding: var(--sp-lg) calc(var(--sp-lg) + 8px);
  }

  .home-tip-wrap {
    gap: var(--sp-md);
  }

  .home-tip-image {
    width: 84px;
    min-width: 84px;
  }

  .home-greeting {
    font-size: var(--font-size-2xl);
  }
}

/* ==========================================
   Login Page
   ========================================== */

.login-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--nb-bg);
  background-image: var(--gradient-bg);
  gap: var(--sp-xxl);
}

.login-logo-outer {
  width: 100px;
  height: 100px;
  border-radius: 28px;
  background: var(--nb-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nb-border);
}

.login-logo-inner {
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background: var(--nb-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-text {
  text-align: center;
}

.login-text h1 {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  margin-bottom: var(--sp-sm);
}

.login-text p {
  color: var(--nb-text-secondary);
}

/* ==========================================
   Gaming Page
   ========================================== */

.gaming-page-shell {
  --gaming-library-width: clamp(300px, 23vw, 360px);
  display: grid;
  grid-template-columns: var(--gaming-library-width) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  width: 100%;
  max-width: none;
  min-height: calc(100vh - 76px);
  margin: 0;
}

.gaming-page-shell .page-header {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: min(920px, calc(100% - 72px));
  margin-bottom: var(--sp-md);
  padding-top: 32px;
}

.gaming-section-kicker {
  color: rgba(255, 255, 255, 0.46);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scenario-card {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}

.scenario-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.82);
  flex-shrink: 0;
}

.scenario-card .scenario-title {
  font-weight: 600;
  font-size: 15px;
}

.scenario-card .scenario-meta {
  font-size: 12px;
  color: var(--nb-text-secondary);
  margin-top: 4px;
}

.scenario-arrow {
  font-size: 13px;
  font-weight: 700;
  color: var(--nb-text-muted);
  margin-left: auto;
  white-space: nowrap;
}

/* Arena Page */
.arena-page-shell {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: calc(100vh - 64px);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: #05010e;
  color: #fff;
  -webkit-overflow-scrolling: touch;
}

.arena-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  z-index: 0;
  filter: saturate(1.08) contrast(1.05);
}

.arena-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(1200px 620px at 50% 20%, rgba(90, 74, 255, 0.22), transparent 58%),
    linear-gradient(180deg, rgba(5, 1, 14, 0.34) 0%, rgba(3, 4, 14, 0.62) 100%);
  pointer-events: none;
}

.arena-page-content {
  position: relative;
  z-index: 2;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: 24px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.arena-section .card {
  background: rgba(8, 10, 24, 0.62);
  border-color: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.arena-section .card:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.arena-section .btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.arena-section .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

.arena-section .btn-primary {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.arena-page-shell .arena-opponent-label {
  color: rgba(255, 255, 255, 0.84);
}

.arena-page-shell .arena-select option {
  background: #0a0820;
  color: #fff;
}

.arena-page-shell .arena-start-btn {
  margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .arena-bg-video {
    display: none;
  }
}

.app-layout.has-gradient-bg .arena-page-shell .arena-page-copy h1,
.app-layout.has-gradient-bg .arena-page-shell .arena-page-copy p {
  color: #fff;
}

.app-layout.has-gradient-bg .arena-page-shell .arena-section {
  background: rgba(7, 10, 20, 0.50);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.app-layout.has-gradient-bg .arena-page-shell .arena-section-title {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 14px;
}

.app-layout.has-gradient-bg .arena-page-shell .arena-section .card {
  background: rgba(8, 10, 24, 0.62);
  border-color: rgba(255, 255, 255, 0.10);
}

.app-layout.has-gradient-bg .arena-page-shell .arena-section .btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.app-layout.has-gradient-bg .arena-page-shell .arena-section .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

.app-layout.has-gradient-bg .arena-page-shell .arena-section .arena-select {
  background: rgba(8, 10, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
}

.app-layout.has-gradient-bg .arena-page-shell .arena-select option {
  background: #0a0820;
  color: #fff;
}

.app-layout.has-gradient-bg .arena-page-shell .arena-back-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Battle Results */
.battle-results {
  text-align: center;
  padding: 40px var(--sp-xl);
  max-width: 720px;
  margin: 0 auto;
}

/* Objective Grid (Live Coaching) */
.objective-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-lg);
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.objective-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  padding: var(--sp-xl);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  background: var(--nb-bg);
  font-family: var(--font);
  color: var(--nb-text);
}

.objective-card:hover {
  border-color: var(--obj-color);
  background: var(--obj-bg);
}

.objective-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.objective-label {
  font-weight: 600;
  font-size: 14px;
}

.objective-desc {
  font-size: var(--font-size-xs);
  color: var(--nb-text-secondary);
  margin-top: 2px;
}

.objective-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--sp-sm) var(--sp-lg) var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-xl);
  font-size: 14px;
  font-weight: 600;
  align-self: center;
}

.objective-badge .close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--nb-text-muted);
  font-size: var(--font-size-xs);
  padding: 2px 4px;
  margin-left: 4px;
}

.custom-objective-input {
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
}

.custom-objective-input input {
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  border: 2px solid var(--nb-border);
  background: var(--nb-surface);
  color: var(--nb-text);
  font-family: var(--font);
  outline: none;
  margin-bottom: var(--sp-lg);
}

.custom-objective-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.live-language-chip.active {
  background: color-mix(in srgb, var(--nb-accent) 14%, var(--nb-surface));
  border-color: color-mix(in srgb, var(--nb-accent) 56%, transparent);
  color: var(--nb-text-primary);
  box-shadow: 0 8px 24px rgba(10, 132, 255, 0.12);
}

@media (max-width: 768px) {

  .learn-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .learn-overview {
    flex-direction: column;
    align-items: flex-start;
  }

  .learn-overview-stats {
    width: 100%;
  }

  .learn-overview-stat {
    flex: 1;
    min-width: 0;
  }

  .learn-overview-focus {
    width: 100%;
    min-width: 0;
  }

  .learn-section {
    padding: 20px;
  }

  .learn-section-header {
    flex-direction: column;
  }

  .learn-section-metrics {
    width: 100%;
    align-items: flex-start;
  }

  .learn-module-card {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .learn-module-step {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .learn-module-action {
    grid-column: 2 / -1;
    justify-self: flex-start;
  }

  .lesson-stage {
    flex-direction: column;
    align-items: flex-start;
  }

  .lesson-stage-main {
    align-items: flex-start;
  }

  .lesson-stage-badge {
    width: 100%;
    align-items: flex-start;
  }

  .lesson-card {
    padding: 22px;
  }

  .lesson-card-header-row {
    flex-direction: column;
  }

  .lesson-example-grid {
    grid-template-columns: 1fr;
  }

  .lesson-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .lesson-nav {
    width: 100%;
    flex-direction: column-reverse;
  }

  .lesson-nav-prev,
  .lesson-nav-next {
    width: 100%;
    justify-content: center;
  }

  .quiz-topbar {
    gap: 10px;
  }

  .quiz-stage {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }

  .quiz-stage-main {
    align-items: flex-start;
  }

  .quiz-stage-badge {
    width: 100%;
    align-items: flex-start;
  }

  .quiz-panel {
    padding: 20px;
  }

  .quiz-question-card {
    padding: 20px;
  }

  .quiz-question {
    max-width: none;
    font-size: 26px;
  }

  .quiz-answers {
    grid-template-columns: 1fr;
  }

  .quiz-answer {
    min-height: 0;
  }

  .quiz-results-shell {
    padding: 16px;
  }

  .objective-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   Learn Page – Guided Modules
   ========================================== */

.learn-page {
  max-width: 980px;
  margin: 0 auto;
  padding-bottom: 56px;
}

.learn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.learn-xp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  color: var(--nb-text);
  box-shadow: 0 12px 30px rgba(7, 9, 18, 0.22);
}

.learn-path {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.learn-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--section-color) 18%, transparent), transparent 32%),
    linear-gradient(180deg, rgba(11, 12, 21, 0.94), rgba(10, 11, 20, 0.72));
  box-shadow: 0 28px 90px rgba(3, 6, 16, 0.24);
}

.learn-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.learn-section-header-main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.learn-section-header-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--section-color) 14%, rgba(255, 255, 255, 0.04));
  border: 1px solid color-mix(in srgb, var(--section-color) 28%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.learn-section-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--section-color) 75%, #ffffff);
}

.learn-section-title {
  margin: 8px 0 6px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.94);
}

.learn-section-desc {
  margin: 0;
  max-width: 56ch;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

.learn-section-metrics {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 126px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
}

.learn-section-metrics span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.learn-section-metrics strong {
  margin-top: 4px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.94);
}

.learn-section-progress {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.learn-section-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--section-color), color-mix(in srgb, var(--section-color) 45%, #ffffff));
  box-shadow: 0 0 24px color-mix(in srgb, var(--section-color) 35%, transparent);
}

.learn-module-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.learn-module-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 18px 18px 16px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
  font-family: inherit;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.learn-module-card:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--section-color) 34%, rgba(255, 255, 255, 0.18));
  box-shadow: 0 18px 48px rgba(2, 5, 15, 0.34);
}

.learn-module-card:disabled {
  cursor: not-allowed;
}

.learn-module-card.active {
  border-color: color-mix(in srgb, var(--section-color) 42%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--section-color) 12%, transparent), transparent 62%),
    rgba(255, 255, 255, 0.045);
  box-shadow: 0 22px 60px color-mix(in srgb, var(--section-color) 14%, transparent);
}

.learn-module-card.completed {
  border-color: color-mix(in srgb, var(--section-color) 24%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--section-color) 8%, transparent), transparent 72%),
    rgba(255, 255, 255, 0.04);
}

.learn-module-card.locked {
  opacity: 0.56;
  background: rgba(255, 255, 255, 0.025);
}

.learn-module-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.78);
}

.learn-module-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.learn-module-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.learn-module-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--section-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--section-color) 28%, transparent);
}

.learn-module-check {
  font-size: 20px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
}

.learn-module-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.learn-module-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.learn-module-title-row strong {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.94);
}

.learn-module-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.learn-module-status.active {
  color: color-mix(in srgb, var(--section-color) 88%, #ffffff);
  background: color-mix(in srgb, var(--section-color) 14%, transparent);
  border-color: color-mix(in srgb, var(--section-color) 28%, transparent);
}

.learn-module-status.completed {
  color: #6be28f;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.24);
}

.learn-module-status.locked {
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.04);
}

.learn-module-description {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

.learn-module-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.learn-module-meta span,
.learn-module-preview-chip,
.learn-module-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.learn-module-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.learn-module-preview-chip {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.learn-module-action {
  white-space: nowrap;
  justify-self: flex-end;
  color: rgba(255, 255, 255, 0.82);
}

.learn-module-card.active .learn-module-action {
  border-color: color-mix(in srgb, var(--section-color) 32%, transparent);
  background: color-mix(in srgb, var(--section-color) 16%, transparent);
  color: color-mix(in srgb, var(--section-color) 86%, #ffffff);
}

.learn-module-card.completed .learn-module-action {
  color: #6be28f;
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(34, 197, 94, 0.12);
}

/* ==========================================
   Quiz Page – Polished UX
   ========================================== */

.quiz-page {
  max-width: 980px;
  margin: 0 auto;
  padding-bottom: 48px;
}

.quiz-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  min-width: 0;
}

.quiz-back-btn {
  padding: 8px 12px !important;
  flex-shrink: 0;
}

.quiz-progress-segments {
  flex: 1;
  display: flex;
  gap: 3px;
  height: 10px;
  min-width: 0;
}

.quiz-progress-seg {
  flex: 1;
  border-radius: 100px;
  background: var(--nb-surface);
  transition: all 0.4s ease;
}

.quiz-progress-seg.done {
  background: var(--section-color);
}

.quiz-progress-seg.failed {
  background: #ef4444;
}

.quiz-progress-seg.current {
  background: color-mix(in srgb, var(--section-color) 40%, transparent);
  animation: segPulse 1.5s infinite ease-in-out;
}

@keyframes segPulse {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

.quiz-counter {
  font-size: 13px;
  font-weight: 700;
  color: var(--nb-text-muted);
  min-width: 40px;
  text-align: right;
  flex-shrink: 0;
}

.quiz-stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  padding: 22px 24px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--section-color) 18%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(12, 10, 24, 0.88), rgba(12, 12, 24, 0.68));
}

.quiz-stage-main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.quiz-stage-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--section-color) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--section-color) 24%, transparent);
}

.quiz-stage-kicker {
  color: color-mix(in srgb, var(--section-color) 78%, #ffffff);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.quiz-stage h1 {
  margin: 8px 0 6px;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 0.96;
  letter-spacing: -0.05em;
  overflow-wrap: anywhere;
}

.quiz-stage p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
  line-height: 1.6;
}

.quiz-stage-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 126px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.quiz-stage-badge span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
}

.quiz-stage-badge strong {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.quiz-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(15, 17, 29, 0.95), rgba(11, 12, 22, 0.82));
  box-shadow: 0 26px 70px rgba(5, 8, 18, 0.3);
}

/* Quiz Body */
.quiz-body {
  transition: opacity 0.2s ease, transform 0.2s ease;
  min-width: 0;
}

.quiz-body.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.quiz-body.animate-out {
  opacity: 0;
  transform: translateY(8px);
}

.quiz-context-card {
  padding: 18px 20px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--section-color) 8%, rgba(255, 255, 255, 0.02));
  border: 1px solid color-mix(in srgb, var(--section-color) 18%, rgba(255, 255, 255, 0.1));
}

.quiz-context-kicker {
  color: color-mix(in srgb, var(--section-color) 72%, white 28%);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quiz-context-title {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--nb-text);
  overflow-wrap: anywhere;
}

.quiz-context-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.quiz-context-meta span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

/* Scenario */
.quiz-scenario {
  display: flex;
  gap: 12px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  align-items: flex-start;
}

.quiz-scenario p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.64);
  font-style: italic;
  min-width: 0;
  margin: 0;
}

.quiz-question-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Question */
.quiz-question {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--nb-text);
  max-width: 24ch;
}

/* Answers */
.quiz-answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quiz-answer {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  min-height: 112px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: var(--font);
  text-align: left;
  position: relative;
  overflow: hidden;
}

.quiz-answer:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--section-color) 30%, transparent);
  background: color-mix(in srgb, var(--section-color) 12%, transparent);
  transform: translateY(-1px);
}

.quiz-answer:not(:disabled):hover .quiz-answer-text {
  color: var(--nb-text);
}

.quiz-answer:not(:disabled):hover .quiz-answer-label {
  background: var(--section-color);
  border-color: var(--section-color);
  color: #fff;
}

.quiz-answer.correct {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
  box-shadow: 0 0 0 1px #22c55e;
}

.quiz-answer.wrong {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  box-shadow: 0 0 0 1px #ef4444;
}

.quiz-answer.dimmed {
  opacity: 0.45;
}

.quiz-answer-label {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--nb-text-secondary);
  flex-shrink: 0;
  transition: all 0.25s;
}

.quiz-answer-label.correct {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}

.quiz-answer-label.wrong {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
}

.quiz-answer-text {
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--nb-text);
  line-height: 1.6;
  flex: 1;
  overflow-wrap: anywhere;
}

.quiz-answer-icon {
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  align-self: center;
}

.quiz-answer.correct .quiz-answer-icon {
  color: #22c55e;
}

.quiz-answer.wrong .quiz-answer-icon {
  color: #ef4444;
}

/* Explanation */
.quiz-explanation {
  padding: 18px 20px;
  border-radius: 18px;
  animation: slideUp 0.3s ease;
}

.quiz-explanation.correct {
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.quiz-explanation.wrong {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.quiz-explanation-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

.quiz-explanation.correct .quiz-explanation-header {
  color: #22c55e;
}

.quiz-explanation.wrong .quiz-explanation-header {
  color: #ef4444;
}

.quiz-explanation-text {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.68);
  margin: 0;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Next / Continue button */
.quiz-next-btn {
  width: 100%;
  padding: 16px 18px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 16px !important;
  background: var(--section-color) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--section-color) 35%, transparent);
  transition: all 0.25s ease !important;
  letter-spacing: 0.2px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.quiz-next-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--section-color) 50%, transparent);
  opacity: 0.95;
}

/* ==========================================
   Quiz Results
   ========================================== */

.quiz-results {
  text-align: center;
  padding: 52px 24px;
  max-width: 520px;
  margin: 0 auto;
  animation: slideUp 0.5s ease;
}

.quiz-results-shell {
  padding: 28px 24px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(15, 17, 29, 0.95), rgba(11, 12, 22, 0.82));
  box-shadow: 0 26px 70px rgba(5, 8, 18, 0.3);
}

.quiz-results-emoji {
  font-size: 72px;
  margin-bottom: 16px;
  animation: popIn 0.5s ease;
}

@keyframes popIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }

  60% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.quiz-results-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
  color: var(--nb-text);
}

.quiz-results-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 4px;
}

.quiz-results-score-num {
  font-size: 48px;
  font-weight: 800;
  color: var(--nb-text);
}

.quiz-results-score-sep {
  font-size: 32px;
  font-weight: 300;
  color: var(--nb-text-muted);
}

.quiz-results-score-den {
  font-size: 24px;
  font-weight: 600;
  color: var(--nb-text-muted);
}

.quiz-results-subtitle {
  font-size: 15px;
  color: var(--nb-text-secondary);
  margin-bottom: 24px;
}

.quiz-results-fail-msg {
  font-size: 14px;
  color: #ef4444;
  font-weight: 600;
  margin-bottom: 24px;
  padding: 12px 20px;
  background: rgba(239, 68, 68, 0.08);
  border-radius: 12px;
}

.quiz-results-xp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--section-color) 10%, transparent);
  border: 2px solid var(--section-color);
  color: var(--section-color);
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 32px;
}

.quiz-results-bars {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 32px;
}

.quiz-results-bar {
  width: 100%;
  max-width: 28px;
  height: 6px;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.quiz-results-bar.correct {
  background: #22c55e;
}

.quiz-results-bar.wrong {
  background: #ef4444;
  opacity: 0.4;
}

.quiz-results-btn {
  width: 100%;
  padding: 16px 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 16px !important;
  background: var(--section-color, #22c55e) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--section-color, #22c55e) 35%, transparent);
}

.quiz-results-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--section-color, #22c55e) 50%, transparent);
  opacity: 0.95;
}

/* ========== Lesson Page ========== */
.lesson-page {
  max-width: 980px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 16px 16px 48px;
  display: flex;
  flex-direction: column;
}

.learn-overview {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
  padding: 20px 22px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at top left, rgba(124, 92, 255, 0.16), transparent 34%),
    rgba(12, 10, 24, 0.74);
}

.learn-overview-kicker {
  color: rgba(255, 255, 255, 0.46);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.learn-overview h2 {
  margin: 8px 0 10px;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.learn-overview p {
  max-width: 54ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 14px;
  line-height: 1.65;
}

.learn-overview-stats {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.learn-overview-stat {
  min-width: 124px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.learn-overview-stat strong {
  display: block;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.learn-overview-stat span {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
}

.learn-overview-focus {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.learn-overview-focus-label {
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.learn-overview-focus strong {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.94);
}

.learn-overview-focus span:last-child {
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  line-height: 1.5;
}

.lesson-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.lesson-stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  padding: 22px 24px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--section-color) 18%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(12, 10, 24, 0.88), rgba(12, 12, 24, 0.68));
}

.lesson-stage-main {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lesson-stage-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--section-color) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--section-color) 24%, transparent);
}

.lesson-stage-kicker {
  color: color-mix(in srgb, var(--section-color) 78%, #ffffff);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lesson-stage h1 {
  margin: 8px 0 6px;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.lesson-stage p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
}

.lesson-stage-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 126px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.lesson-stage-badge span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
}

.lesson-stage-badge strong {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.lesson-progress-dots {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: center;
}

.lesson-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--nb-glass-border);
  transition: all 0.3s ease;
}

.lesson-dot.done {
  background: var(--section-color);
}

.lesson-dot.active {
  background: var(--section-color);
  transform: scale(1.3);
  box-shadow: 0 0 8px color-mix(in srgb, var(--section-color) 50%, transparent);
}

.lesson-card-wrapper {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}

.lesson-card-wrapper.animate-in {
  animation: quizSlideIn 0.3s ease forwards;
}

.lesson-card-wrapper.animate-out {
  animation: quizSlideOut 0.2s ease forwards;
}

.lesson-card {
  background:
    linear-gradient(180deg, rgba(15, 17, 29, 0.95), rgba(11, 12, 22, 0.82));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 28px;
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 26px 70px rgba(5, 8, 18, 0.3);
}

.lesson-card-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--section-color) 12%, rgba(255, 255, 255, 0.02));
  border: 1px solid color-mix(in srgb, var(--section-color) 24%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lesson-card-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.lesson-card-intro {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.lesson-card-headline {
  min-width: 0;
}

.lesson-card-step {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  margin-bottom: 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--section-color) 26%, transparent);
  background: color-mix(in srgb, var(--section-color) 12%, transparent);
  color: color-mix(in srgb, var(--section-color) 88%, #ffffff);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lesson-speak-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--nb-glass-border);
  background: var(--nb-glass-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--nb-text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lesson-speak-btn.active {
  background: color-mix(in srgb, var(--section-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--section-color) 30%, transparent);
  color: var(--nb-text-primary);
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

.lesson-card-title {
  font-size: 30px;
  font-weight: 800;
  color: var(--nb-text);
  margin: 0;
  letter-spacing: -0.04em;
}

.lesson-keypoint {
  display: flex;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb, var(--section-color) 10%, transparent);
  border-left: 3px solid var(--section-color);
  border-radius: 0 12px 12px 0;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--section-color);
}

.lesson-card-content {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.72;
  margin: 0;
  max-width: 72ch;
}

.lesson-examples {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lesson-example-situation {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.56);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px 0;
  font-style: italic;
}

.lesson-example-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.lesson-example {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.55;
}

.lesson-example.good {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.lesson-example.bad {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.lesson-example-badge {
  font-size: 14px;
  flex-shrink: 0;
}

.lesson-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255, 149, 0, 0.08);
  border: 1px solid rgba(255, 149, 0, 0.15);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px;
  color: #ff9500;
  font-weight: 600;
}

.lesson-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
}

.lesson-next-preview {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.lesson-next-preview-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.lesson-next-preview strong {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.92);
}

.lesson-next-preview span:last-child {
  color: rgba(255, 255, 255, 0.56);
  font-size: 13px;
  line-height: 1.55;
}

.lesson-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0;
  padding-top: 0;
}

.lesson-nav-prev {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  padding: 12px 18px !important;
  border-radius: 14px !important;
}

.lesson-nav-next {
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 16px !important;
  background: var(--section-color, #22c55e) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--section-color, #22c55e) 35%, transparent);
  transition: all 0.2s ease;
}

.lesson-nav-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--section-color, #22c55e) 40%, transparent);
}

/* ==========================================
   Live Coaching Feed UI
   ========================================== */
.live-coaching-page {
  --live-library-width: clamp(300px, 23vw, 360px);
  display: grid;
  grid-template-columns: var(--live-library-width) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  width: 100%;
  max-width: none;
  min-height: calc(100vh - 76px);
  margin: 0;
  padding-bottom: 0;
}

.live-coaching-page .page-header {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: min(1120px, calc(100% - 72px));
  margin-bottom: var(--sp-md);
  padding-top: 32px;
}

.live-prep-shell .live-language-chip.active {
  border-color: rgba(20, 184, 166, 0.64);
  background: rgba(20, 184, 166, 0.16);
  color: #fff;
  box-shadow: 0 14px 32px rgba(20, 184, 166, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.live-session-row.is-selected {
  border-color: rgba(10, 132, 255, 0.52);
  background: rgba(10, 132, 255, 0.15);
}

@media (max-width: 1180px) {

  .live-coaching-page .page-header,
  .live-main-panel,
  .live-session-sidebar {
    grid-column: 1;
    justify-self: center;
    width: min(920px, calc(100% - 36px));
  }

  .live-coaching-page .page-header {
    grid-row: 1;
    padding-top: 24px;
  }

}

/* ── Nouveau Live Active View ── */
.live-active-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 60px;
  max-width: 600px;
  margin: 0 auto;
}

/* ── Setup Stepper Overlay ── */
.setup-overlay {
  display: flex;
  justify-content: center;
  animation: setupFadeIn 0.3s ease forwards;
}
@keyframes setupFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.setup-stepper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 36px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 300px;
}

.setup-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  transition: opacity 0.3s ease;
}
.setup-step.pending {
  opacity: 0.35;
}
.setup-step.done {
  opacity: 0.7;
}
.setup-step.current {
  opacity: 1;
}

.setup-step-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.setup-step-spinner {
  animation: setupPulse 1.2s ease-in-out infinite;
}
@keyframes setupPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.88); }
}

.setup-step-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--nb-text);
}
.setup-step.pending .setup-step-label {
  color: var(--nb-text-muted);
}
.setup-step.current .setup-step-label {
  color: var(--nb-accent);
}
.setup-step.done .setup-step-label {
  color: var(--nb-green, #30D158);
}

/* ── Light theme overrides ── */
[data-theme="light"] .setup-stepper {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

/* ══════════════════════════════════════
   NEW: Card Stack (Live Coaching v2)
   ══════════════════════════════════════ */

/* ── Tip Counter Bar ── */
.lc-tip-counter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 6px;
  margin-bottom: 12px;
}
.lc-tip-counter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--nb-text-muted, rgba(255,255,255,0.25));
}
.lc-tip-counter-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.22);
  display: flex;
  align-items: center;
  gap: 6px;
}
.lc-kbd {
  display: inline-block;
  padding: 1px 7px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  line-height: 1.6;
}

/* ── Tip Stack ── */
.lc-tip-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Tip Card (base) ── */
.lc-tip-card {
  background: #fff;
  border-radius: 20px;
  padding: 22px 26px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  animation: lcTipSlideDown 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.lc-tip-card:active { opacity: 0.85; }

@keyframes lcTipSlideDown {
  from { opacity: 0; transform: translateY(-18px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Active card (newest unpinned) ── */
.lc-tip-card.active-card {
  box-shadow: 0 12px 48px rgba(0,0,0,0.25);
}

/* ── Grayed cards ── */
.lc-tip-card.grayed {
  background: rgba(255,255,255,0.10);
  box-shadow: none;
  padding: 14px 20px;
  border-color: rgba(255,255,255,0.10) !important;
}
.lc-tip-card.grayed .lc-tip-phrase {
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  font-weight: 500;
  font-style: normal !important;
}
.lc-tip-card.grayed .lc-tip-phrase::before,
.lc-tip-card.grayed .lc-tip-phrase::after { color: rgba(255,255,255,0.4); }
.lc-tip-card.grayed .lc-tip-why { display: none; }
.lc-tip-card.grayed .lc-category-badge {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.45) !important;
  filter: grayscale(1);
}
.lc-tip-card.grayed .lc-timer-bar-bg { opacity: 0.1; }
.lc-tip-card.grayed .lc-type-label { display: none; }
.lc-tip-card.grayed .lc-pin-indicator { display: none; }

/* ── Pinned card ── */
.lc-tip-card.pinned {
  opacity: 1 !important;
  box-shadow: 0 0 0 2.5px var(--nb-accent), 0 8px 32px rgba(0,0,0,0.2);
  background: #fff;
}
.lc-tip-card.pinned .lc-tip-phrase { color: #111; }
.lc-tip-card.pinned .lc-timer-bar { animation: none !important; }

/* ── Pin indicator ── */
.lc-pin-indicator {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--nb-accent);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Timer bar ── */
.lc-timer-bar-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(0,0,0,0.05);
}
.lc-timer-bar {
  height: 100%;
  transition: width 0.2s linear;
  border-radius: 0 2px 2px 0;
}
.lc-timer-bar.paused {
  transition: none;
}

/* ── Tip header / category badge ── */
.lc-tip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.lc-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
}

/* ── Tip phrase — SAME SIZE always ── */
.lc-tip-phrase {
  color: #111;
  line-height: 1.4;
  letter-spacing: -0.3px;
  font-size: 20px;
  font-weight: 700;
}

/* ── Type: "Phrase à dire" (tactic, reframe) ── */
.lc-tip-card.type-phrase .lc-tip-phrase {
  font-style: italic;
}
.lc-tip-card.type-phrase .lc-tip-phrase::before { content: '« '; font-style: normal; }
.lc-tip-card.type-phrase .lc-tip-phrase::after  { content: ' »'; font-style: normal; }

/* ── Type label ── */
.lc-type-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

/* ── Type: "Conseil" (warning, opportunity) ── */
.lc-tip-card.type-conseil .lc-tip-phrase {
  font-style: normal;
}

/* ── Tip explanation ── */
.lc-tip-why {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
  font-size: 13px;
  color: rgba(0,0,0,0.4);
  line-height: 1.6;
}

/* ── Streaming card ── */
.lc-streaming-card {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(0, 122, 255, 0.15);
  border-radius: 22px;
  padding: 24px 28px;
}
.lc-streaming-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.lc-streaming-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--nb-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lc-streaming-text {
  font-size: 20px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
}
.lc-cursor {
  color: var(--nb-accent);
  animation: lcBlink 0.7s step-end infinite;
}
@keyframes lcBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Listening card ── */
.lc-listening-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 56px 24px;
  background: rgba(255,255,255,0.025);
  border: 1.5px dashed rgba(255,255,255,0.08);
  border-radius: 24px;
}
.lc-listening-text {
  font-size: 17px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
}
.lc-listening-hint {
  font-size: 13px;
  color: var(--nb-text-muted, rgba(255,255,255,0.25));
}
.lc-heard-line {
  margin-top: 4px;
  color: rgba(255,255,255,0.45);
  font-style: italic;
  font-size: 13px;
}

/* ── Spacebar hint flash ── */
.lc-space-hint {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 20px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  z-index: 200;
  white-space: nowrap;
  animation: lcHintFade 1.2s ease forwards;
  pointer-events: none;
}
@keyframes lcHintFade {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(8px); }
}

/* ── Pulse rings (reused from listening state) ── */
.mic-pulse-rings {
  position: relative;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
}
.mic-pulse-rings .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--nb-accent);
  animation: ringExpand 2.4s ease-out infinite;
}
.mic-pulse-rings .r1 { animation-delay: 0s; }
.mic-pulse-rings .r2 { animation-delay: 0.8s; }
.mic-pulse-rings .r3 { animation-delay: 1.6s; }
@keyframes ringExpand {
  0%   { transform: scale(0.3); opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Point pulsant */
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nb-accent);
  animation: dotPulse 1.2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.65); }
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .lc-tip-phrase { font-size: 17px; }
  .lc-tip-card { padding: 18px 20px; }
  .lc-tip-card.grayed { padding: 12px 16px; }
}

/* ── Speed Toggle ── */
.lc-speed-toggle {
  position: fixed;
  bottom: 24px;
  left: calc(50% + (var(--app-sidebar-width, 260px) / 2));
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 100;
}
.lc-speed-btn {
  padding: 8px 18px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: rgba(255,255,255,0.45);
  transition: all 0.2s;
}
.lc-speed-btn.active {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.lc-speed-btn:hover:not(.active) {
  color: rgba(255,255,255,0.7);
}

@media (max-width: 768px) {
  .lc-speed-toggle {
    left: 50%;
  }
}

/* Anciens styles (compatibilité) */
.feed-card { display: none; }
.empty-feed-placeholder { display: none; }

.status-dot {
  width: 8px;
  height: 8px;
  background: currentColor;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}



/* ========== Quiz Revision Banner ========== */
.quiz-revision-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb, var(--section-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--section-color) 25%, transparent);
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--section-color);
  margin-bottom: 12px;
  animation: quizSlideIn 0.3s ease;
}

/* Microphone Button in Chat */
.mic-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--nb-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.mic-btn:hover {
  background: var(--nb-surface-hover);
  color: var(--nb-text);
}

.mic-btn.listening {
  color: #ff453a;
  background: rgba(255, 69, 58, 0.1);
  animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.4);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(255, 69, 58, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 69, 58, 0);
  }
}
/* ==========================================
   DESIGN REFINEMENTS — v2 Refined
   ========================================== */

/* Better logo icon accent color */
.sidebar-logo .logo-icon {
  background: var(--nb-accent) !important;
}

/* Better card interactions */
.card.interactive:hover {
  border-color: var(--nb-accent-bg);
  box-shadow: 0 4px 16px rgba(58, 58, 60, 0.08);
}

/* Topic card refined hover */
.topic-card:hover {
  border-color: var(--nb-accent) !important;
  box-shadow: 0 4px 16px rgba(58, 58, 60, 0.1);
}

/* Home feature cards */
.home-feature-card:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07) !important;
}

/* Better stat cards */
.home-stat-card:hover {
  border-color: var(--nb-border-hover) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

/* Better page header */
.page-header h1 {
  font-weight: 700;
  color: var(--nb-text);
}

/* Sidebar nav overrides — white on dark bg */
.nav-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.85);
}

.nav-item.active svg,
.nav-item.active .mi {
  color: #ffffff;
}

/* Sidebar logo text accent */
.sidebar-logo h1 {
  letter-spacing: -0.5px;
}

/* Better sidebar footer */
.stats-bar {
  background: var(--nb-surface) !important;
}

/* Better stop button */
.stop-btn {
  background: var(--nb-red-bg) !important;
  color: var(--nb-red) !important;
  border: 1px solid rgba(255, 59, 48, 0.15) !important;
}

/* Better feed items */
.feed-item {
  border-left: 3px solid var(--nb-accent) !important;
}

/* Better live status badge */
.live-status-badge {
  background: var(--nb-accent-bg) !important;
  color: var(--nb-accent) !important;
  border: 1px solid rgba(58, 58, 60, 0.2) !important;
}

[data-theme="dark"] .live-status-badge {
  border: 1px solid rgba(142, 142, 147, 0.2) !important;
}

/* Better mic button — overrides cleared */

/* Better conversations */
.conversation-row:hover {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(28, 28, 36, 0.55) !important;
}

/* ==========================================
   MOBILE DESIGN — Refined & Polished
   ========================================== */

/* Mobile top header bar */
@media (max-width: 768px) {
  /* App layout needs top padding for mobile header */
  .app-layout {
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
  }

  /* Mobile top bar */
  .app-layout::before {
    content: '';
    display: none;
  }

  /* Main content area */
  .main-content {
    padding: 20px 16px 96px 16px !important;
    padding-top: calc(20px + env(safe-area-inset-top)) !important;
  }

  /* Bottom nav improvements */
  .sidebar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 60px !important;
    padding: 6px 4px !important;
    padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid var(--nb-border) !important;
    border-right: none !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    z-index: 999 !important;
    gap: 0 !important;
  }

  [data-theme="dark"] .sidebar {
    background: rgba(0, 0, 0, 0.9) !important;
  }

  /* Le nav intérieur doit aussi être horizontal */
  .sidebar nav {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    justify-content: space-around !important;
    align-items: center !important;
  }

  .nav-item {
    flex-direction: column !important;
    padding: 6px 8px !important;
    gap: 3px !important;
    width: auto !important;
    flex: 1 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    color: var(--nb-text-muted) !important;
    border-radius: 10px !important;
    border-left: none !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .nav-item.active {
    color: var(--nb-accent) !important;
    background: var(--nb-accent-bg) !important;
  }

  .nav-item-mobile-only {
    display: flex !important;
  }

  .nav-item svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* nav-item-content : garder le label, cacher le sous-titre */
  .nav-item-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .nav-item-content > span:first-child {
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  .nav-subtitle {
    display: none !important;
  }

  /* Better page header on mobile */
  .page-header {
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    align-items: flex-start !important;
  }

  .page-header h1 {
    font-size: 26px !important;
  }

  .live-header-controls {
    align-items: flex-start;
    width: 100%;
  }

  .live-header-actions {
    justify-content: flex-start;
  }

  /* Home page mobile */
  .home-hero-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .home-greeting {
    font-size: 26px !important;
    font-weight: 700 !important;
  }

  .home-subtitle {
    font-size: 14px !important;
  }

  .home-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  .home-stat-card {
    padding: 14px 10px !important;
  }

  .home-stat-value {
    font-size: 22px !important;
  }

  .home-features {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .home-feature-card {
    padding: 14px !important;
  }

  /* Grid adjustments */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
  }

  .gaming-modes {
    grid-template-columns: 1fr !important;
  }

  /* Better topic grid on mobile */
  .topic-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .topic-card {
    padding: 16px 12px !important;
  }

  .topic-card--wide {
    grid-column: span 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .topic-card--wide .topic-card-content {
    align-items: center !important;
    text-align: center !important;
  }

  .topic-card--wide::after {
    display: none !important;
  }

  .topic-card-media {
    display: none !important;
  }

  .topic-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 22px !important;
  }

  .topic-card h3 {
    font-size: 13px !important;
  }

  /* Live coaching mobile */
  .live-start {
    padding: 24px 0 !important;
  }

  .objective-grid {
    grid-template-columns: 1fr !important;
  }

  .mic-button {
    width: 120px !important;
    height: 120px !important;
  }

  .mic-button .inner {
    width: 110px !important;
    height: 110px !important;
  }

  /* Card padding on mobile */
  .card {
    padding: 16px !important;
  }

  /* Chat on mobile */
  .chat-container {
    height: calc(100dvh - 76px) !important;
  }

  /* Conversations */
  .conversation-row {
    padding: 14px !important;
    gap: 10px !important;
  }

  .conv-title {
    font-size: 14px !important;
  }

  /* Suggestions scroll */
  .suggestions {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .suggestions::-webkit-scrollbar {
    display: none;
  }

  /* Gaming stats horizontal scroll */
  .gaming-stats {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .gaming-stat-card {
    min-width: 90px;
    flex-shrink: 0;
  }

  /* Step cards on mobile */
  .how-it-works {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Battle page on mobile */
  .battle-layout {
    flex-direction: column !important;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .main-content {
    padding: 16px 14px 90px 14px !important;
    padding-top: calc(16px + env(safe-area-inset-top)) !important;
  }

  .home-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .home-stat-card {
    padding: 12px 8px !important;
  }

  .home-stat-value {
    font-size: 18px !important;
  }

  .home-stat-label {
    font-size: 9px !important;
  }

  .page-header h1 {
    font-size: 22px !important;
  }

  .how-it-works {
    grid-template-columns: 1fr !important;
  }

  /* Login page mobile */
  .login-logo-outer {
    width: 80px !important;
    height: 80px !important;
  }

  .login-logo-inner {
    width: 64px !important;
    height: 64px !important;
  }

  .login-text h1 {
    font-size: 28px !important;
  }
}

/* ==========================================
   REFINED INTERACTIONS
   ========================================== */

/* Better card shadow transitions */
.card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Better home feature icon backgrounds */
.home-feature-icon {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Better loading state */
.loading-indicator {
  color: var(--nb-accent) !important;
}

/* Better focus states */
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--nb-accent) !important;
  box-shadow: 0 0 0 3px var(--nb-accent-bg) !important;
}

/* Better scroll bars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--nb-border-hover);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--nb-text-muted);
}

/* Refined badge */
.conversation-badge {
  background: var(--nb-accent-bg) !important;
  color: var(--nb-accent) !important;
}

/* Better resume/details button */
.resume-btn {
  background: var(--nb-surface) !important;
  color: var(--nb-text-secondary) !important;
  border: 1px solid var(--nb-border) !important;
}

.resume-btn:hover {
  border-color: var(--nb-accent) !important;
  color: var(--nb-accent) !important;
}

/* Battle scene background */
.battle-scene {
  border-radius: 16px;
  overflow: hidden;
}

/* ==========================================
   Animated Morphing Gradients Background
   Based on: https://github.com/baunov/gradients-bg
   ========================================== */

@keyframes gbMoveInCircle {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

@keyframes gbMoveVertical {
  0% { transform: translateY(-50%); }
  50% { transform: translateY(50%); }
  100% { transform: translateY(-50%); }
}

@keyframes gbMoveHorizontal {
  0% { transform: translateX(-50%) translateY(-10%); }
  50% { transform: translateX(50%) translateY(10%); }
  100% { transform: translateX(-50%) translateY(-10%); }
}

.gradient-bg {
  --gb-bg1: rgb(10, 10, 40);
  --gb-bg2: rgb(40, 0, 80);
  --gb-color1: 18, 113, 255;
  --gb-color2: 175, 82, 222;
  --gb-color3: 100, 210, 255;
  --gb-color4: 0, 102, 204;
  --gb-color5: 140, 80, 255;
  --gb-color-interactive: 100, 140, 255;
  --gb-circle-size: 80%;
  --gb-blending: hard-light;

  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(40deg, var(--gb-bg1), var(--gb-bg2));
  z-index: 0;
}

.gradient-bg svg {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.gradient-bg .gradients-container {
  filter: url(#goo) blur(40px);
  width: 100%;
  height: 100%;
}

.gradient-bg .g1 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--gb-color1), 0.8) 0, rgba(var(--gb-color1), 0) 50%) no-repeat;
  mix-blend-mode: var(--gb-blending);
  width: var(--gb-circle-size);
  height: var(--gb-circle-size);
  top: calc(50% - var(--gb-circle-size) / 2);
  left: calc(50% - var(--gb-circle-size) / 2);
  transform-origin: center center;
  animation: gbMoveVertical 30s ease infinite;
  opacity: 1;
}

.gradient-bg .g2 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--gb-color2), 0.8) 0, rgba(var(--gb-color2), 0) 50%) no-repeat;
  mix-blend-mode: var(--gb-blending);
  width: var(--gb-circle-size);
  height: var(--gb-circle-size);
  top: calc(50% - var(--gb-circle-size) / 2);
  left: calc(50% - var(--gb-circle-size) / 2);
  transform-origin: calc(50% - 400px);
  animation: gbMoveInCircle 20s reverse infinite;
  opacity: 1;
}

.gradient-bg .g3 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--gb-color3), 0.8) 0, rgba(var(--gb-color3), 0) 50%) no-repeat;
  mix-blend-mode: var(--gb-blending);
  width: var(--gb-circle-size);
  height: var(--gb-circle-size);
  top: calc(50% - var(--gb-circle-size) / 2 + 200px);
  left: calc(50% - var(--gb-circle-size) / 2 - 500px);
  transform-origin: calc(50% + 400px);
  animation: gbMoveInCircle 40s linear infinite;
  opacity: 1;
}

.gradient-bg .g4 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--gb-color4), 0.8) 0, rgba(var(--gb-color4), 0) 50%) no-repeat;
  mix-blend-mode: var(--gb-blending);
  width: var(--gb-circle-size);
  height: var(--gb-circle-size);
  top: calc(50% - var(--gb-circle-size) / 2);
  left: calc(50% - var(--gb-circle-size) / 2);
  transform-origin: calc(50% - 200px);
  animation: gbMoveHorizontal 40s ease infinite;
  opacity: 0.7;
}

.gradient-bg .g5 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--gb-color5), 0.8) 0, rgba(var(--gb-color5), 0) 50%) no-repeat;
  mix-blend-mode: var(--gb-blending);
  width: calc(var(--gb-circle-size) * 2);
  height: calc(var(--gb-circle-size) * 2);
  top: calc(50% - var(--gb-circle-size));
  left: calc(50% - var(--gb-circle-size));
  transform-origin: calc(50% - 800px) calc(50% + 200px);
  animation: gbMoveInCircle 20s ease infinite;
  opacity: 1;
}

.gradient-bg .interactive {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--gb-color-interactive), 0.8) 0, rgba(var(--gb-color-interactive), 0) 50%) no-repeat;
  mix-blend-mode: var(--gb-blending);
  width: 100%;
  height: 100%;
  top: -50%;
  left: -50%;
  opacity: 0.7;
}

/* Login page with gradient background */
.login-page.has-gradient-bg {
  background: transparent;
  background-image: none;
  position: relative;
  z-index: 1;
}

.login-page.has-gradient-bg .login-logo-outer {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.login-page.has-gradient-bg .login-logo-inner {
  background: rgba(255, 255, 255, 0.95);
}

.login-page.has-gradient-bg .login-logo-inner svg {
  color: rgb(40, 0, 80) !important;
}

.login-page.has-gradient-bg .login-text h1 {
  color: #ffffff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.login-page.has-gradient-bg .login-text p {
  color: rgba(255, 255, 255, 0.7);
}

.login-page.has-gradient-bg .btn-primary {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.3px;
  width: auto;
  min-width: 280px;
}

.login-page.has-gradient-bg .btn-primary:hover {
  background: transparent;
  box-shadow: none;
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════════
   INTERIOR APP — DA MATCHING THE LANDING PAGE
   Dark glass, mesh gradient visible, rich color accents.
   ══════════════════════════════════════════════════════════════════ */

/* ── Shell ─────────────────────────────────────────────────────── */
.app-layout.has-gradient-bg {
  position: relative;
  z-index: 1;
  background: transparent;
  --app-sidebar-width: 260px;
}

/* Main content — transparent so the Unicorn Studio background shows through */
.app-layout.has-gradient-bg .main-content {
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  /* Push content slightly so it doesn't hug sidebar border */
  padding: 28px 36px;
}

/* ── Sidebar ───────────────────────────────────────────────────── */
.app-layout.has-gradient-bg .sidebar {
  width: 260px;
  min-width: 260px;
  background: rgba(18, 18, 31, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(79, 124, 255, 0.12);
  color: #f1f5f9;
  box-shadow: 18px 0 48px rgba(5, 8, 20, 0.2);
}

/* Logo */
.app-layout.has-gradient-bg .sidebar-logo .logo-icon {
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.26) 0%, rgba(168, 85, 247, 0.26) 100%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

.app-layout.has-gradient-bg .sidebar-logo h1 {
  color: #f1f5f9;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.app-layout.has-gradient-bg .sidebar-logo p {
  color: #64748b;
}

.app-layout.has-gradient-bg .sidebar-logo-badge {
  background: rgba(168, 85, 247, 0.16);
  color: #d8b4fe;
  border-color: rgba(168, 85, 247, 0.28);
}

.app-layout.has-gradient-bg .sidebar-nav-label {
  color: #64748b;
}

/* Nav items */
.app-layout.has-gradient-bg .nav-item {
  color: #94a3b8;
  border-radius: 10px;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  position: relative;
}

.app-layout.has-gradient-bg .nav-item:hover {
  background: rgba(26, 26, 46, 0.72);
  color: #f1f5f9;
}

.app-layout.has-gradient-bg .nav-item.active {
  background: rgba(26, 26, 46, 0.9);
  color: #4f7cff;
  box-shadow: inset 0 0 0 1px rgba(79, 124, 255, 0.08);
}

.app-layout.has-gradient-bg .nav-item.active svg,
.app-layout.has-gradient-bg .nav-item.active .mi {
  color: currentColor;
}

.app-layout.has-gradient-bg .nav-subtitle {
  color: #64748b !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
}

.app-layout.has-gradient-bg .sidebar-link {
  color: #64748b;
}

.app-layout.has-gradient-bg .sidebar-link:hover {
  background: rgba(26, 26, 46, 0.72);
  color: #cbd5e1;
}

.app-layout.has-gradient-bg .sidebar-link-admin {
  color: #f1f5f9;
}

.app-layout.has-gradient-bg .sidebar-link-admin .nav-subtitle {
  color: rgba(168, 85, 247, 0.82) !important;
}

/* Footer */
.app-layout.has-gradient-bg .sidebar-footer {
  border-top: 1px solid rgba(79, 124, 255, 0.12);
}

.app-layout.has-gradient-bg .stat-value,
.app-layout.has-gradient-bg .user-name {
  color: #f8fafc;
}

.app-layout.has-gradient-bg .stat-label {
  color: #94a3b8;
}

.app-layout.has-gradient-bg .user-level {
  color: #94a3b8;
}

.app-layout.has-gradient-bg .stats-bar {
  background: rgba(26, 26, 46, 0.72);
  border-color: rgba(255, 255, 255, 0.06);
}

.app-layout.has-gradient-bg .user-profile {
  background: rgba(26, 26, 46, 0.72);
  border-color: rgba(255, 255, 255, 0.06);
}

.app-layout.has-gradient-bg .btn-icon {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.62);
  transition: background 0.18s, color 0.18s;
}

.app-layout.has-gradient-bg .btn-icon:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

/* ── Typography ────────────────────────────────────────────────── */
.app-layout.has-gradient-bg .page-header h1 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.8px;
  color: #ffffff;
}

.app-layout.has-gradient-bg .page-header p {
  color: rgba(255, 255, 255, 0.52);
  font-size: 15px;
}

.app-layout.has-gradient-bg .home-greeting,
.app-layout.has-gradient-bg h1 {
  color: #ffffff;
}

.app-layout.has-gradient-bg .home-section-title,
.app-layout.has-gradient-bg .section-title,
.app-layout.has-gradient-bg h2 {
  color: rgba(255,255,255,0.92);
  font-weight: 700;
}

.app-layout.has-gradient-bg h3 {
  color: rgba(255,255,255,0.88);
}

.app-layout.has-gradient-bg .home-subtitle {
  color: rgba(255, 255, 255, 0.52);
}

/* ── LiquidGlass panel — transition for hover animations ──────── */
.lg-panel {
  transition: transform 0.22s cubic-bezier(0.34, 1.20, 0.64, 1), filter 0.18s ease !important;
  will-change: transform;
}

/* ── Cards / glass panels ──────────────────────────────────────── */
/* .card keeps light-theme styling; LGP-converted cards get inline styles from JS */
.app-layout.has-gradient-bg .card {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  transition: background 0.22s, border-color 0.22s, transform 0.22s, box-shadow 0.22s;
}

.app-layout.has-gradient-bg .home-stat-card,
.app-layout.has-gradient-bg .gaming-stat-card {
  color: rgba(255, 255, 255, 0.9);
}

.app-layout.has-gradient-bg .card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.28);
}

.app-layout.has-gradient-bg .gaming-stat-card:hover,
.app-layout.has-gradient-bg .home-stat-card:hover {
  transform: translateY(-2px);
  filter: brightness(1.10);
}

/* Stat values */
.app-layout.has-gradient-bg .home-stat-label,
.app-layout.has-gradient-bg .gaming-stat-label {
  color: rgba(255, 255, 255, 0.78);
}

.app-layout.has-gradient-bg .home-stat-icon {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.10);
}

.app-layout.has-gradient-bg .home-stat-meta {
  color: rgba(255, 255, 255, 0.48);
}

.app-layout.has-gradient-bg .conv-meta {
  color: rgba(255, 255, 255, 0.45);
}

.app-layout.has-gradient-bg .home-progress-bar {
  background: rgba(255, 255, 255, 0.09);
}

@media (max-width: 1024px) {
  .app-layout.has-gradient-bg {
    --app-sidebar-width: 220px;
  }
}

/* ── Feature cards (Home) ──────────────────────────────────────── */
/* LGP handles background/border/boxShadow inline; we control text color + hover */
.app-layout.has-gradient-bg .home-feature-card {
  color: rgba(255, 255, 255, 0.9);
  text-align: left;
}

/* Suppress light-theme ::before accent line — dark mode uses inset boxShadow */
.app-layout.has-gradient-bg .home-feature-card::before {
  display: none;
}

.app-layout.has-gradient-bg .home-feature-card:hover {
  transform: translateY(-4px);
  filter: brightness(1.08);
}

.app-layout.has-gradient-bg .home-feature-icon {
  background: rgba(255,255,255,0.07) !important;
  border-radius: 14px;
  padding: 10px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-layout.has-gradient-bg .home-feature-arrow {
  color: rgba(255, 255, 255, 0.28);
}

/* ── Tip card ── LGP handles glass; we only need padding/layout ── */
.app-layout.has-gradient-bg .home-tip {
  /* background/border/boxShadow handled by LGP inline + style prop */
}

.app-layout.has-gradient-bg .home-tip-avatar {
  background: #ffffff !important;
  background-image: none !important;
  color: #111111 !important;
  border: 1px solid rgba(17, 17, 17, 0.08) !important;
  box-shadow: none !important;
}

.app-layout.has-gradient-bg .home-tip-badge {
  color: rgba(255, 210, 80, 0.9);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.app-layout.has-gradient-bg .home-tip-content,
.app-layout.has-gradient-bg .tip-markdown {
  color: rgba(255, 255, 255, 0.78);
}

/* ── Topic grid ── LGP handles glass ─────────────────────────── */
.app-layout.has-gradient-bg .topic-card {
  color: rgba(255, 255, 255, 0.9);
}

.app-layout.has-gradient-bg .topic-card:hover {
  transform: translateY(-4px);
  filter: brightness(1.10);
}

.app-layout.has-gradient-bg .topic-icon {
  border-radius: 14px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Conversation rows ─────────────────────────────────────────── */
.app-layout.has-gradient-bg .conversation-row {
  background: rgba(18, 18, 24, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  color: #fff;
  border-radius: 16px;
  margin-bottom: 8px;
  padding: 14px 18px;
  position: relative;
  overflow: hidden;
  transition: background 0.18s, border-color 0.18s;
}

/* Encoche colorée à gauche */
.app-layout.has-gradient-bg .conversation-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 55%;
  border-radius: 0 3px 3px 0;
  background: var(--topic-color, rgba(255,255,255,0.5));
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.app-layout.has-gradient-bg .conversation-row:hover {
  background: rgba(28, 28, 36, 0.55);
  border-color: rgba(255, 255, 255, 0.22);
}

.app-layout.has-gradient-bg .conversation-row:hover::before {
  transform: translateY(-50%) scaleY(1);
}

.app-layout.has-gradient-bg .conv-meta {
  color: rgba(255,255,255,0.45) !important;
}

.app-layout.has-gradient-bg .conv-icon {
  border-radius: 12px;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

.app-layout.has-gradient-bg .conv-title {
  color: #ffffff;
  font-weight: 600;
}

.app-layout.has-gradient-bg .conversation-badge {
  background: rgba(142, 142, 147, 0.18) !important;
  color: #aeaeb2 !important;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
}

/* Resume button */
.app-layout.has-gradient-bg .resume-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  transition: background 0.18s, color 0.18s !important;
}

.app-layout.has-gradient-bg .resume-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.app-layout.has-gradient-bg .btn-primary {
  background: rgba(142, 142, 147, 0.22);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(142, 142, 147, 0.35);
  color: #fff;
  border-radius: 24px;
  font-weight: 600;
  transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
}

.app-layout.has-gradient-bg .btn-primary:hover {
  background: rgba(142, 142, 147, 0.38);
  box-shadow: 0 8px 24px rgba(142,142,147,0.25);
  transform: translateY(-1px);
}

.app-layout.has-gradient-bg .btn-secondary {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.80);
  border-radius: 24px;
}

.app-layout.has-gradient-bg .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

/* ── Chat ──────────────────────────────────────────────────────── */
.app-layout.has-gradient-bg .chat-container {
  background: transparent;
}

.app-layout.has-gradient-bg .chat-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(4, 2, 16, 0.20);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.app-layout.has-gradient-bg .chat-header-title {
  color: #ffffff;
  font-weight: 700;
}

.app-layout.has-gradient-bg .message-content {
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.7;
}

.app-layout.has-gradient-bg .message-user-pill {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.82);
  color: #090a12;
  font-weight: 650;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* ── New ChatGPT-style chat input (base) ── */
.chat-textarea {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--nb-text);
  font-size: 15px;
  line-height: 1.5;
  font-family: inherit;
  outline: none;
  resize: none;
  min-height: 26px;
  max-height: 160px;
  padding: 14px 16px 4px;
  box-sizing: border-box;
  overflow-y: auto;
}

.chat-textarea::placeholder {
  color: var(--nb-text-muted);
}

/* Attachment preview strip */
.chat-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px 0;
}

.chat-attachment-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 4px;
  background: rgba(0,0,0,0.07);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 10px;
  font-size: 12px;
  color: var(--nb-text);
  max-width: 180px;
}

.chat-attachment-chip--loading {
  opacity: 0.78;
}

.chat-attachment-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(0,0,0,0.10);
  color: var(--nb-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-attachment-thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.chat-attachment-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.chat-attachment-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 600;
}

.chat-attachment-subtext {
  color: var(--nb-text-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-attachment-remove {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.12);
  color: var(--nb-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.12s;
}

.chat-attachment-remove:hover {
  background: rgba(255,59,48,0.18);
  color: #ff3b30;
}

/* gradient theme overrides for attachments */
.app-layout.has-gradient-bg .chat-attachment-chip {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.90);
}

.app-layout.has-gradient-bg .chat-attachment-icon {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.76);
}

.app-layout.has-gradient-bg .chat-attachment-subtext {
  color: rgba(255,255,255,0.56);
}

.app-layout.has-gradient-bg .chat-attachment-remove {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55);
}

.app-layout.has-gradient-bg .chat-attachment-remove:hover {
  background: rgba(255,69,58,0.25);
  color: #ff453a;
}

.chat-input-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 10px;
  gap: 8px;
}

.chat-actions-left,
.chat-actions-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-action-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--nb-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.chat-action-btn:hover {
  background: var(--nb-surface-hover);
  color: var(--nb-text);
}

.chat-action-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.chat-action-btn--active {
  color: var(--nb-orange);
  background: rgba(255, 149, 0, 0.14);
}

.chat-privacy-row {
  position: relative;
  display: flex;
  justify-content: flex-start;
  margin: 8px 12px 0;
  z-index: 12;
}

.chat-privacy-row .trust-notice {
  position: relative;
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

.chat-privacy-row .trust-notice-icon {
  display: none;
}

.chat-privacy-row .trust-notice-copy {
  display: block;
  flex: 0 0 auto;
}

.chat-privacy-row .trust-notice-copy strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.105);
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  cursor: default;
}

.chat-privacy-row .trust-notice::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 14px;
}

.chat-privacy-row .trust-notice-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(360px, calc(100vw - 48px));
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(8, 10, 24, 0.95);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.chat-privacy-row .trust-notice-popover span {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.45;
}

.chat-privacy-row .trust-notice-popover a {
  align-self: flex-start;
  font-size: 13px;
}

.chat-privacy-row .trust-notice:hover .trust-notice-popover,
.chat-privacy-row .trust-notice:focus-within .trust-notice-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.chat-action-active-red {
  color: #ff3b30 !important;
  background: rgba(255, 59, 48, 0.10) !important;
}

.trust-notice,
.negotiation-glossary {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  background: rgba(8, 10, 24, 0.42);
  color: var(--nb-text-secondary);
}

.trust-notice--compact,
.negotiation-glossary--compact {
  margin-bottom: 10px;
  padding: 10px 12px;
}

.trust-notice-icon,
.negotiation-glossary-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: var(--nb-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.trust-notice-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
}

.trust-notice-copy strong {
  color: var(--nb-text-primary);
  font-size: 13px;
}

.trust-notice-popover {
  display: contents;
}

.trust-notice a {
  flex: 0 0 auto;
  color: var(--nb-accent);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.trust-notice a:hover {
  text-decoration: underline;
}

.negotiation-glossary {
  align-items: flex-start;
}

.negotiation-glossary-terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.negotiation-glossary-term {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.055);
  font-size: 12px;
  line-height: 1.35;
}

.negotiation-glossary-term strong {
  color: var(--nb-text-primary);
  font-size: 12px;
}

.coach-context-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.9fr);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 18px;
}

.coach-workspace {
  --coach-library-width: clamp(292px, 23vw, 340px);
  display: grid;
  grid-template-columns: var(--coach-library-width) minmax(0, 1fr);
  gap: 0;
  align-items: start;
  width: 100%;
  max-width: none;
  min-height: calc(100vh - 76px);
  margin: 0;
}

.coach-library {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: calc(100vh - 76px);
  max-height: calc(100vh - 76px);
  min-height: calc(100vh - 76px);
  padding: 18px 0 0;
  overflow: hidden auto;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(12, 13, 18, 0.5);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.coach-main-panel {
  width: min(100%, 780px);
  max-width: 780px;
  min-width: 0;
  justify-self: center;
  padding: 32px 36px 40px;
}

.coach-main-panel:not(:has(.chat-container)) {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 76px);
}

.coach-main-panel > .chat-container {
  height: calc(100vh - 148px);
  min-height: 0;
  border-left: none;
  background: transparent;
}

.coach-main-panel > .chat-container .chat-header {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 auto;
  width: min(920px, 100%);
  border-bottom: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.coach-main-panel > .chat-container .chat-messages {
  min-height: 0;
}

.coach-main-panel > .chat-container .chat-messages-inner,
.coach-main-panel > .chat-container .chat-bottom {
  max-width: 920px;
}

.coach-main-panel > .chat-container .chat-bottom {
  position: sticky;
  bottom: 0;
  padding-bottom: 14px;
  background: linear-gradient(to top, rgba(3, 4, 12, 0.96) 0%, rgba(3, 4, 12, 0.72) 72%, rgba(3, 4, 12, 0) 100%);
  z-index: 6;
}

.coach-main-panel .topic-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(136px, auto);
  gap: 12px;
}

.coach-main-panel .topic-card {
  align-items: flex-start;
  min-height: 148px;
  padding: 18px;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  text-align: left;
  box-shadow: inset 0 3px 0 var(--topic-color, rgba(255, 255, 255, 0.2)), 0 8px 32px rgba(0, 0, 0, 0.20) !important;
}

.coach-main-panel .topic-card--wide {
  min-height: 148px;
}

.coach-main-panel .topic-card--personalized {
  border-color: rgba(100, 210, 255, 0.24) !important;
  background:
    radial-gradient(circle at 78% 28%, rgba(100, 210, 255, 0.14), transparent 30%),
    linear-gradient(135deg, rgba(100, 210, 255, 0.11), rgba(255, 255, 255, 0.035) 46%, rgba(0, 0, 0, 0.12)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(100, 210, 255, 0.08),
    0 12px 42px rgba(0, 0, 0, 0.24) !important;
}

.coach-main-panel .topic-card--personalized::after {
  background: linear-gradient(90deg, rgba(4, 9, 23, 0.08), rgba(4, 9, 23, 0.02) 54%, rgba(4, 9, 23, 0.20));
}

.coach-main-panel .topic-card-content {
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  height: 100%;
  text-align: left;
}

.coach-main-panel .topic-icon {
  width: auto !important;
  height: auto !important;
  border-radius: 12px;
  margin-bottom: 2px;
}

.coach-main-panel .topic-icon svg {
  width: 30px;
  height: 30px;
}

.coach-main-panel .topic-card h3 {
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.2;
  text-align: left;
}

.coach-main-panel .topic-desc {
  max-width: 220px;
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  line-height: 1.36;
  text-align: left;
}

.coach-main-panel .topic-card-cta {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.coach-main-panel .topic-card--personalized .topic-icon {
  color: #64d2ff !important;
}

.coach-main-panel .topic-card--personalized .topic-card-cta {
  color: #64d2ff !important;
}

.coach-main-panel .topic-card-media {
  width: min(34%, 148px);
  padding-right: 12px;
}

.coach-main-panel .topic-card--personalized .topic-card-media {
  top: 0;
  right: 0;
  bottom: 0;
  width: min(38%, 172px);
  padding: 0;
  align-items: stretch;
}

.coach-main-panel .topic-card--personalized .topic-card-media img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center right;
}

.coach-main-panel .topic-card--wide .topic-card-content {
  align-items: flex-start;
  justify-content: center;
  width: min(58%, calc(100% - min(34%, 148px)));
  max-width: min(58%, calc(100% - min(34%, 148px)));
  padding-left: 0;
  text-align: left;
}

.coach-main-panel .topic-card--wide .topic-card-content h3,
.coach-main-panel .topic-card--wide .topic-card-content .topic-desc {
  text-align: left;
}

.coach-main-panel .topic-card--wide .topic-card-content .topic-icon {
  margin: 0 0 4px;
}

.coach-main-panel--profiling .topic-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.app-content-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 44px 0 4px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.app-content-footer a {
  color: rgba(255, 255, 255, 0.48);
  text-decoration: none;
}

.app-content-footer a:hover {
  color: rgba(255, 255, 255, 0.76);
}

.app-content-footer span {
  color: rgba(255, 255, 255, 0.34);
}

.profiling-entry-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 34%);
  align-items: stretch;
  gap: 18px;
  width: 100%;
  min-height: 260px;
  margin: 0;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(100, 210, 255, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 76% 28%, rgba(100, 210, 255, 0.12), transparent 28%),
    linear-gradient(135deg, rgba(100, 210, 255, 0.10), rgba(255, 255, 255, 0.035) 42%, rgba(0, 0, 0, 0.10));
  color: var(--nb-text-primary);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 70px rgba(0, 0, 0, 0.24);
}

.profiling-entry-card:hover {
  border-color: rgba(100, 210, 255, 0.34);
  transform: translateY(-1px);
}

.home-profiling-entry-card {
  margin-top: 14px;
  min-height: 230px;
}

/* ── Bandeau promo : pousser vers l'abonnement Pro ── */
.coach-upsell-promo {
  position: relative;
  display: block;
  margin-bottom: 20px;
  padding: 16px 22px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--promo-accent, #ff9f0a) 16%, transparent), transparent 46%),
    #0a0a0c;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32);
}

.coach-upsell-promo-copy {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 190px);
}

.coach-upsell-promo-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.coach-upsell-promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--promo-accent, #ff9f0a);
  color: #0a0a0c;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.coach-upsell-promo-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.coach-upsell-promo-desc {
  margin: 5px 0 0;
  max-width: 470px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.65);
}

.coach-upsell-promo-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.coach-upsell-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: var(--promo-accent, #ff9f0a);
  color: #0a0a0c;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--promo-accent, #ff9f0a) 32%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.coach-upsell-promo-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--promo-accent, #ff9f0a) 42%, transparent);
}

.coach-upsell-promo-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

.coach-upsell-promo-media {
  position: absolute;
  top: 0;
  right: 14px;
  bottom: 0;
  width: min(34%, 200px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;
  pointer-events: none;
}

.coach-upsell-promo-media img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 168px;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.18));
}

@media (max-width: 640px) {
  .coach-upsell-promo-copy {
    max-width: 100%;
  }
  .coach-upsell-promo-media {
    display: none;
  }
}

.coach-personalized-entry-card {
  grid-column: span 2;
  display: block;
  position: relative;
  min-height: 148px;
  padding: 18px;
  overflow: hidden;
}

.coach-personalized-entry-card .profiling-entry-copy {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 210px);
  height: 100%;
}

.coach-personalized-entry-card h2 {
  font-size: 20px;
}

.coach-personalized-entry-card .profiling-entry-kicker {
  margin-bottom: 8px;
}

.coach-personalized-entry-card p {
  margin-top: 6px;
  font-size: 12.5px;
}

.coach-personalized-entry-card .profiling-entry-cta {
  margin-top: 14px;
}

.coach-personalized-entry-card .profiling-entry-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(46%, 240px);
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;
}

.coach-personalized-entry-card .profiling-entry-media img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom right;
  filter: none;
}

.profiling-entry-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  max-width: 420px;
}

.profiling-entry-kicker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(100, 210, 255, 0.10);
  color: #64d2ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.profiling-entry-card h2 {
  margin: 0;
  color: var(--nb-text-primary);
  font-size: 26px;
  line-height: 1.08;
}

.profiling-entry-card p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: 1.5;
}

.profiling-entry-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-top: 20px;
  color: #64d2ff;
  font-size: 14px;
  font-weight: 800;
}

.profiling-entry-media {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  margin: -18px -18px -24px 0;
  overflow: hidden;
}

.profiling-entry-media img {
  width: min(230px, 100%);
  height: auto;
  max-height: 286px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.34));
}

.home-profiling-entry-card .profiling-entry-media img {
  width: min(250px, 100%);
  max-height: 250px;
}

.coach-main-panel .coach-context-row,
.gaming-page-shell .gaming-context-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: flex-start;
  gap: 10px;
  grid-template-columns: none;
  margin-top: 0;
  margin-bottom: 0;
}

.coach-main-panel .coach-context-row .negotiation-glossary,
.coach-main-panel .coach-context-row .trust-notice,
.gaming-page-shell .gaming-context-row .negotiation-glossary {
  position: relative;
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

.coach-main-panel .coach-context-row .negotiation-glossary-label,
.gaming-page-shell .gaming-context-row .negotiation-glossary-label,
.coach-main-panel .coach-context-row .trust-notice-copy strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.82);
  cursor: default;
}

.coach-main-panel .coach-context-row .trust-notice-icon {
  display: none;
}

.coach-main-panel .coach-context-row .trust-notice-copy {
  display: block;
  flex: 0 0 auto;
}

.coach-main-panel .coach-context-row .negotiation-glossary::after,
.gaming-page-shell .gaming-context-row .negotiation-glossary::after,
.coach-main-panel .coach-context-row .trust-notice::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 12px;
}

.coach-main-panel .coach-context-row .negotiation-glossary-terms,
.gaming-page-shell .gaming-context-row .negotiation-glossary-terms,
.coach-main-panel .coach-context-row .trust-notice-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  width: min(520px, calc(100vw - 48px));
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(8, 10, 24, 0.95);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.coach-main-panel .coach-context-row .negotiation-glossary-terms,
.gaming-page-shell .gaming-context-row .negotiation-glossary-terms {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.coach-main-panel .coach-context-row .trust-notice-popover {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(360px, calc(100vw - 48px));
}

.coach-main-panel .coach-context-row .trust-notice-popover span {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.45;
}

.coach-main-panel .coach-context-row .trust-notice-popover a {
  align-self: flex-start;
  font-size: 13px;
}

.coach-main-panel .coach-context-row .negotiation-glossary:hover .negotiation-glossary-terms,
.gaming-page-shell .gaming-context-row .negotiation-glossary:hover .negotiation-glossary-terms,
.coach-main-panel .coach-context-row .negotiation-glossary:focus-within .negotiation-glossary-terms,
.gaming-page-shell .gaming-context-row .negotiation-glossary:focus-within .negotiation-glossary-terms,
.coach-main-panel .coach-context-row .trust-notice:hover .trust-notice-popover,
.coach-main-panel .coach-context-row .trust-notice:focus-within .trust-notice-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.coach-library-action,
.coach-project-item,
.coach-recent-main,
.coach-recent-delete {
  border: none;
  font: inherit;
  cursor: pointer;
}

.coach-library-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 18px 12px 18px;
  color: #fff;
}

.coach-library-top strong {
  font-size: 22px;
  line-height: 1.1;
}

.coach-library-top > span {
  color: rgba(255, 255, 255, 0.62);
}

.coach-library-action {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.coach-library-action:hover,
.coach-library-action.is-active {
  background: rgba(255, 255, 255, 0.105);
  color: #fff;
}

.coach-library-action--primary {
  background: rgba(255, 255, 255, 0.105);
  color: #fff;
  font-weight: 600;
}

.coach-library-action--quiet {
  font-weight: 500;
}

.coach-library-search {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.86);
  background: transparent;
}

.coach-library-search:focus-within,
.coach-library-search:hover {
  background: rgba(255, 255, 255, 0.08);
}

.coach-library-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 16px;
}

.coach-library-search input::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.coach-library-search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.coach-library-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 18px;
}

.coach-library-section--recents {
  flex: 1;
  min-height: 0;
}

.coach-library-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 20px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.coach-library-add,
.coach-project-menu-button,
.coach-project-menu-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.58);
  background: transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.coach-library-add {
  width: 26px;
  height: 26px;
}

.coach-library-add:hover,
.coach-project-menu-button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.coach-library-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  letter-spacing: 0;
}

.coach-project-list,
.coach-recent-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.coach-project-tree {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.coach-project-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  border-radius: 10px;
  outline: 1px solid transparent;
  outline-offset: -1px;
  transition: background 0.18s ease, outline-color 0.18s ease, box-shadow 0.18s ease;
}

.coach-project-row:hover,
.coach-project-row.is-active,
.coach-project-item.is-active {
  background: rgba(124, 140, 255, 0.12);
}

.coach-project-row.is-active .coach-project-item,
.coach-project-item.is-active {
  color: #fff;
}

.coach-project-row.is-drop-target {
  background: rgba(48, 209, 88, 0.12);
  outline-color: rgba(48, 209, 88, 0.48);
  box-shadow: inset 0 0 0 1px rgba(48, 209, 88, 0.12), 0 10px 28px rgba(48, 209, 88, 0.12);
}

.coach-project-row.is-drop-target .coach-project-item {
  color: #fff;
}

.coach-project-row.is-drop-target .coach-project-item small {
  color: #30d158;
}

.coach-project-menu-wrap {
  position: relative;
  display: inline-flex;
}

.coach-project-menu-button {
  width: 26px;
  height: 26px;
  opacity: 0;
}

.coach-project-row:hover .coach-project-menu-button,
.coach-project-menu-button:focus-visible,
.coach-project-menu-button[aria-expanded="true"] {
  opacity: 1;
}

.coach-project-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  min-width: 142px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(18, 19, 29, 0.98);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
}

.coach-project-menu-action {
  justify-content: flex-start;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  font-weight: 700;
}

.coach-project-menu-action:hover,
.coach-project-menu-action:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  outline: none;
}

.coach-project-menu-action.is-danger {
  color: rgba(255, 116, 108, 0.95);
}

.coach-project-menu-action.is-danger:hover,
.coach-project-menu-action.is-danger:focus-visible {
  color: #fff;
  background: rgba(255, 69, 58, 0.18);
}

.coach-project-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.88);
  background: transparent;
  text-align: left;
  font-size: 15px;
  transition: background 0.18s ease, color 0.18s ease;
}

.coach-project-item:hover,
.coach-project-item--muted:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.coach-project-item--new {
  color: rgba(255, 255, 255, 0.56);
}

.coach-project-item .coach-project-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-project-item .mi {
  flex: 0 0 auto;
}

.coach-project-item small {
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
  font-weight: 700;
}

.coach-project-files {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 1px 0 5px 26px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.coach-project-empty {
  padding: 8px 12px;
  color: rgba(255, 255, 255, 0.44);
  font-size: 12px;
  font-weight: 600;
}

.coach-recent-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 4px;
  align-items: center;
  border-radius: 10px;
  cursor: grab;
  transition: background 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.coach-recent-item:hover {
  background: rgba(255, 255, 255, 0.065);
}

.coach-recent-item.is-dragging {
  opacity: 0.54;
  transform: scale(0.99);
}

.coach-recent-item.is-dragging .coach-recent-main {
  cursor: grabbing;
}

.coach-recent-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 38px;
  padding: 4px 6px 4px 18px;
  color: rgba(255, 255, 255, 0.86);
  background: transparent;
  text-align: left;
}

.coach-project-file {
  border-radius: 9px;
}

.coach-project-file .coach-recent-main {
  min-height: 34px;
  padding-left: 8px;
}

.coach-project-file .coach-recent-title {
  font-size: 13px;
}

.coach-project-file .coach-recent-delete {
  width: 26px;
  height: 26px;
}

.coach-recent-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.coach-recent-title,
.coach-recent-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-recent-title {
  color: var(--nb-text-primary);
  font-size: 15px;
  font-weight: 500;
}

.coach-recent-meta {
  display: none;
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
}

.coach-recent-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.54);
  background: transparent;
  opacity: 0;
  transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.coach-recent-item:hover .coach-recent-delete,
.coach-recent-delete:focus-visible {
  opacity: 1;
}

.coach-recent-delete:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.coach-library-empty,
.coach-library-note {
  padding: 8px 20px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 13px;
  line-height: 1.45;
}

.coach-library-note {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}

@media (max-width: 1100px) {
  .coach-workspace {
    grid-template-columns: minmax(244px, 0.36fr) minmax(0, 1fr);
    gap: 0;
  }
}

@media (max-width: 860px) {
  .coach-workspace {
    grid-template-columns: 1fr;
  }

  .coach-main-panel > .chat-container {
    height: auto;
    min-height: calc(100vh - 166px);
  }

  .coach-main-panel {
    padding: 22px 16px 36px;
  }

  .coach-library {
    position: relative;
    top: auto;
    min-height: 0;
    max-height: none;
    padding: 18px 0 18px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }

  .coach-project-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coach-recent-list {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 2px;
  }
}

@media (max-width: 520px) {
  .coach-project-list {
    grid-template-columns: 1fr;
  }

  .coach-library {
    padding-bottom: 16px;
  }
}

@media (max-width: 760px) {
  .trust-notice,
  .negotiation-glossary {
    align-items: flex-start;
    flex-direction: column;
  }

  .trust-notice a {
    align-self: flex-start;
  }

  .negotiation-glossary-terms,
  .coach-context-row {
    grid-template-columns: 1fr;
  }
}

/* Voice pill button */
.chat-voice-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px 0 9px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  color: var(--nb-text);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.chat-voice-pill:hover {
  background: rgba(0, 0, 0, 0.14);
}

.chat-voice-pill:disabled {
  cursor: default;
  opacity: 0.45;
}

.chat-voice-pill:disabled:hover {
  background: rgba(0, 0, 0, 0.08);
}

.chat-voice-pill--active {
  background: rgba(255, 59, 48, 0.12) !important;
  color: #ff3b30 !important;
}

/* gradient theme */
.app-layout.has-gradient-bg .chat-voice-pill {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}

.app-layout.has-gradient-bg .chat-voice-pill:hover {
  background: rgba(255, 255, 255, 0.20);
  color: #ffffff;
}

.app-layout.has-gradient-bg .chat-voice-pill:disabled:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}

.app-layout.has-gradient-bg .chat-voice-pill--active {
  background: rgba(255, 69, 58, 0.20) !important;
  color: #ff453a !important;
}

.chat-send-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--nb-text);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
  flex-shrink: 0;
}

.chat-send-btn:hover:not(:disabled) {
  transform: scale(1.06);
  opacity: 0.85;
}

.chat-send-btn:disabled {
  background: var(--nb-border);
  cursor: not-allowed;
}

/* ── Input bar – gradient theme overrides ── */
.app-layout.has-gradient-bg .chat-input-area {
  margin: 0 0 12px;
  background: rgba(255, 255, 255, 0.105) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: none !important;
}

.app-layout.has-gradient-bg .chat-textarea {
  color: #ffffff;
}

.app-layout.has-gradient-bg .chat-textarea::placeholder {
  color: rgba(255, 255, 255, 0.32);
}

.app-layout.has-gradient-bg .chat-action-btn {
  color: rgba(255, 255, 255, 0.55);
}

.app-layout.has-gradient-bg .chat-action-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.90);
}

.app-layout.has-gradient-bg .chat-action-active-red {
  color: #ff453a !important;
  background: rgba(255, 69, 58, 0.15) !important;
}

.app-layout.has-gradient-bg .chat-send-btn {
  background: #ffffff;
  color: #000000;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

.app-layout.has-gradient-bg .chat-send-btn:hover:not(:disabled) {
  transform: scale(1.07);
  opacity: 0.92;
}

.app-layout.has-gradient-bg .chat-send-btn:disabled {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}

/* ── Legacy selectors kept for old .chat-input / .send-btn ── */
.app-layout.has-gradient-bg .chat-input {
  border-radius: 24px;
}

.app-layout.has-gradient-bg .chat-input-area input,
.app-layout.has-gradient-bg .chat-input-area textarea {
  color: #ffffff;
  font-size: 15px;
}

.app-layout.has-gradient-bg .chat-input-area input::placeholder,
.app-layout.has-gradient-bg .chat-input-area textarea::placeholder {
  color: rgba(255, 255, 255, 0.30);
}

.app-layout.has-gradient-bg .send-btn {
  background: linear-gradient(135deg, #8e8e93, #7c5cfc) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(142,142,147,0.35) !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}

.app-layout.has-gradient-bg .send-btn:hover:not(:disabled) {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 24px rgba(142,142,147,0.50) !important;
}

/* Suggestions */
.app-layout.has-gradient-bg .suggestion-chip {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.68);
  border-radius: 20px;
  font-size: 13px;
  backdrop-filter: blur(12px);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.app-layout.has-gradient-bg .suggestion-chip:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* ── Gaming ────────────────────────────────────────────────────── */
.app-layout.has-gradient-bg .gaming-section-heading h2,
.app-layout.has-gradient-bg .gaming-loop-title {
  color: rgba(255, 255, 255, 0.96);
}

.app-layout.has-gradient-bg .gaming-section-heading p,
.app-layout.has-gradient-bg .gaming-hero-stat-meta,
.app-layout.has-gradient-bg .gaming-loop-card p {
  color: rgba(255, 255, 255, 0.64);
}

.app-layout.has-gradient-bg .gaming-section-kicker,
.app-layout.has-gradient-bg .gaming-hero-stat-label {
  color: rgba(255, 255, 255, 0.46);
}

.app-layout.has-gradient-bg .gaming-hero-stat,
.app-layout.has-gradient-bg .gaming-loop-card {
  border-color: rgba(255, 255, 255, 0.1);
}

.app-layout.has-gradient-bg .gaming-stat-value {
  color: #ffffff;
  font-size: 32px;
  font-weight: 800;
}

/* ── Gaming mode cards ── LGP handles glass ──────────────────── */
.app-layout.has-gradient-bg .gaming-mode-card {
  color: rgba(255,255,255,0.9);
}

.app-layout.has-gradient-bg .gaming-mode-card:hover {
  transform: translateY(-4px);
  filter: brightness(1.10);
}

/* ── Scenario cards ──────────────────────────────────────────── */
.app-layout.has-gradient-bg .scenario-card {
  color: rgba(255,255,255,0.88);
}

.app-layout.has-gradient-bg .scenario-card:hover {
  transform: translateY(-4px);
  filter: brightness(1.08);
}

.app-layout.has-gradient-bg .scenario-title {
  color: rgba(255,255,255,0.92);
}

.app-layout.has-gradient-bg .scenario-meta {
  color: rgba(255,255,255,0.42);
}

.app-layout.has-gradient-bg .scenario-arrow {
  color: rgba(255,255,255,0.35);
}

/* ── Arena page (dark theme) ──────────────────────────────────── */
.app-layout.has-gradient-bg .arena-section-title {
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 14px;
}

.app-layout.has-gradient-bg .arena-opponent-card {
  color: rgba(255,255,255,0.80);
}

.app-layout.has-gradient-bg .arena-opponent-card.selected {
  background: rgba(142,142,147,0.15) !important;
  border-color: rgba(142,142,147,0.45) !important;
  color: #8e8e93 !important;
  box-shadow: 0 0 24px rgba(142,142,147,0.18) !important;
}

.app-layout.has-gradient-bg .arena-opponent-label {
  color: rgba(255,255,255,0.75);
}

.app-layout.has-gradient-bg .arena-select {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.88);
  border-radius: 12px;
}

.app-layout.has-gradient-bg .arena-select option {
  background: #0a0820;
  color: #fff;
}

/* Quick scenario chips */
.app-layout.has-gradient-bg .quick-scenario-chip {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.80) !important;
  backdrop-filter: blur(12px);
  border-radius: 16px !important;
  transition: background 0.18s, transform 0.18s;
}

.app-layout.has-gradient-bg .quick-scenario-chip:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  transform: translateY(-2px);
  color: #fff !important;
}

/* Live coaching page */
.app-layout.has-gradient-bg .live-card,
.app-layout.has-gradient-bg .live-panel {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 20px !important;
  color: rgba(255,255,255,0.9) !important;
}

/* ── Objective cards (Live Coaching) ── LGP handles glass ────── */
.app-layout.has-gradient-bg .objective-card {
  color: rgba(255,255,255,0.88);
  border: none; /* LGP provides border */
  background: transparent; /* LGP provides background */
}

.app-layout.has-gradient-bg .objective-card:hover {
  transform: translateY(-3px);
  filter: brightness(1.10);
  background: transparent;
}

.app-layout.has-gradient-bg .objective-label {
  color: rgba(255,255,255,0.92);
  font-weight: 600;
}

.app-layout.has-gradient-bg .objective-desc {
  color: rgba(255,255,255,0.42);
}

/* ── Feed cards (dark theme) ─────────────────────────────────── */
.app-layout.has-gradient-bg .feed-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.88);
}

.app-layout.has-gradient-bg .feed-card--age-0 {
  background: rgba(142,142,147,0.12);
  border-left: 3px solid #8e8e93;
  box-shadow: 0 4px 20px rgba(142,142,147,0.18);
}

.app-layout.has-gradient-bg .feed-card--age-1 { background: rgba(255,255,255,0.065); opacity: 0.88; }
.app-layout.has-gradient-bg .feed-card--age-2 { background: rgba(255,255,255,0.045); opacity: 0.68; }
.app-layout.has-gradient-bg .feed-card--age-3 { background: rgba(255,255,255,0.028); opacity: 0.48; }
.app-layout.has-gradient-bg .feed-card--age-4 { background: rgba(255,255,255,0.018); opacity: 0.30; }

.app-layout.has-gradient-bg .feed-card--streaming {
  background: rgba(142,142,147,0.10);
  border-left: 3px solid #8e8e93;
  box-shadow: 0 0 0 1px rgba(142,142,147,0.22);
}

.app-layout.has-gradient-bg .feed-card__label {
  color: rgba(255,255,255,0.45);
}

.app-layout.has-gradient-bg .feed-card__phrase {
  color: rgba(255,255,255,0.94);
}

.app-layout.has-gradient-bg .empty-feed-placeholder {
  color: rgba(255,255,255,0.40);
}

.app-layout.has-gradient-bg .empty-feed-placeholder p {
  color: rgba(255,255,255,0.55);
}

/* Live status + controls */
.app-layout.has-gradient-bg .live-status-badge {
  background: rgba(48,209,88,0.12);
  border: 1px solid rgba(48,209,88,0.25);
  color: #30d158;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.app-layout.has-gradient-bg .mic-button {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}

.app-layout.has-gradient-bg .mic-button:hover {
  background: rgba(255,255,255,0.28);
  box-shadow: 0 16px 48px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.35);
}

.app-layout.has-gradient-bg .custom-objective-input input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  border-radius: 14px;
}

.app-layout.has-gradient-bg .custom-objective-input input::placeholder {
  color: rgba(255,255,255,0.32);
}

.app-layout.has-gradient-bg .live-briefing-field label {
  color: rgba(255,255,255,0.88);
}

.app-layout.has-gradient-bg .live-language-chip {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.88);
}

.app-layout.has-gradient-bg .live-language-chip:hover {
  border-color: rgba(255,255,255,0.24);
}

.app-layout.has-gradient-bg .live-language-chip.active {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.28);
  color: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}

.app-layout.has-gradient-bg .live-briefing-textarea {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.app-layout.has-gradient-bg .live-briefing-textarea:focus {
  border-color: rgba(255,255,255,0.26);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}

.app-layout.has-gradient-bg .live-briefing-textarea::placeholder {
  color: rgba(255,255,255,0.34);
}

.app-layout.has-gradient-bg .live-briefing-hint {
  color: rgba(255,255,255,0.62);
}

.app-layout.has-gradient-bg .objective-badge {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  color: rgba(255,255,255,0.85);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-layout.has-gradient-bg .live-session-context-label {
  color: rgba(255,255,255,0.52);
}

.app-layout.has-gradient-bg .live-session-context-value {
  color: rgba(255,255,255,0.92);
}

.app-layout.has-gradient-bg .live-prep-form-panel,
.app-layout.has-gradient-bg .live-launch-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.038)),
    rgba(8, 9, 18, 0.70);
  border-color: rgba(255,255,255,0.12);
}

.app-layout.has-gradient-bg .live-prep-shell .live-language-chip {
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.78);
}

.app-layout.has-gradient-bg .live-prep-shell .live-language-chip:hover,
.app-layout.has-gradient-bg .live-prep-shell .live-language-chip:focus-visible {
  background: rgba(20,184,166,0.10);
  border-color: rgba(20,184,166,0.42);
  color: #fff;
}

.app-layout.has-gradient-bg .live-prep-shell .live-language-chip.active {
  background: rgba(20,184,166,0.16);
  border-color: rgba(20,184,166,0.64);
  color: #fff;
  box-shadow: 0 14px 32px rgba(20,184,166,0.12), inset 0 1px 0 rgba(255,255,255,0.08);
}

.app-layout.has-gradient-bg .live-prep-shell .live-briefing-textarea {
  background: rgba(2,6,18,0.38);
  border-color: rgba(255,255,255,0.12);
}

.app-layout.has-gradient-bg .live-prep-shell .live-briefing-textarea:focus {
  border-color: rgba(20,184,166,0.55);
  box-shadow: 0 0 0 4px rgba(20,184,166,0.10), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Scrollbars */
.app-layout.has-gradient-bg ::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.03);
}

.app-layout.has-gradient-bg ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
}

.app-layout.has-gradient-bg ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.22);
}

/* ==========================================
   Landing Page (LoginPage refonte)
   ========================================== */

/* Root scroll container */
.lp-root {
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 2;
  color: #fff;
  font-family: var(--font);

  /* Background :
     - Hero : transparent → mesh gradient visible en plein
     - Sous le fold : dégradé sombre qui s'intensifie progressivement.
       Max ~0.68 d'opacité pour garder de la lisibilité ET laisser
       le canvas mesh transparaître à travers les panneaux glass. */
  background:
    /* accents couleur par section */
    radial-gradient(ellipse 80% 40% at 15% 75%,  rgba(80, 30, 200, 0.20) 0%, transparent 100%),
    radial-gradient(ellipse 70% 35% at 85% 95%,  rgba(30, 90, 210, 0.16) 0%, transparent 100%),
    radial-gradient(ellipse 60% 30% at 50% 115%, rgba(140, 40, 200, 0.14) 0%, transparent 100%),
    radial-gradient(ellipse 90% 25% at 30% 140%, rgba(60, 20, 160, 0.18) 0%, transparent 100%),
    /* base : transparent en hero, sombre progressivement sous le fold */
    linear-gradient(
      to bottom,
      transparent            0%,
      transparent           32%,
      rgba(5, 2, 18, 0.40)  52%,
      rgba(7, 4, 22, 0.60)  72%,
      rgba(6, 3, 20, 0.68) 100%
    );
}

/* ── Nav ── */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 48px;
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.12);
}

.lp-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #fff;
}

.lp-nav-logo-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

/* ── Shared section layout ── */
.lp-section-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  text-align: center;
  margin-bottom: 12px;
}

.lp-section-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.5px;
  text-align: center;
  color: #fff;
  margin-bottom: 56px;
}

/* ── Hero ── */
.lp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 100px 24px 80px;
  gap: 0;
}

.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 12px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  margin-bottom: 32px;
  letter-spacing: 0.01em;
}

.lp-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #30d158;
  box-shadow: 0 0 6px #30d158;
  animation: lp-pulse 2s ease-in-out infinite;
}

@keyframes lp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}

.lp-hero-title {
  font-size: clamp(44px, 7vw, 82px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -2px;
  color: #fff;
  margin-bottom: 24px;
}

.lp-hero-gradient {
  background: linear-gradient(135deg, #a78bfa 0%, #60a5fa 50%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lp-hero-sub {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 400;
  color: rgba(255,255,255,0.65);
  max-width: 600px;
  line-height: 1.6;
  margin-bottom: 44px;
}

.lp-hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 60px;
}

.lp-hero-cta-note {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

.lp-hero-stats {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 20px 40px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  backdrop-filter: blur(16px);
}

.lp-hstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.lp-hstat strong {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
}

.lp-hstat span {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  font-weight: 400;
  white-space: nowrap;
}

.lp-hstat-sep {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.15);
}

/* ── Diff banner ── */
.lp-diff-banner {
  padding: 28px 24px 0;
}

.lp-diff-row {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(18px);
}

.lp-diff-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.62);
}

.lp-diff-item strong {
  color: rgba(255,255,255,0.92);
}

.lp-diff-sep {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.16);
}

/* ── Pain points ── */
.lp-pain {
  --mi-scale: 1;
  padding: 72px 48px 24px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.lp-pain-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.60);
  max-width: 700px;
  margin: 0 auto 34px;
}

.lp-pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.lp-pain-card {
  text-align: left;
}

.lp-pain-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-bottom: 12px;
}

.lp-pain-card h3 {
  color: rgba(255,255,255,0.94);
  font-size: 17px;
  margin-bottom: 8px;
}

.lp-pain-card p {
  color: rgba(255,255,255,0.62);
  font-size: 14px;
  line-height: 1.55;
}

.lp-pain-before,
.lp-pain-after {
  font-size: 12px;
  margin-top: 10px;
  font-weight: 600;
}

.lp-pain-before {
  color: rgba(255,120,120,0.90);
}

.lp-pain-after {
  color: rgba(120,255,170,0.90);
  margin-top: 4px;
}

/* ── Features ── */
.lp-features {
  padding: 96px 48px;
  max-width: 1200px;
  margin: 0 auto;
}

.lp-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.lp-feature-card {
  transition: transform 0.25s ease;
}

.lp-feature-card:hover {
  transform: translateY(-5px);
}

/* accent colours now handled via box-shadow in JSX style prop */

.lp-feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1px solid rgba(255,255,255,0.08);
}

.lp-feature-card h3 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  letter-spacing: -0.3px;
}

.lp-feature-card p {
  font-size: 15px;
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  margin-bottom: 24px;
}

.lp-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.lp-feature-list li {
  font-size: 13px;
  color: rgba(255,255,255,0.70);
  font-weight: 500;
}

/* ── Social proof ── */
.lp-proof {
  padding: 40px 48px 96px;
  max-width: 960px;
  margin: 0 auto;
}

.lp-proof-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}

.lp-proof-stat {
  text-align: center;
  padding: 20px 12px;
}

.lp-proof-stat strong {
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.6px;
}

.lp-proof-stat span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255,255,255,0.52);
}

.lp-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.lp-testi-card {
  padding: 22px 20px;
}

.lp-testi-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 10px;
}

.lp-testi-card p {
  color: rgba(255,255,255,0.72);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
  font-style: italic;
}

.lp-testi-card span {
  color: rgba(255,255,255,0.44);
  font-size: 12px;
}

.lp-proof-inner {
  display: flex;
  align-items: center;
  gap: 40px;
}

.lp-proof-book {
  width: 130px;
  flex-shrink: 0;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
  transform: rotate(-3deg);
  transition: transform 0.3s ease;
}

.lp-proof-book:hover {
  transform: rotate(0deg) scale(1.04);
}

.lp-proof-content {
  flex: 1;
}

.lp-proof-quote {
  font-size: clamp(16px, 1.8vw, 21px);
  font-style: italic;
  color: rgba(255,255,255,0.85);
  line-height: 1.65;
  margin-bottom: 28px;
  position: relative;
}

.lp-proof-quote::before {
  content: '"';
  font-size: 72px;
  color: rgba(255,255,255,0.10);
  font-style: normal;
  font-weight: 700;
  line-height: 0.6;
  display: block;
  margin-bottom: 16px;
}

.lp-proof-author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lp-proof-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #60a5fa);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.lp-proof-author strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}

.lp-proof-author span {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}

.lp-proof-book-title {
  font-size: 12px !important;
  color: rgba(167,139,250,0.75) !important;
  font-style: italic;
  margin-top: 2px;
}

/* ── Pricing ── */
.lp-pricing {
  padding: 96px 48px;
  max-width: 1200px;
  margin: 0 auto;
}

.lp-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

/* ── B2B ── */
.lp-b2b {
  padding: 20px 48px 96px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.lp-b2b-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.lp-b2b-item {
  padding: 18px 18px;
  text-align: left;
}

.lp-b2b-item strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.92);
  font-size: 15px;
  margin-bottom: 4px;
}

.lp-b2b-item span {
  color: rgba(255,255,255,0.58);
  font-size: 13px;
  line-height: 1.55;
}

/* ── Quiz ── */
.lp-quiz {
  padding: 0 24px 96px;
}

.lp-quiz-box {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 34px;
  text-align: center;
}

.lp-quiz-box h2 {
  color: #fff;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.7px;
}

.lp-quiz-box > p {
  color: rgba(255,255,255,0.58);
  margin: 8px 0 22px;
}

.lp-quiz-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}

.lp-quiz-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  transition: all 0.2s ease;
}

.lp-quiz-dot.active {
  width: 30px;
  background: rgba(167,139,250,0.95);
}

.lp-quiz-dot.done {
  background: rgba(48,209,88,0.92);
}

.lp-quiz-box h3 {
  color: rgba(255,255,255,0.92);
  font-size: 22px;
  margin-bottom: 18px;
}

.lp-quiz-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.lp-quiz-opt {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  text-align: left;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: all 0.18s ease;
}

.lp-quiz-opt strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.9);
  font-size: 14px;
}

.lp-quiz-opt span {
  color: rgba(255,255,255,0.52);
  font-size: 12px;
}

.lp-quiz-opt:hover,
.lp-quiz-opt.selected {
  border-color: rgba(167,139,250,0.8);
  background: rgba(167,139,250,0.11);
}

.lp-quiz-result {
  text-align: left;
}

.lp-quiz-result h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.lp-quiz-result p {
  color: rgba(255,255,255,0.62);
  text-align: center;
  margin-bottom: 16px;
}

.lp-quiz-reco {
  border: 1px solid rgba(167,139,250,0.34);
  background: rgba(167,139,250,0.11);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lp-quiz-reco strong {
  color: rgba(255,255,255,0.94);
  font-size: 15px;
}

.lp-quiz-reco span {
  color: rgba(255,255,255,0.64);
  font-size: 13px;
}

/* ── FAQ ── */
.lp-faq {
  padding: 0 24px 96px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.lp-faq-grid {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-faq-item {
  padding: 0;
  overflow: hidden;
}

.lp-faq-q {
  width: 100%;
  border: none;
  background: transparent;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255,255,255,0.9);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}

.lp-faq-a {
  padding: 0 20px 18px;
  text-align: left;
  color: rgba(255,255,255,0.62);
  font-size: 14px;
  line-height: 1.65;
  animation: lpzFaqAnswerIn 0.34s cubic-bezier(.22, 1, .36, 1);
}

@keyframes lpzFaqAnswerIn {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.lp-plan {
  position: relative;
}

.lp-plan--featured {
  transform: scale(1.04);
  overflow: visible !important;
}

.lp-plan.lpz-reveal.lp-plan--featured {
  transform: translate3d(0, 28px, 0) scale(1.01);
}

.lp-plan.lpz-reveal.is-visible.lp-plan--featured {
  transform: scale(1.04);
}

.lp-plan-badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  background: linear-gradient(135deg, #a78bfa, #60a5fa);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 100px;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.lp-plan-name {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  letter-spacing: -0.2px;
}

.lp-plan-price {
  margin-bottom: 12px;
}

.lp-plan-amount {
  font-size: 44px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -1px;
}

.lp-plan-period {
  font-size: 15px;
  color: rgba(255,255,255,0.45);
  margin-left: 4px;
}

.lp-plan-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.50);
  margin-bottom: 28px;
  line-height: 1.5;
}

.lp-plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 32px;
}

.lp-plan-features li {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-check {
  color: #30d158;
  font-weight: 700;
  font-size: 14px;
}

.lp-cross {
  color: rgba(255,255,255,0.2);
  font-weight: 400;
  font-size: 14px;
}

.lp-plan-btn {
  width: 100%;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: all 0.18s ease;
}

.lp-plan-btn--ghost {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.80);
}

.lp-plan-btn--ghost:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

/* ── Footer CTA ── */
.lp-footer-cta {
  padding: 96px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.lp-footer-cta h2 {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -1px;
}

.lp-footer-cta p {
  font-size: 17px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
}

/* ── Footer ── */
.lp-footer {
  padding: 28px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 13px;
  color: rgba(255,255,255,0.30);
}

.lp-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  flex: 1 1 420px;
  flex-wrap: wrap;
}

.lp-footer-link {
  color: rgba(255, 255, 255, 0.46);
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.lp-footer-link:hover {
  color: #fff;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .lp-nav { padding: 16px 20px; }
  .lp-hero { padding: 72px 20px 60px; }

  .lp-hero-stats {
    gap: 18px;
    padding: 16px 24px;
  }

  .lp-features,
  .lp-pricing,
  .lp-pain,
  .lp-b2b { padding: 64px 20px; }

  .lp-feature-grid,
  .lp-pricing-grid,
  .lp-pain-grid,
  .lp-proof-stats,
  .lp-testimonials,
  .lp-b2b-grid,
  .lp-quiz-options {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .lp-plan--featured,
  .lp-plan.lpz-reveal.is-visible.lp-plan--featured { transform: scale(1); }

  .lp-proof { padding: 20px 20px 64px; }
  .lp-proof-card { padding: 32px 24px; }

  .lp-diff-sep {
    width: 32px;
    height: 1px;
  }

  .lp-footer {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding: 24px 20px;
  }

  .lp-footer-cta { padding: 64px 20px; }

  .legal-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .legal-page-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .legal-page-grid {
    grid-template-columns: 1fr;
  }

  .legal-nav-links {
    gap: 18px;
  }

  .legal-preview {
    height: 400px;
  }

  .legal-article-grid,
  .legal-article-bottom {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   Icon Harmonization (Gaming Style)
   ========================================== */

.home-feature-icon,
.topic-icon,
.conversation-row .conv-icon,
.objective-icon,
.tip-icon,
.lp-feature-icon,
.app-layout.has-gradient-bg .home-feature-icon,
.app-layout.has-gradient-bg .topic-icon,
.app-layout.has-gradient-bg .conv-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.home-feature-icon {
  margin-bottom: var(--sp-md);
}

.lp-feature-icon {
  margin-bottom: 20px;
}

.topic-icon {
  margin-bottom: 2px;
}

.conversation-row .conv-icon {
  min-width: 28px;
}

.objective-icon {
  font-size: 30px;
  line-height: 1;
}

.tip-icon {
  margin-top: 2px;
}

/* ==========================================
   Onboarding Modal Pro
   ========================================== */

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85); /* Darker backdrop to make modal pop */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.onboarding-modal-pro {
  background: rgba(20, 20, 22, 0.85); /* Deep dark theme */
  border: 1px solid rgba(255, 255, 255, 0.08); /* Sophisticated subtle border */
  border-radius: 32px;
  overflow: hidden;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05); /* Outer depth and inner highlight */
  animation: onboarding-reveal 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

@keyframes onboarding-reveal {
  0% { opacity: 0; transform: translateY(30px) scale(0.95); filter: blur(10px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.onboarding-modal-hero {
  position: relative;
  height: 240px; /* Generous area for the character */
  width: 100%;
  background: radial-gradient(circle at top center, rgba(255,255,255,0.05), transparent 70%); /* Subtle glow behind */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.onboarding-modal-img {
  position: absolute;
  top: 10px;
  height: 260px; /* Character breaks top boundaries slightly */
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));
  z-index: 1;
}

.onboarding-modal-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(20, 20, 22, 0.85) 85%, rgba(20, 20, 22, 1) 100%);
  z-index: 2;
}

.onboarding-modal-icon-badge {
  position: absolute;
  bottom: -15px; /* Floats over the transition line */
  z-index: 3;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.onboarding-modal-content {
  padding: 36px 36px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 4;
}

.onboarding-modal-text {
  margin-bottom: 24px;
}

.onboarding-modal-text h2 {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
}

.onboarding-modal-text p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  margin: 0;
}

.onboarding-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 32px;
}

.onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.onboarding-dot.active {
  width: 24px;
  background: #fff; /* fallback */
}

.onboarding-actions {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.onboarding-btn-back {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: 500;
  padding: 12px 18px !important;
  transition: color 0.2s;
}

.onboarding-btn-back:hover {
  color: rgba(255, 255, 255, 0.8) !important;
  background: rgba(255,255,255,0.05) !important;
}

.onboarding-btn-next {
  flex: 1;
  border: none;
  border-radius: 16px;
  padding: 16px 20px !important;
  font-size: 16px;
  font-weight: 600;
  color: #fff !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.onboarding-btn-next:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.onboarding-goals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  text-align: left;
  margin: 4px 0;
}

.onboarding-goal-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--nb-surface);
  border: 1.5px solid var(--nb-border);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.18s;
  text-align: left;
  position: relative;
}

.onboarding-goal-card:hover {
  border-color: var(--nb-text-secondary);
  background: var(--nb-surface-hover);
}

.onboarding-goal-card.selected {
  border-color: var(--nb-text);
  background: var(--nb-surface-hover);
}

.onboarding-goal-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

.onboarding-goal-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--nb-text);
}

.onboarding-goal-desc {
  font-size: 11px;
  color: var(--nb-text-secondary);
  margin-top: 2px;
}

.onboarding-goal-check {
  position: absolute;
  top: 8px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.onboarding-recommendation {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--nb-surface);
  border: 2px solid;
  border-radius: 18px;
  width: 100%;
  text-align: left;
  margin: 4px 0;
}

.onboarding-rec-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.onboarding-rec-title {
  font-size: 17px;
  font-weight: 700;
}

.onboarding-rec-desc {
  font-size: 13px;
  color: var(--nb-text-secondary);
  margin-top: 4px;
}

.onboarding-xp-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: var(--nb-accent-bg);
  border-radius: 12px;
  font-size: 13px;
  color: var(--nb-text-secondary);
  text-align: left;
  width: 100%;
  margin: 4px 0;
}

.onboarding-skip {
  background: none;
  border: none;
  color: var(--nb-text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 8px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.onboarding-skip:hover {
  color: var(--nb-text-secondary);
}

@media (max-width: 540px) {
  .onboarding-modal {
    padding: 28px 20px;
    border-radius: 22px;
  }
  .onboarding-goals {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   Search Bar (sessions Coach)
   ========================================== */

.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 220px;
  transition: border-color 0.2s;
}

.search-bar:focus-within {
  border-color: var(--nb-text-secondary);
}

.search-bar-input {
  background: none;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--nb-text);
  flex: 1;
  min-width: 0;
}

.search-bar-input::placeholder {
  color: var(--nb-text-muted);
}

/* ==========================================
   Live Coaching — "Comment ça marche" banner
   ========================================== */

.live-how-it-works {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
  border-radius: 18px;
  padding: 20px 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}

/* ==========================================
   Gaming — XP Info Banner
   ========================================== */

.xp-info-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
  border-radius: 16px;
  padding: 10px 14px;
  margin-bottom: 18px;
  flex-wrap: nowrap;
}

.xp-info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--nb-text-secondary);
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xp-info-sep {
  width: 1px;
  height: 16px;
  background: var(--nb-border);
  flex-shrink: 0;
  align-self: center;
}

@media (max-width: 600px) {
  .xp-info-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 10px 12px;
  }

  .xp-info-item {
    white-space: normal;
    flex: 1 1 180px;
  }

  .xp-info-sep { display: none; }
}

/* ==========================================
   Landing Page — "Pourquoi NegoBrain" Section
   ========================================== */

.lp-why {
  padding: 80px 24px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.lp-why-intro {
  font-size: 16px;
  color: rgba(255,255,255,0.60);
  max-width: 640px;
  margin: 0 auto 48px;
  line-height: 1.65;
}

.lp-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.lp-why-card {
  text-align: left;
}

.lp-why-icon {
  font-size: 32px;
  margin-bottom: 14px;
}

.lp-why-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  margin-bottom: 8px;
}

.lp-why-card p {
  font-size: 14px;
  color: rgba(255,255,255,0.62);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .lp-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .lp-why-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   Landing Page — Zoning Parity (HTML Layout)
   ========================================== */

.lpz-root {
  --mi-scale: 3;
  padding-top: 72px;
  background: #050713;
  isolation: isolate;
}

.lpz-root > :not(.lpz-darkveil-bg):not(.lpz-nav) {
  position: relative;
  z-index: 1;
}

.lpz-root .lg-panel,
.lpz-root .lp-diff-row,
.lpz-root .lp-badge,
.lpz-root .lpz-btn-secondary,
.lpz-root .lpz-mode-tag,
.lpz-root .lpz-step-letter {
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.026)) !important;
  border-color: rgba(255,255,255,0.13) !important;
  backdrop-filter: blur(26px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(145%) !important;
}

.lpz-root .lg-panel {
  box-shadow:
    0 18px 58px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.055) !important;
}

.lpz-root .lp-feature-card {
  box-shadow:
    inset 0 2.5px 0 var(--lpz-card-accent, rgba(255,255,255,0.22)),
    0 18px 58px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.055) !important;
}

.lpz-root .lp-pain-card,
.lpz-root .lp-feature-card,
.lpz-root .lpz-step,
.lpz-root .lp-plan,
.lpz-root .lp-proof-stat,
.lpz-root .lp-faq-item {
  background-color: rgba(255,255,255,0.045) !important;
}

.lpz-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.lpz-root section[id],
.lpz-root main {
  scroll-margin-top: 96px;
}

.lpz-root section:not(.lpz-hero),
.lpz-root .lp-footer-cta,
.lpz-root .lp-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

.lpz-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(8, 8, 14, 0.72);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.lpz-nav-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.lpz-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.lpz-logo-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lpz-cta-logo {
  flex: 0 0 auto;
  border-radius: 7px;
}

.lpz-nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}

.lpz-nav-links a {
  color: rgba(255,255,255,0.58);
  font-size: 14px;
  font-weight: 500;
  transition: color .2s ease;
}

.lpz-nav-links a:hover {
  color: rgba(255,255,255,0.95);
}

.lpz-hero {
  padding: 72px 0 40px;
}

.lpz-section-intro {
  margin-bottom: 18px;
}

.lpz-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 320px 0.9fr;
  gap: 24px;
  align-items: flex-end;
}

.lpz-hero-visual .lpz-mockup {
  animation: lpzHeroFloat 7.5s ease-in-out infinite;
}

@keyframes lpzCharacterFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.lpz-hero-copy .lp-badge {
  margin-bottom: 20px;
}

.lpz-hero-title {
  font-size: clamp(40px, 5.3vw, 64px);
  line-height: 1.08;
  letter-spacing: -1.4px;
  color: #fff;
  margin-bottom: 16px;
}

.lpz-hero-sub {
  color: rgba(255,255,255,0.62);
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 8px;
  max-width: 600px;
}

.lpz-hero-proof {
  color: rgba(255,255,255,0.48);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
}

.lpz-hero-ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.lpz-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.88);
  font-size: 14px;
  font-weight: 600;
  transition: all .2s ease;
}

.lpz-btn-secondary:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.lpz-mockup {
  display: flex;
  flex-direction: column;
  height: clamp(390px, 34vw, 470px);
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

.lpz-mockup-head {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
}

.lpz-mockup-head span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.lpz-mockup-head span:nth-child(1) { background: #ff5f57; }
.lpz-mockup-head span:nth-child(2) { background: #febc2e; }
.lpz-mockup-head span:nth-child(3) { background: #28c840; }

.lpz-mockup-body {
  flex: 1;
  min-height: 0;
  padding: 16px;
}

.lpz-msg {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 12px 14px;
  color: rgba(255,255,255,0.68);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 10px;
}

.lpz-msg-user {
  background: rgba(167,139,250,0.12);
  border-color: rgba(167,139,250,0.24);
}

.lpz-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.lpz-chat-demo .lpz-input-row {
  margin-top: auto;
}

.lpz-input-row > div:first-child,
.lpz-input-placeholder {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.44);
  font-size: 12px;
}

.lpz-chat-demo .lpz-input-row > div:first-child,
.lpz-chat-demo .lpz-input-placeholder {
  background: rgba(10,10,16,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  animation: lpzInputGlow 2.8s ease-in-out infinite;
}

.lpz-input-row button {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lpz-chat-demo .lpz-input-row button {
  box-shadow: 0 14px 34px rgba(112,83,255,0.34);
  animation: lpzSendPulse 2.2s ease-in-out infinite;
}

.lpz-input-row .lpz-input-voice {
  width: auto;
  min-width: 82px;
  height: 38px;
  gap: 6px;
  padding: 0 14px 0 10px;
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.88);
  box-shadow: none;
  animation: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.lpz-input-row .lpz-input-send {
  background: rgba(255,255,255,0.18);
  box-shadow: none;
  animation: none;
}

.lpz-input-row .lpz-input-voice .mi,
.lpz-input-row .lpz-input-send .mi {
  --mi-scale: 1;
  flex: 0 0 auto;
}

.lpz-input-row .lpz-input-voice .mi {
  width: 16px;
  height: 16px;
  font-size: 16px !important;
}

.lpz-input-row .lpz-input-send .mi {
  width: 18px;
  height: 18px;
  font-size: 18px !important;
}

.lpz-chat-demo .lpz-input-row .lpz-input-voice,
.lpz-chat-demo .lpz-input-row .lpz-input-send {
  box-shadow: none;
  animation: none;
}

@keyframes lpzChatBubbleIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.995);
  }
  55% {
    opacity: 0.82;
    transform: translate3d(0, 2px, 0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes lpzHeroFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes lpzInputGlow {
  0%, 100% {
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.42);
  }
  50% {
    border-color: rgba(123,97,255,0.34);
    color: rgba(255,255,255,0.54);
  }
}

@keyframes lpzSendPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

.lpz-section-sub {
  text-align: center;
  color: rgba(255,255,255,0.58);
  max-width: 760px;
  margin: -34px auto 40px;
  font-size: 16px;
}

.lpz-mode-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.75);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lpz-method {
  padding: 96px 0;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(10,10,26,0.35));
}

.lpz-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.lpz-method-sub {
  text-align: left;
  margin: -34px 0 28px;
  max-width: none;
}

.lpz-method-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.lpz-method-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lpz-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}

.lpz-step-letter {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lpz-step h4 {
  color: rgba(255,255,255,0.92);
  font-size: 15px;
  margin-bottom: 2px;
}

.lpz-step p {
  color: rgba(255,255,255,0.58);
  font-size: 13px;
  line-height: 1.45;
}

.lpz-footer-inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lp-pain-before,
.lp-pain-after {
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 1100px) {
  .lpz-nav-links {
    gap: 16px;
  }

  .lp-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .lpz-method-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .lpz-hero-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    grid-template-areas:
      "character visual"
      "copy copy";
    gap: 0 10px;
    align-items: flex-end;
    overflow-x: clip;
    overflow-y: visible;
  }

  .lpz-hero-copy {
    grid-area: copy;
    text-align: left;
    margin-top: 26px;
  }

  .lpz-hero-visual {
    grid-area: visual;
    min-width: 0;
    position: relative;
    z-index: 2;
    align-self: center;
  }

  .lpz-hero-visual .lpz-mockup {
    width: min(52vw, 420px);
    height: clamp(310px, 48vw, 430px);
    margin-left: -4vw;
  }

  .lpz-hero-proof,
  .lpz-hero-ctas {
    justify-content: flex-start;
  }

  .lpz-method-sub {
    text-align: center;
  }

  .lpz-method-actions {
    justify-content: center;
  }
}

@media (max-width: 900px) {
  .lpz-nav-links {
    display: none;
  }

  .lpz-root {
    padding-top: 66px;
  }

  .lpz-nav-inner {
    min-height: 66px;
  }

  .lpz-section-sub {
    margin-top: -24px;
    margin-bottom: 28px;
  }
}

@media (max-width: 768px) {
  .lpz-container {
    padding: 0 16px;
  }

  .lpz-hero {
    padding-top: 24px;
  }

  .lpz-hero-grid {
    grid-template-columns: 50% 50%;
    gap: 0;
  }

  .lpz-hero-copy {
    margin-top: 22px;
    text-align: left;
  }

  .lpz-hero-copy .lp-badge {
    margin-left: 0;
    margin-right: auto;
  }

  .lpz-hero-title,
  .lpz-hero-sub,
  .lpz-hero-proof {
    text-align: left;
  }

  .lpz-hero-proof,
  .lpz-hero-ctas {
    justify-content: flex-start;
  }

  .lpz-hero-visual .lpz-mockup {
    width: 55vw;
    height: 330px;
    margin-left: -5vw;
    border-radius: 18px !important;
  }

  .lpz-hero-title {
    font-size: clamp(34px, 9vw, 48px);
  }

  .lpz-hero-sub {
    font-size: 16px;
  }

  .lpz-hero-visual .lpz-mockup {
    animation-duration: 6.5s;
  }

  .lpz-footer-inner {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .legal-page {
    padding: 28px 0 40px;
  }

  .legal-page-panel {
    padding: 22px 20px !important;
  }

  .legal-page-action {
    width: 100%;
  }

  .legal-nav-cta {
    min-width: 0;
    padding: 0 14px;
  }

  .legal-hero {
    padding: 44px 0 32px;
  }

  .legal-article-section {
    padding: 28px 16px 80px;
  }

  .legal-footer {
    padding: 0 16px 28px;
  }

  .legal-page--landing {
    padding: 0;
  }
}

@media (max-width: 520px) {
  .lpz-hero-grid {
    margin-left: -16px;
    margin-right: -16px;
  }

  .lpz-hero-copy {
    padding: 0 16px;
    text-align: left;
  }

  .lpz-hero-visual .lpz-mockup {
    width: 64vw;
    height: 300px;
    margin-left: -14vw;
  }
}

@media (min-width: 769px) {
  .sidebar {
    overflow: visible;
  }

  .sidebar nav {
    position: relative;
    z-index: 1;
  }

  .sidebar-footer {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    z-index: 20;
  }

  .account-card-body {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(-8px);
    transition:
      max-height 0.32s ease,
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0s linear 0.32s;
  }

  .sidebar-footer:hover .account-card-body,
  .sidebar-footer:focus-within .account-card-body {
    max-height: 900px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
      max-height 0.32s ease,
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lpz-reveal,
  .lpz-hero-visual .lpz-mockup,
  .lpz-chat-bubble,
  .lpz-chat-demo .lpz-input-row div,
  .lpz-chat-demo .lpz-input-row button,
  .lp-faq-a {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   FORTNITE-STYLE ARENA & BATTLE INTRO — Compact HUD Design
   ═══════════════════════════════════════════════════════════ */

/* ── Shared components ── */

.fn-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.80);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.fn-back-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.fn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.fn-btn--accent {
  background: linear-gradient(135deg, #7b61ff, #54d2ff);
  color: #fff;
}
.fn-btn--sm {
  padding: 7px 14px;
  font-size: 11px;
  border-radius: 8px;
}
.fn-btn--cta {
  width: 100%;
  padding: 13px 24px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(95deg, #ffd52e 0%, #bff328 100%);
  color: #0d0f18;
  border: none;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(191, 243, 40, 0.18),
    0 8px 24px rgba(191, 243, 40, 0.16);
  cursor: pointer;
}
.fn-btn--cta:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 0 0 1px rgba(191, 243, 40, 0.24),
    0 12px 32px rgba(191, 243, 40, 0.22);
}
.fn-btn--cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.5);
  box-shadow: none;
  transform: none;
}
.fn-btn-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.fn-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fn-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.fn-notice {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
}
.fn-notice--locked {
  border-color: rgba(249, 115, 22, 0.24);
  background: rgba(249, 115, 22, 0.06);
}
.fn-notice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.fn-notice-text strong {
  font-size: 13px;
  font-weight: 700;
}
.fn-notice-text span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.56);
}


/* ── Arena Page (config screen) ── */

.arena-page-shell .arena-page-content {
  width: min(1120px, calc(100% - 32px));
  padding: 16px 0 32px;
  gap: 14px;
}

.fn-arena-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.fn-arena-title-block {
  text-align: right;
  min-width: 0;
}

.fn-arena-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
  margin: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.fn-arena-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.56);
  margin: 4px 0 0;
  font-weight: 500;
}

.fn-arena-panel {
  padding: 18px;
  border-radius: 16px;
  background: rgba(6, 8, 18, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fn-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fn-section--flex {
  flex: 1;
  min-width: 0;
}

.fn-section-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.44);
}

.fn-row {
  display: flex;
  gap: 14px;
}

/* Opponents grid */
.fn-opponents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.fn-opponent-card {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  min-height: 0;
  aspect-ratio: 9 / 16;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    #0b1021;
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  text-align: left;
  isolation: isolate;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    filter 0.24s ease;
  font-family: inherit;
}
.fn-opponent-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow:
    0 24px 42px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.03);
}
.fn-opponent-card.is-selected {
  transform: translateY(-4px);
  border-color: rgba(195, 255, 57, 0.55);
  color: #fff;
  box-shadow:
    0 28px 56px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(195, 255, 57, 0.26),
    0 0 24px rgba(195, 255, 57, 0.18);
}

.fn-opponent-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(5, 8, 20, 0.00) 0%, rgba(5, 8, 20, 0.18) 38%, rgba(5, 8, 20, 0.86) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.fn-opponent-image,
.fn-opponent-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fn-opponent-image {
  object-fit: cover;
  object-position: center top;
  transform: scale(1.03);
  filter: saturate(1.02) contrast(1.02);
  transition: transform 0.5s ease, filter 0.5s ease;
}

.fn-opponent-card:hover .fn-opponent-image,
.fn-opponent-card.is-selected .fn-opponent-image {
  transform: scale(1.08);
  filter: saturate(1.08) contrast(1.05);
}

.fn-opponent-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 28%, rgba(195, 255, 57, 0.22), transparent 24%),
    linear-gradient(180deg, rgba(37, 45, 92, 0.9), rgba(9, 12, 28, 0.98));
  color: rgba(255, 255, 255, 0.86);
}

.fn-opponent-overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 12px;
}

.fn-opponent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(4, 8, 18, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fn-opponent-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 52px;
}

.fn-opponent-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.fn-opponent-name {
  font-size: clamp(17px, 2.1vw, 24px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
}

/* Difficulty buttons */
.fn-difficulty-row {
  display: flex;
  gap: 6px;
}

.fn-diff-btn {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.fn-diff-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
}
.fn-diff-btn.is-active {
  background: rgba(84, 210, 255, 0.14);
  border-color: rgba(84, 210, 255, 0.36);
  color: #54d2ff;
}

/* Select */
.fn-select {
  width: 100%;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 10, 24, 0.72);
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.fn-select option {
  background: #0a0820;
  color: #fff;
}

/* Mode row */
.fn-mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.fn-mode-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.56);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  text-align: left;
}
.fn-mode-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
}
.fn-mode-btn.is-active {
  background: linear-gradient(135deg, rgba(123, 97, 255, 0.12), rgba(84, 210, 255, 0.10));
  border-color: rgba(123, 97, 255, 0.30);
  color: #fff;
}
.fn-mode-btn-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.fn-mode-btn-text strong {
  font-size: 13px;
  font-weight: 700;
}
.fn-mode-btn-text small {
  font-size: 10px;
  opacity: 0.6;
  font-weight: 500;
}

/* Voice note */
.fn-voice-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(123, 97, 255, 0.08);
  border: 1px solid rgba(123, 97, 255, 0.16);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  line-height: 1.5;
}
.fn-voice-note strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}
.fn-voice-note span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
}


/* ── In-Game Chat (fn-chat) ── */

.fn-chat {
  display: flex;
  flex-direction: column;
}

.fn-chat-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(4, 5, 14, 0.42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.fn-chat-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.fn-chat-header-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fn-chat-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fn-chat-subtitle {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.42);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fn-chat-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.fn-chat-turns {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
}

.fn-chat-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.52);
  font-weight: 600;
}

.fn-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  flex-shrink: 0;
}
.fn-live-dot.is-active {
  background: #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
  animation: fn-pulse 1.6s ease-in-out infinite;
}

@keyframes fn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.fn-end-btn {
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.fn-end-btn:hover {
  background: rgba(249, 115, 22, 0.14);
  border-color: rgba(249, 115, 22, 0.28);
  color: #fb923c;
}

.fn-end-btn:disabled {
  opacity: 0.45;
  cursor: wait;
  pointer-events: none;
}

.fn-chat-content {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.fn-chat .chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
}

.fn-chat .chat-messages-inner {
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
}

.fn-chat .message-content {
  background: rgba(8, 10, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 16px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  line-height: 1.6;
  position: relative;
  max-width: 85%;
}

.fn-chat .message-content .tts-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  padding: 0;
  font-size: 0;
}
.fn-chat .message-content .tts-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.80);
}
.fn-chat .message-content .tts-btn.active {
  color: #54d2ff;
  background: rgba(84, 210, 255, 0.12);
}

.fn-chat .message-user-pill {
  background: rgba(123, 97, 255, 0.14);
  border: 1px solid rgba(123, 97, 255, 0.20);
  border-radius: 14px;
  padding: 10px 16px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  line-height: 1.5;
  max-width: 80%;
  margin-left: auto;
}

/* Objectives strip at top of chat */
.fn-obj-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.fn-obj-strip-card {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.68);
}

.fn-obj-strip-card .material-icons-round {
  flex-shrink: 0;
  margin-top: 1px;
}

.fn-obj-strip-card span {
  flex: 1;
  min-width: 0;
}

.fn-obj-strip--green {
  color: rgba(52, 211, 153, 0.80);
}
.fn-obj-strip--green span {
  color: rgba(255, 255, 255, 0.68);
}
.fn-obj-strip--amber {
  color: rgba(245, 158, 11, 0.80);
}
.fn-obj-strip--amber span {
  color: rgba(255, 255, 255, 0.68);
}
.fn-obj-strip--orange {
  color: rgba(249, 115, 22, 0.80);
}
.fn-obj-strip--orange span {
  color: rgba(255, 255, 255, 0.68);
}

@media (max-width: 640px) {
  .fn-obj-strip {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 8px 10px;
  }
}

/* Live banner */
.fn-live-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(123, 97, 255, 0.08);
  border-bottom: 1px solid rgba(123, 97, 255, 0.12);
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 600;
}

/* Chat input */
.fn-chat-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 14px 12px;
  background: rgba(4, 5, 14, 0.52);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.fn-chat-textarea {
  flex: 1;
  resize: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.4;
  max-height: 120px;
  outline: none;
  transition: border-color 0.15s;
}
.fn-chat-textarea:focus {
  border-color: rgba(123, 97, 255, 0.32);
}
.fn-chat-textarea::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.fn-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #7b61ff, #54d2ff);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s, transform 0.15s;
}
.fn-send-btn:hover:not(:disabled) {
  transform: scale(1.04);
}
.fn-send-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.fn-chat-end-bar {
  display: flex;
  justify-content: center;
  padding: 12px 14px;
  background: rgba(4, 5, 14, 0.42);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Live footer */
.fn-live-footer {
  display: flex;
  justify-content: center;
  padding: 10px 14px;
  background: rgba(4, 5, 14, 0.42);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.fn-mic-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
  font-weight: 600;
}
.fn-mic-indicator.is-active {
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.20);
  color: #34d399;
}

@keyframes battle-analysis-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes battle-analysis-spin-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes battle-analysis-core-pulse {
  0%, 100% {
    transform: scale(0.96);
    box-shadow:
      0 0 0 10px rgba(84, 210, 255, 0.06),
      0 24px 60px rgba(17, 24, 39, 0.46),
      0 0 34px rgba(84, 210, 255, 0.34);
  }
  50% {
    transform: scale(1.03);
    box-shadow:
      0 0 0 18px rgba(84, 210, 255, 0.05),
      0 26px 70px rgba(17, 24, 39, 0.52),
      0 0 42px rgba(123, 97, 255, 0.42);
  }
}

@keyframes battle-analysis-dot-pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}


/* ── Battle Briefing Screen ── */

.fn-brief {
  display: flex;
  flex-direction: column;
}

.fn-brief-topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(4, 5, 14, 0.50);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.fn-brief-topbar-center {
  flex: 1;
  text-align: center;
  min-width: 0;
}

.fn-brief-topbar-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.02em;
}

.fn-brief-topbar-right {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.fn-pill--accent {
  background: rgba(84, 210, 255, 0.10);
  border-color: rgba(84, 210, 255, 0.22);
  color: #54d2ff;
}

.fn-brief-scroll {
  position: relative;
  z-index: 2;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px 20px;
  -webkit-overflow-scrolling: touch;
}

.fn-brief-panel {
  width: 100%;
  max-width: 660px;
  padding: 24px;
  border-radius: 18px;
  background: rgba(6, 8, 18, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Loading state */
.fn-brief-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex: 1;
  color: rgba(255, 255, 255, 0.52);
  font-size: 13px;
  font-weight: 600;
}

.fn-brief-spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.12);
  border-top-color: #54d2ff;
  animation: battle-spin 0.8s linear infinite;
}

/* Header section */
.fn-brief-header {
  width: 100%;
  max-width: 620px;
  text-align: center;
}

.fn-brief-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #54d2ff;
  margin-bottom: 8px;
}

.fn-brief-title {
  font-size: clamp(20px, 3.2vw, 28px);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.fn-brief-situation {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
  max-width: 560px;
  margin-inline: auto;
}

/* 3 objective cards */
.fn-brief-objectives {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 620px;
}

.fn-obj-card {
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fn-obj-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fn-obj-card--green .fn-obj-icon {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
}
.fn-obj-card--amber .fn-obj-icon {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}
.fn-obj-card--orange .fn-obj-icon {
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
}

.fn-obj-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.44);
}

.fn-obj-text {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

.fn-brief-cta {
  width: 100%;
}

/* ── Responsive ── */

@media (max-width: 720px) {
  .fn-row {
    flex-direction: column;
    gap: 14px;
  }

  .fn-opponents-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .arena-page-shell .arena-page-content {
    width: calc(100% - 24px);
  }

  .fn-opponent-card {
    border-radius: 18px;
  }

  .fn-opponent-overlay {
    padding: 10px;
  }

  .fn-opponent-name {
    font-size: clamp(16px, 4.8vw, 22px);
  }

  .fn-intro-body {
    padding: 16px 14px 24px;
  }
}

@media (max-width: 580px) {
  .fn-brief-objectives {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .fn-obj-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
  }

  .fn-obj-icon {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .fn-obj-card > :not(.fn-obj-icon) {
    /* text wraps next to icon */
  }
}

@media (max-width: 480px) {
  .fn-arena-topbar {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .fn-arena-title-block {
    text-align: left;
  }

  .fn-arena-panel {
    padding: 14px;
    border-radius: 14px;
  }

  .fn-mode-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   Feedback Page UI/UX Refactor
   ========================================== */

.fb-hero {
  padding: var(--sp-xl);
  border-radius: var(--radius-xl);
  background: var(--nb-surface);
  border: 1px solid var(--nb-glass-border);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-xl);
}

.fb-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--nb-accent-bg);
  color: var(--nb-text);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-md);
}

.fb-title {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.1;
  color: var(--nb-text);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fb-subtitle {
  margin: 12px 0 0;
  max-width: 720px;
  color: var(--nb-text-secondary);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.fb-meta {
  margin-top: var(--sp-lg);
  color: var(--nb-text-muted);
  font-size: var(--font-size-sm);
}

.fb-meta strong {
  color: var(--nb-text);
}

.fb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: var(--sp-xl);
}

.fb-panel {
  padding: var(--sp-xl);
  border-radius: var(--radius-xl);
  background: var(--nb-surface);
  border: 1px solid var(--nb-glass-border);
  box-shadow: var(--shadow-sm);
}

.fb-field {
  margin-bottom: var(--sp-xl);
}

.fb-label {
  display: block;
  color: var(--nb-text);
  font-weight: 600;
  margin-bottom: var(--sp-sm);
  font-size: var(--font-size-sm);
}

.fb-select, .fb-textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--nb-border);
  background: var(--nb-bg);
  color: var(--nb-text);
  font-size: var(--font-size-base);
  font-family: inherit;
  transition: all 0.2s ease;
  outline: none;
}

.fb-select:focus, .fb-textarea:focus, .fb-select:hover, .fb-textarea:hover {
  border-color: var(--nb-text-muted);
}

.fb-select:focus, .fb-textarea:focus {
  border-color: var(--nb-text);
  box-shadow: 0 0 0 1px var(--nb-text);
}

.fb-hint {
  margin-top: 6px;
  color: var(--nb-text-muted);
  font-size: var(--font-size-xs);
}

.fb-ratings {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.fb-rating-btn {
  flex: 1;
  min-width: 80px;
  padding: 12px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--nb-border);
  background: var(--nb-bg);
  color: var(--nb-text-secondary);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.fb-rating-btn:hover {
  border-color: var(--nb-border-hover);
  background: var(--nb-surface-hover);
  color: var(--nb-text);
}

.fb-rating-btn.is-selected {
  border-color: var(--nb-text);
  background: var(--nb-text);
  color: var(--nb-bg);
}

.fb-rating-stars {
  font-size: 16px;
  margin-bottom: 4px;
}

.fb-rating-btn.is-selected .fb-rating-stars {
  color: var(--nb-bg);
}

.fb-rating-label {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

.fb-textarea {
  resize: vertical;
  min-height: 180px;
}

.fb-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.fb-char-count {
  font-size: var(--font-size-xs);
  color: var(--nb-text-muted);
}

.fb-char-count.is-invalid {
  color: var(--nb-orange);
}

.fb-submit-btn {
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--nb-text);
  color: var(--nb-bg);
  font-weight: 600;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.fb-submit-btn:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}

.fb-submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.fb-aside-title {
  margin: 0 0 16px;
  color: var(--nb-text);
  font-size: var(--font-size-md);
  font-weight: 700;
}

.fb-aside-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fb-aside-card {
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--nb-bg);
  border: 1px solid var(--nb-glass-border);
}

.fb-aside-step {
  color: var(--nb-text);
  font-weight: 600;
  font-size: var(--font-size-sm);
  margin-bottom: 4px;
}

.fb-aside-desc {
  color: var(--nb-text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

.fb-notice {
  margin-top: var(--sp-md);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  font-weight: 500;
}

.fb-notice.is-success {
  background: var(--nb-green-bg);
  border: 1px solid var(--nb-green-bg);
  color: var(--nb-green);
}

.fb-notice.is-error {
  background: var(--nb-red-bg);
  border: 1px solid var(--nb-red-bg);
  color: var(--nb-red);
}

@media (max-width: 900px) {
  .fb-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
  }
}

/* ============================================================ */
/* GamingHud — Fortnite-style player HUD                         */
/* ============================================================ */
.hud-root {
  font-family: inherit;
  color: #E8E6F5;
}

.gaming-page-shell .page-header {
  margin-bottom: var(--sp-md);
}

/* HERO */
.hud-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(139, 92, 246, 0.35);
  background: linear-gradient(135deg, #1A0F2E 0%, #0F0820 50%, #1A0F2E 100%);
  padding: 24px;
  margin-bottom: 14px;
}

.hud-hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.hud-hex-wrap {
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.4));
}

.hud-hero-info {
  flex: 1;
  min-width: 260px;
}

.hud-hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.hud-rank {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #C4B5FD;
  text-transform: uppercase;
}

.hud-xp-total {
  margin-top: 2px;
  font-size: 28px;
  font-weight: 900;
  font-style: italic;
  color: #FFFFFF;
}

.hud-next { text-align: right; }
.hud-next-value {
  font-size: 18px;
  font-weight: 900;
  font-style: italic;
  color: #FCD34D;
}

/* XP BAR */
.hud-xp-bar {
  position: relative;
  height: 14px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(139, 92, 246, 0.3);
  background: #0A0515;
}

.hud-xp-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, #7C3AED 0%, #A78BFA 50%, #DDD6FE 100%);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.6);
  transition: width 400ms ease-out;
}

.hud-xp-stripes {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 8px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 8px,
    rgba(255, 255, 255, 0.12) 8px,
    rgba(255, 255, 255, 0.12) 9px
  );
  transition: width 400ms ease-out;
}

.hud-xp-labels {
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  color: rgba(196, 181, 253, 0.8);
}

/* CORNER BRACKETS */
.hud-bracket {
  pointer-events: none;
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: rgba(167, 139, 250, 0.7);
}
.hud-bracket--top-left { top: 10px; left: 10px; border-top: 2px solid; border-left: 2px solid; }
.hud-bracket--top-right { top: 10px; right: 10px; border-top: 2px solid; border-right: 2px solid; }
.hud-bracket--bottom-left { bottom: 10px; left: 10px; border-bottom: 2px solid; border-left: 2px solid; }
.hud-bracket--bottom-right { bottom: 10px; right: 10px; border-bottom: 2px solid; border-right: 2px solid; }

/* STATS ROW */
.hud-stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
@media (min-width: 640px) {
  .hud-stats-row { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}

.hud-stat {
  position: relative;
  overflow: hidden;
  cursor: default;
  border-radius: 10px;
  border: 1px solid #1E293B;
  background: #131320;
  padding: 12px;
  transform: skewX(-2deg);
  transition: transform 200ms ease, background 200ms ease;
}
.hud-stat:hover { transform: skewX(0deg); background: #181828; }

.hud-stat-accent {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
}
.hud-stat--red   .hud-stat-accent { background: #EF4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.8); }
.hud-stat--yellow .hud-stat-accent { background: #FACC15; box-shadow: 0 0 10px rgba(250, 204, 21, 0.8); }
.hud-stat--purple .hud-stat-accent { background: #A855F7; box-shadow: 0 0 10px rgba(168, 85, 247, 0.8); }
.hud-stat--emerald .hud-stat-accent { background: #34D399; box-shadow: 0 0 10px rgba(52, 211, 153, 0.8); }

.hud-stat-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transform: skewX(2deg);
  transition: transform 200ms ease;
}
.hud-stat:hover .hud-stat-inner { transform: skewX(0deg); }

.hud-stat-label-wrap {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.hud-stat-icon {
  flex-shrink: 0;
  display: flex;
  padding: 6px;
  border-radius: 6px;
  transition: transform 200ms ease;
}
.hud-stat:hover .hud-stat-icon { transform: scale(1.1); }
.hud-stat--red   .hud-stat-icon { background: rgba(239, 68, 68, 0.1); color: #EF4444; }
.hud-stat--yellow .hud-stat-icon { background: rgba(250, 204, 21, 0.1); color: #FACC15; }
.hud-stat--purple .hud-stat-icon { background: rgba(168, 85, 247, 0.1); color: #C084FC; }
.hud-stat--emerald .hud-stat-icon { background: rgba(52, 211, 153, 0.1); color: #34D399; }

.hud-stat-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #CBD5E1;
}
@media (min-width: 640px) { .hud-stat-label { font-size: 14px; } }

.hud-stat-value {
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 900;
  font-style: italic;
  color: #FFFFFF;
}
.hud-stat-value--gradient {
  background: linear-gradient(90deg, #C084FC 0%, #E879F9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.hud-stat-value--glow {
  color: #34D399;
  filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.4));
}

/* REWARDS */
.hud-rewards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.2);
  background: rgba(15, 8, 32, 0.6);
  padding: 12px;
}
@media (max-width: 640px) {
  .hud-rewards { grid-template-columns: 1fr; }
}

.hud-reward {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hud-reward--divider {
  border-right: 1px solid rgba(139, 92, 246, 0.15);
  padding-right: 12px;
}
@media (max-width: 640px) {
  .hud-reward--divider { border-right: none; padding-right: 0; }
}

.hud-reward-icon {
  display: flex;
  height: 32px;
  width: 32px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.hud-reward-icon--emerald { background: rgba(52, 211, 153, 0.1); color: #34D399; }
.hud-reward-icon--violet  { background: rgba(167, 139, 250, 0.15); color: #A78BFA; }
.hud-reward-icon--amber   { background: rgba(251, 191, 36, 0.15); color: #FBBF24; }

.hud-reward-text { min-width: 0; }
.hud-reward-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #C4B5FD;
}
.hud-reward-value {
  font-size: 13px;
  font-weight: 500;
  color: #FFFFFF;
}

/* ============================================================ */
/* GamingHud — Scenario cards (matches HUD style)                */
/* ============================================================ */
.hud-scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}
@media (max-width: 900px) {
  .hud-scenario-grid { grid-template-columns: 1fr; }
}

.hud-scenario {
  position: relative;
  overflow: hidden;
  appearance: none;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.25);
  background: linear-gradient(135deg, #131320 0%, #0F0820 100%);
  padding: 18px 20px;
  transform: skewX(-2deg);
  transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  text-align: left;
  color: inherit;
  font: inherit;
}
.hud-scenario:hover {
  transform: skewX(0deg);
  background: linear-gradient(135deg, #1A0F2E 0%, #13081F 100%);
  border-color: rgba(167, 139, 250, 0.55);
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.25);
}
.hud-scenario:focus-visible {
  outline: 2px solid rgba(167, 139, 250, 0.7);
  outline-offset: 2px;
}

.hud-scenario-accent {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
}
.hud-scenario--emerald .hud-scenario-accent { background: #34D399; box-shadow: 0 0 10px rgba(52, 211, 153, 0.8); }
.hud-scenario--amber   .hud-scenario-accent { background: #FBBF24; box-shadow: 0 0 10px rgba(251, 191, 36, 0.8); }
.hud-scenario--red     .hud-scenario-accent { background: #EF4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.8); }

.hud-scenario-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  transform: skewX(2deg);
  transition: transform 200ms ease;
}
.hud-scenario:hover .hud-scenario-inner { transform: skewX(0deg); }

.hud-scenario-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(139, 92, 246, 0.3);
  background: rgba(15, 8, 32, 0.7);
  transition: transform 200ms ease, border-color 200ms ease;
}
.hud-scenario:hover .hud-scenario-icon { transform: scale(1.08); }
.hud-scenario--emerald .hud-scenario-icon { color: #34D399; border-color: rgba(52, 211, 153, 0.35); }
.hud-scenario--amber   .hud-scenario-icon { color: #FBBF24; border-color: rgba(251, 191, 36, 0.35); }
.hud-scenario--red     .hud-scenario-icon { color: #EF4444; border-color: rgba(239, 68, 68, 0.35); }

.hud-scenario-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hud-scenario-title {
  font-size: 16px;
  font-weight: 900;
  font-style: italic;
  color: #FFFFFF;
  line-height: 1.2;
  word-break: break-word;
}

.hud-scenario-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hud-scenario-difficulty {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.hud-scenario--emerald .hud-scenario-difficulty { color: #34D399; }
.hud-scenario--amber   .hud-scenario-difficulty { color: #FBBF24; }
.hud-scenario--red     .hud-scenario-difficulty { color: #EF4444; }

.hud-scenario-cta {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #C4B5FD;
  transition: color 200ms ease, transform 200ms ease;
}
.hud-scenario:hover .hud-scenario-cta {
  color: #FFFFFF;
  transform: translateX(3px);
}

.gaming-history-row.is-active {
  border-color: rgba(191, 90, 242, 0.46);
  background: rgba(191, 90, 242, 0.14);
}

@media (max-width: 1180px) {

  .gaming-page-shell .page-header,
  .gaming-home-main,
  .gaming-history-sidebar {
    grid-column: 1;
    justify-self: center;
    width: min(920px, calc(100% - 36px));
  }

  .gaming-page-shell .page-header {
    grid-row: 1;
    padding-top: 24px;
  }
}

/* ============================================================ */
/* FeedbackPage — black & sober redesign                         */
/* ============================================================ */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: authOverlayIn 180ms ease-out;
}

@keyframes authOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.auth-modal {
  position: relative;
  width: min(100%, 460px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 18% 0%, rgba(122, 92, 255, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(27, 28, 36, 0.98), rgba(12, 13, 20, 0.98));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 28px;
  animation: authModalIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes authModalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.auth-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.auth-modal-head {
  padding-right: 42px;
  margin-bottom: 22px;
}

.auth-modal-kicker {
  margin: 0 0 9px;
  color: #9dd8ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-modal-title {
  margin: 0;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 850;
  letter-spacing: 0;
}

.auth-modal-subtitle {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 15px;
  line-height: 1.5;
}

.auth-provider-button,
.auth-submit {
  width: 100%;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
}

.auth-provider-button {
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.96);
  color: #0c0d14;
}

.auth-provider-button:hover,
.auth-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.auth-provider-button:disabled,
.auth-submit:disabled,
.auth-secondary-action:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
}

.auth-google-mark {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
}

.auth-tabs,
.auth-email-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 5px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-tab,
.auth-email-mode button {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.auth-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.auth-tab.is-active,
.auth-email-mode button.is-active {
  background: rgba(255, 255, 255, 0.94);
  color: #101116;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.auth-form {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.auth-field {
  display: grid;
  gap: 8px;
}

.auth-field span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 800;
}

.auth-field input {
  width: 100%;
  min-height: 50px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  padding: 0 15px;
  font: inherit;
  outline: none;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.auth-field input::placeholder {
  color: rgba(255, 255, 255, 0.34);
}

.auth-field input:focus {
  border-color: rgba(157, 216, 255, 0.72);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 4px rgba(157, 216, 255, 0.12);
}

.auth-submit {
  margin-top: 2px;
  background: linear-gradient(135deg, #ffffff, #dfe7ff);
  color: #0d0e15;
}

.auth-secondary-action {
  justify-self: center;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.auth-secondary-action:hover {
  color: #fff;
}

.auth-alert {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 750;
}

.auth-alert--error {
  border: 1px solid rgba(248, 113, 113, 0.28);
  background: rgba(127, 29, 29, 0.32);
  color: #fecaca;
}

.auth-alert--success {
  border: 1px solid rgba(74, 222, 128, 0.24);
  background: rgba(20, 83, 45, 0.28);
  color: #bbf7d0;
}

.auth-phone-copy {
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  line-height: 1.45;
}

.auth-recaptcha-slot {
  min-height: 0;
}

@media (max-width: 560px) {
  .auth-modal-overlay {
    align-items: flex-end;
    padding: 10px;
  }

  .auth-modal {
    width: 100%;
    max-height: calc(100vh - 20px);
    border-radius: 22px;
    padding: 24px 18px 20px;
  }

  .auth-modal-title {
    font-size: 26px;
  }
}

.fbk-page {
  color: #FFFFFF;
}

.fbk-container {
  max-width: 720px;
  margin: 0 auto;
}

/* Modal version */
.fbk-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: fbkOverlayIn 180ms ease-out;
}

@keyframes fbkOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fbk-modal {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 32px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 18, 24, 0.92);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  color: #FFFFFF;
  animation: fbkModalIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 768px) {
  .fbk-modal { padding: 40px; }
}

@keyframes fbkModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.fbk-modal .fbk-header { margin-bottom: 32px; }
.fbk-modal .fbk-title { font-size: 24px; }
@media (min-width: 768px) {
  .fbk-modal .fbk-title { font-size: 28px; }
}
.fbk-modal .fbk-form { gap: 32px; }
.fbk-modal .fbk-submit-row { padding-top: 24px; }

.fbk-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #A3A3A3;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.fbk-modal-close:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

/* HEADER */
.fbk-header { margin-bottom: 56px; }

.fbk-tag {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #737373;
}

.fbk-title {
  margin: 0 0 16px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
@media (min-width: 768px) {
  .fbk-title { font-size: 36px; }
}

.fbk-subtitle {
  margin: 0;
  max-width: 640px;
  font-size: 15px;
  line-height: 1.6;
  color: #A3A3A3;
}

.fbk-meta {
  margin: 24px 0 0;
  font-size: 13px;
  color: #737373;
}
.fbk-meta-name { color: #D4D4D4; }
.fbk-meta-sep { margin: 0 8px; color: #404040; }
.fbk-meta--warn { color: #F59E0B; }

/* ============================================================ */
/* HomePage — HUD-style stats row                                */
/* ============================================================ */
.home-hud-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
@media (max-width: 900px) {
  .home-hud-stats { gap: 10px; }
  .home-hud-stat {
    padding: 12px 12px 10px;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon value"
      "label label";
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
  }
  .home-hud-stat-icon { grid-row: auto; width: 36px; height: 36px; }
  .home-hud-stat-value { align-self: center; font-size: 22px; }
  .home-hud-stat-label { font-size: 10px; letter-spacing: 0.7px; }
}
@media (max-width: 640px) {
  .home-hud-stats { gap: 8px; margin-bottom: 20px; }
  .home-hud-stat { padding: 10px 10px 8px; column-gap: 8px; }
  .home-hud-stat-icon { width: 30px; height: 30px; }
  .home-hud-stat-icon svg { width: 16px !important; height: 16px !important; }
  .home-hud-stat-value { font-size: 18px; }
  .home-hud-stat-label { font-size: 9px; letter-spacing: 0.5px; }
}

.home-hud-stat {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #1E293B;
  background: linear-gradient(135deg, #131320 0%, #0F0820 100%);
  padding: 16px 20px;
  transform: skewX(-2deg);
  transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon value"
    "icon label";
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
}
.home-hud-stat-icon  { grid-area: icon; grid-row: span 2; align-self: center; }
.home-hud-stat-value { grid-area: value; align-self: end; }
.home-hud-stat-label { grid-area: label; align-self: start; }
.home-hud-stat:hover {
  transform: skewX(0deg);
  border-color: rgba(167, 139, 250, 0.35);
}

.home-hud-stat-accent {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
}
.home-hud-stat--purple  .home-hud-stat-accent { background: #A855F7; box-shadow: 0 0 10px rgba(168, 85, 247, 0.8); }
.home-hud-stat--amber   .home-hud-stat-accent { background: #FBBF24; box-shadow: 0 0 10px rgba(251, 191, 36, 0.8); }
.home-hud-stat--emerald .home-hud-stat-accent { background: #34D399; box-shadow: 0 0 10px rgba(52, 211, 153, 0.8); }

.home-hud-stat-head {
  display: flex;
  align-items: center;
  gap: 14px;
  transform: skewX(2deg);
  transition: transform 200ms ease;
}
.home-hud-stat:hover .home-hud-stat-head { transform: skewX(0deg); }

.home-hud-stat-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  transition: transform 200ms ease;
}
.home-hud-stat:hover .home-hud-stat-icon { transform: scale(1.08); }
.home-hud-stat--purple  .home-hud-stat-icon { background: rgba(168, 85, 247, 0.12); color: #C084FC; }
.home-hud-stat--amber   .home-hud-stat-icon { background: rgba(251, 191, 36, 0.12); color: #FBBF24; }
.home-hud-stat--emerald .home-hud-stat-icon { background: rgba(52, 211, 153, 0.12); color: #34D399; }

.home-hud-stat-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-hud-stat-value {
  font-size: 28px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}
.home-hud-stat--purple  .home-hud-stat-value {
  background: linear-gradient(90deg, #C084FC 0%, #E879F9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.home-hud-stat--amber   .home-hud-stat-value {
  color: #FBBF24;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.35));
}
.home-hud-stat--emerald .home-hud-stat-value {
  color: #34D399;
  filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.4));
}

.home-hud-stat-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #CBD5E1;
}

.home-hud-stat-meta {
  margin-top: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #94A3B8;
  transform: skewX(2deg);
  transition: transform 200ms ease;
}
.home-hud-stat:hover .home-hud-stat-meta { transform: skewX(0deg); }

.home-hud-stat-progress {
  position: relative;
  height: 6px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(10, 5, 21, 0.8);
  transform: skewX(2deg);
  transition: transform 200ms ease;
}
.home-hud-stat:hover .home-hud-stat-progress { transform: skewX(0deg); }
.home-hud-stat-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #10B981 0%, #34D399 60%, #86EFAC 100%);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.5);
  transition: width 400ms ease-out;
}

/* FORM */
.fbk-form {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.fbk-panel {
  padding: 32px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 18, 24, 0.55);
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
@media (min-width: 768px) {
  .fbk-panel { padding: 40px; }
}

.fbk-section { display: block; }

.fbk-label {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
}

/* TYPE GRID */
.fbk-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 640px) {
  .fbk-type-grid { grid-template-columns: repeat(4, 1fr); }
}

.fbk-type-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 6px;
  border: 1px solid #262626;
  background: transparent;
  color: #A3A3A3;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.fbk-type-btn:hover {
  border-color: #404040;
  color: #FFFFFF;
}
.fbk-type-btn--active,
.fbk-type-btn--active:hover {
  border-color: #FFFFFF;
  background: #FFFFFF;
  color: #000000;
}
.fbk-type-emoji { font-size: 16px; line-height: 1; }

/* RATING */
.fbk-rating-bar {
  position: relative;
  height: 4px;
  width: 100%;
  margin-bottom: 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.fbk-rating-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 9999px;
  transition:
    width 400ms cubic-bezier(0.16, 1, 0.3, 1),
    background 400ms ease;
}

.fbk-rating-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.fbk-rating-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border-radius: 6px;
  border: 1px solid #262626;
  background: transparent;
  cursor: pointer;
  transform: translateY(0);
  transition:
    border-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
    background 300ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fbk-rating-btn:hover {
  border-color: #404040;
}
.fbk-rating-btn:hover .fbk-rating-emoji {
  filter: none;
}
.fbk-rating-btn:hover .fbk-rating-label {
  color: #A3A3A3;
}
.fbk-rating-btn--active,
.fbk-rating-btn--active:hover {
  border-color: #10B981;
  background: rgba(16, 185, 129, 0.05);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
  transform: translateY(-4px);
}

.fbk-rating-emoji {
  font-size: 28px;
  line-height: 1;
  filter: grayscale(0.8) opacity(0.6);
  transform: scale(1);
  transition:
    transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 200ms ease;
}
.fbk-rating-btn--active .fbk-rating-emoji {
  filter: none;
  transform: scale(1.2);
}

.fbk-rating-label {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  color: #737373;
}
.fbk-rating-btn--active .fbk-rating-label {
  color: #34D399;
}

/* TEXTAREA */
.fbk-textarea {
  width: 100%;
  padding: 16px;
  border-radius: 6px;
  border: 1px solid #262626;
  background: transparent;
  color: #FFFFFF;
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
  min-height: 160px;
  transition: border-color 150ms ease;
  box-sizing: border-box;
}
.fbk-textarea::placeholder { color: #525252; }
.fbk-textarea:focus {
  outline: none;
  border-color: #737373;
}

.fbk-char-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 12px;
  color: #737373;
}

/* SUBMIT */
.fbk-submit-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 32px;
  border-top: 1px solid #171717;
}

.fbk-submit-btn {
  padding: 12px 24px;
  border-radius: 6px;
  border: none;
  background: #FFFFFF;
  color: #000000;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease;
}
.fbk-submit-btn:hover:not(:disabled) { background: #E5E5E5; }
.fbk-submit-btn:disabled {
  background: #171717;
  color: #525252;
  cursor: not-allowed;
}

/* NOTICE */
.fbk-notice {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid transparent;
}
.fbk-notice--success {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.08);
  color: #34D399;
}
.fbk-notice--error {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
  color: #F87171;
}

/* ---- Mes retours & réponses ---- */
.fbk-thread { margin-top: 32px; }
.fbk-thread-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  color: #F5F5F5;
  letter-spacing: -0.01em;
}
.fbk-thread-list { display: flex; flex-direction: column; gap: 14px; }
.fbk-thread-item {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 18, 24, 0.55);
  padding: 18px 20px;
}
.fbk-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.fbk-thread-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #D4D4D4;
}
.fbk-thread-date { font-size: 12px; color: #6B7280; font-variant-numeric: tabular-nums; }
.fbk-thread-msg {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #C7C7CC;
  white-space: pre-wrap;
}
.fbk-thread-reply {
  margin-top: 14px;
  border-radius: 12px;
  border: 1px solid rgba(52, 211, 153, 0.28);
  background: rgba(16, 185, 129, 0.08);
  padding: 12px 14px;
}
.fbk-thread-reply-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.fbk-thread-reply-badge {
  font-size: 12px;
  font-weight: 700;
  color: #34D399;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fbk-thread-reply-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #ECFDF5;
  white-space: pre-wrap;
}
.fbk-thread-pending {
  margin-top: 12px;
  font-size: 12px;
  color: #6B7280;
  font-style: italic;
}

/* ==========================================
   Top Navigation Variant
   ========================================== */

.app-layout.has-gradient-bg {
  flex-direction: column;
}

.app-layout.has-gradient-bg .app-topbar.sidebar {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 76px !important;
  min-height: 76px !important;
  flex: 0 0 76px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 12px 24px !important;
  padding-top: calc(12px + env(safe-area-inset-top)) !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top: none !important;
  background: rgba(8, 10, 24, 0.78) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22) !important;
  z-index: 50 !important;
  overflow: visible !important;
}

.app-layout.has-gradient-bg .app-topbar .sidebar-logo {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 2;
}

.app-layout.has-gradient-bg .app-topbar .sidebar-logo h1 {
  font-size: 28px;
  line-height: 1;
  white-space: nowrap;
}

.app-layout.has-gradient-bg .app-topbar .sidebar-logo p {
  display: none;
}

.app-layout.has-gradient-bg .app-topbar nav {
  display: flex !important;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 4px;
  scroll-padding-inline: 4px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.app-layout.has-gradient-bg .app-topbar nav::-webkit-scrollbar {
  display: none;
}

.app-layout.has-gradient-bg .app-topbar .nav-item {
  width: auto !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 42px;
  padding: 9px 12px !important;
  border-left: none !important;
  border-radius: 9px !important;
  text-align: center !important;
  white-space: nowrap;
}

.app-layout.has-gradient-bg .app-topbar .nav-item.active {
  box-shadow: inset 0 -2px 0 #7c8cff, inset 0 0 0 1px rgba(124, 140, 255, 0.22) !important;
}

.app-layout.has-gradient-bg .app-topbar .nav-item-content {
  display: block !important;
}

.app-layout.has-gradient-bg .app-topbar .nav-subtitle {
  display: none !important;
}

.app-layout.has-gradient-bg .app-topbar .nav-item-mobile-only {
  display: flex !important;
}

.app-layout.has-gradient-bg .app-topbar .sidebar-footer {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  border-top: none !important;
  z-index: 60;
}

.app-layout.has-gradient-bg .app-topbar .account-card {
  width: 42px;
  max-width: 42px;
  min-width: 42px;
  min-height: 42px;
  overflow: visible;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.055);
}

.app-layout.has-gradient-bg .app-topbar .account-card-header {
  width: 42px;
  max-width: 42px;
  min-height: 42px;
  padding: 6px;
  cursor: default;
  gap: 0;
  justify-content: center;
}

.app-layout.has-gradient-bg .app-topbar .account-card-avatar {
  width: 28px;
  height: 28px;
}

.app-layout.has-gradient-bg .app-topbar .account-card-copy {
  display: none;
}

.app-layout.has-gradient-bg .app-topbar .account-card-name {
  font-size: 13px;
  line-height: 1.1;
}

.app-layout.has-gradient-bg .app-topbar .account-card-plan {
  display: none;
}

.app-layout.has-gradient-bg .app-topbar .account-card-body {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, calc(100vw - 24px));
  max-height: none;
  border-radius: 18px;
  background: rgba(8, 10, 24, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

.app-layout.has-gradient-bg .main-content {
  flex: 1 1 auto;
  min-height: 0;
  padding: 32px 36px 40px !important;
}

.app-layout.has-gradient-bg .main-content:has(.coach-workspace) {
  padding: 0 !important;
}

.app-layout.has-gradient-bg .main-content:has(.gaming-page-shell) {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 !important;
}

.app-layout.has-gradient-bg .main-content:has(.live-coaching-page) {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 !important;
}

.app-layout.has-gradient-bg .main-content:has(.home-page) {
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 20px !important;
  padding-bottom: 40px !important;
}

.app-layout.has-gradient-bg .home-page {
  max-height: none;
  overflow: visible;
}

.app-layout.has-gradient-bg .home-hero {
  margin-bottom: 18px;
}

.app-layout.has-gradient-bg .home-hud-stats {
  margin-bottom: 20px;
}

.app-layout.has-gradient-bg .home-session-lane {
  margin-bottom: 18px;
}

.app-layout.has-gradient-bg .home-section-title {
  margin-bottom: 12px;
}

.app-layout.has-gradient-bg .home-feature-card {
  min-height: 208px;
  padding: 22px !important;
}

.app-layout.has-gradient-bg .home-tip {
  padding-top: 22px;
  padding-bottom: 22px;
}

@media (min-width: 769px) {
  .app-layout.has-gradient-bg .home-tip-wrap {
    min-height: clamp(220px, 28vh, 330px);
  }
}

@media (max-width: 1024px) {
  .app-layout.has-gradient-bg .app-topbar.sidebar {
    gap: 12px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .app-layout.has-gradient-bg .app-topbar .sidebar-logo p,
  .app-layout.has-gradient-bg .app-topbar .account-card-plan {
    display: none;
  }

  .app-layout.has-gradient-bg .app-topbar .sidebar-logo h1 {
    font-size: 22px;
  }

  .app-layout.has-gradient-bg .app-topbar .nav-item {
    min-width: max-content;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .app-layout.has-gradient-bg .app-topbar .account-card {
    width: auto;
    min-width: 52px;
  }
}

@media (min-width: 1200px) {
  .app-layout.has-gradient-bg .app-topbar .sidebar-logo {
    flex: 1 1 0;
    min-width: max-content;
  }

  .app-layout.has-gradient-bg .app-topbar nav {
    flex: 0 1 auto;
    justify-content: center !important;
    margin-inline: auto;
  }

  .app-layout.has-gradient-bg .app-topbar .sidebar-footer {
    flex: 1 1 0;
    display: flex !important;
    justify-content: flex-end;
  }
}

@media (max-width: 880px) {
  .app-layout.has-gradient-bg .app-topbar .sidebar-logo {
    flex-basis: auto;
  }
}

@media (max-width: 768px) {
  .app-layout.has-gradient-bg .app-topbar.sidebar {
    height: 74px !important;
    min-height: 74px !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-content: center !important;
    gap: 8px !important;
    padding: 10px 10px !important;
    padding-top: calc(10px + env(safe-area-inset-top)) !important;
    overflow: hidden !important;
  }

  .app-layout.has-gradient-bg .app-topbar .sidebar-logo {
    order: 1;
    display: flex !important;
    flex: 0 0 auto;
    flex-shrink: 0;
    max-width: none;
    min-height: 42px;
    gap: 8px;
  }

  .app-layout.has-gradient-bg .app-topbar .sidebar-logo h1 {
    display: block !important;
    font-size: 20px;
  }

  .app-layout.has-gradient-bg .app-topbar .sidebar-logo .logo-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
  }

  .app-layout.has-gradient-bg .app-topbar .sidebar-footer {
    order: 3;
    flex: 0 0 42px;
    flex-shrink: 0;
    margin-left: auto !important;
    display: block !important;
  }

  .app-layout.has-gradient-bg .app-topbar .account-card-copy,
  .app-layout.has-gradient-bg .app-topbar .account-card-body {
    display: none !important;
  }

  .app-layout.has-gradient-bg .app-topbar .account-card {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }

  .app-layout.has-gradient-bg .app-topbar .account-card-header {
    width: 42px;
    max-width: 42px;
    justify-content: center;
    padding: 6px !important;
  }

  .app-layout.has-gradient-bg .app-topbar nav {
    order: 2;
    flex: 1 1 0;
    flex-basis: auto;
    width: auto !important;
    min-width: 0 !important;
    max-width: none;
    justify-content: flex-start !important;
    padding-bottom: 0;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .app-layout.has-gradient-bg .app-topbar .nav-item {
    min-width: max-content;
    padding: 7px 9px !important;
    font-size: 10px !important;
  }

  .app-layout.has-gradient-bg .app-topbar .nav-item svg {
    width: 19px !important;
    height: 19px !important;
  }

  .app-layout.has-gradient-bg .main-content {
    padding: 22px 16px 36px !important;
  }
}

@media (max-width: 420px) {
  .app-layout.has-gradient-bg .app-topbar.sidebar {
    gap: 6px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .app-layout.has-gradient-bg .app-topbar .sidebar-logo {
    gap: 6px;
  }

  .app-layout.has-gradient-bg .app-topbar .sidebar-logo h1 {
    font-size: 17px;
  }

  .app-layout.has-gradient-bg .app-topbar .sidebar-logo .logo-icon {
    width: 34px !important;
    height: 34px !important;
  }
}

@media (max-width: 860px) {
  body:has(.page-side-backdrop) {
    overflow: hidden;
  }

  .page-side-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: calc(88px + env(safe-area-inset-top));
    left: 14px;
    z-index: 1045;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(18, 20, 34, 0.88);
    color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }

  .page-side-backdrop {
    display: block;
    position: fixed;
    inset: 76px 0 0;
    z-index: 1030;
    border: 0;
    background: rgba(2, 4, 16, 0.54);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .page-side-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.82);
  }

  .page-side-close:hover,
  .page-side-close:focus-visible {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    outline: none;
  }

  .coach-library-desktop-icon {
    display: none;
  }

  .coach-library.page-side-drawer,
  .gaming-history-sidebar.page-side-drawer,
  .live-session-sidebar.page-side-drawer {
    position: fixed !important;
    inset: 76px auto 0 0 !important;
    z-index: 1040 !important;
    width: min(86vw, 340px) !important;
    min-width: 0 !important;
    height: calc(100dvh - 76px) !important;
    min-height: calc(100dvh - 76px) !important;
    max-height: calc(100dvh - 76px) !important;
    padding: 18px 0 calc(16px + env(safe-area-inset-bottom)) !important;
    overflow: hidden auto !important;
    border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-bottom: 0 !important;
    background: rgba(8, 10, 24, 0.96) !important;
    box-shadow: 28px 0 90px rgba(0, 0, 0, 0.42) !important;
    transform: translateX(-104%) !important;
    transition: transform 220ms ease, box-shadow 220ms ease !important;
    -webkit-overflow-scrolling: touch;
  }

  .coach-library.page-side-drawer.is-open,
  .gaming-history-sidebar.page-side-drawer.is-open,
  .live-session-sidebar.page-side-drawer.is-open {
    transform: translateX(0) !important;
  }

  /* Pastel : le tiroir mobile garde le fond coloré du sidebar
     (sinon texte sombre sur fond sombre = menu invisible). */
  [data-style="pastel"] .coach-library.page-side-drawer {
    background: #84a9f5 !important;
    border-right-color: rgba(0, 0, 0, 0.16) !important;
  }
  [data-style="pastel"] .live-session-sidebar.page-side-drawer {
    margin: 0 !important;
    background: #c3d9d0 !important;
    border-right-color: rgba(0, 0, 0, 0.16) !important;
  }

  .coach-workspace {
    grid-template-columns: 1fr !important;
  }

  .coach-main-panel {
    grid-column: 1;
    width: min(100%, 780px);
    max-width: none;
  }

  .coach-project-list {
    grid-template-columns: 1fr !important;
  }

  .coach-recent-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .gaming-page-shell,
  .live-coaching-page {
    grid-template-columns: 1fr !important;
  }

  .gaming-page-shell .page-header,
  .gaming-home-main,
  .live-coaching-page .page-header,
  .live-main-panel {
    grid-column: 1 !important;
    justify-self: center !important;
    width: min(920px, calc(100% - 24px)) !important;
  }

  .gaming-home-main,
  .live-main-panel {
    grid-row: 2 !important;
  }

  .gaming-history-sidebar.page-side-drawer .gaming-history-shell,
  .live-session-sidebar.page-side-drawer .live-session-sidebar-shell {
    height: 100%;
    max-height: none;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

@media (max-width: 420px) {
  .page-side-toggle {
    top: calc(82px + env(safe-area-inset-top));
    left: 12px;
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .coach-library.page-side-drawer,
  .gaming-history-sidebar.page-side-drawer,
  .live-session-sidebar.page-side-drawer {
    width: min(88vw, 320px) !important;
  }
}

/* ═══════════════ Chat Notes Panel ═══════════════ */

.chat-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Bouton d'ouverture dans le header du chat */
.chat-notes-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--nb-border);
  background: transparent;
  color: var(--nb-text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.chat-notes-toggle:hover {
  background: var(--nb-surface);
  color: var(--nb-text);
}

.chat-notes-toggle--active {
  background: var(--nb-accent-bg);
  border-color: var(--nb-accent);
  color: var(--nb-accent);
}

/* Carte flottante, détachée des bords, alignée sur le style des panneaux glass */
.chat-notes-panel {
  width: 320px;
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 12px 12px 0;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--nb-border);
  background: var(--nb-bg-secondary);
  min-height: 0;
}

.chat-notes-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--nb-text);
}

.chat-notes-close {
  margin-left: auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--nb-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.chat-notes-close:hover {
  background: var(--nb-surface-hover);
  color: var(--nb-text);
}

/* Zone d'écriture : transparente, c'est la carte qui porte le style */
.chat-notes-textarea {
  flex: 1 1 55%;
  resize: none;
  border: none;
  background: transparent;
  outline: none;
  padding: 2px 0;
  font: inherit;
  font-size: 14px;
  line-height: 1.65;
  color: var(--nb-text);
  min-height: 0;
}

.chat-notes-textarea::placeholder {
  color: var(--nb-text-muted);
}

.chat-notes-hint {
  font-size: 11px;
  color: var(--nb-text-muted);
}

.chat-confidential-card {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--nb-border);
  border-radius: 12px;
  background: var(--nb-surface);
  color: var(--nb-text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}

.chat-confidential-card:hover {
  background: var(--nb-surface-hover);
}

.chat-confidential-card.is-active {
  border-color: rgba(48, 209, 88, 0.48);
  background: rgba(48, 209, 88, 0.12);
}

.chat-confidential-card.is-locked {
  opacity: 0.68;
}

.chat-confidential-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--nb-text-secondary);
}

.chat-confidential-card.is-active .chat-confidential-icon {
  color: #30d158;
}

.chat-confidential-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-confidential-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--nb-text);
}

.chat-confidential-badge {
  flex-shrink: 0;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(132, 170, 255, 0.18);
  color: #84aaff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.chat-confidential-sub {
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--nb-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-confidential-switch {
  width: 42px;
  height: 24px;
  padding: 3px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.15s;
}

.chat-confidential-card.is-active .chat-confidential-switch {
  background: rgba(48, 209, 88, 0.35);
}

.chat-confidential-knob {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--nb-text);
  transition: transform 0.15s;
}

.chat-confidential-card.is-active .chat-confidential-knob {
  transform: translateX(18px);
}

/* ── Thème gradient sombre (app-layout.has-gradient-bg) : look "liquid glass" ── */
@keyframes notes-panel-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

.app-layout.has-gradient-bg .chat-notes-panel {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  animation: notes-panel-in 0.25s ease-out;
}

.app-layout.has-gradient-bg .chat-notes-header .chat-notes-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.app-layout.has-gradient-bg .chat-notes-header::after {
  content: '';
  display: none;
}

.app-layout.has-gradient-bg .chat-notes-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  margin: 2px 0 4px;
}

.app-layout.has-gradient-bg .chat-notes-header {
  color: #ffffff;
}

.app-layout.has-gradient-bg .chat-notes-textarea {
  color: rgba(255, 255, 255, 0.88);
}

.app-layout.has-gradient-bg .chat-notes-textarea::placeholder {
  color: rgba(255, 255, 255, 0.32);
}

.app-layout.has-gradient-bg .chat-notes-hint {
  color: rgba(255, 255, 255, 0.30);
}

.app-layout.has-gradient-bg .chat-confidential-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
}

.app-layout.has-gradient-bg .chat-confidential-card:hover {
  background: rgba(255, 255, 255, 0.09);
}

.app-layout.has-gradient-bg .chat-confidential-card.is-active {
  border-color: rgba(48, 209, 88, 0.42);
  background: rgba(48, 209, 88, 0.12);
}

.app-layout.has-gradient-bg .chat-confidential-title {
  color: rgba(255, 255, 255, 0.92);
}

.app-layout.has-gradient-bg .chat-confidential-sub {
  color: rgba(255, 255, 255, 0.38);
}

.app-layout.has-gradient-bg .chat-notes-toggle {
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.62);
}

.app-layout.has-gradient-bg .chat-notes-toggle:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}

.app-layout.has-gradient-bg .chat-notes-toggle--active {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.app-layout.has-gradient-bg .chat-notes-close {
  color: rgba(255, 255, 255, 0.45);
}

.app-layout.has-gradient-bg .chat-notes-close:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}

/* Quand le panneau Notes est ouvert : le coach passe en pleine largeur
   pour que les notes soient calées au bord droit de l'écran.
   (Sans cela, .coach-main-panel est une colonne centrée max 780px.) */
.coach-main-panel:has(.chat-notes-panel) {
  width: 100%;
  max-width: none;
  justify-self: stretch;
  padding-right: 0;
}

/* Header aligné à gauche quand les notes sont ouvertes (le titre n'est plus centré) */
.coach-main-panel:has(.chat-notes-panel) .chat-header {
  width: 100%;
  margin: 0;
  justify-content: flex-start;
  padding-left: var(--sp-md);
}

/* La colonne de chat reste centrée et lisible dans l'espace restant */
.coach-main-panel:has(.chat-notes-panel) .chat-messages-inner,
.coach-main-panel:has(.chat-notes-panel) .chat-bottom {
  width: min(920px, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* ── Documents de la conversation, intégrés au panneau ── */
.chat-notes-docs {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  max-height: 42%;
}

.chat-notes-docs-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--nb-text);
}

.chat-notes-doc-add {
  margin-left: auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nb-border);
  border-radius: 50%;
  background: transparent;
  color: var(--nb-text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.chat-notes-doc-add:hover:not(:disabled) {
  background: var(--nb-surface-hover);
  color: var(--nb-text);
}

.chat-notes-doc-add:disabled {
  opacity: 0.4;
  cursor: default;
}

.chat-notes-docs-empty {
  font-size: 12px;
  line-height: 1.5;
  color: var(--nb-text-muted);
}

.chat-notes-doc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  min-height: 0;
}

.chat-notes-doc {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--nb-border);
  background: var(--nb-surface);
  color: var(--nb-text-secondary);
}

.chat-notes-doc--loading {
  opacity: 0.75;
}

.chat-notes-doc-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.chat-notes-doc-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--nb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-notes-doc-sub {
  font-size: 11px;
  color: var(--nb-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-notes-doc-remove {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--nb-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.chat-notes-doc-remove:hover:not(:disabled) {
  background: var(--nb-surface-hover);
  color: var(--nb-text);
}

/* Documents — thème gradient sombre */
.app-layout.has-gradient-bg .chat-notes-docs-header {
  color: #ffffff;
}

.app-layout.has-gradient-bg .chat-notes-doc {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
}

.app-layout.has-gradient-bg .chat-notes-doc-name {
  color: rgba(255, 255, 255, 0.90);
}

.app-layout.has-gradient-bg .chat-notes-doc-sub,
.app-layout.has-gradient-bg .chat-notes-docs-empty {
  color: rgba(255, 255, 255, 0.35);
}

.app-layout.has-gradient-bg .chat-notes-doc-add {
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.62);
}

.app-layout.has-gradient-bg .chat-notes-doc-add:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}

.app-layout.has-gradient-bg .chat-notes-doc-remove {
  color: rgba(255, 255, 255, 0.40);
}

.app-layout.has-gradient-bg .chat-notes-doc-remove:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}

/* Écrans moyens : panneau plus étroit */
@media (max-width: 1180px) {
  .chat-notes-panel {
    width: 270px;
    margin: 10px 10px 10px 0;
  }
}

/* Mobile : panneau en overlay par-dessus le chat */
@media (max-width: 768px) {
  .chat-body {
    position: relative;
  }

  .chat-notes-panel {
    position: absolute;
    right: 10px;
    top: 10px;
    bottom: 10px;
    width: min(85vw, 320px);
    margin: 0;
    z-index: 30;
    background: rgba(12, 10, 26, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.35);
  }
}

/* ═══════════════ Virtualisation native des longues conversations ═══════════════ */
/* content-visibility: auto = le navigateur ne rend que les messages visibles.
   Évite le jank au-delà de ~200 messages sans dépendance type react-window.
   contain-intrinsic-size préserve une hauteur estimée pour un scroll stable. */

.chat-messages .message {
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
}

/* Texte de confidentialité sous la bulle de saisie */
.chat-privacy-text {
  margin: 8px 4px 0;
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--nb-text-muted);
}

.chat-privacy-text a {
  color: var(--nb-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.app-layout.has-gradient-bg .chat-privacy-text {
  color: rgba(255, 255, 255, 0.30);
}

.app-layout.has-gradient-bg .chat-privacy-text a {
  color: rgba(255, 255, 255, 0.50);
}

/* Carte "Profiling stratégique" centrée verticalement dans la page */
.coach-main-panel--profiling:not(:has(.chat-container)) .profiling-entry-card {
  margin-top: auto;
  margin-bottom: auto;
}

/* ==========================================
   Interface Pastel — Menu (topbar)
   Placé en fin de fichier pour surcharger les règles
   !important de .app-layout.has-gradient-bg .app-topbar.
   ========================================== */
[data-style="pastel"] .app-layout.has-gradient-bg .app-topbar.sidebar {
  background: rgba(10, 10, 12, 0.88) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
}

[data-style="pastel"] .app-layout.has-gradient-bg .app-topbar .nav-item {
  color: #9298ad;
  border-radius: 12px !important;
  transition: background 0.2s ease, color 0.2s ease;
}

[data-style="pastel"] .app-layout.has-gradient-bg .app-topbar .nav-item:hover {
  background: #1c1c20;
  color: #f5f6fa;
}

/* Item actif : pastille bleu pervenche, texte et icône noirs */
[data-style="pastel"] .app-layout.has-gradient-bg .app-topbar .nav-item.active {
  background: #84a9f5 !important;
  color: #0a0a0c !important;
  font-weight: 700;
  box-shadow: none !important;
}

[data-style="pastel"] .app-layout.has-gradient-bg .app-topbar .nav-item.active svg {
  color: #0a0a0c !important;
}

/* Avatar / carte compte dans la topbar */
[data-style="pastel"] .app-layout.has-gradient-bg .app-topbar .account-card {
  background: #1c1c20;
  border: 1px solid rgba(255, 255, 255, 0.09);
}

/* Dropdown du profil : surfaces flat anthracite */
[data-style="pastel"] .account-card-body,
[data-style="pastel"] .account-card-dropdown,
[data-style="pastel"] .account-card-panel {
  background: #151518 !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55) !important;
}

/* Switchs (See free, Interface Pastel) : état actif en sauge */
[data-style="pastel"] .account-card-switch.is-on {
  background: #c3d9d0 !important;
}
[data-style="pastel"] .account-card-switch.is-on .account-card-switch-knob {
  background: #0a0a0c !important;
}

/* Menu pastel : texte seul, sans icônes (comme la maquette V3) */
[data-style="pastel"] .app-layout.has-gradient-bg .app-topbar .nav-item > svg,
[data-style="pastel"] .app-layout.has-gradient-bg .app-topbar .nav-item > .mi,
[data-style="pastel"] .app-layout.has-gradient-bg .app-topbar .nav-item > .material-symbols-outlined {
  display: none !important;
}

/* ── Dropdown profil en V3 pastel : on remplace le jaune/vert par la palette pastel ── */
/* Barre d'XP : bleu pervenche */
[data-style="pastel"] .account-card-progress-bar {
  background: #84a9f5;
}

/* Icône éclair XP (couleur inline jaune → pervenche) */
[data-style="pastel"] .account-card-metric-main .mi {
  color: #84a9f5 !important;
}

/* Pastille "Plan actif" : lavande */
[data-style="pastel"] .account-card-upgrade-icon {
  background: rgba(217, 185, 247, 0.16);
}
[data-style="pastel"] .account-card-upgrade-icon .mi,
[data-style="pastel"] .account-card-upgrade-icon svg {
  color: #d9b9f7 !important;
}

/* Bouton "Gérer le plan / Voir les plans" : lavande, texte noir */
[data-style="pastel"] .account-card-upgrade-btn {
  background: #d9b9f7;
  color: #16091f;
  font-size: 12px;
  letter-spacing: 0.02em;
  border-radius: 14px;
  transition: filter 0.2s;
}
[data-style="pastel"] .account-card-upgrade-btn:hover {
  filter: brightness(1.05);
}

/* Chip "Voir plus" */
[data-style="pastel"] .account-card-chip {
  background: #26262c;
}

/* Ligne active du toggle : pas de halo bleu, juste une surface douce */
[data-style="pastel"] .account-card-action--toggle.is-active {
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
}
[data-style="pastel"] .account-card-action--toggle.is-active .account-card-action-subtitle {
  color: #c3d9d0 !important;
}

/* ==========================================
   Interface Pastel — Autres pages
   Les pages utilisent les variables --nb-* (déjà
   pastellisées plus haut) ; on flatte ici les panneaux
   glass et on remplace les derniers accents codés en dur.
   ========================================== */

/* 1. Panneaux Liquid Glass → cartes flat anthracite (styles inline → !important) */
[data-style="pastel"] .lg-panel {
  background: #151518 !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 2. Boutons primaires : pervenche → texte noir (contraste) */
[data-style="pastel"] .btn-primary {
  background: #84a9f5;
  color: #0a0a0c;
  font-weight: 700;
}
[data-style="pastel"] .btn-primary:hover {
  background: #a3c0fa;
  box-shadow: none;
}

/* 3. Coach : cartes sujets + chat */
[data-style="pastel"] .topic-card {
  background: #151518;
  border-color: rgba(255, 255, 255, 0.07);
}
[data-style="pastel"] .topic-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}
[data-style="pastel"] .message-user-pill {
  background: #84a9f5;
  color: #0a0a0c;
  font-weight: 500;
}
[data-style="pastel"] .suggestion-chip {
  background: #1c1c20;
  border-color: rgba(255, 255, 255, 0.08);
}
[data-style="pastel"] .suggestion-chip:hover {
  background: #26262c;
  border-color: rgba(255, 255, 255, 0.2);
}
[data-style="pastel"] .chat-input {
  background: #151518;
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}
[data-style="pastel"] .typing-indicator {
  background: #1c1c20;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* 4. Gaming / Battle : jaune-vert néon → palette pastel */
[data-style="pastel"] .battle-intro-start {
  background: #e8835f;
  color: #0a0a0c;
}
[data-style="pastel"] .battle-outcome-pill.is-success {
  color: #c3d9d0;
  border-color: rgba(195, 217, 208, 0.25);
  background: rgba(195, 217, 208, 0.1);
}
[data-style="pastel"] .battle-analysis-kicker {
  color: #e8835f;
}
[data-style="pastel"] .battle-analysis-step-dot {
  background: #e8835f;
  box-shadow: 0 0 10px rgba(232, 131, 95, 0.35);
}

/* 5. Live coaching : sélecteurs de mode */
[data-style="pastel"] .live-mode-btn.active {
  background: #c3d9d0;
  color: #0a0a0c;
}
[data-style="pastel"] .live-language-chip.active {
  background: #c3d9d0;
  color: #0a0a0c;
  border-color: transparent;
}

/* 6. Feedback : modale + catégorie/note actives */
[data-style="pastel"] .fbk-modal {
  background: #151518 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6) !important;
}

/* Feedback : note active en sauge */
[data-style="pastel"] .fbk-rating-btn--active,
[data-style="pastel"] .fbk-rating-btn--active:hover {
  border-color: #c3d9d0;
  background: rgba(195, 217, 208, 0.07);
  box-shadow: none;
}

/* ==========================================
   Interface Pastel — Standardisation BENTO
   Règles communes : cartes flat #151518, radius 20px,
   gaps 14px, hover lift, bandeaux pastel + icônes noires.
   ========================================== */

/* ── Tokens bento : toutes les cartes au même standard ── */
[data-style="pastel"] .lg-panel,
[data-style="pastel"] .topic-card,
[data-style="pastel"] .gaming-mode-card,
[data-style="pastel"] .hud-scenario,
[data-style="pastel"] .plan-option-card,
[data-style="pastel"] .live-coaching-page-shell .card,
[data-style="pastel"] .gaming-history-block {
  border-radius: 20px !important;
  background: #151518 !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
}

/* Hover bento : lift discret + bordure visible */
[data-style="pastel"] .topic-card:hover,
[data-style="pastel"] .gaming-mode-card:hover,
[data-style="pastel"] .hud-scenario:hover,
[data-style="pastel"] .plan-option-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Gaps uniformes des grilles */
[data-style="pastel"] .topic-grid,
[data-style="pastel"] .gaming-home-grid,
[data-style="pastel"] .hud-scenario-grid,
[data-style="pastel"] .gaming-modes {
  gap: 14px !important;
}

/* Headers de page standardisés (comme la home V3) */
[data-style="pastel"] .page-header h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
[data-style="pastel"] .page-header p {
  color: var(--nb-text-secondary);
  font-size: 14px;
}

/* Boutons : radius standard bento */
[data-style="pastel"] .btn {
  border-radius: 14px;
}

/* ── Coach : topic cards en bento (bandeau pastel + icône noire) ── */
[data-style="pastel"] .topic-card {
  padding: 0 !important;
  align-items: stretch;
}
[data-style="pastel"] .topic-card-content {
  width: 100% !important;
  padding: 0 !important;
  align-items: stretch !important;
  text-align: left !important;
}
[data-style="pastel"] .topic-card .topic-icon {
  width: 100% !important;
  height: 92px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  color: #0a0a0c !important;
  background: #84a9f5 !important;
}
[data-style="pastel"] .topic-card .topic-icon svg {
  color: #0a0a0c !important;
  stroke: #0a0a0c;
}
/* Carte "Conseil personnalisé" : même règle (annule le cyan) */
[data-style="pastel"] .coach-main-panel .topic-card--personalized .topic-icon {
  color: #0a0a0c !important;
  background: #84a9f5 !important;
}
/* CTA "Démarrer →" : pervenche, aligné avec le padding de la carte */
[data-style="pastel"] .coach-main-panel .topic-card-cta {
  color: #84a9f5 !important;
  padding: 6px 16px 16px;
}
/* Carte large : contenu pleine largeur (l'image est masquée) */
[data-style="pastel"] .topic-card--wide .topic-card-content {
  width: 100% !important;
  max-width: none !important;
}
[data-style="pastel"] .topic-card h3 {
  padding: 0 16px;
  font-size: 15px;
  font-weight: 800;
}
[data-style="pastel"] .topic-card p,
[data-style="pastel"] .topic-card .topic-desc {
  padding: 0 16px 16px;
  font-size: 12.5px;
  color: var(--nb-text-secondary);
}
/* Photos des cartes masquées : bento flat */
[data-style="pastel"] .topic-card-media {
  display: none !important;
}
[data-style="pastel"] .topic-card--wide::after {
  display: none;
}

/* Profiling : carte d'entrée flat avec accent pêche */
[data-style="pastel"] .profiling-entry-card {
  background: #151518 !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-left: 4px solid #f4d0ad !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}
[data-style="pastel"] .profiling-entry-kicker {
  color: #f4d0ad !important;
  background: rgba(244, 208, 173, 0.1) !important;
}
[data-style="pastel"] .profiling-entry-cta {
  color: #f4d0ad !important;
}

/* ── Gaming : sections et scénarios ── */
[data-style="pastel"] .gaming-section-kicker {
  color: #e8835f !important;
}
[data-style="pastel"] .hud-scenario-accent {
  background: #e8835f !important;
}
[data-style="pastel"] .hud-scenario-cta {
  background: #e8835f !important;
  color: #0a0a0c !important;
  border-radius: 12px !important;
}

/* ── Plans : carte active soulignée pervenche ── */
[data-style="pastel"] .plan-option-card--active {
  border-color: #d9b9f7 !important;
  box-shadow: inset 0 0 0 1px #d9b9f7 !important;
}

/* ── Modales & overlays : flat anthracite ── */
[data-style="pastel"] .fbk-modal-overlay,
[data-style="pastel"] .modal-overlay {
  background: rgba(5, 5, 7, 0.78);
  backdrop-filter: blur(8px);
}

/* Bento : on retire l'effet skew des scénarios gaming */
[data-style="pastel"] .hud-scenario,
[data-style="pastel"] .hud-scenario-inner,
[data-style="pastel"] .hud-scenario:hover .hud-scenario-inner {
  transform: none !important;
}

/* Teintes par module (mapping de la home) : boutons primaires par page */
[data-style="pastel"] .gaming-page-shell .btn-primary { background: #e8835f; }
[data-style="pastel"] .gaming-page-shell .btn-primary:hover { background: #efa183; }
[data-style="pastel"] .live-coaching-page-shell .btn-primary { background: #c3d9d0; }
[data-style="pastel"] .live-coaching-page-shell .btn-primary:hover { background: #d4e4dd; }
[data-style="pastel"] .plans-page-shell .btn-primary { background: #d9b9f7; }
[data-style="pastel"] .plans-page-shell .btn-primary:hover { background: #e4ccfa; }

/* ─────────────────────────────────────────────
   Claude MCP install page
   ───────────────────────────────────────────── */
.mcp-claude-page {
  padding-bottom: 64px;
}

.mcp-claude-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 28px;
}

.mcp-claude-hero-copy {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 26px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 18% 18%, rgba(79, 124, 255, 0.24), transparent 35%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}

.mcp-claude-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  margin-bottom: 22px;
  color: #0b0b0f;
  background: #d9b9f7;
  box-shadow: 0 18px 54px rgba(217, 185, 247, 0.2);
}

.mcp-claude-hero h1 {
  max-width: 660px;
  margin: 0;
  color: var(--nb-text-primary);
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 0.98;
  letter-spacing: 0;
  font-weight: 900;
}

.mcp-claude-hero p {
  max-width: 620px;
  margin: 18px 0 0;
  color: var(--nb-text-secondary);
  font-size: 16px;
  line-height: 1.6;
}

.mcp-claude-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.mcp-claude-actions .btn,
.mcp-copy-row .btn,
.mcp-status-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mcp-claude-status {
  padding: 24px;
  min-height: 100%;
}

.mcp-status-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mcp-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex: 0 0 auto;
}

.mcp-claude-status.is-ready .mcp-status-icon {
  color: #30d158;
  background: rgba(48, 209, 88, 0.12);
}

.mcp-claude-status.is-locked .mcp-status-icon {
  color: #ff9f0a;
  background: rgba(255, 159, 10, 0.13);
}

.mcp-status-label {
  margin-bottom: 5px;
  color: var(--nb-text-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mcp-status-top strong {
  display: block;
  color: var(--nb-text-primary);
  font-size: 17px;
  line-height: 1.28;
}

.mcp-status-list {
  display: grid;
  gap: 14px;
  margin: 20px 0 0;
}

.mcp-status-list div {
  display: grid;
  gap: 4px;
}

.mcp-status-list dt {
  color: var(--nb-text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mcp-status-list dd {
  margin: 0;
  color: var(--nb-text-secondary);
  font-size: 14px;
  line-height: 1.4;
}

.mcp-status-cta {
  width: 100%;
  justify-content: center;
  margin-top: 22px;
}

.mcp-install-panel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: clamp(22px, 3vw, 30px);
  margin-bottom: 22px;
  background: rgba(255, 255, 255, 0.045);
}

.mcp-section-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.mcp-section-head h2 {
  margin: 0;
  color: var(--nb-text-primary);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.1;
  letter-spacing: 0;
}

.mcp-section-head p {
  max-width: 430px;
  margin: 0;
  color: var(--nb-text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.mcp-copy-field {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.22);
}

.mcp-copy-label {
  margin-bottom: 8px;
  color: var(--nb-text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mcp-copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.mcp-copy-row code {
  overflow: hidden;
  color: var(--nb-text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mcp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.mcp-step,
.mcp-capability-grid article {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.04);
}

.mcp-step-number {
  position: absolute;
  top: 14px;
  right: 14px;
  color: rgba(255, 255, 255, 0.16);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.mcp-step-icon,
.mcp-capability-grid article > .mi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  margin-bottom: 14px;
  color: #d9b9f7;
  background: rgba(217, 185, 247, 0.12);
}

.mcp-step h3,
.mcp-capability-grid h3 {
  margin: 0 0 8px;
  color: var(--nb-text-primary);
  font-size: 16px;
  line-height: 1.2;
}

.mcp-step p,
.mcp-capability-grid p {
  margin: 0;
  color: var(--nb-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.mcp-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.mcp-copy-error {
  margin-top: 18px;
  color: #ff8a8a;
  font-size: 13px;
}

[data-style="pastel"] .mcp-claude-hero-copy,
[data-style="pastel"] .mcp-install-panel,
[data-style="pastel"] .mcp-step,
[data-style="pastel"] .mcp-capability-grid article {
  border-color: #232323;
  background: #111;
}

[data-style="pastel"] .mcp-claude-mark,
[data-style="pastel"] .mcp-claude-page .btn-primary {
  background: #d9b9f7;
}

@media (max-width: 980px) {
  .mcp-claude-hero {
    grid-template-columns: 1fr;
  }

  .mcp-section-head {
    display: block;
  }

  .mcp-section-head p {
    margin-top: 8px;
  }
}

@media (max-width: 720px) {
  .mcp-claude-page {
    padding-bottom: 42px;
  }

  .mcp-claude-hero-copy,
  .mcp-install-panel {
    border-radius: 20px;
  }

  .mcp-steps,
  .mcp-capability-grid {
    grid-template-columns: 1fr;
  }

  .mcp-copy-row {
    grid-template-columns: 1fr;
  }

  .mcp-copy-row .btn {
    justify-content: center;
  }
}

/* ==========================================
   Interface Pastel — Bibliothèque Coach (menu gauche)
   Panneau collé au bord → carte bento détachée, plus propre.
   ========================================== */
[data-style="pastel"] .coach-library {
  margin: 16px 0 16px 16px;
  height: calc(100vh - 76px - 32px);
  max-height: calc(100vh - 76px - 32px);
  min-height: calc(100vh - 76px - 32px);
  padding: 14px 10px;
  background: #151518;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  gap: 12px;
}

/* Recherche : champ flat arrondi */
[data-style="pastel"] .coach-library-search {
  margin: 0 8px;
  background: #1c1c20;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}
[data-style="pastel"] .coach-library-search:focus-within {
  border-color: rgba(132, 169, 245, 0.5);
}

/* Titres de sections : kickers discrets, façon home V3 */
[data-style="pastel"] .coach-library-heading {
  padding: 0 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nb-text-secondary);
}

/* Items : arrondis homogènes, hover doux */
[data-style="pastel"] .coach-project-item,
[data-style="pastel"] .coach-recent-item {
  border-radius: 12px;
  font-size: 13.5px;
}
[data-style="pastel"] .coach-project-item:hover,
[data-style="pastel"] .coach-recent-item:hover {
  background: #1f1f24;
}

/* Projet actif : teinte pervenche du module Coach */
[data-style="pastel"] .coach-project-row.is-active,
[data-style="pastel"] .coach-project-item.is-active {
  background: rgba(132, 169, 245, 0.13);
}
[data-style="pastel"] .coach-project-row.is-active .coach-project-item,
[data-style="pastel"] .coach-project-item.is-active {
  color: #aec7f8;
}

/* Drop target (drag & drop) : sauge */
[data-style="pastel"] .coach-project-row.is-drop-target {
  background: rgba(195, 217, 208, 0.12);
  outline-color: rgba(195, 217, 208, 0.5);
}

/* ==========================================
   Popup "Réponse à votre feedback" (FeedbackReplyPopup)
   ========================================== */
.frp-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 50vh;
  overflow-y: auto;
}

.frp-item {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  padding: 14px 16px;
}

.frp-meta {
  margin: 0;
  font-size: 12px;
  color: var(--nb-text-secondary);
}

.frp-quote {
  margin: 6px 0 12px;
  font-size: 13px;
  font-style: italic;
  color: var(--nb-text-secondary);
}

.frp-reply {
  border-left: 3px solid #6366f1;
  padding-left: 12px;
}

.frp-reply-author {
  margin: 0;
  font-size: 12px;
  color: #a5b4fc;
}

.frp-reply-text {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--nb-text);
}

.frp-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.frp-btn {
  padding: 11px 22px;
  border-radius: 12px;
  border: none;
  background: #6366f1;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.2s;
}
.frp-btn:hover:not(:disabled) { filter: brightness(1.1); }
.frp-btn:disabled { cursor: wait; opacity: 0.7; }

/* Mode pastel : mêmes teintes que la home (lavande = réponse/action) */
[data-style="pastel"] .frp-item {
  background: #1c1c20;
  border-color: rgba(255, 255, 255, 0.07);
}
[data-style="pastel"] .frp-reply {
  border-left-color: #d9b9f7;
}
[data-style="pastel"] .frp-reply-author {
  color: #d9b9f7;
}
[data-style="pastel"] .frp-btn {
  background: #d9b9f7;
  color: #16091f;
  font-weight: 700;
  border-radius: 14px;
}

/* Sujets Coach : cycle multicolore pastel (bandeau + CTA assortis) */
[data-style="pastel"] .topic-grid > :nth-child(5n+1) .topic-icon { background: #84a9f5 !important; }
[data-style="pastel"] .topic-grid > :nth-child(5n+2) .topic-icon { background: #f4d0ad !important; }
[data-style="pastel"] .topic-grid > :nth-child(5n+3) .topic-icon { background: #e8835f !important; }
[data-style="pastel"] .topic-grid > :nth-child(5n+4) .topic-icon { background: #c3d9d0 !important; }
[data-style="pastel"] .topic-grid > :nth-child(5n+5) .topic-icon { background: #d9b9f7 !important; }

[data-style="pastel"] .topic-grid > :nth-child(5n+1) .topic-card-cta { color: #84a9f5 !important; }
[data-style="pastel"] .topic-grid > :nth-child(5n+2) .topic-card-cta { color: #f4d0ad !important; }
[data-style="pastel"] .topic-grid > :nth-child(5n+3) .topic-card-cta { color: #e8835f !important; }
[data-style="pastel"] .topic-grid > :nth-child(5n+4) .topic-card-cta { color: #c3d9d0 !important; }
[data-style="pastel"] .topic-grid > :nth-child(5n+5) .topic-card-cta { color: #d9b9f7 !important; }

/* ==========================================
   Interface Pastel — Bibliothèque Coach en pervenche
   Carte bleue, texte noir (comme les blocs de la home).
   ========================================== */
[data-style="pastel"] .coach-library {
  background: #84a9f5;
  border-color: transparent;
}

[data-style="pastel"] .coach-library,
[data-style="pastel"] .coach-library .mi {
  color: #0a0a0c;
}

[data-style="pastel"] .coach-library-heading {
  color: rgba(10, 10, 12, 0.55);
}

/* Recherche : champ translucide sombre sur bleu */
[data-style="pastel"] .coach-library-search {
  background: rgba(0, 0, 0, 0.12);
  border-color: transparent;
}
[data-style="pastel"] .coach-library-search:focus-within {
  border-color: rgba(0, 0, 0, 0.35);
}
[data-style="pastel"] .coach-library-search input {
  color: #0a0a0c;
}
[data-style="pastel"] .coach-library-search input::placeholder {
  color: rgba(10, 10, 12, 0.5);
}

/* Items : texte noir, hover assombri */
[data-style="pastel"] .coach-project-item,
[data-style="pastel"] .coach-recent-main,
[data-style="pastel"] .coach-recent-title {
  color: #0a0a0c !important;
}
[data-style="pastel"] .coach-recent-meta {
  color: rgba(10, 10, 12, 0.55) !important;
}
[data-style="pastel"] .coach-project-item--new {
  color: rgba(10, 10, 12, 0.55);
}
[data-style="pastel"] .coach-project-item:hover,
[data-style="pastel"] .coach-recent-item:hover {
  background: rgba(0, 0, 0, 0.1);
}
[data-style="pastel"] .coach-recent-delete {
  color: rgba(10, 10, 12, 0.45);
}
[data-style="pastel"] .coach-recent-delete:hover {
  color: #0a0a0c;
}

/* Projet actif / drop : assombrissement au lieu de teinte claire */
[data-style="pastel"] .coach-project-row.is-active,
[data-style="pastel"] .coach-project-item.is-active {
  background: rgba(0, 0, 0, 0.16);
}
[data-style="pastel"] .coach-project-row.is-active .coach-project-item,
[data-style="pastel"] .coach-project-item.is-active {
  color: #0a0a0c;
}
[data-style="pastel"] .coach-project-row.is-drop-target {
  background: rgba(0, 0, 0, 0.14);
  outline-color: rgba(0, 0, 0, 0.4);
}

/* Menu contextuel des projets : reste sombre lisible */
[data-style="pastel"] .coach-project-menu {
  background: #151518;
  border: 1px solid rgba(255, 255, 255, 0.09);
}

/* Bibliothèque Coach pervenche : TOUT le texte et les icônes en noir */
[data-style="pastel"] .coach-library-top,
[data-style="pastel"] .coach-library-top strong,
[data-style="pastel"] .coach-library-top .mi,
[data-style="pastel"] .coach-library-desktop-icon,
[data-style="pastel"] .coach-library-desktop-icon .mi,
[data-style="pastel"] .page-side-close,
[data-style="pastel"] .coach-library-action,
[data-style="pastel"] .coach-library-action .mi,
[data-style="pastel"] .coach-library-action span,
[data-style="pastel"] .coach-library .coach-library-search .mi {
  color: #0a0a0c !important;
}

/* Compteurs (3, 7…) et petits libellés */
[data-style="pastel"] .coach-library small,
[data-style="pastel"] .coach-library-heading,
[data-style="pastel"] .coach-library-heading span {
  color: rgba(10, 10, 12, 0.55) !important;
}

/* Bouton "Nouveau chat" : pilule sombre translucide, texte noir */
[data-style="pastel"] .coach-library-action--primary {
  background: rgba(0, 0, 0, 0.12) !important;
  border-radius: 12px !important;
}
[data-style="pastel"] .coach-library-action--primary:hover {
  background: rgba(0, 0, 0, 0.18) !important;
}

/* Icônes colorées des conversations (couleur inline du topic) → noir */
[data-style="pastel"] .coach-library .coach-recent-item svg,
[data-style="pastel"] .coach-library .coach-recent-main svg {
  filter: brightness(0) !important;
}

/* Bouton "..." des projets : noir sur fond sombre translucide (était invisible) */
[data-style="pastel"] .coach-project-menu-button {
  background: rgba(0, 0, 0, 0.12) !important;
  color: #0a0a0c !important;
}
[data-style="pastel"] .coach-project-menu-button .mi {
  color: #0a0a0c !important;
}
[data-style="pastel"] .coach-project-menu-button:hover {
  background: rgba(0, 0, 0, 0.2) !important;
}

/* Compteurs dans les items projets et les en-têtes : noir estompé partout */
[data-style="pastel"] .coach-project-item small,
[data-style="pastel"] .coach-library-section small,
[data-style="pastel"] .coach-library-heading small {
  color: rgba(10, 10, 12, 0.55) !important;
}

/* Compteurs en badge notification collé au texte (carte pervenche) */
[data-style="pastel"] .coach-project-item .coach-project-label {
  flex: 0 1 auto;
}
[data-style="pastel"] .coach-project-item small,
[data-style="pastel"] .coach-library-heading small,
[data-style="pastel"] .coach-library-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
  color: #0a0a0c !important;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
/* L'en-tête garde le badge près du libellé, pas à l'opposé */
[data-style="pastel"] .coach-library-heading {
  justify-content: flex-start;
}

/* ==========================================
   Interface Pastel — Live Coaching (teinte sauge)
   ========================================== */
/* Jauge de commande : sauge au lieu du dégradé orange/vert néon */
[data-style="pastel"] .live-command-progress-fill {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 12px),
    #c3d9d0;
  box-shadow: none;
}

/* Statuts et pourcentages verts néon → sauge */
[data-style="pastel"] .live-command-status strong {
  color: #c3d9d0;
}
[data-style="pastel"] .live-launch-status {
  border-color: rgba(195, 217, 208, 0.3);
  background: rgba(195, 217, 208, 0.1);
  color: #c3d9d0;
}
[data-style="pastel"] .live-status-badge {
  border-color: rgba(195, 217, 208, 0.3) !important;
  background: rgba(195, 217, 208, 0.1) !important;
  color: #c3d9d0 !important;
}

/* Barre de score du débrief : sauge unie */
[data-style="pastel"] .live-score-track span {
  background: #c3d9d0;
  box-shadow: none;
}

/* Cartes objectifs : la couleur par objectif laisse place à la sauge */
[data-style="pastel"] .live-prep-shell [style*="--objective-color"] {
  --objective-color: #9ecfbb;
}

/* Kickers et points actifs */
[data-style="pastel"] .live-debrief-kicker,
[data-style="pastel"] .gaming-section-kicker.live-kicker {
  color: #c3d9d0 !important;
}
[data-style="pastel"] .fn-live-dot.is-active,
[data-style="pastel"] .pulse-dot {
  background: #c3d9d0 !important;
  box-shadow: 0 0 10px rgba(195, 217, 208, 0.5) !important;
}

/* Bouton stop : corail doux au lieu du rouge vif */
[data-style="pastel"] .stop-btn {
  background: #e8835f !important;
  color: #0a0a0c !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* Setup overlay : flat anthracite */
[data-style="pastel"] .setup-overlay {
  background: rgba(5, 5, 7, 0.82);
  backdrop-filter: blur(8px);
}
[data-style="pastel"] .setup-step-spinner {
  border-top-color: #c3d9d0 !important;
}

/* ==========================================
   Interface Pastel — Sidebar Live Coaching en sauge
   Même traitement bento que la bibliothèque Coach.
   ========================================== */
[data-style="pastel"] .live-session-sidebar {
  margin: 16px 0 16px 16px;
  height: calc(100vh - 76px - 32px);
  min-height: calc(100vh - 76px - 32px);
  max-height: calc(100vh - 76px - 32px);
  padding: 6px 0 8px;
  background: #c3d9d0;
  border: none;
  border-right: none;
  border-radius: 20px;
}

[data-style="pastel"] .live-session-sidebar,
[data-style="pastel"] .live-session-sidebar .mi,
[data-style="pastel"] .live-session-sidebar-head h2 {
  color: #0a0a0c;
}

/* Compteur : badge notification près du titre */
[data-style="pastel"] .live-session-count {
  background: rgba(0, 0, 0, 0.16);
  color: #0a0a0c;
  min-width: 19px;
  padding: 3px 7px;
}

[data-style="pastel"] .live-session-active-note,
[data-style="pastel"] .live-session-empty {
  color: rgba(10, 10, 12, 0.6);
}

/* Lignes de sessions : translucide sombre sur sauge, texte noir */
[data-style="pastel"] .live-session-row {
  background: rgba(0, 0, 0, 0.08);
  border-color: transparent;
  border-radius: 12px;
}
[data-style="pastel"] .live-session-row:hover {
  background: rgba(0, 0, 0, 0.14);
  border-color: transparent;
}
[data-style="pastel"] .live-session-row.is-selected {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.3);
}
[data-style="pastel"] .live-session-icon {
  background: rgba(0, 0, 0, 0.14);
  color: #0a0a0c;
}
[data-style="pastel"] .live-session-icon svg,
[data-style="pastel"] .live-session-row svg {
  filter: brightness(0);
}
[data-style="pastel"] .live-session-copy,
[data-style="pastel"] .live-session-copy * {
  color: #0a0a0c !important;
}
[data-style="pastel"] .live-session-row small,
[data-style="pastel"] .live-session-row time {
  color: rgba(10, 10, 12, 0.55) !important;
}

/* Profiling : le menu de gauche prend la teinte pêche du module */
[data-style="pastel"] .coach-library--profiling {
  background: #f4d0ad;
}

/* Sidebar Live : alignement avec la structure de la bibliothèque Coach */
.live-session-sidebar .live-session-sidebar-shell {
  padding: 16px 10px;
  gap: 12px;
}
.live-session-sidebar .coach-library-top {
  padding: 0 8px 4px;
}
.live-session-sidebar .coach-library-heading {
  padding: 0 8px;
}

/* ==========================================
   Interface Pastel — Live Coaching : zone centrale
   Hero "Prompteur" + cartes d'objectifs en bento sauge.
   ========================================== */
/* Hero : flat anthracite, fini le dégradé orange/bleu et le glow */
[data-style="pastel"] .live-command-card {
  background: #151518;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: none;
  border-radius: 20px;
}
[data-style="pastel"] .live-command-card::after {
  display: none;
}
[data-style="pastel"] .live-frame-corner {
  display: none;
}

/* Orbe micro : pastille sauge pleine, micro noir */
[data-style="pastel"] .live-command-orb {
  background: #c3d9d0;
  color: #0a0a0c;
  box-shadow: none;
}
[data-style="pastel"] .live-command-orb-ring {
  border: 3px solid rgba(0, 0, 0, 0.15);
}
[data-style="pastel"] .live-command-mic-icon {
  color: #0a0a0c;
}

/* Kicker orange → sauge */
[data-style="pastel"] .live-command-label {
  color: #c3d9d0 !important;
}

/* Jauge : piste sombre, repères discrets */
[data-style="pastel"] .live-command-progress {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

/* Cartes d'objectifs : icône noire sur pastille sauge */
[data-style="pastel"] .objective-card {
  border-radius: 20px !important;
}
[data-style="pastel"] .objective-icon {
  background: #c3d9d0 !important;
  border-radius: 12px;
}
[data-style="pastel"] .objective-icon .mi {
  color: #0a0a0c !important;
}
[data-style="pastel"] .objective-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Token d'objectif sélectionné (brief) : sauge, texte noir */
[data-style="pastel"] .live-objective-token {
  --objective-color: #c3d9d0;
  background: #c3d9d0 !important;
  border-color: transparent !important;
  color: #0a0a0c !important;
}
[data-style="pastel"] .live-objective-token .mi,
[data-style="pastel"] .live-objective-clear {
  color: #0a0a0c !important;
}

/* Kicker du brief */
[data-style="pastel"] .live-prep-kicker {
  color: #c3d9d0 !important;
}

/* ==========================================
   Live Coaching — cartes d'objectifs : même layout
   que les sujets Coach (bandeau pastel + icône noire).
   ========================================== */
/* CTA présent dans les deux modes */
.objective-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--nb-accent);
}

/* Mode pastel : layout vertical bento */
[data-style="pastel"] .objective-card {
  flex-direction: column;
  align-items: stretch !important;
  gap: 0;
  padding: 0 !important;
  min-height: 0;
  overflow: hidden;
}
[data-style="pastel"] .objective-icon {
  width: 100% !important;
  height: 92px !important;
  margin: 0 0 14px;
  border-radius: 0 !important;
  background: #c3d9d0 !important;
}
[data-style="pastel"] .objective-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 16px 16px;
}
[data-style="pastel"] .objective-label {
  font-size: 15px;
  font-weight: 800;
}
[data-style="pastel"] .objective-desc {
  font-size: 12.5px;
  color: var(--nb-text-secondary);
  margin-top: 5px;
  flex: 1;
}
[data-style="pastel"] .objective-cta {
  margin-top: 12px;
}

/* Cycle pastel : bandeau + CTA assortis (comme le Coach) */
[data-style="pastel"] .objective-grid > :nth-child(5n+1) .objective-icon { background: #84a9f5 !important; }
[data-style="pastel"] .objective-grid > :nth-child(5n+2) .objective-icon { background: #f4d0ad !important; }
[data-style="pastel"] .objective-grid > :nth-child(5n+3) .objective-icon { background: #e8835f !important; }
[data-style="pastel"] .objective-grid > :nth-child(5n+4) .objective-icon { background: #c3d9d0 !important; }
[data-style="pastel"] .objective-grid > :nth-child(5n+5) .objective-icon { background: #d9b9f7 !important; }

[data-style="pastel"] .objective-grid > :nth-child(5n+1) .objective-cta { color: #84a9f5; }
[data-style="pastel"] .objective-grid > :nth-child(5n+2) .objective-cta { color: #f4d0ad; }
[data-style="pastel"] .objective-grid > :nth-child(5n+3) .objective-cta { color: #e8835f; }
[data-style="pastel"] .objective-grid > :nth-child(5n+4) .objective-cta { color: #c3d9d0; }
[data-style="pastel"] .objective-grid > :nth-child(5n+5) .objective-cta { color: #d9b9f7; }

/* Live : même largeur de contenu que Coach/Profiling (780px) */
[data-style="pastel"] .live-main-panel {
  width: min(100%, 780px);
  max-width: 780px;
}
/* Et même grille : 3 colonnes égales comme les sujets Coach */
[data-style="pastel"] .objective-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Live : le header de page suit la même colonne de 780px que le contenu */
[data-style="pastel"] .live-coaching-page .page-header {
  width: min(100%, 780px);
  max-width: 780px;
}

/* ── Live : pastille "Micro & données" alignée sur les badges Repères/Confidentialité ── */
[data-style="pastel"] .live-reference-pill {
  min-height: 36px;
  padding: 0 14px;
  gap: 8px;
  font-size: 12.5px;
  background: #151518;
  border-color: rgba(255, 255, 255, 0.09);
}

/* ==========================================
   Interface Pastel — Modale Feedback en V3
   ========================================== */
/* Champs et boutons de type : bento flat, radius standard */
[data-style="pastel"] .fbk-type-btn {
  border-radius: 14px;
  background: #1c1c20;
  border-color: rgba(255, 255, 255, 0.07);
}
[data-style="pastel"] .fbk-type-btn:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: #26262c;
}
/* Type actif : lavande texte noir (cohérent home/menu) */
[data-style="pastel"] .fbk-type-btn--active,
[data-style="pastel"] .fbk-type-btn--active:hover {
  background: #d9b9f7;
  border-color: #d9b9f7;
  color: #16091f;
}

/* Barre de note : dégradé pastel corail → pêche → sauge (au lieu de rouge → vert) */
[data-style="pastel"] .fbk-rating-bar-fill {
  background: linear-gradient(90deg, #e8835f 0%, #f4d0ad 50%, #c3d9d0 100%) !important;
}

/* Cartes de note : bento */
[data-style="pastel"] .fbk-rating-btn {
  border-radius: 14px;
  background: #1c1c20;
  border-color: rgba(255, 255, 255, 0.07);
}
[data-style="pastel"] .fbk-rating-btn:hover {
  border-color: rgba(255, 255, 255, 0.2);
}
/* Libellé de la note active (couleur inline rouge/vert → sauge) */
[data-style="pastel"] .fbk-rating-btn--active .fbk-rating-label {
  color: #c3d9d0 !important;
}

/* Zone de texte */
[data-style="pastel"] .fbk-textarea {
  background: #1c1c20 !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px !important;
}
[data-style="pastel"] .fbk-textarea:focus {
  border-color: rgba(217, 185, 247, 0.5) !important;
}

/* Bouton d'envoi : lavande texte noir */
[data-style="pastel"] .fbk-submit-btn {
  background: #d9b9f7 !important;
  color: #16091f !important;
  border-radius: 14px !important;
  font-weight: 700;
}
[data-style="pastel"] .fbk-submit-btn:hover:not(:disabled) {
  background: #e4ccfa !important;
}
[data-style="pastel"] .fbk-submit-btn:disabled {
  background: #26262c !important;
  color: rgba(255, 255, 255, 0.35) !important;
}