/* ==========================================================================
   退職リスク診断 - Universal Smartphone Optimized Stylesheet
   Target: All smartphones 320px-480px+, iOS & Android, all browsers
   Accessibility: WCAG AA compliant, optimized for 60+ age users
   ========================================================================== */

/* ---------- CSS Custom Properties ---------- */
:root {
  --bg-primary: #07071a;
  --bg-secondary: #0e0e24;
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-card-hover: rgba(255, 255, 255, 0.07);
  --bg-card-elevated: rgba(255, 255, 255, 0.06);
  --border-card: rgba(255, 255, 255, 0.08);
  --border-card-strong: rgba(255, 255, 255, 0.12);
  --text-primary: #f0f0f5;
  --text-secondary: #c0c0d8;
  --text-muted: #8a8aa6;
  --accent-primary: #6366f1;
  --accent-secondary: #818cf8;
  --accent-tertiary: #a5b4fc;
  --accent-glow: rgba(99, 102, 241, 0.35);
  --accent-glow-soft: rgba(99, 102, 241, 0.15);
  --green: #22c55e;
  --yellow: #eab308;
  --orange: #f97316;
  --red: #ef4444;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-full: 9999px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --transition-fast: 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-medium: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-slow: 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  --viewport-padding: clamp(16px, 5vw, 28px);
  --card-max-width: min(calc(100vw - var(--viewport-padding) * 2), 480px);
}

/* Light mode override */
@media (prefers-color-scheme: light) {
  :root {
    --bg-primary: #f2f2f7;
    --bg-secondary: #e8e8f0;
    --bg-card: rgba(255, 255, 255, 0.72);
    --bg-card-hover: rgba(255, 255, 255, 0.88);
    --bg-card-elevated: rgba(255, 255, 255, 0.8);
    --border-card: rgba(0, 0, 0, 0.06);
    --border-card-strong: rgba(0, 0, 0, 0.1);
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a65;
    --text-muted: #75758f;
  }
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont,
    'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
    'Noto Sans JP', Roboto, 'Segoe UI',
    Meiryo, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.7;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* ---------- Gradient Mesh Background ---------- */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(99, 102, 241, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 25%, rgba(139, 92, 246, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 50% 85%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 70% 60%, rgba(168, 85, 247, 0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Subtle animated noise texture for OLED depth */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle 200px at 30% 70%, rgba(99, 102, 241, 0.05) 0%, transparent 100%),
    radial-gradient(circle 150px at 75% 30%, rgba(168, 85, 247, 0.04) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Screens ---------- */
.screen {
  display: none;
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
}

.screen.active {
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

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

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 4px 24px var(--accent-glow); }
  50% { box-shadow: 0 6px 32px var(--accent-glow), 0 0 60px rgba(99, 102, 241, 0.15); }
}

@keyframes selectedPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ---------- Start Screen ---------- */
.start-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px var(--viewport-padding);
  /* Push content slightly above center for natural thumb reach */
  padding-top: calc(var(--safe-top) + 48px);
  padding-bottom: calc(var(--safe-bottom) + 32px);
  text-align: center;
  gap: 0;
}

.logo-area {
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-icon {
  margin-bottom: 20px;
  animation: scaleIn 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.3));
}

.app-title {
  font-size: clamp(28px, 7.5vw, 36px);
  font-weight: 800;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, var(--accent-tertiary) 0%, var(--accent-secondary) 40%, var(--accent-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 6px;
}

.app-subtitle {
  font-size: clamp(11px, 3vw, 14px);
  color: var(--text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ---------- Glass Card ---------- */
.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(40px) saturate(1.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 24px;
  width: 100%;
  max-width: var(--card-max-width);
  /* Subtle inner shadow for depth on OLED */
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 32px -8px rgba(0, 0, 0, 0.5);
  /* Subtle top-border gradient accent */
  border-top: 1px solid rgba(129, 140, 248, 0.1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.intro-card {
  margin-bottom: 36px;
}

.intro-text {
  font-size: clamp(15px, 4vw, 18px);
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.85;
  letter-spacing: 0.02em;
}

.intro-text strong {
  color: var(--accent-secondary);
  font-weight: 700;
}

.feature-list {
  list-style: none;
  text-align: left;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  font-size: clamp(14px, 3.8vw, 17px);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.feature-list li:last-child {
  border-bottom: none;
}

.feature-icon {
  font-size: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(99, 102, 241, 0.08);
  border-radius: var(--radius-sm);
}

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: var(--card-max-width);
  padding: clamp(18px, 4.5vw, 24px) 32px;
  background: linear-gradient(135deg, var(--accent-primary) 0%, #7c3aed 100%);
  color: #fff;
  font-size: clamp(17px, 4.5vw, 21px);
  font-weight: 700;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    filter var(--transition-fast);
  box-shadow:
    0 4px 24px var(--accent-glow),
    0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 56px;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
  animation: pulseGlow 2.5s ease-in-out infinite;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), transparent);
  border-radius: var(--radius-full) var(--radius-full) 0 0;
  pointer-events: none;
}

.btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 2px 12px var(--accent-glow);
  filter: brightness(0.92);
}

.btn-arrow {
  transition: transform var(--transition-fast);
}

.btn-primary:active .btn-arrow {
  transform: translateX(3px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(14px, 3.5vw, 20px) 28px;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--text-secondary);
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 600;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 52px;
  letter-spacing: 0.01em;
}

.btn-secondary:active {
  transform: scale(0.97);
  background: var(--bg-card-hover);
  border-color: var(--border-card-strong);
}

.privacy-note {
  margin-top: 24px;
  font-size: clamp(12px, 3.2vw, 14px);
  color: var(--text-muted);
  line-height: 1.6;
  letter-spacing: 0.02em;
}

/* ---------- Question Screen ---------- */
.question-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--viewport-padding);
  /* Account for Dynamic Island - push progress bar below it */
  padding-top: calc(max(20px, var(--safe-top)) + 8px);
  /* Keep bottom nav above home indicator */
  padding-bottom: calc(var(--safe-bottom) + 12px);
}

.progress-area {
  width: 100%;
  max-width: var(--card-max-width);
  margin-bottom: 20px;
  flex-shrink: 0;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.progress-category {
  font-size: clamp(14px, 3.8vw, 17px);
  font-weight: 700;
  color: var(--accent-secondary);
  letter-spacing: 0.02em;
}

.progress-count {
  font-size: clamp(14px, 3.8vw, 17px);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.progress-bar-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #818cf8, #a78bfa, #818cf8, #6366f1);
  background-size: 200% 100%;
  animation: progressShimmer 3s ease-in-out infinite;
  border-radius: 4px;
  transition: width var(--transition-medium);
  will-change: width;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.5), 0 0 4px rgba(129, 140, 248, 0.3);
  position: relative;
}

/* Animated glow pulse on the leading edge */
.progress-bar-fill::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 12px 4px rgba(167, 139, 250, 0.6);
  animation: progressDotPulse 1.5s ease-in-out infinite;
}

@keyframes progressShimmer {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

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

/* Progress percentage overlay */
.progress-pct {
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 800;
  color: var(--accent-tertiary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  min-width: 36px;
  text-align: right;
}

.question-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: var(--card-max-width);
  margin-bottom: 16px;
  min-height: 0;
  /* Vertically center the question in available space */
  padding: 28px 24px 24px;
}

.question-card.slide-in-right {
  animation: slideInRight 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.question-card.slide-in-left {
  animation: slideInLeft 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.question-number {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(13px, 3.5vw, 16px);
  color: var(--accent-secondary);
  margin-bottom: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.question-number::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-secondary), transparent);
  border-radius: 1px;
  vertical-align: middle;
}

.question-text {
  font-size: clamp(22px, 6vw, 32px);
  font-weight: 700;
  line-height: 1.85;
  color: var(--text-primary);
  margin-bottom: clamp(28px, 8vw, 40px);
  letter-spacing: 0.03em;
  word-break: auto-phrase;
  text-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
}

/* ---------- Likert Scale ---------- */
.likert-scale {
  display: flex;
  gap: clamp(6px, 1.8vw, 12px);
  width: 100%;
}

.likert-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.5vw, 10px);
  /* Large touch target for universal accessibility (WCAG 2.5.8 Target Size) */
  padding: clamp(14px, 3.5vw, 22px) clamp(4px, 1vw, 8px) clamp(12px, 3vw, 18px);
  min-height: clamp(88px, 24vw, 120px);
  min-width: 48px;
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
  overflow: hidden;
}

/* Subtle scale-intensity tint per button (visual aid for intuitive scale reading) */
.likert-btn[data-value="1"] { border-bottom: 3px solid rgba(156, 163, 175, 0.15); }
.likert-btn[data-value="2"] { border-bottom: 3px solid rgba(156, 163, 175, 0.22); }
.likert-btn[data-value="3"] { border-bottom: 3px solid rgba(129, 140, 248, 0.25); }
.likert-btn[data-value="4"] { border-bottom: 3px solid rgba(129, 140, 248, 0.35); }
.likert-btn[data-value="5"] { border-bottom: 3px solid rgba(129, 140, 248, 0.50); }

.likert-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 40%, rgba(99, 102, 241, 0.15), transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}

.likert-btn:active {
  transform: scale(0.94);
}

.likert-btn.selected {
  background: rgba(99, 102, 241, 0.14);
  border-color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
  box-shadow:
    0 0 24px rgba(99, 102, 241, 0.35),
    0 0 0 1px rgba(99, 102, 241, 0.4) inset,
    0 4px 20px -4px rgba(99, 102, 241, 0.25);
  animation: selectedPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.likert-btn.selected::before {
  opacity: 1;
}

/* Ripple effect on tap */
.likert-btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.4), rgba(99, 102, 241, 0.1));
  transform: scale(0);
  animation: rippleExpand 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes rippleExpand {
  0% { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

.likert-value {
  font-size: clamp(24px, 7vw, 34px);
  font-weight: 900;
  color: var(--text-muted);
  transition: color var(--transition-fast), transform var(--transition-fast);
  line-height: 1;
}

.likert-btn.selected .likert-value {
  color: var(--accent-secondary);
  transform: scale(1.15);
  text-shadow: 0 0 20px rgba(129, 140, 248, 0.5);
}

/* Intensity-graded colors for selected state */
.likert-btn[data-value="1"].selected .likert-value { color: #9ca3af; text-shadow: none; }
.likert-btn[data-value="2"].selected .likert-value { color: #a5b4fc; text-shadow: 0 0 16px rgba(165,180,252,0.3); }
.likert-btn[data-value="3"].selected .likert-value { color: #818cf8; text-shadow: 0 0 18px rgba(129,140,248,0.4); }
.likert-btn[data-value="4"].selected .likert-value { color: #6366f1; text-shadow: 0 0 20px rgba(99,102,241,0.5); }
.likert-btn[data-value="5"].selected .likert-value { color: #a78bfa; text-shadow: 0 0 24px rgba(167,139,250,0.6); }

.likert-label {
  font-size: clamp(11px, 3vw, 15px);
  line-height: 1.4;
  color: var(--text-secondary);
  text-align: center;
  transition: color var(--transition-fast);
  letter-spacing: 0.02em;
  font-weight: 600;
}

.likert-btn.selected .likert-label {
  color: var(--accent-tertiary);
}

/* Back button */
.btn-nav {
  margin-top: auto;
  /* Place above home indicator safe area */
  margin-bottom: 8px;
  flex-shrink: 0;
}

.btn-nav.hidden {
  visibility: hidden;
  pointer-events: none;
}

/* ---------- Result Screen ---------- */
.result-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Below Dynamic Island */
  padding: var(--viewport-padding);
  padding-top: calc(max(24px, var(--safe-top)) + 16px);
  /* Above home indicator with comfortable breathing room */
  padding-bottom: calc(var(--safe-bottom) + 48px);
  gap: 20px;
  /* Prevent horizontal overflow from radar chart */
  overflow-x: hidden;
  max-width: 100vw;
}

.result-title {
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 800;
  text-align: center;
  background: linear-gradient(135deg, #a78bfa 0%, #818cf8 30%, #6366f1 60%, #818cf8 100%);
  background-size: 200% auto;
  animation: resultTitleShimmer 4s ease-in-out infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.02em;
  padding: 4px 0;
}

@keyframes resultTitleShimmer {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

.score-card {
  text-align: center;
  max-width: var(--card-max-width);
  padding: 32px 24px 28px;
  position: relative;
  overflow: hidden;
}

/* Premium glow effect behind score card */
.score-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 50% 60%, rgba(99, 102, 241, 0.08) 0%, transparent 50%);
  animation: scoreCardGlow 4s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes scoreCardGlow {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.1); }
}

.gauge-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  /* Make the gauge a hero element */
  filter: drop-shadow(0 0 32px rgba(99, 102, 241, 0.2));
}

.gauge-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gauge-score {
  font-size: clamp(52px, 14vw, 72px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.gauge-max {
  font-size: clamp(14px, 3.8vw, 18px);
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 600;
}

.risk-level {
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.risk-level.low { color: var(--green); }
.risk-level.caution { color: var(--yellow); }
.risk-level.warning { color: var(--orange); }
.risk-level.high { color: var(--red); }

.risk-description {
  font-size: clamp(15px, 4vw, 18px);
  color: var(--text-secondary);
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-align: left;
}

/* ---------- Radar Chart ---------- */
.chart-card {
  max-width: var(--card-max-width);
  padding: 24px 16px;
  overflow: visible;
}

.card-title {
  font-size: clamp(16px, 4.5vw, 21px);
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  padding-left: 8px;
}

.radar-container {
  display: flex;
  justify-content: center;
  overflow: visible;
  /* Ensure radar fits within card without horizontal overflow */
  width: 100%;
  max-width: 100%;
}

#radar-svg {
  width: 100%;
  max-width: 375px;
  height: auto;
  overflow: visible;
}

/* ---------- Dimension Details ---------- */
.details-card {
  max-width: var(--card-max-width);
}

.dimension-details {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dim-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dim-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dim-name {
  font-size: clamp(14px, 3.8vw, 17px);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.dim-score-text {
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dim-score-text small {
  font-size: clamp(11px, 3vw, 13px);
  opacity: 0.6;
}

.dim-bar-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}

.dim-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

/* ---------- Advice Card ---------- */
.advice-card {
  max-width: var(--card-max-width);
}

.advice-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.advice-item {
  padding: 18px;
  background: rgba(255, 255, 255, 0.025);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-primary);
  transition: background var(--transition-fast);
}

.advice-dim-name {
  font-size: clamp(14px, 3.8vw, 17px);
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.advice-score-badge {
  display: inline-block;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.advice-text {
  font-size: clamp(15px, 4vw, 18px);
  color: var(--text-secondary);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.no-advice {
  font-size: clamp(14px, 3.8vw, 17px);
  color: var(--text-secondary);
  text-align: center;
  padding: 24px 16px;
  line-height: 1.7;
}

/* ---------- References ---------- */
.references-card {
  max-width: var(--card-max-width);
}

.references-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ref-item {
  font-size: clamp(11px, 2.8vw, 13px);
  color: var(--text-muted);
  line-height: 1.7;
  padding-left: 14px;
  border-left: 2px solid rgba(255, 255, 255, 0.06);
}

.ref-dim {
  font-weight: 600;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 3px;
  font-size: clamp(12px, 3.2vw, 14px);
}

/* ---------- Result Actions ---------- */
.result-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: var(--card-max-width);
  margin-top: 12px;
  padding-bottom: calc(var(--safe-bottom) + 8px);
}

.btn-share {
  max-width: var(--card-max-width);
}

.btn-share svg {
  flex-shrink: 0;
}

/* ---------- Animations for result items ---------- */
.result-container > * {
  opacity: 0;
  animation: fadeIn 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.result-container > *:nth-child(1) { animation-delay: 0s; }
.result-container > *:nth-child(2) { animation-delay: 0.06s; }
.result-container > *:nth-child(3) { animation-delay: 0.12s; }
.result-container > *:nth-child(4) { animation-delay: 0.18s; }
.result-container > *:nth-child(5) { animation-delay: 0.24s; }
.result-container > *:nth-child(6) { animation-delay: 0.30s; }
.result-container > *:nth-child(7) { animation-delay: 0.36s; }
.result-container > *:nth-child(8) { animation-delay: 0.42s; }
.result-container > *:nth-child(9) { animation-delay: 0.48s; }
.result-container > *:nth-child(10) { animation-delay: 0.54s; }
/* Everything beyond 10th child appears immediately */
.result-container > *:nth-child(n+11) { animation-delay: 0.6s; }

/* ---------- Utility ---------- */
.hidden:not(.btn-nav) {
  display: none !important;
}

/* ---------- Scrollbar (WebKit) ---------- */
::-webkit-scrollbar {
  width: 3px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1.5px;
}

/* ---------- Selection ---------- */
::selection {
  background: rgba(99, 102, 241, 0.3);
}

/* ---------- Demographic Screen ---------- */
.demographic-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px var(--viewport-padding);
  padding-top: calc(var(--safe-top) + 48px);
  padding-bottom: calc(var(--safe-bottom) + 32px);
  text-align: center;
  gap: 16px;
}

.demographic-title {
  font-size: clamp(24px, 6.5vw, 32px);
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent-tertiary), var(--accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}

.demographic-subtitle {
  font-size: clamp(13px, 3.5vw, 16px);
  color: var(--text-muted);
  margin-bottom: 8px;
}

.demographic-card {
  text-align: left;
  margin-bottom: 8px;
}

.demographic-field {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.demographic-field:last-child {
  border-bottom: none;
  padding-bottom: 8px;
}

.demographic-label {
  display: block;
  font-size: clamp(14px, 3.8vw, 17px);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--text-muted);
  pointer-events: none;
}

.demographic-select {
  width: 100%;
  padding: clamp(14px, 3.5vw, 18px) 40px clamp(14px, 3.5vw, 18px) 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: clamp(15px, 4vw, 18px);
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  min-height: 52px;
}

.demographic-select:focus {
  outline: none;
  border-color: var(--accent-primary);
  background: rgba(99, 102, 241, 0.06);
}

.demographic-select option {
  background: #1a1a2e;
  color: var(--text-primary);
}

/* ---------- Weighted Note (inside score card) ---------- */
.weighted-note {
  font-size: clamp(12px, 3.2vw, 14px);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.7;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* ---------- Demographic Context Section ---------- */
.demographic-context-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.demo-context-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.demo-context-label {
  font-size: clamp(13px, 3.5vw, 15px);
  font-weight: 600;
  color: var(--text-secondary);
}

.demo-context-score {
  font-size: clamp(26px, 7vw, 32px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.demo-context-score small {
  font-size: clamp(12px, 3vw, 14px);
  opacity: 0.5;
}

.demo-context-note {
  font-size: clamp(12px, 3.2vw, 14px);
  color: var(--text-muted);
  line-height: 1.7;
}

/* ---------- Compound Risk Patterns ---------- */
.compound-card {
  max-width: var(--card-max-width);
}

.compound-risks-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.compound-risk-card,
.compound-risk-item {
  padding: 18px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--accent-primary);
}

.compound-risk-card.severity-critical,
.compound-risk-item.compound-risk-critical {
  border-left-color: var(--red);
  background: rgba(239, 68, 68, 0.04);
}

.compound-risk-card.severity-high,
.compound-risk-item.compound-risk-warning {
  border-left-color: var(--orange);
  background: rgba(249, 115, 22, 0.04);
}

.compound-risk-card.severity-moderate {
  border-left-color: var(--yellow);
  background: rgba(234, 179, 8, 0.04);
}

.compound-risk-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.compound-risk-icon {
  font-size: 24px;
  line-height: 1;
}

.compound-risk-name {
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 700;
  color: var(--text-primary);
}

.compound-risk-name-en {
  font-size: clamp(11px, 3vw, 13px);
  color: var(--text-muted);
  font-weight: 500;
  display: block;
}

.compound-risk-severity-badge {
  display: inline-block;
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
}

.compound-risk-severity-badge.severity-critical {
  background: rgba(239, 68, 68, 0.15);
  color: var(--red);
}

.compound-risk-severity-badge.severity-high {
  background: rgba(249, 115, 22, 0.15);
  color: var(--orange);
}

.compound-risk-severity-badge.severity-moderate {
  background: rgba(234, 179, 8, 0.15);
  color: var(--yellow);
}

.compound-risk-desc {
  font-size: clamp(14px, 3.8vw, 17px);
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 12px;
}

.compound-risk-dimensions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.compound-risk-dim {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(13px, 3.5vw, 15px);
  font-weight: 500;
  color: var(--text-secondary);
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}

.compound-risk-advice {
  font-size: clamp(13px, 3.5vw, 16px);
  color: var(--text-muted);
  line-height: 1.8;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.compound-risk-advice-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}

.compound-risk-academic {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 10px;
  opacity: 0.7;
  font-style: italic;
}

.no-compound-risks {
  font-size: 14px;
  color: var(--green);
  text-align: center;
  padding: 20px 16px;
  line-height: 1.7;
}

/* ---------- History Entry List ---------- */
.history-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.history-entry:last-child {
  border-bottom: none;
}

.history-date {
  font-size: clamp(13px, 3.5vw, 15px);
  color: var(--text-muted);
}

.history-scores {
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-score {
  font-size: clamp(20px, 5.5vw, 24px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.history-trend {
  font-size: clamp(14px, 3.8vw, 16px);
  font-weight: 700;
}

/* ---------- Demographic Context Rendering ---------- */
.demographic-comparison {
  padding: 8px 0;
}

.demo-score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.demo-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.demo-score {
  font-size: 28px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.demo-notes {
  padding: 10px 0;
}

.demo-notes ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.demo-notes li {
  font-size: 12px;
  color: var(--text-muted);
  padding-left: 12px;
  position: relative;
}

.demo-notes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-secondary);
}

/* ---------- Trend Chart ---------- */
.trend-card {
  max-width: var(--card-max-width);
}

.trend-chart-container {
  width: 100%;
  overflow: hidden;
}

#trend-svg {
  width: 100%;
  height: auto;
}

.trend-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 14px;
  font-size: clamp(14px, 3.8vw, 17px);
  color: var(--text-secondary);
}

.trend-arrow {
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 800;
}

.trend-arrow.improving { color: var(--green); }
.trend-arrow.declining { color: var(--red); }
.trend-arrow.stable { color: var(--text-muted); }

.trend-change {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- History Summary ---------- */
.history-summary-container {
  width: 100%;
  max-width: var(--card-max-width);
  margin-bottom: 16px;
}

.history-summary-card {
  background: var(--bg-card);
  backdrop-filter: blur(40px) saturate(1.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.history-summary-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-summary-header {
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.history-summary-score {
  font-size: clamp(30px, 8vw, 38px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.history-summary-date {
  font-size: clamp(12px, 3.2vw, 14px);
  color: var(--text-muted);
}

.history-summary-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.history-trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.history-trend-badge.improving {
  background: rgba(34, 197, 94, 0.12);
  color: var(--green);
}

.history-trend-badge.declining {
  background: rgba(239, 68, 68, 0.12);
  color: var(--red);
}

.history-trend-badge.stable {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.btn-view-history {
  font-size: 12px;
  color: var(--accent-secondary);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  padding: 4px 0;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Phase 2: Interactive Dimension Drill-Down ---------- */
.dim-row-interactive {
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 14px;
  margin: -14px;
  margin-bottom: 8px;
  transition: background var(--transition-fast);
  min-height: 48px;
}

.dim-row-interactive:active {
  background: rgba(255, 255, 255, 0.05);
}

.dim-header-tap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dim-header-left {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.dim-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dim-expand-icon {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 50%;
}

.dim-percentile {
  font-variant-numeric: tabular-nums;
}

.dim-drill-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.dim-drill-desc {
  font-size: clamp(13px, 3.5vw, 15px);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 14px;
}

.dim-drill-explanation {
  font-size: clamp(12px, 3.2vw, 14px);
  color: var(--accent-tertiary);
  line-height: 1.7;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: rgba(99, 102, 241, 0.06);
  border-radius: 8px;
  border-left: 3px solid var(--accent-primary);
}

.dim-drill-percentile-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.dim-drill-percentile-label {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 40px;
}

.dim-drill-percentile-label:last-child {
  text-align: right;
}

.dim-drill-percentile-track {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  position: relative;
}

.dim-drill-percentile-marker {
  position: absolute;
  top: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.dim-drill-percentile-avg {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 8px;
  background: var(--text-muted);
  opacity: 0.4;
  transform: translateX(-50%);
}

.dim-drill-questions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.dim-drill-q {
  display: grid;
  grid-template-columns: 1fr 60px 32px;
  gap: 8px;
  align-items: center;
}

.dim-drill-q-text {
  font-size: clamp(12px, 3.2vw, 14px);
  color: var(--text-secondary);
  line-height: 1.5;
}

.dim-drill-q-num {
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 700;
  color: var(--accent-secondary);
  opacity: 0.7;
}

.dim-drill-q-reversed {
  font-size: 9px;
  background: rgba(249, 115, 22, 0.15);
  color: var(--orange);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 600;
  vertical-align: middle;
}

.dim-drill-q-bar-wrap {
  height: 5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2.5px;
  overflow: hidden;
}

.dim-drill-q-bar {
  height: 100%;
  border-radius: 1.5px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.dim-drill-q-score {
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dim-drill-ref {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.6;
  line-height: 1.5;
  font-style: italic;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.card-title-hint {
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 6px;
}

/* ---------- Phase 2: Strengths ---------- */
.strengths-card {
  max-width: var(--card-max-width);
}

.strengths-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.strength-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
  background: rgba(34, 197, 94, 0.04);
  border: 1px solid rgba(34, 197, 94, 0.12);
  border-radius: var(--radius-sm);
  flex: 1;
  min-width: 90px;
  text-align: center;
}

.strength-score {
  font-size: clamp(26px, 7vw, 32px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.strength-name {
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 600;
  color: var(--text-secondary);
}

.strength-label {
  font-size: clamp(11px, 2.8vw, 13px);
  color: var(--text-muted);
}

/* ---------- Phase 2: Action Plan ---------- */
.action-plan-card {
  max-width: var(--card-max-width);
}

.action-plan-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-plan-header {
  margin-bottom: 4px;
}

.action-plan-urgency-badge {
  display: inline-block;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.action-plan-summary {
  font-size: clamp(14px, 3.8vw, 17px);
  color: var(--text-secondary);
  line-height: 1.7;
}

.action-plan-item {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-primary);
}

.action-plan-compound {
  border-left-color: var(--red);
  background: rgba(239, 68, 68, 0.03);
}

.action-plan-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.action-plan-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.action-plan-item-icon {
  font-size: 18px;
}

.action-plan-item-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.action-plan-item-title {
  font-size: clamp(14px, 3.8vw, 17px);
  font-weight: 700;
  color: var(--text-primary);
}

.action-plan-item-score {
  font-size: clamp(13px, 3.5vw, 15px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.action-plan-item-desc {
  font-size: clamp(13px, 3.5vw, 16px);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 10px;
}

.action-plan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.action-plan-tag {
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* ---------- Phase 2: Correlation Insights ---------- */
.correlation-card {
  max-width: var(--card-max-width);
}

.correlation-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.correlation-insight-card {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.correlation-insight-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.correlation-insight-icon {
  font-size: 18px;
}

.correlation-insight-dims {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.correlation-dim-badge {
  font-size: clamp(13px, 3.5vw, 15px);
  font-weight: 600;
}

.correlation-dim-badge small {
  font-size: clamp(12px, 3vw, 14px);
  opacity: 0.7;
}

.correlation-arrow {
  font-size: clamp(13px, 3.5vw, 15px);
  color: var(--text-muted);
}

.correlation-insight-text {
  font-size: clamp(13px, 3.5vw, 16px);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 8px;
}

.correlation-strength {
  font-size: clamp(11px, 2.8vw, 13px);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Skip Navigation Link ---------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-primary);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  z-index: 9999;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 10px;
}

/* ---------- Theme Toggle ---------- */
.btn-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  margin-top: 8px;
  font-family: inherit;
}

.btn-theme-toggle:active {
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent-secondary);
}

/* Force light theme when data-theme="light" */
[data-theme="light"] {
  --bg-primary: #f2f2f7;
  --bg-secondary: #e8e8f0;
  --bg-card: rgba(255, 255, 255, 0.72);
  --bg-card-hover: rgba(255, 255, 255, 0.85);
  --bg-card-elevated: rgba(255, 255, 255, 0.8);
  --border-card: rgba(0, 0, 0, 0.06);
  --border-card-strong: rgba(0, 0, 0, 0.1);
  --text-primary: #1a1a2e;
  --text-secondary: #4a4a6a;
  --text-muted: #7a7a9a;
  --accent-glow: rgba(99, 102, 241, 0.2);
  --accent-glow-soft: rgba(99, 102, 241, 0.1);
}

/* Force dark theme when data-theme="dark" */
[data-theme="dark"] {
  --bg-primary: #07071a;
  --bg-secondary: #0e0e24;
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-card-hover: rgba(255, 255, 255, 0.07);
  --bg-card-elevated: rgba(255, 255, 255, 0.06);
  --border-card: rgba(255, 255, 255, 0.08);
  --border-card-strong: rgba(255, 255, 255, 0.12);
  --text-primary: #f0f0f5;
  --text-secondary: #c0c0d8;
  --text-muted: #8a8aa6;
  --accent-glow: rgba(99, 102, 241, 0.35);
  --accent-glow-soft: rgba(99, 102, 241, 0.15);
}

/* ---------- Percentile Summary ---------- */
.percentile-summary {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 12px 0;
}

.percentile-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.percentile-chip-name {
  color: var(--text-muted);
}

.percentile-chip-rank {
  font-weight: 700;
}

/* ---------- Benchmark Bell Curves ---------- */
.benchmark-desc {
  font-size: clamp(12px, 3.2vw, 14px);
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 16px;
}

.benchmark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.benchmark-item {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

.benchmark-dim {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.benchmark-svg {
  width: 100%;
  max-width: 140px;
  height: auto;
}

.benchmark-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding: 0 2px;
}

.benchmark-percentile {
  font-size: 12px;
  font-weight: 700;
}

.benchmark-label {
  font-size: 10px;
  color: var(--text-muted);
}

/* ---------- Dimension Trend Heatmap ---------- */
.dimension-heatmap {
  margin-top: 16px;
}

.heatmap-table {
  font-size: 11px;
  border-collapse: separate;
  border-spacing: 2px;
}

.heatmap-corner {
  width: 80px;
  min-width: 80px;
}

.heatmap-date {
  text-align: center;
  padding: 4px 6px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 10px;
}

.heatmap-dim-name {
  white-space: nowrap;
  padding: 4px 8px 4px 0;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 10px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.heatmap-cell {
  text-align: center;
  padding: 6px 4px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 10px;
  min-width: 32px;
  transition: transform var(--transition-fast);
}

.heatmap-cell:active {
  transform: scale(1.1);
}

/* ---------- Velocity Badges ---------- */
.velocity-badges {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.velocity-overall {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.velocity-arrow {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.velocity-text {
  font-size: clamp(13px, 3.5vw, 15px);
  font-weight: 600;
  color: var(--text-primary);
}

.velocity-accel {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(99, 102, 241, 0.1);
}

.velocity-data-points {
  font-size: 11px;
  color: var(--text-muted);
}

.velocity-dimensions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
}

.velocity-dim-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  font-size: 11px;
}

.velocity-dim-name {
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

.velocity-dim-arrow {
  font-weight: 700;
  font-size: 11px;
  white-space: nowrap;
}

/* ---------- Data Portability ---------- */
.data-portability {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
  flex-wrap: wrap;
}

.btn-data {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 36px;
}

.btn-data:active {
  background: rgba(99, 102, 241, 0.08);
  color: var(--accent-secondary);
}

/* ---------- Re-diagnosis Reminder ---------- */
.reminder-card {
  max-width: var(--card-max-width);
  text-align: center;
}

.reminder-desc {
  font-size: clamp(13px, 3.5vw, 15px);
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 16px;
}

.reminder-options {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.reminder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: var(--radius-full);
  color: var(--accent-secondary);
  font-size: clamp(13px, 3.5vw, 15px);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 44px;
}

.reminder-btn:active {
  transform: scale(0.95);
}

.reminder-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}

.reminder-status {
  margin-top: 14px;
  font-size: clamp(12px, 3.2vw, 14px);
  color: var(--green);
  font-weight: 600;
  line-height: 1.6;
}

.reminder-status .reminder-cancel {
  display: inline-block;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: clamp(12px, 3.2vw, 14px);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  text-decoration: underline;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Phase 2: Share Image Button ---------- */
.btn-share-img {
  width: 100%;
  max-width: var(--card-max-width);
}

/* ---------- Phase 2: Result container animation delays for new items ---------- */
.result-container > *:nth-child(19) { animation-delay: 2.7s; }
.result-container > *:nth-child(20) { animation-delay: 2.85s; }
.result-container > *:nth-child(21) { animation-delay: 3.0s; }
.result-container > *:nth-child(22) { animation-delay: 3.15s; }
.result-container > *:nth-child(23) { animation-delay: 3.3s; }
.result-container > *:nth-child(24) { animation-delay: 3.45s; }
.result-container > *:nth-child(25) { animation-delay: 3.6s; }

/* ==========================================================================
   Media Queries - Universal Smartphone Support
   Fluid design with clamp() handles most sizing; these refine edge cases.
   ========================================================================== */

/* ---------- Very small phones (iPhone SE1, Galaxy A series, 320px) ---------- */
@media (max-width: 340px) {
  .glass-card {
    padding: 16px;
    border-radius: 16px;
  }

  .likert-scale {
    gap: 4px;
  }

  .likert-btn {
    border-radius: 10px;
  }

  #radar-svg {
    max-width: 305px;
  }

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

/* ---------- Small phones (iPhone SE2/3, Galaxy S series compact, 360-375px) ---------- */
@media (max-width: 375px) and (min-width: 341px) {
  .glass-card {
    padding: 20px;
  }

  .likert-scale {
    gap: 5px;
  }

  #radar-svg {
    max-width: 330px;
  }
}

/* ---------- Large phones and small tablets (430px+) ---------- */
@media (min-width: 430px) {
  #radar-svg {
    max-width: 420px;
  }

  .gauge-container {
    margin-bottom: 24px;
  }

  #gauge-svg {
    width: 240px;
    height: 240px;
  }
}

/* ---------- Tablets and desktop (600px+) ---------- */
@media (min-width: 600px) {
  .start-container,
  .demographic-container,
  .question-container,
  .result-container {
    max-width: 560px;
    margin: 0 auto;
  }

  .glass-card {
    padding: 28px;
  }

  #radar-svg {
    max-width: 470px;
  }

  #gauge-svg {
    width: 260px;
    height: 260px;
  }
}

/* ---------- Landscape orientation ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  .start-container {
    padding: 16px;
    padding-top: calc(var(--safe-top) + 16px);
    justify-content: flex-start;
    gap: 12px;
  }

  .logo-area {
    margin-bottom: 16px;
  }

  .question-container {
    padding: 12px var(--viewport-padding);
    padding-top: calc(var(--safe-top) + 12px);
  }

  .question-card {
    padding: 16px;
  }

  .question-text {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .likert-btn {
    min-height: 64px;
    padding: 10px 4px;
  }

  .intro-card {
    margin-bottom: 16px;
  }
}

/* ---------- Tall aspect ratio (19.5:9 and similar modern phones) ---------- */
@media (min-aspect-ratio: 9/19) and (max-width: 480px) {
  .question-card {
    justify-content: center;
    padding-top: 32px;
    padding-bottom: 24px;
  }

  .start-container {
    justify-content: center;
    padding-top: calc(var(--safe-top) + 32px);
  }
}

/* ---------- High Refresh Rate Display Optimization ---------- */
@media (prefers-reduced-motion: no-preference) {
  .likert-btn {
    transition:
      transform 0.12s cubic-bezier(0.25, 0.1, 0.25, 1),
      background 0.12s cubic-bezier(0.25, 0.1, 0.25, 1),
      border-color 0.12s cubic-bezier(0.25, 0.1, 0.25, 1),
      box-shadow 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  .progress-bar-fill {
    transition: width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  .btn-primary {
    animation: pulseGlow 3s ease-in-out infinite;
  }

  .btn-primary:active {
    animation: none;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Dark mode enhancements (OLED) ---------- */
@media (prefers-color-scheme: dark) {
  .glass-card {
    box-shadow:
      0 1px 0 0 rgba(255, 255, 255, 0.03) inset,
      0 12px 40px -8px rgba(0, 0, 0, 0.7);
  }

  .likert-btn.selected {
    box-shadow:
      0 0 28px rgba(99, 102, 241, 0.35),
      0 0 0 1px rgba(99, 102, 241, 0.4) inset;
  }

  .score-card {
    box-shadow:
      0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
      0 16px 48px -8px rgba(0, 0, 0, 0.6);
  }
}

/* ---------- Standalone (PWA) mode ---------- */
@media (display-mode: standalone) {
  .start-container {
    padding-top: calc(var(--safe-top) + 24px);
  }

  .question-container {
    padding-top: calc(var(--safe-top) + 16px);
  }

  .result-container {
    padding-top: calc(var(--safe-top) + 24px);
  }
}

/* ---------- Hover states for non-touch devices ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow:
      0 8px 32px var(--accent-glow),
      0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
    filter: brightness(1.05);
  }

  .btn-secondary:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-card-strong);
  }

  .likert-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
  }

  .advice-item:hover {
    background: rgba(255, 255, 255, 0.04);
  }

  .dim-row-interactive:hover {
    background: rgba(255, 255, 255, 0.03);
  }
}

/* ---------- Focus-visible for keyboard/assistive technology users ---------- */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.likert-btn:focus-visible,
.demographic-select:focus-visible,
.references-toggle:focus-visible,
.btn-home:focus-visible {
  outline: 3px solid var(--accent-secondary);
  outline-offset: 2px;
}

.likert-btn:focus-visible,
.likert-btn.keyboard-focus {
  outline: 3px solid var(--accent-secondary);
  outline-offset: -1px;
}

/* ---------- Android Chrome overscroll fix ---------- */
@supports (-webkit-overflow-scrolling: touch) {
  body {
    overscroll-behavior-y: contain;
  }
}

/* ---------- Backdrop-filter fallback for older Android ---------- */
@supports not (backdrop-filter: blur(1px)) {
  .glass-card {
    background: rgba(14, 14, 36, 0.92);
  }

  .btn-secondary {
    background: rgba(14, 14, 36, 0.85);
  }

  .history-summary-card {
    background: rgba(14, 14, 36, 0.92);
  }
}

/* ==========================================================================
   Print Stylesheet - Professional PDF Report
   ========================================================================== */
@media print {
  /* Reset dark theme to print-friendly light */
  :root {
    --bg-primary: #fff;
    --bg-secondary: #fff;
    --bg-card: #fff;
    --text-primary: #111;
    --text-secondary: #333;
    --text-muted: #666;
    --border-card: #ddd;
    --accent-primary: #4f46e5;
    --accent-secondary: #6366f1;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  body {
    background: #fff !important;
    color: #111 !important;
    font-size: 11pt !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Hide non-result screens and interactive elements */
  #screen-start,
  #screen-demographic,
  #screen-question,
  .bg-orbs,
  .btn-primary,
  .btn-secondary,
  .btn-home,
  .btn-share,
  .btn-share-img,
  .btn-data,
  .result-actions,
  .reminder-card,
  .data-portability,
  .collapsible-toggle,
  .collapsible-toggle-icon,
  .card-title-hint,
  .references-toggle-icon,
  .version-footer,
  #btn-report,
  #btn-share,
  #btn-share-image,
  #btn-risk-dna,
  #btn-retry,
  #btn-home,
  .social-proof-badge,
  .result-divider {
    display: none !important;
  }

  /* Make result screen visible and full width */
  #screen-result {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .screen {
    min-height: auto !important;
    padding: 0 !important;
  }

  .result-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Print header */
  .result-title {
    font-size: 22pt !important;
    text-align: center !important;
    margin-bottom: 6pt !important;
    color: #111 !important;
    page-break-after: avoid !important;
  }

  /* (result-summary-headline removed in v4.0) */

  /* Cards: remove glass effects, add borders */
  .glass-card {
    background: #fff !important;
    border: 1px solid #ddd !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    margin-bottom: 12pt !important;
    padding: 12pt !important;
    page-break-inside: avoid !important;
  }

  .card-title {
    color: #222 !important;
    font-size: 13pt !important;
    border-bottom: 1px solid #eee !important;
    padding-bottom: 6pt !important;
    margin-bottom: 8pt !important;
  }

  /* Expand all collapsible sections for print */
  .collapsible-body,
  .references-collapsible {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
  }

  [aria-expanded] {
    overflow: visible !important;
  }

  /* Gauge - scale down for print */
  .gauge-container {
    transform: scale(0.8) !important;
    margin: 0 auto !important;
  }

  .gauge-score {
    color: #111 !important;
  }

  /* Radar chart */
  .radar-container svg {
    max-width: 330px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* Dimension bars */
  .dim-bar-fill {
    border-radius: 3px !important;
  }

  /* Benchmark grid */
  .benchmark-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  /* Heatmap */
  .heatmap-cell {
    padding: 3pt 2pt !important;
    font-size: 8pt !important;
  }

  /* Trend chart */
  .trend-chart-container svg {
    max-width: 400px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* Page break control */
  .score-card {
    page-break-after: avoid !important;
  }

  .chart-card,
  .benchmark-card,
  .action-plan-card,
  .compound-card,
  .details-card,
  .trend-card {
    page-break-inside: avoid !important;
  }

  /* Print footer */
  .result-container::after {
    content: "はたらく環境診断 v4.0 - 研究に基づく職場環境分析ツール";
    display: block;
    text-align: center;
    font-size: 9pt;
    color: #999;
    margin-top: 24pt;
    padding-top: 8pt;
    border-top: 1px solid #ddd;
  }
}