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

:root {
  --blue:       #2563eb;
  --blue-dark:  #1d4ed8;
  --blue-xdark: #1e3a8a;
  --blue-light: #eff6ff;
  --blue-mid:   #dbeafe;
  --blue-text:  #1e40af;
  --gray-50:    #f9fafb;
  --gray-100:   #f3f4f6;
  --gray-200:   #e5e7eb;
  --gray-300:   #d1d5db;
  --gray-400:   #9ca3af;
  --gray-500:   #6b7280;
  --gray-700:   #374151;
  --gray-900:   #111827;
  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  16px;
  --shadow:     0 1px 3px rgba(0,0,0,.07),0 4px 14px rgba(0,0,0,.06);
  --shadow-lg:  0 4px 8px rgba(0,0,0,.08),0 12px 32px rgba(0,0,0,.10);
}

html { font-size:16px; scroll-behavior:smooth; }

body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  background: var(--blue-dark);
  color:var(--gray-900);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ── Header ───────────────────────────────────────────────────── */
.app-header {
  position:sticky;top:0;z-index:100;
  background:white;
  border-bottom:1px solid var(--gray-200);
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.header-inner {
  max-width:860px;margin:0 auto;padding:0 24px;
  height:60px;display:flex;align-items:center;
  justify-content:space-between;gap:24px;
}
.header-brand {
  display:flex;align-items:center;gap:12px;
  flex-shrink:0;text-decoration:none;
}
.brand-logo {
  width:38px;height:38px;
  border-radius:9px;
  object-fit:contain;
}
.brand-text{display:flex;flex-direction:column}
.brand-name{font-size:13px;font-weight:700;color:var(--gray-900);line-height:1.2}
.brand-sub {font-size:11px;color:var(--gray-400);line-height:1.2}

/* Phase nav */
.phase-nav{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;gap:2px}
.phase-nav::-webkit-scrollbar{display:none}
.phase-step{display:flex;align-items:center;font-size:12px;font-weight:500;color:var(--gray-400);white-space:nowrap;text-decoration:none;border:0;background:none;padding:0;cursor:default}
.phase-step.open{cursor:pointer}
.phase-step.open:hover .phase-step-inner{background:var(--blue-light)}
.phase-step.active{color:var(--blue);font-weight:700}
.phase-step.done  {color:var(--gray-500)}
.phase-step-inner{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;transition:background .2s}
.phase-step.active .phase-step-inner{background:var(--blue-light)}
.phase-dot{
  width:20px;height:20px;border-radius:50%;
  border:2px solid var(--gray-300);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;flex-shrink:0;
  transition:border-color .2s,background .2s,color .2s;
}
.phase-step.active .phase-dot{border-color:var(--blue);background:var(--blue);color:white}
.phase-step.done   .phase-dot{border-color:var(--gray-400);background:var(--gray-400);color:white}
.phase-arrow{color:var(--gray-300);font-size:11px;margin:0 2px;flex-shrink:0}

/* ── Main content ─────────────────────────────────────────────── */
.main-content{
  flex:1;width:100%;
  display:flex;align-items:center;justify-content:center;
  padding:32px 16px 96px;
}
#content{width:100%;max-width:720px}

/* ── Bottom nav ───────────────────────────────────────────────── */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;
  background:white;border-top:1px solid var(--gray-200);
  box-shadow:0 -2px 16px rgba(0,0,0,.08);
  z-index:50;
  overflow-x:auto;scrollbar-width:none;
}
.bottom-nav::-webkit-scrollbar{display:none}
.bnav-inner{
  display:flex;align-items:center;justify-content:center;
  padding:10px 20px 12px;
  width:max-content;min-width:100%;margin:0 auto;
}
.bnav-pill{
  height:28px;padding:0 11px;border-radius:99px;flex-shrink:0;
  border:1.5px solid var(--gray-200);background:white;
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:600;color:var(--gray-500);
  text-decoration:none;white-space:nowrap;cursor:default;
  transition:border-color .15s,background .15s,color .15s;
}
.bnav-pill.open{cursor:pointer}
.bnav-pill.open:hover{border-color:var(--blue);background:var(--blue-light);color:var(--blue)}
.bnav-pill.active{border-color:var(--blue);background:var(--blue);color:white;font-weight:700}
.bnav-pill.done{background:var(--blue-light);color:var(--blue-text);border-color:var(--blue-mid)}
.bnav-pill.locked{opacity:.35;pointer-events:none}
.bnav-step-arrow{color:var(--gray-300);font-size:10px;margin:0 3px;flex-shrink:0}
.bnav-phase-arrow{color:var(--gray-200);font-size:16px;margin:0 6px;flex-shrink:0}

/* ── Card ─────────────────────────────────────────────────────── */
.card{
  background:white;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:32px;
}
.card:not(.slide-forward):not(.slide-back){animation:cardIn .28s cubic-bezier(.22,.68,0,1.1) both}
.card.slide-forward,.end-card.slide-forward{animation:slideFromRight .3s cubic-bezier(.22,.68,0,1.1) both}
.card.slide-back,.end-card.slide-back{animation:slideFromLeft .3s cubic-bezier(.22,.68,0,1.1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes slideFromRight{from{opacity:0;transform:translateX(52px)}to{opacity:1;transform:none}}
@keyframes slideFromLeft {from{opacity:0;transform:translateX(-52px)}to{opacity:1;transform:none}}

.step-label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--blue);background:var(--blue-light);
  padding:4px 10px;border-radius:99px;margin-bottom:16px;
}
h2.question{
  font-size:21px;font-weight:800;color:var(--gray-900);
  line-height:1.35;letter-spacing:-.3px;margin-bottom:6px;
}
.question-sub{font-size:14px;color:var(--gray-500);line-height:1.65;margin-bottom:24px}

/* ── Options ─────────────────────────────────────────────────── */
.options{display:flex;flex-direction:column;gap:8px}

.option-btn{
  display:flex;align-items:flex-start;gap:12px;
  width:100%;padding:12px 16px;
  background:white;border:2px solid var(--gray-200);
  border-radius:var(--radius);cursor:pointer;
  font-family:inherit;text-align:left;color:var(--gray-900);
  transition:border-color .15s,background .15s,box-shadow .15s,transform .1s;
}
.option-btn:hover{
  border-color:var(--blue);background:var(--blue-light);
  box-shadow:0 0 0 4px rgba(37,99,235,.07);transform:translateY(-1px);
}
.option-btn.selected{
  border-color:var(--blue);background:var(--blue);color:white;
  box-shadow:0 4px 14px rgba(37,99,235,.3);transform:translateY(-1px);
}
.option-btn:active{transform:none}


.option-body{flex:1}
.option-title{font-size:15px;font-weight:600;line-height:1.3;display:block}
.option-desc {font-size:13px;opacity:.7;margin-top:3px;line-height:1.5;display:block}
.option-hint {font-size:12px;margin-top:6px;line-height:1.4;display:block;color:var(--gray-500);font-style:italic}
.option-btn.selected .option-hint{color:rgba(255,255,255,.75)}

/* ── Info boxes ───────────────────────────────────────────────── */
.info-box{
  display:flex;gap:12px;padding:14px 16px;
  border-radius:var(--radius-sm);font-size:13px;line-height:1.65;margin:16px 0;
}
.info-box.blue   {background:var(--blue-light);color:var(--blue-text);border-left:3px solid var(--blue)}
.info-box.neutral{background:var(--gray-100);color:var(--gray-700);border-left:3px solid var(--gray-300)}
.info-box.red    {background:#fff0f0;color:#7a1a1a;border-left:4px solid #d32f2f;font-weight:500}
.info-box.red .info-box-icon{font-size:20px}
.info-box-icon   {font-size:16px;flex-shrink:0;margin-top:1px}
.info-box strong {font-weight:700}
.step-image {max-width: 100%; height: auto;border-radius: 8px; margin: 12px 0;}
.info-body {font-size: 14px; line-height: 1.8;margin: 0 auto;white-space: pre-line;}

/* ── Upload zone ──────────────────────────────────────────────── */
.upload-section{margin-top:24px}
.upload-label   {display:block;font-size:13px;font-weight:700;color:var(--gray-700);margin-bottom:4px}
.upload-sublabel{display:block;font-size:12px;color:var(--gray-400);margin-bottom:10px}

.upload-zone{
  position:relative;border:2px dashed var(--gray-300);
  border-radius:var(--radius);padding:24px 20px;
  text-align:center;cursor:pointer;background:var(--gray-50);
  transition:border-color .15s,background .15s;
}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--blue);background:var(--blue-light)}
.upload-zone input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upload-zone-icon{font-size:28px;margin-bottom:6px}
.upload-zone p   {font-size:13px;color:var(--gray-600)}
.upload-zone span{font-size:12px;color:var(--gray-400);margin-top:2px;display:block}
.upload-zone strong{color:var(--blue)}

.file-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.file-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;background:white;
  border:1px solid var(--gray-200);border-radius:var(--radius-sm);
  font-size:13px;animation:cardIn .2s ease;
}
.file-icon  {font-size:18px;flex-shrink:0}
.file-name  {flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gray-700);font-weight:500}
.file-size  {font-size:11px;color:var(--gray-400);flex-shrink:0}
.file-remove{
  background:none;border:none;cursor:pointer;
  color:var(--gray-400);font-size:14px;padding:2px 4px;
  border-radius:4px;transition:color .15s,background .15s;flex-shrink:0;
}
.file-remove:hover{color:#dc2626;background:#fee2e2}

/* ── Actions bar ──────────────────────────────────────────────── */
.actions{
  display:flex;align-items:center;gap:12px;
  margin-top:28px;padding-top:24px;border-top:1px solid var(--gray-100);
}
.btn-back{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:2px solid var(--gray-200);border-radius:var(--radius-sm);
  padding:10px 16px;font-size:14px;font-weight:600;color:var(--gray-500);
  cursor:pointer;font-family:inherit;white-space:nowrap;
  transition:border-color .15s,color .15s;
}
.btn-back:hover{border-color:var(--gray-400);color:var(--gray-900)}

.btn-next{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--blue);color:white;border:none;border-radius:var(--radius-sm);
  padding:12px 24px;font-size:15px;font-weight:700;
  cursor:pointer;font-family:inherit;text-decoration:none;
  box-shadow:0 2px 8px rgba(37,99,235,.35);
  transition:background .15s,box-shadow .15s,transform .1s;
}
.btn-next:hover  {background:var(--blue-dark);box-shadow:0 4px 16px rgba(37,99,235,.4);transform:translateY(-1px)}
.btn-next:active {transform:none}
.btn-next:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;transform:none}

/* ── End card ─────────────────────────────────────────────────── */
.end-card{
  background:white;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:32px 32px;
  text-align:center;animation:cardIn .28s ease both;
}
.end-icon   {font-size:52px;margin-bottom:16px}
.end-title  {font-size:22px;font-weight:800;letter-spacing:-.3px}
.end-body   {font-size:14px;color:var(--gray-500);line-height:1.8;max-width:460px;margin:28px auto;white-space:pre-line}
.end-actions{display:flex;flex-direction:column;align-items:center;gap:10px}

.btn-external{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--blue);color:white;border:none;border-radius:var(--radius-sm);
  padding:13px 28px;font-size:15px;font-weight:700;
  cursor:pointer;font-family:inherit;text-decoration:none;
  box-shadow:0 2px 8px rgba(37,99,235,.35);
  transition:background .15s,box-shadow .15s,transform .1s;
}
.btn-external:hover{background:var(--blue-dark);box-shadow:0 4px 16px rgba(37,99,235,.4);transform:translateY(-1px)}

.btn-ghost{
  display:inline-flex;align-items:center;gap:6px;
  background:none;color:var(--gray-500);
  border:2px solid var(--gray-200);border-radius:var(--radius-sm);
  padding:10px 20px;font-size:14px;font-weight:600;
  cursor:pointer;font-family:inherit;
  transition:border-color .15s,color .15s;
}
.btn-ghost:hover{border-color:var(--gray-400);color:var(--gray-900)}

/* ── Summary ──────────────────────────────────────────────────── */
.summary-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:8px 0 18px}
.summary-meta-item{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.summary-meta-item strong{font-size:18px;color:var(--gray-900)}
.summary-meta-item span{font-size:12px;color:var(--gray-500)}
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.summary-item{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:12px 14px}
.summary-key {font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--gray-400);margin-bottom:4px}
.summary-val {font-size:14px;font-weight:600;color:var(--gray-900);line-height:1.3}
.summary-files{margin-top:20px;padding:16px;background:var(--gray-50);border-radius:var(--radius-sm);border:1px solid var(--gray-200)}
.summary-files-title{font-size:13px;font-weight:700;color:var(--gray-700);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.summary-file-groups{display:flex;flex-direction:column;gap:14px}
.summary-file-group-title{font-size:12px;font-weight:700;color:var(--gray-500);margin-bottom:8px}
.summary-file-chip-wrap{display:flex;flex-wrap:wrap;gap:6px}
.summary-file-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--blue-light);color:var(--blue-text);
  border-radius:99px;padding:6px 12px;
  font-size:12px;font-weight:600;margin:0;
}
.summary-file-size{opacity:.6;font-size:10px;margin-left:2px}
.section-divider{border:none;border-top:1px solid var(--gray-200);margin:24px 0}
/*.summary-cta{margin-top:28px;padding-top:24px;border-top:1px solid var(--gray-100)}*/

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:580px){
  .header-inner{padding:0 16px}
  .card,.end-card{padding:22px 18px}
  h2.question{font-size:18px}
  .actions{flex-direction:column-reverse}
  .btn-back{width:100%;justify-content:center}
  .summary-grid{grid-template-columns:1fr}
  .summary-meta{grid-template-columns:1fr}
  .phase-nav{display:none}
  .bottom-nav{display:none}
  .main-content{padding-bottom:32px}
}