/*
  Diagnosis Design Navigator - Prototype v2
  Soft Casual Theme
*/

:root {
  /* Colors - Light Theme */
  --clr-bg: #f8fafc;
  --clr-surface: #ffffff;
  --clr-border: #e2e8f0;
  --clr-text-main: #0f172a;
  --clr-text-sub: #64748b;
  
  --clr-primary: #1e293b; 
  --clr-accent: #3b82f6;  /* Blue */
  --clr-orange: #f97316;  /* Orange Highlight */
  --clr-green: #10b981;
  --clr-danger: #ef4444;

  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.05);
  --radius: 16px;
  
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s ease;
}

[data-theme="dark"] {
  --clr-bg: #0f172a;
  --clr-surface: #1e293b;
  --clr-border: #334155;
  --clr-text-main: #f8fafc;
  --clr-text-sub: #94a3b8;
  --clr-primary: #3b82f6; 
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
}

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

body {
  font-family: 'Noto Sans JP', 'Outfit', sans-serif;
  background-color: var(--clr-bg);
  color: var(--clr-text-main);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  line-height: 1.6;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

.bg-grid {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at top right, rgba(241, 245, 249, 1) 0%, rgba(226, 232, 240, 0.4) 100%);
  z-index: -1;
}

[data-theme="dark"] .bg-grid { opacity: 0.1; }

.app-container {
  width: 100%;
  max-width: 900px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--clr-border);
}

.title-main {
  font-size: 1.35rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  letter-spacing: -0.5px;
}
.title-highlight {
  display: inline-block;
  background-color: var(--clr-orange);
  color: #fff;
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 4px;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.1);
  transform: rotate(-2deg);
}

/* Utilities */
.hidden { display: none !important; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-16 { margin-bottom: 16px; }
.mt-24 { margin-top: 24px; }
.mt-12 { margin-top: 12px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.h-full { height: 100%; }

/* Buttons */
.clean-btn {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  font-weight: 600;
  transition: all var(--transition-fast);
  outline: none;
}
.clean-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.clean-btn-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--clr-text-sub);
  display: flex;
  justify-content: center;
  align-items: center;
}
.clean-btn-icon:hover {
  background-color: var(--clr-border);
  color: var(--clr-text-main);
}
.clean-btn-primary {
  background-color: var(--clr-primary);
  color: #fff;
  padding: 12px 24px;
  box-shadow: var(--shadow-sm);
}
.clean-btn-primary:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.clean-btn-text {
  color: var(--clr-text-sub);
  padding: 8px 16px;
}
.clean-btn-text:hover {
  color: var(--clr-text-main);
  background-color: var(--clr-border);
}
.clean-btn-outline {
  border: 1px solid var(--clr-border);
  color: var(--clr-text-main);
  padding: 12px 24px;
}
.clean-btn-outline:hover {
  border-color: var(--clr-text-main);
  background-color: var(--clr-border);
}
.btn-block {
  width: 100%;
}
.btn-lg {
  padding: 16px 32px;
  font-size: 1.1rem;
}

/* Cards */
.clean-card {
  background-color: var(--clr-surface);
  border-radius: var(--radius);
  padding: 32px;
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-normal);
}

/* Welcome Grid */
.welcome-grid {
  display: flex;
  gap: 40px;
  align-items: center;
}
.welcome-text-col { flex: 1; }
.welcome-avatar-col {
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 600px) {
  .welcome-grid { flex-direction: column; text-align: center; }
  .welcome-avatar-col { margin-bottom: -20px; }
  .welcome-title { font-size: 1.5rem !important; }
}

.welcome-badge {
  display: inline-block;
  background-color: var(--clr-border);
  color: var(--clr-text-main);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.welcome-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 16px;
  color: var(--clr-text-main);
}
.welcome-subtitle {
  color: var(--clr-text-sub);
  margin-bottom: 32px;
  font-size: 1rem;
}
.action-note {
  font-size: 0.8rem;
  color: var(--clr-text-sub);
  margin-top: 12px;
}

/* Stepper View */
.view-section {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.view-section.active {
  opacity: 1;
  transform: translateY(0);
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
}
.step-progress {
  flex: 1;
  max-width: 300px;
}
.step-phase-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--clr-accent);
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.step-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--clr-text-sub);
  margin-bottom: 8px;
}
.progress-bar-bg {
  background-color: var(--clr-border);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background-color: var(--clr-accent);
  width: 0%;
  transition: width 0.4s ease;
}

.mini-mascot-wrapper {
  width: 60px; height: 60px;
}

.question-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.4;
}
.question-desc {
  color: var(--clr-text-sub);
  margin-bottom: 24px;
  font-size: 0.95rem;
}

.options-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-btn {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background-color: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: var(--clr-text-main);
  text-align: left;
  transition: all var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.option-btn:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}
.option-btn:hover {
  background-color: var(--clr-bg);
  border-color: var(--clr-text-sub);
  transform: translateY(-1px);
}
.option-btn.selected {
  border-color: var(--clr-accent);
  background-color: rgba(59, 130, 246, 0.05);
  box-shadow: 0 0 0 1px var(--clr-accent);
}
[data-theme="dark"] .option-btn.selected {
  background-color: rgba(59, 130, 246, 0.15);
}

/* Transition Overlay */
.transition-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--clr-surface);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--clr-border);
}
.loader-spinner {
  width: 40px; height: 40px;
  border: 4px solid var(--clr-border);
  border-top-color: var(--clr-accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}
@keyframes spin { 100% { transform: rotate(360deg); } }


/* Results View */
.results-header-area {
  text-align: center;
  margin-bottom: 30px;
}
.doc-badge {
  display: inline-block;
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--clr-accent);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 16px;
}
[data-theme="dark"] .doc-badge { color: #60a5fa; }

/* Section Titles */
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 1.3rem;
  font-weight: 800;
}
.section-title i {
  width: 22px;
  height: 22px;
}

/* Results Hero */
.results-hero {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 600px) {
  .results-hero { flex-direction: column; text-align: center; }
}
.results-hero-avatar {
  flex-shrink: 0;
  width: 140px; height: 140px;
}
.results-hero-content { flex: 1; }
.insight-speech-bubble {
  background-color: rgba(249, 115, 22, 0.05);
  border-left: 4px solid var(--clr-orange);
  padding: 16px 20px;
  border-radius: 0 12px 12px 12px;
  margin-top: 16px;
  position: relative;
}
.insight-speech-bubble::before {
  content: '';
  position: absolute;
  top: 0; left: -16px;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: transparent rgba(249, 115, 22, 0.05) transparent transparent;
}
#res-main-message {
  font-size: 1.15rem; font-weight: 700; color: var(--clr-orange);
}

/* Premium Card */
.premium-card {
  background: linear-gradient(135deg, var(--clr-surface), rgba(59,130,246,0.05));
  border: 2px solid var(--clr-accent);
  box-shadow: 0 8px 30px rgba(59,130,246,0.15);
}
.premium-icon-box { background-color: rgba(59,130,246,0.15); color: var(--clr-accent); }

/* Gap Timeline */
.gap-timeline {
  display: flex; flex-direction: column; gap: 16px;
}
.gap-node {
  background: var(--clr-bg);
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.gap-node.insight-node { background: rgba(249,115,22,0.04); }
.gap-node.change-node { background: rgba(59,130,246,0.04); }

.node-label { font-size: 0.85rem; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.node-label.color-orange { color: var(--clr-orange); }
.node-label.color-blue { color: var(--clr-accent); }
.node-label i { width: 14px; height: 14px; }
.before-node p { font-size: 0.95rem; color: var(--clr-text-sub); text-decoration: line-through; line-height: 1.5; }
.insight-node p { font-size: 1.05rem; font-weight: 700; line-height: 1.5; }
.change-node p { font-size: 1.05rem; font-weight: 700; color: var(--clr-accent); line-height: 1.5; }

/* Specs Grid */
.specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 768px) { .specs-grid { grid-template-columns: 1fr; } }
.spec-item {
  background: var(--clr-bg); padding: 16px; border-radius: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.spec-text { font-size: 0.9rem; }

/* Flow */
.s-flow {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.s-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
}
.flow-items {
  display: flex; justify-content: space-between; align-items: center;
  background-color: var(--clr-bg);
  padding: 16px 20px;
  border-radius: 12px;
}
.s-from { font-size: 0.95rem; color: var(--clr-text-sub); text-decoration: line-through; }
.s-arrow { color: var(--clr-accent); width: 16px; height: 16px; margin: 0 8px; }
.s-to { font-size: 0.95rem; font-weight: 700; color: var(--clr-text-main); }

/* Results Layout Grid */
.results-layout-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
}
@media (max-width: 768px) { .results-layout-grid { grid-template-columns: 1fr; } }

.type-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.type-icon-box {
  width: 56px; height: 56px;
  background-color: rgba(59, 130, 246, 0.1);
  border-radius: 12px;
  display: flex; justify-content: center; align-items: center;
  color: var(--clr-accent);
}
.type-icon-large { width: 32px; height: 32px; }
.type-name { font-size: 1.6rem; font-weight: 900; color: var(--clr-accent); }
.type-reason p { font-size: 0.95rem; color: var(--clr-text-main); }

.second-choice-box {
  margin-top: 32px;
  padding: 16px 20px;
  background-color: rgba(148, 163, 184, 0.08);
  border-radius: 8px;
  border: 1px dashed var(--clr-border);
  font-size: 0.9rem;
  color: var(--clr-text-main);
}
.second-choice-box strong { color: var(--clr-text-main); font-weight: 800; }

.framework-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.framework-list li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--clr-border);
}
.framework-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.fw-label { font-size: 0.85rem; color: var(--clr-text-sub); font-weight: 700; display: flex; align-items: center; }
.fw-label i { width: 18px; height: 18px; margin-right: 6px; }
.fw-value { font-size: 1.1rem; color: var(--clr-text-main); }

.fitness-badge {
  display: inline-block;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 1px;
  padding: 0 4px;
  color: var(--clr-text-main);
  background-color: transparent;
}
.fitness-high { background: linear-gradient(transparent 60%, var(--clr-accent) 60%) !important; }
.fitness-medium { background: linear-gradient(transparent 60%, var(--clr-orange) 60%) !important; }
.fitness-low { background: linear-gradient(transparent 60%, var(--clr-text-sub) 60%) !important; }

.fitness-desc { font-size: 0.85rem; color: var(--clr-text-sub); }

.mockup-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  background-color: var(--clr-bg);
  border: 2px dashed var(--clr-border);
  border-radius: var(--radius);
  color: var(--clr-text-sub);
  gap: 12px;
}

.action-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}
@media (max-width: 600px) { .action-footer { flex-direction: column; } }

/* Avatar Animation (from v1) */
.peace-eye-svg { width: 100%; height: 100%; }
.peace-eye-container {
  transform-origin: 58px 42px;
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(2deg); }
}
.peace-pupil-group { transition: transform 0.3s ease; }
.state-normal .peace-pupil-group { transform: translate(0, 0); }
.state-thinking .peace-pupil-group { transform: translate(-3px, -5px); }
.state-happy .peace-pupil-group { transform: translate(0, -2px); }
.state-surprise .peace-pupil-group { transform: scale(0.7) translate(0, -5px); }

/* Blinking */
.peace-pupil-blink {
  animation: peace-blink 4s infinite;
  transform-origin: 58px 42px;
}
@keyframes peace-blink {
  0%, 95%, 100% { transform: scaleY(1); }
  97.5% { transform: scaleY(0.05); }
}

.peace-eye-happy { stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset 0.3s; }
.state-happy .peace-eye-happy { stroke-dashoffset: 0; }
.state-happy .peace-pupil-group { opacity: 0; }
.state-sad .peace-eye-sad { opacity: 1; }
.state-sad .peace-pupil-group { display: none; }

/* Dynamic Theme Colors for Avatar */
.theme-awareness .avatar-dynamic-fill { fill: var(--clr-accent); }
.theme-comparison .avatar-dynamic-fill { fill: #8b5cf6; }
.theme-branding .avatar-dynamic-fill { fill: #ec4899; }
.theme-learning .avatar-dynamic-fill { fill: var(--clr-green); }
.theme-matching .avatar-dynamic-fill { fill: #f59e0b; }
.theme-none .avatar-dynamic-fill { fill: var(--clr-text-sub); }

.avatar-dynamic-fill {
  transition: fill 0.3s ease;
}

/* Avatar Accessories */
.avatar-acc { display: none; }
.theme-awareness .avatar-acc-sprout { display: block; }
.theme-comparison .avatar-acc-glasses { display: block; }
.theme-branding .avatar-acc-crown { display: block; }
.theme-learning .avatar-acc-gradcap { display: block; }
.theme-matching .avatar-acc-heart { display: block; }

/* Icon Alignment Fixes */
.node-label i, .fw-label i, .s-label i, .section-title i, .gap-label i {
  display: block;
  line-height: 1;
}

/* Layout Tweaks */
.results-layout-grid {
  gap: 32px;
}
.gap-card-wrapper, .recommendation-card {
  padding: 32px;
}



/* Modals */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex; justify-content: center; align-items: center;
  padding: 20px;
}
.modal-content {
  position: relative;
  width: 100%; max-width: 500px;
  max-height: 90vh; overflow-y: auto;
}
.modal-close {
  position: absolute; top: 16px; right: 16px;
}
.modal-header { text-align: center; margin-bottom: 24px; }
.modal-icon-top { width: 48px; height: 48px; color: var(--clr-accent); margin-bottom: 16px; }
.modal-header h2 { font-size: 1.4rem; margin-bottom: 8px; }
.modal-header p { font-size: 0.9rem; color: var(--clr-text-sub); }

.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 8px;
}
.required { color: var(--clr-danger); font-size: 0.7rem; margin-left: 4px; }
.clean-input {
  width: 100%; padding: 12px;
  border: 1px solid var(--clr-border); border-radius: 8px;
  background-color: var(--clr-bg); color: var(--clr-text-main);
  font-family: inherit; font-size: 1rem;
}
.attachment-info {
  display: flex; align-items: center; gap: 8px;
  padding: 12px; background-color: rgba(59,130,246,0.1);
  border-radius: 8px; color: var(--clr-accent); font-size: 0.8rem; font-weight: 600;
  margin-bottom: 24px;
}
.thankyou-circle {
  width: 64px; height: 64px; border-radius: 50%;
  background-color: var(--clr-green); color: #fff;
  display: flex; justify-content: center; align-items: center; margin: 0 auto 24px;
}
.modal-thankyou { text-align: center; }
.modal-thankyou h2 { margin-bottom: 12px; }
.modal-thankyou p { margin-bottom: 24px; color: var(--clr-text-sub); }

[data-theme="dark"] .theme-toggle-btn .sun-icon { display: block; }
[data-theme="dark"] .theme-toggle-btn .moon-icon { display: none; }
.theme-toggle-btn .sun-icon { display: none; }

.app-footer {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
}
.copyright-text {
  font-size: 0.75rem; /* Lowered font size */
  color: var(--clr-text-sub);
  font-weight: 500;
}

/* ==========================================================================
   V3 RESULTS SCREEN LAYOUT
   ========================================================================== */

.results-header {
  text-align: center;
  margin-bottom: 40px;
}
.results-header .doc-badge {
  display: inline-block;
  margin-bottom: 12px;
}
.results-header .results-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--clr-text);
  line-height: 1.3;
}

.results-hero {
  display: flex;
  gap: 30px;
  align-items: stretch;
  margin-bottom: 40px;
}
.results-hero-avatar {
  flex: 0 0 160px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.results-hero-content {
  flex: 1;
}

/* Gap Flow */
.gap-flow-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.gap-step-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--clr-text-sub);
  margin-bottom: 4px;
}
.gap-context {
  display: flex;
  gap: 15px;
}
.gap-context-box {
  flex: 1;
  background: var(--clr-bg);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--clr-border);
}
.gap-context-box p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--clr-text);
}

.gap-primary {
  background: white;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--clr-border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}
.gap-primary h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.4;
  margin: 0;
}

.change-view-box {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #fdba74;
}
.change-view-box .gap-step-label {
  color: #c2410c;
}
.change-view-box p {
  font-size: 1.25rem;
  font-weight: 700;
  color: #9a3412;
  line-height: 1.4;
  margin: 0;
}

/* Logic & Prescription Grid */
.new-flow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 40px;
}
.res-card {
  background: white;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  border: 1px solid var(--clr-border);
  display: flex;
  flex-direction: column;
}
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 20px;
}

.change-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.timeline-node {
  background: var(--clr-bg);
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  text-align: center;
}
.timeline-from {
  border: 1px dashed var(--clr-border);
  color: var(--clr-text-sub);
}
.timeline-to {
  border: 1px solid var(--clr-accent);
  background: #f0fdfa; /* light teal */
  color: #0f766e;
}
.node-label {
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 4px;
  opacity: 0.8;
}
.node-text {
  font-size: 1.1rem;
  line-height: 1.4;
}
.timeline-arrow {
  color: var(--clr-text-sub);
}

.prescription-primary {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.type-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: white;
  background: var(--clr-text);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 4px;
}
.secondary-badge {
  background: var(--clr-text-sub);
}
.type-name {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--clr-accent);
  margin: 0;
}
.type-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--clr-text);
  margin-bottom: 24px;
}

.prescription-secondary {
  background: var(--clr-bg);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--clr-border);
  margin-bottom: 24px;
}
.second-type-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 4px 0 0 0;
}

.action-metrics-row {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  margin-top: auto;
}
.metric-box {
  flex: 1;
  background: var(--clr-bg);
  padding: 16px;
  border-radius: 12px;
}
.metric-box .s-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-top: 8px;
}

.fitness-box {
  background: white;
  border: 1px solid var(--clr-border);
  padding: 16px;
  border-radius: 12px;
}

@media (max-width: 768px) {
  .results-hero {
    flex-direction: column;
    align-items: center;
  }
  .gap-context {
    flex-direction: column;
  }
  .new-flow-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   V8 UI MODIFICATIONS
   ========================================================================== */

/* Change the View Layout (Avatar side-by-side) */
.change-view-wrapper {
  display: flex;
  gap: 20px;
  align-items: stretch;
}
.change-view-box {
  flex: 1;
}
.change-view-avatar {
  flex: 0 0 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* LOW Fitness Alternate View */
.low-fitness-box {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 24px;
}
.low-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #334155;
  margin: 0 0 12px 0;
}
.low-desc {
  font-size: 1rem;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 16px;
}
.low-action-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}
.low-action-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
}
.low-action-list li i {
  color: #10b981;
  width: 18px;
  height: 18px;
}
.low-note {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

/* No Gap Affirmation (Affirmation state overrides for Primary Gap) */
.gap-primary.affirmation-state {
  background: #f0fdf4;
  border-color: #86efac;
}
.gap-primary.affirmation-state h3 {
  color: #166534;
}
.change-view-box.affirmation-state {
  background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
  border-color: #5eead4;
}
.change-view-box.affirmation-state .gap-step-label {
  color: #0f766e;
}
.change-view-box.affirmation-state p {
  color: #115e59;
}

@media (max-width: 768px) {
  .change-view-wrapper {
    flex-direction: column-reverse;
  }
}

/* ==========================================================================
   V4 RESULTS UI REDESIGN
   ========================================================================== */
.results-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}

.res-card {
  background: white;
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  position: relative;
  overflow: hidden;
}

.gap-step-label {
  display: inline-block;
  background: var(--clr-bg);
  color: var(--clr-text-sub);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

/* 01 RESULT HERO */
.result-hero-card {
  text-align: center;
  background: linear-gradient(135deg, var(--clr-brand-light) 0%, white 100%);
  border: 2px solid var(--clr-brand);
  padding: 3rem 2rem;
}
.result-hero-sub {
  font-size: 1.125rem;
  color: var(--clr-text-sub);
  margin-bottom: 0.5rem;
}
.result-hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.type-icon-wrapper-large {
  background: var(--clr-brand);
  color: white;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px -5px var(--clr-brand-light);
}
.type-icon-large-svg {
  width: 40px;
  height: 40px;
}
.type-name-large {
  font-size: 2.25rem;
  font-weight: 900;
  color: var(--clr-text);
  margin: 0;
}
.result-hero-desc {
  font-size: 1.125rem;
  color: var(--clr-text);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* 02 WHY */
.why-card {
  background: #f8fafc;
}
.why-text {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--clr-text);
}

/* 04 CHANGE VIEW */
.change-view-wrapper {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.change-view-box {
  flex: 1;
  background: var(--clr-brand-light);
  padding: 2rem;
  border-radius: 1.5rem;
}
.change-view-box.affirmation-state {
  background: #f1f5f9;
}
.change-view-avatar {
  width: 120px;
  flex-shrink: 0;
}

/* 05 IDEA */
.idea-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--clr-text);
  margin-bottom: 1.5rem;
}
.idea-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.idea-flow-box {
  flex: 1;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 1rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}
.idea-flow-num {
  width: 24px;
  height: 24px;
  background: var(--clr-brand);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
}
.idea-flow-text {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--clr-text);
}
.idea-flow-arrow {
  color: #94a3b8;
  width: 24px;
  height: 24px;
}

/* 06 DESIGN */
.design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}
.design-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* 07 ALTERNATIVE & 08 SAMPLE */
.alternative-card {
  border: 2px dashed #cbd5e1;
  background: transparent;
  box-shadow: none;
}
.sample-card {
  background: #f1f5f9;
}
.sample-desc {
  color: var(--clr-text-sub);
  margin-bottom: 1rem;
}

/* LOW FITNESS ROUTE */
.low-hero-card {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  padding: 3rem 2rem;
}
.low-title-main {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--clr-text);
  line-height: 1.5;
}
.low-text {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--clr-text);
}
.low-action-card {
  background: #eff6ff; /* subtle blue */
}
.low-action-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.low-action-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--clr-text);
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.low-check {
  color: #3b82f6; /* blue */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .change-view-wrapper {
    flex-direction: column;
  }
  .change-view-avatar {
    order: -1;
  }
  .idea-flow {
    flex-direction: column;
  }
  .idea-flow-arrow {
    transform: rotate(90deg);
  }
}

/* ==========================================================================
   V5 BLOCK ARCHITECTURE UI
   ========================================================================== */
.results-container-v5 {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin: 0 auto;
  gap: 3rem;
  padding: 2rem 0;
}

.v5-block {
  position: relative;
}

.v5-label-sub {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--clr-brand);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.v5-label-main {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--clr-text);
  margin-bottom: 1.5rem;
}

/* BLOCK 1: HERO */
.block-hero {
  text-align: center;
  padding-bottom: 3rem;
  border-bottom: 1px solid #e2e8f0;
}
.block-hero .v5-label-sub {
  margin-bottom: 0.5rem;
}
.hero-title-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.hero-icon {
  width: 80px;
  height: 80px;
  background: var(--clr-brand-light);
  color: var(--clr-brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-icon-svg {
  width: 40px;
  height: 40px;
}
.hero-type-name {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--clr-text);
  line-height: 1.2;
}
.hero-concept {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 3rem;
  display: inline-block;
  background: #f1f5f9;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
}
.hero-why-box {
  background: white;
  border: 1px solid #e2e8f0;
  padding: 1.5rem 2rem;
  border-radius: 1rem;
  text-align: left;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05);
}
.hero-why-text {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--clr-text);
}

/* BLOCK 2: INSIGHT */
.block-insight {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 2rem;
  background: var(--clr-brand-light);
  border-radius: 1.5rem;
}
.block-insight.affirmation-state {
  background: #f8fafc;
}
.insight-content {
  flex: 1;
}
.insight-title {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--clr-text);
  margin-bottom: 1.5rem;
}
.change-from-to {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: white;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
}
.change-text-old {
  color: #64748b;
  font-size: 0.95rem;
  text-decoration: line-through;
}
.change-arrow {
  color: var(--clr-brand);
  width: 20px;
  height: 20px;
  margin-left: 1rem;
}
.change-text-new {
  font-weight: 800;
  color: var(--clr-text);
  font-size: 1.125rem;
}
.insight-avatar {
  width: 140px;
  flex-shrink: 0;
}

/* BLOCK 3: IDEA */
.block-idea {
  padding-bottom: 3rem;
  border-bottom: 1px solid #e2e8f0;
}
.idea-flow-v5 {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.v5-flow-box {
  flex: 1;
  background: white;
  border: 1px solid #e2e8f0;
  padding: 1.5rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);
}
.v5-flow-num {
  font-family: monospace;
  font-size: 1.5rem;
  font-weight: 900;
  color: #cbd5e1;
}
.v5-flow-text {
  font-weight: 700;
  font-size: 1rem;
  color: var(--clr-text);
}
.v5-flow-arrow {
  color: #cbd5e1;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* BLOCK 4: DESIGN */
.block-design {
  padding-bottom: 3rem;
  border-bottom: 1px solid #e2e8f0;
}
.design-table {
  border-top: 2px solid var(--clr-text);
}
.d-row {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
  padding: 1rem 0;
}
.d-th {
  width: 160px;
  font-weight: 700;
  color: #64748b;
  flex-shrink: 0;
}
.d-td {
  flex: 1;
  color: var(--clr-text);
  font-weight: 500;
}
.d-change {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.d-arrow {
  width: 16px;
  height: 16px;
  color: #cbd5e1;
}
.v5-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: white;
}
.badge-high { background: #f97316; } /* Orange/Warm */
.badge-medium { background: #10b981; } /* Emerald/Intermediate */
.badge-low { background: #3b82f6; } /* Blue/Cool */
/* BLOCK 5: SAMPLE */
.block-sample {
  padding: 3rem;
  background: #f8fafc;
  border-radius: 1.5rem;
}
.sample-desc-v5 {
  color: var(--clr-text-sub);
  margin-bottom: 2rem;
}
.v5-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* LOW ROUTE SPECIFIC */
.low-hero {
  border: none;
}
.low-text-v5 {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--clr-text);
}
.low-action-list-v5 {
  list-style: none;
  padding: 0;
  margin: 0;
}
.low-action-list-v5 li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.125rem;
  font-weight: 700;
  padding: 1rem 0;
  border-bottom: 1px dashed #e2e8f0;
}

@media (max-width: 768px) {
  .block-insight {
    flex-direction: column;
  }
  .insight-avatar {
    order: -1;
    margin: 0 auto 1.5rem;
  }
  .idea-flow-v5 {
    flex-direction: column;
  }
  .v5-flow-arrow {
    transform: rotate(90deg);
  }
  .d-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  .v5-actions {
    flex-direction: column;
  }
}

/* ==========================================================================
   V6 CREATIVE QUALITY UPGRADE
   ========================================================================== */

/* 1. RESULT VISUAL IDENTITY */
.block-hero {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 2rem;
  margin-bottom: 2rem;
  z-index: 1;
}

.hero-bg-layer {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: -1;
  opacity: 0.15;
  transition: all 1s ease;
}

/* Theme Backgrounds */
.theme-awareness .hero-bg-layer {
  background: radial-gradient(circle at center, transparent 0%, var(--clr-brand) 100%);
  filter: blur(20px);
}
.theme-comparison .hero-bg-layer {
  background-image: linear-gradient(var(--clr-brand) 1px, transparent 1px), linear-gradient(90deg, var(--clr-brand) 1px, transparent 1px);
  background-size: 40px 40px;
}
.theme-branding .hero-bg-layer {
  background: linear-gradient(45deg, var(--clr-brand), #ec4899, #8b5cf6);
  filter: blur(40px);
  opacity: 0.2;
}
.theme-learning .hero-bg-layer {
  background: radial-gradient(circle at top right, #fef08a 0%, transparent 60%);
  opacity: 0.3;
}
.theme-matching .hero-bg-layer {
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, var(--clr-brand-light) 10px, var(--clr-brand-light) 20px);
  opacity: 0.4;
}

/* 2. INSIGHT ANIMATION (PERSPECTIVE SHIFT) */
.insight-perspective-shift {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  padding: 1.5rem 0;
}
.shift-view {
  display: flex;
  flex-direction: column;
  position: relative;
}
.shift-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: #94a3b8;
  margin-bottom: 0.5rem;
}
.shift-text-old {
  font-size: 1.125rem;
  color: #64748b;
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
  filter: blur(0);
}
.shift-text-new {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--clr-brand);
  opacity: 0;
  transform: translateY(10px);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

/* Scroll Trigger Class (added via JS IntersectionObserver) */
.insight-perspective-shift.is-visible .shift-text-old {
  color: #cbd5e1;
  filter: blur(2px);
  transform: scale(0.95);
  transform-origin: left center;
}
.insight-perspective-shift.is-visible .shift-text-new {
  opacity: 1;
  transform: translateY(0);
}

.shift-connector {
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, #cbd5e1, var(--clr-brand));
  margin-left: 2rem;
  opacity: 0;
  transition: opacity 1s 0.2s;
}
.insight-perspective-shift.is-visible .shift-connector {
  opacity: 1;
}

/* 3. IDEA MINI-EXPERIENCE */
.idea-mini-experience {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mini-exp-box {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 15px -5px rgb(0 0 0 / 0.05);
  position: relative;
  border: 1px solid #f1f5f9;
}
.mini-exp-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  color: white;
  padding: 0.2rem 0.6rem;
  border-radius: 1rem;
  position: absolute;
  top: -10px;
  left: 1.5rem;
  letter-spacing: 0.05em;
}
.label-before { background: #94a3b8; }
.label-exp { background: var(--clr-brand); }
.label-discovery { background: #f59e0b; }

.mini-exp-text {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.6;
}

.mini-exp-arrow {
  text-align: center;
  color: #cbd5e1;
}
.mini-exp-arrow i {
  width: 24px;
  height: 24px;
}

/* 4. SAMPLE PREVIEW */
.sample-preview-container {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 1.5rem;
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.05);
}
.sample-graphic {
  flex: 1;
  background: #f8fafc;
  border-radius: 1rem;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #cbd5e1;
  position: relative;
  overflow: hidden;
}
.sample-graphic-inner {
  width: 60%;
  height: 60%;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgb(0 0 0 / 0.05);
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 0.5rem;
}
.sg-line { height: 8px; background: #e2e8f0; border-radius: 4px; }
.sg-line.w-full { width: 100%; }
.sg-line.w-half { width: 50%; }
.sg-line.w-brand { background: var(--clr-brand-light); width: 75%; }

.sample-info {
  flex: 1;
}
.sample-info-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--clr-text);
  margin-bottom: 0.5rem;
}
.sample-info-desc {
  color: var(--clr-text-sub);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .sample-preview-container {
    flex-direction: column;
  }
}

/* ==========================================================================
   START SCREEN COPY REFRESH
   ========================================================================== */
.welcome-badge-wrapper {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
}
.welcome-badge-sub {
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
}
.welcome-lead {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--clr-brand);
  margin-bottom: 0.5rem;
}
.welcome-hook {
  background: #f1f5f9;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  border-left: 4px solid var(--clr-text);
  margin-bottom: 2rem;
}
.welcome-hook p {
  font-weight: 800;
  color: var(--clr-text);
  margin: 0;
  font-size: 0.95rem;
}
.welcome-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 800;
  color: #64748b;
  margin-bottom: 1rem;
}
.welcome-meta i {
  width: 16px;
  height: 16px;
}
.meta-divider {
  color: #cbd5e1;
}

/* ==========================================================================
   START SCREEN COMPACT LAYOUT OVERRIDES
   ========================================================================== */
.welcome-badge-wrapper {
  margin-bottom: 0.75rem;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}
.welcome-lead {
  margin-bottom: 0.25rem;
  font-size: 1.15rem;
}
.welcome-title {
  font-size: 2.25rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.welcome-subtitle {
  margin-bottom: 1.5rem;
}
.welcome-hook {
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}
.welcome-action {
  margin-top: 1.5rem;
}
.welcome-meta {
  margin-bottom: 0.75rem;
}

@media (max-width: 768px) {
  .welcome-title { font-size: 1.75rem; }
  .welcome-badge-wrapper { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}

/* ==========================================================================
   START SCREEN PIXEL-PERFECT TWEAKS
   ========================================================================== */
/* 1. Vertically center badge text */
.welcome-badge-wrapper .welcome-badge {
  margin-bottom: 0; /* Override the default 16px bottom margin */
  display: flex;
  align-items: center;
}

/* 2. Prevent title wrapping on desktop */
@media (min-width: 769px) {
  .welcome-title {
    white-space: nowrap;
    font-size: 2.1rem; /* Slightly smaller to ensure it fits one line without wrapping */
  }
}

/* 3. Left-align meta and even out margins */
.welcome-meta {
  justify-content: flex-start;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Mobile specific tweaks */
@media (max-width: 768px) {
  .welcome-title {
    font-size: 1.75rem;
    white-space: normal; /* Allow natural wrap on small screens */
  }
  .welcome-meta {
    justify-content: center; /* Keep centered on mobile for balance */
  }
  .welcome-badge-wrapper {
    align-items: center;
  }
}

/* ==========================================================================
   V7 BACKGROUND & LAYERING ARCHITECTURE
   ========================================================================== */
/* 1. Remove max-width from main container to allow full-width bands */
.results-container-v7 {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 2. Band styles and subtle backgrounds */
.v7-block {
  width: 100%;
  position: relative;
  padding: 4rem 1.5rem;
  overflow: hidden;
}

.block-hero {
  padding-bottom: 2rem;
  border-bottom: none;
}

.block-why {
  padding-top: 0;
  padding-bottom: 3rem;
}

.block-insight {
  background-color: #f8fafc; /* Very light slate */
  padding: 5rem 1.5rem;
}

.block-idea {
  background-color: white;
  padding: 5rem 1.5rem;
  border-bottom: none;
}

.block-design {
  background-color: #f1f5f9; /* Slightly darker slate for functional mode */
  padding: 4rem 1.5rem;
  border-bottom: none;
}

.block-sample {
  background-color: white;
  padding: 5rem 1.5rem;
}

/* 3. Inner Content Widths (Grid rhythm) */
.v7-inner {
  margin: 0 auto;
  width: 100%;
}
.inner-wide {
  max-width: 800px;
}
.inner-medium {
  max-width: 700px;
}
.inner-narrow {
  max-width: 600px;
}

/* 4. INSIGHT Grid Subtle Overlay */
.insight-grid-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(148, 163, 184, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.1) 1px, transparent 1px);
  pointer-events: none;
  z-index: 0;
}
.insight-flex-inner {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

/* 5. INSIGHT Perspective Shift (Restore FROM readability) */
.insight-perspective-shift .shift-text-old {
  color: #64748b;
  font-size: 1.125rem;
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
  filter: none;
}
.insight-perspective-shift.is-visible .shift-text-old {
  color: #64748b; /* Keep it readable */
  transform: translateY(-5px); /* Gentle shift up instead of blur/shrink */
  opacity: 0.8;
}
.insight-perspective-shift .shift-text-new {
  color: var(--clr-brand);
  font-size: 1.5rem;
  font-weight: 900;
  opacity: 0;
  transform: translateY(15px);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
.insight-perspective-shift.is-visible .shift-text-new {
  opacity: 1;
  transform: translateY(0);
}
.insight-perspective-shift .shift-connector {
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--clr-brand));
  margin-left: 2rem;
  opacity: 0;
  transition: opacity 1s 0.2s;
}
.insight-perspective-shift.is-visible .shift-connector {
  opacity: 1;
}

/* Responsive adjustments for flex inner */
@media (max-width: 768px) {
  .insight-flex-inner {
    flex-direction: column;
  }
  .v7-block {
    padding: 3rem 1.5rem;
  }
}

/* ==========================================================================
   FINAL ADJUSTMENTS (INSIGHT, IDEA, DESIGN)
   ========================================================================== */

/* 1. INSIGHT FROM Readability */
.insight-perspective-shift.is-visible .shift-text-old {
  color: #475569 !important; /* Slightly darker gray for better readability */
  opacity: 1 !important; /* Ensure no fade out */
  filter: none !important; 
  transform: translateY(-4px) scale(0.98) !important; /* Subtle push back, not a blur/fade */
}

/* 2. IDEA Middle Section (Experience) Bare Style */
.mini-exp-bare {
  padding: 1.5rem;
  position: relative;
  text-align: center;
}
.mini-exp-bare .mini-exp-label {
  position: static;
  display: inline-block;
  margin-bottom: 0.75rem;
}
.mini-exp-bare .mini-exp-text {
  color: #64748b; /* Slightly softer text for the process */
}

/* 3. DESIGN Background */
.block-design {
  background-color: #fbfcfd !important; /* Extremely faint gray, almost white */
}

/* ==========================================================================
   FINAL ROLLBACK & ADJUSTMENTS
   ========================================================================== */

/* 1. RESULT Hero: Make it more compact and add contrast */
/* 1. RESULT Hero: Make it more compact and add contrast */
/* Disabled to revert to original design */

/* 2. INSIGHT: Make it more compact */
.block-insight {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

/* 3. IDEA: Make it more compact & fix EXPERIENCE label visibility */
.block-idea {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
.mini-exp-bare .mini-exp-label {
  color: white !important; /* Ensure it is visible */
  background: var(--clr-brand) !important;
  padding: 0.2rem 0.8rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: bold;
}
.mini-exp-bare .mini-exp-text {
  color: var(--clr-text-main) !important; /* Ensure text is visible */
  font-size: 1.125rem;
  font-weight: 700;
}

/* 4. Restart Button */
.restart-wrapper {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ==========================================================================
   V8 DARK MODE FIX & COMPACTNESS
   ========================================================================== */

/* 1. Dark Mode Fixes for Backgrounds */
body.dark-mode .block-hero {
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent) !important;
}
body.dark-mode .block-hero .v7-inner {
  background: var(--clr-surface) !important;
  border-color: var(--clr-border) !important;
}
body.dark-mode .block-insight {
  background-color: rgba(255,255,255,0.02) !important;
}
body.dark-mode .block-idea {
  background-color: transparent !important;
}
body.dark-mode .block-design {
  background-color: rgba(255,255,255,0.01) !important;
}
body.dark-mode .block-sample {
  background-color: transparent !important;
}

/* Fix IDEA labels and text in Dark Mode */
.mini-exp-bare .mini-exp-label {
  color: #fff !important;
}
.mini-exp-bare .mini-exp-text {
  color: var(--clr-text-main) !important;
}
body.dark-mode .insight-perspective-shift.is-visible .shift-text-old {
  color: var(--clr-text-sub) !important;
}

/* 2. RESULT Background Color Tint */
.block-hero {
  animation: fadeIn 0.8s ease forwards;
}
body.theme-awareness .block-hero { background: linear-gradient(to bottom, rgba(59, 130, 246, 0.1), transparent) !important; }
body.theme-comparison .block-hero { background: linear-gradient(to bottom, rgba(16, 185, 129, 0.1), transparent) !important; }
body.theme-branding .block-hero { background: linear-gradient(to bottom, rgba(236, 72, 153, 0.1), transparent) !important; }
body.theme-learning .block-hero { background: linear-gradient(to bottom, rgba(234, 179, 8, 0.1), transparent) !important; }
body.theme-matching .block-hero { background: linear-gradient(to bottom, rgba(139, 92, 246, 0.1), transparent) !important; }

/* 3. INSIGHT: More Compact */
.block-insight {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}
.insight-flex-inner {
  align-items: center !important; /* Vertically align avatar and text */
}

/* 4. IDEA: More Compact */
.block-idea {
  padding-top: 1.5rem !important;
  padding-bottom: 2rem !important;
}
.idea-mini-experience {
  gap: 0.5rem !important; /* Reduce gap between boxes */
}
.mini-exp-box {
  padding: 1rem 1.5rem !important; /* Tighter padding inside box */
}
.mini-exp-bare {
  padding: 1rem 1.5rem !important;
}
.mini-exp-arrow {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}

/* 5. SAMPLE: Reference Link Style */
.ref-links-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.ref-link-card {
  display: flex;
  flex-direction: column;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 1rem;
  text-decoration: none;
  color: var(--clr-text-main);
  transition: all 0.2s;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ref-link-card:hover {
  border-color: var(--clr-brand);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.ref-link-img-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--clr-surface-alt, #f8fafc);
  border-bottom: 1px solid var(--clr-border);
  position: relative;
  overflow: hidden;
}
.ref-link-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--clr-text-sub);
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.6;
}
.ref-link-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ref-link-content {
  padding: 1.25rem;
  position: relative;
}
.ref-link-title {
  font-weight: 700;
  font-size: 1.1rem;
  padding-right: 1.5rem;
  line-height: 1.4;
}
.ref-link-url {
  font-size: 0.75rem;
  color: var(--clr-text-sub);
  margin-top: 0.5rem;
  word-break: break-all;
}
.ref-link-icon-card {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  color: var(--clr-brand);
  width: 1.25rem;
  height: 1.25rem;
}

/* ==========================================================================
   V8 LAYOUT FIXES & PROPER DARK MODE SELECTOR
   ========================================================================== */

/* 1. Reduce huge gap between DESIGN and SAMPLE */
.block-design {
  padding-bottom: 1.5rem !important; /* Cut padding in half */
}
.block-sample {
  padding-top: 1.5rem !important; /* Cut padding in half */
}

/* 2. Fix Dark Mode overrides (using correct [data-theme="dark"] selector) */
[data-theme="dark"] .block-hero {
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent) !important;
}
[data-theme="dark"] .block-hero .v7-inner {
  background: var(--clr-surface) !important;
  border-color: var(--clr-border) !important;
}
[data-theme="dark"] .block-insight {
  background-color: rgba(255,255,255,0.02) !important;
}
[data-theme="dark"] .block-idea {
  background-color: transparent !important;
}
[data-theme="dark"] .block-design {
  background-color: transparent !important;
}
[data-theme="dark"] .block-sample {
  background-color: transparent !important;
}

/* Fix IDEA labels and text in Dark Mode */
[data-theme="dark"] .mini-exp-bare .mini-exp-label {
  color: #fff !important;
}
[data-theme="dark"] .mini-exp-bare .mini-exp-text {
  color: var(--clr-text-main) !important;
}
[data-theme="dark"] .insight-perspective-shift.is-visible .shift-text-old {
  color: var(--clr-text-sub) !important;
}

/* Fix DESIGN table in Dark Mode to ensure visibility */
[data-theme="dark"] .d-td, 
[data-theme="dark"] .d-th {
  border-color: var(--clr-border) !important;
  color: var(--clr-text-main) !important;
}

/* ==========================================================================
   FINAL TWEAKS: Reduce INSIGHT Gap
   ========================================================================== */

/* The user wants the gap between FROM and TO cut in half */
.insight-perspective-shift {
  gap: 0.5rem !important; /* Extremely small gap between elements */
  padding: 0 !important;
  min-height: 0 !important;
}

.insight-perspective-shift .shift-connector {
  height: 20px !important; /* Cut the line height in half */
  margin: 0 0 0 1rem !important; /* Reduce margins around the line */
}

/* Ensure the text old margin is minimal */
.shift-view {
  margin: 0 !important;
}
.shift-text-old {
  margin-bottom: 0 !important;
}
.shift-label {
  margin-bottom: 0.25rem !important; /* Tighter label margin */
}

/* ==========================================================================
   FIX EXPERIENCE TEXT COLOR
   ========================================================================== */

/* Light mode fallback - ensure it's dark text instead of white */
.mini-exp-bare .mini-exp-label {
  color: #475569 !important; /* Dark Slate */
  background: transparent !important;
  border: 1px solid #cbd5e1 !important;
}

.mini-exp-bare .mini-exp-text {
  color: #1e293b !important; /* Very dark slate */
}

/* Dark mode fix */
[data-theme="dark"] .mini-exp-bare .mini-exp-label {
  color: #94a3b8 !important; /* Light Slate */
  border: 1px solid #475569 !important;
}

[data-theme="dark"] .mini-exp-bare .mini-exp-text {
  color: #f8fafc !important; /* Almost white */
}

/* ==========================================================================
   RESTORE EYE VISIBILITY
   ========================================================================== */

/* Remove the opacity:0 that was hiding the eye in state-happy */
.state-happy .peace-pupil-group {
  opacity: 1 !important;
}

/* Also ensure sad state doesn't hide it, just in case */
.state-sad .peace-pupil-group {
  display: block !important;
}

/* ==========================================================================
   TWEAKS: Reduce margins around hero icon
   ========================================================================== */

.hero-title-area {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
  gap: 0.5rem !important; /* Tighten space between icon and text significantly */
}

/* ==========================================================================
   FIX: Reduce inner margins/padding of hero icon
   ========================================================================== */

.hero-icon {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin-bottom: -0.25rem !important; /* Pull the text below it slightly closer */
}

.hero-icon-svg {
  width: 48px !important;
  height: 48px !important;
  /* Make sure there is no extra padding inside the SVG itself */
  margin: 0 !important;
  padding: 0 !important;
  color: var(--clr-text-main) !important;
}

/* ==========================================================================
   TWEAKS: Add space between title and concept
   ========================================================================== */

.hero-concept {
  margin-top: 0.75rem !important; /* Add about half a character's worth of space */
}

/* ==========================================================================
   CUSTOM SVG ICONS & NEW INSIGHT BACKGROUND
   ========================================================================== */

/* Style for the custom SVG icons */
.hero-custom-svg {
  width: 56px;
  height: 56px;
  color: var(--clr-brand);
}
[data-theme="dark"] .hero-custom-svg {
  color: var(--clr-brand-light);
}

/* New distinctive background for INSIGHT section */
.block-insight {
  /* Replace the plain background with a soft radial/linear gradient pattern */
  background: 
    radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(139, 92, 246, 0.04) 0%, transparent 50%),
    #f8fafc !important;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.01);
}

[data-theme="dark"] .block-insight {
  background: 
    radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
    rgba(255,255,255,0.02) !important;
  border-color: var(--clr-border) !important;
}

/* --- NEW DIAGNOSTIC REPORT STYLES --- */
.results-container-v7 {
  max-width: 1000px;
  margin: 2rem auto;
  background: #f8fafc;
  padding: 1rem;
  border-radius: 20px;
}
#standard-result-route {
  background: #ffffff;
  border-radius: 16px;
  padding: 3rem;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05);
  border: 1px solid #f1f5f9;
}
.report-header {
  margin-bottom: 2.5rem;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 1.5rem;
}
.report-badge {
  display: inline-block;
  background: #eff6ff;
  color: #3b82f6;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
  margin-bottom: 1rem;
}
.report-title {
  font-size: 2rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.5rem;
}
.report-subtitle {
  color: #64748b;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.report-meta {
  display: flex;
  gap: 1.5rem;
  font-size: 0.8rem;
  color: #94a3b8;
}
.report-section {
  margin-bottom: 2.5rem;
}
.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #3b82f6;
  color: #fff;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 800;
}

/* Fitness */
.fitness-section {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.fitness-card {
  background: #f8fafc;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  flex: 0 0 240px;
  border: 1px solid #f1f5f9;
}
.fitness-label {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.fitness-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.5rem;
}
.fitness-stars {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  color: #f59e0b;
  margin-bottom: 0.5rem;
}
.fitness-stars i { width: 20px; height: 20px; }
.star-filled { fill: currentColor; }
.star-half { fill: currentColor; opacity: 0.5; }
.fitness-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.why-card {
  flex: 1;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #334155;
  background: #fff;
}

/* Grid layout */
.report-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

/* Type Card */
.type-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
}
.type-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
  flex-shrink: 0;
}
.type-icon-wrapper svg { width: 32px; height: 32px; }
.type-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.25rem;
}
.type-concept {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.5;
}

/* Insight Card */
.insight-card {
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}
.insight-shift {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.shift-box {
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
}
.shift-box.highlight {
  background: #eff6ff;
}
.shift-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 0.25rem;
  display: block;
}
.shift-box.highlight .shift-badge { color: #3b82f6; }
.shift-desc {
  font-size: 0.9rem;
  color: #334155;
  font-weight: 600;
}
.shift-arrow {
  text-align: center;
  color: #cbd5e1;
}
.shift-arrow svg { width: 20px; height: 20px; margin: 0 auto; }

/* Design Table */
.design-table-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}
.report-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.report-table th, .report-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.9rem;
}
.report-table tr:last-child th, .report-table tr:last-child td {
  border-bottom: none;
}
.report-table th {
  width: 35%;
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
}
.report-table td {
  background: #fff;
  color: #0f172a;
}
.d-change-flex {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Idea Experience Grid */
.experience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
.exp-card {
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}
.exp-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.75rem;
  background: #f1f5f9;
  color: #64748b;
}
.exp-text {
  font-size: 0.9rem;
  color: #334155;
  line-height: 1.6;
}

/* Impression Box */
.impression-box {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: #faf5ff;
  border: 1px solid #f3e8ff;
  border-radius: 12px;
  align-items: flex-start;
}
.impression-icon {
  color: #a855f7;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.impression-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #7e22ce;
  margin-bottom: 0.25rem;
}
.impression-text {
  font-size: 0.9rem;
  color: #6b21a8;
  line-height: 1.6;
}

/* Next Action Grid */
.next-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.action-card {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  background: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
}
.action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05);
}
.action-icon-circle {
  width: 56px;
  height: 56px;
  background: #eff6ff;
  color: #3b82f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.action-icon-circle svg { width: 28px; height: 28px; }
.action-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.5rem;
}
.action-desc {
  font-size: 0.85rem;
  color: #64748b;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.action-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #3b82f6;
  text-decoration: none;
}
.action-link svg { width: 16px; height: 16px; }
.action-link:hover { text-decoration: underline; }

/* Bottom Actions */
.report-bottom-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #f1f5f9;
}
.action-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}
.action-btn-outline:hover { background: #f8fafc; border-color: #94a3b8; }
.action-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  background: #3b82f6;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s;
}
.action-btn-primary:hover { background: #2563eb; }

@media (max-width: 768px) {
  .report-grid-2col, .fitness-section, .experience-grid, .next-action-grid, .report-bottom-actions {
    display: flex;
    flex-direction: column;
  }
  #standard-result-route { padding: 1.5rem; }
  .fitness-card { flex: auto; }
  .report-table th { width: auto; display: block; background: #f8fafc; border-bottom: none; padding-bottom: 0.25rem; }
  .report-table td { display: block; border-bottom: 1px solid #e2e8f0; padding-top: 0.25rem; }
}

/* --- DOCUMENT STYLE TWEAKS FOR ORIGINAL LAYOUT --- */
.v7-block {
  border-bottom: 1px solid #f1f5f9;
  padding: 2.5rem 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.bg-grid {
  display: none !important; /* Hide old gradients completely */
}
.title-main {
  color: #0f172a !important;
}
.results-container-v7 {
  margin-top: 0.5rem !important; /* Halve the top margin again */
}
.v7-block:last-child {
  border-bottom: none;
}
.insight-grid-bg {
  display: none !important; /* Hide old heavy backgrounds */
}
.v5-label-sub {
  color: #3b82f6 !important; /* Blue accent like the reference */
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.v5-label-main {
  font-weight: 800;
  color: #0f172a;
}
.insight-content {
  background: transparent !important;
}

/* 2. WHY block tweaks */
.block-hero {
  padding-bottom: 0.5rem !important; /* minimize bottom gap */
  border-bottom: none !important; /* Remove line above WHY */
}
.block-why {
  padding-top: 0.5rem !important; /* Reduce space between RESULT and WHY to minimum */
}
.hero-why-box {
  background: #f8fafc !important;
  border: none !important;
  padding: 1.5rem !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.hero-why-text {
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  color: #475569 !important;
  line-height: 1.7 !important;
}

/* 3. INSIGHT block tweaks */
.insight-title {
  font-weight: 600 !important;
  font-size: 1.25rem !important;
  color: #1e293b !important;
}
.insight-perspective-shift {
  gap: 0.25rem !important; /* reduce gap if it uses flex */
}
.insight-perspective-shift .shift-text-new {
  font-weight: 600 !important;
}
.insight-perspective-shift .shift-connector {
  display: none !important; /* Hide connector completely */
}

/* 4. IDEA block tweaks */
.mini-exp-box {
  background: #ffffff !important; /* White background looks cleaner with a border */
  border: 1px solid #0f172a !important; /* Black/Dark slate border as requested */
  box-shadow: none !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
}
.mini-exp-bare {
  background: #eff6ff !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
}

/* 5. DESIGN table tweaks */
.design-table {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02) !important;
}
.d-row {
  border-bottom: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: stretch !important;
  padding: 0 !important; /* Remove original row padding */
}
.d-row:last-child {
  border-bottom: none !important;
}
.d-th {
  background: #f8fafc !important;
  color: #475569 !important;
  border-right: 1px solid #e2e8f0 !important;
  padding: 0.5rem 1rem !important; /* Compact vertically further */
  font-weight: 600 !important;
  flex: 0 0 30% !important;
  display: flex !important;
  align-items: center !important;
}
.d-td {
  background: #ffffff !important;
  padding: 0.5rem 1rem !important; /* Compact vertically further */
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
}

/* 6. SAMPLE text margin tweaks */
.sample-info-desc {
  margin-bottom: 0.5rem !important;
}
.ref-links-list {
  margin-top: 0.5rem !important;
  padding-top: 0 !important;
}
.ref-link-card {
  border: 1px solid #0f172a !important; /* Make border black */
}

/* 7. LOGO BRUSHUP */
.ref-links-list {
  margin-top: 0.5rem !important;
  padding-top: 0 !important;
}
.ref-link-card {
  border: 1px solid #0f172a !important; /* Make border black */
}
.ref-link-url {
  word-break: break-all !important; /* Prevent long URLs from stretching the card */
}

/* Mobile optimizations for SAMPLE */
/* Mobile optimizations for SAMPLE */
@media (max-width: 768px) {
  .sample-preview-container {
    border: none !important;
    border-radius: 0 !important;
    margin-left: -1.5rem !important;
    margin-right: -1.5rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  .ref-links-list {
    grid-template-columns: 1fr !important; /* Prevent 280px minmax from overflowing small screens */
  }
}

/* 8. BOTTOM ACTIONS (Center & Divider) */
.v5-actions {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 3rem !important;
  padding-top: 2.5rem !important;
  border-top: 1px solid #e2e8f0 !important;
}
.restart-wrapper {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 1rem !important;
  margin-top: 1rem !important;
}

/* 9. BRUSHUP PHASE 2: UI Enhancements */
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.float-anim { animation: float-slow 4s ease-in-out infinite; }
.float-anim-slow { animation: float-slow 5s ease-in-out infinite; }

/* FV Enhancements */
.welcome-card { position: relative; overflow: hidden; }
.fv-motif-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.fv-motif-item { position: absolute; opacity: 0.04; color: #0f172a; font-family: sans-serif; font-weight: 900; }
.fv-motif-item.dot { width: 12px; height: 12px; border-radius: 50%; background: #0f172a; }
.fv-motif-item.line { width: 150px; height: 2px; background: #0f172a; transform: rotate(-45deg); }
.fv-motif-item.text { font-size: 8rem; line-height: 1; }
.dot-1 { top: 10%; left: 5%; }
.dot-2 { bottom: 20%; left: 15%; }
.dot-3 { top: 30%; right: 10%; }
.line-1 { bottom: 15%; right: -50px; }
.text-1 { top: -20px; right: 20%; transform: rotate(15deg); }
.text-2 { bottom: 10%; left: -10px; transform: rotate(-20deg); }

.welcome-grid { position: relative; z-index: 1; }
.welcome-teaser { margin-top: 2.5rem; border-top: 1px dashed #e2e8f0; padding-top: 1.5rem; }
.welcome-teaser-label { font-size: 0.8rem; font-weight: 800; color: #64748b; margin-bottom: 0.8rem; letter-spacing: 0.05em; }
.welcome-teaser-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.teaser-tag { font-size: 0.75rem; padding: 0.3rem 0.8rem; border-radius: 99px; background: white; border: 1px solid #e2e8f0; color: #475569; font-weight: 700; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }

/* Question View Enhancements */
.question-header-new { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 2.5rem; }
.question-titles { flex: 1; }
.question-title { font-size: 1.6rem !important; font-weight: 800 !important; margin-bottom: 0.5rem !important; line-height: 1.4 !important; }
.mini-mascot-wrapper { width: 70px; flex-shrink: 0; margin: 0 !important; }
.step-progress-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #f1f5f9; text-align: center; opacity: 0.7; transform: scale(0.9); transform-origin: top center; }
.step-progress-bottom .progress-bar-bg { margin: 0.5rem auto 0; max-width: 200px; }
.step-progress-bottom .step-phase-label, .step-progress-bottom .step-label { text-align: center; justify-content: center; }

/* Options Interactions */
.option-item { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); border-width: 2px !important; position: relative; overflow: hidden; }
.option-item::before { content: ''; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; border: 2px solid #cbd5e1; transition: all 0.2s; }
.option-item { padding-left: 3.5rem !important; }
.option-item:hover { transform: translateY(-2px); box-shadow: 0 8px 15px rgba(0,0,0,0.04); border-color: #94a3b8 !important; }
.option-item.selected { background-color: #fffbeb !important; border-color: #f97316 !important; transform: scale(1.02); box-shadow: 0 10px 20px rgba(249, 115, 22, 0.1); }
.option-item.selected::before { border-color: #f97316; background-color: #f97316; box-shadow: inset 0 0 0 4px #fffbeb; }
.options-grid.has-selection .option-item:not(.selected) { opacity: 0.5; filter: grayscale(100%); transform: scale(0.98); }

/* Next Button & Avatar States */
.btn-next-styled:not(:disabled) { background: #0f172a !important; color: white !important; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.3) !important; transform: translateY(-2px); animation: pulse-shadow 2s infinite; }
@keyframes pulse-shadow { 0% { box-shadow: 0 0 0 0 rgba(15, 23, 42, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(15, 23, 42, 0); } 100% { box-shadow: 0 0 0 0 rgba(15, 23, 42, 0); } }
.avatar-interactive.thinking { transform: rotate(-8deg) translateY(2px); filter: brightness(0.95); }
.avatar-interactive.found { transform: scale(1.1) translateY(-5px); }

/* Result View Enhancements */
.hero-bg-layer { background-image: radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.05) 0%, transparent 70%), repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 20px, rgba(15, 23, 42, 0.02) 20px, rgba(15, 23, 42, 0.02) 21px) !important; opacity: 1 !important; }
.hero-type-name { font-size: 2.2rem !important; }
.hero-icon-svg { width: 64px !important; height: 64px !important; color: #f97316 !important; }

/* WHY Block */
.block-why .v7-inner { background: white; border: 1px solid #e2e8f0; border-radius: 1.5rem; padding: 2.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.03); position: relative; border-left: 6px solid #f97316; }

/* INSIGHT Block */
.insight-conclusion { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin-bottom: 1rem; display: flex; gap: 0.75rem; align-items: flex-start; line-height: 1.5; }
.insight-conclusion i { color: #f97316; flex-shrink: 0; margin-top: 0.2rem; }
.insight-supplement { font-size: 1rem; color: #475569; line-height: 1.8; margin-left: 2.25rem; }

/* IDEA Block (Flow) */
.idea-flow-container { display: flex; flex-direction: column; gap: 0; position: relative; }
.idea-flow-card { position: relative; z-index: 2; background: white; margin-bottom: 0 !important; }
.idea-flow-arrow { display: flex; justify-content: center; padding: 1.5rem 0; color: #94a3b8; z-index: 1; margin: -1rem 0; }

/* DESIGN Block (Cards) */
.design-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.design-card { background: #f8fafc; padding: 1.5rem; border-radius: 1rem; border: 1px solid #e2e8f0; display: flex; flex-direction: column; }
.design-card-label { font-size: 0.75rem; font-weight: 800; color: #64748b; letter-spacing: 0.05em; margin-bottom: 0.5rem; text-transform: uppercase; }
.design-card-value { font-size: 1.05rem; font-weight: 700; color: #0f172a; line-height: 1.5; }

/* Intermediate CTA */
.intermediate-cta { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px dashed #cbd5e1; text-align: center; }
.btn-ghost { background: transparent; border: 2px solid #0f172a; color: #0f172a; font-weight: 800; border-radius: 9999px; padding: 0.75rem 2rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s; font-size: 0.95rem; }
.btn-ghost:hover { background: #0f172a; color: white; transform: translateY(-2px); }

/* Mobile adjustments for Phase 2 */
@media (max-width: 768px) {
  .fv-motif-item.text { font-size: 5rem; }
  .question-header-new { flex-direction: column; gap: 1rem; }
  .mini-mascot-wrapper { width: 60px; }
  .block-why .v7-inner { padding: 1.5rem; }
  .insight-supplement { margin-left: 0; margin-top: 0.5rem; }
/* Avatar Roles */
#avatar-welcome { transform: translateY(-5px) rotate(-8deg); transform-origin: bottom center; }
#avatar-mini { transform: translateY(5px) rotate(10deg); transform-origin: bottom center; }
#avatar-result { transform: scale(1.3) rotate(-15deg); transform-origin: bottom center; }
}

/* 11. BRUSHUP PHASE 4: Final Polish */
/* INSIGHT Vertical Shift */
.insight-perspective-shift { display: flex !important; flex-direction: column !important; gap: 1rem !important; align-items: stretch !important; background: transparent !important; padding: 0 !important; border: none !important; margin-top: 2rem !important; }
.shift-view { background: #f8fafc !important; padding: 2rem 1.5rem !important; border-radius: 1rem !important; border: 1px solid #e2e8f0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }
.shift-old { opacity: 0.7; transform: scale(0.98); }
.shift-new { background: #fff7ed !important; border-color: #fdba74 !important; box-shadow: 0 10px 30px rgba(249, 115, 22, 0.08) !important; position: relative; z-index: 2; }
.shift-label { border-bottom: none !important; color: #94a3b8 !important; margin-bottom: 0.5rem !important; text-align: center; }
.shift-text-old { color: #64748b !important; font-size: 1rem !important; }
.shift-text-new { color: #ea580c !important; font-size: 1.3rem !important; font-weight: 900 !important; line-height: 1.5 !important; }
.shift-connector { margin: -0.5rem 0 !important; position: relative; z-index: 10; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; height: 50px; }
.shift-connector::after { display: none !important; }
.shift-connector-arrow { width: 2px; height: 100%; background: #cbd5e1; position: absolute; left: 50%; transform: translateX(-50%); }
.shift-connector-arrow::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0) rotate(45deg); width: 10px; height: 10px; border-right: 2px solid #cbd5e1; border-bottom: 2px solid #cbd5e1; }
.shift-connector-avatar { position: absolute; left: 50%; top: 50%; transform: translate(2rem, -50%); width: 70px; z-index: 11; }

/* DESIGN Priorities */
.design-cards-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }
.design-card-primary { grid-column: 1 / -1 !important; background: white !important; box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important; border-color: #cbd5e1 !important; }
.design-card-primary .design-card-value { font-size: 1.25rem !important; }
.d-change-horizontal { display: flex !important; align-items: center !important; gap: 1rem !important; margin-top: 0.5rem !important; flex-wrap: wrap; justify-content: center; text-align: center; }
.d-change-horizontal .d-arrow { margin: 0 !important; }
@media (max-width: 768px) {
  .design-cards-grid { grid-template-columns: 1fr !important; }
  .d-change-horizontal { flex-direction: column; gap: 0.5rem !important; }
  .shift-connector-avatar { width: 50px; transform: translate(1rem, -50%); }
}

/* Compact Spacing */
.v7-block { padding: 3rem 1.5rem !important; }
.block-hero { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
.block-why { padding: 1rem 1.5rem 3rem !important; }

/* Main CTA refinement */
#btn-open-consult { background: #0f172a !important; color: white !important; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.2) !important; transition: all 0.3s; }
#btn-open-consult:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(15, 23, 42, 0.3) !important; }
#btn-open-document { transition: all 0.3s; }
#btn-open-document:hover { background: #f8fafc !important; transform: translateY(-3px); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1) !important; }

/* 12. BRUSHUP PHASE 5: User Requests (Final Adjustments) */
/* FV Motifs */
.line-2 { width: 150px; left: -20px; top: 15%; transform: rotate(10deg); opacity: 0.05; }
.line-3 { width: 100px; right: 10%; bottom: 30%; transform: rotate(-25deg); opacity: 0.2; }
.line-4 { width: 200px; left: 40%; top: 5%; transform: rotate(-5deg); opacity: 0.1; }

/* Question margins */
.question-header-new { margin-bottom: 0.6rem !important; }
.step-progress-compact { margin-bottom: 1.5rem !important; }
.step-progress-compact .step-label, .step-progress-compact .step-phase-label { color: #f97316 !important; }
.step-progress-compact .progress-bar-fill { background: #f97316 !important; }

/* Result view spacing & WHY emphasis */
.block-hero { padding-bottom: 0 !important; }
.block-why { padding-top: 2rem !important; }
.block-why .v7-inner.inner-narrow { border-left: none !important; }
.hero-why-box { border-left: none !important; background: #fff7ed !important; border: 1px solid #fdba74 !important; padding: 2.5rem !important; border-radius: 1rem !important; }

/* DESIGN vertical change & IDEA arrows */
.d-change-vertical { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.5rem !important; margin-top: 1rem !important; text-align: center; }
.d-arrow-vertical { margin: 0 !important; color: #cbd5e1 !important; }
.idea-flow-arrow { margin: 0.25rem 0 !important; overflow: visible !important; display: flex !important; justify-content: center !important; align-items: center !important; height: auto !important; width: 100% !important; }
.idea-flow-arrow svg { stroke-width: 3px !important; color: #cbd5e1 !important; width: 2rem; height: 2rem; margin: 0 auto !important; }

/* Footer Links Block */
.footer-link-item { display: flex !important; justify-content: center !important; gap: 0.5rem !important; align-items: center !important; padding: 1rem 1.5rem !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 0.75rem !important; color: #64748b !important; font-size: 0.85rem !important; font-weight: 700 !important; transition: all 0.2s !important; text-decoration: none !important; }
.footer-link-item:hover { background: #f1f5f9 !important; color: #0f172a !important; }