:root {
  --bg-base: #0f1117;
  --bg-surface: #161b27;
  --bg-card: #1a2035;
  --bg-elevated: #1f2640;
  --border: #2a3350;
  --text-primary: #e8eaf6;
  --text-main: #e8eaf6;
  --text-secondary: #8892b0;
  --text-muted: #546082;
  --accent: #6366f1;
  --accent-dim: rgba(99,102,241,.12);
  --accent-border: rgba(99,102,241,.3);
  --success: #3ecf8e;
  --success-dim: rgba(62,207,142,.1);
  --warning: #f5a623;
  --warning-dim: rgba(245,166,35,.1);
  --danger: #ef4444;
  --radius: 8px;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg-base); color: var(--text-primary); font-family: system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }


/* ══════════════════════════════════════════════════════════════════════
   InsightForge v2 — Sidebar Layout & Dashboard Components
══════════════════════════════════════════════════════════════════════ */

/* ── App Shell ─────────────────────────────────────────────────────── */
.app-shell { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ───────────────────────────────────────────────────────── */
.sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
}

.brand-pill {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-nav {
  flex: 1;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s;
  border: 1px solid transparent;
}

.nav-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.nav-item.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent-border);
}

.nav-icon { width: 18px; text-align: center; font-size: 0.85rem; flex-shrink: 0; }
.nav-label { flex: 1; }

.nav-separator { height: 1px; background: var(--border); margin: 0.5rem 0; }

.nav-group-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.25rem 0.75rem;
}

/* ── Sidebar Footer ────────────────────────────────────────────────── */
.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 0.875rem;
  flex-shrink: 0;
}

.connections { margin-bottom: 0.875rem; display: flex; flex-direction: column; gap: 0.4rem; }

.connection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
}

.conn-label { color: var(--text-muted); }
.conn-dot { font-size: 0.7rem; }
.conn-ok { color: var(--success); }
.conn-warn { color: var(--warning); }
.conn-off { color: var(--danger); text-decoration: none; }
.conn-off:hover { text-decoration: underline; }

.sidebar-user { display: flex; align-items: center; gap: 0.5rem; }

.user-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  flex: 1;
  min-width: 0;
  padding: 0.35rem;
  border-radius: var(--radius);
  transition: background 0.15s;
}

.user-item:hover { background: var(--bg-elevated); }

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.user-info { display: flex; flex-direction: column; min-width: 0; }
.user-name { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 0.62rem; color: var(--text-muted); font-family: var(--font-mono); text-transform: uppercase; }

.logout-btn {
  flex-shrink: 0;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 1rem;
  padding: 0.25rem 0.4rem;
  border-radius: var(--radius);
  transition: color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
}
.logout-btn:hover { color: var(--danger); background: var(--danger-dim); }

/* ── App Main ──────────────────────────────────────────────────────── */
.app-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.app-header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
}

.app-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.breadcrumb-sep { color: var(--border-active); }
.breadcrumb-active { color: var(--text-primary); font-weight: 600; }
.breadcrumb-link { color: var(--text-muted); text-decoration: none; }
.breadcrumb-link:hover { color: var(--text-secondary); }

.app-header-right { display: flex; align-items: center; gap: 0.75rem; }

.app-content { flex: 1; overflow-y: auto; padding: 2rem; }

/* ── Auth shell ────────────────────────────────────────────────────── */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.auth-content { width: 100%; max-width: 420px; }

/* ── Dashboard Hero ────────────────────────────────────────────────── */
.dash-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.dash-cta {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.15s;
}

.dash-cta:hover {
  border-color: var(--accent-border);
  background: var(--bg-elevated);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(91,141,239,0.08);
}

.dash-cta-icon {
  font-size: 1.2rem;
  color: var(--accent);
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-dim);
  border-radius: var(--radius);
  border: 1px solid var(--accent-border);
}

.dash-cta-body { flex: 1; min-width: 0; }
.dash-cta-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.25rem; }
.dash-cta-desc { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.4; }

.dash-cta-arrow { color: var(--text-muted); font-size: 1.1rem; flex-shrink: 0; transition: transform 0.15s, color 0.15s; }
.dash-cta:hover .dash-cta-arrow { transform: translateX(4px); color: var(--accent); }

/* ── Dashboard Section ─────────────────────────────────────────────── */
.dash-section { }

.dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.dash-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dash-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 1px 8px;
  border-radius: 20px;
  color: var(--text-muted);
}

/* ── Smart Grid & Cards ────────────────────────────────────────────── */
.smart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1rem;
}

.smart-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.smart-card:hover {
  border-color: var(--border-active);
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}

.smart-card-top { display: flex; align-items: center; justify-content: space-between; }
.smart-tags { display: flex; gap: 0.35rem; }

.tag-type { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-border); }
.tag-source-cu { background: rgba(62,207,142,0.08); color: var(--success); border-color: rgba(62,207,142,0.25); font-family: var(--font-mono); font-size: 0.65rem; padding: 1px 7px; border-radius: 4px; border: 1px solid; }
.tag-source-w  { background: var(--bg-elevated); color: var(--text-muted); border-color: var(--border); font-family: var(--font-mono); font-size: 0.65rem; padding: 1px 7px; border-radius: 4px; border: 1px solid; }

.smart-date { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-muted); }
.smart-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.smart-client { font-size: 0.78rem; color: var(--accent); margin-top: -0.25rem; }

/* Progress */
.smart-progress { display: flex; flex-direction: column; gap: 0.5rem; }

.progress-track { height: 3px; background: var(--bg-elevated); border-radius: 2px; overflow: hidden; border: 1px solid var(--border); }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #7eb3ff); border-radius: 2px; transition: width 0.5s ease; }

.progress-steps { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; }
.pstep { font-size: 0.6rem; color: var(--text-muted); font-family: var(--font-mono); padding: 1px 5px; border-radius: 3px; border: 1px solid transparent; transition: all 0.2s; }
.pstep.done { color: var(--success); background: var(--success-dim); border-color: rgba(62,207,142,0.2); }
.pstep-sep { font-size: 0.55rem; color: var(--border-active); }

/* Status */
.smart-status-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.status-chip {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  padding: 2px 9px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  flex-shrink: 0;
}

.chip-created  { background: var(--bg-elevated); color: var(--text-muted); border-color: var(--border); }
.chip-uploaded { background: var(--warning-dim); color: var(--warning); border-color: rgba(245,166,35,0.3); }
.chip-extracted { background: var(--success-dim); color: var(--success); border-color: rgba(62,207,142,0.3); }

.next-hint { font-size: 0.68rem; color: var(--text-muted); }

/* Actions */
.smart-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════
   WIZARD ClickUp + Extraction preview
   ═══════════════════════════════════════════════════════ */
.cu-nav-chain { display:flex; align-items:flex-end; gap:.5rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.cu-nav-item  { display:flex; flex-direction:column; gap:.4rem; flex:1; min-width:130px; }
.cu-nav-item label { font-size:.8rem; font-weight:600; color:var(--text-muted); }
.cu-nav-arrow { font-size:1.2rem; color:var(--text-muted); padding-bottom:.35rem; flex-shrink:0; }
.cu-select-wrap { position:relative; }
.cu-select-wrap select {
  width:100%; padding:.55rem .85rem;
  border:1.5px solid var(--border); border-radius:8px;
  background:var(--bg-base); color:var(--text-main);
  font-size:.88rem; outline:none; transition:border-color .15s;
}
.cu-select-wrap select:not(:disabled):focus { border-color:var(--accent); }
.cu-select-wrap select:disabled { opacity:.5; cursor:not-allowed; }
.cu-spinner {
  width:14px; height:14px; border:2px solid var(--border);
  border-top-color:var(--accent); border-radius:50%;
  animation:spin .7s linear infinite;
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
}
.opt-label { font-size:.72rem; font-weight:400; color:var(--text-muted); }
.cu-selection-summary {
  display:flex; align-items:center; gap:.85rem; padding:.75rem 1rem;
  border:1.5px solid var(--success); background:rgba(16,185,129,.06);
  border-radius:10px; margin-bottom:1rem;
}
.cu-summary-icon { font-size:1.1rem; color:var(--success); }
.cu-summary-id   { font-size:.75rem; color:var(--text-muted); margin-left:.6rem; }

/* Task tree */
.task-tree-toolbar { display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; }
.btn-micro {
  padding:.3rem .75rem; font-size:.78rem;
  border:1.5px solid var(--border); border-radius:6px;
  background:none; color:var(--text-muted); cursor:pointer; transition:all .15s;
}
.btn-micro:hover { border-color:var(--accent); color:var(--accent); }
.task-count-badge {
  margin-left:auto; font-size:.78rem; color:var(--text-muted);
  background:var(--bg-card); padding:.25rem .65rem;
  border-radius:20px; border:1px solid var(--border);
}
.task-tree {
  border:1.5px solid var(--border); border-radius:10px;
  overflow:hidden; max-height:360px; overflow-y:auto;
}
.task-row {
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem .85rem; border-bottom:1px solid var(--border);
  font-size:.85rem; transition:background .1s;
}
.task-row:last-child { border-bottom:none; }
.task-row:hover { background:rgba(99,102,241,.04); }
.task-row.depth-1 { padding-left:2rem; }
.task-row.depth-2 { padding-left:3.2rem; }
.task-row.depth-3 { padding-left:4.4rem; }
.task-check-label { cursor:pointer; }
.task-status-dot  { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.task-name { flex:1; color:var(--text-main); }
.task-priority {
  font-size:.68rem; padding:2px 7px; border-radius:10px;
  text-transform:uppercase; font-weight:700;
}
.prio-urgent { background:rgba(239,68,68,.12); color:#dc2626; }
.prio-high   { background:rgba(245,158,11,.12); color:#d97706; }
.prio-normal { background:rgba(99,102,241,.1);  color:var(--accent); }
.prio-low    { background:var(--bg-card); color:var(--text-muted); }
.empty-state-small {
  text-align:center; padding:2rem; color:var(--text-muted);
  border:1.5px dashed var(--border); border-radius:10px;
}

/* Options */
.options-grid { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.option-card {
  display:flex; cursor:pointer;
  border:1.5px solid var(--border); border-radius:10px;
  overflow:hidden; transition:border-color .15s;
}
.option-card:has(input:checked) { border-color:var(--accent); background:rgba(99,102,241,.04); }
.option-card input { display:none; }
.option-card-body { display:flex; align-items:flex-start; gap:.75rem; padding:.9rem; }
.option-icon { font-size:1.4rem; flex-shrink:0; }
.option-card-body strong { font-size:.88rem; display:block; margin-bottom:.2rem; }
.option-card-body p { font-size:.76rem; color:var(--text-muted); margin:0; }

/* Extraction stats bar */
.ext-stats-bar {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--border);
  border:1.5px solid var(--border); border-radius:10px;
  overflow:hidden; margin-bottom:1.25rem;
}
.ext-stat {
  display:flex; flex-direction:column; align-items:center;
  gap:.25rem; padding:.85rem; background:var(--bg-card);
}
.ext-stat-val { font-size:1.5rem; font-weight:800; color:var(--text-main); }
.ext-stat-lbl { font-size:.72rem; color:var(--text-muted); text-align:center; }

/* Extraction tree */
.ext-preview-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.75rem;
}
.ext-preview-header h3 { margin:0; font-size:1rem; font-weight:700; }
.ext-preview-actions { display:flex; gap:.5rem; }
.ext-tree {
  border:1.5px solid var(--border); border-radius:10px;
  overflow:hidden; max-height:400px; overflow-y:auto;
  margin-bottom:1.25rem;
}
.ext-node { border-bottom:1px solid var(--border); }
.ext-node:last-child { border-bottom:none; }
.ext-node-header {
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .85rem; cursor:pointer; transition:background .1s;
  font-size:.85rem;
}
.ext-node-header:hover { background:rgba(99,102,241,.04); }
.ext-toggle    { font-size:.65rem; color:var(--text-muted); width:14px; flex-shrink:0; }
.ext-toggle-ph { width:14px; flex-shrink:0; }
.ext-node-type-badge {
  font-size:.65rem; font-weight:700; padding:2px 7px;
  border-radius:10px; text-transform:uppercase; flex-shrink:0;
}
.type-epic    { background:rgba(139,92,246,.12); color:#7c3aed; }
.type-feature { background:rgba(99,102,241,.12);  color:var(--accent); }
.type-us, .type-user_story { background:rgba(16,185,129,.1); color:#059669; }
.type-item    { background:var(--bg-card); color:var(--text-muted); }
.ext-node-title  { flex:1; color:var(--text-main); }
.ext-node-status { font-size:.72rem; color:var(--text-muted); }
.ext-node-prio   { font-size:.68rem; padding:1px 6px; border-radius:8px; }
.ext-children { padding-left:1.25rem; border-top:1px solid var(--border); background:rgba(0,0,0,.02); }

/* Warnings */
.ext-warnings-box {
  border:1px solid rgba(245,158,11,.3); background:rgba(245,158,11,.06);
  border-radius:8px; padding:.75rem; margin-bottom:1.25rem;
}
.ext-warning-item { display:flex; gap:.5rem; font-size:.82rem; color:#92400e; padding:.2rem 0; }

/* Validation */
.ext-validation-bar {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
  padding:1rem 1.1rem;
  background:rgba(16,185,129,.06); border:1.5px solid rgba(16,185,129,.25);
  border-radius:10px; margin-top:1.25rem;
}
.ext-validation-msg { display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:#065f46; }
.validate-icon { font-size:1rem; }
.ext-confirm-label { display:flex; align-items:center; gap:.55rem; font-size:.85rem; cursor:pointer; font-weight:600; }

/* Alert box */
.alert-box { display:flex; gap:.85rem; padding:1rem 1.1rem; border-radius:10px; margin-bottom:1.5rem; font-size:.88rem; }
.alert-warning { background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.3); color:#92400e; }
.alert-box a { color:var(--accent); }

/* ── Wizard Shell ───────────────────────────────────────────────── */
.wizard-shell { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem; }
.wizard-stepper { display: flex; align-items: center; margin-bottom: 2.5rem; }
.step { display: flex; flex-direction: column; align-items: center; gap: .35rem; flex: 1; }
.step-bubble {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700;
  background: var(--bg-elevated); color: var(--text-muted);
  border: 2px solid var(--border); transition: all .2s;
}
.step.active .step-bubble { background: var(--accent); color: #fff; border-color: var(--accent); }
.step.done .step-bubble { background: var(--success); color: #fff; border-color: var(--success); }
.step-label { font-size: .72rem; color: var(--text-muted); font-weight: 500; }
.step.active .step-label { color: var(--accent); }
.step-line { flex: 1; height: 2px; background: var(--border); margin-bottom: 1.4rem; }
.wizard-body { }
.wizard-step { display: none; }
.wizard-step.active { display: block; }
.wizard-step-header { margin-bottom: 1.75rem; }
.wizard-step-header h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: .4rem; }
.wizard-step-subtitle { color: var(--text-muted); font-size: .9rem; }
.wizard-actions { display: flex; align-items: center; gap: .75rem; margin-top: 1.75rem; }
.btn { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.2rem; border-radius: var(--radius); font-size: .875rem; font-weight: 600; cursor: pointer; border: none; transition: all .15s; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { opacity: .9; }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1.5px solid var(--border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ── ClickUp nav chain ──────────────────────────────────────────── */
.cu-nav-chain { display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.cu-nav-item { display: flex; flex-direction: column; gap: .35rem; flex: 1; min-width: 150px; }
.cu-nav-item label { font-size: .75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.cu-select-wrap { position: relative; }
.cu-select-wrap select { width: 100%; padding: .55rem .85rem; background: var(--bg-elevated); color: var(--text-primary); border: 1.5px solid var(--border); border-radius: var(--radius); font-size: .875rem; cursor: pointer; appearance: none; }
.cu-select-wrap select:focus { outline: none; border-color: var(--accent); }
.cu-nav-arrow { font-size: 1.1rem; color: var(--text-muted); padding-bottom: .6rem; }
.cu-list-confirm { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: rgba(62,207,142,.07); border: 1.5px solid rgba(62,207,142,.25); border-radius: 10px; margin-bottom: 1.5rem; }
.cu-list-name { font-weight: 700; font-size: 1rem; }
.cu-list-id { font-size: .75rem; color: var(--text-muted); }

/* ── Export page ──────────────────────────────────────── */
.export-shell{max-width:760px;margin:0 auto;padding:2rem 1.5rem}
.export-header{display:flex;align-items:center;gap:1.25rem;margin-bottom:2rem}
.export-icon{font-size:2.5rem;line-height:1}
.export-title{font-size:1.6rem;font-weight:700;margin:0 0 .25rem}
.export-subtitle{color:var(--text-muted);margin:0;font-size:.92rem}
.export-stats-row{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.export-stat{flex:1;min-width:100px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1rem 1.25rem;display:flex;flex-direction:column;align-items:center;gap:.3rem}
.export-stat-val{font-size:1.8rem;font-weight:700;color:var(--accent)}
.export-stat-lbl{font-size:.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.export-preview-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:2rem}
.export-preview-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-bottom:1px solid var(--border);font-size:.9rem;font-weight:600}
.export-preview-badge{font-size:.72rem;padding:.2rem .6rem;background:var(--bg-base);border:1px solid var(--border);border-radius:99px;color:var(--text-muted)}
.export-preview-body{padding:1.25rem}
.export-doc-preview{background:var(--bg-base);border:1px solid var(--border);border-radius:8px;padding:1.25rem;font-size:.85rem;max-height:280px;overflow-y:auto}
.edp-cover{text-align:center;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.edp-title{font-size:1rem;font-weight:700;margin-bottom:.25rem}
.edp-sub{color:var(--text-muted);font-size:.8rem}
.edp-section{color:var(--accent);font-weight:600;margin:.6rem 0 .3rem}
.edp-epic{color:var(--text-main);padding:.2rem 0;font-weight:500}
.edp-feature{color:var(--text-muted);padding:.15rem 0 .15rem 1rem}
.edp-more{color:var(--text-muted);font-style:italic;padding:.1rem 0 .1rem 1rem;font-size:.8rem}
.export-actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.btn-export{display:inline-flex;align-items:center;gap:.6rem;background:var(--accent);color:#fff;font-weight:600;padding:.75rem 1.75rem;border-radius:8px;text-decoration:none;font-size:1rem;transition:opacity .15s}
.btn-export:hover{opacity:.85}
.export-empty{text-align:center;padding:3rem 1rem;color:var(--text-muted)}

/* ── Export epic selection ─────────────────────────────── */
.export-epic-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:2rem}
.export-epic-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-bottom:1px solid var(--border);font-size:.9rem;font-weight:600;flex-wrap:wrap;gap:.5rem}
.export-epic-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.export-sel-count{font-size:.8rem;color:var(--accent);font-weight:600;min-width:120px;text-align:right}
.export-epic-list{max-height:420px;overflow-y:auto;padding:.5rem 0}
.export-epic-row{display:flex;align-items:center;gap:.75rem;padding:.5rem 1.25rem;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);transition:background .1s}
.export-epic-row:hover{background:rgba(99,102,241,.07)}
.export-epic-row input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;flex-shrink:0;cursor:pointer}
.export-epic-name{flex:1;font-size:.88rem;font-weight:500;color:var(--text-main)}
.export-epic-meta{font-size:.75rem;color:var(--text-muted);white-space:nowrap}