/* ============================================
   MIRROR APP - DESIGN SYSTEM
   ============================================ */

:root {
    /* Colors - Clean Editorial Palette */
    /* 2026 Palette: Built on Pantone Cloud Dancer */
    --color-cloud-dancer: #F0EEE9;
    --color-warm-white: #FAF9F7;
    --color-soft-white: #FFFFFF;

    /* Charcoal hierarchy - warmth through value */
    --color-charcoal: #1A1A1A;
    --color-charcoal-mid: #3D3D3D;
    --color-charcoal-light: #5C5C5C;
    --color-warm-gray: #666666;          /* WCAG AA compliant on light backgrounds (4.7:1) */
    --color-warm-gray-light: #8A8A8A;    /* Original warm gray - for decorative/non-text only */
    --color-silver: #999999;             /* Improved from #B8B8B8 for better contrast (3.5:1) */
    --color-light-border: #D5D5D5;       /* Slightly darker border for visibility */

    /* Text hierarchy - semantic naming for readability */
    --color-text-primary: #1A1A1A;       /* Main text */
    --color-text-secondary: #525252;     /* Secondary text - WCAG AA compliant (5.9:1) */
    --color-text-muted: #666666;         /* Muted text - WCAG AA compliant (4.7:1) */
    --color-text-hint: #757575;          /* Hint/placeholder text - meets AA for large text */

    /* Charcoal opacity levels - for consistent grays */
    --color-charcoal-80: #444444;        /* 80% charcoal */
    --color-charcoal-60: #666666;        /* 60% charcoal - WCAG AA (4.7:1) */
    --color-charcoal-40: #8A8A8A;        /* 40% charcoal - decorative only */
    --color-charcoal-20: #CCCCCC;        /* 20% charcoal - borders/dividers */

    /* Accent - warm black for CTAs (contrast is the accent) */
    --color-accent: #1A1A1A;
    --color-accent-hover: #000000;

    /* Legacy mappings for gradual migration */
    --color-cream: var(--color-cloud-dancer);
    --color-ivory: var(--color-warm-white);
    --color-coral: var(--color-charcoal);
    --color-coral-dark: var(--color-accent-hover);
    --color-terracotta: var(--color-warm-gray);
    --color-gold: var(--color-charcoal-mid);
    --color-sage: var(--color-warm-gray);

    /* Semantic - muted, sophisticated */
    --color-success: #5A6B5A;
    --color-warning: #8B7355;
    --color-danger: #7D5A5A;

    /* Functional Colors - AI State Indicators */
    --color-ai-listening: #4A7C59;           /* Soft green when AI is listening */
    --color-ai-listening-glow: rgba(74, 124, 89, 0.3);
    --color-ai-speaking: #5B7BA5;            /* Soft blue when AI is speaking */
    --color-ai-speaking-glow: rgba(91, 123, 165, 0.3);
    --color-user-speaking: #C4956A;          /* Warm amber when user is speaking */
    --color-user-speaking-glow: rgba(196, 149, 106, 0.3);
    --color-processing: #8B7BA5;             /* Soft purple when processing */
    --color-processing-glow: rgba(139, 123, 165, 0.3);

    /* Mobile Safe Area */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);

    /* Typography */
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-playfair: 'Playfair Display', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;

    /* Typography Aliases - Brand Standard Mappings */
    --font-heading: var(--font-playfair);
    --font-display: var(--font-playfair);
    --font-body: var(--font-sans);

    /* Editorial Typography Refinements */
    --letter-tight: -0.02em;
    --letter-snug: -0.01em;
    --letter-normal: 0;
    --letter-relaxed: 0.015em;
    --letter-wide: 0.04em;
    --letter-editorial: 0.08em;
    --letter-spread: 0.14em;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;

    /* Transitions - refined easing for natural feel */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Shadows - layered for depth */
    --shadow-sm: 0 2px 8px rgba(44, 44, 44, 0.06);
    --shadow-md: 0 4px 20px rgba(44, 44, 44, 0.08);
    --shadow-lg: 0 8px 40px rgba(44, 44, 44, 0.12);
    --shadow-lift: 0 12px 32px rgba(26, 26, 26, 0.12), 0 4px 12px rgba(26, 26, 26, 0.06);
    --shadow-glow: 0 0 0 1px rgba(26, 26, 26, 0.04), 0 2px 8px rgba(26, 26, 26, 0.04);
    --shadow-glow-hover: 0 0 0 1px rgba(26, 26, 26, 0.06), 0 8px 32px rgba(26, 26, 26, 0.08), 0 0 60px rgba(26, 26, 26, 0.03);

    /* Subtle gradients for depth */
    --gradient-subtle: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
    --gradient-card: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,249,247,1) 100%);

    /* Glow-up: Shimmer gradient for text */
    --gradient-shimmer: linear-gradient(
        120deg,
        var(--color-charcoal) 0%,
        var(--color-charcoal) 40%,
        var(--color-charcoal-mid) 50%,
        var(--color-charcoal) 60%,
        var(--color-charcoal) 100%
    );

    /* Glow-up: Glassmorphism backdrop */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-blur: 12px;
}

/* ============================================
   SEMANTIC COLOR TOKENS - Show Don't Tell Initiative
   ============================================ */

:root {
    /* Score ranges (0-100) */
    --score-excellent: #4A5B4A;
    --score-excellent-bg: rgba(74, 91, 74, 0.12);
    --score-good: #5A6B5A;
    --score-good-bg: rgba(90, 107, 90, 0.12);
    --score-developing: #8B6914;
    --score-developing-bg: rgba(139, 105, 20, 0.12);
    --score-needs-work: #9B5A3C;
    --score-needs-work-bg: rgba(155, 90, 60, 0.12);
    --score-critical: #A3423A;
    --score-critical-bg: rgba(163, 66, 58, 0.12);

    /* Severity levels */
    --severity-critical: #B91C1C;
    --severity-critical-bg: rgba(185, 28, 28, 0.08);
    --severity-high: #C75B4A;
    --severity-high-bg: rgba(199, 91, 74, 0.10);
    --severity-medium: #8B6914;
    --severity-medium-bg: rgba(139, 105, 20, 0.10);
    --severity-low: #5A6B5A;
    --severity-low-bg: rgba(90, 107, 90, 0.10);

    /* Feedback colors */
    --feedback-positive: #4A6B4A;
    --feedback-positive-bg: rgba(74, 107, 74, 0.12);
    --feedback-negative: #A3423A;
    --feedback-negative-bg: rgba(163, 66, 58, 0.10);
    --feedback-caution: #8B6914;
    --feedback-caution-bg: rgba(139, 105, 20, 0.10);

    /* Accent colors */
    --accent-coral: #C75B4A;
    --accent-coral-light: rgba(199, 91, 74, 0.15);
}

/* ============================================
   BASE STYLES
   ============================================ */

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

/* Improve touch responsiveness - remove 300ms delay */
button,
.btn,
.scenario-card,
.difficulty-btn,
.env-btn,
.control-btn,
[onclick] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-charcoal);
    background-color: var(--color-cream);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-playfair);
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-charcoal);
    letter-spacing: -0.01em;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    letter-spacing: -0.02em;
}
h2 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    letter-spacing: -0.015em;
}
h3 {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
}

/* Brand placeholder styles - elegant italic serif */
input::placeholder,
textarea::placeholder {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-warm-gray);
    opacity: 0.8;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.screen {
    display: none;
    min-height: 100vh;
    padding-top: 80px;
    animation: fadeIn var(--transition-normal);
}

.screen.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   NAVIGATION
   ============================================ */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(249, 249, 249, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-light-border);
    padding: var(--space-sm) 0;
}

.nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo {
    font-family: var(--font-playfair);
    font-size: 1.5rem;
    font-weight: 500;
    font-style: italic;
    color: var(--color-charcoal);
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: opacity var(--transition-fast);
}

.logo:hover {
    opacity: 0.8;
}

.logo-text {
    letter-spacing: 0.02em;
}

.logo-dot {
    color: var(--color-warm-gray);
    font-weight: 500;
    transition: color var(--transition-fast);
}

.logo:hover .logo-dot {
    color: var(--color-charcoal);
}

/* Navigation Tabs */
.nav-tabs {
    display: flex;
    gap: var(--space-lg);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.nav-tab {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-charcoal-light);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-xs) 0;
    transition: color var(--transition-fast);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.nav-tab:hover {
    color: var(--color-charcoal);
}

.nav-tab.active {
    color: var(--color-charcoal);
    position: relative;
}

.nav-tab.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) scale(1);
    width: 4px;
    height: 4px;
    background: var(--color-charcoal);
    border-radius: 50%;
    animation: dotAppear 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dotAppear {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

/* Nav Right (Avatar) */
.nav-right {
    display: flex;
    align-items: center;
}

.nav-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-charcoal);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.05em;
}

.nav-status {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.85rem;
    color: var(--color-warm-gray);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-warning);
    animation: pulse 2s infinite;
}

.status-dot.connected {
    background: var(--color-success);
    animation: none;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-smooth);
    position: relative;
    letter-spacing: 0.01em;
}

/* Glow-up: Focus ring for accessibility */
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.15);
}

/* Subtle inner highlight on buttons */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--gradient-subtle);
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}

.btn:hover::before {
    opacity: 0.15;
}

.btn-primary {
    background: var(--color-coral);
    color: white;
    box-shadow: 0 2px 4px rgba(26, 26, 26, 0.1), 0 0 0 0 rgba(26, 26, 26, 0);
    transition: all var(--transition-smooth), box-shadow 400ms ease;
}

/* Glow-up: Enhanced hover with subtle glow ring */
.btn-primary:hover {
    background: var(--color-coral-dark);
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        var(--shadow-lift),
        0 0 0 4px rgba(26, 26, 26, 0.04);
}

.btn-primary:active {
    transform: translateY(-1px) scale(1);
    box-shadow: 0 2px 4px rgba(26, 26, 26, 0.15);
    transition: all 100ms ease;
}

.btn-secondary {
    background: transparent;
    color: var(--color-charcoal);
    border: 1px solid var(--color-light-border);
}

.btn-secondary:hover {
    border-color: var(--color-coral);
    color: var(--color-coral);
}

.btn-tertiary {
    background: transparent;
    color: var(--color-warm-gray);
}

.btn-large {
    padding: var(--space-md) var(--space-lg);
    font-size: 1.1rem;
}

.btn-pill {
    border-radius: 30px;
}

.back-btn {
    background: none;
    border: none;
    color: var(--color-warm-gray);
    font-size: 0.9rem;
    cursor: pointer;
    margin-bottom: var(--space-md);
}

.back-btn:hover {
    color: var(--color-coral);
}

/* ============================================
   HOME PAGE
   ============================================ */

.home-hero {
    padding: var(--space-xl) 0;
    text-align: center;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: flex-start;
    padding-top: 80px;
    position: relative;
    overflow: hidden;
}

/* Glow-up: Subtle mesh gradient background */
.home-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(240, 238, 233, 0.8) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(250, 249, 247, 0.6) 0%, transparent 40%),
        radial-gradient(ellipse 50% 30% at 40% 80%, rgba(245, 243, 238, 0.5) 0%, transparent 35%);
    animation: meshFloat 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes meshFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(2%, 1%) rotate(1deg); }
    66% { transform: translate(-1%, 2%) rotate(-0.5deg); }
}

.home-hero > * {
    position: relative;
    z-index: 1;
}

.home-title {
    font-family: var(--font-playfair);
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 500;
    color: var(--color-charcoal);
    margin-bottom: var(--space-md);
    line-height: 1.25;
    letter-spacing: var(--letter-tight);
    background: var(--gradient-shimmer);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 8s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { background-position: 100% 50%; }
    50% { background-position: 0% 50%; }
}

.title-italic {
    font-style: italic;
    background: linear-gradient(135deg, var(--color-charcoal-mid) 0%, var(--color-charcoal-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-description {
    font-size: 1rem;
    color: var(--color-charcoal-light);
    max-width: 580px;
    margin: 0 auto var(--space-lg);
    line-height: 1.7;
}

/* ============================================
   HERO HEADLINE - Single line with inline rotating word
   ============================================ */

.hero-headline {
    font-family: var(--font-playfair);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 500;
    color: var(--color-charcoal);
    letter-spacing: var(--letter-tight);
    line-height: 1.3;
    margin-bottom: var(--space-md);
    text-align: center;
    /* Keep headline on single line */
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

/* Fade during text swap */
.hero-headline.settling {
    opacity: 0;
}

/* Clean final state */
.hero-headline.settled {
    opacity: 1;
}

/* ============================================
   ROTATING WORD - Vertical slot-machine style
   Words slide up within clipped container
   ============================================ */

.rotating-word-wrapper {
    display: inline;
    position: relative;
    /* Width animates dynamically via JS */
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.rotating-word {
    display: inline;
    font-style: normal;
    font-weight: inherit;
    color: var(--color-charcoal-light);
    white-space: nowrap;

    /* Fade transition instead of slide */
    opacity: 1;
    transition: opacity 0.15s ease;
}

.rotating-word.entering {
    opacity: 0;
}

.rotating-word.visible {
    opacity: 1;
}

.rotating-word.exiting {
    opacity: 0;
}


/* Responsive */
@media (max-width: 900px) {
    .hero-headline {
        font-size: clamp(1.75rem, 4.5vw, 2.75rem);
    }
}

@media (max-width: 600px) {
    .hero-headline {
        font-size: clamp(1.4rem, 5vw, 1.8rem);
        line-height: 1.4;
        white-space: normal; /* Allow wrap on mobile */
    }

    .rotating-word-wrapper {
        display: inline;
        height: auto;
        top: 0;
        overflow: visible;
    }

    .rotating-word {
        display: inline;
    }
}

/* ============================================
   HERO VIDEO - Explainer video container
   ============================================ */

.hero-video {
    max-width: 640px;
    width: 100%;
    margin: 0 auto var(--space-xl);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-glow);
    transition: all var(--transition-smooth);
    animation: tileEnter 600ms ease-out backwards;
    animation-delay: 300ms;
}

.hero-video:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow-hover);
}

/* Video playing state - iframe container */
.hero-video.playing {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    transform: none;
}

.hero-video.playing:hover {
    transform: none;
}

/* Loading spinner */
.hero-video.loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-charcoal);
    border-radius: 16px;
    z-index: 5;
}

.hero-video.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: videoSpin 0.8s linear infinite;
    z-index: 6;
}

@keyframes videoSpin {
    to { transform: rotate(360deg); }
}

.hero-video.loaded::before,
.hero-video.loaded::after {
    display: none;
}

/* Replay/Close controls */
.hero-video-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    display: flex;
    gap: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 10;
}

.hero-video.ended .hero-video-controls {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.video-control-btn {
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.video-control-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.video-control-btn.primary {
    background: white;
    color: var(--color-charcoal);
}

.video-control-btn.primary:hover {
    background: rgba(255, 255, 255, 0.9);
}

.hero-video-thumbnail {
    position: relative;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--color-charcoal) 0%, var(--color-charcoal-mid) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    color: rgba(255, 255, 255, 0.7);
}

.video-placeholder-text {
    font-family: var(--font-playfair);
    font-size: 1.25rem;
    font-weight: 500;
    font-style: italic;
    letter-spacing: var(--letter-snug);
}

.video-placeholder-duration {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: var(--letter-wide);
    opacity: 0.6;
}

.hero-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-smooth);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-video-thumbnail:hover .hero-video-play {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.15);
}

.hero-video-play::after {
    content: '';
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent white;
    margin-left: 4px;
}

/* Video playing state */
.hero-video.playing .hero-video-thumbnail {
    display: none;
}

.hero-video video,
.hero-video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .hero-video {
        margin: 0 var(--space-sm) var(--space-lg);
        width: calc(100% - var(--space-md));
        animation: none;
    }

    .hero-video-play {
        width: 60px;
        height: 60px;
    }

    .hero-video-play::after {
        border-width: 8px 0 8px 14px;
    }

    .video-placeholder-text {
        font-size: 1rem;
    }
}

/* Hero Flow - How It Works Visual */
.hero-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: var(--space-xl) auto var(--space-2xl);
    padding: var(--space-lg) var(--space-xl);
    max-width: 720px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 100px;
    border: 1px solid rgba(26, 26, 26, 0.08);
}

.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    opacity: 0;
    animation: flowStepIn 500ms ease-out forwards;
}

.flow-step:nth-child(1) { animation-delay: 200ms; }
.flow-step:nth-child(3) { animation-delay: 400ms; }
.flow-step:nth-child(5) { animation-delay: 600ms; }
.flow-step:nth-child(7) { animation-delay: 800ms; }

@keyframes flowStepIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.flow-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-charcoal);
    border-radius: 50%;
    color: var(--color-cloud-dancer);
    transition: transform 300ms ease, background 300ms ease;
}

.flow-step:hover .flow-icon {
    transform: scale(1.1);
    background: var(--color-charcoal-mid);
}

.flow-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-charcoal);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.flow-connector {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--space-sm);
    opacity: 0;
    animation: flowConnectorIn 400ms ease-out forwards;
}

.flow-connector:nth-of-type(2) { animation-delay: 300ms; }
.flow-connector:nth-of-type(4) { animation-delay: 500ms; }
.flow-connector:nth-of-type(6) { animation-delay: 700ms; }

@keyframes flowConnectorIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.flow-dot {
    width: 4px;
    height: 4px;
    background: var(--color-charcoal-40);
    border-radius: 50%;
}

/* Responsive: Stack on mobile */
@media (max-width: 600px) {
    .hero-flow {
        flex-direction: column;
        gap: var(--space-xs);
        padding: var(--space-md);
        border-radius: 24px;
        max-width: 280px;
    }

    .flow-connector {
        transform: rotate(90deg);
        padding: var(--space-xs) 0;
    }

    .flow-step {
        flex-direction: row;
        gap: var(--space-sm);
    }

    .flow-icon {
        width: 40px;
        height: 40px;
    }

    .flow-icon svg {
        width: 22px;
        height: 22px;
    }
}

.home-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
    max-width: 1000px;
    margin: 0 auto;
}

/* Glow-up: Staggered entrance animation */
@keyframes tileEnter {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.home-tile {
    background: var(--gradient-card);
    padding: var(--space-lg) var(--space-md) var(--space-md);
    border-radius: 16px;
    box-shadow: var(--shadow-glow);
    cursor: pointer;
    transition: all var(--transition-smooth), box-shadow 500ms ease;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: tileEnter 600ms ease-out backwards;
    border: 1px solid transparent;
}

.home-tile:nth-child(1) { animation-delay: 100ms; }
.home-tile:nth-child(2) { animation-delay: 180ms; }
.home-tile:nth-child(3) { animation-delay: 260ms; }
.home-tile:nth-child(4) { animation-delay: 340ms; }
.home-tile:nth-child(5) { animation-delay: 420ms; }

/* Subtle top edge highlight */
.home-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.9) 50%, transparent 100%);
    opacity: 0.7;
}

/* Glow-up: Refined edge glow on hover */
.home-tile::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.08) 0%, transparent 50%, rgba(26, 26, 26, 0.04) 100%);
    opacity: 0;
    transition: opacity var(--transition-smooth);
    pointer-events: none;
    z-index: -1;
}

.home-tile:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-glow-hover);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-color: var(--glass-border);
}

.home-tile:hover::after {
    opacity: 1;
}

.home-tile:active {
    transform: translateY(-3px);
    transition: transform 100ms;
}

.tile-icon {
    margin-bottom: var(--space-md);
    color: var(--color-charcoal-light);
    transition: transform var(--transition-smooth), color var(--transition-fast);
    position: relative;
}

/* Glow-up: Subtle breathing pulse on idle */
@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.02); opacity: 1; }
}

.tile-icon {
    animation: breathe 4s ease-in-out infinite;
}

.home-tile:hover .tile-icon {
    transform: rotate(-3deg) scale(1.1);
    color: var(--color-charcoal);
    animation: none;
}

.tile-icon svg {
    width: 42px;
    height: 42px;
    stroke-width: 1.2;
    transition: stroke-width var(--transition-fast), filter var(--transition-smooth);
}

.home-tile:hover .tile-icon svg {
    stroke-width: 1.4;
    filter: drop-shadow(0 2px 4px rgba(26, 26, 26, 0.1));
}

.tile-label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin-bottom: var(--space-sm);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tile-label-active {
    color: var(--color-charcoal);
}

.tile-description {
    font-size: 0.8rem;
    color: var(--color-charcoal-light);
    line-height: 1.6;
    font-style: italic;
}

/* Placeholder screens */
.placeholder-screen {
    text-align: center;
    padding-top: 80px;
}

.placeholder-screen h2 {
    margin-bottom: var(--space-sm);
}

.placeholder-text {
    color: var(--color-charcoal-light);
    margin-bottom: var(--space-lg);
    font-size: 1rem;
    font-style: italic;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   LANDING / HERO (Legacy)
   ============================================ */

.hero {
    padding: var(--space-xl) 0;
    text-align: center;
}

.hero h1 {
    margin-bottom: var(--space-md);
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--color-charcoal-light);
    max-width: 600px;
    margin: 0 auto var(--space-lg);
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.stat {
    text-align: center;
}

.stat-value {
    display: block;
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-coral);
}

.stat-label {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.hero-ctas {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
}

/* Features */
.features {
    padding: var(--space-xl) 0;
}

.features h2 {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
}

.feature-card {
    background: white;
    padding: var(--space-md);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-sm);
}

.feature-card h3 {
    margin-bottom: var(--space-xs);
}

.feature-card p {
    color: var(--color-charcoal-light);
    font-size: 0.9rem;
}

/* ============================================
   SCENARIO SELECTION
   ============================================ */

#selection {
    padding-top: 80px;
}

#selection h2,
.selection-title {
    font-family: var(--font-playfair);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 400;
    color: var(--color-charcoal);
    text-align: center;
    margin-bottom: var(--space-xl);
}

#selection .back-btn {
    position: absolute;
    top: 80px;
    left: var(--space-md);
}

.mode-tabs {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
    justify-content: center;
}

.mode-tab {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: 1px solid var(--color-light-border);
    border-radius: 24px;
    font-size: 0.85rem;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tab-icon {
    font-size: 1rem;
}

.mode-tab.active {
    background: var(--color-charcoal);
    color: white;
    border-color: var(--color-charcoal);
}

.mode-description {
    color: var(--color-charcoal-light);
    margin-bottom: var(--space-lg);
    text-align: center;
    font-style: italic;
}

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    max-width: 1100px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .scenario-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.scenario-card {
    background: var(--gradient-card);
    padding: var(--space-lg) var(--space-md);
    border-radius: 12px;
    box-shadow: var(--shadow-glow);
    cursor: pointer;
    transition: all var(--transition-smooth);
    border: 1px solid transparent;
    text-align: center;
    position: relative;
}

/* Subtle inner glow on hover */
.scenario-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.04);
    pointer-events: none;
    transition: box-shadow var(--transition-fast);
}

.scenario-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
}

.scenario-card:hover::after {
    box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.08);
}

.scenario-card:active {
    transform: translateY(-2px);
    transition: transform 100ms;
}

.scenario-emoji {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
}

.scenario-icon {
    color: var(--color-charcoal);
    margin-bottom: var(--space-sm);
}

.scenario-icon svg {
    display: block;
    margin: 0 auto;
}

.custom-scenario {
    border-style: dashed;
}

.custom-scenario:hover {
    border-color: var(--color-coral);
}

.scenario-card h3 {
    margin-bottom: var(--space-xs);
    font-size: 1rem;
}

.scenario-card p {
    color: var(--color-charcoal-light);
    font-size: 0.85rem;
    font-style: italic;
    line-height: 1.5;
}

/* ============================================
   SETUP SCREEN
   ============================================ */

#setup {
    padding-top: 100px;
}

#setup h2 {
    text-align: center;
    margin-bottom: var(--space-md);
}

.setup-container {
    max-width: 600px;
    margin: 0 auto;
}

.setup-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.setup-emoji {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--space-sm);
}

.setup-group {
    margin-bottom: var(--space-md);
    background: white;
    padding: var(--space-md);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.setup-group label {
    display: block;
    font-family: var(--font-playfair);
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: var(--space-sm);
    color: var(--color-charcoal);
}

.difficulty-selector,
.environment-selector {
    display: flex;
    gap: var(--space-xs);
}

.difficulty-btn,
.env-btn {
    flex: 1;
    padding: var(--space-sm);
    background: var(--color-ivory);
    border: 1px solid var(--color-light-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-sans);
}

.difficulty-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--space-md) var(--space-sm);
}

.diff-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-charcoal);
    letter-spacing: 0.05em;
}

.diff-desc {
    font-size: 0.7rem;
    color: var(--color-charcoal-light);
    font-style: italic;
}

.difficulty-btn.active,
.env-btn.active {
    border-color: var(--color-charcoal);
    background: rgba(45, 156, 219, 0.08);
}

.difficulty-btn:active,
.env-btn:active {
    transform: scale(0.97);
    opacity: 0.9;
}

.difficulty-btn.active .diff-label {
    color: var(--color-charcoal);
}

.env-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.env-icon {
    font-size: 1.5rem;
}

textarea#user-context {
    width: 100%;
    padding: var(--space-sm);
    border: 1px solid var(--color-light-border);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 1rem;
    resize: vertical;
    min-height: 100px;
    transition: min-height 0.2s ease, border-color 0.2s ease;
}

textarea#user-context.error {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);
}

textarea#user-context.required-field {
    border-left: 3px solid var(--color-primary);
}

.required-badge, .optional-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
    font-weight: 500;
    vertical-align: middle;
}

.required-badge {
    background: rgba(231, 76, 60, 0.15);
    color: var(--color-danger);
}

.optional-badge {
    background: rgba(52, 152, 219, 0.15);
    color: var(--color-charcoal-light);
}

.context-error {
    color: var(--color-danger);
    font-size: 0.875rem;
    margin-top: var(--space-xs);
    display: none;
}

/* Mic permission status */
.mic-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--color-muted);
    margin-top: var(--space-xs);
}

.mic-status.ready {
    color: var(--color-success);
}

.mic-status.denied {
    color: var(--color-danger);
}

.mic-status-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* Additional fields for script/character input */
#additional-fields-container {
    margin-top: var(--space-sm);
}

#additional-fields-container .setup-group {
    margin-bottom: var(--space-sm);
}

.additional-field {
    width: 100%;
    padding: var(--space-sm);
    border: 1px solid var(--color-light-border);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 1rem;
    background: var(--color-surface);
    color: var(--color-text);
}

.additional-field:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(212, 163, 115, 0.2);
}

/* Required field inputs (Company Name, Job Title, etc.) */
.required-field-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--color-light-border);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 1rem;
    background: var(--color-soft-white);
    color: var(--color-charcoal);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.required-field-input:focus {
    outline: none;
    border-color: var(--color-charcoal);
    background: var(--color-warm-white);
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.06);
}

.required-field-input::placeholder {
    color: var(--color-silver);
    font-family: var(--font-serif);
    font-style: italic;
}

/* Card wrapper for required field groups */
#additional-fields-container .setup-group {
    background: var(--color-soft-white);
    padding: var(--space-md);
    border-radius: 12px;
    border: 1px solid var(--color-light-border);
    margin-bottom: var(--space-md);
}

#additional-fields-container .setup-group label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
    font-weight: 500;
    color: var(--color-charcoal);
}

/* Environment selector responsive */
.environment-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.env-btn {
    flex: 1 1 auto;
    min-width: 100px;
}

/* ============================================
   PRACTICE SESSION (Audio-Focused)
   ============================================ */

#practice {
    padding: 0;
    display: none;
    flex-direction: column;
    height: 100vh;
    background: linear-gradient(180deg, var(--color-ivory) 0%, #fff 100%);
}

#practice.active {
    display: flex;
}

.practice-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    padding: var(--space-md);
}

/* Session Header */
.session-header {
    padding: var(--space-sm) 0;
}

/* Scenario Image */
.scenario-image-container {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto var(--space-md);
    border-radius: 50%;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.scenario-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Canvas Avatar */
#avatar-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Gradient Avatar */
.gradient-avatar {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-coral) 0%, #d4847a 50%, var(--color-sage) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.avatar-initials {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 600;
    color: var(--color-cream);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.05em;
    user-select: none;
}

/* Speaking state animation for gradient avatar */
.gradient-avatar.speaking {
    animation: avatarPulse 1.5s ease-in-out infinite;
}

@keyframes avatarPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* Hide scenario image when stylized avatar is present */
.scenario-image-container:has(#stylized-avatar-container) .scenario-image {
    display: none !important;
}

.speaking-overlay {
    position: absolute;
    inset: 0;
    border: 4px solid transparent;
    border-radius: 50%;
    transition: border-color 0.2s;
    pointer-events: none;
}

.speaking-overlay.active {
    border-color: var(--color-charcoal);
    animation: speakingGlow 1.5s infinite;
}

@keyframes speakingGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(26, 26, 26, 0.3);
    }
    50% {
        box-shadow: 0 0 15px 8px rgba(26, 26, 26, 0.15);
    }
}

/* ============================================
   EDITORIAL AVATAR - Minimal Line Portrait
   ============================================ */
.editorial-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-warm-white);
    border-radius: 50%;
    overflow: hidden;
}

.editorial-avatar svg.editorial-portrait {
    width: 90%;
    height: 90%;
    transition: transform var(--transition-smooth);
}

/* Smooth lip-sync transitions */
.editorial-avatar .mouth-path {
    transition: d 0.08s ease-out;
}

.editorial-avatar .lower-lip {
    transition: d 0.1s ease-out;
}

/* Subtle animation when speaking */
.editorial-avatar.speaking svg {
    animation: subtleBreathing 4s ease-in-out infinite;
}

@keyframes subtleBreathing {
    0%, 100% {
        transform: scale(1) translateY(0);
    }
    50% {
        transform: scale(1.005) translateY(-0.5px);
    }
}

/* Avatar container positioning */
#stylized-avatar-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Subtle speaking indicator - refined ring */
#stylized-avatar-container::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    pointer-events: none;
}

#stylized-avatar-container.speaking::after {
    border-color: var(--color-charcoal);
    box-shadow: 0 0 12px rgba(26, 26, 26, 0.1);
    animation: editorialPulse 3s ease-in-out infinite;
}

#stylized-avatar-container.speaking .editorial-avatar {
    /* Add speaking class for lip-sync */
}

@keyframes editorialPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(26, 26, 26, 0.15);
    }
    50% {
        box-shadow: 0 0 8px 2px rgba(26, 26, 26, 0.08);
    }
}

@keyframes avatarSpeakingPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(26, 26, 26, 0.2);
    }
    50% {
        box-shadow: 0 0 15px 5px rgba(26, 26, 26, 0.1);
    }
}

/* Avatar in 2D mode container */
.avatar-2d-container {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--color-warm-white);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
}

.avatar-2d-container .stylized-avatar {
    border-radius: 0;
}

.session-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.session-scenario-label {
    font-weight: 600;
    color: var(--color-charcoal);
}

.session-timer {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-warm-gray);
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Timer countdown warning states */
.session-timer.timer-warning {
    color: var(--color-coral);
    font-weight: 600;
    animation: timerPulse 1s ease-in-out infinite;
}

.session-timer.timer-expired {
    color: #E53935;
    font-weight: 700;
}

@keyframes timerPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.85; }
}

/* AI Conversation Area */
.ai-conversation-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md) 0;
}

.ai-partner-info {
    text-align: center;
    margin-bottom: var(--space-md);
}

.ai-role {
    display: block;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-charcoal);
}

.ai-status {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    transition: color 0.3s ease;
}

.ai-status.listening-pulse {
    animation: listening-pulse 2s ease-in-out infinite;
    color: var(--color-charcoal);
}

@keyframes listening-pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

.ai-response-bubble {
    display: none !important; /* Hide AI speech captions - user listens, not reads */
    visibility: hidden !important;
}

#ai-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-charcoal);
    text-align: center;
}

/* User Response Area */
.user-response-area {
    padding: var(--space-md) 0;
}

.transcript-display {
    display: none !important; /* Hide user speech captions - natural conversation flow */
    visibility: hidden !important;
}

.transcript-label {
    font-weight: 600;
    color: var(--color-coral);
    margin-right: var(--space-xs);
}

#live-transcript {
    color: var(--color-charcoal-light);
    font-style: italic;
}

#live-transcript.active {
    color: var(--color-charcoal);
    font-style: normal;
}

/* Practice Controls */
.practice-controls {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-md) 0;
}

/* Metrics - Hidden during practice to avoid distraction, shown only in results */
.metrics-panel {
    display: none; /* Metrics revealed after session, not during */
    margin-bottom: var(--space-md);
}

.metric {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.metric-label {
    width: 80px;
    font-size: 0.75rem;
    color: var(--color-warm-gray);
}

.metric-bar {
    flex: 1;
    height: 6px;
    background: var(--color-light-border);
    border-radius: 3px;
    overflow: hidden;
}

.metric-fill {
    height: 100%;
    background: var(--color-coral);
    border-radius: 3px;
    transition: width var(--transition-normal);
}

.metric-value {
    width: 25px;
    font-size: 0.75rem;
    text-align: right;
    font-weight: 600;
}

/* Coaching Tip */
.coaching-tip {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-sm);
    background: rgba(212, 163, 115, 0.15);
    border-radius: 8px;
    font-size: 0.85rem;
}

.tip-icon {
    flex-shrink: 0;
}

/* Input Controls */
#input-controls {
    background: white;
    padding: var(--space-md);
    border-top: 1px solid var(--color-light-border);
}

.transcript-display {
    min-height: 40px;
    margin-bottom: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-ivory);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--color-charcoal-light);
}

#live-transcript {
    opacity: 0.7;
}

#live-transcript.active {
    opacity: 1;
    color: var(--color-charcoal);
}

.control-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
}

.control-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-coral);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.control-btn:hover {
    transform: scale(1.05);
}

.control-btn:active {
    transform: scale(0.95);
    opacity: 0.9;
}

.control-btn.secondary {
    background: var(--color-ivory);
    color: var(--color-charcoal);
}

.control-btn.danger {
    background: var(--color-danger);
}

/* Visual-Audio Perception Alignment States
 * Human visual processing is ~100-150ms faster than audio processing.
 * These states create perceptual continuity between visual and audio feedback.
 */

/* Preparing state: Visual appears ~100ms BEFORE audio starts (anticipatory cue) */
.control-btn.preparing-to-listen {
    background: linear-gradient(135deg, var(--color-coral) 0%, var(--color-success) 100%);
    animation: preparePulse 0.3s ease-out forwards;
}

@keyframes preparePulse {
    0% { transform: scale(1); background: var(--color-coral); }
    100% { transform: scale(1.02); background: var(--color-success); }
}

/* Active recording state */
.control-btn.recording {
    background: var(--color-success);
    animation: recordPulse 1.2s ease-in-out infinite;
    transition: background 0.1s ease-out;
}

@keyframes recordPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(76, 175, 80, 0);
        transform: scale(1.02);
    }
}

/* ═══════════════════════════════════════════════════════════════
   TURN-TAKING VISUAL INDICATOR SYSTEM
   Replaces text labels with intuitive visual states
   ═══════════════════════════════════════════════════════════════ */

/* Container for turn indicator */
.turn-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 48px;
    height: 48px;
}

/* Mic icon - centered */
.turn-mic-icon {
    position: absolute;
    color: currentColor;
    opacity: 0.9;
    transition: opacity 200ms ease, transform 200ms ease;
}

/* Sound waves container */
.turn-waves {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    position: absolute;
    opacity: 0;
    transition: opacity 200ms ease;
}

/* Individual wave bars */
.turn-wave {
    width: 3px;
    height: 12px;
    background: currentColor;
    border-radius: 2px;
    transform-origin: center;
    animation: none;
}

/* ══════════════════════════════════════════════════════════════
   STATE: IDLE (Mic off / Not listening)
   ══════════════════════════════════════════════════════════════ */
.control-btn.mic-btn:not(.recording):not(.preparing-to-listen) .turn-mic-icon {
    opacity: 0.5;
}

.control-btn.mic-btn:not(.recording):not(.preparing-to-listen) .turn-waves {
    opacity: 0;
}

/* ══════════════════════════════════════════════════════════════
   STATE: LISTENING (User's turn to speak)
   ══════════════════════════════════════════════════════════════ */
.control-btn.recording .turn-mic-icon {
    opacity: 0;
    transform: scale(0.8);
}

.control-btn.recording .turn-waves {
    opacity: 1;
}

.control-btn.recording .turn-wave {
    animation: waveAnimation 1s ease-in-out infinite;
}

.control-btn.recording .turn-wave:nth-child(1) {
    animation-delay: 0ms;
    height: 8px;
}

.control-btn.recording .turn-wave:nth-child(2) {
    animation-delay: 150ms;
    height: 16px;
}

.control-btn.recording .turn-wave:nth-child(3) {
    animation-delay: 300ms;
    height: 8px;
}

@keyframes waveAnimation {
    0%, 100% {
        transform: scaleY(0.5);
        opacity: 0.6;
    }
    50% {
        transform: scaleY(1.2);
        opacity: 1;
    }
}

/* ══════════════════════════════════════════════════════════════
   STATE: USER ACTIVELY SPEAKING (Voice detected)
   ══════════════════════════════════════════════════════════════ */
.control-btn.user-speaking .turn-wave {
    animation: waveAnimationActive 0.4s ease-in-out infinite;
}

@keyframes waveAnimationActive {
    0%, 100% {
        transform: scaleY(0.6);
    }
    50% {
        transform: scaleY(1.5);
    }
}

/* ══════════════════════════════════════════════════════════════
   STATE: AI SPEAKING (User should listen)
   ══════════════════════════════════════════════════════════════ */
.control-btn.ai-speaking .turn-indicator {
    opacity: 0.4;
}

.control-btn.ai-speaking .turn-mic-icon {
    opacity: 0.3;
}

.control-btn.ai-speaking .turn-waves {
    opacity: 0;
}

/* ══════════════════════════════════════════════════════════════
   AI STATE INDICATOR (Next to role name)
   ══════════════════════════════════════════════════════════════ */
.ai-state-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
}

.state-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-charcoal-40);
    transition: background 300ms ease, transform 300ms ease, box-shadow 300ms ease;
}

/* AI Listening state - subtle pulse */
.ai-state-indicator.listening .state-dot {
    background: var(--color-success);
    animation: listeningPulse 2s ease-in-out infinite;
}

@keyframes listeningPulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* AI Thinking state - animated */
.ai-state-indicator.thinking .state-dot {
    background: var(--color-charcoal);
    animation: thinkingDot 0.8s ease-in-out infinite;
}

@keyframes thinkingDot {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.3);
        opacity: 1;
    }
}

/* AI Speaking state - active glow */
.ai-state-indicator.speaking .state-dot {
    background: var(--color-charcoal);
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.15);
    animation: speakingDot 0.6s ease-in-out infinite;
}

@keyframes speakingDot {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.15);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(26, 26, 26, 0.08);
    }
}

/* AI Status text - subtle, secondary */
.ai-state-indicator .ai-status {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-charcoal-60);
    transition: color 200ms ease;
}

.ai-state-indicator.speaking .ai-status {
    color: var(--color-charcoal);
}

/* Visually hidden but accessible */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Processing state: Visual persists ~150ms AFTER audio stops (visual persistence) */
.control-btn.processing-speech {
    background: linear-gradient(135deg, var(--color-success) 0%, #90CAF9 100%);
    animation: processingPulse 0.4s ease-in-out;
}

@keyframes processingPulse {
    0% { transform: scale(1.02); opacity: 1; }
    100% { transform: scale(1); opacity: 0.9; }
}

/* User speaking detected - subtle visual reinforcement */
.control-btn.user-speaking {
    background: var(--color-success);
    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.3), 0 0 20px rgba(76, 175, 80, 0.2);
    animation: userSpeakingPulse 0.6s ease-in-out infinite;
}

@keyframes userSpeakingPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.3), 0 0 20px rgba(76, 175, 80, 0.2); }
    50% { box-shadow: 0 0 0 6px rgba(76, 175, 80, 0.4), 0 0 25px rgba(76, 175, 80, 0.3); }
}

/* AI thinking/responding visual indicator on avatar area */
.ai-thinking-indicator {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

.ai-thinking-indicator.active {
    opacity: 1;
}

.ai-thinking-dot {
    width: 6px;
    height: 6px;
    background: var(--color-coral);
    border-radius: 50%;
    animation: thinkingBounce 1.2s ease-in-out infinite;
}

.ai-thinking-dot:nth-child(2) { animation-delay: 0.15s; }
.ai-thinking-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes thinkingBounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-6px); opacity: 1; }
}

/* Audience reaction animations (for speeches) */
@keyframes audienceReaction {
    0% { opacity: 0; transform: translateX(-50%) scale(0.5); }
    20% { opacity: 1; transform: translateX(-50%) scale(1.2); }
    80% { opacity: 1; transform: translateX(-50%) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-50px) scale(0.8); }
}

.audience-reaction {
    pointer-events: none;
}

.audience-reaction.hearty {
    font-size: 4rem !important;
}

.audience-reaction.light {
    font-size: 2rem !important;
}

.btn-icon {
    font-size: 1.5rem;
}

.btn-label {
    font-size: 0.75rem;
}

.text-input-container {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.text-input-container input {
    flex: 1;
    padding: var(--space-sm);
    border: 1px solid var(--color-light-border);
    border-radius: 8px;
    font-size: 1rem;
}

.text-input-container button {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-coral);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

/* ============================================
   RESULTS SCREEN
   ============================================ */

/* ============================================
   RESULTS SCREEN - Glow-up: Premium feedback experience
   ============================================ */

#results {
    padding-top: 100px;
    position: relative;
    overflow: hidden;
}

/* Glow-up: Subtle celebration gradient */
#results::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse at center top, rgba(240, 238, 233, 0.8) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

#results > * {
    position: relative;
    z-index: 1;
}

#results h2 {
    text-align: center;
    margin-bottom: var(--space-md);
    font-family: var(--font-playfair);
    font-weight: 500;
    letter-spacing: var(--letter-tight);
}

.results-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding-top: var(--space-md);
    animation: fadeInUp 600ms ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.results-header {
    margin-bottom: var(--space-lg);
}

.results-emoji {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--space-sm);
    animation: bounceIn 500ms ease-out 200ms backwards;
}

@keyframes bounceIn {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.results-score {
    margin-bottom: var(--space-lg);
}

/* Glow-up: Enhanced score circle with glow */
.score-circle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-charcoal) 0%, var(--color-charcoal-mid) 100%);
    color: white;
    box-shadow:
        0 8px 32px rgba(26, 26, 26, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    animation: scoreReveal 800ms ease-out 400ms backwards;
}

@keyframes scoreReveal {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    60% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.results-score .score-circle .score-value {
    font-family: var(--font-playfair);
    font-size: 3.5rem;
    font-weight: 500;
    line-height: 1;
    color: white;
}

.results-score .score-circle .score-label {
    font-size: 0.8rem;
    opacity: 0.8;
    color: white;
    letter-spacing: var(--letter-wide);
    text-transform: uppercase;
    margin-top: 4px;
}

/* Glow-up: Glassmorphism metrics card */
.results-metrics {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    padding: var(--space-lg);
    border-radius: 16px;
    margin-bottom: var(--space-md);
    text-align: left;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--glass-border);
    animation: fadeInUp 600ms ease-out 600ms backwards;
}

.result-metric {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.result-metric:last-child {
    margin-bottom: 0;
}

.metric-name {
    width: 100px;
    font-size: 0.9rem;
}

.metric-val {
    width: 30px;
    text-align: right;
    font-weight: 600;
}

/* Glow-up: Stats with staggered entrance */
.results-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    margin-bottom: var(--space-lg);
}

.stat-item {
    text-align: center;
    animation: fadeInUp 500ms ease-out backwards;
}

.stat-item:nth-child(1) { animation-delay: 700ms; }
.stat-item:nth-child(2) { animation-delay: 800ms; }
.stat-item:nth-child(3) { animation-delay: 900ms; }

.stat-num {
    display: block;
    font-family: var(--font-playfair);
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--color-charcoal);
}

.stat-desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    letter-spacing: var(--letter-wide);
    text-transform: uppercase;
}

/* Glow-up: Action buttons with polish */
.results-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    animation: fadeInUp 600ms ease-out 1000ms backwards;
}

.results-actions .btn-primary {
    background: var(--color-charcoal);
}

.results-actions .btn-primary:hover {
    background: var(--color-accent-hover);
}

/* ============================================
   DRILL RESULTS (STREAMLINED)
   ============================================ */

/* ============================================
   DRILL RESULTS - Glow-up: Focused achievement moment
   ============================================ */

.drill-results-container {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
    padding-top: var(--space-lg);
    animation: fadeInUp 600ms ease-out;
}

.drill-results-header {
    margin-bottom: var(--space-lg);
}

.drill-results-header h2 {
    font-family: var(--font-playfair);
    font-size: 1.75rem;
    font-weight: 500;
    margin-top: var(--space-sm);
    letter-spacing: var(--letter-tight);
}

/* Glow-up: Enhanced score circle */
.drill-score-section {
    margin-bottom: var(--space-lg);
}

.drill-score-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-charcoal) 0%, var(--color-charcoal-mid) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    box-shadow:
        0 12px 40px rgba(26, 26, 26, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    animation: scoreReveal 800ms ease-out 200ms backwards;
}

.drill-score-circle.score-low {
    background: linear-gradient(135deg, var(--color-danger) 0%, #6B4A4A 100%);
}

.drill-score-circle.score-mid {
    background: linear-gradient(135deg, var(--color-warning) 0%, #7A6548 100%);
}

.drill-score-circle.score-high {
    background: linear-gradient(135deg, var(--color-success) 0%, #4A5B4A 100%);
}

.drill-score-value {
    font-family: var(--font-playfair);
    font-size: 3.5rem;
    font-weight: 500;
    color: white;
    line-height: 1;
}

.drill-metric-result {
    font-family: var(--font-playfair);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-charcoal);
    animation: fadeInUp 500ms ease-out 400ms backwards;
}

/* Glow-up: Glassmorphism feedback card */
.drill-feedback {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-radius: 16px;
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    font-size: 1rem;
    color: var(--color-charcoal);
    line-height: 1.7;
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--glass-border);
    text-align: left;
    animation: fadeInUp 600ms ease-out 500ms backwards;
}

.drill-feedback p {
    margin: 0;
}

.drill-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    margin-bottom: var(--space-lg);
    animation: fadeInUp 600ms ease-out 600ms backwards;
}

.drill-stat-item {
    text-align: center;
}

.drill-stat-num {
    display: block;
    font-family: var(--font-playfair);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-charcoal);
}

.drill-stat-desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    letter-spacing: var(--letter-wide);
    text-transform: uppercase;
}

.drill-results-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    animation: fadeInUp 600ms ease-out 700ms backwards;
}

.drill-results-actions .btn-primary {
    background: var(--color-charcoal);
}

.drill-results-actions .btn-primary:hover {
    background: var(--color-accent-hover);
}

.drill-results-actions .btn-secondary {
    background: transparent;
    color: var(--color-charcoal);
    border: 1px solid var(--color-light-border);
}

.drill-results-actions .btn-secondary:hover {
    border-color: var(--color-charcoal);
}

/* ============================================
   DASHBOARD
   ============================================ */

#dashboard {
    padding-top: 100px;
}

#dashboard h2 {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.dash-stat {
    background: white;
    padding: var(--space-lg) var(--space-md);
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: all var(--transition-fast);
}

.dash-stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.dash-value {
    display: block;
    font-family: var(--font-playfair);
    font-size: 2rem;
    font-weight: 500;
    color: var(--color-charcoal);
}

.dash-label {
    font-size: 0.75rem;
    color: var(--color-charcoal-light);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-style: italic;
}

.session-list {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    max-width: 900px;
    margin: 0 auto;
}

.session-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-light-border);
    transition: background var(--transition-fast);
}

.session-item:hover {
    background: var(--color-ivory);
}

.session-item:last-child {
    border-bottom: none;
}

.session-info-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.session-emoji-small {
    font-size: 1.5rem;
}

.session-meta {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.session-score {
    font-family: var(--font-playfair);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-charcoal);
}

.empty-state {
    padding: var(--space-xl);
    text-align: center;
    color: var(--color-charcoal-light);
    font-style: italic;
}

/* ============================================
   ENHANCED DASHBOARD
   ============================================ */

.dashboard-container {
    max-width: 1100px;
    padding-bottom: var(--space-xxl);
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-xl);
    padding: var(--space-lg);
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.dashboard-profile {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.dashboard-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-terracotta), var(--color-gold));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--font-playfair);
    font-size: 1.75rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dashboard-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.dashboard-user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-name {
    font-family: var(--font-playfair);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin: 0;
}

.dashboard-email {
    color: var(--color-charcoal-light);
    margin: 0;
}

.dashboard-member-since {
    font-size: 0.8rem;
    color: var(--color-charcoal-light);
    font-style: italic;
}

.dashboard-subscription {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.subscription-badge {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.subscription-badge.free {
    background: var(--color-light-border);
    color: var(--color-charcoal-light);
}

.subscription-badge.pro {
    background: linear-gradient(135deg, var(--color-gold), #d4a853);
    color: white;
}

.subscription-badge.team {
    background: linear-gradient(135deg, var(--color-terracotta), var(--color-wine));
    color: white;
}

.upgrade-btn {
    padding: 8px 20px;
    background: var(--color-charcoal);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.upgrade-btn:hover {
    background: var(--color-terracotta);
    transform: translateY(-2px);
}

/* Stats Grid */
.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.dash-stat-card {
    background: white;
    padding: var(--space-lg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: all var(--transition-fast);
}

.dash-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.dash-stat-card.highlight {
    background: linear-gradient(135deg, var(--color-gold), #d4a853);
}

.dash-stat-card.highlight .dash-stat-icon,
.dash-stat-card.highlight .dash-stat-value,
.dash-stat-card.highlight .dash-stat-label {
    color: white;
}

.dash-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--color-ivory);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-terracotta);
    flex-shrink: 0;
}

.dash-stat-card.highlight .dash-stat-icon {
    background: rgba(255, 255, 255, 0.2);
}

.dash-stat-content {
    display: flex;
    flex-direction: column;
}

.dash-stat-value {
    font-family: var(--font-playfair);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-charcoal);
    line-height: 1.2;
}

.dash-stat-label {
    font-size: 0.75rem;
    color: var(--color-charcoal-light);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Dashboard Sections */
.dashboard-section {
    margin-bottom: var(--space-xl);
}

.section-title {
    font-family: var(--font-playfair);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin-bottom: var(--space-md);
}

/* Progress Chart */
.progress-chart-container {
    background: white;
    border-radius: 12px;
    padding: var(--space-lg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    position: relative;
}

#progress-chart {
    width: 100%;
    height: 200px;
}

.chart-empty-state {
    text-align: center;
    color: var(--color-charcoal-light);
    font-style: italic;
    padding: var(--space-lg);
}

/* Skills Breakdown */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-md);
}

.skill-card {
    background: white;
    border-radius: 12px;
    padding: var(--space-md);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.skill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.skill-name {
    font-weight: 600;
    color: var(--color-charcoal);
}

.skill-score {
    font-family: var(--font-playfair);
    font-size: 1.25rem;
    color: var(--color-terracotta);
}

.skill-bar {
    height: 8px;
    background: var(--color-light-border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--space-xs);
}

.skill-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--color-terracotta), var(--color-gold));
    border-radius: 4px;
    transition: width 0.5s ease;
}

.skill-meta {
    font-size: 0.75rem;
    color: var(--color-charcoal-light);
}

/* Session List */
.load-more-btn {
    display: block;
    width: 100%;
    max-width: 200px;
    margin: var(--space-md) auto 0;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: 2px solid var(--color-light-border);
    border-radius: 8px;
    color: var(--color-charcoal);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.load-more-btn:hover {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
}

/* Subscription Plans */
.plan-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.plan-card {
    background: white;
    border-radius: 12px;
    padding: var(--space-lg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    position: relative;
    transition: all var(--transition-fast);
}

.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.plan-card.current {
    border: 2px solid var(--color-terracotta);
}

.plan-header {
    text-align: center;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-light-border);
}

.plan-header h3 {
    font-family: var(--font-playfair);
    font-size: 1.5rem;
    color: var(--color-charcoal);
    margin-bottom: var(--space-xs);
}

.plan-price {
    font-family: var(--font-playfair);
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-terracotta);
}

.plan-price small {
    font-size: 0.9rem;
    color: var(--color-charcoal-light);
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-md) 0;
}

.plan-features li {
    padding: var(--space-xs) 0;
    color: var(--color-charcoal-light);
    font-size: 0.9rem;
    position: relative;
    padding-left: 24px;
}

.plan-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-sage);
    font-weight: bold;
}

.current-plan-badge {
    display: block;
    text-align: center;
    padding: var(--space-sm);
    background: var(--color-ivory);
    border-radius: 8px;
    color: var(--color-terracotta);
    font-weight: 600;
    font-size: 0.85rem;
}

.plan-upgrade-btn {
    display: block;
    width: 100%;
    padding: var(--space-sm);
    background: var(--color-charcoal);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.plan-upgrade-btn:hover:not(:disabled) {
    background: var(--color-terracotta);
}

.plan-upgrade-btn:disabled {
    background: var(--color-light-border);
    color: var(--color-charcoal-light);
    cursor: not-allowed;
}

/* Account Actions */
.account-actions {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.account-action-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: white;
    border: 1px solid var(--color-light-border);
    border-radius: 8px;
    color: var(--color-charcoal);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.account-action-btn:hover {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
}

.account-action-btn.danger {
    border-color: #dc3545;
    color: #dc3545;
}

.account-action-btn.danger:hover {
    background: #dc3545;
    color: white;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .hero-stats {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .hero-ctas {
        flex-direction: column;
    }

    #ai-panel {
        position: fixed;
        top: auto;
        bottom: 140px;
        right: var(--space-sm);
        left: var(--space-sm);
        width: auto;
    }

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

    .dashboard-header {
        flex-direction: column;
        gap: var(--space-md);
    }

    .dashboard-subscription {
        width: 100%;
        justify-content: space-between;
    }

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

    .plan-cards {
        grid-template-columns: 1fr;
    }

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

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

    .account-action-btn {
        width: 100%;
        justify-content: center;
    }

    .environment-selector {
        flex-wrap: wrap;
    }

    .env-btn {
        flex: 1 1 45%;
    }

    /* Navigation responsive - Compact mobile nav for iOS */
    .nav-tabs {
        position: static;
        transform: none;
        gap: 4px;
        flex-wrap: nowrap;
        justify-content: center;
        margin-top: 6px;
        order: 3;
        width: 100%;
        padding: 4px 0;
        overflow-x: auto;
    }

    .nav-inner {
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 8px 12px;
    }

    .logo {
        order: 1;
        font-size: 1.2rem;
    }

    .nav-right {
        order: 2;
    }

    .nav-tab {
        font-size: 0.55rem;
        padding: 6px 8px;
        min-height: 32px; /* Smaller touch target */
        display: flex;
        align-items: center;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .nav-tab-text {
        font-size: 0.5rem;
        letter-spacing: 0;
    }

    .nav-tab-icon {
        width: 12px;
        height: 12px;
    }

    /* Home page responsive - compact nav means less padding needed */
    .screen {
        padding-top: 115px; /* Compact mobile nav + safe area */
    }

    .home-hero {
        padding-top: 15px;
        min-height: calc(100vh - 115px);
    }

    .home-hero::before {
        animation: none; /* Reduce motion on mobile for performance */
        opacity: 0.5;
    }

    .home-title {
        font-size: clamp(1.875rem, 7vw, 2.5rem);
        line-height: 1.2;
        padding: 0 var(--space-sm);
        animation: none; /* Disable shimmer on mobile for performance */
        background: none;
        -webkit-text-fill-color: var(--color-charcoal);
    }

    .home-description {
        padding: 0 var(--space-sm);
        font-size: 0.95rem;
        margin-bottom: var(--space-lg);
    }

    .home-tiles {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
        padding: 0 var(--space-sm);
    }

    .home-tile {
        padding: var(--space-md) var(--space-sm);
        min-height: 160px;
        animation: none; /* Disable stagger on mobile */
        border-radius: 12px;
    }

    .home-tile:active {
        transform: scale(0.98);
        background: var(--glass-bg);
    }

    .tile-icon {
        animation: none; /* Disable breathing on mobile */
        margin-bottom: var(--space-sm);
    }

    .tile-icon svg {
        width: 32px;
        height: 32px;
    }

    .tile-label {
        font-size: 0.6rem;
        margin-bottom: var(--space-xs);
    }

    .tile-description {
        font-size: 0.75rem;
        line-height: 1.5;
    }

    /* Glow-up: Hide decorative orb on mobile */
    .decorative-orb {
        display: none;
    }

    /* Glow-up: Better button touch targets */
    .btn {
        min-height: 48px;
        padding: var(--space-sm) var(--space-md);
    }
}

@media (max-width: 480px) {
    .home-tiles {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .home-tile {
        min-height: auto;
        padding: var(--space-md);
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: var(--space-md);
    }

    .tile-icon {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .tile-content {
        flex: 1;
    }

    .nav-tabs {
        gap: var(--space-xs);
    }

    .nav-tab {
        font-size: 0.6rem;
        padding: var(--space-xs) var(--space-sm);
        min-height: 40px;
    }

    /* Glow-up: Full-width CTAs on small screens */
    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   SESSION REPLAY CONTROLS
   ============================================ */

#replay-controls {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    padding: 12px 24px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.replay-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.replay-bar button {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.2s;
}

.replay-bar button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.replay-progress {
    width: 150px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.replay-progress-bar {
    height: 100%;
    background: var(--color-coral);
    width: 0%;
    transition: width 0.3s ease;
}

#replay-time {
    color: white;
    font-size: 0.85rem;
    font-family: var(--font-sans);
    min-width: 40px;
}

.replay-btn-small {
    background: var(--color-coral);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
    margin-left: auto;
}

.replay-btn-small:hover {
    background: var(--color-sand);
    transform: scale(1.1);
}

/* ============================================
   PWA INSTALL PROMPT
   ============================================ */

.pwa-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-coral);
    color: white;
    padding: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.pwa-install-banner.visible {
    transform: translateY(0);
}

.pwa-install-banner button {
    background: white;
    color: var(--color-coral);
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
}

/* Session item with replay button */
.session-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.session-info-row {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* ============================================
   ENHANCED EVALUATION SCORECARD
   ============================================ */

.evaluation-container {
    margin-top: var(--space-lg);
}

/* ============================================
   TRANSCRIPT COMPARISON VIEW
   Clean, scannable display of user responses
   vs. recommended positioning
   ============================================ */

.transcript-header {
    margin-bottom: var(--space-md);
}

.transcript-intro {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

.transcript-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.transcript-exchange {
    background: white;
    border: 1px solid var(--color-light-border);
    border-radius: 12px;
    overflow: hidden;
}

.exchange-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-cloud-dancer);
    border-bottom: 1px solid var(--color-light-border);
}

.exchange-num {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-charcoal);
}

.exchange-score {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 12px;
}

.exchange-score.excellent {
    background: rgba(90, 107, 90, 0.15);
    color: var(--color-success);
}

.exchange-score.good {
    background: rgba(139, 115, 85, 0.15);
    color: var(--color-warning);
}

.exchange-score.needs-work {
    background: rgba(125, 90, 90, 0.15);
    color: var(--color-danger);
}

.exchange-content {
    padding: var(--space-md);
}

.what-you-said,
.recommended {
    margin-bottom: var(--space-md);
}

.what-you-said:last-child,
.recommended:last-child {
    margin-bottom: 0;
}

.exchange-content .label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-wide);
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.your-response,
.better-response {
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-charcoal);
}

.your-response {
    color: var(--color-charcoal-mid);
}

.better-response {
    color: var(--color-success);
    font-style: italic;
    padding-left: var(--space-sm);
    border-left: 3px solid var(--color-success);
}

.filler-note {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--color-warning);
    background: rgba(139, 115, 85, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

.recommended .reason {
    display: block;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-style: normal;
}

.evaluation-section {
    margin-bottom: var(--space-lg);
}

.evaluation-section h3,
.evaluation-section h4 {
    font-family: var(--font-serif);
    color: var(--color-charcoal);
    margin-bottom: var(--space-md);
}

.evaluation-summary {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-charcoal-light);
}

/* Hiring Signal Banner */
.hiring-signal-banner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: 12px;
    margin-bottom: var(--space-lg);
    color: white;
}

.signal-icon {
    font-size: 2rem;
}

.signal-content {
    display: flex;
    flex-direction: column;
}

.signal-label {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
}

.signal-score {
    font-size: 1rem;
    opacity: 0.9;
}

/* 5-Dimension Cards */
.dimension-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.dimension-card {
    background: white;
    border: 1px solid var(--color-light-border);
    border-radius: 12px;
    padding: var(--space-md);
    transition: box-shadow var(--transition-normal);
}

.dimension-card:hover {
    box-shadow: var(--shadow-md);
}

.dimension-card.has-strength {
    border-left: 4px solid var(--color-success);
}

.dimension-card.has-improvement {
    border-left: 4px solid var(--color-warning);
}

.dimension-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
}

.dimension-name {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--color-charcoal);
}

.dimension-score {
    font-size: 1.5rem;
    font-weight: 700;
}

.dimension-bar {
    height: 8px;
    background: var(--color-ivory);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--space-xs);
}

.dimension-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

/* Subtle shimmer sweep on progress bars */
.dimension-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    animation: shimmerSweep 1.5s ease-out 0.3s forwards;
}

@keyframes shimmerSweep {
    from { left: -100%; }
    to { left: 100%; }
}

.dimension-anchor {
    font-size: 0.85rem;
    color: var(--color-warm-gray);
    font-weight: 500;
    margin-bottom: var(--space-xs);
}

.dimension-feedback {
    font-size: 0.9rem;
    color: var(--color-charcoal-light);
    line-height: 1.5;
}

/* Quoted Examples in Dimension Cards */
.dimension-example {
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    border-radius: 8px;
    font-size: 0.9rem;
}

.strength-example {
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.2);
}

.improvement-example {
    background: rgba(255, 152, 0, 0.08);
    border: 1px solid rgba(255, 152, 0, 0.2);
}

.example-label {
    font-weight: 600;
    color: var(--color-charcoal);
    margin-bottom: var(--space-xs);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.example-quote {
    font-style: italic;
    color: var(--color-charcoal-light);
    margin: var(--space-xs) 0;
    padding-left: var(--space-sm);
    border-left: 3px solid var(--color-warm-gray);
    font-size: 0.95rem;
    line-height: 1.5;
}

.example-reason {
    color: var(--color-success);
    font-size: 0.85rem;
}

.example-issue {
    color: var(--color-warning);
    font-size: 0.85rem;
    margin-bottom: var(--space-xs);
}

.example-suggestion {
    color: var(--color-charcoal);
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.5);
    padding: var(--space-xs);
    border-radius: 4px;
}

/* Flags Section */
.flags-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.green-flags, .red-flags {
    padding: var(--space-md);
    border-radius: 12px;
}

.green-flags {
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.2);
}

.red-flags {
    background: rgba(229, 115, 115, 0.08);
    border: 1px solid rgba(229, 115, 115, 0.2);
}

.flags-section h5 {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    margin-bottom: var(--space-sm);
}

.green-flags h5 {
    color: var(--color-success);
}

.red-flags h5 {
    color: var(--color-danger);
}

.flag-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    font-size: 0.9rem;
    color: var(--color-charcoal-light);
    margin-bottom: var(--space-xs);
}

.flag-icon {
    flex-shrink: 0;
}

/* Improvements List */
.improvements-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.improvement-item {
    background: white;
    border: 1px solid var(--color-light-border);
    border-radius: 12px;
    padding: var(--space-md);
}

.improvement-area {
    font-weight: 600;
    color: var(--color-coral);
    margin-bottom: var(--space-xs);
}

.improvement-current {
    font-size: 0.9rem;
    color: var(--color-charcoal-light);
    margin-bottom: var(--space-xs);
}

.improvement-suggested {
    font-size: 0.9rem;
    color: var(--color-charcoal);
    background: var(--color-ivory);
    padding: var(--space-sm);
    border-radius: 8px;
}

@media (max-width: 600px) {
    .flags-section {
        grid-template-columns: 1fr;
    }

    .hiring-signal-banner {
        flex-direction: column;
        text-align: center;
    }
}

/* ========================================
   BEHAVIORAL SIGNALS - CLEAN & MINIMAL
   ======================================== */

.signals-section {
    background: var(--color-ivory);
    border-radius: 16px;
    padding: var(--space-lg);
}

.signals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.signals-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.signals-header {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.green-header { color: var(--color-success); }
.red-header { color: var(--color-coral); }

.signal-card {
    background: white;
    border-radius: 10px;
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    transition: transform 0.15s ease;
    border-left: 3px solid;
}

.signal-card:hover {
    transform: translateX(3px);
}

.signal-positive { border-left-color: var(--color-success); }
.signal-negative { border-left-color: var(--color-coral); }
.signal-negative.severity-critical { border-left-color: #dc2626; border-left-width: 4px; }
.signal-negative.severity-high { border-left-color: var(--color-coral); }
.signal-negative.severity-medium { border-left-color: #eab308; }

.signal-card .signal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.signal-badge {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--color-charcoal);
}

.severity-critical .signal-badge { color: #dc2626; }
.severity-high .signal-badge { color: var(--color-coral); }
.severity-medium .signal-badge { color: #a16207; }
.signal-positive .signal-badge { color: var(--color-success); }

.signal-timestamp {
    font-size: 0.75rem;
    color: var(--color-charcoal-light);
    opacity: 0.7;
}

.signal-text {
    font-size: 0.85rem;
    color: var(--color-charcoal-light);
    line-height: 1.4;
    margin: var(--space-xs) 0 0 0;
}

.signal-quote {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--color-charcoal-light);
    margin: var(--space-xs) 0 0 0;
    padding-left: var(--space-sm);
    border-left: 2px solid var(--color-charcoal-lighter);
    opacity: 0.8;
}

.no-signals {
    font-size: 1.2rem;
    color: var(--color-charcoal-lighter);
    text-align: center;
    padding: var(--space-md);
}

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

/* ========================================
   RESPONSE-BY-RESPONSE BREAKDOWN STYLES
   ======================================== */

.response-breakdown-section {
    margin-top: var(--space-lg);
}

/* Filler Word Summary */
.filler-summary {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: 12px;
    margin-bottom: var(--space-md);
}

.filler-summary.low-fillers {
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.2);
}

.filler-summary.moderate-fillers {
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.2);
}

.filler-summary.high-fillers {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.filler-icon {
    font-size: 1.5rem;
}

.filler-text {
    flex: 1;
    font-size: 0.95rem;
    color: var(--color-charcoal);
}

.filler-examples {
    color: var(--color-charcoal-light);
    font-style: italic;
    margin-left: var(--space-xs);
}

/* Response Highlights (Strongest/Weakest) */
.response-highlight {
    padding: var(--space-md);
    border-radius: 12px;
    margin-bottom: var(--space-md);
}

.strongest-response {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.05) 0%, rgba(76, 175, 80, 0.1) 100%);
    border: 1px solid rgba(76, 175, 80, 0.25);
}

.weakest-response {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.05) 0%, rgba(249, 115, 22, 0.1) 100%);
    border: 1px solid rgba(249, 115, 22, 0.25);
}

.highlight-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.highlight-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.highlight-badge.success {
    background: var(--color-success);
    color: white;
}

.highlight-badge.warning {
    background: var(--color-warning);
    color: white;
}

.highlight-score {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-charcoal);
}

.highlight-quote {
    font-style: italic;
    color: var(--color-charcoal);
    margin: var(--space-sm) 0;
    padding: var(--space-sm) var(--space-md);
    background: rgba(255, 255, 255, 0.6);
    border-left: 4px solid var(--color-warm-gray);
    border-radius: 0 8px 8px 0;
    line-height: 1.5;
}

.strongest-response .highlight-quote {
    border-left-color: var(--color-success);
}

.weakest-response .highlight-quote {
    border-left-color: var(--color-warning);
}

.highlight-reasons, .highlight-issues {
    margin-top: var(--space-sm);
}

.highlight-reasons strong, .highlight-issues strong {
    font-size: 0.9rem;
    color: var(--color-charcoal);
}

.highlight-reasons ul, .highlight-issues ul {
    margin: var(--space-xs) 0 0 var(--space-md);
    padding: 0;
}

.highlight-reasons li, .highlight-issues li {
    font-size: 0.9rem;
    color: var(--color-charcoal-light);
    margin-bottom: var(--space-xs);
}

.highlight-reasons li {
    color: var(--color-success);
}

.highlight-issues li {
    color: var(--color-warning);
}

/* Rewrite Suggestion */
.rewrite-suggestion {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
}

.rewrite-suggestion strong {
    display: block;
    color: var(--color-charcoal);
    margin-bottom: var(--space-sm);
    font-size: 0.9rem;
}

.rewrite-quote {
    font-style: normal;
    color: var(--color-charcoal);
    padding: var(--space-sm);
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    line-height: 1.6;
    border-left: 4px solid var(--color-charcoal);
}

/* Response Cards Toggle */
.response-cards-wrapper {
    margin-top: var(--space-md);
}

.toggle-responses-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md);
    background: var(--color-ivory);
    border: 1px solid var(--color-light-border);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-charcoal);
    transition: all var(--transition-fast);
}

.toggle-responses-btn:hover {
    background: var(--color-warm-gray);
}

.toggle-icon {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

/* Response Cards Container */
.response-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    max-height: 600px;
    overflow-y: auto;
    padding-right: var(--space-xs);
}

.response-cards.collapsed {
    display: none;
}

/* Individual Response Card */
.response-card {
    background: white;
    border: 1px solid var(--color-light-border);
    border-radius: 10px;
    padding: var(--space-md);
    transition: all var(--transition-fast);
}

.response-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.response-card.good {
    border-left: 4px solid var(--color-success);
}

.response-card.average {
    border-left: 4px solid var(--color-warning);
}

.response-card.needs-work {
    border-left: 4px solid var(--color-warning);
}

.response-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.response-num {
    font-weight: 600;
    color: var(--color-charcoal);
    font-size: 0.9rem;
}

.response-score {
    font-weight: 700;
    font-size: 0.85rem;
}

.response-words {
    font-size: 0.8rem;
    color: var(--color-charcoal-light);
    margin-left: auto;
}

.response-text {
    font-size: 0.9rem;
    color: var(--color-charcoal-light);
    font-style: italic;
    margin: 0 0 var(--space-sm) 0;
    line-height: 1.5;
}

.response-issues, .response-strengths {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.issue-tag, .strength-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 500;
}

.issue-tag {
    background: rgba(249, 115, 22, 0.1);
    color: var(--color-warning);
}

.strength-tag {
    background: rgba(76, 175, 80, 0.1);
    color: var(--color-success);
}

/* Mobile responsiveness for response breakdown */
@media (max-width: 600px) {
    .highlight-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }

    .response-card-header {
        flex-wrap: wrap;
    }

    .response-words {
        margin-left: 0;
        width: 100%;
    }
}

/* ========================================
   ADVANCED INSIGHTS STYLES
   ======================================== */

.advanced-insights-section {
    margin-top: var(--space-lg);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 16px;
    padding: var(--space-lg);
}

.advanced-insights-section h4 {
    color: var(--color-charcoal);
    margin-bottom: var(--space-md);
}

/* Stats Dashboard */
.stats-dashboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: var(--space-md);
    text-align: center;
    border: 1px solid var(--color-light-border);
    transition: all var(--transition-fast);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-card.stat-good {
    border-color: var(--color-success);
    background: rgba(76, 175, 80, 0.05);
}

.stat-card.stat-warning {
    border-color: var(--color-warning);
    background: rgba(234, 179, 8, 0.05);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-charcoal);
    line-height: 1;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--color-charcoal-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: var(--space-xs);
}

.stat-target {
    font-size: 0.75rem;
    color: var(--color-warm-gray);
    margin-top: 4px;
}

.stats-feedback {
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.2);
    border-radius: 10px;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.stats-tip {
    margin-top: var(--space-sm);
    color: var(--color-charcoal);
    font-size: 0.9rem;
}

/* Vocabulary Analysis */
.vocabulary-analysis {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: white;
    border-radius: 12px;
    border: 1px solid var(--color-light-border);
}

.vocabulary-analysis h5 {
    margin-bottom: var(--space-sm);
    color: var(--color-charcoal);
}

.vocab-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.vocab-item {
    padding: var(--space-md);
    border-radius: 10px;
    text-align: center;
}

.vocab-item.vocab-good {
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.2);
}

.vocab-item.vocab-weak {
    background: rgba(249, 115, 22, 0.08);
    border: 1px solid rgba(249, 115, 22, 0.2);
}

.vocab-count {
    font-size: 2rem;
    font-weight: 700;
    display: block;
}

.vocab-good .vocab-count { color: var(--color-success); }
.vocab-weak .vocab-count { color: #f97316; }

.vocab-label {
    font-size: 0.85rem;
    color: var(--color-charcoal-light);
    display: block;
    margin: var(--space-xs) 0;
}

.vocab-examples {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: var(--space-sm);
}

.verb-tag {
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 500;
}

.verb-tag.power {
    background: rgba(76, 175, 80, 0.15);
    color: var(--color-success);
}

.verb-tag.weak {
    background: rgba(249, 115, 22, 0.15);
    color: var(--color-warning);
}

.verb-tag.suggested {
    background: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
}

.vocab-suggestion {
    margin-top: var(--space-md);
    padding: var(--space-sm);
    background: rgba(59, 130, 246, 0.05);
    border-radius: 8px;
    text-align: center;
}

.vocab-suggestion strong {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: 0.85rem;
    color: var(--color-charcoal);
}

/* Confidence Analysis */
.confidence-analysis {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: white;
    border-radius: 12px;
    border: 1px solid var(--color-light-border);
}

.confidence-analysis h5 {
    margin-bottom: var(--space-sm);
}

.confidence-meter {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.confidence-bar-container {
    flex: 1;
    min-width: 150px;
    height: 12px;
    background: var(--color-ivory);
    border-radius: 6px;
    overflow: hidden;
}

.confidence-bar {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}

.confidence-score {
    font-size: 1.5rem;
    font-weight: 700;
}

.confidence-label {
    font-size: 0.9rem;
    color: var(--color-charcoal-light);
}

.confidence-issues {
    margin-top: var(--space-md);
    padding: var(--space-sm);
    background: rgba(239, 68, 68, 0.05);
    border-radius: 8px;
}

.confidence-issues strong {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: 0.85rem;
    color: var(--color-danger);
}

.undermine-tag {
    display: inline-block;
    padding: 4px 10px;
    margin: 4px;
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
    border-radius: 15px;
    font-size: 0.8rem;
}

/* STAR Structure Analysis */
.star-analysis {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: white;
    border-radius: 12px;
    border: 1px solid var(--color-light-border);
}

.star-analysis h5 {
    margin-bottom: var(--space-sm);
}

.star-elements {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
}

.star-element {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-sm);
    border-radius: 10px;
    transition: all var(--transition-fast);
}

.star-element.star-present {
    background: rgba(76, 175, 80, 0.1);
    border: 2px solid var(--color-success);
}

.star-element.star-missing {
    background: rgba(239, 68, 68, 0.05);
    border: 2px dashed rgba(239, 68, 68, 0.3);
}

.star-letter {
    font-size: 1.5rem;
    font-weight: 700;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: var(--space-xs);
}

.star-present .star-letter {
    background: var(--color-success);
    color: white;
}

.star-missing .star-letter {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
}

.star-name {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-charcoal-light);
}

.star-status {
    font-size: 1rem;
    margin-top: var(--space-xs);
}

.star-present .star-status { color: var(--color-success); }
.star-missing .star-status { color: var(--color-danger); }

.star-feedback {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding: var(--space-sm);
    background: rgba(234, 179, 8, 0.08);
    border-radius: 8px;
    font-size: 0.9rem;
}

.star-feedback.star-success {
    background: rgba(76, 175, 80, 0.08);
}

.feedback-icon {
    font-size: 1.2rem;
}

/* Habitual Patterns */
.habitual-patterns {
    margin-top: var(--space-md);
}

.habitual-patterns h5 {
    margin-bottom: var(--space-sm);
    color: var(--color-charcoal);
}

.patterns-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.pattern-item {
    background: white;
    border-radius: 10px;
    padding: var(--space-md);
    border-left: 4px solid;
}

.pattern-item.pattern-high {
    border-left-color: var(--color-danger);
    background: rgba(239, 68, 68, 0.03);
}

.pattern-item.pattern-medium {
    border-left-color: #eab308;
    background: rgba(234, 179, 8, 0.03);
}

.pattern-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.pattern-severity {
    font-size: 1rem;
}

.pattern-issue {
    font-weight: 600;
    color: var(--color-charcoal);
}

.pattern-impact {
    font-size: 0.85rem;
    color: var(--color-charcoal-light);
    margin-bottom: var(--space-xs);
}

.pattern-fix {
    font-size: 0.9rem;
    color: var(--color-charcoal);
    padding: var(--space-xs);
    background: rgba(59, 130, 246, 0.05);
    border-radius: 6px;
}

/* Coaching Section */
.coaching-section {
    margin-top: var(--space-lg);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.03) 0%, rgba(59, 130, 246, 0.03) 100%);
    border: 1px solid rgba(34, 197, 94, 0.1);
    border-radius: 16px;
    padding: var(--space-lg);
}

.coaching-section h4 {
    color: var(--color-success);
    margin-bottom: var(--space-xs);
}

.coaching-intro {
    color: var(--color-charcoal-light);
    font-size: 0.95rem;
    margin-bottom: var(--space-md);
}

.coaching-drills {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.drill-card {
    background: white;
    border-radius: 12px;
    padding: var(--space-md);
    border: 1px solid var(--color-light-border);
    transition: all var(--transition-fast);
}

.drill-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.drill-card.high {
    border-left: 4px solid var(--color-danger);
}

.drill-card.medium {
    border-left: 4px solid var(--color-warning);
}

.drill-card.quick_win {
    border-left: 4px solid var(--color-success);
    background: rgba(76, 175, 80, 0.02);
}

.drill-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;
}

.drill-number {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-coral);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
}

.drill-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-charcoal);
    flex: 1;
}

.drill-priority {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 15px;
    font-weight: 500;
}

.drill-priority.high {
    background: rgba(220, 38, 38, 0.1);
    color: var(--color-danger);
}

.drill-priority.medium {
    background: rgba(234, 179, 8, 0.1);
    color: #ca8a04;
}

.drill-priority.quick_win {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-success);
}

.drill-why {
    font-size: 0.9rem;
    color: var(--color-charcoal-light);
    margin-bottom: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-ivory);
    border-radius: 8px;
}

.drill-instructions {
    font-size: 0.95rem;
    color: var(--color-charcoal);
    margin-bottom: var(--space-sm);
    line-height: 1.6;
}

.drill-meta {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-light-border);
}

.drill-duration, .drill-goal {
    font-size: 0.85rem;
    color: var(--color-charcoal-light);
}

/* ================================
   EXPRESSION & BODY LANGUAGE ANALYSIS
   ================================ */

.expression-analysis-section {
    background: linear-gradient(135deg, #f8f4ff 0%, #fff8f0 100%);
    border-radius: 16px;
    padding: var(--space-lg);
    margin-top: var(--space-lg);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.expression-analysis-section h5 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    color: var(--color-charcoal);
    font-size: 1.1rem;
}

.inferred-badge {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-charcoal-light);
    background: rgba(139, 92, 246, 0.1);
    padding: 2px 8px;
    border-radius: 12px;
}

.expression-intro {
    font-size: 0.9rem;
    color: var(--color-charcoal-light);
    margin-bottom: var(--space-md);
}

/* Overall Presence Score */
.presence-overview {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-lg);
}

.presence-score-container {
    text-align: center;
    background: white;
    padding: var(--space-lg);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    min-width: 200px;
}

.presence-score {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.presence-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin-bottom: var(--space-xs);
}

.presence-description {
    font-size: 0.85rem;
    color: var(--color-charcoal-light);
    max-width: 250px;
}

/* Expression Metrics Grid */
.expression-metrics-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.expression-metric-card {
    background: white;
    padding: var(--space-md);
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease;
}

.expression-metric-card:hover {
    transform: translateY(-2px);
}

.metric-icon {
    font-size: 1.5rem;
    margin-bottom: var(--space-xs);
}

.metric-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin-bottom: var(--space-sm);
}

.metric-score-bar {
    height: 6px;
    background: var(--color-ivory);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: var(--space-xs);
}

.metric-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.metric-score {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.metric-rating {
    font-size: 0.75rem;
    color: var(--color-charcoal-light);
    text-transform: capitalize;
}

/* Expression Insights */
.expression-insights {
    margin-bottom: var(--space-lg);
}

.expression-insights h6 {
    font-size: 0.95rem;
    color: var(--color-charcoal);
    margin-bottom: var(--space-md);
}

.insights-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.expression-insight-card {
    background: white;
    padding: var(--space-md);
    border-radius: 12px;
    border-left: 4px solid var(--color-charcoal-mid);
}

.insight-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.insight-icon {
    font-size: 1.2rem;
}

.insight-area {
    font-weight: 600;
    color: var(--color-charcoal);
}

.insight-observation {
    font-size: 0.95rem;
    color: var(--color-charcoal);
    margin-bottom: var(--space-sm);
    line-height: 1.5;
}

.insight-impact {
    font-size: 0.85rem;
    color: var(--color-charcoal-light);
    margin-bottom: var(--space-xs);
}

.insight-tip {
    font-size: 0.85rem;
    color: var(--color-success);
    background: rgba(34, 197, 94, 0.08);
    padding: var(--space-sm);
    border-radius: 8px;
    margin-top: var(--space-sm);
}

/* Expression Coaching Tips */
.expression-coaching {
    margin-bottom: var(--space-md);
}

.expression-coaching h6 {
    font-size: 0.95rem;
    color: var(--color-charcoal);
    margin-bottom: var(--space-md);
}

.expression-tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
}

.expression-tip-card {
    background: white;
    padding: var(--space-md);
    border-radius: 12px;
    border-top: 3px solid var(--color-charcoal);
}

.expression-tip-card.high {
    border-top-color: var(--color-danger);
}

.expression-tip-card.medium {
    border-top-color: var(--color-warning);
}

.expression-tip-card.quick_win {
    border-top-color: var(--color-success);
}

.tip-title {
    font-weight: 600;
    color: var(--color-charcoal);
    margin-bottom: var(--space-sm);
}

.tip-description {
    font-size: 0.9rem;
    color: var(--color-charcoal-light);
    line-height: 1.5;
    margin-bottom: var(--space-sm);
}

.tip-duration {
    font-size: 0.8rem;
    color: var(--color-charcoal-light);
}

/* Expression Disclaimer */
.expression-disclaimer {
    padding: var(--space-md);
    background: rgba(139, 92, 246, 0.05);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--color-charcoal-light);
    text-align: center;
}

/* Mobile responsiveness for advanced insights */
@media (max-width: 600px) {
    .stats-dashboard {
        grid-template-columns: 1fr;
    }

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

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

    .confidence-meter {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

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

    .drill-meta {
        flex-direction: column;
        gap: var(--space-xs);
    }

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

    .expression-metrics-grid .expression-metric-card:last-child {
        grid-column: span 2;
    }

    .expression-tips-grid {
        grid-template-columns: 1fr;
    }

    .presence-score-container {
        min-width: 150px;
    }

    .presence-score {
        font-size: 2.5rem;
    }
}

/* ============================================
   DIAGNOSTIC SCREENS
   ============================================ */

.diagnostic-container {
    max-width: 800px;
    margin: 0 auto;
    padding-top: 80px;
    text-align: center;
}

.diagnostic-title {
    font-family: var(--font-playfair);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 400;
    color: var(--color-charcoal);
    margin-bottom: var(--space-xl);
}

/* Diagnostic Landing - Two Tiles */
.diagnostic-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    max-width: 700px;
    margin: 0 auto;
}

.diagnostic-tile {
    background: white;
    padding: var(--space-xl) var(--space-lg);
    border-radius: 12px;
    border: 1px solid var(--color-light-border);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.diagnostic-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: var(--color-charcoal-light);
}

.diagnostic-tile-label {
    font-family: var(--font-playfair);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-charcoal);
    margin-bottom: var(--space-sm);
}

.diagnostic-tile-desc {
    font-size: 0.9rem;
    color: var(--color-charcoal-light);
    margin-bottom: var(--space-xs);
    line-height: 1.5;
}

.diagnostic-tile-example {
    font-size: 0.85rem;
    color: var(--color-warm-gray);
    font-style: italic;
}

/* Diagnostic Custom Input */
.diagnostic-input-wrapper {
    max-width: 550px;
    margin: 0 auto;
}

.diagnostic-textarea {
    width: 100%;
    min-height: 140px;
    padding: var(--space-md);
    border: 1px solid var(--color-light-border);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    margin-bottom: var(--space-lg);
    color: var(--color-charcoal);
}

.diagnostic-textarea::placeholder {
    color: var(--color-warm-gray);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.95rem;
}

.diagnostic-textarea:focus {
    outline: none;
    border-color: var(--color-charcoal-light);
}

/* .btn-dark removed - use .btn-primary .btn-pill instead */

.diagnostic-next-btn {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

/* Diagnostic Random Challenge Selection */
.diagnostic-challenge-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: 900px;
    margin: 0 auto;
}

.diagnostic-challenge-tile {
    background: white;
    padding: var(--space-lg);
    border-radius: 12px;
    border: 1px solid var(--color-light-border);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.diagnostic-challenge-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: var(--color-charcoal-light);
}

.challenge-tile-label {
    font-family: var(--font-playfair);
    font-size: 1.1rem;
    font-weight: 500;
    font-style: italic;
    color: var(--color-charcoal);
    margin-bottom: var(--space-sm);
}

.challenge-tile-desc {
    font-size: 0.85rem;
    color: var(--color-charcoal-light);
    line-height: 1.6;
}

/* Diagnostic Recording Screen */
.diagnostic-recording-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-lg);
}

.diagnostic-recording-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.diagnostic-recording-header h2 {
    font-family: var(--font-playfair);
    font-size: 1.5rem;
    color: var(--color-charcoal);
    margin-bottom: var(--space-sm);
}

.diagnostic-prompt-text {
    font-size: 0.95rem;
    color: var(--color-charcoal-light);
    max-width: 500px;
    line-height: 1.6;
}

.diagnostic-video-area {
    position: relative;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 4/3;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: var(--space-md);
}

.diagnostic-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}

.diagnostic-recording-indicator {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    display: none;
    align-items: center;
    gap: var(--space-xs);
    background: rgba(0, 0, 0, 0.6);
    padding: 6px 12px;
    border-radius: 20px;
    color: white;
    font-size: 0.85rem;
}

.diagnostic-recording-indicator.active {
    display: flex;
}

.recording-dot {
    width: 10px;
    height: 10px;
    background: var(--color-danger);
    border-radius: 50%;
    animation: recordingPulse 1s infinite;
}

@keyframes recordingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.diagnostic-timer {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-charcoal);
    margin-bottom: var(--space-lg);
    font-variant-numeric: tabular-nums;
}

.diagnostic-recording-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

/* Mobile responsive for diagnostic */
@media (max-width: 768px) {
    .diagnostic-tiles {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .diagnostic-challenge-tiles {
        grid-template-columns: 1fr;
    }

    .diagnostic-tile,
    .diagnostic-challenge-tile {
        padding: var(--space-lg);
    }
}

/* ============================================
   DIAGNOSTIC RECORDING - SPLIT LAYOUT
   ============================================ */

.diagnostic-split-container {
    display: grid;
    grid-template-columns: 55% 45%;
    min-height: 100vh;
    padding-top: 60px;
    gap: 0;
}

.diagnostic-video-side {
    position: relative;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}

.diagnostic-video-large {
    width: 100%;
    height: 100%;
    max-height: calc(100vh - 120px);
    object-fit: cover;
    border-radius: 12px;
}

.diagnostic-video-status {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-sans);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.5);
    padding: var(--space-sm) var(--space-md);
    border-radius: 20px;
    pointer-events: none;
}

.diagnostic-scenario-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-xl) calc(var(--space-xl) * 1.5);
    background: var(--color-cream);
    border-left: 1px solid var(--color-light-border);
}

.diagnostic-scenario-content {
    margin-bottom: var(--space-xl);
}

.diagnostic-scenario-label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--color-charcoal);
    text-transform: uppercase;
    display: block;
    margin-bottom: var(--space-md);
}

.diagnostic-scenario-quote {
    font-family: var(--font-playfair);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 500;
    font-style: italic;
    color: var(--color-charcoal);
    line-height: 1.4;
}

.diagnostic-scenario-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
}

/* .btn-coral removed - use .btn-primary instead */

.diagnostic-hint {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--color-warm-gray);
}

/* Mobile responsive for split layout */
@media (max-width: 900px) {
    .diagnostic-split-container {
        grid-template-columns: 1fr;
        grid-template-rows: 50vh auto;
    }

    .diagnostic-scenario-side {
        padding: var(--space-lg);
    }

    .diagnostic-scenario-quote {
        font-size: 1.25rem;
    }
}

/* ============================================
   DIAGNOSTIC REPORT
   ============================================ */

.report-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 100px var(--space-lg) var(--space-xxl);
}

.report-header {
    margin-bottom: var(--space-xl);
}

.report-title {
    font-family: var(--font-playfair);
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-charcoal);
    margin-bottom: var(--space-xs);
}

.report-subtitle {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--color-text-secondary);
}

/* Archetype Card */
.archetype-card {
    background: white;
    border: 1px solid var(--color-light-border);
    border-radius: 12px;
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.archetype-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.archetype-label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--color-warm-gray);
    text-transform: uppercase;
}

.archetype-confidence {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-charcoal);
}

.archetype-name {
    font-family: var(--font-playfair);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin-bottom: var(--space-xs);
}

.archetype-tagline {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--color-charcoal);
    font-style: italic;
    margin-bottom: var(--space-lg);
}

.archetype-details {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-light-border);
}

.archetype-section-title {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--color-warm-gray);
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}

.archetype-explanation {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-charcoal);
    line-height: 1.5;
    margin-bottom: var(--space-xs);
}

.archetype-evidence {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.secondary-archetype-name {
    font-family: var(--font-playfair);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin-bottom: 2px;
}

.secondary-archetype-reason {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--color-warm-gray);
    font-style: italic;
}

/* Findings Section */
.findings-section {
    margin-bottom: var(--space-xl);
}

.section-title {
    font-family: var(--font-playfair);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin-bottom: var(--space-md);
}

.finding-card {
    background: white;
    border: 1px solid var(--color-light-border);
    border-radius: 10px;
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

/* Animated left accent border on hover */
.finding-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    background: var(--color-charcoal);
    transform: translateY(-50%);
    transition: height var(--transition-smooth);
    border-radius: 0 2px 2px 0;
}

.finding-card:hover::before {
    height: 50%;
}

.finding-card:hover {
    border-color: var(--color-charcoal-20);
}

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

.finding-title {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-charcoal);
}

.finding-keyword {
    text-decoration: underline;
    text-decoration-color: var(--color-coral);
    text-underline-offset: 3px;
}

.finding-timestamp {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--color-warm-gray);
    white-space: nowrap;
}

.finding-impact {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

.finding-recommendation {
    background: var(--color-cloud-dancer);
    padding: var(--space-sm) var(--space-md);
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--color-charcoal);
}

.recommendation-label {
    font-weight: 600;
    color: var(--color-warning);
}

/* Response Structure Section */
.structure-section {
    margin-bottom: var(--space-xl);
}

.structure-bar-container {
    margin-bottom: var(--space-md);
}

.structure-bar-visual {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    height: 64px;
}

.structure-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs) var(--space-sm);
    text-align: center;
    min-width: 60px;
    transition: all var(--transition-normal);
}

.structure-segment.opener {
    background: var(--color-cloud-dancer);
    color: var(--color-success);
}

.structure-segment.context {
    background: var(--color-cloud-dancer);
    color: #E65100;
}

.structure-segment.headline {
    background: var(--color-cloud-dancer);
    color: #1565C0;
}

.structure-segment.close {
    background: var(--color-cloud-dancer);
    color: #7B1FA2;
}

.segment-label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.segment-percent {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
}

.structure-feedback {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-charcoal-light);
    font-style: italic;
    line-height: 1.5;
}

/* Scorecard Section */
.scorecard-section {
    margin-bottom: var(--space-xl);
}

.scorecard-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.score-row {
    display: grid;
    grid-template-columns: 100px 1fr 50px;
    align-items: center;
    gap: var(--space-md);
}

.score-label {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-charcoal);
}

.score-bar-container {
    height: 8px;
    background: var(--color-light-border);
    border-radius: 4px;
    overflow: hidden;
}

.score-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* All score bars use unified charcoal - differentiate by label, not color */
.clarity-bar { background: var(--color-charcoal); }
.structure-bar { background: var(--color-charcoal); }
.pace-bar { background: var(--color-charcoal); }
.composure-bar { background: var(--color-charcoal); }
.concision-bar { background: var(--color-charcoal); }
.authority-bar { background: var(--color-charcoal); }

.score-value {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-charcoal);
}

.score-comment {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--color-warm-gray);
    font-style: italic;
}

/* Strengths Section */
.strengths-section {
    margin-bottom: var(--space-xl);
}

.strengths-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.strength-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-light-border);
}

.strength-item:last-child {
    border-bottom: none;
}

.strength-check {
    color: var(--color-success);
    font-size: 1rem;
    font-weight: 600;
}

.strength-text {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-charcoal);
    flex: 1;
}

.strength-timestamp {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--color-warm-gray);
}

/* Report Actions */
.report-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-light-border);
}

/* Mobile responsive for report */
@media (max-width: 768px) {
    .report-container {
        padding: 80px var(--space-md) var(--space-xl);
    }

    .archetype-details {
        grid-template-columns: 1fr;
    }

    .score-row {
        grid-template-columns: 80px 1fr 40px;
        gap: var(--space-xs);
    }

    .report-actions {
        flex-direction: column;
    }
}

/* ============================================
   DRILLS LIBRARY
   ============================================ */

.drills-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 80px var(--space-lg) var(--space-xxl);
    text-align: center;
}

.drills-header {
    margin-bottom: var(--space-xl);
    text-align: center;
}

.drills-title {
    font-family: var(--font-playfair);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 400;
    color: var(--color-charcoal);
    margin-bottom: var(--space-xl);
}

.drills-subtitle {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-warm-gray);
    max-width: 500px;
    line-height: 1.6;
    text-align: center;
    margin: 0 auto;
}

.drills-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.drill-tile {
    background: white;
    border: 1px solid var(--color-light-border);
    border-radius: 12px;
    padding: var(--space-lg);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-align: center;
}

.drill-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.drill-icon {
    color: var(--color-charcoal);
    margin-bottom: var(--space-sm);
    transition: transform var(--transition-smooth);
}

.drill-tile:hover .drill-icon {
    transform: scale(1.08);
}

.drill-icon svg {
    display: block;
    margin: 0 auto;
    transition: stroke-width var(--transition-fast), filter var(--transition-smooth);
}

.drill-tile:hover .drill-icon svg {
    stroke-width: 1.8;
    filter: drop-shadow(0 2px 4px rgba(26, 26, 26, 0.08));
}

.drill-category {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: block;
    margin-bottom: var(--space-xs);
}

.drill-category.voice {
    color: var(--color-charcoal);
}

.drill-category.presence {
    color: var(--color-charcoal-mid);
}

.drill-category.clarity {
    color: var(--color-warning);
}

.drill-name {
    font-family: var(--font-playfair);
    font-size: 1.25rem;
    font-weight: 600;
    font-style: italic;
    color: var(--color-charcoal);
    margin-bottom: var(--space-xs);
}

.drill-description {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-sm);
}

.drill-duration {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--color-charcoal-light);
}

.drills-footer {
    text-align: center;
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-light-border);
}

.drills-quote {
    font-family: var(--font-playfair);
    font-size: 1rem;
    font-style: italic;
    color: var(--color-warm-gray);
    max-width: 600px;
    margin: 0 auto;
}

/* Drills mobile responsive */
@media (max-width: 900px) {
    .drills-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .drills-container {
        padding: 70px var(--space-md) var(--space-xl);
    }

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

    .drill-tile {
        padding: var(--space-md);
    }
}

/* ============================================
   LOADING INTERSTITIAL
   ============================================ */

.loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-lg);
    background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-ivory) 100%);
}

.loading-content {
    text-align: center;
    max-width: 400px;
}

.loading-mirror {
    width: 80px;
    height: 96px;
    position: relative;
    margin: 0 auto var(--space-md);
}

.mirror-outline {
    width: 100%;
    height: 100%;
}

.mirror-trace {
    stroke: var(--color-light-border);
    fill: none;
    stroke-dasharray: 360;
    stroke-dashoffset: 360;
    animation: trace-mirror 2s ease-in-out infinite;
}

.mirror-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-playfair);
    font-size: 2rem;
    font-weight: 500;
    font-style: italic;
    color: var(--color-charcoal);
    animation: pulse-logo 2s ease-in-out infinite;
}

.mirror-glint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    opacity: 0;
    animation: glint-flash 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glint-flash {
    0%, 20% {
        opacity: 0;
        transform: scale(0.5);
    }
    25% {
        opacity: 1;
        transform: scale(1.2);
    }
    30%, 70% {
        opacity: 0;
        transform: scale(0.5);
    }
    75% {
        opacity: 1;
        transform: scale(1.2);
    }
    80%, 100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

@keyframes trace-mirror {
    0% {
        stroke-dashoffset: 360;
        stroke: var(--color-light-border);
    }
    50% {
        stroke-dashoffset: 0;
        stroke: var(--color-coral);
    }
    100% {
        stroke-dashoffset: -360;
        stroke: var(--color-light-border);
    }
}

@keyframes pulse-logo {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* Brand M Logo - for brand-building moments */
.brand-m-logo {
    font-family: var(--font-playfair);
    font-size: 2.5rem;
    font-weight: 600;
    font-style: italic;
    color: var(--color-coral);
    display: inline-block;
    animation: gentle-pulse 3s ease-in-out infinite;
    text-shadow: 0 2px 8px rgba(224, 122, 95, 0.2);
}

@keyframes gentle-pulse {
    0%, 100% {
        opacity: 0.85;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

/* Report Brand Header - Diagnostic Report */
.report-brand-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    padding-top: var(--space-md);
}

.report-brand-header .brand-m-logo {
    font-size: 3rem;
}

.brand-tagline {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    font-style: italic;
    color: var(--color-warm-gray);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Results Screen M Logo */
.results-m-logo {
    display: block;
    margin-bottom: var(--space-sm);
}

.loading-content h2 {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    color: var(--color-charcoal);
    margin-bottom: var(--space-xs);
}

.loading-content p {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-warm-gray);
}

/* ============================================
   JOURNEYS PAGE
   ============================================ */

.journeys-container {
    padding: 80px var(--space-lg) var(--space-xxl);
    max-width: 900px;
    margin: 0 auto;
}

/* Section Labels */
.section-label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
    display: block;
}

/* Active Focus Section */
.active-focus-section {
    margin-bottom: var(--space-xxl);
}

.active-focus-card {
    background: white;
    border: 1px solid var(--color-light-border);
    border-radius: 12px;
    padding: var(--space-lg) var(--space-xl);
}

.focus-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-lg);
}

.focus-card-left {
    flex: 1;
}

.focus-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-sm);
}

.focus-badges {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin-bottom: var(--space-sm);
}

.level-badge {
    background: var(--color-charcoal);
    color: white;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
}

.streak-badge {
    color: #E65100;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
}

.focus-title {
    font-family: var(--font-playfair);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-charcoal);
    margin-bottom: var(--space-xs);
}

.focus-goal {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

.goal-name {
    color: var(--color-coral);
    font-weight: 500;
}

.focus-next-up {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-light-border);
    padding-top: var(--space-sm);
    margin-top: var(--space-xs);
}

.next-activity {
    color: var(--color-charcoal);
}

.next-duration {
    color: var(--color-text-muted);
}

.start-session-btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    border-radius: 30px;
}

.focus-links {
    display: flex;
    gap: var(--space-md);
}

.focus-link {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--color-charcoal);
    text-decoration: underline;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.focus-link:hover {
    color: var(--color-coral);
}

.focus-link.secondary {
    color: var(--color-text-secondary);
}

/* Section Titles */
.journeys-section-title {
    font-family: var(--font-playfair);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-charcoal);
    margin-bottom: var(--space-md);
}

/* Journeys Grid - Two Columns */
.journeys-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-xl);
}

/* Your Journeys Section */
.your-journeys-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Journey Card */
.journey-card {
    background: white;
    border: 1px solid var(--color-light-border);
    border-radius: 12px;
    padding: var(--space-md) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    border-left: 4px solid transparent;
}

.journey-card.accent-coral {
    border-left-color: var(--color-coral);
}

.journey-card.accent-dark {
    border-left-color: var(--color-charcoal);
}

.journey-card:hover {
    box-shadow: var(--shadow-sm);
}

.journey-card-content {
    flex: 1;
}

.journey-name {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-xs) 0;
}

.journey-meta {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.journey-card-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-xs);
}

.journey-metric {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
}

.journey-metric.positive {
    color: var(--color-success);
}

.btn-outline-dark {
    background: white;
    border: 1px solid var(--color-charcoal);
    border-radius: 6px;
    padding: 0.4rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-outline-dark:hover {
    background: var(--color-charcoal);
    color: white;
}

/* Create Journey Button */
.create-journey-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px dashed var(--color-light-border);
    border-radius: 12px;
    padding: var(--space-md);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-charcoal-light);
    cursor: pointer;
    transition: all var(--transition-normal);
    width: 100%;
}

.create-journey-btn:hover {
    border-color: var(--color-charcoal);
    color: var(--color-charcoal);
}

/* Daily Habit Section */
.daily-habit-section {
    display: flex;
    flex-direction: column;
}

.daily-habit-card {
    background: white;
    border: 1px solid var(--color-light-border);
    border-radius: 12px;
    padding: var(--space-lg);
}

.habit-label {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    display: block;
    margin-bottom: var(--space-sm);
}

.habit-title {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin-bottom: var(--space-xs);
}

.habit-description {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-lg);
}

.habit-start-btn {
    background: white;
    color: var(--color-charcoal);
    border: 1px solid var(--color-light-border);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.habit-start-btn:hover {
    border-color: var(--color-charcoal);
}

.habit-duration {
    color: var(--color-text-muted);
}

.habit-action {
    font-weight: 600;
}

/* Journeys Page Responsive */
@media (max-width: 768px) {
    .journeys-container {
        padding: 70px var(--space-md) var(--space-xl);
    }

    .journeys-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .focus-card-top {
        flex-direction: column;
        gap: var(--space-md);
    }

    .focus-card-right {
        align-items: stretch;
        width: 100%;
    }

    .start-session-btn {
        width: 100%;
        text-align: center;
    }

    .focus-links {
        justify-content: center;
    }

    .focus-title {
        font-size: 1.5rem;
    }
}

/* ============================================
   SKILLS PAGE (renamed from Journeys)
   ============================================ */

/* Skills Container - matches drills-container exactly */
.skills-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 80px var(--space-lg) var(--space-xxl);
    text-align: center;
}

/* Skills Tiles Grid - matches scenario grid exactly */
.skills-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    max-width: 1100px;
    margin: 0 auto var(--space-xl);
}

.skill-tile {
    background: var(--gradient-card);
    padding: var(--space-lg) var(--space-md);
    border-radius: 12px;
    box-shadow: var(--shadow-glow);
    cursor: pointer;
    transition: all var(--transition-smooth);
    border: 1px solid transparent;
    text-align: center;
    position: relative;
}

.skill-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow-hover);
    border-color: var(--color-coral);
}

.skill-tile-icon {
    color: var(--color-charcoal);
    margin-bottom: var(--space-sm);
    transition: transform var(--transition-smooth);
}

.skill-tile:hover .skill-tile-icon {
    transform: scale(1.08);
}

.skill-tile-icon svg {
    display: block;
    margin: 0 auto;
    transition: stroke-width var(--transition-fast), filter var(--transition-smooth);
}

.skill-tile:hover .skill-tile-icon svg {
    stroke-width: 1.8;
    filter: drop-shadow(0 2px 4px rgba(26, 26, 26, 0.08));
}

.skill-tile-category {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: block;
    margin-bottom: var(--space-xs);
}

.skill-tile-category.executive { color: var(--color-charcoal); }
.skill-tile-category.narrative { color: var(--color-charcoal-mid); }
.skill-tile-category.negotiation { color: var(--color-charcoal); }
.skill-tile-category.qa { color: var(--color-charcoal-mid); }
.skill-tile-category.presence { color: var(--color-charcoal); }
.skill-tile-category.clarity { color: var(--color-charcoal-mid); }
.skill-tile-category.difficult { color: var(--color-charcoal); }
.skill-tile-category.performance { color: var(--color-charcoal-mid); }

.skill-tile-name {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin-bottom: var(--space-xs);
}

.skill-tile-description {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-sm);
}

.skill-tile-meta {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Skill tile status indicators */
.skill-tile-status {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-top: var(--space-xs);
}

.skill-tile-status.active {
    color: var(--color-coral);
}

.skill-tile-status.completed {
    color: #6B8E23;
}

/* Skills page title - matches other page titles */
.skills-page-title {
    font-family: var(--font-playfair);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 400;
    color: var(--color-charcoal);
    margin-bottom: var(--space-sm);
}

.skills-page-subtitle {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-warm-gray);
    max-width: 500px;
    margin: 0 auto var(--space-xl);
    line-height: 1.6;
}

/* Skills Footer */
.skills-footer {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-light-border);
}

.skills-quote {
    font-family: var(--font-playfair);
    font-size: 1rem;
    font-style: italic;
    color: var(--color-warm-gray);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Skills Responsive - matches scenario-grid breakpoints */
@media (max-width: 900px) {
    .skills-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .skills-tiles {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .skill-tile {
        padding: var(--space-md);
    }
}

/* Available Skills Section - shows skill-building programs */
.available-skills-section {
    margin-bottom: var(--space-xxl);
}

.skills-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.skills-title {
    font-family: var(--font-playfair);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 400;
    color: var(--color-charcoal);
    margin-bottom: var(--space-sm);
}

.skills-title .title-italic {
    font-style: italic;
    color: var(--color-warm-gray);
}

.skills-subtitle {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-warm-gray);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

.skills-page-title {
    font-family: var(--font-playfair);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 400;
    color: var(--color-charcoal);
    margin-bottom: var(--space-sm);
}

.skills-page-subtitle {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-text-secondary);
}

/* Available Skills Grid */
.available-skills-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.available-skill-card {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    background: white;
    border: 1px solid var(--color-light-border);
    border-radius: 12px;
    padding: var(--space-lg) var(--space-xl);
    transition: all var(--transition-normal);
    border-left: 4px solid var(--skill-color, var(--color-coral));
}

.available-skill-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--color-light-border);
    border-left-color: var(--skill-color, var(--color-coral));
}

.skill-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-off-white);
    border-radius: 12px;
}

.skill-card-icon svg {
    width: 24px;
    height: 24px;
}

.skill-card-body {
    flex: 1;
    min-width: 0;
}

.skill-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.skill-card-title {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin: 0;
}

.skill-status-badge {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.skill-status-badge.active {
    background: rgba(129, 178, 154, 0.15);
    color: #2D6A4F;
}

.skill-status-badge.completed {
    background: rgba(26, 26, 26, 0.1);
    color: var(--color-charcoal);
}

.skill-card-description {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0 0 var(--space-sm) 0;
}

.skill-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.skill-meta-dot {
    opacity: 0.5;
}

.skill-card-btn {
    flex-shrink: 0;
    background: white;
    border: 1px solid var(--color-charcoal);
    border-radius: 6px;
    padding: 0.5rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.skill-card-btn:hover {
    background: var(--color-charcoal);
    color: white;
}

.skills-section-title {
    font-family: var(--font-playfair);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-charcoal);
    margin-bottom: var(--space-sm);
}

.skills-section-subtitle {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
}

/* Skills Container Responsive */
@media (max-width: 768px) {
    .skills-container {
        padding: 70px var(--space-md) var(--space-xl);
    }

    .skills-header {
        margin-bottom: var(--space-xl);
    }

    .skills-title {
        font-size: clamp(1.75rem, 5vw, 2.25rem);
    }
}

/* Available Skills Responsive */
@media (max-width: 768px) {
    .available-skill-card {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-lg);
    }

    .skill-card-icon {
        margin-bottom: var(--space-sm);
    }

    .skill-card-btn {
        width: 100%;
        margin-top: var(--space-md);
    }
}

/* Skills Grid - displays available skill programs */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-md);
}

.skills-grid .scenario-card {
    background: white;
    border: 1px solid var(--color-light-border);
    border-radius: 12px;
    padding: var(--space-lg);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.skills-grid .scenario-card:hover {
    border-color: var(--color-coral);
    box-shadow: var(--shadow-sm);
}

.skills-grid .scenario-icon {
    margin-bottom: var(--space-sm);
}

.skills-grid .scenario-card h3 {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin-bottom: var(--space-xs);
}

.skills-grid .scenario-card p {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-sm);
}

.skill-duration {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    background: var(--color-off-white);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* Skills Bottom Grid - Your Skills + Daily Habit */
.skills-bottom-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-xl);
}

.your-skills-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Skill Card - same styling as journey card */
.skill-card {
    background: white;
    border: 1px solid var(--color-light-border);
    border-radius: 12px;
    padding: var(--space-md) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    border-left: 4px solid transparent;
}

.skill-card.accent-coral {
    border-left-color: var(--color-coral);
}

.skill-card.accent-dark {
    border-left-color: var(--color-charcoal);
}

.skill-card:hover {
    box-shadow: var(--shadow-sm);
}

.skill-card-content {
    flex: 1;
}

.skill-name {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-xs) 0;
}

.skill-meta {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.skill-card-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-xs);
}

.skill-metric {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
}

.skill-metric.positive {
    color: var(--color-success);
}

/* Create Skill Button */
.create-skill-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px dashed var(--color-light-border);
    border-radius: 12px;
    padding: var(--space-md);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-charcoal-light);
    cursor: pointer;
    transition: all var(--transition-normal);
    width: 100%;
}

.create-skill-btn:hover {
    border-color: var(--color-charcoal);
    color: var(--color-charcoal);
}

/* Skills Page Responsive */
@media (max-width: 768px) {
    .skills-container {
        padding: 70px var(--space-md) var(--space-xl);
    }

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

    .skills-bottom-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
}

/* ============================================
   ASPIRATIONAL ARCHETYPES (Diagnostic Report)
   ============================================ */

.aspirational-archetypes-section {
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-light-border);
}

.aspirational-title {
    font-family: var(--font-playfair);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 400;
    color: var(--color-charcoal);
    text-align: center;
    margin-bottom: var(--space-xs);
}

.aspirational-subtitle {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-warm-gray);
    text-align: center;
    margin-bottom: var(--space-lg);
}

.aspirational-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.aspirational-card {
    background: white;
    border: 1px solid var(--color-light-border);
    border-radius: 12px;
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.aspirational-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-coral);
}

.aspirational-card:hover .aspirational-arrow {
    color: var(--color-coral);
    transform: translateX(4px);
}

.aspirational-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.aspirational-name {
    font-family: var(--font-playfair);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin: 0;
}

.aspirational-arrow {
    font-size: 1.25rem;
    color: var(--color-charcoal-light);
    transition: all var(--transition-fast);
}

.aspirational-description {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-warm-gray);
    line-height: 1.5;
    margin: 0;
}

/* Aspirational Archetypes Responsive */
@media (max-width: 768px) {
    .aspirational-grid {
        grid-template-columns: 1fr;
    }

    .aspirational-card {
        padding: var(--space-md);
    }
}

/* ============================================
   REAL-TIME PRACTICE HUD
   ============================================ */

/* Live Analysis Toggle Button (Setup Screen) */
/* HIDDEN: Live Analysis feature temporarily disabled */
.live-analysis-toggle-group {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
}

.live-analysis-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--color-warm-white);
    border: 1px solid var(--color-light-border);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-charcoal-light);
    cursor: pointer;
    transition: all var(--transition-fast);
    width: fit-content;
}

.live-analysis-toggle-btn:hover {
    background: var(--color-cloud-dancer);
    border-color: var(--color-charcoal-light);
}

.live-analysis-toggle-btn.active {
    background: var(--color-charcoal);
    border-color: var(--color-charcoal);
    color: var(--color-warm-white);
}

.live-analysis-toggle-btn .toggle-icon {
    display: flex;
    align-items: center;
}

.live-analysis-toggle-btn .toggle-label {
    letter-spacing: 0.05em;
}

.toggle-hint {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--color-warm-gray);
}

/* Live Analysis Overlay */
/* HIDDEN: Live Analysis feature temporarily disabled */
.live-analysis {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1000;
    display: none !important;
    flex-direction: column;
    gap: 12px;
    background: rgba(26, 26, 26, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    min-width: 180px;
    max-width: 220px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    font-family: var(--font-sans);
}

/* HUD Main Score Section */
.hud-main {
    text-align: center;
}

.hud-score-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.hud-score-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.hud-status {
    font-size: 1rem;
    transition: color 0.3s ease;
}

/* Status colors - sophisticated muted tones matching brand */
.hud-status.strong { color: #7A9B7A; } /* Muted sage green */
.hud-status.good { color: #8FA3B3; } /* Soft slate blue */
.hud-status.needs_work { color: #C4A77D; } /* Warm gold */
.hud-status.critical { color: #B87A7A; } /* Muted rose */

.hud-trend {
    font-size: 1.25rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Trend colors - matching brand palette */
.hud-trend.improving { color: #7A9B7A; }
.hud-trend.stable { color: #8FA3B3; }
.hud-trend.declining { color: #B87A7A; }
.hud-trend.neutral { color: rgba(255, 255, 255, 0.4); }

/* HUD Quick Tip - warm gold tones matching brand */
.hud-quick-tip {
    font-size: 0.85rem;
    font-weight: 600;
    color: #C4A77D; /* Warm gold */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 12px;
    background: rgba(196, 167, 125, 0.15);
    border-radius: 6px;
    text-align: center;
    transition: all 0.3s ease;
}

.hud-quick-tip.tip-flash {
    background: rgba(196, 167, 125, 0.3);
    transform: scale(1.02);
}

/* HUD Dimensions */
.hud-dimensions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hud-dim {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hud-dim-label {
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hud-dim-track {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.hud-dim-bar {
    height: 100%;
    background: linear-gradient(90deg, #8FA3B3, #7A9B7A); /* Brand slate to sage */
    border-radius: 2px;
    transition: width 0.3s ease-out;
}

/* HUD Responsive */
@media (max-width: 768px) {
    .practice-hud {
        top: auto;
        bottom: 120px;
        right: 10px;
        left: 10px;
        max-width: none;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
    }

    .hud-main {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .hud-score-container {
        margin-bottom: 0;
    }

    .hud-score-value {
        font-size: 1.75rem;
    }

    .hud-quick-tip {
        font-size: 0.75rem;
        padding: 6px 10px;
    }

    .hud-dimensions {
        flex-direction: row;
        gap: 12px;
    }

    .hud-dim {
        min-width: 60px;
    }

    .hud-dim-track {
        height: 3px;
    }
}

/* ============================================
   AUTHENTICATION MODAL
   ============================================ */

/* Account Button in Nav */
.nav-account-btn {
    padding: 8px 20px;
    background: transparent;
    border: 1.5px solid var(--color-charcoal);
    border-radius: 24px;
    color: var(--color-charcoal);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.nav-account-btn:hover {
    background: var(--color-charcoal);
    color: var(--color-warm-white);
}

.nav-account-btn.logged-in {
    padding: 6px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-charcoal);
    color: var(--color-warm-white);
    border: none;
}

.nav-account-btn.logged-in .account-text {
    display: none;
}

.nav-account-btn .account-avatar {
    display: none;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
}

.nav-account-btn.logged-in .account-avatar {
    display: block;
}

/* Modal Overlay */
.auth-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.auth-modal.active {
    display: flex;
}

.auth-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 26, 26, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Modal Container */
.auth-container {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--color-warm-white);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Auth Views */
.auth-view {
    padding: var(--space-lg);
}

/* Close Button */
.auth-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--color-charcoal-light);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.auth-close:hover {
    background: var(--color-cloud-dancer);
    color: var(--color-charcoal);
}

/* Auth Header */
.auth-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.auth-title {
    font-family: var(--font-playfair);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--color-charcoal);
    margin-bottom: var(--space-xs);
}

.auth-subtitle {
    font-size: 0.95rem;
    color: var(--color-charcoal-light);
    line-height: 1.5;
}

/* Provider Buttons */
.auth-providers {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: var(--space-md);
}

.auth-provider-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px 20px;
    background: var(--color-soft-white);
    border: 1.5px solid var(--color-light-border);
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.auth-provider-btn:hover {
    border-color: var(--color-charcoal-light);
    background: var(--color-cloud-dancer);
}

.provider-icon {
    flex-shrink: 0;
}

/* Divider */
.auth-divider {
    display: flex;
    align-items: center;
    margin: var(--space-md) 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-light-border);
}

.auth-divider span {
    padding: 0 var(--space-sm);
    font-size: 0.85rem;
    color: var(--color-warm-gray);
    text-transform: lowercase;
}

/* Auth Form */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-field label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-charcoal);
}

.auth-field input {
    width: 100%;
    padding: 14px 16px;
    background: var(--color-soft-white);
    border: 1.5px solid var(--color-light-border);
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-charcoal);
    transition: all var(--transition-fast);
}

.auth-field input:focus {
    outline: none;
    border-color: var(--color-charcoal);
    background: var(--color-warm-white);
}

.auth-field input::placeholder {
    color: var(--color-silver);
    font-family: var(--font-serif);
    font-style: italic;
}

.field-hint {
    font-size: 0.8rem;
    color: var(--color-warm-gray);
}

/* Submit Button */
.auth-submit-btn {
    width: 100%;
    padding: 14px 20px;
    margin-top: var(--space-sm);
    background: var(--color-charcoal);
    border: none;
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-warm-white);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.auth-submit-btn:hover {
    background: var(--color-accent-hover);
}

.auth-submit-btn:disabled {
    background: var(--color-silver);
    cursor: not-allowed;
}

/* Footer Links */
.auth-footer {
    text-align: center;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-light-border);
}

.auth-footer p {
    font-size: 0.9rem;
    color: var(--color-charcoal-light);
}

.auth-link {
    background: none;
    border: none;
    color: var(--color-charcoal);
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-link:hover {
    color: var(--color-accent-hover);
}

/* Terms Text */
.auth-terms {
    font-size: 0.8rem;
    color: var(--color-warm-gray);
    text-align: center;
    margin-top: var(--space-md);
    line-height: 1.5;
}

.auth-terms a {
    color: var(--color-charcoal-light);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-terms a:hover {
    color: var(--color-charcoal);
}

/* Profile View */
.profile-avatar {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--space-sm);
    background: var(--color-charcoal);
    color: var(--color-warm-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.profile-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin: var(--space-lg) 0;
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-light-border);
    border-bottom: 1px solid var(--color-light-border);
}

.profile-stat {
    text-align: center;
}

.stat-value {
    display: block;
    font-family: var(--font-playfair);
    font-size: 1.5rem;
    color: var(--color-charcoal);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Profile Actions */
.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: var(--space-md);
}

.profile-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    background: var(--color-soft-white);
    border: 1.5px solid var(--color-light-border);
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.profile-action-btn:hover {
    border-color: var(--color-charcoal);
    background: var(--color-cloud-dancer);
}

/* Sign Out Button */
.auth-signout-btn {
    width: 100%;
    padding: 12px 20px;
    background: transparent;
    border: none;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-danger);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.auth-signout-btn:hover {
    text-decoration: underline;
}

/* Auth Error Message */
.auth-error {
    background: rgba(125, 90, 90, 0.1);
    border: 1px solid var(--color-danger);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: var(--space-md);
    font-size: 0.9rem;
    color: var(--color-danger);
    text-align: center;
}

/* Auth Loading State */
.auth-loading {
    position: relative;
    pointer-events: none;
}

.auth-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(250, 249, 247, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Responsive Auth */
@media (max-width: 480px) {
    .auth-modal {
        padding: 0;
        align-items: flex-end;
    }

    .auth-container {
        max-width: 100%;
        max-height: 95vh;
        border-radius: 20px 20px 0 0;
        animation: modalSlideUp 0.3s ease;
    }

    @keyframes modalSlideUp {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .auth-view {
        padding: var(--space-md);
        padding-bottom: var(--space-xl);
    }

    .auth-title {
        font-size: 1.5rem;
    }

    .profile-stats {
        gap: var(--space-md);
    }
}

/* ============================================
   SUBTLE DESIGN POLISH
   Brand refinements for elevated feel
   ============================================ */

/* Text selection - warm, on-brand */
::selection {
    background: rgba(26, 26, 26, 0.12);
    color: var(--color-charcoal);
}

/* Custom scrollbar - subtle, minimal */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(26, 26, 26, 0.15);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(26, 26, 26, 0.25);
    background-clip: content-box;
}

/* Focus states - elegant ring */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-cream), 0 0 0 4px rgba(26, 26, 26, 0.2);
}

button:focus-visible,
.btn:focus-visible {
    box-shadow: 0 0 0 2px var(--color-cream), 0 0 0 4px rgba(26, 26, 26, 0.25);
}

/* Subtle image treatment */
img {
    image-rendering: -webkit-optimize-contrast;
}

/* Link underline polish */
a {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Input field refinements */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    caret-color: var(--color-charcoal);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.06);
}

/* Smooth color transitions for interactive elements */
* {
    transition-property: background-color, border-color, color, fill, stroke, opacity;
    transition-duration: 150ms;
    transition-timing-function: ease;
}

/* Override for elements that need explicit transitions */
.btn, .home-tile, .scenario-card, .practice-card, .nav-tab, .skill-tile, .drill-tile {
    transition: all var(--transition-smooth);
}

/* Subtle text rendering optimization */
body {
    text-rendering: optimizeLegibility;
}

/* SVG icon smoothing */
svg {
    shape-rendering: geometricPrecision;
}

/* Disabled state polish */
button:disabled,
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Loading shimmer for async content */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.loading-shimmer {
    background: linear-gradient(90deg,
        var(--color-cloud-dancer) 0%,
        rgba(255,255,255,0.8) 50%,
        var(--color-cloud-dancer) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   VISUAL TEXTURE & BRAND MOMENTS
   ============================================ */

/* Glow-up: Enhanced noise texture overlay for premium organic feel */
.noise-texture::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.02;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    z-index: 9999;
    mix-blend-mode: multiply;
}

/* Enhanced gradient overlays */
.gradient-glow {
    position: relative;
}

.gradient-glow::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(240, 238, 233, 0.8) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* Warm gradient accent - appears on key sections */
.warm-gradient-accent {
    position: relative;
    overflow: hidden;
}

.warm-gradient-accent::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--color-charcoal-20) 20%,
        var(--color-charcoal-40) 50%,
        var(--color-charcoal-20) 80%,
        transparent 100%
    );
    opacity: 0.4;
}

/* Geometric decorative corner accents */
.corner-accent::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, transparent 50%, rgba(26, 26, 26, 0.03) 50%);
    pointer-events: none;
}

/* Floating orb decoration - subtle background element */
@keyframes float-gentle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(3deg); }
}

/* Glow-up: Enhanced decorative orb with layered gradients */
.decorative-orb {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%,
            rgba(240, 238, 233, 0.95) 0%,
            rgba(250, 249, 247, 0.5) 40%,
            transparent 65%
        ),
        radial-gradient(circle at 70% 70%,
            rgba(245, 243, 238, 0.3) 0%,
            transparent 50%
        );
    pointer-events: none;
    animation: float-gentle 10s ease-in-out infinite, orbPulse 6s ease-in-out infinite;
    opacity: 0.7;
    filter: blur(1px);
}

@keyframes orbPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.05); opacity: 0.85; }
}

/* Enhanced card depth with layered shadows */
.depth-card {
    box-shadow:
        0 1px 2px rgba(26, 26, 26, 0.04),
        0 4px 8px rgba(26, 26, 26, 0.04),
        0 8px 16px rgba(26, 26, 26, 0.02),
        0 16px 32px rgba(26, 26, 26, 0.02);
    transition: all var(--transition-smooth);
}

.depth-card:hover {
    box-shadow:
        0 2px 4px rgba(26, 26, 26, 0.04),
        0 8px 16px rgba(26, 26, 26, 0.06),
        0 16px 32px rgba(26, 26, 26, 0.04),
        0 24px 48px rgba(26, 26, 26, 0.04);
}

/* Glowing border accent for interactive elements */
.glow-border {
    position: relative;
}

.glow-border::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg,
        rgba(240, 238, 233, 0.8) 0%,
        rgba(26, 26, 26, 0.05) 50%,
        rgba(240, 238, 233, 0.8) 100%
    );
    z-index: -1;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.glow-border:hover::after {
    opacity: 1;
}

/* Animated underline for links */
.animated-underline {
    position: relative;
    text-decoration: none;
}

.animated-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-normal);
}

.animated-underline:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Pulse animation for success moments */
@keyframes success-pulse {
    0% { box-shadow: 0 0 0 0 rgba(90, 107, 90, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(90, 107, 90, 0); }
    100% { box-shadow: 0 0 0 0 rgba(90, 107, 90, 0); }
}

.success-moment {
    animation: success-pulse 1.5s ease-out;
}

/* Gentle entrance animation */
@keyframes fade-up-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-up-enter {
    animation: fade-up-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Staggered children animation */
.stagger-children > * {
    opacity: 0;
    animation: staggerFadeIn var(--transition-smooth) forwards;
}

@keyframes staggerFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(n+7) { animation-delay: 0.35s; }

/* Enhanced home tiles with gradient sheen */
.home-tile::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    transition: left 0.8s ease-out;
    pointer-events: none;
}

.home-tile:hover::after {
    left: 100%;
}

/* Enhanced scenario cards with subtle pattern */
.scenario-card {
    position: relative;
    overflow: hidden;
}

.scenario-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(240, 238, 233, 0.5) 0%, transparent 40%),
        linear-gradient(180deg, rgba(255,255,255,0.8) 0%, transparent 100%);
    pointer-events: none;
    opacity: 0.5;
}

/* Elegant divider with diamond accent */
.elegant-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: var(--space-xl) 0;
}

.elegant-divider::before,
.elegant-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--color-light-border) 50%, transparent 100%);
}

.elegant-divider .diamond {
    width: 8px;
    height: 8px;
    background: var(--color-charcoal-20);
    transform: rotate(45deg);
}

/* Glass morphism effect for modals */
.glass-effect {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Spotlight hover effect */
.spotlight-hover {
    position: relative;
    overflow: hidden;
}

.spotlight-hover::before {
    content: '';
    position: absolute;
    top: var(--mouse-y, 50%);
    left: var(--mouse-x, 50%);
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 60%);
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
    pointer-events: none;
}

.spotlight-hover:hover::before {
    width: 400px;
    height: 400px;
}

/* Elegant success radiance - sophisticated celebration */
@keyframes radiance-expand {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

.success-radiance {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center,
        rgba(90, 107, 90, 0.08) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 9998;
    animation: radiance-expand 1.5s ease-out forwards;
}

/* Warm glow for achievement moments */
@keyframes warm-glow {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.achievement-glow {
    position: relative;
}

.achievement-glow::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle,
        rgba(240, 238, 233, 0.6) 0%,
        transparent 70%
    );
    animation: warm-glow 2s ease-in-out;
    pointer-events: none;
}

/* Elegant burst - tasteful celebration sparkle */
@keyframes elegant-burst {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

@keyframes particle-drift {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: var(--drift-to) scale(0);
        opacity: 0;
    }
}

.elegant-burst-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.elegant-burst-ring {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 1px solid var(--color-charcoal-20);
    border-radius: 50%;
    animation: elegant-burst 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.elegant-burst-ring:nth-child(2) {
    width: 180px;
    height: 180px;
    animation-delay: 0.1s;
    border-color: var(--color-charcoal-40);
}

.elegant-burst-ring:nth-child(3) {
    width: 260px;
    height: 260px;
    animation-delay: 0.2s;
    border-color: var(--color-cloud-dancer);
}

/* Minimal sparkle particles */
.sparkle-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--color-charcoal);
    border-radius: 50%;
    animation: particle-drift 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.sparkle-particle:nth-child(4) { --drift-to: translate(-60px, -80px); animation-delay: 0.05s; }
.sparkle-particle:nth-child(5) { --drift-to: translate(70px, -70px); animation-delay: 0.1s; background: var(--color-charcoal-60); }
.sparkle-particle:nth-child(6) { --drift-to: translate(90px, 20px); animation-delay: 0.15s; }
.sparkle-particle:nth-child(7) { --drift-to: translate(-80px, 40px); animation-delay: 0.08s; background: var(--color-charcoal-60); }
.sparkle-particle:nth-child(8) { --drift-to: translate(30px, 90px); animation-delay: 0.12s; }
.sparkle-particle:nth-child(9) { --drift-to: translate(-50px, -50px); animation-delay: 0.18s; width: 3px; height: 3px; }
.sparkle-particle:nth-child(10) { --drift-to: translate(50px, -90px); animation-delay: 0.22s; width: 3px; height: 3px; background: var(--color-charcoal-40); }
.sparkle-particle:nth-child(11) { --drift-to: translate(-90px, -20px); animation-delay: 0.06s; width: 5px; height: 5px; }

/* Subtle texture for headers */
/* .textured-header underline removed for cleaner look */
.textured-header {
    position: relative;
}

/* Ribbon accent for featured content */
.ribbon-accent {
    position: absolute;
    top: 12px;
    right: -30px;
    background: var(--color-charcoal);
    color: var(--color-soft-white);
    padding: 4px 40px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transform: rotate(45deg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Improved focus states for accessibility + beauty */
.focus-ring:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--color-soft-white),
        0 0 0 4px var(--color-charcoal);
}

/* Enhanced button hover with gradient reveal */
.btn-enhanced {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.1) 0%,
        transparent 50%,
        rgba(0,0,0,0.1) 100%
    );
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: -1;
}

.btn-enhanced:hover::before {
    opacity: 1;
}

/* Subtle grid pattern background */
.grid-pattern-bg {
    background-image:
        linear-gradient(rgba(26, 26, 26, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 26, 26, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Breathing animation for calm moments */
@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

.breathing-element {
    animation: breathe 4s ease-in-out infinite;
}

/* Active session visual enhancement */
.active-session-glow {
    position: relative;
}

.active-session-glow::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: linear-gradient(45deg,
        transparent 40%,
        rgba(90, 107, 90, 0.15) 50%,
        transparent 60%
    );
    background-size: 300% 300%;
    border-radius: inherit;
    animation: glow-shift 3s ease-in-out infinite;
    z-index: -1;
}

@keyframes glow-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ============================================
   EDITORIAL TYPOGRAPHY REFINEMENTS
   ============================================ */

/* Enable OpenType features globally */
body {
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Playfair Display - heroic headlines with tight tracking */
.home-title,
.selection-title,
.drills-title,
.skills-title,
h1 {
    font-feature-settings: 'kern' 1, 'liga' 1, 'dlig' 1;
    letter-spacing: var(--letter-tight);
    word-spacing: 0.02em;
}

/* The italic spans - slightly looser for elegance */
.title-italic {
    letter-spacing: 0.01em;
    font-feature-settings: 'kern' 1, 'liga' 1, 'swsh' 1;
}

/* Navigation - subtle small-caps energy */
.nav-tab {
    font-feature-settings: 'kern' 1, 'cpsp' 1;
    letter-spacing: var(--letter-editorial);
    font-variant-numeric: tabular-nums;
}

/* Tile labels - magazine masthead style */
.tile-label,
.drill-category {
    font-feature-settings: 'kern' 1, 'cpsp' 1, 'ss01' 1;
    letter-spacing: var(--letter-spread);
    word-spacing: 0.1em;
}

/* Description text - refined reading experience */
.home-description,
.drills-subtitle,
.skills-subtitle,
.mode-description,
.tile-description,
.drill-description {
    font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1;
    letter-spacing: var(--letter-relaxed);
    word-spacing: 0.03em;
    hanging-punctuation: first last;
}

/* Scenario cards - headline hierarchy */
.scenario-title {
    font-feature-settings: 'kern' 1, 'liga' 1;
    letter-spacing: var(--letter-snug);
}

/* Button text - confident, no-nonsense */
.btn {
    font-feature-settings: 'kern' 1, 'ss01' 1;
    letter-spacing: var(--letter-wide);
}

/* Score displays - tabular for alignment */
.score-value,
.metric-value,
.drill-duration {
    font-feature-settings: 'tnum' 1, 'kern' 1;
    font-variant-numeric: tabular-nums lining-nums;
}

/* Results text - clear hierarchy */
.results-header h2 {
    font-feature-settings: 'kern' 1, 'liga' 1;
    letter-spacing: var(--letter-tight);
}

/* Elegant drop cap for long-form content */
.editorial-drop-cap::first-letter {
    font-family: var(--font-playfair);
    float: left;
    font-size: 3.5em;
    line-height: 0.8;
    padding-right: 0.1em;
    margin-top: 0.05em;
    font-weight: 400;
    color: var(--color-charcoal);
}

/* Subtle optical margin alignment */
.optical-align-left {
    margin-left: -0.05em;
}

/* Refined blockquote styling */
blockquote,
.coach-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15em;
    letter-spacing: 0.005em;
    line-height: 1.6;
    color: var(--color-charcoal-mid);
}

blockquote::before {
    content: '"';
    font-family: var(--font-playfair);
    font-size: 2em;
    line-height: 0;
    vertical-align: -0.3em;
    margin-right: 0.05em;
    color: var(--color-charcoal-20);
}

/* Journey titles - warm authority */
.journey-name,
.focus-name {
    font-feature-settings: 'kern' 1, 'liga' 1;
    letter-spacing: var(--letter-snug);
}

/* Micro-labels and metadata */
.progress-text,
.session-meta,
.result-label {
    font-feature-settings: 'kern' 1, 'cpsp' 1, 'ss01' 1;
    letter-spacing: var(--letter-wide);
    font-variant-numeric: tabular-nums;
}

/* Logo - distinctive character */
.logo-text {
    font-feature-settings: 'kern' 1, 'liga' 1, 'ss02' 1;
    letter-spacing: -0.03em;
}

/* Hanging punctuation for refined lists */
ul.editorial-list,
ol.editorial-list {
    list-style-position: outside;
    padding-left: 1.2em;
}

.editorial-list li {
    padding-left: 0.3em;
    text-indent: -0.1em;
}

/* Sentence case with first-letter emphasis */
.sentence-emphasis::first-letter {
    font-weight: 500;
}

/* Refined underlines that don't cut through descenders */
.smart-underline {
    text-decoration: underline;
    text-decoration-skip-ink: auto;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
}

/* Ordinals and fractions */
.ordinal {
    font-feature-settings: 'ordn' 1;
}

.fraction {
    font-feature-settings: 'frac' 1;
}

/* Old-style figures for body text */
.oldstyle-nums {
    font-feature-settings: 'onum' 1;
    font-variant-numeric: oldstyle-nums;
}

/* Lining figures for UI elements */
.lining-nums {
    font-feature-settings: 'lnum' 1;
    font-variant-numeric: lining-nums;
}

/* ============================================
   ACCESSIBILITY - Skip Link
   ============================================ */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-charcoal);
    color: var(--color-warm-white);
    padding: 1rem 2rem;
    border-radius: 0 0 8px 8px;
    z-index: 10000;
    font-family: var(--font-sans);
    font-weight: 500;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--color-ai-listening);
    outline-offset: 2px;
}

/* ============================================
   FUNCTIONAL COLORS - AI State Indicators
   ============================================ */

/* AI Listening State - Soft Green Glow */
.listening-indicator,
.ai-listening {
    position: relative;
}

.ai-listening::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: var(--color-ai-listening-glow);
    animation: pulse-glow 2s ease-in-out infinite;
    z-index: -1;
}

.listening-btn.active,
.mic-button.listening {
    background: var(--color-ai-listening) !important;
    box-shadow:
        0 0 0 4px var(--color-ai-listening-glow),
        0 0 20px var(--color-ai-listening-glow),
        0 0 40px var(--color-ai-listening-glow);
    animation: listening-pulse 1.5s ease-in-out infinite;
}

@keyframes listening-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 4px var(--color-ai-listening-glow),
            0 0 20px var(--color-ai-listening-glow),
            0 0 40px var(--color-ai-listening-glow);
    }
    50% {
        box-shadow:
            0 0 0 8px var(--color-ai-listening-glow),
            0 0 30px var(--color-ai-listening-glow),
            0 0 60px var(--color-ai-listening-glow);
    }
}

/* AI Speaking State - Soft Blue */
.ai-speaking {
    background: var(--color-ai-speaking) !important;
    box-shadow: 0 0 20px var(--color-ai-speaking-glow);
}

/* User Speaking State - Warm Amber */
.user-speaking {
    background: var(--color-user-speaking) !important;
    box-shadow:
        0 0 0 4px var(--color-user-speaking-glow),
        0 0 20px var(--color-user-speaking-glow);
    animation: user-pulse 0.8s ease-in-out infinite;
}

@keyframes user-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* Processing State - Soft Purple */
.processing {
    background: var(--color-processing) !important;
    animation: processing-spin 1s linear infinite;
}

@keyframes processing-spin {
    0% { box-shadow: 0 0 0 4px var(--color-processing-glow); }
    50% { box-shadow: 0 0 20px var(--color-processing-glow); }
    100% { box-shadow: 0 0 0 4px var(--color-processing-glow); }
}

/* ═══════════════════════════════════════════════════════
   COACHING AGENTS: Debrief Report & Curriculum Plan
   ═══════════════════════════════════════════════════════ */

.debrief-report {
    display: none;
    margin-top: var(--space-lg);
    animation: fadeInUp 500ms ease-out;
}

.debrief-section {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
}

.debrief-headline h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-warm-gray);
    margin-bottom: var(--space-xs);
}

.debrief-headline-text {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-primary, #fff);
}

.debrief-assessment p {
    line-height: 1.6;
    color: var(--color-text-secondary, #ccc);
}

.comm-style {
    margin-top: var(--space-xs);
    font-style: italic;
    color: var(--color-accent, #8ab4f8) !important;
}

.score-arc {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
}

.arc-dot {
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 600;
}
.arc-dot.high { background: rgba(76, 175, 80, 0.2); color: #4caf50; }
.arc-dot.mid { background: rgba(255, 193, 7, 0.2); color: #ffc107; }
.arc-dot.low { background: rgba(244, 67, 54, 0.2); color: #f44336; }

.arc-narrative {
    margin-top: var(--space-xs);
    font-size: 0.9rem;
    color: var(--color-text-secondary, #ccc);
}

.debrief-strength-weakness {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    background: none;
    backdrop-filter: none;
    border: none;
    padding: 0;
}

.debrief-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: var(--space-md);
}

.debrief-card .card-icon {
    font-size: 1.4rem;
    display: block;
    margin-bottom: var(--space-xs);
}

.debrief-card.strength { border-left: 3px solid #4caf50; }
.debrief-card.strength .card-icon { color: #4caf50; }
.debrief-card.growth { border-left: 3px solid #ff9800; }
.debrief-card.growth .card-icon { color: #ff9800; }

.debrief-card h4 {
    font-size: 1rem;
    margin-bottom: 4px;
}

.debrief-card p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-secondary, #ccc);
}

.moment-type {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: var(--space-xs);
}
.moment-type.breakthrough { background: rgba(76, 175, 80, 0.2); color: #4caf50; }
.moment-type.struggle { background: rgba(244, 67, 54, 0.2); color: #f44336; }
.moment-type.turning_point { background: rgba(33, 150, 243, 0.2); color: #2196f3; }

.next-focus {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-accent, #8ab4f8);
}

.practice-exercise {
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    border-left: 3px solid var(--color-accent, #8ab4f8);
}

.practice-exercise strong {
    display: block;
    margin-bottom: 4px;
}

.practice-exercise p {
    font-size: 0.9rem;
    color: var(--color-text-secondary, #ccc);
    line-height: 1.5;
}

/* DNA Axes */
.dna-axes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dna-axis {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.axis-label {
    width: 120px;
    font-size: 0.85rem;
    text-transform: capitalize;
    color: var(--color-text-secondary, #ccc);
}

.axis-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.axis-fill {
    height: 100%;
    background: linear-gradient(90deg, #8ab4f8, #4caf50);
    border-radius: 3px;
    transition: width 800ms ease-out;
}

.axis-score {
    width: 30px;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-mono, monospace);
}

.dna-archetype {
    margin-top: var(--space-sm);
    text-align: center;
    font-size: 0.95rem;
}

/* Curriculum Next Card */
.curriculum-next {
    display: none;
    margin-top: var(--space-md);
    animation: fadeInUp 500ms ease-out 200ms backwards;
}

.curriculum-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: var(--space-md);
}

.curriculum-card.complete {
    text-align: center;
    border-color: #4caf50;
}

.curriculum-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.curriculum-header h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-warm-gray);
}

.curriculum-progress {
    font-size: 0.8rem;
    color: var(--color-accent, #8ab4f8);
    font-weight: 600;
}

.week-theme {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.next-activity {
    padding: var(--space-sm);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    margin-bottom: var(--space-sm);
}

.activity-type {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 8px;
}
.activity-type.drill { background: rgba(156, 39, 176, 0.2); color: #ce93d8; }
.activity-type.scenario { background: rgba(33, 150, 243, 0.2); color: #90caf9; }

.activity-name {
    font-weight: 600;
}

.activity-purpose {
    font-size: 0.85rem;
    color: var(--color-text-secondary, #ccc);
    margin-top: 4px;
}

.encouragement {
    font-style: italic;
    color: var(--color-accent, #8ab4f8);
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .debrief-strength-weakness {
        grid-template-columns: 1fr;
    }
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* ============================================
   CORNER COACH NUDGES
   ============================================ */
.corner-nudge {
    position: fixed;
    bottom: 100px;
    right: 24px;
    max-width: 360px;
    padding: 12px 18px;
    border-radius: 12px;
    background: rgba(30, 30, 40, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    z-index: 1000;
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.corner-nudge.visible {
    opacity: 1;
    transform: translateX(0);
}
.corner-nudge .nudge-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.corner-nudge .nudge-text {
    font-size: 0.88rem;
    line-height: 1.4;
    color: #e0e0e0;
}
.corner-nudge.nudge-positive {
    border-color: rgba(76, 175, 80, 0.4);
}
.corner-nudge.nudge-positive .nudge-text {
    color: #a5d6a7;
}
.corner-nudge.nudge-high {
    border-color: rgba(255, 152, 0, 0.4);
}
.corner-nudge.nudge-high .nudge-text {
    color: #ffcc80;
}
.corner-nudge.nudge-medium {
    border-color: rgba(100, 181, 246, 0.3);
}

/* ============================================
   REPLAY ANNOTATIONS (Film Coach)
   ============================================ */
.replay-annotations {
    margin-top: 2rem;
}
.annotations-section {
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
}
.annotations-header {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #e0e0e0;
}
.annotations-pattern {
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 18px;
    font-style: italic;
}
.annotations-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.annotation-card {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 14px 16px;
    border-left: 3px solid rgba(255, 255, 255, 0.15);
}
.annotation-card.annotation-positive {
    border-left-color: #4caf50;
}
.annotation-card.annotation-critical {
    border-left-color: #f44336;
}
.annotation-card.annotation-needs_work {
    border-left-color: #ff9800;
}
.annotation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.annotation-time {
    font-family: monospace;
    font-size: 0.8rem;
    color: #888;
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 8px;
    border-radius: 4px;
}
.annotation-type {
    font-size: 0.78rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.annotation-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #e0e0e0;
    margin-bottom: 6px;
}
.annotation-observation {
    font-size: 0.85rem;
    color: #bbb;
    margin-bottom: 4px;
}
.annotation-impact {
    font-size: 0.82rem;
    color: #999;
    margin-bottom: 4px;
    font-style: italic;
}
.annotation-coaching {
    font-size: 0.85rem;
    color: var(--color-accent, #8ab4f8);
    font-weight: 500;
}
.annotations-verdict {
    margin-top: 18px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    color: #e0e0e0;
    font-style: italic;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

@media (max-width: 600px) {
    .corner-nudge {
        left: 12px;
        right: 12px;
        bottom: 80px;
        max-width: none;
    }
}

/* ============================================
   DASHBOARD COACHING SECTIONS
   ============================================ */
.dashboard-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 1.5rem;
}
.dashboard-section.compact {
    margin-bottom: 0;
}
.digest-card, .training-card {
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 18px;
}
.digest-greeting {
    font-size: 1rem;
    font-weight: 600;
    color: #e0e0e0;
    margin-bottom: 8px;
}
.digest-summary {
    font-size: 0.88rem;
    color: #aaa;
    margin-bottom: 10px;
}
.digest-highlight {
    font-size: 0.88rem;
    color: #a5d6a7;
    padding: 8px 12px;
    background: rgba(76, 175, 80, 0.08);
    border-radius: 8px;
    margin-bottom: 10px;
}
.digest-win-label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 2px;
    color: #81c784;
}
.digest-focus {
    font-size: 0.85rem;
    color: var(--color-accent, #8ab4f8);
}
.training-progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    margin-bottom: 12px;
    overflow: hidden;
}
.training-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent, #8ab4f8), #a78bfa);
    border-radius: 3px;
    transition: width 0.5s ease;
}
.training-week {
    font-size: 0.88rem;
    color: #aaa;
    margin-bottom: 10px;
}
.training-next {
    display: flex;
    align-items: center;
    gap: 10px;
}
.training-next-type {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 4px;
    background: rgba(156, 39, 176, 0.2);
    color: #ce93d8;
}
.training-next-type.scenario {
    background: rgba(33, 150, 243, 0.2);
    color: #90caf9;
}
.training-next-name {
    font-size: 0.9rem;
    color: #e0e0e0;
}
.section-subtitle {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 14px;
}
.custom-drills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.custom-drill-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 16px;
}
.custom-drill-card h4 {
    font-size: 0.95rem;
    color: #e0e0e0;
    margin-bottom: 6px;
}
.custom-drill-desc {
    font-size: 0.82rem;
    color: #aaa;
    margin-bottom: 8px;
}
.custom-drill-target {
    font-size: 0.75rem;
    color: var(--color-accent, #8ab4f8);
    display: block;
    margin-bottom: 4px;
}
.custom-drill-duration {
    font-size: 0.72rem;
    color: #777;
}
.btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ccc;
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.btn-secondary:disabled {
    opacity: 0.5;
    cursor: wait;
}
.cta-inline {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 18px;
    background: var(--color-accent, #8ab4f8);
    color: #111;
    border: none;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.cta-inline:hover {
    opacity: 0.85;
}

/* ============================================
   SESSION TURN INDICATOR
   ============================================ */
.turn-indicator {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}
.turn-indicator.turn-user {
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid rgba(76, 175, 80, 0.4);
    color: #a5d6a7;
}
.turn-indicator.turn-ai {
    background: rgba(100, 181, 246, 0.2);
    border: 1px solid rgba(100, 181, 246, 0.4);
    color: #90caf9;
}
.turn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}
.turn-dot.pulse {
    animation: turn-pulse 1.2s ease-in-out infinite;
}
@keyframes turn-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}

@media (max-width: 600px) {
    .dashboard-duo {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   MOBILE SAFE AREA SUPPORT
   ============================================ */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-top: var(--safe-area-top);
        padding-bottom: var(--safe-area-bottom);
        padding-left: var(--safe-area-left);
        padding-right: var(--safe-area-right);
    }

    .nav {
        padding-top: calc(var(--space-sm) + var(--safe-area-top));
    }

    .screen {
        padding-bottom: calc(var(--space-lg) + var(--safe-area-bottom));
    }

    /* Fixed bottom elements need safe area */
    .session-controls,
    .floating-controls,
    .bottom-sheet {
        padding-bottom: calc(1rem + var(--safe-area-bottom));
    }
}

/* ========================================
   SHOW DON'T TELL - QUICK WINS
   SDT-010 Implementation
   ======================================== */

/* ----------------------------------------
   1. Score-based Metric Fill Colors
   Visual hierarchy through color coding
   ---------------------------------------- */

/* Excellent: 81-100 - Success green */
.metric-fill.score-excellent {
    background: var(--color-success);
    background-image: linear-gradient(
        90deg,
        var(--color-success) 0%,
        #6B7D6B 100%
    );
}

/* Good: 61-80 - Sage/muted green */
.metric-fill.score-good {
    background: #7A8B7A;
    background-image: linear-gradient(
        90deg,
        #7A8B7A 0%,
        #8A9B8A 100%
    );
}

/* Average: 41-60 - Warm amber */
.metric-fill.score-average {
    background: var(--color-warning);
    background-image: linear-gradient(
        90deg,
        var(--color-warning) 0%,
        #9B8465 100%
    );
}

/* Poor: 0-40 - Coral/danger */
.metric-fill.score-poor {
    background: var(--color-danger);
    background-image: linear-gradient(
        90deg,
        var(--color-danger) 0%,
        #8D6A6A 100%
    );
}

/* ----------------------------------------
   2. Score Circle Enhancements
   Colored ring/glow based on performance
   ---------------------------------------- */

/* Base enhancement for all score circles */
.score-circle {
    position: relative;
    transition: box-shadow var(--transition-smooth);
}

/* Excellent score ring - green glow */
.score-circle.score-excellent {
    box-shadow:
        0 0 0 3px var(--color-success),
        0 0 20px rgba(90, 107, 90, 0.3),
        0 0 40px rgba(90, 107, 90, 0.15);
}

/* Good score ring - sage glow */
.score-circle.score-good {
    box-shadow:
        0 0 0 3px #7A8B7A,
        0 0 20px rgba(122, 139, 122, 0.3),
        0 0 40px rgba(122, 139, 122, 0.15);
}

/* Average score ring - amber glow */
.score-circle.score-average {
    box-shadow:
        0 0 0 3px var(--color-warning),
        0 0 20px rgba(139, 115, 85, 0.3),
        0 0 40px rgba(139, 115, 85, 0.15);
}

/* Poor score ring - coral/danger glow */
.score-circle.score-poor {
    box-shadow:
        0 0 0 3px var(--color-danger),
        0 0 20px rgba(125, 90, 90, 0.3),
        0 0 40px rgba(125, 90, 90, 0.15);
}

/* Animated pulse for score circles on results */
.score-circle.score-excellent.animate {
    animation: score-pulse-excellent 2s ease-in-out infinite;
}

.score-circle.score-good.animate {
    animation: score-pulse-good 2s ease-in-out infinite;
}

.score-circle.score-average.animate {
    animation: score-pulse-average 2s ease-in-out infinite;
}

.score-circle.score-poor.animate {
    animation: score-pulse-poor 2s ease-in-out infinite;
}

@keyframes score-pulse-excellent {
    0%, 100% {
        box-shadow:
            0 0 0 3px var(--color-success),
            0 0 20px rgba(90, 107, 90, 0.3),
            0 0 40px rgba(90, 107, 90, 0.15);
    }
    50% {
        box-shadow:
            0 0 0 5px var(--color-success),
            0 0 30px rgba(90, 107, 90, 0.4),
            0 0 60px rgba(90, 107, 90, 0.2);
    }
}

@keyframes score-pulse-good {
    0%, 100% {
        box-shadow:
            0 0 0 3px #7A8B7A,
            0 0 20px rgba(122, 139, 122, 0.3),
            0 0 40px rgba(122, 139, 122, 0.15);
    }
    50% {
        box-shadow:
            0 0 0 5px #7A8B7A,
            0 0 30px rgba(122, 139, 122, 0.4),
            0 0 60px rgba(122, 139, 122, 0.2);
    }
}

@keyframes score-pulse-average {
    0%, 100% {
        box-shadow:
            0 0 0 3px var(--color-warning),
            0 0 20px rgba(139, 115, 85, 0.3),
            0 0 40px rgba(139, 115, 85, 0.15);
    }
    50% {
        box-shadow:
            0 0 0 5px var(--color-warning),
            0 0 30px rgba(139, 115, 85, 0.4),
            0 0 60px rgba(139, 115, 85, 0.2);
    }
}

@keyframes score-pulse-poor {
    0%, 100% {
        box-shadow:
            0 0 0 3px var(--color-danger),
            0 0 20px rgba(125, 90, 90, 0.3),
            0 0 40px rgba(125, 90, 90, 0.15);
    }
    50% {
        box-shadow:
            0 0 0 5px var(--color-danger),
            0 0 30px rgba(125, 90, 90, 0.4),
            0 0 60px rgba(125, 90, 90, 0.2);
    }
}

/* ----------------------------------------
   3. Required Field Visual Styling
   Replace text badge with visual weight
   ---------------------------------------- */

/* Required field container - left border accent */
.field-required,
.input-group.required,
.form-group.required {
    position: relative;
    border-left: 3px solid var(--color-danger);
    padding-left: var(--space-sm);
    background: rgba(125, 90, 90, 0.03);
    border-radius: 0 4px 4px 0;
}

/* Required field input styling */
.field-required input,
.field-required textarea,
.field-required select,
.input-group.required input,
.input-group.required textarea,
.form-group.required input,
.form-group.required textarea {
    background: rgba(125, 90, 90, 0.02);
}

/* Required field label enhancement */
.field-required label::after,
.input-group.required label::after,
.form-group.required label::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--color-danger);
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
}

/* Hide text badge when visual styling is active */
.field-required .required-badge,
.input-group.required .required-badge,
.form-group.required .required-badge {
    display: none;
}

/* Focus state for required fields */
.field-required input:focus,
.field-required textarea:focus,
.input-group.required input:focus,
.form-group.required input:focus {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(125, 90, 90, 0.1);
}

/* ----------------------------------------
   4. Severity Utility Classes
   Reusable severity system
   ---------------------------------------- */

/* Critical - Urgent, requires immediate action */
.severity-critical {
    --severity-color: #B54040;
    --severity-bg: rgba(181, 64, 64, 0.08);
    --severity-border: rgba(181, 64, 64, 0.3);
    --severity-glow: rgba(181, 64, 64, 0.15);
}

.severity-critical-text { color: #B54040; }
.severity-critical-bg { background: rgba(181, 64, 64, 0.08); }
.severity-critical-border { border-color: rgba(181, 64, 64, 0.3); }

/* High - Important, address soon */
.severity-high {
    --severity-color: var(--color-danger);
    --severity-bg: rgba(125, 90, 90, 0.08);
    --severity-border: rgba(125, 90, 90, 0.3);
    --severity-glow: rgba(125, 90, 90, 0.15);
}

.severity-high-text { color: var(--color-danger); }
.severity-high-bg { background: rgba(125, 90, 90, 0.08); }
.severity-high-border { border-color: rgba(125, 90, 90, 0.3); }

/* Medium - Moderate priority */
.severity-medium {
    --severity-color: var(--color-warning);
    --severity-bg: rgba(139, 115, 85, 0.08);
    --severity-border: rgba(139, 115, 85, 0.3);
    --severity-glow: rgba(139, 115, 85, 0.15);
}

.severity-medium-text { color: var(--color-warning); }
.severity-medium-bg { background: rgba(139, 115, 85, 0.08); }
.severity-medium-border { border-color: rgba(139, 115, 85, 0.3); }

/* Low - Minor, address when convenient */
.severity-low {
    --severity-color: var(--color-success);
    --severity-bg: rgba(90, 107, 90, 0.08);
    --severity-border: rgba(90, 107, 90, 0.3);
    --severity-glow: rgba(90, 107, 90, 0.15);
}

.severity-low-text { color: var(--color-success); }
.severity-low-bg { background: rgba(90, 107, 90, 0.08); }
.severity-low-border { border-color: rgba(90, 107, 90, 0.3); }

/* Severity badge component */
.severity-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-wide);
    background: var(--severity-bg);
    color: var(--severity-color);
    border: 1px solid var(--severity-border);
}

/* Severity indicator dot */
.severity-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--severity-color);
}

/* Severity card styling */
.severity-card {
    border-left: 4px solid var(--severity-color);
    background: var(--severity-bg);
    padding: var(--space-sm);
    border-radius: 0 4px 4px 0;
}

/* Severity icon color helper */
.severity-icon {
    color: var(--severity-color);
}

/* ----------------------------------------
   5. Nav Tabs - Icon + Text Support
   Flex layout for future icons
   ---------------------------------------- */

/* Enhanced nav tab for icon support */
.nav-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Nav tab icon styling */
.nav-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.nav-tab-icon svg {
    width: 100%;
    height: 100%;
}

.nav-tab:hover .nav-tab-icon {
    opacity: 1;
}

.nav-tab.active .nav-tab-icon {
    opacity: 1;
}

/* Nav tab text styling */
.nav-tab-text {
    white-space: nowrap;
}

/* Icon-only variant for compact display */
.nav-tab.icon-only {
    padding: var(--space-xs);
}

.nav-tab.icon-only .nav-tab-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nav-tab.icon-only .nav-tab-icon {
    width: 20px;
    height: 20px;
}

/* Responsive: Icon-only on small screens */
@media (max-width: 480px) {
    .nav-tab.responsive-icon .nav-tab-text {
        display: none;
    }

    .nav-tab.responsive-icon .nav-tab-icon {
        width: 20px;
        height: 20px;
        opacity: 1;
    }
}

/* ----------------------------------------
   Utility: Score Threshold Helper
   Use with JavaScript to auto-apply classes
   ---------------------------------------- */

/*
   Usage in JavaScript:

   function getScoreClass(score) {
       if (score >= 81) return 'score-excellent';
       if (score >= 61) return 'score-good';
       if (score >= 41) return 'score-average';
       return 'score-poor';
   }

   element.classList.add(getScoreClass(score));
*/

/* ============================================
   TOOLTIP SYSTEM - Show Don't Tell Initiative
   ============================================ */

.tooltip-trigger {
    position: relative;
    cursor: help;
}

button.tooltip-trigger, a.tooltip-trigger {
    cursor: pointer;
}

.tooltip-trigger::before,
.tooltip-trigger::after {
    --tooltip-bg: rgba(30, 30, 30, 0.95);
    --tooltip-color: #f5f5f5;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 9999;
}

.tooltip-trigger::after {
    content: attr(data-tooltip);
    background: var(--tooltip-bg);
    color: var(--tooltip-color);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: 6px;
    max-width: 280px;
    width: max-content;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    white-space: normal;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-trigger::before {
    content: '';
    border: 6px solid transparent;
    border-top-color: var(--tooltip-bg);
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-trigger:hover::before,
.tooltip-trigger:hover::after,
.tooltip-trigger:focus::before,
.tooltip-trigger:focus::after {
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .tooltip-trigger::before,
    .tooltip-trigger::after {
        transition: none;
    }
}

/* ============================================
   PLAY REHEARSAL - TABBED SCRIPT INPUT
   ============================================ */

.script-input-group {
    margin-bottom: var(--space-lg);
}

.script-input-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-charcoal-20);
}

.script-tab {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.script-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-charcoal-20);
}

.script-tab.active {
    color: var(--color-text-primary);
    border-bottom-color: var(--color-charcoal);
}

.script-input-panels {
    background: var(--color-warm-white);
    border: 1px solid var(--color-charcoal-20);
    border-top: none;
    border-radius: 0 0 8px 8px;
    min-height: 200px;
}

.script-panel {
    display: none;
    padding: var(--space-md);
}

.script-panel.active {
    display: block;
}

.script-textarea {
    width: 100%;
    padding: var(--space-md);
    border: 1px solid var(--color-charcoal-20);
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    min-height: 180px;
    background: var(--color-soft-white);
    transition: border-color 0.2s ease;
}

.script-textarea:focus {
    outline: none;
    border-color: var(--color-charcoal);
}

.script-textarea::placeholder {
    color: var(--color-text-hint);
    font-family: 'Courier New', monospace;
    white-space: pre-line;
}

/* File dropzone */
.script-dropzone {
    border: 2px dashed var(--color-charcoal-20);
    border-radius: 8px;
    padding: var(--space-xl);
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.script-dropzone:hover,
.script-dropzone.dragover {
    border-color: var(--color-charcoal);
    background: rgba(26, 26, 26, 0.02);
}

.dropzone-content svg {
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.dropzone-content p {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.dropzone-hint {
    font-size: 13px;
    color: var(--color-text-muted);
    display: block;
    margin-bottom: var(--space-md);
}

.file-selected {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md);
}

.file-name {
    font-weight: 500;
    color: var(--color-text-primary);
}

.btn-clear {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0 var(--space-xs);
}

.btn-clear:hover {
    color: var(--color-danger);
}

/* Document upload dropzone */
.document-upload-group {
    margin-top: var(--space-md);
}

.document-upload-group .field-description {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: var(--space-xs) 0 var(--space-sm);
}

.document-dropzone {
    border: 2px dashed var(--color-charcoal-20);
    border-radius: 8px;
    padding: var(--space-lg);
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    background: var(--color-soft-white);
}

.document-dropzone:hover,
.document-dropzone.dragover {
    border-color: var(--color-charcoal);
    background: rgba(26, 26, 26, 0.02);
}

.document-dropzone .dropzone-icon {
    font-size: 32px;
    display: block;
    margin-bottom: var(--space-sm);
}

.document-dropzone .dropzone-formats {
    font-size: 11px;
    color: var(--color-text-hint);
    margin-top: var(--space-sm);
    display: block;
}

.dropzone-selected {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md);
}

.dropzone-selected .file-icon {
    font-size: 24px;
}

.dropzone-selected .file-name {
    font-weight: 500;
    color: var(--color-text-primary);
}

.dropzone-selected .btn-icon {
    background: none;
    border: none;
    font-size: 16px;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.dropzone-selected .btn-icon:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-danger);
}

/* System notices (toast notifications) */
.system-notice {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-width: 90%;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.system-notice.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.system-notice-info {
    background: var(--color-charcoal);
    color: white;
}

.system-notice-warning {
    background: #f59e0b;
    color: white;
}

.system-notice-error {
    background: var(--color-danger);
    color: white;
}

/* Classic scenes grid */
.classics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.classic-scene-card {
    padding: var(--space-md);
    background: var(--color-soft-white);
    border: 1px solid var(--color-charcoal-20);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.classic-scene-card:hover {
    border-color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.classic-scene-card.selected {
    border-color: var(--color-charcoal);
    background: var(--color-cloud-dancer);
}

.classic-scene-card .scene-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.classic-scene-card .scene-name {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
}

.classic-scene-card .scene-characters {
    font-size: 11px;
    color: var(--color-text-muted);
    font-style: italic;
}

.classics-hint {
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--space-sm);
}

/* Character selection dropdown */
.character-dropdown {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-charcoal-20);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 14px;
    background: var(--color-soft-white);
    cursor: pointer;
}

.character-dropdown:focus {
    outline: none;
    border-color: var(--color-charcoal);
}

/* Scene selection (for full scripts) */
.scene-selector {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--color-cloud-dancer);
    border-radius: 8px;
}

.scene-selector-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
    display: block;
}

.scene-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-height: 200px;
    overflow-y: auto;
}

.scene-option {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-soft-white);
    border: 1px solid var(--color-charcoal-20);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scene-option:hover {
    border-color: var(--color-charcoal);
}

.scene-option.selected {
    background: var(--color-charcoal);
    color: var(--color-soft-white);
    border-color: var(--color-charcoal);
}

.scene-option .scene-act {
    font-size: 12px;
    opacity: 0.7;
}

.btn-small {
    padding: var(--space-xs) var(--space-sm);
    font-size: 12px;
}

.loading-classics,
.error-text {
    text-align: center;
    padding: var(--space-lg);
    color: var(--color-text-muted);
    font-style: italic;
}

.error-text {
    color: var(--color-danger);
}

@media (max-width: 600px) {
    .script-input-tabs {
        flex-wrap: wrap;
    }

    .script-tab {
        flex: 1 1 calc(50% - 1px);
    }

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

/* ============================================
   WEAK MOMENTS - POST-SESSION RETRY
   ============================================ */

.weak-moments-section {
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    background: var(--color-cloud-dancer);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-light-border);
}

.weak-moments-summary {
    text-align: center;
    margin-bottom: var(--space-md);
}

.weak-moments-summary h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.weak-moments-summary p {
    font-size: 14px;
    color: var(--color-text-muted);
}

.weak-moments-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.weak-moment-card {
    background: var(--color-soft-white);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    border: 1px solid var(--color-light-border);
    transition: box-shadow 0.2s ease;
}
.weak-moment-card.wm-hidden {
    display: none;
}
.btn-show-more-wm {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--color-accent, #8ab4f8);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-show-more-wm:hover {
    background: rgba(255, 255, 255, 0.08);
}

.weak-moment-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.weak-moment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.weak-moment-time {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-text-muted);
    background: var(--color-cloud-dancer);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.weak-moment-type {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-warning);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.weak-moment-transcript {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    padding: var(--space-sm);
    background: var(--color-cloud-dancer);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
    font-style: italic;
}

.filler-highlight {
    /* Neutral highlighting - informational, not judgmental */
    /* Research: Avoid ego-threat coloring (red/orange) */
    background: rgba(100, 100, 100, 0.15);
    color: var(--color-text-primary);
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 600;
    font-style: normal;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.filler-breakdown {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.weak-moment-evidence-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.technique-opportunities {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.weak-moment-evidence {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 13px;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
}

/* NEUTRAL styling - not red/amber severity colors
   Research: Avoid ego-threat framing that shifts attention to self */
.weak-moment-evidence.technique-opportunity {
    background: rgba(90, 107, 90, 0.08);
    color: var(--color-text-secondary);
}

/* Legacy severity classes kept for backwards compatibility */
.weak-moment-evidence.severity-high {
    background: rgba(125, 90, 90, 0.1);
    color: var(--color-danger);
}

.weak-moment-evidence.severity-medium {
    background: rgba(139, 115, 85, 0.1);
    color: var(--color-warning);
}

.evidence-icon {
    font-size: 14px;
}

.evidence-text {
    font-weight: 500;
}

.retry-moment-btn {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-charcoal);
    color: var(--color-soft-white);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

.retry-moment-btn:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
}

/* Weak Moment Practice Modal */
.weak-moment-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.weak-moment-modal.active {
    opacity: 1;
    visibility: visible;
}

.weak-moment-modal-content {
    background: var(--color-soft-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: none;
    border: none;
    font-size: 24px;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-close:hover {
    color: var(--color-text-primary);
}

.weak-moment-modal-content h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: var(--space-lg);
    color: var(--color-text-primary);
}

.original-moment,
.practice-guidance,
.practice-prompt {
    margin-bottom: var(--space-md);
}

.original-moment h4,
.practice-guidance h4,
.practice-prompt h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs);
}

.original-text {
    font-style: italic;
    color: var(--color-text-secondary);
    background: var(--color-cloud-dancer);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-warning);
}

.practice-guidance p {
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.practice-controls {
    margin-top: var(--space-lg);
}

.practice-record-btn {
    width: 100%;
    padding: var(--space-md);
    background: var(--color-charcoal);
    color: var(--color-soft-white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.practice-record-btn:hover {
    background: var(--color-accent-hover);
}

.practice-record-btn.recording {
    background: var(--color-danger);
    animation: pulse-recording 1.5s infinite;
}

@keyframes pulse-recording {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.practice-feedback {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--color-cloud-dancer);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--color-text-secondary);
}

.retry-analysis {
    text-align: left;
}

.retry-analysis p {
    margin-bottom: var(--space-sm);
}

.improvement-great {
    color: var(--color-success);
    font-weight: 600;
}

.improvement-good {
    color: var(--color-success);
}

.improvement-same {
    color: var(--color-warning);
}

.improvement-worse {
    color: var(--color-danger);
}

.hedging-note {
    font-size: 13px;
    color: var(--color-text-muted);
    font-style: italic;
}

.try-again-btn {
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-charcoal);
    color: var(--color-soft-white);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.try-again-btn:hover {
    background: var(--color-accent-hover);
}

/* MASTERY-ORIENTED FEEDBACK STYLES */
/* Research: Visual hierarchy that emphasizes "what to try next" over "how you did" */

.mastery-subtitle {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
}

.normalize-text {
    font-size: 13px;
    color: var(--color-text-hint);
    font-style: italic;
}

.technique-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.technique-header h2 {
    margin: 0;
}

.attempt-counter {
    font-size: 12px;
    color: var(--color-text-muted);
    background: var(--color-cloud-dancer);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}

.technique-explanation {
    margin-bottom: var(--space-md);
}

.technique-explanation h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs);
}

.technique-explanation p {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-sm);
}

.technique-tip {
    font-size: 13px;
    background: rgba(90, 107, 90, 0.1);
    color: var(--color-success);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-success);
}

.mastery-note {
    margin-top: var(--space-lg);
    padding: var(--space-sm);
    background: var(--color-cloud-dancer);
    border-radius: var(--radius-sm);
    text-align: center;
}

.mastery-note p {
    font-size: 12px;
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0;
}

/* Retry analysis - task-informational feedback */
.attempt-result {
    margin-bottom: var(--space-md);
}

.your-words {
    font-style: italic;
    color: var(--color-text-secondary);
    background: var(--color-cloud-dancer);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    margin: 0;
}

.technique-feedback {
    margin-bottom: var(--space-md);
    padding: var(--space-sm);
    background: var(--color-soft-white);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-light-border);
}

.feedback-observation {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
}

.feedback-next {
    font-size: 14px;
    color: var(--color-text-primary);
    font-weight: 500;
    margin: 0;
}

/* Remove evaluative color coding - keep neutral */
.feedback-observation {
    /* Intentionally neutral - not red/green */
    color: var(--color-text-secondary);
}

.retry-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.move-on-btn {
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-light-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.move-on-btn:hover {
    background: var(--color-cloud-dancer);
    color: var(--color-text-secondary);
}

.mastery-reminder {
    font-size: 12px;
    color: var(--color-text-hint);
    font-style: italic;
    text-align: center;
    margin: var(--space-xs) 0 0 0;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .weak-moment-modal-content {
        padding: var(--space-md);
        margin: var(--space-md);
    }

    .weak-moment-card {
        padding: var(--space-sm);
    }

    .technique-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
}

/* iPhone-specific fixes */
@media (max-width: 430px) {
    /* Navigation - icons only on small screens */
    .nav-tabs {
        gap: 2px;
    }

    .nav-tab {
        padding: var(--space-xs) 6px;
        min-height: 36px;
    }

    .nav-tab-text {
        font-size: 0.5rem;
        letter-spacing: -0.02em;
    }

    .nav-tab-icon {
        width: 12px;
        height: 12px;
    }

    /* Coach avatar - fit to screen */
    .scenario-image-container {
        width: 140px;
        height: 140px;
    }

    #stylized-avatar-container {
        width: 140px !important;
        height: 140px !important;
    }

    /* Practice screen spacing */
    .practice-container {
        padding: var(--space-sm);
        padding-top: 60px;
    }

    .ai-conversation-area {
        padding: var(--space-sm);
    }

    #ai-text {
        font-size: 0.95rem;
        max-height: 150px;
    }

    /* Home tiles - fit better */
    .home-tiles {
        gap: var(--space-xs);
        padding: 0 var(--space-xs);
    }

    .home-tile {
        padding: var(--space-sm);
        min-height: 130px;
    }

    .tile-label {
        font-size: 0.7rem;
    }

    .tile-description {
        font-size: 0.75rem;
    }

    /* Hero section */
    .hero-headline {
        font-size: 1.5rem;
        padding: 0 var(--space-xs);
    }

    .home-description {
        font-size: 0.85rem;
    }
}

/* iOS safe area handling */
@supports (padding-top: env(safe-area-inset-top)) {
    .nav {
        padding-top: env(safe-area-inset-top);
    }

    .practice-container {
        padding-bottom: env(safe-area-inset-bottom);
    }

    #voice-btn {
        margin-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
    }
}

/* ========================================
   HIDE NAV DURING PRACTICE/DRILLS
   ======================================== */
body.in-session .nav {
    display: none;
}

body.in-session .screen {
    padding-top: 0;
}

body.in-session .screen.active {
    padding-top: env(safe-area-inset-top, 0);
}

/* ========================================
   SCENARIO BUILDER
   ======================================== */
.scenario-builder {
    max-width: 640px;
    margin: 0 auto var(--space-lg);
}

.builder-input-row {
    display: flex;
    gap: var(--space-sm);
    align-items: stretch;
}

.builder-input {
    flex: 1;
    padding: 14px 18px;
    border: 1.5px solid var(--color-light-border);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text-primary);
    background: var(--color-soft-white);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.builder-input:focus {
    border-color: var(--color-charcoal);
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}

.builder-input::placeholder {
    color: var(--color-text-hint);
}

.builder-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 22px;
    background: var(--color-charcoal);
    color: var(--color-soft-white);
    border: none;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, transform 0.1s;
}

.builder-btn:hover {
    background: var(--color-accent-hover);
}

.builder-btn:active {
    transform: scale(0.97);
}

.builder-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.builder-hint {
    margin-top: var(--space-xs);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: center;
    font-style: italic;
}

/* Shake animation for validation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.shake {
    animation: shake 0.4s ease;
}

/* Spinner inside button */
.spinner-sm {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

/* Custom Scenarios Row */
.custom-scenarios-row {
    max-width: 900px;
    margin: 0 auto var(--space-lg);
}

.custom-scenarios-label {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.custom-scenarios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md);
}

.custom-scenario-card {
    background: var(--color-soft-white);
    border: 1.5px dashed var(--color-light-border);
    border-radius: 12px;
    padding: var(--space-md);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    position: relative;
}

.custom-scenario-card:hover {
    border-color: var(--color-charcoal-mid);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.custom-scenario-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-xs);
}

.custom-scenario-icon svg {
    display: block;
    color: var(--color-charcoal);
}

.custom-scenario-delete {
    background: none;
    border: none;
    color: var(--color-warm-gray-light);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}

.custom-scenario-delete:hover {
    color: var(--color-danger);
    background: rgba(125, 90, 90, 0.08);
}

.custom-scenario-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
    line-height: 1.3;
}

.custom-scenario-desc {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.custom-scenario-meta {
    margin-top: var(--space-xs);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* ========================================
   CORNER COACH NUDGE
   ======================================== */
.corner-nudge {
    position: fixed;
    top: 90px;
    right: 20px;
    max-width: 280px;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(250, 249, 247, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 900;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    border-left: 3px solid var(--color-charcoal-light);
}

.corner-nudge.visible {
    opacity: 1;
    transform: translateX(0);
}

.corner-nudge.nudge-positive {
    border-left-color: var(--color-success);
}

.corner-nudge.nudge-high {
    border-left-color: var(--color-danger);
}

.corner-nudge.nudge-medium {
    border-left-color: var(--color-warning);
}

.nudge-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.nudge-text {
    font-size: 0.85rem;
    color: var(--color-text-primary);
    line-height: 1.4;
}

/* ========================================
   TURN INDICATOR BANNER
   ======================================== */
.turn-indicator-banner {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    z-index: 800;
    transition: background 0.3s ease, color 0.3s ease;
}

.turn-indicator-banner.turn-user {
    background: var(--color-success);
    color: white;
}

.turn-indicator-banner.turn-ai {
    background: var(--color-charcoal);
    color: white;
}

.turn-indicator-banner .turn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.turn-indicator-banner .turn-dot.pulse {
    animation: turnPulse 1.2s ease infinite;
}

@keyframes turnPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}