*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
details summary::-webkit-details-marker { display: none; }
details[open] summary svg { transform: rotate(180deg); }

/* Chart tooltip */
.chart-tip {
  position: fixed; z-index: 400; pointer-events: none;
  background: rgba(24,24,27,.92); color: #fff; font-size: 13px; font-family: 'DM Sans',sans-serif;
  padding: 8px 12px; border-radius: 8px; max-width: 280px; line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  opacity: 0; transition: opacity .12s;
}
.chart-tip.show { opacity: 1; }
.chart-tip b { font-weight: 700; }
.chart-tip .tip-label { color: rgba(255,255,255,.6); font-size: 11px; }

/* Bar segment hover */
.bar-seg { cursor: pointer; position: relative; }
.bar-seg:hover { filter: brightness(1.15); }

:root {
  --bg:          #fafafa;
  --surface:     #ffffff;
  --surface-2:   #f3f4f6;
  --surface-3:   #eef0f4;
  --text:        #18181b;
  --text-2:      #3f3f46;
  --text-muted:  #71717a;
  --accent:      #2563eb;
  --accent-dark: #1d4ed8;
  --accent-dim:  #dbeafe;
  --green:       #16a34a;
  --green-dim:   #dcfce7;
  --amber:       #d97706;
  --amber-dim:   #fef3c7;
  --red:         #dc2626;
  --red-dim:     #fee2e2;
  --border:      #e4e4e7;
  --border-2:    #f0f0f3;
  --radius:      14px;
  --radius-sm:   9px;
  --font:        'DM Sans', sans-serif;
  --mono:        'Space Mono', monospace;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.05);
}

body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }

/* Header */
.app-header { background: var(--surface); border-bottom: 1px solid var(--border); height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 50; }
.app-logo { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .07em; color: var(--text); display: flex; align-items: center; gap: 9px; }
.logo-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }
.header-study { font-size: 13px; color: var(--text-muted); }
.header-right { display: flex; align-items: center; gap: 8px; }
.btn-header { padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; font-family: var(--font); cursor: pointer; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-2); transition: all .14s; }
.btn-header:hover { border-color: var(--accent); color: var(--accent); }
/* ── AI Settings Panel ── */
#aiSettingsPanel { position:fixed; inset:0; z-index:300; display:none; align-items:flex-start; justify-content:flex-end; padding:60px 20px 0; }
#aiSettingsPanel.open { display:flex; }
.ai-settings-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.25); }
.ai-settings-box { position:relative; z-index:1; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 16px 48px rgba(0,0,0,.18); width:360px; max-height:calc(100vh - 80px); overflow-y:auto; }
.ai-settings-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.ai-settings-title { font-size:14px; font-weight:700; color:var(--text); }
.ai-settings-close { background:none; border:none; font-size:18px; cursor:pointer; color:var(--text-muted); line-height:1; padding:2px 6px; border-radius:6px; }
.ai-settings-close:hover { background:var(--surface-2); }
.ai-settings-body { padding:18px 20px; display:flex; flex-direction:column; gap:14px; }
.ai-provider-tabs { display:flex; gap:6px; }
.ai-provider-tab { flex:1; padding:8px 6px; border:1.5px solid var(--border); border-radius:8px; background:var(--surface); font-size:12px; font-weight:600; cursor:pointer; color:var(--text-muted); transition:all .14s; text-align:center; }
.ai-provider-tab.active { border-color:var(--accent); background:#f0f6ff; color:var(--accent); }
.ai-field-label { font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:5px; }
.ai-key-row { display:flex; gap:6px; }
.ai-key-input { flex:1; padding:9px 11px; border:1.5px solid var(--border); border-radius:8px; font-size:13px; font-family:var(--mono); background:var(--surface); color:var(--text); outline:none; }
.ai-key-input:focus { border-color:var(--accent); }
.ai-toggle-vis { padding:9px 10px; border:1.5px solid var(--border); border-radius:8px; background:var(--surface); cursor:pointer; font-size:13px; }
.ai-model-info { font-size:12px; color:var(--text-muted); line-height:1.55; }
.ai-model-name { font-family:var(--mono); color:var(--text-2); }
.ai-status-row { display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:8px; background:var(--surface-2); border:1px solid var(--border); }
.ai-status-dot { width:20px; height:20px; border-radius:50%; background:#e4e4e7; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.ai-status-dot.ok { background:#dcfce7; color:#16a34a; }
.ai-status-dot.err { background:#fee2e2; color:#dc2626; }
.ai-status-dot.busy { background:#dbeafe; color:#2563eb; animation:pulse 1s infinite; }
.ai-status-msg { font-size:12px; color:var(--text-muted); }
.ai-status-msg.ok { color:#16a34a; font-weight:600; }
.ai-status-msg.err { color:#dc2626; }
.ai-settings-actions { display:flex; gap:8px; }
.ai-warn { font-size:11.5px; color:#92400e; background:#fffbeb; border:1px solid #fde68a; border-radius:7px; padding:8px 10px; line-height:1.5; }
.btn-header.has-key { border-color:var(--accent); color:var(--accent); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }


/* Shell */
.shell { display: flex; height: calc(100vh - 56px); overflow: hidden; }

/* Sidebar */
.sidebar { width: 252px; flex-shrink: 0; background: #f0f0f2; display: flex; flex-direction: column; border-right: 1px solid var(--border); overflow-y: auto; }
.sidebar-label { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #9ca3af; padding: 20px 18px 10px; }
.steps-list { padding: 0 10px; display: flex; flex-direction: column; gap: 1px; }
.step-row { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; cursor: pointer; transition: background .14s; user-select: none; }
.step-row:hover:not(.locked) { background: #e4e4e8; }
.step-row.active { background: #dbeafe; }
.step-row.locked { opacity: .4; pointer-events: none; }
.step-circle { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #d1d5db; color: #9ca3af; font-family: var(--mono); font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s; }
.step-row.active .step-circle { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 10px rgba(37,99,235,.25); }
.step-row.done .step-circle { background: var(--green); border-color: var(--green); color: #fff; }
.step-text { min-width: 0; }
.step-name { font-size: 13px; font-weight: 600; color: #6b7280; line-height: 1.25; }
.step-row.active .step-name { color: var(--accent-dark); }
.step-row.done  .step-name { color: var(--text-2); }
.step-sub { font-size: 11px; color: #9ca3af; margin-top: 1px; }
.step-connector { width: 1px; height: 9px; background: #d1d5db; margin: 0 0 0 22px; }
.sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid var(--border); }
.progress-track { background: #d1d5db; border-radius: 999px; height: 3px; margin-bottom: 7px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .5s ease; }
.progress-text { font-size: 11px; color: #9ca3af; text-align: center; font-family: var(--mono); }

/* Main */
.main { flex: 1; overflow-y: auto; padding: 36px 40px 80px; }
.screen { display: none; animation: fadeUp .28s ease both; }
.screen.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Screen headers */
.eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 7px; }
.screen-title { font-size: 24px; font-weight: 700; color: var(--text); letter-spacing: -.02em; margin-bottom: 7px; line-height: 1.2; }
.screen-sub { font-size: 14.5px; color: var(--text-muted); margin-bottom: 28px; max-width: 560px; line-height: 1.6; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 14px; overflow: hidden; }
.card-body { padding: 22px 24px; }
.card-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.card-desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-divider { height: 1px; background: var(--border-2); margin: 16px 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px; border-radius: var(--radius-sm); font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all .15s; white-space: nowrap; line-height: 1; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,99,235,.3); }
.btn-outline { background: var(--surface); color: var(--text-2); border: 1.5px solid var(--border); }
.btn-outline:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.btn-ghost { background: transparent; color: var(--text-muted); border: 1.5px solid transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text-2); }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-sm { padding: 7px 14px; font-size: 13px; border-radius: 8px; }
.btn-ai { background: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(37,99,235,.22); }
.btn-ai:hover:not(:disabled) { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,99,235,.32); }
.btn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 24px; }

/* Forms */
.input { width: 100%; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font); font-size: 14px; color: var(--text); background: var(--surface); outline: none; transition: border-color .14s; line-height: 1.5; }
.input:focus { border-color: var(--accent); }
.input::placeholder { color: #a1a1aa; }
textarea.input { resize: vertical; }
.field-label { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.field-group { margin-bottom: 16px; }

/* Tabs */
.tabs { display: flex; gap: 2px; background: var(--surface-2); border-radius: 9px; padding: 3px; margin-bottom: 16px; width: fit-content; }
.tab { padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--text-muted); border-radius: 7px; cursor: pointer; border: none; background: transparent; font-family: var(--font); transition: all .14s; }
.tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* Upload zone */
.upload-zone { border: 2px dashed var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 36px 24px; text-align: center; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; position: relative; }
.upload-zone:hover { border-color: var(--accent); background: var(--accent-dim); }
.upload-zone.drop-hover { border-color: var(--accent); background: var(--accent-dim); transform: scale(1.01); box-shadow: 0 8px 24px rgba(37,99,235,.12); }
.upload-zone.drop-hover * { pointer-events: none; }
.upload-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-icon { font-family:var(--mono); font-size:12px; font-weight:700; color:var(--text-muted); margin-bottom:8px; letter-spacing:.04em; }
.upload-label { font-size: 14px; font-weight: 600; color: var(--text-2); margin-bottom: 3px; }
.upload-hint { font-size: 13px; color: var(--text-muted); }
.upload-zone.drag { border-color: var(--accent); background: var(--accent-dim); transform: scale(1.01); }

/* Usability Test · stimulus chooser */
.ut-stim-opt { all:unset; box-sizing:border-box; cursor:pointer; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:16px 16px 14px; text-align:left; display:flex; flex-direction:column; gap:6px; transition:border-color .14s, background .14s, transform .14s; }
.ut-stim-opt:hover { border-color:var(--accent); background:var(--accent-dim); transform:translateY(-1px); }
.ut-stim-opt.selected { border-color:var(--accent); background:var(--accent-dim); box-shadow:inset 0 0 0 1px var(--accent); }
.ut-stim-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.04em; color:#fff; background:var(--accent); }
.ut-stim-title { font-size:14px; font-weight:700; color:var(--text); }
.ut-stim-sub { font-size:12.5px; color:var(--text-muted); line-height:1.5; }
.ut-stim-panel { margin-top:6px; padding-top:18px; border-top:1px solid var(--border); }

/* Usability Test · Tasks editor */
.ut-tasks-list { display:flex; flex-direction:column; gap:12px; }
.ut-task { border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); padding:14px 14px 12px; transition:border-color .14s; position:relative; }
.ut-task:hover { border-color:var(--border-2); }
.ut-task:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.08); }
.ut-task-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.ut-task-num { width:24px; height:24px; border-radius:6px; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; font-weight:700; color:var(--text-2); flex-shrink:0; }
.ut-task-label { flex:1; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); font-weight:700; }
.ut-task-remove { all:unset; cursor:pointer; padding:4px 8px; font-size:13px; color:var(--text-muted); border-radius:6px; line-height:1; }
.ut-task-remove:hover { color:var(--red); background:var(--red-dim); }
.ut-task textarea, .ut-task input[type=text] { width:100%; border:1px solid var(--border); border-radius:6px; padding:8px 10px; font-family:var(--font); font-size:14px; color:var(--text); background:var(--surface); transition:border-color .14s; resize:vertical; }
.ut-task textarea:focus, .ut-task input[type=text]:focus { border-color:var(--accent); outline:none; }
.ut-task textarea { min-height:60px; line-height:1.5; }
.ut-task-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.ut-task-row .ut-task-field-label { font-size:11.5px; color:var(--text-muted); margin-bottom:3px; display:block; font-weight:500; }
@media (max-width:560px) { .ut-task-row { grid-template-columns:1fr; } }

/* Usability Test · Share & Collect — mode cards */
.ut-share-mode { border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); padding:18px 18px 20px; transition:border-color .14s; display:flex; flex-direction:column; }
.ut-share-mode:hover { border-color:var(--border-2); }
.ut-share-mode-head { display:flex; align-items:flex-start; gap:12px; }
.ut-share-mode-icon { padding:6px 10px; border-radius:6px; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.1em; color:#fff; flex-shrink:0; align-self:flex-start; }
.ut-share-mode-title { font-size:15px; font-weight:700; color:var(--text); margin-bottom:2px; }
.ut-share-mode-sub { font-size:12.5px; color:var(--text-muted); line-height:1.5; }

/* Usability Test · Results & Insights */
.ut-results-stat { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:14px 16px; }
.ut-results-stat-label { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); font-weight:700; margin-bottom:4px; }
.ut-results-stat-value { font-family:var(--mono); font-size:24px; font-weight:700; color:var(--text); line-height:1.1; }
.ut-results-stat-sub { font-size:11.5px; color:var(--text-muted); margin-top:2px; }

/* The heatmap container is the visible viewport; the inner scroll-host
   carries the iframe + canvases at their natural document height so they
   move together when the researcher scrolls through a long page. */
.ut-heatmap-wrap { position:relative; width:100%; height:70vh; min-height:400px; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface-2); }
.ut-heatmap-scroll { position:absolute; inset:0; overflow:auto; }
.ut-heatmap-stage { position:relative; width:100%; min-height:100%; background:#fff; }
.ut-heatmap-stage iframe { display:block; width:100%; border:0; background:#fff; }
/* Per-layer canvases sit ABOVE the iframe in document-coordinate space.
   pointer-events: none so clicks pass through to the iframe; we don't
   actually need that for review (the iframe inside the dashboard is
   read-only for the researcher), but it future-proofs interactive modes. */
.ut-heatmap-canvas { position:absolute; left:0; top:0; width:100%; pointer-events:none; }
.ut-heatmap-canvas.clicks    { z-index:3; }
.ut-heatmap-canvas.mousemove { z-index:2; }
.ut-heatmap-overlay-block    { display:none; }  /* legacy slot, retained for compat */

/* Legend pinned to top-right of the heatmap card, outside the scrolling
   wrapper so it stays visible regardless of where the researcher is in a
   long prototype document. */
.ut-heatmap-legend { position:absolute; top:10px; right:10px; z-index:10; background:rgba(255,255,255,.96); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; font-size:12px; color:var(--text-2); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:8px; min-width:170px; pointer-events:none; }
.ut-heatmap-legend-row { display:flex; flex-direction:column; gap:4px; }
.ut-heatmap-legend-title { display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); font-weight:700; }
.ut-heatmap-legend-bar { height:10px; border-radius:3px; }
.ut-heatmap-legend-scale { display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; color:var(--text-muted); }
.ut-heatmap-legend-note { font-size:11px; color:var(--text-muted); border-top:1px solid var(--border); padding-top:6px; line-height:1.4; }

.ut-results-participants { display:flex; flex-direction:column; gap:8px; }
.ut-results-participant { border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); transition:border-color .14s; }
.ut-results-participant:hover { border-color:var(--border-2); }
.ut-results-participant-head { display:flex; align-items:center; gap:14px; padding:12px 14px; cursor:pointer; user-select:none; }
.ut-results-participant-pid { font-family:var(--mono); font-size:12px; font-weight:700; color:var(--text-2); background:var(--surface-2); padding:3px 8px; border-radius:6px; min-width:90px; text-align:center; }
.ut-results-participant-mode { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:999px; font-weight:700; }
.ut-results-participant-mode.on_device { background:#dcfce7; color:#166534; }
.ut-results-participant-mode.remote    { background:#dbeafe; color:#1e40af; }
.ut-results-participant-label { font-size:14px; color:var(--text); font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ut-results-participant-meta { font-family:var(--mono); font-size:11.5px; color:var(--text-muted); display:flex; gap:14px; }
.ut-results-participant-detail { padding:0 14px 12px; border-top:1px solid var(--border); display:none; font-size:13px; }
.ut-results-participant.open .ut-results-participant-detail { display:block; }
.ut-results-task-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; margin:4px 4px 4px 0; border-radius:6px; font-size:12px; background:var(--surface-2); border:1px solid var(--border); }
.ut-results-task-pill.abandoned { background:var(--red-dim); color:var(--red); border-color:var(--red); }
.ut-results-task-pill.completed { background:#dcfce7; color:#166534; border-color:#16a34a; }
.ut-results-task-pill .seq { font-family:var(--mono); font-weight:700; }

/* Tag input */
.tag-input-wrap { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 6px; min-height: 50px; cursor: text; transition: border-color .14s; background: var(--surface); }
.tag-input-wrap:focus-within { border-color: var(--accent); }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--text); color: #fff; font-size: 13px; font-weight: 500; padding: 4px 10px 4px 11px; border-radius: 999px; animation: chipIn .16s ease both; }
@keyframes chipIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
.chip-remove { background: none; border: none; color: rgba(255,255,255,.5); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; transition: color .1s; }
.chip-remove:hover { color: #fff; }
.tag-field { border: none; outline: none; font-family: var(--font); font-size: 14px; color: var(--text); background: transparent; min-width: 150px; flex: 1; padding: 3px 2px; }
.tag-field::placeholder { color: #a1a1aa; }

/* Stats */
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.stat-value { font-family: var(--mono); font-size: 28px; font-weight: 700; color: var(--text); letter-spacing: -.02em; line-height: 1; margin-bottom: 5px; }
.stat-label { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.stat-note { font-size: 12px; font-weight: 600; margin-top: 5px; }
.note-green { color: var(--green); }
.note-amber { color: var(--amber); }

/* Share box */
.share-box { background: var(--text); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.share-url { flex: 1; font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-copy { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.8); font-family: var(--font); font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 7px; cursor: pointer; transition: all .14s; white-space: nowrap; flex-shrink: 0; }
.btn-copy:hover { background: rgba(255,255,255,.18); color: #fff; }
.btn-copy.copied { background: var(--green); border-color: var(--green); color: #fff; }

/* Badge */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.badge-green { background: var(--green-dim); color: var(--green); }
.badge-blue  { background: var(--accent-dim); color: var(--accent-dark); }
.badge-amber { background: var(--amber-dim); color: var(--amber); }
.badge-gray  { background: var(--surface-2); color: var(--text-muted); }
.badge-dot   { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* Live feed */
.live-feed { display: flex; flex-direction: column; gap: 5px; max-height: 210px; overflow-y: auto; }
.feed-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface-2); border-radius: 8px; font-size: 13px; animation: feedIn .22s ease both; }
@keyframes feedIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
.feed-dot-g { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.feed-pid   { font-family: var(--mono); font-size: 11px; color: var(--text-muted); width: 32px; flex-shrink: 0; }
.feed-text  { color: var(--text-2); flex: 1; }
.feed-time  { font-size: 11.5px; color: var(--text-muted); }
.feed-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 24px 0; }

/* Heatmap */
.heatmap { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.heatmap-row { display: flex; gap: 3px; align-items: center; }
.hm-label { font-size: 11.5px; color: var(--text-muted); width: 90px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-cell { height: 22px; flex: 1; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; transition: transform .12s; cursor: default; }
.hm-cell:hover { transform: scale(1.1); z-index: 1; }

/* Tree view */
.tree-view { font-size: 13.5px; line-height: 1.9; }
.tree-node { display: flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 5px; cursor: default; transition: background .1s; }
.tree-node:hover { background: var(--surface-2); }
.tree-node.l0 { font-weight: 700; font-size: 14px; }
.tree-node.l1 { padding-left: 20px; color: var(--text-2); }
.tree-node.l2 { padding-left: 40px; color: var(--text-muted); font-size: 13px; }
.tree-node.l3 { padding-left: 60px; color: var(--text-muted); font-size: 13px; }
.tree-node.l4 { padding-left: 80px; color: var(--text-muted); font-size: 12.5px; }
.tree-node.l5 { padding-left: 100px; color: var(--text-muted); font-size: 12.5px; }
.tree-node.l6 { padding-left: 120px; color: var(--text-muted); font-size: 12px; }
.tree-node.l7 { padding-left: 140px; color: var(--text-muted); font-size: 12px; }
.tree-node.l8 { padding-left: 160px; color: var(--text-muted); font-size: 12px; }
.tree-edit { margin-left: auto; font-size: 11px; color: var(--text-muted); opacity: 0; font-family: var(--font); cursor: pointer; padding: 1px 7px; border-radius: 4px; transition: opacity .1s; }
.tree-node:hover .tree-edit { opacity: 1; }
.tree-edit:hover { background: var(--accent); color: #fff; }

/* Task list */
.task-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border-2); transition: opacity .14s, box-shadow .14s, background .14s; }
.task-item:last-child { border-bottom: none; }
.task-item.dragging { opacity: .4; }
.task-item.drag-over-top    { border-top: 2px solid var(--accent); }
.task-item.drag-over-bottom { border-bottom: 2px solid var(--accent); }
.task-drag-handle { flex-shrink: 0; width: 16px; display: flex; align-items: center; justify-content: center; margin-top: 3px; cursor: grab; opacity: 0; transition: opacity .14s; user-select: none; }
.task-item:hover .task-drag-handle { opacity: 1; }
.task-drag-handle:active { cursor: grabbing; }
.task-drag-handle svg { display: block; }
.task-drag-handle circle { fill: var(--text-muted); transition: fill .14s; }
.task-drag-handle:hover circle { fill: var(--accent); }
.task-num  { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--surface-2); padding: 3px 7px; border-radius: 5px; flex-shrink: 0; margin-top: 1px; }
.task-body { flex: 1; min-width: 0; }
.task-q    { font-size: 14px; color: var(--text-2); margin-bottom: 4px; line-height: 1.45; }
.task-path { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }

/* Bar chart */
.bar-chart { display: flex; flex-direction: column; gap: 7px; }
.bar-row   { display: flex; align-items: center; gap: 10px; }
.bar-label { font-family: var(--mono); font-size: 11px; color: var(--text-muted); width: 28px; flex-shrink: 0; }
.bar-track { flex: 1; height: 20px; background: var(--surface-2); border-radius: 4px; overflow: hidden; display: flex; }
.bar-seg   { height: 100%; transition: width .7s cubic-bezier(.4,0,.2,1); }
.seg-d { background: #16a34a; }
.seg-i { background: #86efac; }
.seg-f { background: #fca5a5; }
.bar-pct { font-size: 12px; font-weight: 600; color: var(--text-2); width: 36px; text-align: right; flex-shrink: 0; }
.bar-pct.low { color: var(--red); }

/* AI suggestion */
.ai-card { border-left: 3px solid var(--accent); background: #f0f6ff; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 14px 16px; margin-bottom: 10px; }
.ai-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ai-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; }
.ai-card-title { font-size: 14px; font-weight: 700; color: var(--text); }
.ai-card-text  { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 6px 0 12px; }
.ai-card-actions { display: flex; gap: 8px; }

/* Iteration chip */
.iter-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--text); color: rgba(255,255,255,.7); font-size: 12.5px; font-weight: 500; padding: 5px 12px 5px 6px; border-radius: 999px; margin-bottom: 18px; }
.iter-num  { background: var(--accent); color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* AI overlay */
#aiOverlay { position: fixed; inset: 0; background: rgba(24,24,27,.55); backdrop-filter: blur(4px); z-index: 200; display: none; align-items: center; justify-content: center; }
#aiOverlay.on { display: flex; }
.ai-modal { background: var(--surface); border-radius: var(--radius); padding: 32px 36px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.18); max-width: 340px; width: 90%; }
.ai-spinner { width: 44px; height: 44px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .85s linear infinite; margin: 0 auto 16px; }
@keyframes spin { to { transform: rotate(360deg) } }
.ai-modal-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.ai-modal-sub   { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; }
.ai-steps { display: flex; flex-direction: column; gap: 7px; text-align: left; }
.ai-step  { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-muted); transition: color .25s; }
.ai-step.active { color: var(--text); font-weight: 600; }
.ai-step.done   { color: var(--green); }
.ai-step-icon   { font-size: 13px; width: 16px; text-align: center; flex-shrink: 0; }

/* Toast */
#toast { position: fixed; bottom: 24px; right: 24px; background: var(--text); color: #fff; padding: 11px 18px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; box-shadow: 0 4px 20px rgba(0,0,0,.15); z-index: 300; transform: translateY(16px); opacity: 0; transition: all .22s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
#toast.show { transform: translateY(0); opacity: 1; }
#toast.success { background: #15803d; }

/* ── Marketing Splash Page ── */
/* Scope a darker muted-text variable inside the splash page so all .splash-* and .viz-*
   descendants inherit a color that clears WCAG AA on the #fafafa background at 14px.
   Top-anchored radial gradient mirrors the soft blue haze used on the deck title slide. */
.splash-page { position:fixed; inset:0; z-index:600; background: radial-gradient(ellipse 1400px 700px at 50% -120px, #dbeafe 0%, #eff6ff 30%, rgba(239,246,255,0) 70%) no-repeat, #fafafa; overflow-y:auto; --text-muted:#52525b; }
.splash-page.hidden { display:none; }
.splash-nav { max-width:1080px; margin:0 auto; padding:22px 32px; display:flex; align-items:center; justify-content:space-between; }
.splash-nav-logo { font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--text); display:flex; align-items:center; gap:9px; }
.splash-nav-actions { display:flex; gap:8px; }
/* Hero wrapper contains two blurred organic blobs that hug the left/right edges
   and wrap around the title block. Matches the deck title slide. Top-to-bottom
   splash-page gradient shines through between them. */
.splash-hero-wrap { position:relative; overflow:hidden; isolation:isolate; }
.hero-blob { position:absolute; top:50%; width:640px; height:560px; border-radius:58% 42% 52% 48% / 48% 56% 44% 52%; filter:blur(92px); opacity:.55; pointer-events:none; z-index:0; transform:translateY(-50%); }
.hero-blob-left  { left:-260px;  background:radial-gradient(circle at 55% 50%, #93c5fd 0%, #bfdbfe 45%, rgba(219,234,254,0) 75%); }
.hero-blob-right { right:-260px; background:radial-gradient(circle at 45% 55%, #a5c8ff 0%, #dbeafe 50%, rgba(239,246,255,0) 78%); border-radius:46% 54% 60% 40% / 52% 44% 56% 48%; }
.splash-hero { position:relative; z-index:1; max-width:780px; margin:0 auto; padding:96px 32px 104px; text-align:center; min-height:620px; display:flex; flex-direction:column; justify-content:center; align-items:center; box-sizing:border-box; }

/* Divider sits flush at the bottom of the hero section — the horizontal line
   spans the full page width, with a small accented sparkle chip centered on top.
   Negative margin pulls it up into the bottom edge of the hero wrap. */
.splash-divider { position:relative; display:flex; align-items:center; justify-content:center; height:36px; margin:-18px 0 0; z-index:3; }
.splash-divider::before { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:linear-gradient(to right, rgba(37,99,235,0) 0%, rgba(37,99,235,.22) 20%, rgba(37,99,235,.22) 80%, rgba(37,99,235,0) 100%); }
.splash-divider-line { display:none; }
.splash-divider-dot { position:relative; z-index:1; width:36px; height:36px; border-radius:50%; background:var(--surface); border:1.5px solid rgba(37,99,235,.3); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; box-shadow:0 4px 14px rgba(37,99,235,.14); }
.splash-badge { display:inline-flex; align-items:center; gap:6px; background:var(--accent-dim); color:var(--accent-dark); font-size:12.5px; font-weight:600; padding:6px 14px; border-radius:999px; margin-bottom:22px; letter-spacing:.01em; }
.splash-h1 { font-size:52px; font-weight:700; color:var(--text); letter-spacing:-.034em; line-height:1.08; margin-bottom:20px; }
.splash-h1 em { font-style:normal; color:var(--accent); }
.splash-hero-sub { font-size:18px; color:var(--text-2); line-height:1.6; max-width:600px; margin:0 auto 36px; }
.splash-hero-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.splash-section { max-width:1080px; margin:0 auto; padding:72px 32px 48px; }
.splash-section-label { font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-dark); margin-bottom:18px; text-align:center; }
.splash-section-title { font-size:36px; font-weight:700; color:var(--text); text-align:center; margin-bottom:14px; letter-spacing:-.024em; line-height:1.15; max-width:860px; margin-left:auto; margin-right:auto; }
.splash-section-title em { font-style:normal; color:var(--accent-dark); }
.splash-section-sub { font-size:17px; color:var(--text-2); text-align:center; max-width:640px; margin:0 auto 44px; line-height:1.6; }
.splash-features { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.splash-feature { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px 24px; }
.splash-feature-title { font-size:16px; font-weight:700; color:var(--text); margin-bottom:6px; letter-spacing:-.005em; }
.splash-feature-text { font-size:14.5px; color:var(--text-2); line-height:1.6; }
.splash-creators { max-width:680px; margin:0 auto; padding:40px 32px 20px; }
.splash-creators-title { font-size:14.5px; font-weight:700; color:var(--text); text-align:center; margin-bottom:18px; letter-spacing:.01em; }
.splash-creator-cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.splash-creator { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:20px 22px; display:flex; align-items:center; gap:14px; }
.splash-creator-avatar { width:42px; height:42px; border-radius:50%; background:var(--surface-2); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:var(--text-2); flex-shrink:0; letter-spacing:.02em; }
.splash-creator-name { font-size:14.5px; font-weight:700; color:var(--text); margin-bottom:3px; }
.splash-creator-links { display:flex; gap:12px; flex-wrap:wrap; }
.splash-creator-links a { font-size:12.5px; color:var(--accent-dark); text-decoration:none; font-weight:500; }
.splash-creator-links a:hover { text-decoration:underline; }
.splash-footer { text-align:center; padding:28px 32px 48px; }
.splash-footer-text { font-size:13px; color:var(--text-2); }

/* ═══ Splash: visualization & data section ═══ */
.viz-pipeline { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:12px; align-items:stretch; max-width:1000px; margin:0 auto 72px; }
.viz-stage { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px 20px; text-align:center; }
.viz-stage-num { font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; color:var(--accent-dark); font-weight:700; margin-bottom:6px; }
.viz-stage-name { font-size:15.5px; font-weight:700; color:var(--text); margin-bottom:4px; letter-spacing:-.005em; }
.viz-stage-desc { font-size:14px; color:var(--text-2); line-height:1.55; }
.viz-arrow { color:#a1a1aa; font-size:18px; align-self:center; justify-self:center; }
.viz-group { max-width:1080px; margin:0 auto; }
.viz-group-header { max-width:880px; margin:64px auto 28px; text-align:center; }
.viz-group-badge { display:inline-block; font-family:var(--mono); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-dark); font-weight:700; margin-bottom:10px; }
.viz-group-h3 { font-size:26px; font-weight:700; color:var(--text); letter-spacing:-.022em; line-height:1.2; }
.viz-group-h3 em { font-style:normal; color:var(--accent-dark); }
.viz-group-h3 + .viz-group-lede { font-size:16px; color:var(--text-2); line-height:1.6; margin:12px auto 0; max-width:640px; }
.viz-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1080px; margin:0 auto; }
.viz-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px 24px 22px; display:flex; flex-direction:column; gap:14px; text-align:left; box-shadow:0 1px 2px rgba(15,23,42,.03); transition:border-color .18s, box-shadow .18s, transform .18s; }
.viz-card:hover { border-color:#cbd5e1; box-shadow:0 8px 24px rgba(15,23,42,.06); transform:translateY(-1px); }
.viz-thumb { height:136px; background:var(--surface-2); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--border-2); padding:12px; }
.viz-thumb svg { width:100%; height:100%; display:block; }
.viz-title { font-size:17px; font-weight:700; color:var(--text); letter-spacing:-.015em; line-height:1.3; }
.viz-what { font-size:14px; color:var(--text-2); line-height:1.55; margin-top:-4px; }
.viz-why { font-size:13.5px; color:var(--text-2); line-height:1.6; border-top:1px solid var(--border-2); padding-top:14px; margin-top:auto; }
.viz-why strong { color:var(--text); font-weight:600; }
/* ═══ AI site map interaction demo (stage 02) ═══ */
.ai-demo-card { max-width:960px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:34px 34px 30px; position:relative; box-shadow:0 12px 40px rgba(15,23,42,.07); }
.ai-demo-card::before { content:''; position:absolute; inset:0; border-radius:var(--radius); padding:1.5px; background:linear-gradient(135deg, rgba(37,99,235,.35), rgba(139,92,246,.15) 50%, transparent 80%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.ai-demo-grid { display:grid; grid-template-columns:1fr auto 1.15fr; gap:24px; align-items:stretch; }
.ai-demo-col { background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--radius-sm); padding:18px 18px 16px; display:flex; flex-direction:column; gap:9px; }
.ai-demo-col-label { font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px; }
.ai-cluster-pill { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:8px 10px 8px 12px; font-size:13px; font-weight:500; color:var(--text-2); display:flex; justify-content:space-between; align-items:center; gap:10px; }
.ai-cluster-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ai-cluster-name { flex:1; display:flex; align-items:center; gap:8px; }
.ai-cluster-count { font-family:var(--mono); font-size:11px; color:var(--text-muted); background:var(--surface-2); padding:2px 7px; border-radius:4px; font-weight:600; }
.ai-demo-arrow { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-width:56px; }
.ai-demo-line { width:2px; flex:1; min-height:24px; background:linear-gradient(to bottom, rgba(37,99,235,0), #93c5fd, rgba(37,99,235,0)); }
.ai-demo-sparkle { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:0 6px 20px rgba(59,130,246,.45); position:relative; animation:ai-pulse 2.6s ease-in-out infinite; }
.ai-demo-sparkle::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid rgba(59,130,246,.35); animation:ai-ring 2.6s ease-in-out infinite; }
@keyframes ai-pulse { 0%,100% { transform:scale(1); box-shadow:0 6px 20px rgba(59,130,246,.45); } 50% { transform:scale(1.06); box-shadow:0 10px 28px rgba(59,130,246,.55); } }
@keyframes ai-ring { 0%,100% { opacity:.4; transform:scale(1); } 50% { opacity:0; transform:scale(1.25); } }
.ai-demo-arrow-label { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.2em; color:var(--accent); }
.ai-demo-tree { flex:1; display:flex; align-items:center; justify-content:center; padding:4px 0; min-height:180px; }
.ai-demo-tree svg { width:100%; height:100%; max-height:220px; }
.ai-insight-callout { position:absolute; top:-20px; right:22px; background:var(--surface); border:1.5px solid var(--accent); border-radius:var(--radius-sm); padding:12px 16px 13px; max-width:320px; box-shadow:0 16px 36px rgba(37,99,235,.18); z-index:2; }
.ai-insight-header { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--accent); letter-spacing:.04em; margin-bottom:5px; }
.ai-insight-sparkle { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg, #3b82f6, #8b5cf6); color:#fff; font-size:10px; }
.ai-insight-body { font-size:13px; color:var(--text-2); line-height:1.55; }
.ai-insight-body strong { color:var(--text); font-weight:600; }
.ai-demo-caption { font-size:14px; color:var(--text-2); text-align:center; max-width:640px; margin:22px auto 0; line-height:1.6; }
.ai-demo-caption strong { color:var(--text); font-weight:600; }
/* Refinement-loop variant reuses .ai-demo-card; extra pills for severity + suggested edits */
.ai-insight-callout-left { left:22px; right:auto; }
.ai-sev-badge { font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.08em; padding:2px 6px; border-radius:4px; text-transform:uppercase; flex-shrink:0; }
.ai-sev-high { background:#fee2e2; color:#b91c1c; }
.ai-sev-med  { background:#fef3c7; color:#b45309; }
.ai-sev-low  { background:#dbeafe; color:#1d4ed8; }
.ai-fix-pill { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:13px; color:var(--text-2); display:flex; align-items:flex-start; gap:10px; line-height:1.5; }
.ai-fix-arrow { color:var(--accent); font-weight:700; flex-shrink:0; font-family:var(--mono); font-size:13px; line-height:1.35; }
.ai-fix-text strong { color:var(--text); font-weight:600; }
@media(max-width:780px) {
  .ai-demo-grid { grid-template-columns:1fr; }
  .ai-demo-arrow { flex-direction:row; min-height:56px; }
  .ai-demo-line { width:auto; height:2px; min-width:24px; background:linear-gradient(to right, rgba(37,99,235,0), #93c5fd, rgba(37,99,235,0)); }
  .ai-insight-callout, .ai-insight-callout-left { position:static; margin:0 0 18px; max-width:none; left:auto; right:auto; }
}
/* ═══ Splash: Why we built this (3 pillars) ═══ */
.why-pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1080px; margin:0 auto; }
.why-pillar { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px 28px; position:relative; overflow:hidden; text-align:center; }
.why-pillar::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent); }
.why-pillar-label { font-family:var(--mono); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-dark); font-weight:700; margin-bottom:14px; }
.why-pillar-title { font-size:19px; font-weight:700; color:var(--text); margin-bottom:12px; letter-spacing:-.018em; line-height:1.3; }
.why-pillar-text { font-size:15px; color:var(--text-2); line-height:1.65; }
.why-pillar-text strong { color:var(--text); font-weight:600; }

/* Highlighted "recommended" variant used in the API-key section */
.why-pillar-featured { background:linear-gradient(180deg, rgba(219,234,254,.45) 0%, var(--surface) 55%); border-color:rgba(37,99,235,.28); }
.why-pillar-featured::before { background:linear-gradient(90deg, #3b82f6, #8b5cf6); height:4px; }
.why-pillar-recommend { display:inline-flex; align-items:center; gap:5px; background:linear-gradient(135deg, #3b82f6, #8b5cf6); color:#fff; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:3px 9px; border-radius:999px; margin-left:8px; vertical-align:middle; }

/* CTA row sits under the API-key pillars */
.api-cta-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:36px auto 0; max-width:560px; }
.api-cta-row .btn { padding:12px 24px; font-size:14px; text-decoration:none; }
.api-cta-note { text-align:center; font-size:13px; color:var(--text-2); margin-top:14px; }
.api-cta-note code { font-family:var(--mono); font-size:12px; background:var(--surface-2); padding:2px 6px; border-radius:4px; color:var(--text); }

@media(max-width:860px) {
  .viz-pipeline { grid-template-columns:1fr; }
  .viz-arrow { transform:rotate(90deg); }
  .viz-grid, .viz-insights, .why-pillars { grid-template-columns:1fr; }
}
@media(max-width:680px) {
  .splash-h1 { font-size:30px; }
  .splash-features { grid-template-columns:1fr; }
  .splash-creator-cards { grid-template-columns:1fr; }
}

/* ═══ Splash: subtle animations (matches katebesel.com cadence) ═══ */

/* Hero-rise: stagger badge → title → sub → CTAs on page load */
@keyframes splash-hero-rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
.splash-page .splash-badge,
.splash-page .splash-h1,
.splash-page .splash-hero-sub,
.splash-page .splash-hero-actions { opacity:0; animation:splash-hero-rise .85s cubic-bezier(.22,.61,.36,1) forwards; }
.splash-page .splash-badge        { animation-delay:.05s; }
.splash-page .splash-h1           { animation-delay:.15s; }
.splash-page .splash-hero-sub     { animation-delay:.25s; }
.splash-page .splash-hero-actions { animation-delay:.35s; }

/* Scroll-reveal: elements tagged .splash-reveal (via JS) fade + translate up
   when IntersectionObserver adds .is-visible. Transition-delay is set inline
   on grid children for per-card stagger. */
.splash-page .splash-reveal { opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); will-change:opacity, transform; }
.splash-page .splash-reveal.is-visible { opacity:1; transform:translateY(0); }

/* Very slow organic drift on the hero blobs keeps the hero feeling alive without
   being distracting. Each keyframe preserves translateY(-50%) so the blob stays
   vertically centered in the hero wrap. */
@keyframes splash-blob-drift-left { 0%,100% { transform:translateY(-50%) rotate(0deg) scale(1); } 50% { transform:translateY(-48%) rotate(6deg) scale(1.04); } }
@keyframes splash-blob-drift-right { 0%,100% { transform:translateY(-50%) rotate(0deg) scale(1); } 50% { transform:translateY(-52%) rotate(-5deg) scale(1.03); } }
.splash-page .hero-blob-left  { animation:splash-blob-drift-left 24s ease-in-out infinite; }
.splash-page .hero-blob-right { animation:splash-blob-drift-right 26s ease-in-out infinite; }

/* Disable every splash animation when the user prefers reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .splash-page .splash-badge,
  .splash-page .splash-h1,
  .splash-page .splash-hero-sub,
  .splash-page .splash-hero-actions,
  .splash-page .hero-blob-left,
  .splash-page .hero-blob-right { animation:none; opacity:1; transform:none; }
  .splash-page .splash-reveal,
  .splash-page .splash-reveal.is-visible { opacity:1; transform:none; transition:none; }
}

/* ═══ Responsive layout — researcher app ═══
   Below 900px the left sidebar is hidden (the current step is already shown
   via the screen-title / eyebrow). Below 640px we stack stat cards and
   two-column grids, and shrink padding. The participant pages are already
   mobile-friendly (single-column by design). */
@media(max-width:900px) {
  .sidebar { display:none; }
  .main { padding:24px 20px 60px; }
  .app-header { padding:0 16px; gap:10px; }
  .header-study { font-size:12px; max-width:40vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .header-right { gap:6px; }
  .btn-header { padding:6px 10px; font-size:12px; }
}
@media(max-width:640px) {
  .screen-title { font-size:20px; }
  .screen-sub { font-size:13.5px; margin-bottom:22px; }
  .main { padding:20px 14px 60px; }
  .card-body { padding:18px 16px; }
  .stats-row { grid-template-columns:1fr; }
  .stat-card { padding:14px 16px; }
  .stat-value { font-size:24px; }
  /* Two-column insight grids (problems / strengths) stack on mobile */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; }
  /* Wide tables / heatmaps / canvases get horizontal scroll instead of clipping */
  .heatmap, .similarity-matrix, .tree-view, #suggestions,
  #updatedTree, #sitemapTree { overflow-x:auto; }
  /* Share URL box becomes tight — allow the URL to truncate instead of pushing the copy button off-screen */
  .share-url { font-size:11px; }
}

/* ── Auth Screen ── */
.auth-gate { position:fixed; inset:0; z-index:500; background:var(--bg); display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; padding:40px 16px; }
.auth-gate.hidden { display:none; }
.auth-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 16px 48px rgba(0,0,0,.12); width:400px; max-width:92vw; padding:36px 32px; margin:auto 0; }
.auth-logo { font-family:var(--mono); font-size:14px; font-weight:700; letter-spacing:.1em; color:var(--text); display:flex; align-items:center; gap:10px; margin-bottom:28px; justify-content:center; }
.auth-logo .logo-dot { width:10px; height:10px; }
.auth-title { font-size:20px; font-weight:700; color:var(--text); margin-bottom:6px; text-align:center; }
.auth-sub { font-size:13.5px; color:var(--text-muted); text-align:center; margin-bottom:24px; line-height:1.55; }
.auth-tabs { display:flex; gap:2px; background:var(--surface-2); border-radius:9px; padding:3px; margin-bottom:20px; }
.auth-tab { flex:1; padding:8px 6px; font-size:13px; font-weight:600; color:var(--text-muted); border-radius:7px; cursor:pointer; border:none; background:transparent; font-family:var(--font); transition:all .14s; text-align:center; }
.auth-tab.active { background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.auth-divider { display:flex; align-items:center; gap:12px; margin:16px 0; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.auth-divider span { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.auth-note { font-size:12px; color:var(--text-muted); line-height:1.55; margin-top:4px; }
.auth-error { font-size:12.5px; color:var(--red); background:var(--red-dim); padding:8px 12px; border-radius:8px; margin-bottom:12px; display:none; }
.auth-error.show { display:block; }

/* ── Landing Page ── */
/* Landing gate scrolls when content (long study list) exceeds viewport height. */
.landing-gate { position:fixed; inset:0; z-index:400; background:var(--bg); overflow-y:auto; padding:48px 24px; }
.landing-gate.hidden { display:none; }
.landing-box { max-width:920px; width:92vw; text-align:center; margin:0 auto; }
.landing-title { font-size:28px; font-weight:700; color:var(--text); margin-bottom:8px; letter-spacing:-.02em; }
.landing-sub { font-size:15px; color:var(--text-muted); margin-bottom:36px; line-height:1.6; }
.landing-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
.landing-card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius); padding:32px 24px; cursor:pointer; transition:all .18s; text-align:left; position:relative; }
.landing-card:hover { border-color:var(--accent); box-shadow:0 8px 28px rgba(37,99,235,.12); transform:translateY(-3px); }
.landing-card-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:14px; font-weight:700; letter-spacing:.04em; margin-bottom:14px; color:#fff; background:var(--accent); }
.landing-card-title { font-size:17px; font-weight:700; color:var(--text); margin-bottom:5px; }
.landing-card-desc { font-size:13.5px; color:var(--text-muted); line-height:1.55; }
.landing-card.selected { border-color:var(--accent); background:#f0f6ff; }
.landing-card.locked { cursor:not-allowed; opacity:.65; }
.landing-card.locked:hover { border-color:var(--border); box-shadow:none; transform:none; }
.landing-card-badge { position:absolute; top:14px; right:14px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); background:var(--surface-2); border:1px solid var(--border); padding:3px 8px; border-radius:999px; font-weight:600; }

/* "Or use a tool" — compact horizontal chips below the main study grid. */
.landing-tools-divider { border-top:1px solid var(--border); margin:36px 0 28px; }
.landing-title-sm { font-size:20px; }
.landing-tools { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px; margin-bottom:8px; }
.landing-tool { all:unset; box-sizing:border-box; display:flex; align-items:center; gap:12px; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; cursor:pointer; transition:border-color .14s, background .14s, transform .14s; position:relative; text-align:left; }
.landing-tool:hover { border-color:var(--accent); background:var(--accent-dim); transform:translateY(-1px); }
.landing-tool.locked { cursor:not-allowed; opacity:.65; }
.landing-tool.locked:hover { border-color:var(--border); background:var(--surface); transform:none; }
.landing-tool-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.04em; color:#fff; background:var(--accent); flex-shrink:0; }
.landing-tool-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.landing-tool-title { font-size:13.5px; font-weight:700; color:var(--text); }
.landing-tool-hint { font-size:11.5px; color:var(--text-muted); line-height:1.4; }
.landing-tool-badge { position:absolute; top:8px; right:10px; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); background:var(--surface-2); border:1px solid var(--border); padding:2px 6px; border-radius:999px; font-weight:700; }
.landing-footer { margin-top:28px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.landing-user { font-size:13px; color:var(--text-muted); }
.landing-user strong { color:var(--text-2); }

/* ── Card sort type selector ── */
.sort-type-options { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.sort-type-card { border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:14px 12px; cursor:pointer; transition:all .14s; text-align:center; }
.sort-type-card:hover { border-color:var(--accent); background:var(--accent-dim); }
.sort-type-card.selected { border-color:var(--accent); background:#f0f6ff; }
.sort-type-icon { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.04em; margin:0 auto 6px; color:var(--accent); background:var(--accent-dim); border:1.5px solid var(--accent-dim); }
.sort-type-name { font-size:13px; font-weight:700; color:var(--text); margin-bottom:3px; }
.sort-type-desc { font-size:11.5px; color:var(--text-muted); line-height:1.4; }

/* ── Category hierarchy tags ── */
.cat-hierarchy-badge { font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px; margin-left:6px; text-transform:uppercase; letter-spacing:.04em; }
.cat-primary { background:var(--accent-dim); color:var(--accent-dark); }
.cat-secondary { background:var(--amber-dim); color:var(--amber); }
.cat-tertiary { background:var(--surface-2); color:var(--text-muted); }

/* ── CSV import modal (shown after CSV upload, offers AI organize toggle) ── */
#csvImportModal { position:fixed; inset:0; z-index:350; display:none; align-items:center; justify-content:center; padding:24px; }
#csvImportModal.open { display:flex; }
.csv-modal-backdrop { position:fixed; inset:0; background:rgba(24,24,27,.5); backdrop-filter:blur(4px); }
.csv-modal-box { position:relative; z-index:1; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 20px 60px rgba(0,0,0,.2); width:520px; max-width:92vw; max-height:85vh; display:flex; flex-direction:column; overflow:hidden; }
.csv-modal-header { padding:20px 24px 14px; border-bottom:1px solid var(--border); }
.csv-modal-title { font-size:17px; font-weight:700; color:var(--text); margin-bottom:3px; }
.csv-modal-sub { font-size:13px; color:var(--text-muted); }
.csv-modal-filename { font-family:var(--mono); font-size:12px; color:var(--text-2); background:var(--surface-2); padding:4px 10px; border-radius:5px; display:inline-block; margin-top:6px; }
.csv-modal-body { padding:18px 24px; overflow-y:auto; flex:1; }
.csv-preview { font-family:var(--mono); font-size:11px; color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; max-height:140px; overflow:auto; white-space:pre; line-height:1.5; margin-bottom:14px; }
.csv-preview-label { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.csv-ai-toggle { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); cursor:pointer; transition:all .14s; }
.csv-ai-toggle:hover:not(.disabled) { border-color:var(--accent); background:var(--accent-dim); }
.csv-ai-toggle.active { border-color:var(--accent); background:var(--accent-dim); }
.csv-ai-toggle.disabled { opacity:.5; cursor:not-allowed; }
.csv-ai-toggle input { flex-shrink:0; width:18px; height:18px; accent-color:var(--accent); cursor:inherit; margin-top:1px; }
.csv-ai-toggle-text { flex:1 }
.csv-ai-toggle-label { font-size:14px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:6px; }
.csv-ai-toggle-hint { font-size:12px; color:var(--text-muted); margin-top:3px; line-height:1.5; }
.csv-modal-footer { padding:14px 24px 18px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; }

/* ── Editable tree (manual site map builder) ── */
.editable-tree .tree-node { display:flex; align-items:center; gap:8px; padding-top:4px; padding-bottom:4px; padding-right:8px; border-radius:6px; cursor:default; transition: opacity .14s, background .14s, box-shadow .14s; position:relative; }
.editable-tree .tree-node.dragging { opacity:.4; }
.editable-tree .tree-node.drag-over-above { box-shadow: inset 0 2px 0 0 var(--accent); }
.editable-tree .tree-node.drag-over-below { box-shadow: inset 0 -2px 0 0 var(--accent); }
.editable-tree .tree-node.drag-over-into  { background: var(--accent-dim); box-shadow: inset 0 0 0 2px var(--accent); }
.editable-tree .tree-drag-handle { flex-shrink:0; width:14px; display:flex; align-items:center; justify-content:center; cursor:grab; opacity:0; transition:opacity .14s; user-select:none; }
.editable-tree .tree-node:hover .tree-drag-handle { opacity:1; }
.editable-tree .tree-drag-handle:active { cursor:grabbing; }
.editable-tree .tree-drag-handle svg { display:block; }
.editable-tree .tree-drag-handle circle { fill: var(--text-muted); transition: fill .14s; }
.editable-tree .tree-drag-handle:hover circle { fill: var(--accent); }
.editable-tree .tree-drag-handle-spacer { flex-shrink:0; width:14px; }
.editable-tree .tree-node.l0 { padding-left:8px; }
.editable-tree .tree-node.l1 { padding-left:28px; }
.editable-tree .tree-node.l2 { padding-left:48px; }
.editable-tree .tree-node.l3 { padding-left:68px; }
.editable-tree .tree-node.l4 { padding-left:88px; }
.editable-tree .tree-node.l5 { padding-left:108px; }
.editable-tree .tree-node.l6 { padding-left:128px; }
.editable-tree .tree-node.l7 { padding-left:148px; }
.editable-tree .tree-node.l8 { padding-left:168px; }
.editable-tree .tree-node:hover { background:var(--surface-2); }
.editable-tree .tree-node-label { flex:1; outline:none; padding:2px 6px; border-radius:5px; min-width:80px; }
.editable-tree .tree-node-label:focus { background:var(--accent-dim); box-shadow:0 0 0 2px var(--accent); }
.editable-tree .tree-node-label:empty::before { content:'(unnamed)'; color:var(--text-muted); }
.editable-tree .tree-node-controls { display:flex; gap:4px; opacity:0; transition:opacity .14s; }
.editable-tree .tree-node:hover .tree-node-controls,
.editable-tree .tree-node:focus-within .tree-node-controls { opacity:1; }
.tree-node-btn { background:none; border:1px solid var(--border); color:var(--text-muted); font-size:11px; font-family:var(--font); padding:2px 8px; border-radius:5px; cursor:pointer; transition:all .12s; }
.tree-node-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.tree-node-del:hover { background:var(--red); border-color:var(--red); }

/* ── Consent & Screener Builder ── */
.consent-toggle { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.consent-toggle input[type=checkbox] { width:18px; height:18px; accent-color:var(--accent); cursor:pointer; }
.consent-toggle label { font-size:14px; font-weight:600; color:var(--text); cursor:pointer; }
.consent-charcount { font-size:11px; color:var(--text-muted); text-align:right; margin-top:4px; }

.screener-q { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; margin-bottom:10px; position:relative; }
.screener-q-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.screener-q-num { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--text-muted); background:var(--surface); padding:3px 8px; border-radius:5px; border:1px solid var(--border); }
.screener-q-del { margin-left:auto; background:none; border:none; color:var(--text-muted); font-size:16px; cursor:pointer; padding:2px 6px; border-radius:4px; }
.screener-q-del:hover { background:var(--red-dim); color:var(--red); }
.screener-type-tabs { display:flex; gap:4px; margin-bottom:10px; }
.screener-type-tab { padding:5px 12px; border-radius:7px; font-size:12px; font-weight:600; color:var(--text-muted); background:var(--surface); border:1.5px solid var(--border); cursor:pointer; font-family:var(--font); transition:all .14s; }
.screener-type-tab.active { border-color:var(--accent); background:var(--accent-dim); color:var(--accent); }
.screener-required { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); margin-bottom:10px; }
.screener-required input { accent-color:var(--accent); cursor:pointer; }
/* ── Screener answer options — Google-Forms style row layout ── */
.screener-opt-list { display:flex; flex-direction:column; gap:6px; }
.screener-opt-row { display:flex; align-items:center; gap:8px; padding:6px 10px; border:1.5px solid var(--border); border-radius:8px; background:var(--surface); transition:border-color .14s, background .14s; }
.screener-opt-row:focus-within { border-color:var(--accent); }
.screener-opt-row.screen-out { border-color:var(--red); background:var(--red-dim); }
.screener-opt-icon { font-size:14px; color:var(--text-muted); width:18px; text-align:center; flex-shrink:0; user-select:none; }
.screener-opt-row.screen-out .screener-opt-icon { color:var(--red); }
.screener-opt-text { border:none; outline:none; font-family:var(--font); font-size:13.5px; color:var(--text); background:transparent; flex:1; padding:3px 2px; min-width:0; }
.screener-opt-text::placeholder { color:#a1a1aa; }
.screener-opt-row.screen-out .screener-opt-text { color:var(--red); text-decoration:line-through; text-decoration-color:rgba(220,38,38,.35); }
.screener-opt-screenout { background:transparent; border:1.5px solid var(--border); color:var(--text-muted); font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:all .14s; }
.screener-opt-screenout:hover { border-color:var(--red); color:var(--red); }
.screener-opt-row.screen-out .screener-opt-screenout { background:var(--red); border-color:var(--red); color:#fff; }
.screener-opt-del { background:transparent; border:none; color:var(--text-muted); font-size:14px; padding:2px 6px; border-radius:4px; cursor:pointer; flex-shrink:0; }
.screener-opt-del:hover { background:var(--red-dim); color:var(--red); }
.screener-opt-add { background:transparent; border:1.5px dashed var(--border); color:var(--text-muted); font-family:var(--font); font-size:13px; font-weight:500; padding:8px 12px; border-radius:8px; cursor:pointer; text-align:left; transition:all .14s; }
.screener-opt-add:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.screener-preview { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; margin-top:14px; }
.screener-preview-title { font-size:12px; font-weight:700; color:var(--text-muted); margin-bottom:10px; letter-spacing:.06em; text-transform:uppercase; }
.screener-preview-q { margin-bottom:14px; }
.screener-preview-q-text { font-size:14px; font-weight:600; color:var(--text); margin-bottom:6px; }
.screener-preview-q-text .req { color:var(--red); font-size:12px; font-weight:400; margin-left:4px; }
.screener-preview-opt { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:13px; color:var(--text-2); }
.screener-preview-radio { width:16px; height:16px; border:2px solid var(--border); border-radius:50%; flex-shrink:0; }
.screener-preview-check { width:16px; height:16px; border:2px solid var(--border); border-radius:4px; flex-shrink:0; }
.screener-preview-text-input { width:100%; max-width:300px; padding:6px 10px; border:1.5px solid var(--border); border-radius:7px; font-size:13px; color:var(--text-muted); background:var(--surface-2); }

/* ── Step navigation clickable ── */
.step-row.future { opacity:.7; cursor:pointer; }
.step-row.future:hover { background:#e4e4e8; opacity:1; }
.step-row.future .step-circle { border-style:dashed; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }