@import "tailwindcss";

@source "preline/dist/*.js";
@import "preline/variants.css";

@plugin "@tailwindcss/forms";

@import "toastify-js/src/toastify.css";

/* ========================================
   WARM STUDIO THEME - Design System
   A warm, refined aesthetic inspired by
   professional recording studios
   ======================================== */

@theme {
  /* Colors - Primary (Warm Copper/Amber) */
  --color-primary: #c45d35;
  --color-primary-hover: #a84d2b;
  --color-primary-light: #f8e6df;
  --color-primary-dark: #8a3f24;

  /* Colors - Backgrounds (Warm Cream Tones) */
  --color-base: #faf6f1;
  --color-elevated: #ffffff;
  --color-subtle: #f3ece3;
  --color-input: #fffcf8;

  /* Colors - Text (Warm Charcoal) */
  --color-ink: #2d2926;
  --color-ink-secondary: #5c554e;
  --color-ink-muted: #8a827a;
  --color-ink-inverse: #fdfbf9;

  /* Colors - Accent (Deep Teal) */
  --color-accent: #1e6b5c;
  --color-accent-light: #e6f2ef;

  /* Colors - Borders */
  --color-border: #e5ddd3;
  --color-border-strong: #cdc3b6;

  /* Colors - Status */
  --color-success: #3d7c47;
  --color-success-light: #e8f4ea;
  --color-warning: #b5850a;
  --color-warning-light: #fef8e6;
  --color-error: #991b1b;
  --color-error-light: #fef2f2;

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Atkinson Hyperlegible', system-ui, sans-serif;

  /* Shadows - Warm tinted */
  --shadow-warm-sm: 0 1px 2px rgba(45, 41, 38, 0.05);
  --shadow-warm-md: 0 4px 12px rgba(45, 41, 38, 0.08), 0 1px 3px rgba(45, 41, 38, 0.06);
  --shadow-warm-lg: 0 12px 40px rgba(45, 41, 38, 0.12), 0 4px 12px rgba(45, 41, 38, 0.06);
  --shadow-warm-glow: 0 0 40px rgba(196, 93, 53, 0.15);
  --shadow-btn: 0 2px 8px rgba(196, 93, 53, 0.25);
  --shadow-btn-hover: 0 4px 16px rgba(196, 93, 53, 0.35);

  /* Border radius */
  --radius-card: 1.25rem;
  --radius-btn: 0.75rem;
  --radius-input: 0.625rem;

  /* Animation */
  --animate-fade-in: fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  --animate-slide-up: slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

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

  @keyframes wave {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.5); }
  }
}

/* Dark mode - override theme variables */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --color-primary: #e07a55;
    --color-primary-hover: #c96a48;
    --color-primary-light: #3d2f29;
    --color-primary-dark: #f09575;

    --color-base: #1a1816;
    --color-elevated: #252220;
    --color-subtle: #2d2a27;
    --color-input: #1f1d1b;

    --color-ink: #f5f0eb;
    --color-ink-secondary: #bdb4aa;
    --color-ink-muted: #8a827a;
    --color-ink-inverse: #1a1816;

    --color-accent: #4dd4b8;
    --color-accent-light: #1f2d2a;

    --color-border: #3d3935;
    --color-border-strong: #524d48;

    --color-success: #5cb86b;
    --color-success-light: #1f2d21;
    --color-warning: #e0a82e;
    --color-warning-light: #2d2818;
    --color-error: #fca5a5;
    --color-error-light: rgba(127, 29, 29, 0.15);

    --shadow-warm-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-warm-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);
    --shadow-warm-lg: 0 12px 40px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-warm-glow: 0 0 60px rgba(224, 122, 85, 0.2);
  }
}

.dark {
  --color-primary: #e07a55;
  --color-primary-hover: #c96a48;
  --color-primary-light: #3d2f29;
  --color-primary-dark: #f09575;

  --color-base: #1a1816;
  --color-elevated: #252220;
  --color-subtle: #2d2a27;
  --color-input: #1f1d1b;

  --color-ink: #f5f0eb;
  --color-ink-secondary: #bdb4aa;
  --color-ink-muted: #8a827a;
  --color-ink-inverse: #1a1816;

  --color-accent: #4dd4b8;
  --color-accent-light: #1f2d2a;

  --color-border: #3d3935;
  --color-border-strong: #524d48;

  --color-success: #5cb86b;
  --color-success-light: #1f2d21;
  --color-warning: #e0a82e;
  --color-warning-light: #2d2818;
  --color-error: #fca5a5;
  --color-error-light: rgba(127, 29, 29, 0.15);

  --shadow-warm-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-warm-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-warm-lg: 0 12px 40px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-warm-glow: 0 0 60px rgba(224, 122, 85, 0.2);
}

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

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background-color: var(--color-base);
  -webkit-font-smoothing: antialiased;
}

/* ========================================
   COMPONENT STYLES
   ======================================== */

/* Background with grain texture */
.home-bg {
  background-color: var(--color-base);
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 30% 20%, rgba(196, 93, 53, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(30, 107, 92, 0.04) 0%, transparent 50%);
  background-blend-mode: overlay, normal, normal;
}

@media (prefers-color-scheme: dark) {
  .home-bg:not(.light .home-bg) {
    background-image:
      url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"),
      radial-gradient(ellipse at 30% 20%, rgba(224, 122, 85, 0.08) 0%, transparent 50%),
      radial-gradient(ellipse at 70% 80%, rgba(77, 212, 184, 0.05) 0%, transparent 50%);
  }
}

.dark .home-bg {
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 30% 20%, rgba(224, 122, 85, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(77, 212, 184, 0.05) 0%, transparent 50%);
}

/* Home card with gradient accent */
.home-card {
  @apply bg-elevated border border-border shadow-warm-lg relative overflow-hidden;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-warm-lg), var(--shadow-warm-glow);
}

.home-card::before {
  content: '';
  @apply absolute top-0 left-0 right-0 h-[3px] opacity-80;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

/* Sound wave animation */
.sound-wave {
  @apply flex items-center justify-center gap-[3px] h-6;
}

.sound-wave span {
  @apply block w-[3px] rounded-sm;
  background: linear-gradient(to top, var(--color-primary), var(--color-accent));
  animation: wave 1.2s ease-in-out infinite;
}

.sound-wave span:nth-child(1) { height: 30%; animation-delay: 0s; }
.sound-wave span:nth-child(2) { height: 60%; animation-delay: 0.1s; }
.sound-wave span:nth-child(3) { height: 100%; animation-delay: 0.2s; }
.sound-wave span:nth-child(4) { height: 60%; animation-delay: 0.3s; }
.sound-wave span:nth-child(5) { height: 30%; animation-delay: 0.4s; }

/* Buttons */
.btn-primary {
  @apply inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-primary text-ink-inverse font-semibold text-[0.9375rem] border-none cursor-pointer;
  border-radius: var(--radius-btn);
  transition: background-color 0.15s ease;
}

.btn-primary:hover {
  @apply bg-primary-hover;
}

.btn-secondary {
  @apply inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-transparent text-primary font-semibold text-[0.9375rem] border-2 border-primary cursor-pointer;
  border-radius: var(--radius-btn);
  transition: background-color 0.15s ease;
}

.btn-secondary:hover {
  @apply bg-primary-light;
}

.btn-ghost {
  @apply inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-transparent text-ink-muted font-medium text-[0.9375rem] border-none cursor-pointer;
  border-radius: var(--radius-btn);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-ghost:hover {
  @apply text-ink bg-subtle;
}

/* Form elements */
.form-input {
  @apply w-full py-3.5 px-4 bg-input border-[1.5px] border-border text-ink text-[0.9375rem];
  transition: border-color 0.2s ease;
  border-radius: var(--radius-input);
}

.form-input::placeholder {
  @apply text-ink-muted;
}

.form-input:focus {
  @apply outline-none border-primary;
  box-shadow: 0 0 0 3px rgba(196, 93, 53, 0.1);
}

.form-label {
  @apply block text-[0.8125rem] font-semibold text-ink-secondary mb-2 uppercase tracking-wider;
}

.form-checkbox {
  @apply w-4 h-4 border-[1.5px] border-border-strong bg-input text-primary cursor-pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  border-radius: 0.25rem;
}

.form-checkbox:checked {
  @apply bg-primary border-primary;
}

.form-checkbox:focus {
  @apply outline-none;
  box-shadow: 0 0 0 3px rgba(196, 93, 53, 0.1);
}

/* Links */
.link-muted {
  @apply text-ink-muted text-[0.8125rem] no-underline transition-colors duration-300;
}

.link-muted:hover {
  @apply text-ink;
}

.link-primary {
  @apply text-primary font-medium no-underline;
}

.link-primary:hover {
  @apply underline;
}

/* Alerts */
.error-alert {
  @apply p-4 bg-error-light border border-error text-error text-sm;
  border-radius: var(--radius-btn);
}

.info-alert {
  @apply p-4 bg-accent-light border border-accent;
  border-radius: var(--radius-btn);
}

/* Page header */
.page-header {
  @apply bg-elevated border-b border-border shadow-warm-sm;
}

/* Content card */
.content-card {
  @apply bg-elevated border border-border shadow-warm-md;
  border-radius: 1rem;
}

/* Tabs */
.tab-nav {
  @apply relative inline-flex p-1 rounded-xl;
  background: var(--color-subtle);
  border: 1px solid var(--color-border);
}

.tab-button {
  @apply relative py-2.5 px-5 text-sm font-semibold rounded-lg z-10;
  transition: color 0.15s ease;
  color: var(--color-ink-muted);
}

.tab-button:hover:not(.tab-active) {
  color: var(--color-ink-secondary);
}

.tab-button.tab-active {
  color: var(--color-primary);
  background: var(--color-elevated);
  box-shadow: var(--shadow-warm-sm);
}

/* Tab panel animation */
.tab-panel-active {
  animation: tab-fade-in 0.3s ease-out;
}

@keyframes tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Badges */
.badge {
  @apply inline-flex items-center py-1 px-2.5 text-xs font-semibold rounded-full;
}

.badge-completed {
  @apply bg-success-light text-success;
}

.badge-in-progress {
  @apply bg-warning-light text-warning;
}

/* Results badges */
.results-badge {
  @apply inline-flex items-center py-1 px-2.5 text-xs font-semibold rounded-full;
}

.results-badge-info {
  @apply bg-primary-light text-primary;
}

.results-badge-accent {
  @apply bg-accent-light text-accent;
}

/* Section divider */
.section-divider {
  @apply my-4 border-t border-border;
}

/* Interview list items */
.interview-list-item-wrapper {
  @apply flex items-center gap-2;
}

.interview-list-item {
  @apply flex items-center justify-between p-3 bg-subtle border border-transparent flex-1;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  border-radius: var(--radius-input);
}

.interview-list-item:hover {
  @apply bg-base border-border translate-x-1;
}

.interview-actions-btn {
  @apply p-2 text-ink-muted hover:text-ink hover:bg-subtle rounded-lg transition-colors;
}

.interview-actions-btn:hover {
  @apply bg-base;
}

/* Feature checkmarks */
.feature-check {
  @apply w-5 h-5 flex items-center justify-center bg-accent-light text-accent rounded-full shrink-0;
}

/* Credit pack cards - Pricing style */
.pricing-card {
  @apply flex flex-col p-6 bg-elevated border border-border relative;
  transition: border-color 0.15s ease;
  border-radius: var(--radius-card);
}

.pricing-card:hover {
  @apply border-border-strong shadow-warm-md -translate-y-1;
}

.pricing-card-featured {
  @apply border-2 border-primary bg-elevated shadow-warm-lg;
}

.pricing-card-featured:hover {
  @apply border-primary shadow-warm-lg;
}

.pricing-badge {
  @apply inline-flex items-center gap-1.5 py-1.5 px-3 rounded-lg text-xs uppercase font-semibold tracking-wide bg-primary-light text-primary;
}

.pricing-amount {
  @apply font-display text-4xl font-bold text-ink;
}

.pricing-period {
  @apply text-sm text-ink-muted font-normal;
}

.pricing-title {
  @apply font-display text-lg font-semibold text-ink;
}

.pricing-subtitle {
  @apply text-sm text-ink-muted;
}

.pricing-features {
  @apply space-y-3 text-sm text-ink-secondary;
}

.pricing-feature {
  @apply flex items-center gap-3;
}

.pricing-check {
  @apply w-5 h-5 flex items-center justify-center rounded-full bg-accent-light text-accent shrink-0;
}

.pricing-btn {
  @apply w-full inline-flex items-center justify-center gap-2 py-3 px-4 font-semibold text-sm cursor-pointer;
  transition: background-color 0.15s ease;
  border-radius: var(--radius-btn);
}

.pricing-btn-primary {
  @apply bg-primary text-ink-inverse border-2 border-primary;
  box-shadow: var(--shadow-btn);
}

.pricing-btn-primary:hover {
  @apply bg-primary-hover border-primary-hover;
  box-shadow: var(--shadow-btn-hover);
}

.pricing-btn-secondary {
  @apply bg-transparent text-ink border-2 border-border-strong;
}

.pricing-btn-secondary:hover {
  @apply border-primary text-primary bg-primary-light;
}

/* Subscribe Hero CTA */
.subscribe-hero {
  @apply relative overflow-hidden p-8 rounded-2xl;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 50%, var(--color-accent) 100%);
  box-shadow:
    0 4px 24px rgba(196, 93, 53, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.subscribe-hero::before {
  content: '';
  @apply absolute inset-0 opacity-30;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 40%);
}

.subscribe-hero-content {
  @apply relative z-10;
}

.subscribe-hero-badge {
  @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-semibold uppercase tracking-wider mb-4;
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
}

.subscribe-hero-title {
  @apply text-2xl sm:text-3xl font-bold mb-2;
  font-family: var(--font-display);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.subscribe-hero-subtitle {
  @apply text-base mb-6;
  color: rgba(255, 255, 255, 0.85);
}

.subscribe-hero-price {
  @apply flex items-baseline gap-2 mb-6;
}

.subscribe-hero-amount {
  @apply text-5xl sm:text-6xl font-bold;
  font-family: var(--font-display);
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.subscribe-hero-period {
  @apply text-lg;
  color: rgba(255, 255, 255, 0.75);
}

.subscribe-hero-features {
  @apply grid grid-cols-1 sm:grid-cols-2 gap-3 mb-8;
}

.subscribe-hero-feature {
  @apply flex items-center gap-3 text-sm;
  color: rgba(255, 255, 255, 0.9);
}

.subscribe-hero-feature-icon {
  @apply w-6 h-6 flex items-center justify-center rounded-full shrink-0;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.subscribe-hero-btn {
  @apply inline-flex items-center justify-center gap-3 px-8 py-4 font-semibold text-base cursor-pointer;
  background: #fff;
  color: var(--color-primary-dark);
  border-radius: var(--radius-btn);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.subscribe-hero-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1);
}

.subscribe-hero-btn-icon {
  @apply w-5 h-5 flex items-center justify-center rounded-full;
  background: var(--color-primary);
  color: #fff;
}

.subscribe-hero-guarantee {
  @apply flex items-center justify-center gap-2 mt-4 text-xs;
  color: rgba(255, 255, 255, 0.7);
}

/* Switch Component */
.switch {
  @apply flex items-center justify-between gap-3;
}

.switch-content {
  @apply flex-1 min-w-0;
}

.switch-label {
  @apply flex items-center gap-2 text-sm font-medium text-ink-secondary;
}

.switch-description {
  @apply text-sm text-ink-muted mt-0.5;
}

.switch-badge {
  @apply text-[10px] font-bold uppercase tracking-wider py-0.5 px-1.5 rounded bg-accent-light text-accent;
}

.switch-track {
  @apply relative inline-flex w-11 h-6 shrink-0 cursor-pointer rounded-full border-2 border-transparent;
  transition: background-color 0.2s ease;
  background-color: var(--color-border-strong);
}

.switch-track:focus {
  @apply outline-none;
  box-shadow: 0 0 0 3px rgba(196, 93, 53, 0.15);
}

.switch-track:focus-visible {
  box-shadow: 0 0 0 3px rgba(196, 93, 53, 0.25);
}

.switch-track-active {
  background-color: var(--color-primary);
}

.switch-knob {
  @apply pointer-events-none inline-block w-5 h-5 rounded-full shadow-warm-sm transition-transform duration-300 ease-out;
  background-color: white;
  transform: translateX(0);
}

.switch-knob-active {
  transform: translateX(1.25rem);
}

/* Small variant */
.switch-sm .switch-track {
  @apply w-9 h-5;
}

.switch-sm .switch-knob {
  @apply w-4 h-4;
}

.switch-sm .switch-knob-active {
  transform: translateX(1rem);
}

/* Legacy toggle support (for JS-controlled toggles) */
.toggle-switch {
  @apply relative inline-flex w-11 h-6 shrink-0 cursor-pointer rounded-full border-2 border-transparent;
  transition: background-color 0.2s ease;
  background-color: var(--color-border-strong);
}

.toggle-switch:focus {
  @apply outline-none;
  box-shadow: 0 0 0 3px rgba(196, 93, 53, 0.15);
}

.toggle-switch.toggle-active {
  background-color: var(--color-primary);
}

.toggle-knob {
  @apply pointer-events-none inline-block w-5 h-5 rounded-full shadow-warm-sm transition-transform duration-300 ease-out;
  background-color: white;
  transform: translateX(0);
}

.toggle-switch.toggle-active .toggle-knob {
  transform: translateX(1.25rem);
}

/* Popover Component */
.popover-content {
  @apply py-3 px-4 rounded-xl border border-border shadow-warm-lg;
  background-color: var(--color-elevated);
  min-width: 200px;
  max-width: 280px;
}

.popover-title {
  @apply text-sm font-semibold text-ink mb-2 flex items-center gap-2;
}

.popover-body {
  @apply text-sm text-ink-secondary leading-relaxed;
}

.popover-list {
  @apply mt-2 space-y-1.5;
}

.popover-list-item {
  @apply flex items-start gap-2 text-sm text-ink-secondary;
}

.popover-list-item strong {
  @apply text-ink font-medium;
}

/* Theme toggle button */
.theme-toggle {
  @apply fixed bottom-6 right-6 w-12 h-12 flex items-center justify-center bg-elevated border border-border rounded-full text-ink-secondary cursor-pointer shadow-warm-md z-50;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover {
  @apply text-primary border-primary scale-105 shadow-warm-lg;
}

.theme-toggle:active {
  @apply scale-95;
}

/* Animation delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* Smooth theme transitions */
html.transitioning,
html.transitioning * {
  transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Admin bar */
.admin-bar {
  background: linear-gradient(90deg, #1a1a2e 0%, #16213e 100%);
  border-bottom: 1px solid #0f3460;
}

.admin-bar-content {
  @apply max-w-7xl mx-auto px-4 py-1.5 flex items-center gap-4;
}

.admin-bar-badge {
  @apply text-xs font-bold uppercase tracking-wider px-2 py-0.5 rounded;
  background: #e94560;
  color: #fff;
}

.admin-bar-link {
  @apply flex items-center gap-1.5 text-sm font-medium;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.15s ease;
}

.admin-bar-link:hover {
  color: #fff;
}

/* Flash toast overrides */
.toastify.flash-toast {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* ========================================
   INTERVIEW CONVERSATION - Studio Session
   ======================================== */

/* Conversation container */
.conversation-studio {
  @apply relative;
  background:
    linear-gradient(180deg, var(--color-elevated) 0%, var(--color-subtle) 100%);
}

.conversation-studio::before {
  content: '';
  @apply absolute inset-0 opacity-30 pointer-events-none;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c45d35' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Message styling */
.message-row {
  @apply flex gap-3 py-4 px-4 relative;
  animation: message-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.message-row:not(:last-child)::after {
  content: '';
  @apply absolute bottom-0 left-16 right-4 h-px bg-border opacity-50;
}

@keyframes message-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Speaker avatars */
.speaker-avatar {
  @apply w-10 h-10 rounded-full flex items-center justify-center shrink-0 shadow-warm-sm;
  border: 2px solid transparent;
}

.speaker-avatar-interviewer {
  @apply bg-primary-light text-primary;
  border-color: var(--color-primary);
}

.speaker-avatar-user {
  @apply bg-accent-light text-accent;
  border-color: var(--color-accent);
}

/* Message content */
.message-content {
  @apply flex-1 min-w-0;
}

.message-speaker {
  @apply text-xs font-semibold uppercase tracking-wider mb-1.5;
}

.message-speaker-interviewer {
  @apply text-primary;
}

.message-speaker-user {
  @apply text-accent;
}

.message-text {
  @apply text-ink text-[0.9375rem] leading-relaxed;
}

/* Message replay button */
.message-replay-btn {
  @apply inline-flex items-center gap-1.5 mt-2 py-1.5 px-3 text-xs font-medium rounded-full;
  transition: background-color 0.15s ease;
  background: var(--color-subtle);
  border: 1px solid var(--color-border);
  color: var(--color-ink-muted);
}

.message-replay-btn:hover {
  @apply text-primary;
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

/* Thinking indicator */
.thinking-indicator {
  @apply flex items-center gap-1.5 py-2;
}

.thinking-dot {
  @apply w-2 h-2 rounded-full bg-primary;
  animation: thinking-pulse 1.4s ease-in-out infinite;
}

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

@keyframes thinking-pulse {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Live transcript */
.live-transcript {
  @apply relative overflow-hidden;
  background: linear-gradient(135deg, var(--color-primary-light) 0%, rgba(196, 93, 53, 0.05) 100%);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-card);
}

.live-transcript::before {
  content: '';
  @apply absolute left-0 top-0 bottom-0 w-1;
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
}

/* Restart button inside live transcript */
.transcript-restart-btn {
  @apply inline-flex items-center gap-1.5 py-1.5 px-3 text-xs font-medium rounded-full shrink-0;
  transition: background-color 0.15s ease;
  background: var(--color-elevated);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.transcript-restart-btn:hover {
  background: var(--color-primary);
  color: var(--color-ink-inverse);
}

/* Speaking highlight - used during TTS playback */
.speaking-highlight {
  @apply rounded px-0.5 -mx-0.5;
  background: var(--color-primary);
  color: var(--color-ink-inverse);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Dimmed text (not yet spoken) */
.speaking-dimmed {
  @apply opacity-40;
}

/* Voice control area */
.voice-controls {
  @apply relative py-6;
}

.voice-controls::before {
  content: '';
  @apply absolute inset-x-0 top-0 h-px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}

/* Primary mic button */
.mic-button {
  @apply relative inline-flex items-center justify-center gap-3 py-5 px-10 font-display text-lg font-semibold;
  transition: background-color 0.15s ease;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--color-elevated) 0%, var(--color-subtle) 100%);
  border: 2px solid var(--color-border-strong);
  color: var(--color-ink);
  box-shadow: var(--shadow-warm-md), inset 0 1px 0 rgba(255,255,255,0.5);
}

.mic-button:hover {
  @apply border-primary;
  box-shadow: var(--shadow-warm-lg), inset 0 1px 0 rgba(255,255,255,0.5);
  transform: translateY(-2px);
}

.mic-button:active {
  transform: translateY(0);
}

.mic-button-recording {
  @apply bg-error border-error text-ink-inverse;
  box-shadow: 0 0 0 4px rgba(153, 27, 27, 0.2), var(--shadow-warm-lg);
  animation: recording-pulse 2s ease-in-out infinite;
}

.mic-button-recording:hover {
  @apply border-error;
}

@keyframes recording-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(153, 27, 27, 0.2), var(--shadow-warm-lg); }
  50% { box-shadow: 0 0 0 8px rgba(153, 27, 27, 0.1), var(--shadow-warm-lg); }
}

.mic-button-interrupt {
  @apply border-warning;
  background: linear-gradient(135deg, var(--color-warning-light) 0%, var(--color-elevated) 100%);
  color: var(--color-warning);
}

/* Mic icon container */
.mic-icon-wrap {
  @apply w-8 h-8 flex items-center justify-center rounded-full;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  box-shadow: var(--shadow-btn);
}

.mic-button:hover .mic-icon-wrap {
  box-shadow: var(--shadow-btn-hover);
}

.mic-button-recording .mic-icon-wrap {
  @apply bg-ink-inverse;
  box-shadow: none;
}

.mic-button-interrupt .mic-icon-wrap {
  background: linear-gradient(135deg, var(--color-warning), #8b6914);
}

/* Secondary action buttons */
.action-btn-secondary {
  @apply inline-flex items-center gap-2 py-2.5 px-4 text-sm font-medium rounded-full;
  transition: background-color 0.15s ease, color 0.15s ease;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-ink-secondary);
}

.action-btn-secondary:hover {
  @apply border-border-strong text-ink;
  background: var(--color-subtle);
}

/* STAR Coaching section */
.coaching-section {
  @apply flex items-center justify-between py-3 px-4 rounded-xl;
  background: linear-gradient(135deg, var(--color-subtle) 0%, var(--color-elevated) 100%);
  border: 1px solid var(--color-border);
}

.coaching-label {
  @apply flex items-center gap-2 text-sm text-ink-secondary;
}

.coaching-badge {
  @apply text-[10px] font-bold uppercase tracking-wider py-0.5 px-1.5 rounded bg-accent-light text-accent;
}

/* Status indicator */
.status-indicator {
  @apply inline-flex items-center gap-2 py-2 px-4 rounded-full text-sm;
  background: var(--color-subtle);
  color: var(--color-ink-muted);
}

.status-indicator-active {
  @apply text-primary;
  background: var(--color-primary-light);
}

.status-dot {
  @apply w-2 h-2 rounded-full bg-current;
  animation: status-blink 1.5s ease-in-out infinite;
}

@keyframes status-blink {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* End interview section */
.end-section {
  @apply relative pt-6 mt-6;
}

.end-section::before {
  content: '';
  @apply absolute inset-x-0 top-0 h-px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}

/* STAR coaching hint redesign */
.coaching-hint {
  @apply relative overflow-hidden;
  background: linear-gradient(135deg, var(--color-warning-light) 0%, rgba(181, 133, 10, 0.05) 100%);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-card);
}

.coaching-hint::before {
  content: '';
  @apply absolute left-0 top-0 bottom-0 w-1;
  background: var(--color-warning);
}

.coaching-hint-badge {
  @apply inline-flex items-center justify-center w-7 h-7 rounded-full text-xs font-bold;
  background: var(--color-warning);
  color: var(--color-ink-inverse);
}

/* Microphone permission error */
.mic-permission-error {
  @apply flex flex-col items-center justify-center text-center py-12 px-6;
  animation: var(--animate-fade-in);
}

.mic-permission-icon {
  @apply relative mb-6;
}

.mic-permission-icon::before {
  content: '';
  @apply absolute inset-0 rounded-full;
  background: linear-gradient(135deg, var(--color-warning-light) 0%, rgba(181, 133, 10, 0.1) 100%);
  transform: scale(1.5);
  z-index: -1;
}

.mic-permission-icon svg {
  @apply w-16 h-16;
  color: var(--color-warning);
  filter: drop-shadow(0 4px 12px rgba(181, 133, 10, 0.25));
}

.mic-permission-title {
  @apply font-display text-2xl font-semibold mb-3;
  color: var(--color-ink);
}

.mic-permission-message {
  @apply text-base mb-6 max-w-md;
  color: var(--color-ink-secondary);
}

.mic-permission-instructions {
  @apply relative py-5 px-6 rounded-xl max-w-md w-full;
  background: linear-gradient(135deg, var(--color-warning-light) 0%, rgba(181, 133, 10, 0.05) 100%);
  border: 1px solid var(--color-warning);
  border-left-width: 4px;
}

.mic-permission-instructions p {
  @apply text-left leading-relaxed;
  color: var(--color-ink-secondary);
}

.mic-permission-actions {
  @apply flex flex-col sm:flex-row items-center gap-3 mt-6;
}

/* =============================================================================
   INTERVIEW LAYOUT - Desktop Sidebar
   ============================================================================= */

.interview-layout {
  @apply flex flex-col gap-0;
}

/* When sidebar is present, switch to two-column on desktop */
.interview-layout-with-sidebar {
  @apply lg:flex-row lg:gap-6;
}

.interview-layout-with-sidebar .interview-main {
  @apply lg:flex-1 lg:min-w-0;
}

.interview-layout-with-sidebar .interview-sidebar {
  @apply lg:w-80 lg:flex-shrink-0;
}

/* Main content area */
.interview-main {
  @apply flex flex-col;
}

/* Conversation scroll area */
.interview-conversation-scroll {
  @apply p-5 space-y-4 overflow-y-auto;
  max-height: 400px;
}

@media (min-width: 1024px) {
  .interview-conversation-scroll {
    max-height: 480px;
  }
}

/* Sidebar - Hidden on mobile, shown on desktop */
.interview-sidebar {
  @apply hidden lg:block lg:sticky;
  top: 2rem;
  height: fit-content;
}

/* Sidebar card */
.sidebar-card {
  @apply overflow-hidden;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* Sidebar header */
.sidebar-header {
  @apply flex items-center gap-2 px-5 py-4 text-sm font-semibold;
  background: linear-gradient(135deg, var(--color-subtle) 0%, var(--color-elevated) 100%);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink);
}

/* Sidebar sections */
.sidebar-section {
  @apply px-5 py-4;
  border-bottom: 1px solid var(--color-border);
}

.sidebar-section:last-child {
  @apply border-b-0;
}

/* Admin section styling */
.sidebar-admin {
  background: linear-gradient(135deg, var(--color-warning-light) 0%, rgba(181, 133, 10, 0.03) 100%);
}

/* Sidebar hint (STAR coaching hint in desktop) */
.sidebar-hint {
  @apply px-5 py-4 relative;
  background: linear-gradient(135deg, var(--color-warning-light) 0%, rgba(181, 133, 10, 0.05) 100%);
  border-bottom: 1px solid var(--color-border);
}

.sidebar-hint::before {
  content: '';
  @apply absolute left-0 top-0 bottom-0 w-1;
  background: var(--color-warning);
}

/* Sidebar sample response buttons */
.sidebar-sample-btn {
  @apply w-full flex items-center gap-2 px-3 py-2 text-xs font-medium rounded-lg;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-ink-secondary);
}

.sidebar-sample-btn:hover {
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}

.sidebar-sample-btn:disabled {
  @apply opacity-50 pointer-events-none;
}

.sidebar-sample-btn-weak:hover {
  border-color: var(--color-error);
  color: var(--color-error);
}

.sidebar-sample-btn-average:hover {
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.sidebar-sample-btn-strong:hover {
  border-color: var(--color-success);
  color: var(--color-success);
}

.sidebar-sample-dot {
  @apply w-2 h-2 rounded-full flex-shrink-0;
}

/* =============================================================================
   PREPARATION SECTION - Interview Prep Guide
   ============================================================================= */

/* Prep time badge */
.prep-time-badge {
  @apply inline-flex items-center gap-2 py-2 px-4 text-sm rounded-full;
  background: var(--color-subtle);
  border: 1px solid var(--color-border);
  color: var(--color-ink-secondary);
}

.prep-time-badge strong {
  color: var(--color-ink);
}

/* Prep card base */
.prep-card {
  @apply overflow-hidden;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-warm-md);
}

/* Prep card header */
.prep-card-header {
  @apply flex items-center gap-3 px-5 py-4;
  border-bottom: 1px solid var(--color-border);
}

.prep-card-header-primary {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, rgba(196, 93, 53, 0.03) 100%);
}

.prep-card-header-accent {
  background: linear-gradient(135deg, var(--color-accent-light) 0%, rgba(30, 107, 92, 0.03) 100%);
}

.prep-card-header-warning {
  background: linear-gradient(135deg, var(--color-warning-light) 0%, rgba(181, 133, 10, 0.03) 100%);
}

/* Prep card icon */
.prep-card-icon {
  @apply w-9 h-9 rounded-xl flex items-center justify-center shrink-0;
}

.prep-card-icon-primary {
  background: var(--color-primary);
  color: var(--color-ink-inverse);
}

.prep-card-icon-accent {
  background: var(--color-accent);
  color: var(--color-ink-inverse);
}

.prep-card-icon-warning {
  background: var(--color-warning);
  color: var(--color-ink-inverse);
}

/* Prep card title */
.prep-card-title {
  @apply text-lg font-semibold flex-1;
  font-family: var(--font-display);
  color: var(--color-ink);
}

/* Prep card body */
.prep-card-body {
  @apply px-5 py-5;
}

/* STAR Method badge */
.prep-star-badge {
  @apply py-1 px-2.5 text-xs font-semibold uppercase tracking-wider rounded-md;
  background: var(--color-warning);
  color: var(--color-ink-inverse);
}

/* Question topic category */
.prep-category-title {
  @apply text-xs font-semibold uppercase tracking-wider mb-3;
  color: var(--color-ink-muted);
}

/* Topic card */
.prep-topic-card {
  @apply p-4 rounded-xl;
  background: var(--color-subtle);
  border: 1px solid var(--color-border);
}

.prep-topic-title {
  @apply font-medium text-sm;
  color: var(--color-ink);
}

.prep-topic-description {
  @apply text-xs mt-1;
  color: var(--color-ink-secondary);
}

.prep-topic-example {
  @apply mt-2 text-xs italic;
  color: var(--color-ink-muted);
}

.prep-topic-example-label {
  @apply not-italic font-medium;
  color: var(--color-primary);
}

/* Skills section */
.prep-skill-item {
  @apply flex items-start gap-3;
}

.prep-skill-dot {
  @apply flex-shrink-0 w-2.5 h-2.5 mt-1.5 rounded-full;
}

.prep-skill-dot-high {
  background: var(--color-error);
}

.prep-skill-dot-medium {
  background: var(--color-warning);
}

.prep-skill-dot-low {
  background: var(--color-ink-muted);
}

.prep-skill-name {
  @apply font-medium text-sm;
  color: var(--color-ink);
}

.prep-skill-resource {
  @apply text-xs mt-0.5;
  color: var(--color-ink-muted);
}

.prep-skill-legend {
  @apply flex flex-wrap items-center gap-4 mt-5 pt-4 text-xs;
  border-top: 1px solid var(--color-border);
  color: var(--color-ink-muted);
}

.prep-skill-legend-item {
  @apply flex items-center gap-1.5;
}

/* STAR story prompts */
.prep-story-prompt {
  @apply flex gap-4 p-4 rounded-xl relative;
  background: var(--color-subtle);
  border-left: 3px solid var(--color-warning);
}

.prep-story-number {
  @apply w-7 h-7 rounded-full flex items-center justify-center text-sm font-bold shrink-0;
  background: var(--color-warning);
  color: var(--color-ink-inverse);
}

.prep-story-text {
  @apply font-medium text-sm;
  color: var(--color-ink);
}

.prep-story-hints {
  @apply mt-2 space-y-1 text-xs list-none p-0;
  color: var(--color-ink-muted);
}

.prep-story-hints li {
  @apply flex items-start gap-2;
}

.prep-story-hints li::before {
  content: '•';
  color: var(--color-warning);
  font-weight: bold;
}

/* Checklist */
.prep-checklist-item {
  @apply flex items-start gap-3 py-2 px-3 rounded-lg cursor-pointer transition-colors duration-200;
}

.prep-checklist-item:hover {
  background: var(--color-subtle);
}

.prep-checklist-text {
  @apply text-sm;
  transition: color 0.15s ease;
  color: var(--color-ink-secondary);
}

.prep-checklist-item:hover .prep-checklist-text {
  color: var(--color-ink);
}

.prep-checklist-item input:checked + .prep-checklist-text {
  @apply line-through;
  color: var(--color-ink-muted);
}

/* Checklist progress */
.prep-checklist-progress {
  @apply flex items-center gap-4 mt-5 pt-4;
  border-top: 1px solid var(--color-border);
}

.prep-checklist-progress-bar {
  @apply flex-1 h-2 rounded-full overflow-hidden;
  background: var(--color-subtle);
}

.prep-checklist-progress-fill {
  @apply h-full rounded-full;
  transition: width 0.5s ease-out;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

.prep-checklist-progress-text {
  @apply text-xs font-medium shrink-0;
  color: var(--color-ink-muted);
}

/* Resource links */
.prep-resource-link {
  @apply flex items-start gap-3 p-4 rounded-xl;
  transition: background-color 0.15s ease;
  background: var(--color-subtle);
  border: 1px solid var(--color-border);
}

.prep-resource-link:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.prep-resource-icon {
  @apply flex-shrink-0 mt-0.5;
}

.prep-resource-title {
  @apply flex items-center gap-2 font-medium text-sm;
  color: var(--color-ink);
}

.prep-resource-link:hover .prep-resource-title {
  color: var(--color-primary);
}

.prep-resource-description {
  @apply text-xs mt-0.5 line-clamp-2;
  color: var(--color-ink-muted);
}

.prep-resource-url {
  @apply text-xs mt-1 block truncate;
  color: var(--color-ink-muted);
  opacity: 0.7;
}

/* CTA card */
.prep-cta-card {
  @apply flex flex-col sm:flex-row items-center gap-4 p-6 rounded-2xl text-center sm:text-left;
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-accent-light) 100%);
  border: 1px solid var(--color-border);
}

.prep-cta-content {
  @apply flex-1;
}

.prep-cta-title {
  @apply text-lg font-semibold mb-1;
  font-family: var(--font-display);
  color: var(--color-ink);
}

.prep-cta-description {
  @apply text-sm;
  color: var(--color-ink-secondary);
}

/* ========================================
   RESULTS PAGE - Interview Feedback
   Refined warm studio aesthetic
   ======================================== */

/* Results Header */
.results-header {
  background: var(--color-elevated);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.results-header-content {
  @apply max-w-4xl mx-auto px-4 py-4 flex items-center justify-between gap-4;
}

.results-header-left {
  @apply flex items-center gap-4 min-w-0;
}

.results-header-home {
  @apply w-9 h-9 rounded-lg flex items-center justify-center shrink-0;
  color: var(--color-ink-muted);
  background: var(--color-subtle);
  border: 1px solid var(--color-border);
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.results-header-home:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.results-header-divider {
  @apply h-6 shrink-0;
  width: 1px;
  background: var(--color-border);
}

.results-header-info {
  @apply min-w-0;
}

.results-header-title-row {
  @apply flex items-center gap-2 mb-1;
}

.results-header-type {
  @apply inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded;
}

.results-header-type-interview {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.results-header-type-practice {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.results-header-title {
  @apply text-lg font-semibold truncate;
  font-family: var(--font-display);
  color: var(--color-ink);
  max-width: 400px;
}

.results-header-company {
  @apply font-normal;
  color: var(--color-ink-muted);
}

.results-header-right {
  @apply flex flex-col items-end shrink-0;
}

.results-header-candidate {
  @apply text-sm font-medium;
  color: var(--color-ink-secondary);
}

.results-header-date {
  @apply text-xs;
  color: var(--color-ink-muted);
}

/* Practice Context Bar */
.results-context-bar {
  background: var(--color-accent-light);
  border-bottom: 1px solid var(--color-border);
}

.results-context-content {
  @apply max-w-4xl mx-auto px-4 py-2.5 flex items-center justify-between gap-4;
}

.results-context-text {
  @apply flex items-center gap-2 text-sm;
  color: var(--color-ink-secondary);
}

.results-context-text svg {
  color: var(--color-accent);
  shrink: 0;
}

.results-context-text strong {
  @apply font-semibold;
  color: var(--color-ink);
}

.results-context-link {
  @apply flex items-center gap-1.5 text-sm font-medium shrink-0;
  color: var(--color-accent);
  transition: color 0.15s ease;
}

.results-context-link:hover {
  color: var(--color-ink);
}

.results-context-link svg {
  transition: transform 0.15s ease;
}

.results-context-link:hover svg {
  transform: translateX(3px);
}

/* Mobile responsive */
@media (max-width: 640px) {
  .results-header-title-row {
    @apply hidden;
  }

  .results-header-title {
    @apply text-base;
    max-width: calc(100vw - 100px);
  }

  .results-header-right {
    @apply hidden;
  }

  .results-context-content {
    @apply flex-col items-start gap-2;
  }
}

.results-container {
  @apply space-y-6 max-w-4xl mx-auto;
}

/* Loading state */
.results-loading {
  @apply text-center py-20;
}

.results-loading-icon {
  @apply inline-flex items-center justify-center w-20 h-20 rounded-2xl mb-6;
  background: linear-gradient(145deg, var(--color-primary-light), var(--color-subtle));
  color: var(--color-primary);
  box-shadow: var(--shadow-warm-md);
}

.results-loading-title {
  @apply text-2xl font-semibold mb-3;
  font-family: var(--font-display);
  color: var(--color-ink);
}

.results-loading-text {
  @apply text-base max-w-md mx-auto leading-relaxed;
  color: var(--color-ink-muted);
}

.results-loading-dots {
  @apply flex items-center justify-center gap-2 mt-8;
}

.results-loading-dots span {
  @apply w-2.5 h-2.5 rounded-full;
  background: var(--color-primary);
  animation: results-loading-pulse 1.4s ease-in-out infinite;
}

.results-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.results-loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes results-loading-pulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ========================================
   Loading Overlay Component
   ======================================== */

.loading-overlay {
  @apply hidden items-center justify-center;
  background: rgba(var(--color-base-rgb, 250, 247, 244), 0.7);
  z-index: 50;
}

.loading-overlay.show {
  @apply flex;
}

.loading-overlay-fullscreen {
  @apply fixed inset-0;
  z-index: 100;
}

.loading-overlay-container {
  @apply absolute inset-0;
  border-radius: inherit;
}

.loading-overlay-blur {
  backdrop-filter: blur(8px);
}

.loading-overlay-content {
  @apply flex flex-col items-center text-center px-6;
}

/* Visual element container */
.loading-overlay-visual {
  @apply mb-6 relative;
}

/* Sound wave animation - 7 bars for richer visualization */
.loading-wave {
  @apply flex items-end justify-center gap-1;
  height: 48px;
}

.loading-overlay-sm .loading-wave {
  height: 32px;
}

.loading-overlay-lg .loading-wave {
  height: 64px;
}

.loading-wave span {
  @apply rounded-full;
  width: 4px;
  background: linear-gradient(to top, var(--color-primary), var(--color-accent));
  animation: loading-wave-bounce 1s ease-in-out infinite;
  transform-origin: bottom;
}

.loading-overlay-sm .loading-wave span {
  width: 3px;
}

.loading-overlay-lg .loading-wave span {
  width: 5px;
}

.loading-wave span:nth-child(1) { height: 40%; animation-delay: 0s; }
.loading-wave span:nth-child(2) { height: 70%; animation-delay: 0.1s; }
.loading-wave span:nth-child(3) { height: 50%; animation-delay: 0.2s; }
.loading-wave span:nth-child(4) { height: 100%; animation-delay: 0.3s; }
.loading-wave span:nth-child(5) { height: 50%; animation-delay: 0.4s; }
.loading-wave span:nth-child(6) { height: 70%; animation-delay: 0.5s; }
.loading-wave span:nth-child(7) { height: 40%; animation-delay: 0.6s; }

@keyframes loading-wave-bounce {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.4);
  }
}

/* Alternative dots animation */
.loading-dots {
  @apply flex items-center justify-center gap-2;
}

.loading-dots span {
  @apply rounded-full;
  width: 10px;
  height: 10px;
  background: var(--color-primary);
  animation: loading-dot-pulse 1.4s ease-in-out infinite;
}

.loading-overlay-sm .loading-dots span {
  width: 8px;
  height: 8px;
}

.loading-overlay-lg .loading-dots span {
  width: 12px;
  height: 12px;
}

.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes loading-dot-pulse {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
    background: var(--color-primary);
  }
  40% {
    transform: scale(1);
    opacity: 1;
    background: var(--color-accent);
  }
}

/* Typography */
.loading-overlay-message {
  @apply text-lg font-medium;
  font-family: var(--font-display);
  color: var(--color-ink);
}

.loading-overlay-sm .loading-overlay-message {
  @apply text-base;
}

.loading-overlay-lg .loading-overlay-message {
  @apply text-xl;
}

.loading-overlay-submessage {
  @apply text-sm mt-2;
  color: var(--color-ink-muted);
  max-width: 280px;
}

.loading-overlay-lg .loading-overlay-submessage {
  @apply text-base;
  max-width: 360px;
}

/* Score hero section */
.results-score-hero {
  @apply text-center py-10 px-8 relative overflow-hidden;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-warm-lg);
}

.results-score-hero::before {
  content: '';
  @apply absolute inset-0;
  background:
    radial-gradient(ellipse at top, var(--color-primary-light) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, var(--color-accent-light) 0%, transparent 40%);
  opacity: 0.5;
}

.results-score-hero > * {
  @apply relative;
}

.results-score-ring {
  @apply inline-flex flex-col items-center justify-center w-32 h-32 rounded-full mb-5;
  border: 5px solid;
  box-shadow: var(--shadow-warm-md);
}

.results-score-ring-excellent {
  border-color: var(--color-success);
  background: linear-gradient(145deg, var(--color-success-light), var(--color-elevated));
}

.results-score-ring-good {
  border-color: var(--color-accent);
  background: linear-gradient(145deg, var(--color-accent-light), var(--color-elevated));
}

.results-score-ring-fair {
  border-color: var(--color-warning);
  background: linear-gradient(145deg, var(--color-warning-light), var(--color-elevated));
}

.results-score-ring-needs-work {
  border-color: var(--color-error);
  background: linear-gradient(145deg, var(--color-error-light), var(--color-elevated));
}

.results-score-value {
  @apply text-5xl font-bold leading-none;
  font-family: var(--font-display);
  color: var(--color-ink);
}

.results-score-max {
  @apply text-lg font-medium -mt-1;
  color: var(--color-ink-muted);
}

.results-score-label {
  @apply text-sm font-semibold uppercase tracking-widest mb-4;
  color: var(--color-primary);
  letter-spacing: 0.15em;
}

.results-score-summary {
  @apply text-base max-w-xl mx-auto leading-relaxed;
  color: var(--color-ink-secondary);
}

/* Results card base */
.results-card {
  @apply overflow-hidden;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

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

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

.results-card-header {
  @apply flex items-center gap-3 px-6 py-4;
  background: var(--color-subtle);
  border-bottom: 1px solid var(--color-border);
}

.results-card-icon {
  @apply w-10 h-10 rounded-xl flex items-center justify-center shrink-0;
  box-shadow: var(--shadow-warm-sm);
}

.results-card-icon-primary {
  background: linear-gradient(145deg, var(--color-primary), var(--color-primary-hover));
  color: var(--color-ink-inverse);
}

.results-card-icon-success {
  background: linear-gradient(145deg, var(--color-success), #2d6235);
  color: var(--color-ink-inverse);
}

.results-card-icon-warning {
  background: linear-gradient(145deg, var(--color-warning), #8f6908);
  color: var(--color-ink-inverse);
}

.results-card-icon-accent {
  background: linear-gradient(145deg, var(--color-accent), #155549);
  color: var(--color-ink-inverse);
}

.results-card-title {
  @apply text-lg font-semibold;
  font-family: var(--font-display);
  color: var(--color-ink);
}

.results-card-body {
  @apply px-6 py-5;
}

/* Results grid layout */
.results-grid {
  @apply grid md:grid-cols-2 gap-5;
}

/* Category scores */
.results-categories {
  @apply grid grid-cols-2 md:grid-cols-4 gap-3;
}

.results-category-item {
  @apply text-center py-5 px-3 relative overflow-hidden;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  box-shadow: var(--shadow-warm-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.results-category-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-warm-md);
}

.results-category-item::before {
  content: '';
  @apply absolute top-0 left-0 right-0 h-1;
  background: var(--color-border);
}

.results-category-item.category-excellent::before { background: var(--color-success); }
.results-category-item.category-good::before { background: var(--color-accent); }
.results-category-item.category-fair::before { background: var(--color-warning); }
.results-category-item.category-needs-work::before { background: var(--color-error); }

.results-category-score {
  @apply text-3xl font-bold mb-2;
  font-family: var(--font-display);
}

.results-category-score-excellent { color: var(--color-success); }
.results-category-score-good { color: var(--color-accent); }
.results-category-score-fair { color: var(--color-warning); }
.results-category-score-needs-work { color: var(--color-error); }

.results-category-name {
  @apply text-xs font-semibold uppercase tracking-wider;
  color: var(--color-ink-muted);
  letter-spacing: 0.08em;
}

/* Results list (strengths/weaknesses) */
.results-list {
  @apply space-y-3 list-none p-0 m-0;
}

.results-list li {
  @apply flex items-start gap-3 text-sm leading-relaxed py-2 px-3 rounded-lg transition-colors;
  color: var(--color-ink-secondary);
}

.results-list-success li::before {
  content: '';
  @apply shrink-0 w-7 h-7 rounded-full;
  background: var(--color-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/16px no-repeat;
}

.results-list-warning li::before {
  content: '';
  @apply shrink-0 w-7 h-7 rounded-full;
  background: var(--color-warning) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v2m0 4h.01'/%3E%3C/svg%3E") center/16px no-repeat;
}

/* Collapsible sections */
.results-collapsible-header {
  @apply w-full px-6 py-4 flex items-center justify-between text-left cursor-pointer transition-colors duration-200;
}

.results-collapsible-header:hover {
  background: var(--color-subtle);
}

.results-collapsible-title {
  @apply font-semibold;
  font-family: var(--font-display);
  color: var(--color-ink);
}

.results-collapsible-chevron {
  @apply w-5 h-5 transition-transform duration-300;
  color: var(--color-ink-muted);
}

.results-collapsible-content {
  @apply hidden;
  border-top: 1px solid var(--color-border);
}

.results-collapsible-open .results-collapsible-chevron {
  transform: rotate(180deg);
}

.results-collapsible-open .results-collapsible-content {
  @apply block;
}

/* Answer feedback */
.results-answers {
  @apply space-y-4;
}

.results-answer {
  @apply p-5 pl-6 relative overflow-hidden;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
}

.results-answer::before {
  content: '';
  @apply absolute top-0 left-0 bottom-0;
  width: 5px;
}

.results-answer-good::before { background: var(--color-success); }
.results-answer-fair::before { background: var(--color-warning); }
.results-answer-needs-work::before { background: var(--color-error); }

.results-answer-header {
  @apply flex items-start justify-between gap-4 mb-4;
}

.results-answer-question {
  @apply flex-1 text-sm italic py-3 px-4 rounded-lg;
  background: var(--color-subtle);
  color: var(--color-ink-secondary);
  border-left: 3px solid var(--color-border-strong);
}

.results-answer-number {
  @apply not-italic font-bold mr-2;
  color: var(--color-ink-muted);
}

.results-answer-score {
  @apply text-xl font-bold shrink-0;
  font-family: var(--font-display);
  color: var(--color-ink);
}

.results-answer-score-max {
  @apply text-sm font-normal;
  color: var(--color-ink-muted);
}

.results-answer-response {
  @apply text-sm mb-4 leading-relaxed;
  color: var(--color-ink-secondary);
}

.results-answer-response strong {
  color: var(--color-ink-muted);
  font-weight: 600;
}

.results-answer-feedback {
  @apply flex items-start gap-2.5 text-sm mb-3 py-2 px-3 rounded-lg;
}

.results-answer-feedback-good {
  background: var(--color-success-light);
  color: var(--color-success);
}

.results-answer-feedback-suggestion {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.results-answer-feedback svg {
  @apply shrink-0 mt-0.5;
}

.results-answer-actions {
  @apply flex flex-wrap items-center gap-3 mt-5 pt-4;
  border-top: 1px solid var(--color-border);
}

/* Practice button */
.results-practice-btn {
  @apply inline-flex items-center gap-1.5 text-sm font-semibold py-2.5 px-4 rounded-lg;
  background: var(--color-primary);
  color: var(--color-ink-inverse);
  transition: background-color 0.15s ease;
}

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

.results-practice-history {
  @apply flex items-center gap-2 text-sm;
  color: var(--color-ink-muted);
}

.results-practice-history-label {
  @apply font-medium;
}

.results-practice-history-link {
  @apply font-medium;
  color: var(--color-accent);
}

.results-practice-history-link:hover {
  text-decoration: underline;
}

/* Example response */
.results-example-wrapper {
  @apply mt-3;
}

.results-example-btn {
  @apply inline-flex items-center gap-1.5 text-sm font-medium py-2 px-3 rounded-lg;
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  transition: background-color 0.15s ease;
}

.results-example-btn:hover {
  background: var(--color-accent-light);
}

.results-example-loading {
  @apply items-center gap-2 mt-3 text-sm;
  color: var(--color-ink-muted);
}

.results-example-loading:not(.hidden) {
  @apply flex;
}

.results-example-content {
  @apply mt-4 p-5 rounded-xl;
  background: var(--color-accent-light);
  border: 1px solid var(--color-accent);
}

.results-example-title {
  @apply text-sm font-semibold mb-3;
  font-family: var(--font-display);
  color: var(--color-accent);
}

.results-example-text {
  @apply text-sm whitespace-pre-wrap leading-relaxed;
  color: var(--color-ink-secondary);
}

.results-example-improvements {
  @apply mt-4 pt-4;
  border-top: 1px solid var(--color-accent);
}

.results-example-improvements-title {
  @apply text-xs font-semibold uppercase tracking-wider mb-3;
  color: var(--color-accent);
  letter-spacing: 0.08em;
}

.results-example-improvements ul {
  @apply text-sm space-y-2 list-none;
  color: var(--color-ink-secondary);
}

.results-example-improvements li {
  @apply flex items-start gap-2;
}

.results-example-improvements li::before {
  content: '→';
  color: var(--color-accent);
  font-weight: 600;
}

/* Action buttons */
.results-actions {
  @apply flex justify-center gap-4 flex-wrap pt-4;
}

/* ========================================
   PRACTICE PROGRESS - Track improvement
   ======================================== */

.practice-progress-card {
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.practice-progress-header {
  @apply flex items-center gap-3 px-5 py-4;
  background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-subtle) 100%);
  border-bottom: 1px solid var(--color-border);
}

.practice-progress-icon {
  @apply w-10 h-10 rounded-xl flex items-center justify-center shrink-0;
  background: var(--color-accent);
  color: var(--color-ink-inverse);
}

.practice-progress-title-group {
  @apply flex-1 min-w-0;
}

.practice-progress-title {
  @apply text-base font-semibold;
  font-family: var(--font-display);
  color: var(--color-ink);
}

.practice-progress-subtitle {
  @apply text-sm;
  color: var(--color-ink-muted);
}

.practice-progress-badge {
  @apply inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-full shrink-0;
  background: var(--color-accent);
  color: var(--color-ink-inverse);
}

.practice-progress-body > * + * {
  border-top: 1px solid var(--color-border);
}

.practice-question-row {
  @apply flex items-center gap-4 px-5 py-4;
}

.practice-question-row:hover {
  background: var(--color-subtle);
}

.practice-question-content {
  @apply flex-1 min-w-0;
}

.practice-question-text {
  @apply text-sm italic mb-3 leading-relaxed;
  color: var(--color-ink-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.practice-attempts {
  @apply flex items-center gap-2 flex-wrap;
}

.practice-attempt {
  @apply inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-semibold rounded-lg;
  transition: opacity 0.15s ease;
}

.practice-attempt:hover {
  opacity: 0.8;
}

.practice-attempt-type {
  @apply opacity-60 font-medium;
}

.practice-attempt-excellent {
  background: var(--color-success-light);
  color: var(--color-success);
}

.practice-attempt-good {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.practice-attempt-fair {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.practice-attempt-needs-work {
  background: var(--color-error-light);
  color: var(--color-error);
}

.practice-attempt-arrow {
  color: var(--color-border-strong);
}

.practice-improvement {
  @apply flex items-center gap-1 px-3 py-1.5 text-sm font-bold rounded-lg shrink-0;
}

.practice-improvement-up {
  background: var(--color-success-light);
  color: var(--color-success);
}

.practice-improvement-down {
  background: var(--color-error-light);
  color: var(--color-error);
}

.practice-improvement-neutral {
  background: var(--color-subtle);
  color: var(--color-ink-muted);
}

/* ========================================
   NEXT STEPS SECTION - Results page footer
   Condensed prep content for post-interview
   ======================================== */

.next-steps-loading {
  @apply h-32 rounded-xl;
  background: var(--color-subtle);
}

.next-steps-loading-pulse {
  @apply h-full w-full rounded-xl;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
  background-size: 200% 100%;
  animation: next-steps-shimmer 1.5s infinite;
}

@keyframes next-steps-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.next-steps-section {
  @apply mt-10 pt-10 relative;
  border-top: 2px solid var(--color-border);
}

.next-steps-section::before {
  content: '';
  @apply absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 px-4 py-1;
  background: var(--color-base);
}

.next-steps-header {
  @apply flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-8;
}

.next-steps-header-content {
  @apply flex-1;
}

.next-steps-title {
  @apply text-2xl font-semibold mb-1;
  font-family: var(--font-display);
  color: var(--color-ink);
}

.next-steps-subtitle {
  @apply text-sm;
  color: var(--color-ink-muted);
}

.next-steps-time {
  @apply inline-flex items-center gap-2 text-sm font-medium py-2 px-4 rounded-full;
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.next-steps-grid {
  @apply grid gap-4;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.next-steps-card {
  @apply p-5 rounded-xl;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-warm-sm);
}

.next-steps-card-wide {
  grid-column: 1 / -1;
}

.next-steps-card-header {
  @apply flex items-center gap-2.5 mb-4 pb-3;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-primary);
}

.next-steps-card-header h3 {
  @apply text-sm font-semibold flex-1;
  color: var(--color-ink);
}

.next-steps-badge {
  @apply text-xs font-bold px-2 py-0.5 rounded;
  background: var(--color-warning-light);
  color: var(--color-warning);
}

/* Skills list */
.next-steps-skills {
  @apply space-y-2 list-none m-0 p-0;
}

.next-steps-skill {
  @apply flex items-center gap-2 text-sm;
  color: var(--color-ink-secondary);
}

.next-steps-skill.high-priority {
  @apply font-medium;
  color: var(--color-ink);
}

.next-steps-skill-dot {
  @apply w-2 h-2 rounded-full shrink-0;
  background: var(--color-border-strong);
}

.next-steps-skill.high-priority .next-steps-skill-dot {
  background: var(--color-primary);
}

/* Stories list */
.next-steps-stories {
  @apply space-y-3 list-none m-0 p-0;
}

.next-steps-stories li {
  @apply flex items-start gap-2.5 text-sm;
  color: var(--color-ink-secondary);
}

.next-steps-story-num {
  @apply w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold shrink-0;
  background: var(--color-warning-light);
  color: var(--color-warning);
}

/* Topics grid */
.next-steps-topics {
  @apply flex flex-wrap gap-4;
}

.next-steps-topic-group {
  @apply flex-1 min-w-0;
}

.next-steps-topic-category {
  @apply block text-xs font-semibold uppercase tracking-wider mb-2;
  color: var(--color-ink-muted);
  letter-spacing: 0.05em;
}

.next-steps-topic-tags {
  @apply flex flex-wrap gap-2;
}

.next-steps-topic-tag {
  @apply text-xs py-1.5 px-3 rounded-full;
  background: var(--color-subtle);
  color: var(--color-ink-secondary);
  border: 1px solid var(--color-border);
}

/* Resources */
.next-steps-resources {
  @apply space-y-2;
}

.next-steps-resource {
  @apply flex items-center justify-between gap-2 text-sm py-2 px-3 rounded-lg transition-colors;
  color: var(--color-accent);
}

.next-steps-resource:hover {
  background: var(--color-accent-light);
}

.next-steps-resource svg {
  @apply shrink-0 opacity-50;
}

/* ========================================
   MODAL COMPONENT - Base styles
   Warm studio themed modal
   ======================================== */

.modal-content {
  @apply flex flex-col overflow-hidden;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-warm-lg), 0 0 80px rgba(196, 93, 53, 0.08);
  animation: modal-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-slide-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  @apply flex items-center justify-between gap-4 px-6 py-4;
  background: var(--color-subtle);
  border-bottom: 1px solid var(--color-border);
}

.modal-title {
  @apply text-lg font-semibold;
  font-family: var(--font-display);
  color: var(--color-ink);
}

.modal-close {
  @apply w-8 h-8 rounded-lg flex items-center justify-center shrink-0 transition-colors;
  color: var(--color-ink-muted);
}

.modal-close:hover {
  background: var(--color-elevated);
  color: var(--color-ink);
}

.modal-body {
  @apply p-6 overflow-y-auto;
}

.modal-footer {
  @apply flex justify-end items-center gap-3 px-6 py-4;
  background: var(--color-subtle);
  border-top: 1px solid var(--color-border);
}

/* ========================================
   POLICY MODAL
   Refund & cancellation policy styles
   ======================================== */

.policy-content {
  @apply space-y-5;
}

.policy-intro {
  @apply text-ink-secondary leading-relaxed;
}

.policy-section {
  @apply relative pl-4;
  border-left: 2px solid var(--color-border-strong);
}

.policy-heading {
  @apply text-sm font-semibold uppercase tracking-wide mb-2;
  font-family: var(--font-display);
  color: var(--color-ink);
}

.policy-section p {
  @apply text-sm leading-relaxed;
  color: var(--color-ink-secondary);
}

.policy-link {
  @apply font-medium transition-colors;
  color: var(--color-primary);
}

.policy-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.policy-agreement {
  @apply text-sm italic pt-3 mt-5;
  color: var(--color-ink-muted);
  border-top: 1px solid var(--color-border);
}

/* ========================================
   PRACTICE MODAL
   Practice-specific styles (uses ModalComponent)
   ======================================== */

/* Practice modal header icon */
.practice-modal-header-icon {
  @apply w-10 h-10 rounded-xl flex items-center justify-center shrink-0;
  background: var(--color-primary);
  color: var(--color-ink-inverse);
  box-shadow: var(--shadow-btn);
}

.practice-modal-question {
  @apply mb-6 p-4 rounded-xl;
  background: var(--color-subtle);
  border-left: 3px solid var(--color-primary);
}

.practice-modal-question-label {
  @apply block text-xs font-semibold uppercase tracking-wider mb-2;
  color: var(--color-ink-muted);
  letter-spacing: 0.05em;
}

.practice-modal-question p {
  @apply text-sm italic leading-relaxed;
  color: var(--color-ink-secondary);
}

.practice-modal-options-label {
  @apply text-sm font-medium mb-4;
  color: var(--color-ink);
}

/* Practice mode cards */
.practice-mode-card {
  @apply w-full flex items-center gap-4 p-4 mb-3 rounded-xl text-left;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  background: var(--color-elevated);
  border: 2px solid var(--color-border);
}

.practice-mode-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-warm-md);
}

.practice-mode-card:last-child {
  @apply mb-0;
}

/* Quick practice - primary terracotta */
.practice-mode-quick .practice-mode-icon {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.practice-mode-quick:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.practice-mode-quick:hover .practice-mode-icon {
  background: var(--color-primary);
  color: var(--color-ink-inverse);
  box-shadow: var(--shadow-btn);
}

.practice-mode-quick:hover .practice-mode-arrow {
  color: var(--color-primary);
  transform: translateX(4px);
}

/* Deep practice - accent teal */
.practice-mode-deep .practice-mode-icon {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.practice-mode-deep:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}

.practice-mode-deep:hover .practice-mode-icon {
  background: var(--color-accent);
  color: var(--color-ink-inverse);
}

.practice-mode-deep:hover .practice-mode-arrow {
  color: var(--color-accent);
  transform: translateX(4px);
}

.practice-mode-icon {
  @apply w-11 h-11 rounded-xl flex items-center justify-center shrink-0;
  transition: background-color 0.15s ease;
}

.practice-mode-content {
  @apply flex-1 min-w-0;
}

.practice-mode-header {
  @apply flex items-center gap-2 mb-1;
}

.practice-mode-title {
  @apply font-semibold;
  color: var(--color-ink);
}

.practice-mode-duration {
  @apply text-xs font-medium px-2 py-0.5 rounded-full;
  background: var(--color-subtle);
  color: var(--color-ink-muted);
}

.practice-mode-description {
  @apply text-sm;
  color: var(--color-ink-muted);
}

.practice-mode-arrow {
  @apply shrink-0;
  transition: transform 0.15s ease;
  color: var(--color-border-strong);
}

.practice-modal-footer {
  @apply px-6 py-4;
  background: var(--color-subtle);
  border-top: 1px solid var(--color-border);
}

.practice-modal-cancel {
  @apply w-full py-2.5 px-4 text-sm font-medium rounded-lg transition-colors;
  color: var(--color-ink-muted);
}

.practice-modal-cancel:hover {
  color: var(--color-ink);
  background: var(--color-elevated);
}

/* ========================================
   SIGNUP PROMPT MODAL
   Warm studio themed upgrade prompt
   ======================================== */

.signup-prompt {
  @apply text-center;
}

.signup-prompt-hero {
  @apply mb-6;
}

.signup-prompt-icon {
  @apply w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-ink-inverse);
  box-shadow:
    var(--shadow-btn),
    0 8px 24px rgba(196, 93, 53, 0.25);
}

.signup-prompt-title {
  @apply text-xl font-semibold mb-2;
  font-family: var(--font-display);
  color: var(--color-ink);
}

.signup-prompt-subtitle {
  @apply text-sm leading-relaxed;
  color: var(--color-ink-secondary);
  max-width: 280px;
  margin: 0 auto;
}

/* Benefits grid */
.signup-prompt-benefits {
  @apply grid grid-cols-2 gap-3 mb-6 p-4 rounded-xl;
  background: var(--color-subtle);
  border: 1px solid var(--color-border);
}

.signup-prompt-benefit {
  @apply flex items-center gap-2.5 p-2 rounded-lg;
  background: var(--color-elevated);
  border: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.signup-prompt-benefit:hover {
  border-color: var(--color-border);
}

.signup-prompt-benefit-icon {
  @apply w-7 h-7 rounded-lg flex items-center justify-center shrink-0;
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.signup-prompt-benefit-text {
  @apply text-xs font-medium text-left;
  color: var(--color-ink-secondary);
}

/* Actions */
.signup-prompt-actions {
  @apply space-y-3;
}

.signup-prompt-cta {
  @apply w-full py-3.5 px-5 flex items-center justify-center gap-3 text-sm font-semibold rounded-xl;
  background: var(--color-primary);
  color: var(--color-ink-inverse);
  box-shadow: var(--shadow-btn);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.signup-prompt-cta:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.signup-prompt-cta:active {
  transform: translateY(0);
}

.signup-prompt-cta svg {
  transition: transform 0.15s ease;
}

.signup-prompt-cta:hover svg {
  transform: translateX(4px);
}

.signup-prompt-login {
  @apply block py-2 text-sm;
  color: var(--color-ink-muted);
}

.signup-prompt-login span {
  font-weight: 600;
  color: var(--color-primary);
}

.signup-prompt-login:hover {
  color: var(--color-ink-secondary);
}

.signup-prompt-login:hover span {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* ==========================================================================
   Credits Depleted Modal - Matching signup prompt aesthetic
   ========================================================================== */

.credits-depleted {
  @apply text-center;
}

.credits-depleted-hero {
  @apply mb-6;
}

.credits-depleted-icon {
  @apply w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark, #0d9488) 100%);
  color: white;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 8px 24px rgba(20, 184, 166, 0.25);
}

.credits-depleted-title {
  @apply text-xl font-semibold mb-2;
  font-family: var(--font-display);
  color: var(--color-ink);
}

.credits-depleted-subtitle {
  @apply text-sm leading-relaxed;
  color: var(--color-ink-secondary);
  max-width: 280px;
  margin: 0 auto;
}

/* Package options grid */
.credits-depleted-packages {
  @apply mb-6 p-4 rounded-xl;
  background: var(--color-subtle);
  border: 1px solid var(--color-border);
}

.credits-depleted-packages-label {
  @apply text-xs font-medium mb-3;
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.credits-depleted-packages-grid {
  @apply grid grid-cols-3 gap-2;
}

.credits-depleted-package {
  @apply relative flex flex-col items-center p-3 rounded-lg;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.credits-depleted-package:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
}

.credits-depleted-package-featured {
  border-color: var(--color-accent);
  border-width: 2px;
}

.credits-depleted-package-featured:hover {
  border-color: var(--color-accent);
}

.credits-depleted-package-badge {
  @apply absolute -top-2 left-1/2 -translate-x-1/2 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide rounded-full;
  background: var(--color-accent);
  color: white;
}

.credits-depleted-package-count {
  @apply text-xl font-bold;
  font-family: var(--font-display);
  color: var(--color-ink);
}

.credits-depleted-package-label {
  @apply text-[10px] uppercase tracking-wide mb-1;
  color: var(--color-ink-muted);
}

.credits-depleted-package-price {
  @apply text-sm font-semibold;
  color: var(--color-accent);
}

/* Actions */
.credits-depleted-actions {
  @apply space-y-3;
}

.credits-depleted-cta {
  @apply w-full py-3.5 px-5 flex items-center justify-center gap-3 text-sm font-semibold rounded-xl;
  background: var(--color-primary);
  color: var(--color-ink-inverse);
  box-shadow: var(--shadow-btn);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.credits-depleted-cta:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.credits-depleted-cta:active {
  transform: translateY(0);
}

.credits-depleted-cta svg {
  transition: transform 0.15s ease;
}

.credits-depleted-cta:hover svg {
  transform: translateX(4px);
}

.credits-depleted-secondary {
  @apply block py-2 text-sm;
  color: var(--color-ink-muted);
  transition: color 0.15s ease;
}

.credits-depleted-secondary:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   Transcript Page - Editorial conversation review
   ========================================================================== */

.transcript-page {
  min-height: 100vh;
  background: var(--color-base);
}

/* Header */
.transcript-header {
  background: var(--color-elevated);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.transcript-header-content {
  @apply max-w-4xl mx-auto px-4 py-4 flex items-center justify-between gap-4;
}

.transcript-header-info {
  @apply min-w-0;
}

.transcript-title {
  @apply text-xl font-semibold truncate;
  font-family: var(--font-display);
  color: var(--color-ink);
}

.transcript-meta {
  @apply flex items-center gap-2 mt-1 text-sm flex-wrap;
  color: var(--color-ink-muted);
}

.transcript-candidate {
  @apply font-medium;
  color: var(--color-ink-secondary);
}

.transcript-divider {
  @apply w-1 h-1 rounded-full;
  background: var(--color-border-strong);
}

.transcript-date {
  color: var(--color-ink-muted);
}

.transcript-time {
  @apply text-xs px-2 py-0.5 rounded-full;
  background: var(--color-subtle);
  color: var(--color-ink-muted);
}

.transcript-back-link {
  @apply flex items-center gap-1.5 text-sm font-medium shrink-0 px-3 py-2 rounded-lg;
  transition: background-color 0.15s ease;
  color: var(--color-primary);
}

.transcript-back-link:hover {
  background: var(--color-primary-light);
}

/* Main content */
.transcript-main {
  @apply max-w-4xl mx-auto px-4 py-8;
}

.transcript-container {
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Timeline */
.transcript-timeline {
  @apply py-6;
}

/* Individual message */
.transcript-message {
  @apply flex gap-4 px-6;
}

.transcript-message + .transcript-message {
  @apply mt-6;
}

/* Timeline connector */
.transcript-message-timeline {
  @apply flex flex-col items-center shrink-0;
  width: 32px;
}

.transcript-message-dot {
  @apply w-8 h-8 rounded-full flex items-center justify-center shrink-0;
  transition: all 0.2s ease;
}

.transcript-dot-interviewer {
  background: var(--color-subtle);
  color: var(--color-ink-muted);
  border: 2px solid var(--color-border);
}

.transcript-dot-user {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.transcript-message-line {
  @apply w-0.5 flex-1 mt-2;
  background: linear-gradient(to bottom, var(--color-border), transparent);
  min-height: 24px;
}

/* Message content */
.transcript-message-content {
  @apply flex-1 min-w-0 pb-2;
}

.transcript-message-header {
  @apply flex items-center gap-3 mb-2;
}

.transcript-message-role {
  @apply text-xs font-semibold uppercase tracking-wider;
}

.transcript-role-interviewer {
  color: var(--color-ink-muted);
}

.transcript-role-user {
  color: var(--color-primary);
}

.transcript-message-score {
  @apply text-xs font-bold px-2 py-0.5 rounded-full;
}

.transcript-score-excellent {
  background: var(--color-success-light);
  color: var(--color-success);
}

.transcript-score-good {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.transcript-score-fair {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.transcript-score-needs-work {
  background: var(--color-error-light);
  color: var(--color-error);
}

/* Message bubbles */
.transcript-bubble {
  @apply rounded-xl px-4 py-3;
  transition: all 0.2s ease;
}

.transcript-bubble-interviewer {
  background: var(--color-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card) var(--radius-card) var(--radius-card) 4px;
}

.transcript-bubble-user {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, rgba(196, 93, 53, 0.08) 100%);
  border: 1px solid rgba(196, 93, 53, 0.2);
  border-radius: var(--radius-card) var(--radius-card) 4px var(--radius-card);
}

.transcript-bubble-scored {
  border-left-width: 4px;
  border-left-style: solid;
}

.transcript-bubble-excellent {
  border-left-color: var(--color-success);
}

.transcript-bubble-good {
  border-left-color: var(--color-accent);
}

.transcript-bubble-fair {
  border-left-color: var(--color-warning);
}

.transcript-bubble-needs-work {
  border-left-color: var(--color-error);
}

.transcript-bubble-text {
  @apply text-[0.9375rem] leading-relaxed whitespace-pre-wrap;
  color: var(--color-ink);
}

/* Feedback annotations */
.transcript-feedback {
  @apply mt-3 space-y-2;
}

.transcript-feedback-item {
  @apply flex items-start gap-2 text-sm px-3 py-2 rounded-lg;
}

.transcript-feedback-good {
  background: var(--color-success-light);
  color: var(--color-success);
}

.transcript-feedback-suggestion {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

/* Summary footer */
.transcript-summary {
  @apply flex justify-center gap-8 py-6 mt-6;
  background: var(--color-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.transcript-summary-stat {
  @apply text-center;
}

.transcript-summary-value {
  @apply block text-2xl font-bold;
  font-family: var(--font-display);
  color: var(--color-ink);
}

.transcript-summary-label {
  @apply text-xs uppercase tracking-wider mt-1 block;
  color: var(--color-ink-muted);
}

.transcript-summary-score .transcript-summary-value {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Empty state */
.transcript-empty {
  @apply text-center py-16;
  color: var(--color-ink-muted);
}

.transcript-empty svg {
  @apply mx-auto mb-4;
  color: var(--color-border-strong);
}

.transcript-empty p {
  @apply text-sm;
}

/* Action buttons */
.transcript-actions {
  @apply flex justify-center gap-4 mt-8;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .transcript-header-content {
    @apply flex-col items-start gap-3;
  }

  .transcript-back-link {
    @apply w-full justify-center;
  }

  .transcript-message {
    @apply px-4 gap-3;
  }

  .transcript-message-timeline {
    width: 24px;
  }

  .transcript-message-dot {
    @apply w-6 h-6;
  }

  .transcript-message-dot svg {
    @apply w-2.5 h-2.5;
  }

  .transcript-summary {
    @apply flex-wrap gap-6 px-4;
  }

  .transcript-actions {
    @apply flex-col;
  }

  .transcript-actions .btn-secondary,
  .transcript-actions .btn-primary {
    @apply w-full justify-center;
  }
}

/* ========================================
   FEEDBACK COMPONENT STYLES
   Warm studio aesthetic with glowing stars
   ======================================== */

/* Star Rating - Vintage indicator light feel */
.star-rating {
  @apply flex items-center;
}

.star-rating-star {
  @apply relative text-border-strong transition-all duration-200 ease-out;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.star-rating-star:not(:disabled):hover {
  transform: scale(1.15);
}

.star-rating-star:not(:disabled):active {
  transform: scale(0.95);
}

.star-rating-star-active {
  color: #d4a00a;
  filter: drop-shadow(0 0 8px rgba(212, 160, 10, 0.5));
}

.dark .star-rating-star-active {
  color: #e0a82e;
  filter: drop-shadow(0 0 10px rgba(224, 168, 46, 0.6));
}

.star-rating-readonly .star-rating-star {
  @apply cursor-default;
}

/* Feedback Form */
.feedback-form {
  @apply space-y-5;
}

.feedback-form-inline {
  @apply p-6 bg-elevated border border-border;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-warm-sm);
}

.feedback-rating-section {
  @apply space-y-3 mb-3;
}

.feedback-field {
  @apply space-y-2;
}

.feedback-label {
  @apply block text-sm font-semibold text-ink;
}

.feedback-label-optional {
  @apply font-normal text-ink-muted;
}

.feedback-textarea {
  @apply w-full py-3 px-4 bg-input border border-border text-ink text-sm resize-none;
  border-radius: var(--radius-input);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 88px;
}

.feedback-textarea:focus {
  @apply outline-none border-primary;
  box-shadow: 0 0 0 3px rgba(196, 93, 53, 0.1);
}

.feedback-textarea::placeholder {
  @apply text-ink-muted;
}

.feedback-actions {
  @apply pt-1;
}

.feedback-submit {
  @apply w-full sm:w-auto;
}

/* Feedback Loading State */
.feedback-loading {
  @apply flex-col items-center justify-center py-10 gap-4;
  display: none;
}

.feedback-loading:not(.hidden) {
  display: flex;
}

.feedback-loading-spinner {
  @apply w-8 h-8 text-primary;
}

.feedback-loading-spinner svg {
  @apply w-full h-full;
}

.feedback-loading-text {
  @apply text-sm text-ink-muted;
}

/* Feedback Success State */
.feedback-success {
  @apply flex-col items-center justify-center py-10 text-center;
  display: none;
  animation: var(--animate-fade-in);
}

.feedback-success:not(.hidden) {
  display: flex;
}

.feedback-success-icon {
  @apply w-16 h-16 rounded-full flex items-center justify-center mb-4;
  background: var(--color-success-light);
  color: var(--color-success);
}

.feedback-success-icon svg {
  @apply w-8 h-8;
}

.feedback-success-title {
  @apply text-lg font-display font-semibold text-ink mb-1;
}

.feedback-success-message {
  @apply text-sm text-ink-muted;
}

/* Feedback Card (for results page inline form) */
.feedback-card {
  @apply relative overflow-hidden;
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-warm-sm);
  animation: var(--animate-fade-in);
  animation-delay: 400ms;
}

.feedback-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  opacity: 0.8;
}

.feedback-card-header {
  @apply flex items-start gap-4 mb-5;
}

.feedback-card-icon {
  @apply w-11 h-11 rounded-full flex items-center justify-center flex-shrink-0;
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.feedback-card-icon svg {
  @apply w-5 h-5;
}

.feedback-card-title {
  @apply font-display text-lg font-semibold text-ink leading-tight;
}

.feedback-card-subtitle {
  @apply text-sm text-ink-muted mt-0.5;
}

/* Feedback Card - Submitted State */
.feedback-card-submitted {
  @apply flex items-center gap-4;
}

.feedback-card-submitted-icon {
  @apply w-11 h-11 rounded-full flex items-center justify-center flex-shrink-0;
  background: var(--color-success-light);
  color: var(--color-success);
}

.feedback-card-submitted-icon svg {
  @apply w-5 h-5;
}

/* Feedback Modal */
.feedback-modal-icon {
  @apply w-9 h-9 rounded-full flex items-center justify-center;
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.feedback-modal-intro {
  @apply text-ink-secondary mb-6 leading-relaxed;
}

/* Site Footer */
.site-footer {
  @apply mt-auto py-6 px-4 border-t;
  border-color: var(--color-border);
  background: var(--color-base);
}

.site-footer-inner {
  @apply max-w-4xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4;
}

.site-footer-copyright {
  @apply text-sm text-ink-muted;
}

.site-footer-feedback {
  @apply inline-flex items-center gap-2 text-sm text-ink-muted transition-colors duration-200;
}

.site-footer-feedback:hover {
  @apply text-ink;
}

.site-footer-feedback svg {
  @apply transition-transform duration-200;
}

.site-footer-feedback:hover svg {
  transform: scale(1.1);
}

.site-footer-links {
  @apply flex flex-wrap items-center gap-4;
}

.site-footer-link {
  @apply inline-flex items-center gap-2 text-sm text-ink-muted transition-colors duration-200;
}

.site-footer-link:hover {
  @apply text-ink;
}

.site-footer-link svg {
  @apply transition-transform duration-200;
}

.site-footer-link:hover svg {
  transform: scale(1.1);
}

/* ========================================
   TUTORIAL CAROUSEL
   How it works walkthrough modal
   ======================================== */

/* Tutorial modal container */
.tutorial-modal {
  @apply relative overflow-hidden;
}

.tutorial-modal .modal-content {
  @apply max-h-[90vh];
  background: linear-gradient(
    180deg,
    var(--color-elevated) 0%,
    var(--color-subtle) 100%
  );
}

/* Header with gradient accent */
.tutorial-header {
  @apply relative px-6 pt-6 pb-4 text-center;
}

.tutorial-header::before {
  content: '';
  @apply absolute top-0 left-0 right-0 h-1;
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-accent) 50%,
    var(--color-primary) 100%
  );
}

.tutorial-badge {
  @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-semibold uppercase tracking-wider mb-3;
  background: var(--color-primary-light);
  color: var(--color-primary);
  letter-spacing: 0.05em;
}

.tutorial-title {
  @apply text-2xl font-semibold mb-1;
  font-family: var(--font-display);
  color: var(--color-ink);
}

.tutorial-subtitle {
  @apply text-sm;
  color: var(--color-ink-muted);
}

/* Close button */
.tutorial-close {
  @apply absolute top-4 right-4 w-8 h-8 rounded-lg flex items-center justify-center transition-all duration-200;
  color: var(--color-ink-muted);
  background: transparent;
}

.tutorial-close:hover {
  background: var(--color-elevated);
  color: var(--color-ink);
  transform: rotate(90deg);
}

/* Carousel container */
.tutorial-carousel {
  @apply relative overflow-hidden;
  min-height: 340px;
}

/* Individual slides */
.tutorial-slide {
  @apply absolute inset-0 flex flex-col items-center justify-center px-6 py-4;
  opacity: 0;
  visibility: hidden;
  transform: translateX(60px);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.tutorial-slide-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.tutorial-slide-prev {
  transform: translateX(-60px);
}

.tutorial-slide-next {
  transform: translateX(60px);
}

/* Slide content wrapper */
.tutorial-slide-content {
  @apply flex flex-col items-center text-center max-w-sm;
}

/* Step illustration container */
.tutorial-illustration {
  @apply relative w-48 h-48 mb-6 flex items-center justify-center;
}

/* Animated background shapes */
.tutorial-illustration::before {
  content: '';
  @apply absolute inset-0 rounded-full;
  background: radial-gradient(
    circle at center,
    var(--color-primary-light) 0%,
    transparent 70%
  );
  animation: tutorial-pulse 3s ease-in-out infinite;
}

@keyframes tutorial-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.3;
  }
}

/* Illustration icons */
.tutorial-icon-wrapper {
  @apply relative z-10 w-24 h-24 rounded-2xl flex items-center justify-center;
  background: linear-gradient(
    135deg,
    var(--color-elevated) 0%,
    var(--color-subtle) 100%
  );
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow-warm-lg);
}

.tutorial-icon-wrapper svg {
  @apply w-12 h-12;
  color: var(--color-primary);
}

/* Floating accent elements */
.tutorial-floating-accent {
  @apply absolute w-3 h-3 rounded-full;
  background: var(--color-accent);
  animation: tutorial-float 4s ease-in-out infinite;
}

.tutorial-floating-accent:nth-child(1) {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.tutorial-floating-accent:nth-child(2) {
  top: 60%;
  right: 15%;
  animation-delay: 1s;
  background: var(--color-primary);
}

.tutorial-floating-accent:nth-child(3) {
  bottom: 25%;
  left: 20%;
  animation-delay: 2s;
  width: 0.5rem;
  height: 0.5rem;
}

@keyframes tutorial-float {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-8px) scale(1.1);
    opacity: 1;
  }
}

/* Step number badge */
.tutorial-step-badge {
  @apply absolute -top-1 -right-1 w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold z-20;
  background: var(--color-primary);
  color: var(--color-ink-inverse);
  box-shadow: var(--shadow-btn);
}

/* Slide text content */
.tutorial-step-title {
  @apply text-lg font-semibold mb-2;
  font-family: var(--font-display);
  color: var(--color-ink);
  animation: tutorial-text-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 0.1s;
}

.tutorial-step-description {
  @apply text-sm leading-relaxed;
  color: var(--color-ink-secondary);
  animation: tutorial-text-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 0.2s;
}

@keyframes tutorial-text-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Footer with navigation */
.tutorial-footer {
  @apply flex items-center justify-between gap-4 px-6 py-4;
  background: var(--color-subtle);
  border-top: 1px solid var(--color-border);
}

/* Step indicators */
.tutorial-indicators {
  @apply flex items-center gap-2;
}

.tutorial-indicator {
  @apply w-2 h-2 rounded-full cursor-pointer transition-all duration-300;
  background: var(--color-border-strong);
}

.tutorial-indicator:hover {
  background: var(--color-ink-muted);
  transform: scale(1.2);
}

.tutorial-indicator-visited {
  background: var(--color-accent);
}

.tutorial-indicator-active {
  @apply w-6;
  background: var(--color-primary);
  border-radius: 4px;
}

/* Navigation buttons */
.tutorial-nav {
  @apply flex items-center gap-2;
}

.tutorial-nav-btn {
  @apply w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-200;
  background: var(--color-elevated);
  border: 1.5px solid var(--color-border);
  color: var(--color-ink-secondary);
}

.tutorial-nav-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateX(2px);
}

.tutorial-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tutorial-nav-btn.prev:hover:not(:disabled) {
  transform: translateX(-2px);
}

.tutorial-nav-btn svg {
  @apply w-5 h-5;
}

/* Start button (shown on last slide) */
.tutorial-start-btn {
  @apply inline-flex items-center gap-2 px-5 py-2.5 rounded-xl font-semibold text-sm transition-all duration-200;
  background: var(--color-primary);
  color: var(--color-ink-inverse);
  box-shadow: var(--shadow-btn);
}

.tutorial-start-btn:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-1px);
}

.tutorial-start-btn svg {
  @apply w-4 h-4;
}

/* Counter text */
.tutorial-counter {
  @apply text-xs font-medium tabular-nums;
  color: var(--color-ink-muted);
}

/* How it works button (homepage trigger) */
.how-it-works-btn {
  @apply inline-flex items-center gap-2 text-sm font-medium transition-all duration-200;
  color: var(--color-ink-muted);
}

.how-it-works-btn:hover {
  color: var(--color-primary);
}

.how-it-works-btn svg {
  @apply w-4 h-4 transition-transform duration-200;
}

.how-it-works-btn:hover svg {
  transform: scale(1.1);
}

/* Highlight ring animation for specific steps */
.tutorial-highlight-ring {
  @apply absolute inset-0 rounded-2xl pointer-events-none;
  border: 2px solid var(--color-primary);
  opacity: 0;
  animation: tutorial-highlight 2s ease-in-out infinite;
}

@keyframes tutorial-highlight {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.05);
  }
}

/* Keyboard shortcut hint */
.tutorial-keyboard-hint {
  @apply hidden sm:flex items-center gap-1 text-xs;
  color: var(--color-ink-muted);
}

.tutorial-kbd {
  @apply inline-flex items-center justify-center w-5 h-5 rounded text-xs font-medium;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-ink-secondary);
  font-family: var(--font-body);
}

/* Special illustrations for each step type */
.tutorial-illustration-job-posting .tutorial-icon-wrapper {
  border-color: var(--color-primary);
}

.tutorial-illustration-name .tutorial-icon-wrapper {
  border-color: var(--color-accent);
}

.tutorial-illustration-name .tutorial-icon-wrapper svg {
  color: var(--color-accent);
}

.tutorial-illustration-start .tutorial-icon-wrapper {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  border-color: var(--color-primary);
}

.tutorial-illustration-start .tutorial-icon-wrapper svg {
  color: var(--color-ink-inverse);
}

.tutorial-illustration-speak .tutorial-icon-wrapper::after {
  content: '';
  @apply absolute -inset-2 rounded-2xl;
  border: 2px dashed var(--color-primary);
  opacity: 0.3;
  animation: tutorial-speak-pulse 1.5s ease-in-out infinite;
}

@keyframes tutorial-speak-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.1;
  }
}

.tutorial-illustration-ai .tutorial-icon-wrapper {
  border-color: var(--color-accent);
}

.tutorial-illustration-ai .tutorial-icon-wrapper svg {
  color: var(--color-accent);
}

.tutorial-illustration-review .tutorial-icon-wrapper {
  border-color: var(--color-success);
}

.tutorial-illustration-review .tutorial-icon-wrapper svg {
  color: var(--color-success);
}

/* ========================================
   TUTORIAL MODAL V2
   Side-by-side layout with generous text space
   ======================================== */

.tutorial-modal-v2 {
  @apply relative flex flex-col;
  background: linear-gradient(
    180deg,
    var(--color-base) 0%,
    var(--color-subtle) 100%
  );
  min-height: 100%;
}

/* Close button */
.tutorial-close-btn {
  @apply absolute top-6 right-6 z-20 w-10 h-10 rounded-full flex items-center justify-center transition-all duration-200;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-ink-muted);
}

.tutorial-close-btn:hover {
  background: var(--color-subtle);
  color: var(--color-ink);
  transform: rotate(90deg);
}

/* Inner container */
.tutorial-inner {
  @apply flex flex-col flex-1 max-w-6xl mx-auto w-full px-8 py-10;
}

/* Carousel */
.tutorial-carousel-v2 {
  @apply relative flex-1 flex items-center justify-center;
  min-height: 450px;
}

/* Slides */
.tutorial-modal-v2 .tutorial-slide {
  @apply absolute inset-0 flex items-center justify-center px-4;
  opacity: 0;
  visibility: hidden;
  transform: translateX(50px);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.tutorial-modal-v2 .tutorial-slide-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.tutorial-modal-v2 .tutorial-slide-prev {
  transform: translateX(-50px);
}

/* Row layout - side by side */
.tutorial-row {
  @apply flex flex-col lg:flex-row items-center gap-10 w-full max-w-5xl;
}

/* Image column */
.tutorial-image-col {
  @apply relative flex-shrink-0;
}

/* Step number badge */
.tutorial-step-num {
  @apply absolute -top-4 -left-4 z-10 w-12 h-12 rounded-full flex items-center justify-center text-lg font-bold;
  background: var(--color-primary);
  color: var(--color-ink-inverse);
  box-shadow: var(--shadow-btn);
  font-family: var(--font-display);
}

/* Screenshot image */
.tutorial-img {
  @apply rounded-2xl;
  width: 620px;
  max-width: 100%;
  max-height: 400px;
  object-fit: cover;
  object-position: center;
  border: 3px solid var(--color-border);
  box-shadow: var(--shadow-warm-lg);
}

.tutorial-slide-active .tutorial-img {
  animation: img-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes img-enter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Text column */
.tutorial-text-col {
  @apply flex-1 text-center lg:text-left;
  min-width: 280px;
}

.tutorial-heading {
  @apply text-3xl font-semibold mb-4;
  font-family: var(--font-display);
  color: var(--color-ink);
}

.tutorial-slide-active .tutorial-heading {
  animation: text-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 0.15s;
}

.tutorial-desc {
  @apply text-lg leading-relaxed;
  color: var(--color-ink-secondary);
}

.tutorial-slide-active .tutorial-desc {
  animation: text-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 0.25s;
}

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

/* Footer */
.tutorial-footer-v2 {
  @apply flex items-center justify-between pt-8 mt-auto;
  border-top: 1px solid var(--color-border);
}

.tutorial-footer-left {
  @apply flex items-center gap-4;
}

.tutorial-footer-right {
  @apply flex items-center gap-3;
}

/* Dots */
.tutorial-dots {
  @apply hidden lg:flex items-center gap-2;
}

.tutorial-dot {
  @apply w-2.5 h-2.5 rounded-full transition-all duration-300 cursor-pointer;
  background: var(--color-border-strong);
}

.tutorial-dot:hover {
  background: var(--color-ink-muted);
  transform: scale(1.2);
}

.tutorial-dot-active,
.tutorial-modal-v2 .tutorial-indicator-active {
  @apply w-8;
  background: var(--color-primary);
  border-radius: 999px;
}

.tutorial-modal-v2 .tutorial-indicator-visited {
  background: var(--color-accent);
}

/* Counter - hidden on mobile */
.tutorial-counter-text {
  @apply text-sm font-medium tabular-nums block;
  color: var(--color-ink-muted);
}

/* Arrow buttons */
.tutorial-arrow-btn {
  @apply w-11 h-11 rounded-xl flex items-center justify-center transition-all duration-200;
  background: var(--color-elevated);
  border: 1.5px solid var(--color-border);
  color: var(--color-ink-secondary);
}

.tutorial-arrow-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateX(2px);
}

.tutorial-arrow-btn:first-child:hover {
  transform: translateX(-2px);
}

/* Done button */
.tutorial-modal-v2 .tutorial-done-btn {
  @apply inline-flex items-center gap-2 px-6 py-3 rounded-xl font-semibold text-sm transition-all duration-200;
  background: var(--color-primary);
  color: var(--color-ink-inverse);
  box-shadow: var(--shadow-btn);
}

.tutorial-modal-v2 .tutorial-done-btn:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
}

/* Responsive - stack on smaller screens */
@media (max-width: 1023px) {
  .tutorial-inner {
    @apply px-6 py-8;
  }

  .tutorial-row {
    @apply flex-col gap-6;
  }

  .tutorial-img {
    width: 100%;
    max-width: 400px;
    max-height: 300px;
  }

  .tutorial-step-num {
    @apply w-10 h-10 text-base -top-3 -left-3;
  }

  .tutorial-text-col {
    @apply text-center;
  }

  .tutorial-heading {
    @apply text-2xl mb-3;
  }

  .tutorial-desc {
    @apply text-base;
  }

  .tutorial-carousel-v2 {
    min-height: 520px;
  }
}

@media (max-width: 640px) {
  .tutorial-inner {
    @apply px-4 py-6;
  }

  .tutorial-img {
    max-width: 320px;
    max-height: 240px;
  }

  .tutorial-step-num {
    @apply w-9 h-9 text-sm -top-2 -left-2;
  }

  .tutorial-heading {
    @apply text-xl;
  }

  .tutorial-desc {
    @apply text-sm;
  }

  .tutorial-carousel-v2 {
    min-height: 480px;
  }

  .tutorial-close-btn {
    @apply top-4 right-4;
  }
}