/* ============================================================
   JUNNA.AI — Figma-Faithful Design System
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --teal:          #0D7377;
  --teal-bright:   #00BFA5;
  --teal-dark:     #095456;
  --teal-light:    #E6FAF8;
  --teal-border:   #A7EDE4;
  --navy:          #0D1B2A;
  --navy-soft:     #1B2D45;
  --purple:        #7C3AED;
  --purple-bg:     #F3F0FF;
  --purple-border: #DDD6FE;
  --orange:        #F59E0B;
  --orange-light:  #FFF8EB;
  --red:           #EF4444;
  --red-light:     #FEF2F2;
  --green:         #10B981;
  --green-light:   #ECFDF5;
  --gold:          #EAB308;
  --gold-light:    #FEF9C3;
  --bg:            #F8F9FA;
  --white:         #FFFFFF;
  --gray-50:       #FAFAFA;
  --gray-100:      #F3F4F6;
  --gray-200:      #E5E7EB;
  --gray-300:      #D1D5DB;
  --gray-400:      #9CA3AF;
  --gray-500:      #6B7280;
  --gray-600:      #4B5563;
  --gray-700:      #374151;
  --gray-800:      #1F2937;
  --gray-900:      #111827;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl:24px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow:    0 2px 8px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.10);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body { font-family: var(--font); background: var(--bg); color: var(--gray-900); line-height: 1.6; -webkit-font-smoothing: antialiased; }
input, select, textarea, button { font-family: inherit; }
h1, h2, h3, h4 { font-family: 'Outfit', var(--font); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  background: #0a0a14;
  height: 60px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.header-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo { display: flex; align-items: center; text-decoration: none; }
.logo-img { height: 32px; width: auto; }
.logo-text-fallback {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.5px;
}
.logo-text-fallback span { color: var(--teal-bright); }
.header-right { display: flex; align-items: center; gap: 14px; }
.header-tagline { font-size: 12.5px; color: #64748b; }
.site-header .btn.btn-ghost { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: #94a3b8; }
.site-header .btn.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: white; }
.site-header .btn.btn-primary { background: linear-gradient(135deg, #0FA89E, #0D7377); box-shadow: 0 0 16px rgba(15,168,158,0.2); }
.site-header .btn.btn-primary:hover { box-shadow: 0 0 24px rgba(15,168,158,0.3); }

/* ============================================================
   HERO — "HOW JUNNA WORKS" (matches Figma gradient + glass)
   ============================================================ */
.hero {
  background: linear-gradient(135deg, #0a0a14 0%, #0D7377 50%, #0a0a14 100%);
  padding: 0 28px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(15,168,158,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}
.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 0 40px;
}
.hero-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.hero-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.hero-title {
  font-size: 22px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.3px;
}
.hero-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}
.hero-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.glass-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.glass-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(15,168,158,0.2);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
.glass-card-icon {
  font-size: 22px;
  margin-bottom: 10px;
}
.glass-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 5px;
  line-height: 1.25;
}
.glass-card-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  line-height: 1.45;
}

/* ============================================================
   KPI METRIC CARDS (4-column row — Figma style)
   ============================================================ */
/* Data Sources Indicator Bar */
.data-sources-bar { background: var(--gray-50, #f9fafb); border: 1px solid var(--gray-200, #e5e7eb); border-radius: 8px; padding: 10px 16px; margin-bottom: 14px; font-size: 13px; color: var(--gray-600, #4b5563); }
.dsb-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dsb-label { font-weight: 600; color: var(--gray-700, #374151); }
.dsb-connected { color: #0D7377; font-weight: 500; }
.dsb-sep { color: var(--gray-300, #d1d5db); margin: 0 4px; }
.dsb-not-label { color: var(--gray-400, #9ca3af); font-weight: 500; }
.dsb-not { color: var(--gray-400, #9ca3af); }
.dsb-none { color: var(--gray-400, #9ca3af); font-style: italic; }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.kpi-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  border: 1.5px solid var(--gray-200);
  border-left-width: 4px;
  position: relative;
}
.kpi-card.teal    { border-left-color: var(--teal); }
.kpi-card.gold    { border-left-color: var(--gold); }
.kpi-card.green   { border-left-color: var(--green); }
.kpi-card.red     { border-left-color: var(--red); }
.kpi-card.purple  { border-left-color: var(--purple); }

.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.kpi-icon.teal   { background: var(--teal-light); }
.kpi-icon.gold   { background: var(--gold-light); }
.kpi-icon.green  { background: var(--green-light); }
.kpi-icon.red    { background: var(--red-light); }
.kpi-icon.purple { background: var(--purple-bg); }

.kpi-arrow { color: var(--teal-bright); font-size: 14px; }

.kpi-card.clickable { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; position: relative; }
.kpi-card.clickable:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.kpi-card.clickable:active { transform: translateY(-1px); }
.kpi-hint {
  font-size: 10px; font-weight: 600; color: var(--teal-bright);
  margin-top: 6px; opacity: 0; transition: opacity 0.15s;
}
.kpi-card.clickable:hover .kpi-hint { opacity: 1; }
.kpi-number {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}
.kpi-number.teal   { color: var(--teal); }
.kpi-number.gold   { color: #B45309; }
.kpi-number.green  { color: #059669; }
.kpi-number.red    { color: var(--red); }
.kpi-number.purple { color: var(--purple); }

.kpi-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-500);
  margin-bottom: 4px;
}
.kpi-growth {
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
}
.kpi-growth.warn { color: var(--red); }

/* ============================================================
   FORM PAGE
   ============================================================ */
.form-wrapper { padding: 0; }
.form-with-sidebar { display: flex; min-height: calc(100vh - 56px); }
.form-sidebar-reports {
  width: 240px;
  min-width: 240px;
  max-width: 240px;
  flex-shrink: 0;
  background: var(--white);
  border-right: 1px solid var(--gray-200);
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 50;
}
.form-container { max-width: 740px; margin: 0 auto; padding: 28px 28px 80px; flex: 1; min-width: 0; }

/* ── Sidebar report item with template button ── */
.rs-item-wrap { position: relative; }
.rs-item-wrap .rs-template-btn {
  display: none;
  width: 100%;
  padding: 5px 10px;
  background: none;
  border: none;
  border-top: 1px solid var(--gray-100);
  font-size: 11px;
  font-weight: 600;
  color: var(--teal-bright);
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, color 0.12s;
}
.rs-item-wrap:hover .rs-template-btn { display: block; }
.rs-template-btn:hover { background: var(--teal-light); color: var(--teal); }

/* ── Template loaded banner ── */
.template-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #EFF6FF;
  border: 1.5px solid #BFDBFE;
  border-radius: var(--radius);
  font-size: 13px;
  color: #1E40AF;
  margin-bottom: 16px;
}
.template-banner strong { color: #1E3A8A; }
.template-banner button {
  background: none; border: none; cursor: pointer;
  font-size: 16px; color: #93C5FD; margin-left: auto;
  padding: 2px 6px; border-radius: 4px;
}
.template-banner button:hover { background: #DBEAFE; color: #1E40AF; }

/* ── Horizontal Step Progress ── */
.step-progress { margin-bottom: 24px; }
.step-track-row { display: flex; align-items: flex-start; }
.step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  position: relative;
  cursor: default;
}
.step-node:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 15px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: var(--gray-200);
  z-index: 0;
  transition: background 0.3s;
}
.step-node.completed:not(:last-child)::after { background: var(--teal-bright); }
.step-node.completed { cursor: pointer; }

.step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid var(--gray-300);
  color: var(--gray-400);
  background: var(--white);
  position: relative;
  z-index: 1;
  transition: all 0.25s;
}
.step-node.active .step-circle {
  background: linear-gradient(135deg, #0FA89E, #0D7377);
  border-color: #0FA89E;
  color: white;
  box-shadow: 0 0 0 4px rgba(15,168,158,0.18);
}
.step-node.completed .step-circle {
  background: linear-gradient(135deg, #0FA89E, #0D7377);
  border-color: #0FA89E;
  color: white;
}
.step-node-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--gray-400);
  text-align: center;
  white-space: nowrap;
}
.step-node.active .step-node-label { color: var(--teal-dark); font-weight: 700; }
.step-node.completed .step-node-label { color: var(--gray-600); }

/* ── Form Card ── */
.form-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  border: 1px solid var(--gray-100);
}
.form-card-body { padding: 36px 40px 20px; }
.form-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px 28px;
  border-top: 1px solid var(--gray-100);
}

/* ── Step Panels ── */
.form-step { display: none; }
.form-step.active { display: block; }
.step-header { margin-bottom: 24px; }
.step-eyebrow { font-size: 11px; font-weight: 700; color: var(--teal-bright); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 5px; }
.step-heading { font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -0.4px; margin-bottom: 5px; }
.step-subheading { font-size: 13px; color: var(--gray-500); }

/* ── Field Layouts ── */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field-grid.col-3 { grid-template-columns: 1fr 1fr 1fr; }
.field-full { grid-column: 1 / -1; }
.field-group { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--gray-700); }
.field-label .req { color: var(--red); margin-left: 2px; }
.field-hint { font-size: 11.5px; color: var(--gray-400); }

/* ── Inputs ── */
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 10px 12px;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--gray-900); background: var(--white);
  transition: border-color 0.15s, box-shadow 0.15s; outline: none;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--gray-300); }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--teal-bright); box-shadow: 0 0 0 3px rgba(0,191,165,0.12); }
.form-input.error, .form-select.error, .form-textarea.error { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,68,68,0.10); }
.form-textarea { resize: vertical; min-height: 88px; line-height: 1.55; }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; }
.field-error { font-size: 12px; color: var(--red); display: none; }
.field-error.visible { display: block; }

/* ── Choice Items ── */
.choice-group { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.choice-group.col-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.choice-group.col-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.choice-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px; border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: all 0.15s; user-select: none; background: var(--white);
}
.choice-item:hover { border-color: var(--teal-border); background: var(--teal-light); }
.choice-item input { display: none; }
.choice-item.checked { border-color: var(--teal-bright); background: var(--teal-light); }
.choice-box {
  width: 15px; height: 15px; border: 2px solid var(--gray-300);
  border-radius: 3px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; transition: all 0.15s; background: white;
}
.choice-item.checked .choice-box { background: var(--teal-bright); border-color: var(--teal-bright); }
.choice-item.checked .choice-box::after { content: ''; width: 4px; height: 7px; border: 2px solid white; border-top: none; border-left: none; transform: rotate(45deg) translateY(-1px); display: block; }
.radio-dot {
  width: 15px; height: 15px; border: 2px solid var(--gray-300);
  border-radius: 50%; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; transition: all 0.15s; background: white;
}
.choice-item.checked .radio-dot { border-color: var(--teal-bright); }
.choice-item.checked .radio-dot::after { content: ''; width: 7px; height: 7px; background: var(--teal-bright); border-radius: 50%; display: block; }
.choice-label { font-size: 12.5px; font-weight: 500; color: var(--gray-700); }
.choice-item.checked .choice-label { color: var(--teal-dark); font-weight: 600; }

.channel-group-label { font-size: 10px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.1em; margin: 16px 0 6px; }
.channel-group-label:first-of-type { margin-top: 2px; }
.form-section { margin-bottom: 24px; }
.form-section-title { font-size: 11px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.1em; padding-bottom: 9px; border-bottom: 1px solid var(--gray-100); margin-bottom: 12px; }
.conditional-field { display: none; margin-top: 14px; }
.conditional-field.visible { display: block; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 22px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s; border: none; text-decoration: none; }
.btn-ghost { background: transparent; color: var(--gray-500); border: 1.5px solid var(--gray-200); transition: all 0.25s; }
.btn-ghost:hover { border-color: #0FA89E; color: #0D7377; background: rgba(15,168,158,0.04); }
.btn-ghost.hidden { visibility: hidden; }
/* ── How to Read Your Report Guide ── */
.report-guide { margin-bottom: 16px; }
.report-guide details:not([open]) { margin-bottom: 0; }
.report-guide details { background: linear-gradient(135deg, #f0fdfa, #ecfdf5); border: 1px solid #99f6e4; border-radius: 12px; overflow: hidden; }
.datasources-section:empty { display: none; padding: 0; margin: 0; }
.report-section:empty { display: none; }
.guide-summary { padding: 14px 20px; cursor: pointer; display: flex; align-items: center; gap: 10px; list-style: none; }
.guide-summary::-webkit-details-marker { display: none; }
.guide-summary-icon { font-size: 20px; }
.guide-summary-text { font-size: 15px; font-weight: 700; color: #0D7377; }
.guide-summary-hint { font-size: 11px; color: #6b9f9f; margin-left: auto; }
.guide-content { padding: 0 20px 20px; }
.guide-intro { font-size: 13px; color: #374151; margin-bottom: 16px; line-height: 1.6; }

.guide-steps { display: flex; flex-direction: column; gap: 14px; }
.guide-step { display: flex; gap: 12px; }
.guide-step-num { width: 28px; height: 28px; min-width: 28px; border-radius: 50%; background: #0D7377; color: white; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.guide-step-body { flex: 1; }
.guide-step-title { font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.guide-step-desc { font-size: 12px; color: #4b5563; line-height: 1.6; margin-bottom: 4px; }
.guide-step-tip { font-size: 11px; color: #0D7377; background: rgba(13, 115, 119, 0.06); padding: 6px 10px; border-radius: 6px; border-left: 3px solid #0D7377; }
.guide-tools-list { margin: 6px 0 0 16px; font-size: 12px; color: #4b5563; line-height: 1.7; }
.guide-tools-list li { margin-bottom: 4px; }

.guide-footer { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #ccfbf1; }
.guide-dismiss-btn { background: #0D7377; color: white; border: none; padding: 10px 24px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.guide-dismiss-btn:hover { background: #0FA89E; }
.guide-dismiss-check { font-size: 11px; color: #6b7280; display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* ── Explore More Channels ── */
.explore-more-header { background: linear-gradient(135deg, #f8fafc, #f1f5f9); border: 1px dashed #cbd5e1; border-radius: 12px; padding: 20px; margin: 32px 0 16px; transition: background 0.15s; }
.explore-more-header:hover { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); }
.explore-more-header.collapsed .explore-arrow { transform: rotate(-90deg); }
.explore-more-header .explore-arrow { transition: transform 0.2s; }
#exploreMoreBody.collapsed { display: none; }
.explore-more-inner { display: flex; align-items: center; gap: 14px; }
.explore-more-icon { font-size: 28px; }
.explore-more-title { font-size: 16px; font-weight: 800; color: #475569; }
.explore-more-subtitle { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.explore-section { opacity: 0.85; border: 1px dashed #e2e8f0 !important; }
.explore-section:hover { opacity: 1; }
.explore-badge { font-size: 10px; font-weight: 600; color: #94a3b8; background: #f1f5f9; padding: 4px 10px; border-radius: 12px; white-space: nowrap; margin-left: auto; }

.beta-user-badge { display: inline-block; background: linear-gradient(135deg, #7C3AED, #a855f7); color: white; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 12px; margin-left: 8px; vertical-align: middle; letter-spacing: 0.3px; }
.beta-transition-banner { background: linear-gradient(135deg, #fef3c7, #fef9c3); border: 1px solid #fcd34d; border-radius: 10px; padding: 16px 20px; margin-bottom: 20px; display: flex; align-items: center; gap: 14px; }
.beta-transition-banner .btb-icon { font-size: 24px; }
.beta-transition-banner .btb-text { flex: 1; font-size: 13px; color: #78350f; line-height: 1.5; }
.beta-transition-banner .btb-text strong { color: #92400e; }
.beta-transition-banner .btb-btn { background: #7C3AED; color: white; font-size: 12px; font-weight: 700; padding: 8px 18px; border-radius: 6px; text-decoration: none; white-space: nowrap; }
.beta-transition-banner .btb-btn:hover { background: #6D28D9; }
.admin-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; background: #EF4444; color: white; font-size: 10px; font-weight: 800; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; animation: badgePop 0.3s ease; }
@keyframes badgePop { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
.btn-primary { background: linear-gradient(135deg, #0FA89E, #0D7377); color: white; box-shadow: 0 2px 12px rgba(15,168,158,0.25); }
.btn-primary:hover { box-shadow: 0 4px 20px rgba(15,168,158,0.35); transform: translateY(-1px); }
.btn-generate { background: linear-gradient(135deg, #0FA89E, #0D7377); color: white; padding: 14px 36px; font-size: 15px; font-weight: 700; border-radius: var(--radius); box-shadow: 0 4px 20px rgba(15,168,158,0.3); letter-spacing: 0.3px; }
.btn-generate:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(15,168,158,0.4); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ── Review Step ── */
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.review-card { background: var(--gray-50); border-radius: var(--radius); padding: 16px; border: 1px solid var(--gray-200); }
.review-card-title { font-size: 10px; font-weight: 700; color: var(--teal-dark); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.review-card-title::before { content: ''; width: 3px; height: 11px; background: var(--teal-bright); border-radius: 2px; }
.review-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 3.5px 0; border-bottom: 1px solid var(--gray-100); font-size: 12px; }
.review-row:last-child { border-bottom: none; }
.review-key { color: var(--gray-400); flex-shrink: 0; }
.review-val { color: var(--gray-800); font-weight: 600; text-align: right; }
.review-notice { background: var(--teal-light); border: 1px solid var(--teal-border); border-radius: var(--radius); padding: 13px 16px; font-size: 13px; color: var(--teal-dark); display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }

/* ── Loading Overlay ── */
.loading-overlay { display: none; position: fixed; inset: 0; background: rgba(13,27,42,0.55); z-index: 300; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.loading-overlay.active { display: flex; }
.loading-box { background: var(--white); border-radius: var(--radius-2xl); padding: 44px 48px; text-align: center; max-width: 400px; box-shadow: var(--shadow-lg); }
.loading-spinner { width: 48px; height: 48px; border: 3px solid var(--gray-200); border-top-color: var(--teal-bright); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 18px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-title { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.loading-subtitle { font-size: 13px; color: var(--gray-500); line-height: 1.5; }
.loading-steps { margin-top: 18px; display: flex; flex-direction: column; gap: 7px; text-align: left; }
.loading-step { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--gray-300); transition: color 0.3s; }
.loading-step.done { color: var(--green); }
.loading-step.active { color: var(--teal-bright); font-weight: 600; }
.loading-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ============================================================
   REPORT PAGE
   ============================================================ */
body.report-page { background: var(--bg); }
.report-header { background: var(--white); border-bottom: 1px solid var(--gray-200); position: sticky; top: 0; z-index: 200; height: 56px; display: flex; align-items: center; }
.report-header-inner { width: 100%; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.report-meta { flex: 1; }
.report-meta-label { font-size: 10px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.12em; }
.report-meta-name { font-size: 15px; font-weight: 700; color: var(--navy); max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-actions { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.report-actions .btn-download, .report-actions .btn-back { white-space: nowrap; padding: 8px 14px; font-size: 12px; }
.report-date { font-size: 12px; color: var(--gray-400); margin-right: 4px; }
.btn-download { background: var(--teal-bright); color: white; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer; border: none; transition: all 0.15s; }
.btn-download:hover { background: #00A896; }
.btn-back { background: var(--white); color: var(--gray-600); border: 1.5px solid var(--gray-200); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; transition: all 0.15s; display: inline-flex; align-items: center; }
.btn-back:hover { border-color: var(--gray-300); color: var(--navy); }
.btn-connect-accounts { background: linear-gradient(135deg, #7C3AED, #a855f7); color: white; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; transition: all 0.15s; display: inline-flex; align-items: center; gap: 4px; animation: pulse-connect 2s ease-in-out 3; }
.btn-connect-accounts:hover { background: linear-gradient(135deg, #6D28D9, #9333ea); transform: translateY(-1px); }
@keyframes pulse-connect { 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); } 50% { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.2); } }

/* ── Report Layout with Sidebar ── */
.report-layout { display: flex; min-height: calc(100vh - 56px); }

.report-sidebar {
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  flex-shrink: 0;
  background: var(--white);
  border-right: 1px solid var(--gray-200);
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 50;
}
.rs-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--gray-100);
}
.rs-title { font-size: 12px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.12em; }
.rs-new-btn {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--teal-bright); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; text-decoration: none;
  line-height: 1; transition: background 0.15s;
}
.rs-new-btn:hover { background: #00A896; }

.rs-list { flex: 1; padding: 8px; overflow-y: auto; }
.rs-loading { font-size: 12px; color: var(--gray-400); padding: 12px 8px; }
.rs-empty { font-size: 12px; color: var(--gray-400); padding: 12px 8px; text-align: center; }

.rs-item {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 10px 10px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background 0.12s; gap: 6px;
  margin-bottom: 2px;
}
.rs-item:hover { background: var(--gray-100); }
.rs-item.active { background: var(--teal-light); }

.rs-item-info { flex: 1; min-width: 0; }
.rs-item-brand {
  font-size: 12.5px; font-weight: 600; color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rs-item-product {
  font-size: 11px; color: var(--gray-400);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rs-item-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
}
.rs-item-date { font-size: 10px; color: var(--gray-300); }
.rs-item-score {
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px;
}
.rs-item-score.high { background: var(--green-light); color: var(--green); }
.rs-item-score.mid  { background: var(--gold-light); color: #92400E; }
.rs-item-score.low  { background: var(--red-light); color: var(--red); }

.rs-item-delete {
  background: none; border: none; cursor: pointer;
  color: var(--gray-300); font-size: 14px; padding: 2px 4px;
  border-radius: 4px; transition: all 0.12s; flex-shrink: 0;
  visibility: hidden;
}
.rs-item:hover .rs-item-delete { visibility: visible; }
.rs-item-delete:hover { color: var(--red); background: var(--red-light); }

.report-body { flex: 1; min-width: 0; padding: 24px 32px 80px; }

@media print {
  .report-sidebar { display: none !important; }
  .report-layout { display: block !important; }
  .report-body { padding: 16px !important; }
}

/* ── Data Sources Section (Figma-style platform cards) ── */
.datasources-section {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  padding: 22px 24px;
}
.ds-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
  cursor: pointer;
  user-select: none;
}
.ds-header:hover { opacity: 0.8; }
.ds-header.collapsed + .ds-cards { display: none; }
.ds-title { font-size: 18px; font-weight: 700; color: var(--gray-900); }
.ds-subtitle { font-size: 13px; color: var(--gray-400); margin-top: 2px; }
.ds-refresh { font-size: 16px; color: var(--gray-400); cursor: pointer; }
.ds-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.ds-card {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.ds-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.ds-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  border: 1.5px solid;
}
.ds-card-icon.instagram { color: #E4405F; border-color: #E4405F; background: #FFF0F3; }
.ds-card-icon.tiktok    { color: #000000; border-color: #000000; background: #F3F4F6; }
.ds-card-icon.facebook  { color: #1877F2; border-color: #1877F2; background: #EFF6FF; }
.ds-card-icon.pinterest { color: #E60023; border-color: #E60023; background: #FEF2F2; }
.ds-card-icon.linkedin  { color: #0A66C2; border-color: #0A66C2; background: #EFF6FF; }
.ds-card-icon.walmart   { color: #0071CE; border-color: #0071CE; background: #EFF6FF; }
.ds-card-icon.target    { color: #CC0000; border-color: #CC0000; background: #FEF2F2; }
.ds-card-icon.kroger    { color: #003B73; border-color: #003B73; background: #EFF4FA; }
.ds-card-icon.amazon    { color: #FF9900; border-color: #FF9900; background: #FFF8EB; }
.ds-card-icon.costco    { color: #E31837; border-color: #E31837; background: #FEF2F2; }
.ds-card-icon.default   { color: var(--teal); border-color: var(--teal); background: var(--teal-light); }

.ds-card-name { font-size: 14px; font-weight: 600; color: var(--gray-900); }
.ds-card-number { font-size: 26px; font-weight: 800; color: var(--gray-900); line-height: 1.1; margin-bottom: 2px; }
.ds-card-label { font-size: 12.5px; color: var(--gray-400); margin-bottom: 10px; }
.ds-card-growth { font-size: 12.5px; font-weight: 600; color: var(--green); margin-bottom: 3px; }
.ds-card-meta { font-size: 12px; color: var(--gray-300); }
.ds-card-status { font-size: 11px; font-weight: 600; margin-top: 6px; }
.ds-connected { color: var(--green); }
.ds-connect-prompt { color: var(--teal); }
.ds-card-connectable:hover { border-color: var(--teal); box-shadow: 0 2px 12px rgba(13,115,119,0.15); transform: translateY(-2px); transition: all 0.2s ease; }
.ds-card-connected { border-color: var(--green); }

/* ── Report Section Cards ── */
.report-section {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.rsec-header {
  padding: 18px 24px 15px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.rsec-header:hover { background: #f8fafc; }
.rsec-header::after {
  content: '▾';
  margin-left: auto;
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-500);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.rsec-header.collapsed::after { transform: rotate(-90deg); }
.rsec-body.collapsed { display: none; }
.rsec-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.rsec-icon.teal   { background: var(--teal-light); }
.rsec-icon.orange { background: var(--orange-light); }
.rsec-icon.purple { background: var(--purple-bg); }
.rsec-icon.gold   { background: var(--gold-light); }
.rsec-icon.green  { background: var(--green-light); }
.rsec-icon.red    { background: var(--red-light); }
.rsec-title { font-size: 15px; font-weight: 700; color: var(--navy); }
.rsec-subtitle { font-size: 12px; color: var(--gray-400); margin-top: 1px; }
.rsec-body { padding: 22px 24px; }

/* ── Executive Summary ── */
.exec-grid { display: grid; grid-template-columns: 1fr 200px; gap: 24px; align-items: start; }
.exec-headline { font-size: 18px; font-weight: 700; color: var(--navy); line-height: 1.4; margin-bottom: 10px; }
.exec-overview { font-size: 14px; color: var(--gray-500); line-height: 1.75; }
.gauge-card { background: var(--gray-50); border-radius: var(--radius-lg); border: 1.5px solid var(--gray-200); padding: 20px 16px; display: flex; flex-direction: column; align-items: center; }
.gauge-label { font-size: 10px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px; }
.gauge-ring { position: relative; width: 110px; height: 110px; }
.gauge-ring svg { transform: rotate(-90deg); width: 110px; height: 110px; }
.gauge-bg { fill: none; stroke: var(--gray-200); stroke-width: 8; }
.gauge-fill { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 307; stroke-dashoffset: 307; transition: stroke-dashoffset 1.2s ease; }
.gauge-number { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-score { font-size: 30px; font-weight: 800; color: var(--navy); letter-spacing: -1px; line-height: 1; }
.gauge-denom { font-size: 11px; color: var(--gray-400); }
.gauge-rationale { font-size: 11.5px; color: var(--gray-500); line-height: 1.5; text-align: center; margin-top: 10px; }

/* ── Media Mix ── */
.media-grid { display: grid; grid-template-columns: 210px 1fr; gap: 24px; align-items: start; }
.chart-container { height: 210px; position: relative; }
.media-rationale { font-size: 13px; color: var(--gray-500); line-height: 1.75; margin-bottom: 14px; }
.ch-table { width: 100%; border-collapse: collapse; }
.ch-table th { font-size: 10px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.1em; padding: 0 0 8px; border-bottom: 1.5px solid var(--gray-100); text-align: left; }
.ch-table td { padding: 10px 0; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
.ch-table tr:last-child td { border-bottom: none; }
.ch-name { font-size: 13px; font-weight: 700; color: var(--navy); }
.ch-rationale { font-size: 11.5px; color: var(--gray-400); line-height: 1.35; margin-top: 1px; }
.ch-tactics { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.ch-tactic { font-size: 10.5px; background: var(--gray-100); color: var(--gray-600); padding: 2px 7px; border-radius: 20px; font-weight: 500; }
.alloc-row { display: flex; align-items: center; gap: 8px; }
.alloc-track { flex: 1; height: 6px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
.alloc-fill { height: 100%; border-radius: 3px; transition: width 0.8s ease; }
.alloc-pct { font-size: 13px; font-weight: 700; color: var(--navy); min-width: 30px; }
.phasing-box { margin-top: 16px; padding: 13px 14px; background: var(--teal-light); border-radius: var(--radius-sm); border-left: 3px solid var(--teal-bright); }
.phasing-label { font-size: 10px; font-weight: 700; color: var(--teal-dark); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; }
.phasing-text { font-size: 13px; color: var(--gray-700); line-height: 1.6; }

/* ── Attention ── */
.bench-context { font-size: 13px; color: var(--gray-600); line-height: 1.7; margin-bottom: 14px; padding: 12px 14px; background: var(--orange-light); border-radius: var(--radius-sm); border-left: 3px solid var(--orange); }
.bench-table { width: 100%; border-collapse: collapse; }
.bench-table th { font-size: 10px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.1em; padding: 0 0 8px; border-bottom: 1.5px solid var(--gray-100); text-align: left; }
.bench-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--gray-100); font-size: 13px; vertical-align: top; }
.bench-table tr:last-child td { border-bottom: none; }
.bench-table td:first-child { font-weight: 600; color: var(--navy); }
.bench-score { font-weight: 700; color: var(--navy); }
.bench-pill { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 700; }
.bench-pill.above { background: var(--green-light); color: var(--green); }
.bench-pill.at    { background: var(--gold-light); color: #92400E; }
.bench-pill.below { background: var(--red-light); color: var(--red); }
.attn-block { margin-top: 14px; padding: 13px 14px; background: var(--gray-50); border-radius: var(--radius-sm); border: 1.5px solid var(--gray-200); }
.attn-block-label { font-size: 10px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 5px; }
.attn-block-text { font-size: 13px; color: var(--gray-700); line-height: 1.6; }

/* ── RMN ── */
.rmn-overview { font-size: 13px; color: var(--gray-500); line-height: 1.75; margin-bottom: 14px; }
.primary-rmn {
  background: linear-gradient(135deg, var(--navy) 0%, #1B3A5C 100%);
  border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 12px;
}
.prmn-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.prmn-eye { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.12em; }
.prmn-name { font-size: 16px; font-weight: 800; color: white; margin-top: 2px; }
.pri-pill { padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.pri-pill.high   { background: rgba(239,68,68,0.2); color: #FCA5A5; border: 1px solid rgba(239,68,68,0.25); }
.pri-pill.medium { background: rgba(245,158,11,0.2); color: #FCD34D; border: 1px solid rgba(245,158,11,0.25); }
.pri-pill.low    { background: rgba(156,163,175,0.2); color: #9CA3AF; border: 1px solid rgba(156,163,175,0.2); }
.prmn-invest { font-size: 12.5px; color: rgba(255,255,255,0.45); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.prmn-tactics { display: flex; flex-direction: column; gap: 6px; }
.prmn-tactic { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.8); line-height: 1.35; }
.prmn-tactic::before { content: '→'; color: var(--teal-bright); font-weight: 700; flex-shrink: 0; }
.addl-nets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 10px; margin-bottom: 14px; }
.addl-card { border: 1.5px solid var(--gray-200); border-radius: var(--radius); padding: 14px; background: var(--white); }
.addl-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.addl-name { font-size: 13px; font-weight: 700; color: var(--navy); }
.addl-focus { font-size: 12px; color: var(--gray-500); line-height: 1.45; }
.bp-box { background: var(--gray-50); border-radius: var(--radius); padding: 14px 16px; border: 1.5px solid var(--gray-200); }
.bp-box-label { font-size: 10px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }
.bp-items { display: flex; flex-direction: column; gap: 6px; }
.bp-item { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; color: var(--gray-700); line-height: 1.4; }
.bp-item::before { content: '✓'; color: var(--teal-bright); font-weight: 700; flex-shrink: 0; }

/* ── OTT/CTV ── */
.ott-role { font-size: 13px; color: var(--gray-500); line-height: 1.75; margin-bottom: 12px; }
.ott-targeting { padding: 12px 14px; margin-bottom: 16px; background: var(--purple-bg); border-radius: var(--radius-sm); border-left: 3px solid var(--purple); }
.ott-targeting-label { font-size: 10px; font-weight: 700; color: var(--purple); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; }
.ott-targeting-text { font-size: 13px; color: var(--gray-700); line-height: 1.55; }
.plat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 10px; margin-bottom: 14px; }
.plat-card { border: 1.5px solid var(--gray-200); border-radius: var(--radius); padding: 14px; background: var(--white); }
.plat-name { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.plat-why { font-size: 12px; color: var(--gray-400); line-height: 1.45; margin-bottom: 8px; }
.plat-formats { display: flex; flex-wrap: wrap; gap: 4px; }
.plat-format { font-size: 10.5px; background: var(--teal-light); color: var(--teal-dark); padding: 2px 7px; border-radius: 20px; font-weight: 600; }
.ott-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ott-info { background: var(--gray-50); border-radius: var(--radius); padding: 14px; border: 1.5px solid var(--gray-200); }
.ott-info-label { font-size: 10px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 5px; }
.ott-info-text { font-size: 13px; color: var(--gray-700); line-height: 1.6; }

/* ============================================================
   INSIGHTS SECTION (purple-tinted — matches Figma)
   ============================================================ */
.insights-section {
  background: var(--purple-bg);
  border-radius: var(--radius-lg);
  padding: 0;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.insights-header {
  padding: 20px 24px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--purple-border);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.insights-header:hover { background: #faf5ff; }
.insights-header::after {
  content: '▾';
  margin-left: auto;
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-500);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.insights-header.collapsed::after { transform: rotate(-90deg); }
.insights-body.collapsed { display: none; }
.insights-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(124,58,237,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.insights-title { font-size: 16px; font-weight: 700; color: var(--navy); }
.insights-subtitle { font-size: 12px; color: var(--purple); margin-top: 1px; }
.insights-body { padding: 20px 24px; }

/* ── Insight Cards (Figma recommendation style) ── */
.insight-list { display: flex; flex-direction: column; gap: 12px; }
.insight-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  display: flex;
  align-items: flex-start;
  border: 2px solid var(--gray-200);
  padding: 0;
  overflow: visible;
}
.insight-card.high   { border-color: var(--red); }
.insight-card.medium { border-color: var(--orange); }
.insight-card.low    { border-color: var(--gray-300); }
.insight-card.teal   { border-color: var(--orange); }

.insight-dot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  margin: 20px 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.insight-main { flex: 1; padding: 18px 20px 18px 14px; }
.insight-top-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.insight-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.insight-badge.high   { background: #FECACA; color: #DC2626; }
.insight-badge.medium { background: #FED7AA; color: #C2410C; }
.insight-badge.low    { background: var(--gray-100); color: var(--gray-500); }
.insight-badge.rec    { background: #FED7AA; color: #C2410C; }
.insight-title { font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.insight-desc { font-size: 13px; color: var(--gray-500); line-height: 1.55; margin-bottom: 8px; }
.insight-action { display: flex; align-items: baseline; gap: 6px; }
.insight-action-label { font-size: 11px; font-weight: 700; color: var(--gray-400); white-space: nowrap; }
.insight-action-val { font-size: 14px; font-weight: 600; color: var(--teal); }
.insight-bottom-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.insight-impact-col { text-align: right; flex-shrink: 0; }
.insight-impact-label { font-size: 11px; color: var(--gray-400); font-weight: 500; }
.insight-impact-val { font-size: 14px; color: #DC2626; font-weight: 700; }
.insight-card.teal .insight-impact-val { color: var(--teal); }

.insight-side {
  display: flex; align-items: flex-start; justify-content: center;
  padding: 20px 20px 0 0; flex-shrink: 0;
}
.btn-apply {
  background: #0D7377; color: white;
  font-size: 14px; font-weight: 700;
  padding: 10px 24px; border-radius: var(--radius-xl);
  cursor: pointer; border: none; transition: all 0.15s;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(13,115,119,0.3);
}
.btn-apply:hover { background: #095456; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13,115,119,0.4); }
.insight-num {
  width: 36px; height: 36px;
  background: var(--teal-bright); color: white;
  font-weight: 800; font-size: 15px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* ── Deep Dive Sections ── */
.deep-dive-section {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
  border: 2px solid var(--teal-border);
  animation: slideDown 0.3s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.dd-close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--gray-400);
  margin-left: auto; padding: 4px 8px; border-radius: 6px;
  transition: all 0.12s;
}
.dd-close:hover { background: rgba(0,0,0,0.05); color: var(--gray-700); }

/* ── Tier Sections ── */
.tier-section { margin-bottom: 24px; }
.tier-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--purple-border);
}
.tier-badge {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; padding: 4px 12px; border-radius: 20px;
  white-space: nowrap;
}
.tier-badge.tier1 { background: #0D7377; color: white; }
.tier-badge.tier2 { background: #FEF3C7; color: #92400E; }
.tier-badge.tier3 { background: var(--gray-100); color: var(--gray-500); }
.tier-desc { font-size: 12px; color: var(--gray-400); }

/* ── Content Suggestion Row ── */
.content-suggestion {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 10px; padding: 10px 12px;
  background: #F0FDF9; border: 1px solid #A7F3D0;
  border-radius: var(--radius-sm);
}
.cs-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.cs-label { font-size: 11px; font-weight: 700; color: #065F46; margin-bottom: 2px; }
.cs-text { font-size: 12.5px; color: #047857; line-height: 1.45; }

/* ── Sample Content Button ── */
.btn-sample {
  background: var(--white); color: var(--teal);
  font-size: 11px; font-weight: 700;
  padding: 7px 14px; border-radius: var(--radius-xl);
  cursor: pointer; border: 1.5px solid var(--teal-border);
  transition: all 0.15s; white-space: nowrap;
}
.btn-sample:hover { background: var(--teal-light); border-color: var(--teal); }
.btn-sample:disabled { opacity: 0.7; cursor: wait; }

/* ── Premium Gate ── */
.premium-gate {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; margin-top: 8px;
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
  border: 1.5px solid #FDE68A; border-radius: var(--radius);
}
.premium-gate-icon { font-size: 20px; flex-shrink: 0; }
.premium-gate-text { font-size: 12.5px; color: #92400E; line-height: 1.5; flex: 1; }
.premium-gate-text strong { color: #78350F; }

/* ── "Junna, create this" solve button ── */
.btn-solve {
  background: linear-gradient(135deg, #0D7377, #00BFA5);
  color: white;
  font-size: 12px; font-weight: 700;
  padding: 10px 18px; border-radius: var(--radius-xl);
  cursor: pointer; border: none; transition: all 0.2s;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(13,115,119,0.3);
}
.btn-solve:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(13,115,119,0.4); }
.btn-solve:disabled { opacity: 0.7; cursor: wait; transform: none; }
.btn-solve.solved { background: #10B981; box-shadow: 0 2px 8px rgba(16,185,129,0.3); cursor: default; }

/* ── Solution Cards ── */
.solution-container { margin-top: 12px; }
.solution-loading {
  padding: 14px; background: var(--teal-light); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--teal-dark); display: flex; align-items: center; gap: 10px;
}
.solution-error {
  padding: 12px; background: var(--red-light); border-radius: var(--radius-sm);
  font-size: 13px; color: #991B1B;
}
.solution-card {
  background: var(--gray-50); border: 1.5px solid var(--teal-border);
  border-radius: var(--radius); padding: 18px 20px; margin-top: 4px;
}
.solution-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.solution-type-badge {
  background: var(--teal); color: white;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 3px 10px; border-radius: 20px;
}
.solution-title { font-size: 15px; font-weight: 700; color: var(--navy); }
.solution-summary { font-size: 13px; color: var(--gray-500); margin-bottom: 12px; }
.solution-body {
  font-size: 13px; color: var(--gray-700); line-height: 1.65;
  max-height: 400px; overflow-y: auto; padding-right: 8px;
}
.solution-body h3 { font-size: 14px; font-weight: 700; color: var(--navy); margin: 14px 0 6px; }
.solution-body h4 { font-size: 13px; font-weight: 700; color: var(--gray-700); margin: 10px 0 4px; }
.solution-body ul { margin: 6px 0; padding-left: 18px; }
.solution-body li { margin-bottom: 4px; }
.solution-body table { margin: 8px 0; }
.solution-body td { padding: 6px 10px; font-size: 12px; }
.solution-next {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gray-200);
  font-size: 13px; color: var(--gray-600);
}
.solution-next ol { margin: 6px 0 0; padding-left: 18px; }
.solution-next li { margin-bottom: 4px; }
.solution-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gray-200);
}

/* ── Download Dropdown ── */
.download-dropdown { position: relative; }
.dd-menu {
  display: none; position: absolute; bottom: 100%; left: 0;
  background: var(--white); border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  min-width: 180px; padding: 4px; z-index: 100;
  margin-bottom: 4px;
}
.dd-menu.open { display: block; }
.dd-menu button {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; border: none; background: none;
  font-size: 12.5px; font-weight: 500; color: var(--gray-700);
  cursor: pointer; border-radius: 4px;
}
.dd-menu button:hover { background: var(--gray-100); color: var(--navy); }

/* ── Schedule to Post Button ── */
.btn-schedule {
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  color: white; font-size: 12px; font-weight: 700;
  padding: 8px 16px; border-radius: var(--radius-xl);
  border: none; cursor: pointer; transition: all 0.15s;
  white-space: nowrap;
}
.btn-schedule:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124,58,237,0.3); }

/* ── Schedule Modal ── */
.schedule-overlay {
  position: fixed; inset: 0; background: rgba(15,15,30,0.5);
  z-index: 500; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.schedule-modal {
  background: var(--white); border-radius: var(--radius-xl);
  width: 100%; max-width: 520px; box-shadow: var(--shadow-xl);
  max-height: 90vh; overflow-y: auto;
}
.schedule-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--gray-100);
}
.schedule-modal-header h3 { font-size: 16px; font-weight: 700; color: var(--navy); }
.schedule-modal-header button {
  background: none; border: none; font-size: 18px; color: var(--gray-400);
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.schedule-modal-header button:hover { background: var(--gray-100); color: var(--navy); }
.schedule-modal-body { padding: 20px 24px; }
.schedule-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 16px 24px; border-top: 1px solid var(--gray-100);
}

.schedule-preview {
  background: var(--gray-50); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 16px; border: 1px solid var(--gray-200);
}
.schedule-preview-label { font-size: 10px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; }
.schedule-preview-title { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.schedule-preview-text { font-size: 12.5px; color: var(--gray-500); line-height: 1.5; }

.schedule-field { margin-bottom: 14px; }
.schedule-field > label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }

.schedule-platforms { display: flex; flex-direction: column; gap: 6px; }
.schedule-platform {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm); cursor: pointer; transition: all 0.12s;
}
.schedule-platform:hover { border-color: var(--teal-border); background: var(--teal-light); }
.schedule-platform input[type="checkbox"] { accent-color: var(--teal-bright); width: 16px; height: 16px; }
.schedule-platform-icon { font-size: 16px; }
.schedule-platform-handle { font-size: 11px; color: var(--gray-400); margin-left: auto; }

.schedule-coming-soon {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; margin-top: 12px;
  background: linear-gradient(135deg, #F3EFFF, #EDE9FE);
  border: 1px solid var(--purple-border); border-radius: var(--radius);
  font-size: 12.5px; color: #5B21B6; line-height: 1.5;
}
.schedule-coming-soon strong { color: #4C1D95; }

/* ── Error ── */
.error-state { display: none; text-align: center; padding: 80px 40px; }
.error-state.active { display: block; }
.error-icon { font-size: 48px; margin-bottom: 16px; }
.error-title { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.error-msg { font-size: 14px; color: var(--gray-500); margin-bottom: 24px; }

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  body { background: white !important; }
  .report-header { position: static !important; }
  .report-actions { display: none !important; }
  .report-body { padding: 16px !important; max-width: 100% !important; }
  .report-section, .insights-section { box-shadow: none !important; border: 1px solid #E5E7EB !important; break-inside: avoid; margin-bottom: 12px !important; }
  .primary-rmn { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .kpi-row { grid-template-columns: repeat(4, 1fr) !important; }
  .insights-section { background: #F3F0FF !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-page { background: var(--bg); }
.auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-card { background: var(--white); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 44px 40px; width: 100%; max-width: 420px; }
.auth-logo { text-align: center; margin-bottom: 6px; }
.auth-tagline { text-align: center; font-size: 12.5px; color: var(--gray-400); margin-bottom: 28px; }
.auth-title { font-size: 20px; font-weight: 700; color: var(--navy); text-align: center; margin-bottom: 20px; }
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 5px; }
.auth-remember {
  display: flex; align-items: center; justify-content: space-between; margin: 12px 0 4px;
}
.remember-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--gray-600); cursor: pointer; user-select: none;
}
.remember-label input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--teal-bright); cursor: pointer;
}
.forgot-link {
  font-size: 13px; color: var(--teal-bright); text-decoration: none; font-weight: 500;
}
.forgot-link:hover { text-decoration: underline; }
.password-wrap {
  position: relative;
}
.password-wrap .form-input { padding-right: 60px; }
.pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--teal-bright);
  padding: 4px 8px; border-radius: 4px;
}
.pw-toggle:hover { background: var(--teal-light); }
.auth-btn { width: 100%; justify-content: center; margin-top: 8px; padding: 12px; }
.auth-switch { text-align: center; font-size: 13px; color: var(--gray-500); margin-top: 18px; }
.auth-switch a { color: var(--teal-bright); font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.auth-error { color: var(--red); font-size: 13px; text-align: center; margin-bottom: 12px; min-height: 18px; }

/* ============================================================
   CONNECT ACCOUNTS PAGE
   ============================================================ */
.connect-wrapper { padding: 36px 28px 80px; }
.connect-container { max-width: 800px; margin: 0 auto; }
.connect-header { margin-bottom: 28px; }
.connect-title { font-size: 24px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.connect-subtitle { font-size: 14px; color: var(--gray-500); line-height: 1.6; }
.connect-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.connect-card {
  background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  padding: 20px 22px; border: 1.5px solid var(--gray-200); transition: all 0.3s;
}
.connect-card:hover { border-color: rgba(15,168,158,0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.connect-card.connected { border-color: #0FA89E; background: #FAFFFE; }
.connect-card-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px;
}
.connect-card-left { display: flex; align-items: center; gap: 14px; }
.connect-card-right { flex-shrink: 0; }
.connect-card-data { font-size: 12.5px; color: var(--gray-400); line-height: 1.5; padding-left: 56px; }
.connect-card-top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.connect-card-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.connect-card-name { font-size: 16px; font-weight: 700; color: var(--navy); }
.connect-card-status { font-size: 12px; color: var(--gray-400); margin-top: 1px; }
.connect-card-status.active { color: var(--green); }
.connect-card-status.warning { color: #F59E0B; }
.connect-card-desc { font-size: 13px; color: var(--gray-500); line-height: 1.55; margin-bottom: 14px; }
.btn-connect {
  background: var(--teal-bright); color: white; font-size: 13px; font-weight: 600;
  padding: 8px 20px; border-radius: var(--radius-sm); cursor: pointer; border: none;
}
.btn-connect:hover { background: #00A896; }
.btn-disconnect {
  background: var(--white); color: var(--gray-500); font-size: 13px; font-weight: 600;
  padding: 8px 20px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1.5px solid var(--gray-200);
}
.btn-disconnect:hover { border-color: var(--red); color: var(--red); }

.connect-card.connecting { border-color: var(--teal-bright); background: #FAFFFE; }
.connect-form { margin-top: 4px; }
.connect-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.connect-field label { display: block; font-size: 12px; font-weight: 600; color: var(--gray-600); margin-bottom: 4px; }
.connect-field .form-input { font-size: 13px; padding: 9px 11px; }
.connect-form-actions { display: flex; gap: 8px; align-items: center; }

.connect-status {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: var(--radius); margin-bottom: 16px;
  font-size: 13px; font-weight: 500;
}
.connect-status.success { background: var(--green-light); color: #065F46; border: 1px solid #A7F3D0; }
.connect-status.error { background: var(--red-light); color: #991B1B; border: 1px solid #FECACA; }
.connect-status.info { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }

.connect-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.connect-notice {
  background: var(--teal-light); border: 1px solid var(--teal-border); border-radius: var(--radius);
  padding: 14px 16px; font-size: 13px; color: var(--teal-dark);
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 24px;
}
.connect-footer { text-align: center; }

/* ============================================================
   DOOR COUNT GRID
   ============================================================ */
.door-count-grid { display: flex; flex-direction: column; gap: 8px; }
.door-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; background: var(--gray-50);
  border-radius: var(--radius-sm); border: 1px solid var(--gray-200);
}
.door-channel { font-size: 13px; font-weight: 600; color: var(--gray-700); min-width: 180px; }
.door-row .form-input { max-width: 120px; padding: 6px 10px; font-size: 13px; }
.door-label { font-size: 12px; color: var(--gray-400); }

/* ============================================================
   READINESS IMPROVEMENT SECTION
   ============================================================ */
.readiness-improve {
  margin-top: 16px; padding: 18px 20px;
  background: #FFF7ED; border: 1.5px solid #FED7AA;
  border-radius: var(--radius); border-left: 4px solid #F59E0B;
}
.readiness-improve-title { font-size: 14px; font-weight: 700; color: #92400E; margin-bottom: 4px; }
.readiness-improve-desc { font-size: 13px; color: #B45309; margin-bottom: 10px; }
.readiness-improve-list {
  margin: 0; padding-left: 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.readiness-improve-list li { font-size: 13px; color: var(--gray-700); line-height: 1.55; }

/* ============================================================
   PRICING PAGE
   ============================================================ */
.pricing-wrapper { padding: 40px 28px 80px; }
.pricing-container { max-width: 1060px; margin: 0 auto; }
.pricing-header { text-align: center; margin-bottom: 32px; }
.pricing-title { font-size: 28px; font-weight: 800; color: var(--navy); letter-spacing: -0.5px; margin-bottom: 8px; }
.pricing-subtitle { font-size: 15px; color: var(--gray-500); }

.pricing-status {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-radius: var(--radius); margin-bottom: 20px;
  font-size: 13px; font-weight: 500;
}
.pricing-status.success { background: var(--green-light); color: #065F46; border: 1px solid #A7F3D0; }
.pricing-status.info { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }

/* ── Two-Tier Pricing Layout ── */
.pricing-two-tier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.tier-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  border: 2px solid var(--gray-200);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tier-card:hover { border-color: var(--teal-border); box-shadow: var(--shadow-md); }
.tier-card.current { border-color: var(--teal-bright); }
.tier-card.featured { border-color: var(--teal-bright); box-shadow: 0 4px 24px rgba(0,191,165,0.15); }

.tier-featured-badge {
  position: absolute; top: -1px; right: 24px;
  background: var(--teal-bright); color: white;
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; padding: 6px 16px;
  border-radius: 0 0 10px 10px;
}

.tier-card-header { padding: 28px 28px 20px; }
.tier-card-name { font-size: 13px; font-weight: 800; color: var(--teal); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 8px; }
.tier-card-price { margin-bottom: 6px; }
.tier-amount { font-size: 40px; font-weight: 800; color: var(--navy); letter-spacing: -1.5px; }
.tier-interval { font-size: 15px; color: var(--gray-400); font-weight: 500; }
.tier-commitment { font-size: 12px; color: var(--gray-400); font-weight: 500; margin-top: 2px; }

/* Billing toggle for Tier 2 */
.tier-billing-toggle {
  display: flex; gap: 4px; margin-bottom: 12px;
  background: var(--gray-100); border-radius: var(--radius-sm); padding: 3px;
}
.billing-opt {
  flex: 1; padding: 7px 12px; border: none; border-radius: 6px;
  font-size: 12px; font-weight: 600; color: var(--gray-500);
  cursor: pointer; background: none; transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.billing-opt.active { background: var(--white); color: var(--navy); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.save-badge {
  background: #D1FAE5; color: #065F46;
  font-size: 9px; font-weight: 800; padding: 2px 6px;
  border-radius: 10px; text-transform: uppercase; letter-spacing: 0.05em;
}

.tier-card-body { padding: 0 28px 20px; flex: 1; }
.tier-card-desc { font-size: 13.5px; color: var(--gray-500); line-height: 1.5; margin-bottom: 16px; }
.tier-includes { font-size: 11px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }

.tier-features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.tier-features li {
  font-size: 13px; color: var(--gray-600); line-height: 1.4;
  padding-left: 22px; position: relative;
}
.tier-features li::before {
  content: '✓'; position: absolute; left: 0;
  color: var(--teal-bright); font-weight: 700; font-size: 13px;
}
.tier-features li.highlight { color: var(--navy); font-weight: 600; }
.tier-features li.highlight::before { content: '★'; color: var(--teal); }

.tier-card-footer { padding: 20px 28px 28px; }
.tier-btn {
  width: 100%; display: flex; justify-content: center;
  padding: 13px; border-radius: var(--radius);
  font-size: 14px; font-weight: 700;
  background: var(--white); color: var(--teal);
  border: 2px solid var(--teal-border);
  cursor: pointer; transition: all 0.15s;
}
.tier-btn:hover { background: var(--teal-light); border-color: var(--teal); }
.tier-btn-primary {
  background: var(--teal-bright) !important; color: white !important;
  border-color: var(--teal-bright) !important;
  box-shadow: 0 4px 16px rgba(0,191,165,0.3);
}
.tier-btn-primary:hover { background: #00A896 !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,191,165,0.4); }
.tier-btn:disabled { opacity: 0.6; cursor: default; transform: none !important; }

.pricing-current {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1.5px solid var(--gray-200); padding: 18px 24px;
  margin-bottom: 24px; box-shadow: var(--shadow-sm);
}
.pricing-current-inner { display: flex; align-items: center; justify-content: space-between; }
.pricing-current-label { font-size: 11px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.1em; }
.pricing-current-tier { font-size: 18px; font-weight: 800; color: var(--teal); margin-top: 2px; }
.pricing-current-actions { display: flex; gap: 8px; }

.pricing-faq {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 28px 32px; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200);
}
.pricing-faq h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 16px; }
.faq-item { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--gray-100); }
.faq-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.faq-item strong { font-size: 14px; color: var(--navy); display: block; margin-bottom: 4px; }
.faq-item p { font-size: 13px; color: var(--gray-500); line-height: 1.6; margin: 0; }

/* ============================================================
   BETA AGREEMENT MODAL
   ============================================================ */
.beta-gate-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(13,27,42,0.7);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  padding: 20px;
}
.beta-gate-modal {
  background: var(--white);
  border-radius: var(--radius-2xl);
  max-width: 580px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  padding: 36px 40px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.2);
}
.beta-gate-logo { text-align: center; margin-bottom: 8px; }
.beta-gate-title {
  font-size: 20px; font-weight: 800; color: var(--navy);
  text-align: center; margin-bottom: 12px;
}
.beta-gate-welcome {
  font-size: 14px; color: #059669; font-weight: 600;
  text-align: center; margin-bottom: 16px;
  padding: 10px 16px; background: #ECFDF5;
  border-radius: var(--radius-sm);
}
.beta-gate-intro {
  font-size: 13.5px; color: var(--gray-600); margin-bottom: 12px;
}
.beta-gate-terms {
  margin: 0 0 16px; padding-left: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.beta-gate-terms li {
  font-size: 13px; color: var(--gray-700); line-height: 1.55;
}
.beta-gate-legal {
  font-size: 12px; color: var(--gray-400); line-height: 1.5;
  margin-bottom: 20px; padding: 12px 14px;
  background: var(--gray-50); border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
}
.beta-gate-actions {
  display: flex; gap: 12px; justify-content: center;
}
.beta-gate-decline {
  background: var(--white); color: var(--gray-500);
  border: 1.5px solid var(--gray-200); font-size: 14px; font-weight: 600;
  padding: 12px 28px; border-radius: var(--radius-sm);
  cursor: pointer; transition: all 0.15s;
}
.beta-gate-decline:hover { border-color: var(--red); color: var(--red); }
.beta-gate-accept {
  background: #0D7377; color: white;
  border: none; font-size: 14px; font-weight: 700;
  padding: 12px 28px; border-radius: var(--radius-sm);
  cursor: pointer; transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(13,115,119,0.3);
}
.beta-gate-accept:hover { background: #095456; transform: translateY(-1px); }

.hidden { display: none !important; }

/* ── Report Folders & Tags ──���──────────────────── */
.rs-filters { padding: 8px 12px; border-bottom: 1px solid var(--gray-100); }
.rs-folder-list { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.rs-folder-btn { font-size: 11px; padding: 4px 10px; border: 1px solid var(--gray-200); border-radius: 6px; background: white; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 4px; }
.rs-folder-btn.active { background: var(--teal-light); border-color: var(--teal); color: var(--teal); font-weight: 600; }
.rs-folder-btn:hover { border-color: var(--teal); }
.rs-folder-btn .folder-icon { font-size: 10px; }
.rs-folder-btn .folder-delete { font-size: 9px; color: var(--gray-300); margin-left: 4px; }
.rs-folder-btn .folder-delete:hover { color: var(--red); }

.rs-tag-row { display: flex; flex-wrap: wrap; gap: 4px; }
.rs-tag-pill { font-size: 10px; padding: 2px 8px; border-radius: 10px; background: #F3F4F6; color: var(--gray-600); border: 1px solid transparent; cursor: pointer; }
.rs-tag-pill.active { background: #0D737718; color: var(--teal); border-color: var(--teal); font-weight: 600; }
.rs-tag-pill.clear { background: #FEE2E2; color: var(--red); }
.rs-tag-pill:hover { border-color: var(--gray-300); }

.rs-item-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.rs-item-tag { font-size: 9px; padding: 1px 6px; border-radius: 8px; background: #E0F2FE; color: #0369A1; }

.rs-item-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rs-move-folder { font-size: 10px; padding: 2px 4px; border: 1px solid var(--gray-200); border-radius: 4px; background: white; cursor: pointer; max-width: 80px; }

.report-tags-container { margin-top: 4px; }
.report-tags-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.report-tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #DBEAFE; color: #1E40AF; display: inline-flex; align-items: center; gap: 4px; }
.report-tag button { border: none; background: none; color: #93C5FD; cursor: pointer; font-size: 10px; padding: 0; }
.report-tag button:hover { color: #EF4444; }
.report-tag-input { font-size: 11px; padding: 3px 8px; border: 1px dashed var(--gray-300); border-radius: 6px; background: transparent; width: 80px; color: var(--gray-600); }
.report-tag-input:focus { border-color: var(--teal); outline: none; }

/* ── Compare Mode ─────────────────────────────── */
.compare-mode .rs-item { padding-left: 28px; position: relative; }
.compare-check { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); }

.report-compare-view { background: white; border-radius: var(--radius-lg); padding: 24px; margin-bottom: 24px; box-shadow: var(--shadow-md); border: 2px solid var(--teal); }
.compare-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid var(--gray-100); padding-bottom: 12px; }
.compare-header h2 { font-size: 18px; color: var(--navy); margin: 0; }
.compare-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; }
.compare-col { padding: 16px; background: var(--gray-50); border-radius: var(--radius-md); }
.compare-col h3 { font-size: 14px; margin: 0 0 8px; color: var(--navy); }
.compare-date { font-size: 11px; color: var(--gray-400); margin-bottom: 12px; }
.compare-score { font-size: 32px; font-weight: 800; color: var(--teal); margin-bottom: 8px; }
.compare-budget { font-size: 13px; color: var(--gray-600); margin-bottom: 12px; }
.compare-channels { font-size: 12px; color: var(--gray-500); line-height: 1.8; }
.compare-delta { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 160px; }
.compare-delta-score { font-size: 28px; font-weight: 800; }
.compare-delta-score.positive { color: #059669; }
.compare-delta-score.negative { color: #EF4444; }
.compare-delta-label { font-size: 11px; color: var(--gray-400); margin-bottom: 16px; }
.compare-new { font-size: 12px; color: #059669; margin-bottom: 8px; }
.compare-removed { font-size: 12px; color: #EF4444; margin-bottom: 8px; }
.compare-new ul, .compare-removed ul { margin: 4px 0; padding-left: 16px; }

/* ── Benchmark Comparison ─────────────────────── */
.benchmark-comparison { padding: 8px 0; }
.bench-compare-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.bench-compare-card { text-align: center; padding: 20px; background: var(--gray-50); border-radius: var(--radius-md); }
.bench-compare-label { font-size: 11px; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.bench-compare-value { font-size: 32px; font-weight: 800; }
.bench-compare-value.brand { color: var(--teal); }
.bench-compare-value.avg { color: var(--gray-500); }
.bench-compare-value.positive { color: #059669; }
.bench-compare-value.negative { color: #EF4444; }
.bench-compare-details { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bench-detail-item { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--gray-50); border-radius: 6px; }
.bench-detail-label { font-size: 12px; color: var(--gray-400); }
.bench-detail-value { font-size: 12px; font-weight: 600; color: var(--navy); }
.bench-data-source { margin-top: 16px; font-size: 11px; color: var(--gray-400); text-align: center; font-style: italic; }

/* ══════════════════════════════════════════════════════
   JUNNA CHAT WIDGET
   ══════════════════════════════════════════════════════ */

.junna-chat-widget { position: fixed; bottom: 24px; right: 24px; z-index: 9999; font-family: 'Inter', -apple-system, sans-serif; }
@media print { .junna-chat-widget { display: none; } }

.junna-chat-fab { display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #0D7377, #0FA89E); color: white; border: none; padding: 14px 20px; border-radius: 50px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 20px rgba(13, 115, 119, 0.35); transition: all 0.2s ease; }
.junna-chat-fab:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(13, 115, 119, 0.45); }
.junna-chat-fab.active { border-radius: 50%; padding: 14px; }
.junna-chat-fab.active .chat-fab-label { display: none; }
.chat-fab-icon { font-size: 18px; }

.junna-chat-panel { display: none; flex-direction: column; position: absolute; bottom: 70px; right: 0; width: 400px; max-height: 600px; background: white; border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; animation: chatSlideUp 0.25s ease-out; }
@keyframes chatSlideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.junna-chat-panel.minimized { max-height: none; height: auto; }
.junna-chat-panel.minimized .chat-messages,
.junna-chat-panel.minimized .chat-input-area,
.junna-chat-panel.minimized .chat-history-panel { display: none !important; }
@media (max-width: 480px) { .junna-chat-panel { width: calc(100vw - 32px); right: -8px; max-height: calc(100vh - 120px); } }

.chat-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: linear-gradient(135deg, #0D7377, #0FA89E); color: white; }
.chat-header-left { display: flex; align-items: center; gap: 10px; }
.chat-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.chat-header-title { font-size: 14px; font-weight: 700; }
.chat-header-sub { font-size: 11px; opacity: 0.8; }
.chat-header-actions { display: flex; gap: 4px; }
.chat-action-btn { background: rgba(255,255,255,0.15); border: none; color: white; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.chat-action-btn:hover { background: rgba(255,255,255,0.3); }

.chat-history-panel { flex: 1; overflow-y: auto; min-height: 300px; max-height: 420px; background: #f9fafb; }
.chat-history-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; }
.chat-history-header .chat-action-btn { background: #e5e7eb; color: #374151; }
.chat-history-title { font-size: 14px; font-weight: 700; color: #1a1a2e; }
.chat-history-list { padding: 8px; }
.chat-history-item { padding: 12px; margin-bottom: 6px; background: white; border-radius: 10px; cursor: pointer; border: 1px solid #e5e7eb; transition: all 0.15s; }
.chat-history-item:hover { border-color: #0D7377; box-shadow: 0 2px 8px rgba(13,115,119,0.1); }
.chat-history-item.active { border-color: #0D7377; background: #f0fdfa; }
.chat-history-item-date { font-size: 11px; color: #6b7280; margin-bottom: 4px; }
.chat-history-item-preview { font-size: 13px; color: #1a1a2e; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-history-item-count { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.chat-history-empty { text-align: center; padding: 40px 20px; color: #94a3b8; font-size: 13px; }

.chat-messages { flex: 1; overflow-y: auto; padding: 16px; min-height: 300px; max-height: 420px; }

.chat-welcome { text-align: center; padding: 20px 10px; }
.chat-welcome-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #0D7377, #0FA89E); color: white; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; margin: 0 auto 12px; }
.chat-welcome-text { font-size: 13px; color: #4b5563; line-height: 1.6; }

.chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; }
.chat-suggestion { background: #f0fdf4; border: 1px solid #bbf7d0; color: #065f46; font-size: 11px; font-weight: 500; padding: 6px 12px; border-radius: 20px; cursor: pointer; transition: all 0.15s; }
.chat-suggestion:hover { background: #dcfce7; border-color: #86efac; }

.chat-msg { display: flex; gap: 8px; margin-bottom: 12px; animation: chatFadeIn 0.2s ease; }
@keyframes chatFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.chat-msg-user { flex-direction: row-reverse; }
.chat-msg-user .chat-msg-bubble { background: #0D7377; color: white; border-radius: 16px 16px 4px 16px; }
.chat-msg-assistant .chat-msg-bubble { background: #f8fafc; color: #1e293b; border: 1px solid #e2e8f0; border-radius: 16px 16px 16px 4px; }
.chat-msg-avatar { width: 28px; height: 28px; min-width: 28px; border-radius: 50%; background: linear-gradient(135deg, #0D7377, #0FA89E); color: white; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; }
.chat-msg-bubble { max-width: 80%; padding: 10px 14px; font-size: 13px; line-height: 1.6; word-wrap: break-word; }
.chat-msg-bubble code { background: rgba(0,0,0,0.06); padding: 1px 4px; border-radius: 3px; font-size: 12px; }
.chat-msg-bubble strong { font-weight: 700; }

.chat-typing { display: flex; align-items: center; gap: 4px; padding: 12px 16px; }
.typing-dot { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; animation: typingBounce 1.2s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }

.chat-input-area { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-top: 1px solid #e2e8f0; background: #fafafa; }
.chat-input-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-usage-row { display: flex; justify-content: flex-end; min-height: 14px; }
.chat-usage-counter { font-size: 10px; color: #94a3b8; font-weight: 500; display: none; }
.chat-input { flex: 1; resize: none; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 14px; font-size: 13px; font-family: inherit; line-height: 1.4; max-height: 120px; outline: none; transition: border-color 0.15s; }
.chat-input:focus { border-color: #0D7377; box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.1); }
.chat-input::placeholder { color: #94a3b8; }
.chat-send-btn { width: 36px; height: 36px; border-radius: 50%; background: #0D7377; color: white; border: none; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; }
.chat-send-btn:hover { background: #0FA89E; transform: scale(1.05); }
.chat-send-btn:disabled { background: #cbd5e1; cursor: not-allowed; transform: none; }

.chat-msg-system { width: 100%; }
.chat-limit-card { background: linear-gradient(135deg, #fef3c7, #fef9c3); border: 1px solid #fcd34d; border-radius: 12px; padding: 16px; text-align: center; }
.chat-limit-icon { font-size: 24px; margin-bottom: 8px; }
.chat-limit-text { font-size: 12px; color: #92400e; line-height: 1.5; margin-bottom: 12px; }
.chat-limit-btn { display: inline-block; background: #7C3AED; color: white; font-size: 12px; font-weight: 700; padding: 8px 20px; border-radius: 8px; text-decoration: none; transition: all 0.15s; }
.chat-limit-btn:hover { background: #6D28D9; transform: translateY(-1px); }