/* ================================================================
   Water Feasibility Studio — Design System
   Water identity: teal #0d9488 · aqua #06b6d4 · deep #0e4f6e
   8pt scale · Ministry/lender-grade studio · 2026
   ================================================================ */

/* ── Custom properties ── */
:root {
  /* Brand */
  --teal:      #0d9488;
  --teal-dk:   #0a7970;
  --teal-lt:   #14b8a6;
  --aqua:      #06b6d4;
  --aqua-lt:   #67e8f9;
  --deep:      #0e4f6e;
  --deep-dk:   #093a52;

  /* Neutral surface */
  --ink:       #0f1c28;
  --ink-2:     #1e3346;
  --muted:     #4a687e;
  --muted-lt:  #7fa3b8;
  --line:      #d0e5ed;
  --surface:   #f4fbfd;
  --surface-2: #eaf5f9;
  --white:     #ffffff;

  /* Status */
  --done-bg:   #d1fae5;
  --done-txt:  #065f46;
  --draft-bg:  #fef9c3;
  --draft-txt: #854d0e;
  --pend-bg:   #e0f2fe;
  --pend-txt:  #0c4a6e;
  --warn-bg:   #fef2f2;
  --warn-txt:  #991b1b;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(14,79,110,.08), 0 1px 2px rgba(14,79,110,.04);
  --shadow-md: 0 4px 12px rgba(14,79,110,.12), 0 2px 4px rgba(14,79,110,.06);
  --shadow-lg: 0 8px 24px rgba(14,79,110,.16);

  /* Sizing */
  --radius:    10px;
  --radius-sm: 6px;
  --header-h:  60px;
  --tab-h:     48px;
  --max-w:     1100px;
}

/* ── Reset + base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--surface);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
}
h1,h2,h3,h4 { line-height: 1.3; font-weight: 600; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dk); text-decoration: underline; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea {
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
}
::placeholder { color: var(--muted-lt); }
:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

/* ── Utility ── */
.hidden { display: none !important; }
.flex   { display: flex; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.ml-auto { margin-left: auto; }
.text-muted { color: var(--muted); font-size: .875rem; }
.text-sm { font-size: .875rem; }
.text-xs { font-size: .75rem; }
.bold { font-weight: 600; }

/* ── Water gradient helper ── */
.water-gradient {
  background: linear-gradient(135deg, var(--deep) 0%, var(--teal) 60%, var(--aqua) 100%);
}
.water-gradient-soft {
  background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #e0f2fe 100%);
}

/* ═══════════════════════════════════════
   STICKY HEADER
   ═══════════════════════════════════════ */
#app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: linear-gradient(90deg, var(--deep-dk) 0%, var(--deep) 45%, #0e5f7a 100%);
  border-bottom: 1px solid rgba(6,182,212,.25);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(14,79,110,.35);
}

/* Subtle animated water shimmer on header */
#app-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--aqua), var(--teal-lt), transparent);
  animation: waterShimmer 4s ease-in-out infinite;
}
@keyframes waterShimmer {
  0%,100% { opacity: .4; }
  50%     { opacity: 1; }
}

#app-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}
#app-header .brand .drop { font-size: 1.4rem; }
#app-header .brand .divider { color: rgba(255,255,255,.3); font-weight: 300; }
#app-header .brand .sub {
  font-size: .75rem;
  font-weight: 400;
  color: rgba(255,255,255,.65);
}
#app-header .header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
#app-header .user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.85);
  font-size: .875rem;
}
#app-header .user-chip .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  border: 2px solid rgba(255,255,255,.25);
}

/* ── Body offset for sticky header ── */
#app-body {
  margin-top: var(--header-h);
}

/* ═══════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  font-weight: 500;
  border: none;
  transition: all .18s ease;
  line-height: 1.4;
  white-space: nowrap;
}
.btn-primary {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 2px 6px rgba(13,148,136,.35);
}
.btn-primary:hover { background: var(--teal-dk); box-shadow: 0 4px 10px rgba(13,148,136,.45); }
.btn-aqua {
  background: var(--aqua);
  color: #fff;
  box-shadow: 0 2px 6px rgba(6,182,212,.3);
}
.btn-aqua:hover { background: #0599b5; }
.btn-ghost {
  background: transparent;
  color: var(--teal);
  border: 1.5px solid var(--teal);
}
.btn-ghost:hover { background: rgba(13,148,136,.06); }
.btn-deep {
  background: var(--deep);
  color: #fff;
}
.btn-deep:hover { background: var(--deep-dk); }
.btn-sm {
  padding: 5px 12px;
  font-size: .8125rem;
}
.btn-icon {
  padding: 7px 10px;
  font-size: 1rem;
}
.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.btn-logout {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.2);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: .8125rem;
  font-weight: 500;
  transition: background .18s;
}
.btn-logout:hover { background: rgba(255,255,255,.2); }

/* ── Dropdown button group ── */
.btn-group { position: relative; display: inline-flex; }
.btn-group .dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 160px;
  z-index: 200;
  overflow: hidden;
}
.btn-group .dropdown-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  border: none;
  background: none;
  font-size: .875rem;
  color: var(--ink);
  transition: background .15s;
}
.btn-group .dropdown-menu button:hover { background: var(--surface-2); }
.btn-group .dropdown-menu.open { display: block; }
.btn-group .dropdown-menu { display: none; }

/* ═══════════════════════════════════════
   FORM CONTROLS
   ═══════════════════════════════════════ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.form-control {
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  transition: border-color .18s, box-shadow .18s;
}
.form-control:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13,148,136,.12);
  outline: none;
}
select.form-control { cursor: pointer; }
textarea.form-control {
  resize: vertical;
  min-height: 100px;
  font-size: .875rem;
}

/* ═══════════════════════════════════════
   AUTH VIEW
   ═══════════════════════════════════════ */
#auth {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(6,182,212,.08) 0%, transparent 70%),
    var(--surface);
}
.auth-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
}
.auth-logo {
  text-align: center;
  margin-bottom: 28px;
}
.auth-logo .drop-big { font-size: 3rem; display: block; }
.auth-logo h1 {
  font-size: 1.25rem;
  color: var(--deep);
  margin-top: 8px;
}
.auth-logo p {
  font-size: .8125rem;
  color: var(--muted);
  margin-top: 4px;
}
.auth-form { display: flex; flex-direction: column; gap: 20px; }
.auth-form .form-label {
  color: var(--ink-2);
  text-transform: none;
  font-size: .875rem;
  letter-spacing: 0;
}
.auth-error {
  background: var(--warn-bg);
  color: var(--warn-txt);
  border: 1px solid #fca5a5;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: .875rem;
  display: none;
}
.auth-error.visible { display: block; }

/* ═══════════════════════════════════════
   DASHBOARD VIEW
   ═══════════════════════════════════════ */
#dashboard {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 40px 24px;
}
.dash-header {
  margin-bottom: 36px;
}
.dash-header h2 {
  font-size: 1.5rem;
  color: var(--deep);
}
.dash-header p {
  color: var(--muted);
  margin-top: 4px;
}

.dash-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 28px;
  align-items: start;
}

/* New project card */
.new-project-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.new-project-card .card-header {
  background: linear-gradient(135deg, var(--deep) 0%, var(--teal) 100%);
  padding: 20px 24px;
  color: #fff;
}
.new-project-card .card-header h3 {
  font-size: 1rem;
  font-weight: 700;
}
.new-project-card .card-header p {
  font-size: .8125rem;
  opacity: .8;
  margin-top: 2px;
}
.new-project-card .card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Projects list */
.projects-panel h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.project-count-chip {
  background: var(--pend-bg);
  color: var(--pend-txt);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: .75rem;
  font-weight: 700;
}
.project-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.project-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  cursor: pointer;
  transition: all .18s ease;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-sm);
}
.project-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.project-card .proj-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--teal) 0%, var(--aqua) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.project-card .proj-info { flex: 1; min-width: 0; }
.project-card .proj-name {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-card .proj-meta {
  font-size: .8125rem;
  color: var(--muted);
  margin-top: 2px;
}
.project-card .proj-arrow {
  color: var(--muted-lt);
  font-size: .875rem;
  flex-shrink: 0;
}
.project-card:hover .proj-arrow { color: var(--teal); }

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
}
.empty-state .icon { font-size: 3rem; display: block; margin-bottom: 12px; }
.empty-state p { font-size: .9375rem; }

/* ═══════════════════════════════════════
   BUILDER VIEW
   ═══════════════════════════════════════ */
#builder { min-height: calc(100vh - var(--header-h)); }

/* Project bar */
.project-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 900;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 1px 4px rgba(14,79,110,.06);
}
.project-bar .proj-title-block { flex: 1; min-width: 0; }
.project-bar .proj-title-block h2 {
  font-size: 1.0625rem;
  color: var(--deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-bar .proj-title-block small {
  font-size: .75rem;
  color: var(--muted);
}
.project-bar .proj-actions { display: flex; gap: 8px; align-items: center; }

/* Frozen badge */
.frozen-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ede9fe;
  color: #5b21b6;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: .75rem;
  font-weight: 700;
}

/* Step tabs */
.step-tabs {
  position: sticky;
  top: calc(var(--header-h) + 57px);
  z-index: 800;
  background: var(--surface);
  border-bottom: 2px solid var(--line);
  padding: 0 24px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
}
.step-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: .875rem;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all .18s ease;
  white-space: nowrap;
  cursor: pointer;
}
.step-tab:hover { color: var(--teal); }
.step-tab.active {
  color: var(--teal);
  border-bottom-color: var(--teal);
  font-weight: 700;
}
.step-tab.done {
  color: var(--teal-dk);
}
.step-tab .step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--line);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s;
}
.step-tab.active .step-num {
  background: var(--teal);
  color: #fff;
}
.step-tab.done .step-num {
  background: var(--done-bg);
  color: var(--done-txt);
}

/* Step panels */
.step-panel {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 28px 24px 60px;
}

/* ── Section titles in panels ── */
.panel-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--deep);
  margin-bottom: 6px;
}
.panel-subtitle {
  font-size: .875rem;
  color: var(--muted);
  margin-bottom: 24px;
}

/* ─── INTAKE ACCORDION ─── */
.intake-section { margin-bottom: 8px; }
details.intake-group {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
details.intake-group summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  color: var(--ink-2);
  list-style: none;
  transition: background .15s;
}
details.intake-group summary::-webkit-details-marker { display: none; }
details.intake-group summary:hover { background: var(--surface-2); }
details.intake-group[open] summary {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
details.intake-group summary .group-chevron {
  margin-left: auto;
  color: var(--muted-lt);
  font-size: .75rem;
  transition: transform .2s;
}
details.intake-group[open] summary .group-chevron { transform: rotate(180deg); }
details.intake-group summary .group-count {
  font-size: .75rem;
  background: var(--pend-bg);
  color: var(--pend-txt);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
}
.intake-group-body {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.intake-field label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 5px;
}
.intake-field label .unit {
  font-weight: 400;
  color: var(--muted);
  font-size: .75rem;
}
.intake-field label .mn-label {
  display: block;
  font-size: .75rem;
  color: var(--muted);
  font-weight: 400;
  margin-top: 1px;
}
.prov-note {
  font-size: .725rem;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}

/* Intake save bar */
.intake-save-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.save-msg {
  font-size: .875rem;
  color: var(--done-txt);
  display: none;
}
.save-msg.visible { display: inline; }

/* ─── HYDRO CALCS ─── */
.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.calc-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.calc-card .calc-head {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.calc-card .calc-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.calc-icon.teal-bg { background: rgba(13,148,136,.12); }
.calc-icon.aqua-bg { background: rgba(6,182,212,.12); }
.calc-icon.deep-bg { background: rgba(14,79,110,.12); }
.calc-icon.amber-bg { background: rgba(217,119,6,.1); }
.calc-card .calc-head .calc-label { flex: 1; }
.calc-card .calc-head .calc-label strong { display: block; font-size: .9375rem; color: var(--ink-2); }
.calc-card .calc-head .calc-label span { font-size: .75rem; color: var(--muted); }
.calc-card .calc-body { padding: 16px 18px; }
.out {
  background: var(--ink);
  color: #a8d8e8;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: .78rem;
  line-height: 1.6;
  min-height: 72px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.out.has-result { color: #6ee7f7; }
.out.has-error  { color: #f87171; }

/* ─── FS SECTIONS ─── */
.fs-header-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.score-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 24px;
  font-weight: 700;
  font-size: .9375rem;
  border: 2px solid transparent;
}
.score-chip.high { background: var(--done-bg); color: var(--done-txt); border-color: #6ee7b7; }
.score-chip.medium { background: var(--draft-bg); color: var(--draft-txt); border-color: #fde68a; }
.score-chip.low { background: var(--warn-bg); color: var(--warn-txt); border-color: #fca5a5; }

.progress-wrap {
  flex: 1;
  min-width: 180px;
}
.progress-bar-outer {
  background: var(--line);
  border-radius: 8px;
  height: 10px;
  overflow: hidden;
  margin-top: 4px;
}
.progress-bar-inner {
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--aqua) 100%);
  transition: width .5s ease;
  min-width: 4px;
}

.section-list { display: flex; flex-direction: column; gap: 8px; }

details.section-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .18s;
}
details.section-item:hover { box-shadow: var(--shadow-md); }
details.section-item summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .15s;
}
details.section-item summary::-webkit-details-marker { display: none; }
details.section-item summary:hover { background: var(--surface-2); }
details.section-item[open] summary {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
details.section-item summary .sec-chevron {
  margin-left: auto;
  color: var(--muted-lt);
  font-size: .75rem;
  transition: transform .2s;
}
details.section-item[open] summary .sec-chevron { transform: rotate(180deg); }

.sec-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  font-weight: 800;
  font-size: .8125rem;
  flex-shrink: 0;
}
.sec-badge.pending { background: var(--pend-bg); color: var(--pend-txt); }
.sec-badge.draft   { background: var(--draft-bg); color: var(--draft-txt); }
.sec-badge.ready   { background: var(--done-bg); color: var(--done-txt); }

.sec-title-block { flex: 1; min-width: 0; }
.sec-title-block .sec-en {
  font-weight: 600;
  color: var(--ink-2);
  font-size: .9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sec-title-block .sec-mn {
  font-size: .75rem;
  color: var(--muted);
  margin-top: 1px;
}

.sec-status-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.sec-status-badge.pending { background: var(--pend-bg); color: var(--pend-txt); }
.sec-status-badge.draft   { background: var(--draft-bg); color: var(--draft-txt); }
.sec-status-badge.ready   { background: var(--done-bg); color: var(--done-txt); }

.section-body {
  padding: 20px;
}
.section-body .owner-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8125rem;
  color: var(--muted);
  margin-bottom: 14px;
}
.section-body .content-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.content-tab {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: .8125rem;
  font-weight: 500;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
}
.content-tab.active {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.sec-textarea {
  width: 100%;
  min-height: 160px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .875rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  resize: vertical;
  transition: border-color .18s;
  font-family: inherit;
}
.sec-textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13,148,136,.1);
  outline: none;
}
.sec-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.sec-warn {
  background: var(--warn-bg);
  color: var(--warn-txt);
  border: 1px solid #fca5a5;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: .8125rem;
  margin-top: 8px;
}
.generating-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── EXPORT ─── */
.export-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 32px;
  max-width: 560px;
}
.export-panel h3 {
  font-size: 1.0625rem;
  color: var(--deep);
  margin-bottom: 8px;
}
.export-panel p {
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 24px;
}
.export-buttons { display: flex; flex-direction: column; gap: 12px; }
.export-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  transition: all .18s;
  text-align: left;
}
.export-btn:hover { border-color: var(--teal); background: var(--surface-2); }
.export-btn .exp-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.export-btn .exp-info strong { display: block; font-size: .9375rem; color: var(--ink-2); }
.export-btn .exp-info span { font-size: .8125rem; color: var(--muted); }
.exp-md  .exp-icon { background: #f0fdf4; }
.exp-html .exp-icon { background: #eff6ff; }
.exp-docx .exp-icon { background: #faf5ff; }

/* ═══════════════════════════════════════
   ALERTS / TOASTS
   ═══════════════════════════════════════ */
#toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--ink-2);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: .875rem;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  transform: translateY(60px);
  opacity: 0;
  transition: all .3s ease;
  max-width: 340px;
}
#toast.show {
  transform: translateY(0);
  opacity: 1;
}
#toast.success { background: var(--teal-dk); }
#toast.error   { background: #b91c1c; }

/* ═══════════════════════════════════════
   LOADING OVERLAY
   ═══════════════════════════════════════ */
#loading {
  position: fixed;
  inset: 0;
  background: rgba(14,79,110,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8000;
  backdrop-filter: blur(2px);
}
.loading-box {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px 40px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.loading-wave {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-bottom: 14px;
}
.loading-wave span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--teal);
  animation: waveBounce 1s ease-in-out infinite;
}
.loading-wave span:nth-child(2) { animation-delay: .15s; background: var(--aqua); }
.loading-wave span:nth-child(3) { animation-delay: .3s; }
@keyframes waveBounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.loading-box p { color: var(--muted); font-size: .9375rem; }

/* ═══════════════════════════════════════
   GENALL PROGRESS BAR (at top of sections panel)
   ═══════════════════════════════════════ */
.gen-progress-bar {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.gen-progress-bar .gen-spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--line);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
.gen-progress-bar .gen-label { flex: 1; font-size: .875rem; color: var(--ink-2); }
.gen-progress-bar .gen-pct { font-weight: 700; color: var(--teal); font-size: .875rem; }

/* ═══════════════════════════════════════
   SCROLLBAR (WebKit)
   ═══════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-lt); }

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  #app-header { padding: 0 14px; }
  #app-header .brand .sub { display: none; }
  .auth-card { padding: 32px 24px; }
  #dashboard { padding: 24px 14px; }
  .step-panel { padding: 20px 14px 60px; }
  .project-bar { padding: 10px 14px; }
  .step-tabs { padding: 0 8px; }
  .intake-group-body { grid-template-columns: 1fr; }
  .calc-grid { grid-template-columns: 1fr; }
  .fs-header-row { gap: 10px; }
}

/* ─── Print ─── */
@media print {
  #app-header, .step-tabs, .project-bar { display: none; }
  #app-body { margin-top: 0; }
}