/* =============================================================
   STREAMONOMICS — simulator.css
   Structural layout only. Polish/design pass comes later.
   ============================================================= */

/* --- Screen System --- */
.sim-screen        { display: none; padding: 40px 24px; max-width: 1100px; margin: 0 auto; }
.sim-screen.active { display: block; }

/* --- Entry Screen --- */
.sim-hero { text-align: center; padding: 80px 24px; }
.sim-hero .lead    { max-width: 540px; margin: 16px auto 32px; }



/* --- Side Panel --- */
.side-panel {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
}
.side-panel h3     { margin: 0 0 16px; font-size: 1rem; }

/* --- Status Bar --- */
.sim-statusbar        { background: #1e1b4b; color: #fff; padding: 10px 24px; position: sticky; top: 0; z-index: 100; }
.sim-statusbar-inner  { display: flex; gap: 32px; align-items: center; max-width: 1100px; margin: 0 auto; flex-wrap: wrap; }
.status-badge         { padding: 2px 10px; border-radius: 999px; background: #374151; font-size: .8rem; }
.badge-red            { background: #dc2626; }
.badge-yellow         { background: #d97706; }
.badge-green          { background: #16a34a; }

/* --- Map Placeholder --- */
.map-placeholder      { margin-top: 24px; background: #f3f4f6; border: 2px dashed #d1d5db;
                        border-radius: 12px; height: 220px; display: flex;
                        align-items: center; justify-content: center; color: #6b7280; }

/* --- City Cost Panel --- */
.cost-breakdown       { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cost-row             { display: flex; justify-content: space-between; font-size: .9rem; }
.cost-total           { display: flex; justify-content: space-between; padding-top: 12px;
                        border-top: 2px solid #e5e7eb; font-size: 1.1rem; font-weight: 700; }
.cost-survival        { display: flex; justify-content: space-between; margin-top: 8px;
                        font-size: .85rem; color: #6b7280; }

/* --- Sliders --- */
.slider-group         { display: flex; flex-direction: column; gap: 8px; }
.slider-labels        { display: flex; justify-content: space-between; font-size: .75rem; color: #6b7280; }
.slider-hint          { font-size: .8rem; color: #6b7280; margin-top: 4px; line-height: 1.4; }
input[type="range"]   { width: 100%;  accent-color: #6366f1;}


.slider-group label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2937;
}


.slider-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 6px;
  opacity: 0.7;
}

.slider-ticks span {
  text-align: center;
  flex: 1;
}

/* --- Profile Stats --- */
.profile-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: .9rem;
}

.profile-stat span {
  color: #6b7280;
  font-size: .8rem;
}

.profile-stat strong {
  font-size: 1rem;
  font-weight: 600;
}

/* --- Warning --- */
.sim-warning          { background: #fef3c7; border: 1px solid #fbbf24; border-radius: 8px;
                        padding: 12px; font-size: .85rem; margin-top: 16px; }

/* --- Strategy Sliders --- */
.strategy-slider-row  { display: flex; gap: 16px; align-items: flex-start;
                        padding: 16px 0; border-bottom: 1px solid #f3f4f6; }
.strategy-icon        { font-size: 1.5rem; padding-top: 4px; }
.strategy-content     { flex: 1; }
.strategy-content label { font-weight: 600; font-size: .95rem; }
.micro                { font-size: .8rem; color: #6b7280; margin: 2px 0 8px; }
.strat-value          { font-size: .85rem; color: #6366f1; font-weight: 700; }
.reaction-message {
  font-size: .9rem;
  line-height: 1.6;
  color: #374151;
  background: #eef2ff;
  border-left: 4px solid #6366f1;
  border-radius: 8px;
  padding: 14px;
}
.strategy-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sim-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.sim-col-main { min-width: 0; }
.sim-col-side { min-width: 0; }

#screen-1 .sim-col-side,
#screen-2 .sim-col-side,
#screen-3 .sim-col-side {
  position: sticky;
  top: 160px;
  align-self: start;
}



/* =============================
   SCREEN 3 HEADER COMPRESSION
   ============================= */

#screen-3 .kicker {
  margin-bottom: 4px;
}

#screen-3 .h2 {
  font-size: 2rem;          /* was huge */
  line-height: 1.1;
  margin: 0 0 8px;
}

#screen-3 .note {
  font-size: 0.9rem;
  margin: 4px 0;
  line-height: 1.4;
}

/* kill extra vertical space between the two notes */
#screen-3 .note + .note {
  margin-top: 2px;
}

/* tighten overall top spacing */
#screen-3 {
  padding-top: 20px;   /* was 40px */
}

.strategy-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  background: #f9fafb;
}

.card-title {
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 4px;
}

.card-value {
  font-size: 1.4rem;
  font-weight: 700;
}

.card-desc {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 2px;
}
.card-value.high {
  color: #16a34a;
}

.card-value.weak {
  color: #d97706;
}

.card-value.balanced {
  color: #6366f1;
}
.insight-box {
  background: #eef2ff;
  border-left: 4px solid #6366f1;
  border-radius: 8px;
  padding: 12px;
  font-size: 0.9rem;
}

.insight-box strong {
  display: block;
  margin-bottom: 6px;
}
.divider {
  height: 1px;
  background: #e5e7eb;
}
.income-section h4 {
  margin-bottom: 10px;
}


.explainer-step {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.step-num {
  font-size: 11px;
  font-weight: 600;
  color: #6366f1;
  background: rgba(99,102,241,0.1);
  padding: 2px 5px;
  border-radius: 5px;
  margin-top: 2px;
}

.step-text {
  font-size: 13px;
  line-height: 1.5;
  color: #374151;
}

.profile-stat span {
  color: #6b7280;
  font-size: 0.8rem;
}

/* =============================
   SINGLE COLUMN LAYOUT
   ============================= */
.sim-content {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}


/* =============================
   INCOME SYSTEM (CHART + CARDS)
   ============================= */
.income-system {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* Wrapper for overlap */
.income-overlay {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}


/* PIE CHART */
.income-chart {
  position: relative;
  z-index: 1;
}

#chart-income {
  width: 200px !important;
  height: 200px !important;
  margin: 0;
}


/* =============================
   OVERLAY CARDS
   ============================= */
.overlay-cards {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(35%, -50%); /* 👈 overlap ~1/3 */

  display: flex;
  flex-direction: column;
  gap: 14px;

  z-index: 2;
}


/* CARD STYLE (UPDATED) */
.strategy-card {
  border-radius: 14px;
  padding: 16px;
  backdrop-filter: blur(6px);

  /* 👇 transparency */
  background: rgba(255, 255, 255, 0.7);

  border: 1px solid rgba(229, 231, 235, 0.6);

  box-shadow: 0 6px 16px rgba(0,0,0,0.05);
}


/* tighten card text */
.card-value {
  font-size: 1.3rem;
  margin-top: 4px;
}


/* =============================
   INSIGHT BOX
   ============================= */
.insight-box {
  margin-top: 20px;
}


/* =============================
   CONTROLS (SLIDERS BELOW)
   ============================= */
.controls {
  margin-top: 10px;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

.dot.streaming { background: #6366f1; }
.dot.touring   { background: #10b981; }
.dot.merch     { background: #f59e0b; }


.engagement-block {
  padding: 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
}


.income-system {
  display: flex;
  flex-direction: column;
  gap: 16px;
}



.income-chart {
  display: flex;
  justify-content: center;
  margin: 12px 0 20px;
}





#chart-income {
  display: block;
  margin: 0;   /* 👈 CRITICAL FIX */
}

.income-cards .card-value {
  font-size: 1.2rem;
  margin-top: 2px;
}

/* turn cards into compact legend rows */
.income-cards .strategy-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
}

/* dot already exists in your system */
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}


/* =============================
   TOP INCOME LAYOUT
   ============================= */
#screen-3 .income-top {
  padding: 20px;
}

#screen-3 .income-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

#screen-3 .income-chart {
  flex: 0 0 180px;
}

/* =============================
   HORIZONTAL CARDS
   ============================= */
.income-cards-horizontal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.income-cards-horizontal .strategy-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: 12px;
}

/* header row inside cards */
.card-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #6b7280;
}

.percent {
  font-weight: 600;
  opacity: 0.8;
}

/* color accents */
.strategy-card.streaming {
  background: rgba(99,102,241,0.08);
}

.strategy-card.touring {
  background: rgba(16,185,129,0.08);
}

.strategy-card.merch {
  background: rgba(245,158,11,0.08);
}

/* =============================
   CONTROLS GRID
   ============================= */
.controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 16px;
}

.controls-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* =============================
   COMPACT SLIDERS
   ============================= */
#screen-3 .strategy-step {
  margin-bottom: 0;
  padding-bottom: 12px;
}

#screen-3 .slider-group {
  gap: 4px;
}

#screen-3 input[type="range"] {
  margin: 6px 0;
}

/* =============================================================
   SCREEN 3 — CLEAN OVERRIDE (FINAL)
   ============================================================= */

/* --- restore clean two-column layout --- */
#screen-3 .sim-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* --- LEFT COLUMN (sliders) --- */
#screen-3 .sim-col-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* tighten header */
#screen-3 .h2 {
  font-size: 2rem;
  margin-bottom: 6px;
}

#screen-3 .note {
  font-size: 0.9rem;
  margin: 2px 0;
}

/* tighten sliders */
#screen-3 .strategy-step {
  margin-bottom: 12px;
  padding-bottom: 12px;
}

#screen-3 .slider-group {
  gap: 4px;
}

#screen-3 input[type="range"] {
  margin: 6px 0;
}


/* --- RIGHT COLUMN (output panel) --- */
#screen-3 .strategy-panel {
  gap: 16px;
}

/* --- PIE + OVERLAY CARDS --- */
#screen-3 .income-overlay {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* pie size tuned for column */
#screen-3 #chart-income {
  width: 170px !important;
  height: 170px !important;
}

/* overlay cards */
#screen-3 .overlay-cards {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* card styling (clean + readable) */
#screen-3 .strategy-card {
  padding: 12px;
  border-radius: 12px;

  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);

  border: 1px solid rgba(229,231,235,0.6);
  box-shadow: 0 6px 12px rgba(0,0,0,0.05);
}

/* tighter typography */
#screen-3 .card-value {
  font-size: 1.1rem;
}

/* --- INSIGHT BOX --- */
#screen-3 .insight-box {
  margin-top: 8px;
  padding: 10px;
  font-size: 0.85rem;
}

/* --- NAV (unchanged, just tighten spacing) --- */
#screen-3 .sim-nav {
  margin-top: 40px;
}


/* =============================
   ADJUST PIE + CARD BALANCE
   ============================= */

/* push pie to the left */
#screen-3 .income-overlay {
  justify-content: flex-start;   /* was center */
}

/* give pie a little breathing room from left edge */
#screen-3 .income-chart {
  margin-left: 8px;
}

/* make cards wider + more prominent */
#screen-3 .overlay-cards {
  right: -20px;                 /* pull slightly outward */
  width: 65%;                   /* 👈 KEY: increase width */
  max-width: 260px;             /* prevent overgrowth */
}

/* allow cards to actually expand */
#screen-3 .strategy-card {
  width: 100%;
}

/* optional: increase text presence slightly */
#screen-3 .card-value {
  font-size: 1.2rem;
}


/* =============================
   SCREEN 3 — SLIDER COMPRESSION
   ============================= */

/* remove duplicate divider from form-group */
#screen-3 .form-group + .form-group {
  border-top: none;
  padding-top: 0;
}

/* keep ONLY one divider (lighter) */
#screen-3 .strategy-step {
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

/* last slider shouldn't have a divider */
#screen-3 .strategy-step:last-child {
  border-bottom: none;
}

/* reduce vertical spacing inside each block */
#screen-3 .strategy-step {
  padding-top: 6px;
}

/* tighten slider groups */
#screen-3 .slider-group {
  gap: 4px;
}

/* reduce label + hint spacing */
#screen-3 .slider-hint {
  margin-top: 2px;
  margin-bottom: 6px;
  font-size: 0.75rem;
}

/* tighten slider spacing */
#screen-3 input[type="range"] {
  margin: 4px 0;
}

/* tighten step header */
#screen-3 .step-header {
  margin-bottom: 6px;
}

/* reduce micro text spacing */
#screen-3 .micro {
  margin-bottom: 4px;
}

/* =============================
   RESPONSIVE
   ============================= */
@media (max-width: 768px) {
  .controls-grid {
    grid-template-columns: 1fr;
  }

  .income-row {
    flex-direction: column;
    align-items: center;
  }
}

/* --- Navigation --- */
.sim-nav {
  z-index: 100;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

.sim-nav .btn-secondary {
  margin-right: auto;
}

#screen-3 .sim-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;
  max-width: 1100px;
  margin: 60px auto 0;

  padding-top: 24px;
  border-top: 1px solid transparent;
}


#screen-3 .sim-nav {
  
  padding-right: calc((100% - 1100px) / 2);
}


/* ============================================================
   STEP 4 — RESULTS REWORK
   ============================================================ */

.results-topline {
  margin-bottom: 18px;
}

.results-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 20px;
  align-items: start;
}

.results-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.results-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.verdict-banner {
  background: linear-gradient(180deg, #f7cfd3 0%, #f7d9dc 100%);
  border-radius: 28px;
  padding: 24px 24px 18px;
  margin-bottom: 20px;
  border: 1px solid rgba(0,0,0,0.04);
}

.verdict-main {
  text-align: center;
  margin-bottom: 18px;
}

.verdict-income {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #232323;
}

.verdict-status {
  margin-top: 6px;
  font-weight: 700;
}

.verdict-delta {
  margin-top: 4px;
  color: #6b7280;
}

.strategy-mini-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.strategy-mini-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  padding: 12px 14px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03);
}

.strategy-mini-card span {
  display: block;
  font-size: 0.82rem;
  color: #6b7280;
  margin-bottom: 4px;
}

.strategy-mini-card strong {
  font-size: 0.98rem;
  color: #111827;
}

.income-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  align-items: center;
}

.income-chart-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.income-table {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.result-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: #f8f8fb;
  border-radius: 16px;
  padding: 12px 14px;
}

.result-card.total {
  background: #eef8f0;
}

.result-card span {
  color: #5b6472;
}

.result-card strong {
  font-weight: 800;
  color: #1f2937;
}

.results-col-narrow {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.meaning-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.meaning-card,
.recommendation-card {
  background: #f7f8ff;
  border: 1px solid rgba(99,102,241,0.12);
  border-left: 4px solid #6366f1;
  border-radius: 14px;
  padding: 12px 14px;
}

.meaning-card .meaning-head,
.recommendation-card .meaning-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  margin-bottom: 6px;
}

.meaning-card div:last-child,
.recommendation-card div:last-child {
  max-width: 90%;
}

.meaning-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e7eaff;
  flex: 0 0 auto;
}

.recommendation-grid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.persona-card {
  padding: 14px 16px;          /* ↓ less vertical weight */
  border-radius: 16px;
  background: #f3ecff;
}

.persona-card h3 {
  font-size: 1.1rem;           /* ↓ smaller title */
  margin: 4px 0;
}

.persona-card p {
  font-size: 0.9rem;
  margin: 0;
  color: #6b7280;
}

.avatar-stack {
  display: grid;
  gap: 8px;
}

.avatar-chip {
  display: grid;
  grid-template-columns: 36px 1fr; 
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 18px;
  background: #fafafa;
  border: 1px solid rgba(0,0,0,0.05);
  opacity: 0.6;
}

.avatar-chip.active {
  background: #f3ecff;
  border-color: rgba(99,102,241,0.16);
  opacity: 1;
}

.avatar-emoji {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.8);
  font-size: 1.2rem;
}

.avatar-chip strong {
  display: block;
  margin-bottom: 2px;
}

.avatar-chip p {
  margin: 0;
  font-size: 0.9rem;
  color: #6b7280;
}

.avatar-hero {
  width: 100%;
  height: 300px; 
  border-radius: 20px;
  overflow: hidden;
  margin: 16px 0 18px;
  background: #f4f4f6;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}

.avatar-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-hero span {
  font-size: 3rem;
}

.avatar-hero {
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

@media (max-width: 980px) {
  .results-grid,
  .income-layout {
    grid-template-columns: 1fr;
  }

  .strategy-mini-row {
    grid-template-columns: 1fr;
  }
}

.avatar-chip.active {
  opacity: 1;
  background: #eef2ff;
  border: 2px solid #6366f1;
  box-shadow: 0 10px 24px rgba(99, 102, 241, 0.18);
  transform: translateY(-1px);
}

/* --- Forms --- */
.form-group           { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; }
.form-group label     { font-size: .85rem; font-weight: 600; }
.sim-select {
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 0.95rem;
  width: 100%;
  background: #fff;
  transition: border 0.2s ease;
}

.sim-select:focus {
  outline: none;
  border-color: #6366f1;
}
.form-group + .form-group {
  border-top: 1px solid #f3f4f6;
  padding-top: 20px;
}

/* --- Callouts --- */
.note {
  font-size: 0.95rem;
  color: #4b5563;
  line-height: 1.5;
}

.kicker {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 6px;
}

/* --- Results --- */
.verdict-banner {
  position: relative;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.08);
  border-radius: 24px;
  padding: 18px 20px;
  margin-bottom: 20px;
  overflow: hidden;
}

.verdict-banner::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #d1d5db 0%, #cbd5e1 100%);
}

.verdict-banner.verdict-red::before {
  background: linear-gradient(90deg, #f87171 0%, #ef4444 100%);
}

.verdict-banner.verdict-yellow::before {
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
}

.verdict-banner.verdict-green::before {
  background: linear-gradient(90deg, #34d399 0%, #10b981 100%);
}

.verdict-banner.verdict-blue::before {
  background: linear-gradient(90deg, #60a5fa 0%, #6366f1 100%);
}

.verdict-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding-top: 8px;
  margin-bottom: 14px;
}

.verdict-income {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #111827;
}

.verdict-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #374151;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.verdict-delta {
  font-size: 0.9rem;
  color: #6b7280;
}



.results-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* 👈 more balanced */
  gap: 24px;
  align-items: start;
}
.results-col          { display: flex; flex-direction: column; gap: 12px; }
.results-col h3       { margin-bottom: 16px; }
.result-card          { display: flex; justify-content: space-between; align-items: center; padding: 10px 0;
                        border-bottom: 1px solid #f3f4f6; font-size: .95rem; }
.result-card span {
  color: #6b7280;
}

.result-card strong {
  font-weight: 600;
}
.result-card.total strong { color: #16a34a; font-size: 1.1rem; }
.results-section      { margin-bottom: 40px; }
.results-section h3, .results-col h3   { margin-bottom: 12px; font-size: 1.05rem; font-weight: 600;}

.persona-card         { background: #ede9fe; border-radius: 16px; padding: 24px; text-align: center; }
.persona-card h3      { font-size: 1.4rem; margin: 8px 0; }

#recommendations-list {
  margin-top: 12px;
}

#recommendations-list .wit-card {
  display: flex;
  justify-content: space-between;
  padding: 14px;
  background: #f9fafb;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 0.9rem;
}

#final-explanation {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.6;
}

/* Fade + lift */
.fade-in {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeInUp 0.5s ease forwards;
}


/* --- Strategy Steps --- */
.strategy-step {
  border-left: 2px solid transparent;
  padding-left: 12px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #f1f5f9;
}

.slider-hint {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 2px;
  margin-bottom: 10px;
}

input[type="range"] {
  margin: 10px 0 6px;
}

/* Default (inactive) text */
.strategy-step .micro,
.strategy-step .slider-hint {
  color: #6b7280;
}

/* Active step highlight */
.strategy-step.active {
  border-left: 3px solid #6366f1;
  background: #fafaff;
  padding-left: 12px;
}

.strategy-step.active .micro,
.strategy-step.active .slider-hint {
  color: #374151;
}

/* Step header */
.step-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.step-header label {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #111827;
}

.step-header .micro {
  margin: 2px 0 0;
}

.step-number {
  font-size: 13px;
  font-weight: 600px;
  opacity: 0.9;
  letter-spacing: 0.05em;
  color: #6366f1; 
  background: rgba(99,102,241,0.1);
  margin-top: 2px;
   padding: 4px 6px;
  border-radius: 6px;
}

/* Slider scale (labels under sliders) */
.slider-scale {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-top: 4px;
  color: #9ca3af;
  padding: 0 4px;
}

.slider-scale span {
  text-align: center;
  flex: 1;
}

.cut-hint {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}

.cut-hint {
  animation: popIn 0.18s ease-out;
}

@keyframes popIn {
  from { transform: translateY(-4px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

#slider-cut:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}




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

#strat-streaming,
#slider-shows,
#slider-cut,
#slider-attach {
  direction: ltr;
  transform: none;
}


/* --- Responsive --- */
@media (max-width: 768px) {
  .sim-two-col       { grid-template-columns: 1fr; }
  .engines-grid      { grid-template-columns: 1fr; }
  .results-grid      { grid-template-columns: 1fr; }
  .sim-statusbar-inner { gap: 16px; }
}

.sim-nav {
  z-index: 100;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding-bottom: 10px;
}

.sim-nav .btn-secondary {
  margin-right: auto;
}

.sim-nav {
  justify-content: space-between;
}