/**
 * ============================================
 * BRAINDUMP V2.00 - DASHBOARD CSS
 * ============================================
 *
 * @version     2.0.0
 * @date        2026-01-06
 *
 * CHANGELOG:
 * v2.0.0 (2026-01-06):
 *   - V9.0 mymind-style Design Overhaul
 *   - HIDDEN all confidence badges for cleaner UI
 *   - Removed all card borders, using subtle shadows only
 *   - Removed card header borders for more whitespace
 *   - Clean, minimal aesthetic inspired by mymind.com
 *
 * v1.2.0 (2026-01-05):
 *   - V8.0 Design Overhaul: Unified warm orange accent (#F97316)
 *   - Professional confidence badges (underline/dot style)
 *   - Removed emoji-based confidence indicators
 *   - All primary buttons now use --v3-accent color
 *
 * v1.1.0 (2026-01-05):
 *   - Added Smart Stack integration styles
 *   - V2 EntityCards in .ss-item--v2
 *   - Confidence badges, entity lists
 *
 * Components:
 * - Status Bar
 * - Entity Card
 * - Action Buttons
 * - Celebration Screen
 * - Onboarding Modal
 * - Smart Stack Integration
 *
 * Design Reference:
 * - docs/20260105_mvp_version_2.00_BrainDump_UX_Guide.md
 *
 * ============================================
 */

/* ============================================
   CSS VARIABLES (V2.00 Design System)
   V3.0 Update: Theme-aware variables
   ============================================ */
:root {
  /* === V2 Colors (mymind-inspired) === */
  --v2-primary: #208C8D;
  --v2-primary-hover: #1a7374;
  --v2-text-dark: #134252;
  --v2-text-light: #627C7C;
  --v2-background: #FCFCF9;
  --v2-surface: #FFFFFF;
  --v2-success: #22C55E;
  --v2-error: #EF4444;
  --v2-warning: #F59E0B;

  --v2-confidence-high: #22C55E;
  --v2-confidence-medium: #F59E0B;
  --v2-confidence-low: #EF4444;

  /* === Shadows (subtle for light theme) === */
  --v2-shadow-subtle: 0 1px 3px rgba(0,0,0,0.06);
  --v2-shadow-small: 0 4px 8px rgba(0,0,0,0.06);
  --v2-shadow-medium: 0 8px 16px rgba(0,0,0,0.08);

  --v2-radius-sm: 6px;
  --v2-radius-md: 8px;
  --v2-radius-lg: 12px;

  --v2-transition-fast: 150ms;
  --v2-transition-normal: 250ms;
}

/* === Theme Override for material-android (Light) === */
[data-theme="material-android"] {
  --v2-primary: #1a73e8;
  --v2-primary-hover: #1557b0;
  --v2-text-dark: #202124;
  --v2-text-light: #5f6368;
  --v2-background: #f8f9fa;
  --v2-surface: #ffffff;
}

/* ============================================
   STATUS BAR
   ============================================ */
.v2-status-bar {
  background: var(--v2-surface);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--v2-radius-lg);
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: var(--v2-shadow-subtle);
}

.v2-status-bar__stats {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--v2-text-light);
}

.v2-status-bar__stats strong {
  color: var(--v2-text-dark);
  font-weight: 600;
}

.v2-status-bar__divider {
  opacity: 0.3;
}

.v2-status-bar__progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.v2-status-bar__progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  overflow: hidden;
}

/* V8.0: Progress bar uses warm orange accent */
.v2-status-bar__progress-fill {
  height: 100%;
  background: var(--v3-accent, #F97316);
  border-radius: 4px;
  transition: width var(--v2-transition-fast) ease;
}

.v2-status-bar__progress-text {
  font-size: 13px;
  color: var(--v2-text-light);
  white-space: nowrap;
}

/* ============================================
   ENTITY CARD
   ============================================ */
/* V9.0: mymind-style entity cards - no borders, clean shadows */
.v2-entity-card {
  background: var(--v2-surface, #ffffff);
  border: none;
  border-radius: var(--v2-radius-lg, 12px);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.04);
  transition: transform var(--v2-transition-normal) ease,
              box-shadow var(--v2-transition-fast) ease;
}

.v2-entity-card:hover {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.06);
}

/* V9.0: Card Header - no border, more whitespace */
.v2-entity-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: none;
}

.v2-entity-card__number {
  font-size: 18px;
}

.v2-entity-card__title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--v2-text-dark);
}

/* V9.0: mymind-style - HIDE confidence badges completely for cleaner UI */
.v2-entity-card__confidence {
  display: none;
}

.v2-entity-card__confidence.high,
.v2-entity-card__confidence.medium,
.v2-entity-card__confidence.low {
  display: none;
}

/* Entities List */
.v2-entity-card__entities {
  margin-bottom: 16px;
}

.v2-entity-card__entity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.v2-entity-card__entity:last-child {
  border-bottom: none;
}

.v2-entity-card__entity-type {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--v2-text-light);
  min-width: 80px;
}

.v2-entity-card__entity-name {
  flex: 1;
  font-size: 15px;
  color: var(--v2-text-dark);
  font-weight: 500;
}

/* V9.0: mymind-style - HIDE entity confidence for cleaner UI */
.v2-entity-card__entity-confidence {
  display: none;
}

.v2-entity-card__entity-confidence.high,
.v2-entity-card__entity-confidence.medium,
.v2-entity-card__entity-confidence.low {
  display: none;
}

.v2-entity-card__no-entities {
  color: var(--v2-text-light);
  font-style: italic;
  font-size: 14px;
  padding: 12px 0;
}

/* Suggestions */
.v2-entity-card__suggestions {
  margin-bottom: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.v2-entity-card__suggestions-label {
  font-size: 12px;
  color: var(--v2-text-light);
  margin-right: 12px;
}

.v2-entity-card__suggestions-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.v2-suggestion-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(0,0,0,0.04);
  border: none;
  border-radius: var(--v2-radius-sm);
  color: var(--v2-text-dark);
  cursor: pointer;
  transition: all var(--v2-transition-fast);
}

/* V8.0: Suggestion button uses warm orange accent */
.v2-suggestion-btn:hover {
  background: var(--v3-accent, #F97316);
  color: white;
}

/* ============================================
   ACTION BUTTONS (CRITICAL FIX V3.0)
   ============================================ */
.v2-action-buttons {
  display: flex;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
  position: relative;
  z-index: 10;
}

.v2-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: var(--v2-radius-md);
  cursor: pointer;
  transition: all var(--v2-transition-fast);
  /* CRITICAL: Ensure buttons are clickable */
  position: relative;
  z-index: 11;
  min-height: 44px; /* WCAG touch target */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* V8.0: Accept button uses warm orange accent */
.v2-action-btn--accept {
  background: var(--v3-accent, #F97316);
  color: white;
}

.v2-action-btn--accept:hover {
  background: var(--v3-accent-hover, #EA580C);
  transform: translateY(-1px);
}

.v2-action-btn--review {
  background: rgba(0,0,0,0.06);
  color: var(--v2-text-dark);
}

.v2-action-btn--review:hover {
  background: rgba(0,0,0,0.1);
}

.v2-action-btn--skip {
  background: transparent;
  color: var(--v2-text-light);
  border: 1px solid rgba(0,0,0,0.1);
}

.v2-action-btn--skip:hover {
  background: rgba(0,0,0,0.03);
  color: var(--v2-text-dark);
}

/* Active states for immediate feedback */
.v2-action-btn:active {
  transform: scale(0.96);
  opacity: 0.9;
}

.v2-action-btn--accept:active {
  background: var(--v3-accent-hover, #EA580C);
}

.v2-action-btn--review:active {
  background: rgba(0,0,0,0.15);
}

.v2-action-btn--skip:active {
  background: rgba(0,0,0,0.08);
}

/* ============================================
   CELEBRATION SCREEN
   ============================================ */
.v2-celebration {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px 20px;
}

.v2-celebration__content {
  text-align: center;
  max-width: 500px;
}

.v2-celebration__emoji {
  font-size: 64px;
  margin-bottom: 16px;
  animation: v2-bounce 0.5s ease;
}

@keyframes v2-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.v2-celebration__title {
  font-size: 32px;
  font-weight: 700;
  color: var(--v2-text-dark);
  margin-bottom: 8px;
}

.v2-celebration__subtitle {
  font-size: 18px;
  color: var(--v2-text-light);
  margin-bottom: 32px;
}

.v2-celebration__stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 32px;
}

.v2-celebration__stat {
  text-align: center;
}

/* V8.0: Celebration stats use warm orange accent */
.v2-celebration__stat-value {
  display: block;
  font-size: 36px;
  font-weight: 700;
  color: var(--v3-accent, #F97316);
}

.v2-celebration__stat-label {
  font-size: 13px;
  color: var(--v2-text-light);
}

.v2-celebration__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.v2-celebration__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: var(--v2-radius-md);
  cursor: pointer;
  transition: all var(--v2-transition-fast);
  min-width: 250px;
}

.v2-celebration__btn--primary {
  background: var(--v3-accent, #F97316);
  color: white;
}

.v2-celebration__btn--primary:hover {
  background: var(--v3-accent-hover, #EA580C);
  transform: translateY(-2px);
}

.v2-celebration__btn--secondary {
  background: transparent;
  color: var(--v2-text-dark);
  border: 1px solid rgba(0,0,0,0.15);
}

.v2-celebration__btn--secondary:hover {
  background: rgba(0,0,0,0.03);
}

/* ============================================
   ONBOARDING MODAL
   ============================================ */
.v2-onboarding {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
}

.v2-onboarding.visible {
  opacity: 1;
  visibility: visible;
}

.v2-onboarding__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.v2-onboarding__modal {
  position: relative;
  background: var(--v2-surface);
  border-radius: var(--v2-radius-lg);
  padding: 40px;
  max-width: 400px;
  width: 90%;
  box-shadow: var(--v2-shadow-medium);
  animation: v2-modal-appear 0.3s ease;
}

@keyframes v2-modal-appear {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.v2-onboarding__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--v2-text-light);
  cursor: pointer;
  border-radius: 50%;
  transition: all var(--v2-transition-fast);
}

.v2-onboarding__close:hover {
  background: rgba(0,0,0,0.05);
  color: var(--v2-text-dark);
}

.v2-onboarding__content {
  text-align: center;
}

.v2-onboarding__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--v2-text-dark);
  margin-bottom: 16px;
}

.v2-onboarding__text {
  font-size: 16px;
  color: var(--v2-text-light);
  margin-bottom: 8px;
  line-height: 1.5;
}

.v2-onboarding__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.v2-onboarding__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: var(--v2-radius-md);
  cursor: pointer;
  transition: all var(--v2-transition-fast);
}

.v2-onboarding__btn--primary {
  background: var(--v3-accent, #F97316);
  color: white;
}

.v2-onboarding__btn--primary:hover {
  background: var(--v3-accent-hover, #EA580C);
}

.v2-onboarding__btn--secondary {
  background: transparent;
  color: var(--v2-text-light);
}

.v2-onboarding__btn--secondary:hover {
  color: var(--v2-text-dark);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
  .v2-status-bar__stats {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }

  .v2-status-bar__divider {
    display: none;
  }

  .v2-entity-card {
    padding: 16px;
  }

  .v2-entity-card__header {
    flex-wrap: wrap;
  }

  .v2-action-buttons {
    flex-direction: column;
  }

  .v2-celebration__stats {
    flex-direction: column;
    gap: 20px;
  }

  .v2-onboarding__modal {
    padding: 24px;
  }
}

/* ============================================
   DARK THEME SUPPORT
   ============================================ */
[data-theme="warm-vault"] .v2-status-bar,
[data-theme="warm-vault"] .v2-entity-card,
[data-theme="warm-vault"] .v2-onboarding__modal {
  background: var(--surface-primary, #1a1a1a);
  border-color: rgba(255,255,255,0.1);
}

[data-theme="warm-vault"] .v2-status-bar__stats,
[data-theme="warm-vault"] .v2-entity-card__entity-type,
[data-theme="warm-vault"] .v2-text-light {
  color: rgba(255,255,255,0.6);
}

[data-theme="warm-vault"] .v2-entity-card__title,
[data-theme="warm-vault"] .v2-entity-card__entity-name,
[data-theme="warm-vault"] .v2-celebration__title {
  color: rgba(255,255,255,0.95);
}

/* ============================================
   SMART STACK INTEGRATION (V2.00)
   ============================================ */

/* StatusBar Wrapper in Smart Stack */
.v2-status-bar-wrapper {
  margin-bottom: 20px;
}

/* V2 Entity Card Style in Smart Stack */
.ss-item--v2 {
  background: var(--v2-surface);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--v2-radius-lg);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--v2-shadow-subtle);
  transition: transform 250ms ease, opacity 250ms ease, box-shadow 150ms ease;
}

.ss-item--v2:hover {
  box-shadow: var(--v2-shadow-small);
}

/* V2 Card Header */
.ss-item--v2 .v2-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.ss-item--v2 .ss-item__type-icon {
  font-size: 16px;
}

.ss-item--v2 .ss-item__title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--v2-text-dark);
  margin: 0;
}

/* V9.0: mymind-style - HIDE confidence badges for cleaner UI */
.v2-confidence-badge {
  display: none;
}

.v2-confidence--high,
.v2-confidence--medium,
.v2-confidence--low {
  display: none;
}

/* Entity List */
.v2-entity-list {
  margin-bottom: 12px;
}

.v2-entity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

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

.v2-entity-item__type {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--v2-text-light);
  min-width: 70px;
}

.v2-entity-item__name {
  flex: 1;
  font-size: 14px;
  color: var(--v2-text-dark);
  font-weight: 500;
}

/* V9.0: mymind-style - HIDE entity item confidence */
.v2-entity-item__confidence {
  display: none;
}

.v2-entity-item__confidence.high,
.v2-entity-item__confidence.medium,
.v2-entity-item__confidence.low {
  display: none;
}

.v2-entity-more {
  font-size: 12px;
  color: var(--v2-text-light);
  padding: 8px 0;
  font-style: italic;
}

/* Entity Summary (MVP fallback when no extraction_results) */
/* V8.0: Entity summary uses warm orange accent */
.v2-entity-summary {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.02);
  border-radius: var(--v2-radius-sm);
  border-left: 3px solid var(--v3-accent, #F97316);
}

.v2-entity-summary__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--v2-text-dark);
}

/* V2 Meta in Smart Stack */
.ss-item--v2 .v2-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.ss-item--v2 .ss-item__time {
  font-size: 12px;
  color: var(--v2-text-light);
}

.ss-item--v2 .v2-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ss-item--v2 .ss-item__tag {
  font-size: 11px;
  padding: 2px 6px;
  background: rgba(0,0,0,0.04);
  border-radius: 4px;
  color: var(--v2-text-light);
}

/* V2 Action Buttons in Smart Stack (CRITICAL FIX V3.0) */
.ss-item--v2 .v2-action-buttons {
  display: flex;
  gap: 10px;
  padding-top: 12px;
  border-top: none;
  position: relative;
  z-index: 20;
}

.ss-item--v2 .v2-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: var(--v2-radius-sm);
  cursor: pointer;
  transition: all var(--v2-transition-fast);
  /* CRITICAL: Ensure buttons are clickable */
  position: relative;
  z-index: 21;
  min-height: 44px; /* WCAG touch target */
  -webkit-tap-highlight-color: transparent;
}

/* Responsive for Smart Stack V2 */
@media (max-width: 640px) {
  .ss-item--v2 .v2-action-buttons {
    flex-wrap: wrap;
  }

  .ss-item--v2 .v2-action-btn {
    flex-basis: calc(50% - 5px);
  }

  .ss-item--v2 .v2-action-btn--skip {
    flex-basis: 100%;
  }
}

/* Dark Theme for Smart Stack V2 */
[data-theme="warm-vault"] .ss-item--v2 {
  background: var(--surface-primary, #1a1a1a);
  border-color: rgba(255,255,255,0.08);
}

[data-theme="warm-vault"] .ss-item--v2 .ss-item__title,
[data-theme="warm-vault"] .v2-entity-item__name {
  color: rgba(255,255,255,0.95);
}

[data-theme="warm-vault"] .v2-entity-item__type,
[data-theme="warm-vault"] .ss-item--v2 .ss-item__time {
  color: rgba(255,255,255,0.5);
}

/* ============================================
   ERROR CARD (UX Guide Section 5)
   ============================================ */
.v2-error-card {
  background: #fff8f8;
  border: 1px solid rgba(192, 21, 47, 0.2);
  border-left: 4px solid var(--v2-error, #C0152F);
  border-radius: var(--v2-radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.v2-error-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.v2-error-card__icon {
  font-size: 24px;
}

.v2-error-card__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--v2-error, #C0152F);
  margin: 0;
}

.v2-error-card__message {
  font-size: 15px;
  color: var(--v2-text-dark);
  margin: 0 0 16px 0;
}

.v2-error-card__steps {
  margin-bottom: 16px;
}

.v2-error-card__steps-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-text-light);
  margin: 0 0 8px 0;
}

.v2-error-card__step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.v2-error-card__step:last-child {
  border-bottom: none;
}

.v2-error-card__step-icon {
  width: 20px;
  text-align: center;
  font-size: 14px;
}

.v2-error-card__step.success .v2-error-card__step-icon {
  color: var(--v2-success);
}

.v2-error-card__step.error .v2-error-card__step-icon {
  color: var(--v2-error);
}

.v2-error-card__step-text {
  flex: 1;
  font-size: 14px;
  color: var(--v2-text-dark);
}

.v2-error-card__step-detail {
  font-size: 12px;
  color: var(--v2-text-light);
}

.v2-error-card__suggestions {
  margin-bottom: 16px;
}

.v2-error-card__suggestions-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-text-light);
  margin: 0 0 8px 0;
}

.v2-error-card__suggestions-list {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  color: var(--v2-text-dark);
}

.v2-error-card__suggestions-list li {
  margin-bottom: 4px;
}

.v2-error-card__trace {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(0,0,0,0.03);
  border-radius: var(--v2-radius-sm);
  margin-bottom: 16px;
}

.v2-error-card__trace-label {
  font-size: 12px;
  color: var(--v2-text-light);
}

.v2-error-card__trace-id {
  font-family: monospace;
  font-size: 12px;
  color: var(--v2-text-dark);
  background: rgba(0,0,0,0.05);
  padding: 2px 6px;
  border-radius: 4px;
}

.v2-error-card__copy-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.6;
  transition: opacity 150ms;
}

.v2-error-card__copy-btn:hover {
  opacity: 1;
}

.v2-error-card__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.v2-error-card__btn {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: var(--v2-radius-md);
  cursor: pointer;
  transition: all 150ms;
}

.v2-error-card__btn--primary {
  background: var(--v3-accent, #F97316);
  color: white;
}

.v2-error-card__btn--primary:hover {
  background: var(--v3-accent-hover, #EA580C);
}

.v2-error-card__btn--secondary {
  background: rgba(0,0,0,0.06);
  color: var(--v2-text-dark);
}

.v2-error-card__btn--secondary:hover {
  background: rgba(0,0,0,0.1);
}

.v2-error-card__btn--tertiary {
  background: transparent;
  color: var(--v2-text-light);
  border: 1px solid rgba(0,0,0,0.15);
}

.v2-error-card__btn--tertiary:hover {
  background: rgba(0,0,0,0.03);
}

/* ============================================
   RATE LIMIT CARD (UX Guide Section 5)
   ============================================ */
.v2-rate-limit-card {
  background: #fff9e8;
  border: 1px solid rgba(168, 75, 47, 0.2);
  border-left: 4px solid var(--v2-warning, #A84B2F);
  border-radius: var(--v2-radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.v2-rate-limit-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.v2-rate-limit-card__icon {
  font-size: 24px;
}

.v2-rate-limit-card__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--v2-warning, #A84B2F);
  margin: 0;
}

.v2-rate-limit-card__info {
  margin-bottom: 16px;
}

.v2-rate-limit-card__info p {
  margin: 0 0 4px 0;
  font-size: 15px;
  color: var(--v2-text-dark);
}

.v2-rate-limit-card__position {
  font-size: 14px;
  color: var(--v2-text-light);
}

.v2-rate-limit-card__wait strong {
  color: var(--v3-accent, #F97316);
}

.v2-rate-limit-card__suggestions {
  margin-bottom: 16px;
}

.v2-rate-limit-card__suggestions p {
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-text-light);
  margin: 0 0 8px 0;
}

.v2-rate-limit-card__suggestions ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.v2-rate-limit-card__suggestions li {
  font-size: 14px;
  color: var(--v2-text-dark);
  padding: 4px 0;
}

.v2-rate-limit-card__actions {
  display: flex;
  gap: 12px;
}

.v2-rate-limit-card__btn {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: var(--v2-radius-md);
  cursor: pointer;
  transition: all 150ms;
}

.v2-rate-limit-card__btn--primary {
  background: var(--v3-accent, #F97316);
  color: white;
}

.v2-rate-limit-card__btn--primary:hover {
  background: var(--v3-accent-hover, #EA580C);
}

.v2-rate-limit-card__btn--secondary {
  background: rgba(0,0,0,0.06);
  color: var(--v2-text-dark);
}

.v2-rate-limit-card__btn--secondary:hover {
  background: rgba(0,0,0,0.1);
}

/* ============================================
   STYLED TOOLTIPS (UX Guide Section 4)
   ============================================ */
.v2-tooltip {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.v2-tooltip--visible {
  opacity: 1;
  transform: translateY(0);
}

.v2-tooltip__content {
  background: var(--v2-text-dark, #134252);
  color: white;
  font-size: 12px;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: var(--v2-radius-sm);
  max-width: 250px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.v2-tooltip__arrow {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--v2-text-dark, #134252);
}

.v2-tooltip--above .v2-tooltip__arrow {
  top: auto;
  bottom: -6px;
  border-bottom: none;
  border-top: 6px solid var(--v2-text-dark, #134252);
}

/* ============================================
   CELEBRATION WEEKLY STATS (UX Guide Section 3)
   ============================================ */
.v2-celebration__subtext {
  font-size: 16px;
  color: var(--v2-text-light);
  margin-bottom: 24px;
}

.v2-celebration__weekly {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,0.08);
  text-align: left;
}

.v2-celebration__weekly-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-text-light);
  margin: 0 0 12px 0;
}

.v2-celebration__weekly-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-celebration__weekly-list li {
  font-size: 15px;
  color: var(--v2-text-dark);
  padding: 6px 0;
}

/* ============================================
   ONBOARDING ENHANCEMENTS
   ============================================ */
.v2-onboarding__divider {
  font-size: 13px;
  color: var(--v2-text-light);
  margin: 12px 0;
}

.v2-onboarding__btn--link {
  background: none;
  border: none;
  color: var(--v3-accent, #F97316);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  padding: 8px;
  transition: color 150ms;
}

.v2-onboarding__btn--link:hover {
  color: var(--v3-accent-hover, #EA580C);
}

.v2-onboarding.visible .v2-onboarding__modal {
  animation: v2-modal-appear 300ms ease forwards;
}

/* ============================================
   DARK THEME - ERROR & RATE LIMIT CARDS
   ============================================ */
[data-theme="warm-vault"] .v2-error-card {
  background: rgba(192, 21, 47, 0.1);
  border-color: rgba(192, 21, 47, 0.3);
}

[data-theme="warm-vault"] .v2-error-card__message,
[data-theme="warm-vault"] .v2-error-card__step-text,
[data-theme="warm-vault"] .v2-error-card__suggestions-list {
  color: rgba(255,255,255,0.9);
}

[data-theme="warm-vault"] .v2-rate-limit-card {
  background: rgba(168, 75, 47, 0.1);
  border-color: rgba(168, 75, 47, 0.3);
}

[data-theme="warm-vault"] .v2-rate-limit-card__info p,
[data-theme="warm-vault"] .v2-rate-limit-card__suggestions li {
  color: rgba(255,255,255,0.9);
}

[data-theme="warm-vault"] .v2-tooltip__content {
  background: rgba(255,255,255,0.95);
  color: var(--v2-text-dark);
}

[data-theme="warm-vault"] .v2-tooltip__arrow {
  border-bottom-color: rgba(255,255,255,0.95);
}

[data-theme="warm-vault"] .v2-tooltip--above .v2-tooltip__arrow {
  border-top-color: rgba(255,255,255,0.95);
}

[data-theme="warm-vault"] .v2-celebration__weekly {
  border-top-color: rgba(255,255,255,0.1);
}

[data-theme="warm-vault"] .v2-celebration__weekly-list li {
  color: rgba(255,255,255,0.9);
}