:root {
  --bg:#0B0F19; --bg-card:#0F1626; --bg-hover:#131B2E; --bg-input:#0a0e17;
  --border:#1E293B; --border-accent:rgba(37,99,235,0.3);
  --text:#F3F4F6; --text-muted:#9CA3AF; --text-dim:#64748B; --text-main:#F3F4F6;
  --accent:#2563EB; --accent-glow:rgba(37,99,235,0.15); --primary-hover:#1d4ed8;
  --success:#10B981; --warn:#F59E0B; --error:#EF4444; --info:#60A5FA;
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  /* Surface elevation tokens for glassmorphism */
  --surface-1: rgba(15,22,38,0.55);
  --surface-2: rgba(19,27,46,0.70);
  --surface-3: rgba(25,35,60,0.85);
  --glass-border: rgba(255,255,255,0.06);
  --glass-highlight: rgba(255,255,255,0.03);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.3);
  --shadow-glow: 0 0 30px rgba(37,99,235,0.12);
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.4s ease;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.5; min-height:100vh; padding-bottom:60px; }
.container { max-width:1100px; margin:0 auto; padding:0 24px 60px; }
.nav,.top-nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:12px 20px; margin:0 -24px 20px; background:rgba(15,22,38,0.85); border-bottom:1px solid var(--border); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.nav-brand,.brand { display:inline-flex; align-items:center; gap:0.5rem; font-size:1rem; font-weight:700; color:var(--text); text-decoration:none; letter-spacing:-0.02em; white-space:nowrap; }
.nav-brand span { color:var(--accent); }
.brand:hover { color:var(--accent); }
.nav-links { display:flex; align-items:center; gap:0.25rem; font-size:0.875rem; }
.nav-links a { display:flex; align-items:center; gap:0.4rem; padding:0.35rem 0.6rem; border-radius:8px; font-size:0.875rem; font-weight:500; color:var(--text-muted); text-decoration:none; white-space:nowrap; transition:color 0.2s, background 0.2s; }
.nav-links a:hover { color:var(--text); background:var(--bg-hover); }
.hero { text-align:center; padding:clamp(24px,5vw,48px) 0 clamp(32px,5vw,48px); }
.hero h1 { font-size:clamp(1.5rem,4vw,2.5rem); font-weight:800; margin-bottom:12px; letter-spacing:-0.03em; background:linear-gradient(135deg,var(--text) 0%,var(--accent) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero p { color:var(--text-muted); font-size:clamp(0.85rem,1.5vw,1rem); max-width:560px; margin:0 auto; line-height:1.6; }
.hero-badge { display:inline-block; background:var(--surface-1); color:var(--info); font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; padding:6px 16px; border-radius:20px; margin-bottom:16px; border:1px solid var(--glass-border); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.dropzone { border:2px dashed var(--border); border-radius:var(--radius-lg); padding:clamp(32px,5vw,56px) clamp(24px,4vw,40px); text-align:center; cursor:pointer; transition:var(--transition-base); background:var(--surface-1); margin-bottom:32px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); position:relative; overflow:hidden; }
.dropzone::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,rgba(37,99,235,0.08),transparent 70%); opacity:0; transition:opacity 0.4s ease; pointer-events:none; }
.dropzone:hover,.dropzone.dragover { border-color:var(--accent); background:var(--surface-2); box-shadow:var(--shadow-glow); }
.dropzone:hover::before,.dropzone.dragover::before { opacity:1; }
.dropzone .icon { font-size:clamp(2rem,4vw,3rem); margin-bottom:16px; display:block; filter:drop-shadow(0 0 12px rgba(37,99,235,0.3)); transition:transform 0.3s ease; }
.dropzone:hover .icon { transform:scale(1.1) translateY(-4px); }
.dropzone h3 { font-size:clamp(0.9rem,1.5vw,1.1rem); font-weight:600; margin-bottom:8px; }
.dropzone p { color:var(--text-muted); font-size:0.85rem; }
.dropzone input { display:none; }
.scorecard-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:32px; }
.scorecard { background:var(--surface-1); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:20px; position:relative; overflow:hidden; transition:var(--transition-base); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.scorecard:hover { transform:translateY(-4px); border-color:var(--border-accent); box-shadow:var(--shadow-md); }
.scorecard::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--radius-md) var(--radius-md) 0 0; opacity:0.6; }
.score-good::after { background:linear-gradient(90deg,var(--success),#34d399); }
.score-warn::after { background:linear-gradient(90deg,var(--warn),#fbbf24); }
.score-bad::after { background:linear-gradient(90deg,var(--error),#f87171); }
.score-info::after { background:linear-gradient(90deg,var(--info),#93c5fd); }
.scorecard-label { font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.scorecard-value { font-size:1.8rem; font-weight:700; margin-bottom:4px; }
.scorecard-bar { height:4px; border-radius:2px; background:var(--border); margin-top:12px; overflow:hidden; }
.scorecard-bar-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--info)); transition:width 0.8s cubic-bezier(0.22,1,0.36,1); }
.score-good .scorecard-value,.score-good .scorecard-delta { color:var(--success); }
.score-good .scorecard-bar-fill { background:var(--success); }
.score-warn .scorecard-value,.score-warn .scorecard-delta { color:var(--warn); }
.score-warn .scorecard-bar-fill { background:var(--warn); }
.score-bad .scorecard-value,.score-bad .scorecard-delta { color:var(--error); }
.score-bad .scorecard-bar-fill { background:var(--error); }
.score-info .scorecard-value { color:var(--info); }
.score-info .scorecard-bar-fill { background:var(--info); }
.roadmap-section { margin-bottom:40px; }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:8px; }
.section-title { font-size:1.1rem; font-weight:600; }
.section-subtitle { color:var(--text-muted); font-size:0.85rem; }
.timeline { position:relative; padding-left:32px; }
.timeline::before { content:''; position:absolute; left:11px; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,var(--accent),var(--success)); border-radius:1px; }
.timeline-phase { position:relative; margin-bottom:24px; transition:var(--transition-base); }
.timeline-phase::before { content:''; position:absolute; left:-26px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--bg); border:3px solid var(--accent); transition:all 0.3s ease; }
.timeline-phase.completed::before { background:var(--success); border-color:var(--success); box-shadow:0 0 12px rgba(16,185,129,0.4); }
.timeline-phase.in-progress::before { background:var(--warn); border-color:var(--warn); animation:pulse 2s infinite; }
.timeline-phase:hover::before { transform:scale(1.2); }
.timeline-phase:hover { transform:translateX(4px); }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,0.4);} 50%{box-shadow:0 0 0 6px rgba(245,158,11,0);} }
.phase-card { background:var(--surface-1); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:20px; transition:var(--transition-base); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); position:relative; overflow:hidden; }
.phase-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent); opacity:0.7; transition:width 0.3s ease; }
.phase-card:hover { border-color:var(--border-accent); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.phase-card:hover::before { width:6px; }
.timeline-phase.completed .phase-card::before { background:var(--success); }
.timeline-phase.blocked .phase-card::before { background:var(--error); }
.timeline-phase.in-progress .phase-card::before { background:var(--warn); }
.timeline-phase.depends-on-critical .phase-card::before { background:var(--error); }
.phase-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; gap:8px; }
.phase-title { font-size:0.95rem; font-weight:600; }
.phase-meta { display:flex; gap:8px; flex-wrap:wrap; }
.phase-badge { font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; padding:3px 10px; border-radius:20px; }
.badge-critical { background:rgba(239,68,68,0.15); color:var(--error); border:1px solid rgba(239,68,68,0.3); }
.badge-high { background:rgba(245,158,11,0.15); color:var(--warn); border:1px solid rgba(245,158,11,0.3); }
.badge-medium { background:rgba(96,165,250,0.15); color:var(--info); border:1px solid rgba(96,165,250,0.3); }
.badge-low { background:rgba(16,185,129,0.15); color:var(--success); border:1px solid rgba(16,185,129,0.3); }
.badge-effort { background:var(--bg-hover); color:var(--text-muted); border:1px solid var(--border); }
.phase-desc { color:var(--text-muted); font-size:0.85rem; margin-bottom:12px; }
.phase-tasks { list-style:none; }
.phase-tasks li { font-size:0.82rem; color:var(--text-muted); padding:6px 0 6px 20px; position:relative; border-bottom:1px solid rgba(30,41,59,0.5); }
.phase-tasks li:last-child { border-bottom:none; }
.phase-tasks li::before { content:''; position:absolute; left:0; top:13px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.phase-tasks li.done { color:var(--success); text-decoration:line-through; opacity:0.6; }
.phase-tasks li.done::before { background:var(--success); }
.phase-progress { margin-top:14px; }
.phase-progress-label { display:flex; justify-content:space-between; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; }
.phase-progress-bar { height:6px; border-radius:3px; background:var(--border); overflow:hidden; }
.phase-progress-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--info)); transition:width 0.6s cubic-bezier(0.22,1,0.36,1); position:relative; }
.phase-progress-fill::after { content:''; position:absolute; top:0; right:0; bottom:0; width:20px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15)); border-radius:0 3px 3px 0; }
.action-bar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; padding:16px; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; }
.btn { padding:10px 20px; border-radius:8px; border:none; font-size:0.85rem; font-weight:600; cursor:pointer; transition:all 0.2s; font-family:var(--font); }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:#1D4ED8; transform:translateY(-1px); }
.btn-secondary { background:transparent; border:1px solid var(--border); color:var(--text-muted); }
.btn-secondary:hover { border-color:var(--accent); color:var(--text); }
.empty-state { text-align:center; padding:60px 20px; color:var(--text-dim); }
.empty-state .icon { font-size:3rem; margin-bottom:16px; opacity:0.5; }
.json-preview { background:#0a0e17; border:1px solid var(--border); border-radius:8px; padding:16px; overflow-x:auto; }
.json-preview pre { font-family:'SF Mono',Monaco,monospace; font-size:0.8rem; color:var(--text-muted); line-height:1.6; }
.toast { position:fixed; bottom:24px; right:24px; padding:12px 20px; border-radius:10px; font-size:0.85rem; font-weight:500; color:#fff; z-index:1000; transform:translateY(100px) scale(0.95); opacity:0; transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1); box-shadow:0 8px 24px rgba(0,0,0,0.3); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); display:flex; align-items:center; gap:8px; }
.toast.show { transform:translateY(0) scale(1); opacity:1; }
.toast::before { font-size:1.1rem; }
.toast-success::before { content:'✓'; }
.toast-error::before { content:'✕'; }
.toast-info::before { content:'ℹ'; }
.toast-success { background:var(--success); }
.toast-error { background:var(--error); }
.toast-info { background:var(--info); }
.summary-card { background:var(--surface-1); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:20px; margin-bottom:24px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:var(--transition-base); }
.summary-card:hover { box-shadow:var(--shadow-sm); }
.summary-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.summary-title { font-size:1rem; font-weight:600; }
.summary-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.stat-item { text-align:center; padding:12px; background:rgba(37,99,235,0.05); border-radius:8px; border:1px solid var(--border); }
.stat-value { font-size:1.5rem; font-weight:700; display:block; }
.stat-label { font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }
.filter-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.filter-btn { padding:6px 14px; border-radius:20px; border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:0.8rem; font-weight:500; cursor:pointer; transition:all 0.2s; font-family:var(--font); }
.filter-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.filter-btn:hover:not(.active) { border-color:var(--accent); color:var(--text); }
.phase-card { cursor:pointer; user-select:none; }
.phase-card.collapsed .phase-tasks, .phase-card.collapsed .phase-progress { display:none; }
.phase-card.collapsed { padding-bottom:12px; }
.phase-toggle { margin-left:auto; font-size:0.8rem; color:var(--text-dim); transition:transform 0.2s; }
.phase-card.collapsed .phase-toggle { transform:rotate(-90deg); }
.phase-tasks li { cursor:pointer; transition:all 0.15s; display:flex; align-items:flex-start; gap:8px; }
.phase-tasks li:hover { background:rgba(37,99,235,0.04); border-radius:4px; margin:0 -8px; padding-left:28px; }
.task-check { width:14px; height:14px; border:2px solid var(--text-dim); border-radius:3px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.2s; }
.task-check.checked { background:var(--success); border-color:var(--success); }
.task-check.checked::after { content:'✓'; color:#fff; font-size:10px; font-weight:700; }
.phase-tasks li.done .task-check { background:var(--success); border-color:var(--success); }
.phase-tasks li.done .task-check::after { content:'✓'; color:#fff; font-size:10px; font-weight:700; }
.phase-tasks li.done { text-decoration:none; opacity:1; color:var(--success); }
.phase-tasks li.done .task-text { text-decoration:line-through; opacity:0.6; }
.task-copy { margin-left:auto; display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:4px; border:1px solid var(--border); background:transparent; color:var(--text-dim); cursor:pointer; font-size:11px; opacity:0; transition:opacity 0.15s, color 0.15s; }
.phase-tasks li:hover .task-copy { opacity:1; }
.task-copy:hover { color:var(--accent); border-color:var(--accent); }
.task-timer { margin-left:6px; display:flex; align-items:center; gap:6px; font-size:0.7rem; color:var(--text-dim); cursor:pointer; user-select:none; }
.task-timer:hover { color:var(--accent); }
.task-timer .timer-btn { width:18px; height:18px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:10px; }
.task-timer.running .timer-btn { background:var(--error); color:#fff; border-color:var(--error); }
.task-timer.running { color:var(--error); }
.phase-tasks li.phase-task-overflow { display:none; }
.phase-expand-li { list-style:none; padding-left:0; margin-left:-8px; border-bottom:none !important; }
.phase-expand-btn { width:100%; margin-top:4px; }
.phase-tasks.expanded li.phase-task-overflow { display:flex; }
.phase-tasks.expanded .phase-expand-li { display:none; }
.task-snippet { background:#0a0e17; border:1px solid var(--border); border-radius:4px; padding:2px 6px; font-family:'SF Mono',Monaco,monospace; font-size:0.72rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px; display:inline-block; vertical-align:middle; }
.task-meta { font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; padding:1px 6px; border-radius:3px; background:rgba(245,158,11,0.15); color:var(--warn); margin-right:6px; vertical-align:middle; }
.task-loc { font-size:0.7rem; color:var(--text-dim); margin-left:6px; vertical-align:middle; }
.phase-impact { font-size:0.8rem; color:var(--warn); margin-bottom:8px; padding:8px 12px; background:rgba(245,158,11,0.08); border-radius:6px; border-left:3px solid var(--warn); }
.phase-fix { font-size:0.8rem; color:var(--info); margin-bottom:8px; padding:8px 12px; background:rgba(96,165,250,0.08); border-radius:6px; border-left:3px solid var(--info); }
.overall-health { display:flex; align-items:center; gap:16px; padding:16px; background:linear-gradient(135deg,rgba(37,99,235,0.1),rgba(16,185,129,0.08)); border:1px solid var(--border-accent); border-radius:12px; margin-bottom:24px; }
.health-ring { width:80px; height:80px; position:relative; flex-shrink:0; }
.health-ring svg { transform:rotate(-90deg); width:100%; height:100%; }
.health-ring-bg { fill:none; stroke:var(--border); stroke-width:6; }
.health-ring-fill { fill:none; stroke:var(--accent); stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset 1s ease; }
.health-ring-text { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:1.2rem; font-weight:700; }
.health-details { flex:1; }
.health-title { font-size:1rem; font-weight:600; margin-bottom:4px; }
.health-subtitle { color:var(--text-muted); font-size:0.85rem; }
.health-eta { font-size:0.8rem; color:var(--text-dim); margin-top:8px; }
.findings-banner { display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; margin-bottom:24px; }
.finding-chip { display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px; font-size:0.8rem; font-weight:500; }
.finding-chip.critical { background:rgba(239,68,68,0.12); color:var(--error); border:1px solid rgba(239,68,68,0.25); }
.finding-chip.high { background:rgba(245,158,11,0.12); color:var(--warn); border:1px solid rgba(245,158,11,0.25); }
.finding-chip.medium { background:rgba(96,165,250,0.12); color:var(--info); border:1px solid rgba(96,165,250,0.25); }
.finding-chip.low { background:rgba(16,185,129,0.12); color:var(--success); border:1px solid rgba(16,185,129,0.25); }
.timeline-phase.blocked::before { background:var(--error); border-color:var(--error); animation:none; }
.timeline-phase.blocked .phase-card { border-color:rgba(239,68,68,0.3); }
.dep-line { display:flex; align-items:center; gap:6px; font-size:0.7rem; color:var(--text-dim); margin-bottom:8px; padding-left:4px; }
.dep-line .dep-arrow { color:var(--accent); font-weight:700; }
.search-bar { width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:8px; background:var(--bg-card); color:var(--text); font-family:var(--font); font-size:0.85rem; margin-bottom:12px; }
.search-bar:focus { outline:none; border-color:var(--accent); }

/* Sticky elements */
.action-bar.sticky { position:sticky; top:56px; z-index:90; background:var(--surface-2); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-color:var(--glass-border); box-shadow:var(--shadow-sm); margin-bottom:16px; }
.roadmap-section .search-bar.sticky { position:sticky; top:56px; z-index:80; background:var(--surface-2); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); margin-bottom:8px; }

/* Collapsible panels */
.collapse-toggle { display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; padding:4px 0; }
.collapse-toggle .collapse-chevron { font-size:0.8rem; color:var(--text-dim); transition:transform 0.25s ease; display:inline-block; }
.collapse-toggle[aria-expanded="true"] .collapse-chevron { transform:rotate(180deg); }
.collapsible-panel { overflow:hidden; transition:max-height 0.35s ease,opacity 0.25s ease; }
.collapsible-panel.collapsed { max-height:0; opacity:0; }
.collapsible-panel:not(.collapsed) { max-height:2000px; opacity:1; }

/* Mobile floating action button */
.fab-container { position:fixed; bottom:24px; right:24px; display:none; flex-direction:column; gap:12px; z-index:200; }
.fab { width:56px; height:56px; border-radius:50%; background:var(--accent); color:#fff; border:none; box-shadow:var(--shadow-md); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.4rem; transition:transform 0.2s,background 0.2s; }
.fab:hover { transform:scale(1.1); background:var(--primary-hover); }
.fab-secondary { background:var(--bg-card); border:1px solid var(--border); color:var(--text); font-size:1.1rem; }
@media(max-width:700px){ .fab-container{ display:flex; } .action-bar{ display:none; } }
.search-hits { font-size:0.7rem; color:var(--text-dim); margin-bottom:8px; }
.phase-actions { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.phase-action-btn { padding:4px 10px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:0.7rem; font-weight:500; cursor:pointer; transition:all 0.2s; font-family:var(--font); }
.phase-action-btn:hover { border-color:var(--accent); color:var(--accent); }
.phase-action-btn.done:hover { border-color:var(--success); color:var(--success); }
.timeline-phase.depends-on-critical { border-left:3px solid rgba(239,68,68,0.4); }
.timeline-phase.depends-on-critical .phase-card { border-left:none; }
.timeline-phase.completed { border-left:3px solid var(--success); }
.timeline-phase.pending { border-left:3px solid rgba(245,158,11,0.5); }
.timeline-phase.in-progress { border-left:3px solid var(--info); }
.phase-status-badge { font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:2px 8px; border-radius:4px; margin-left:8px; flex-shrink:0; }
.phase-status-badge.complete { background:rgba(16,185,129,0.15); color:var(--success); border:1px solid rgba(16,185,129,0.3); }
.phase-status-badge.incomplete { background:rgba(245,158,11,0.15); color:var(--warn); border:1px solid rgba(245,158,11,0.3); }
.phase-status-badge.in-progress { background:rgba(96,165,250,0.15); color:var(--info); border:1px solid rgba(96,165,250,0.3); }
.phase-status-badge.blocked { background:rgba(239,68,68,0.15); color:var(--error); border:1px solid rgba(239,68,68,0.3); }
/* Structured task visuals */
.task-structured { display:flex; flex-direction:column; gap:4px; }
.task-type-badge { font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:2px 7px; border-radius:4px; display:inline-block; margin-right:6px; vertical-align:middle; }
.task-desc { color:var(--text); font-size:0.82rem; line-height:1.4; }
.task-loc-chip { font-size:0.7rem; color:var(--text-dim); background:rgba(100,116,139,0.1); padding:2px 8px; border-radius:4px; border:1px solid var(--border); display:inline-flex; align-items:center; gap:4px; vertical-align:middle; }
.task-code-block { display:flex; align-items:flex-start; gap:6px; background:#0a0e17; border:1px solid var(--border); border-radius:4px; padding:4px 8px; margin-top:2px; position:relative; }
.task-code-block code { font-family:'SF Mono',Monaco,monospace; font-size:0.72rem; color:var(--info); white-space:pre-wrap; word-break:break-word; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; flex:1; }
.task-code-block.expanded code { -webkit-line-clamp:unset; line-clamp:unset; display:block; }

/* Task completion micro-bounce */
@keyframes taskCheckBounce { 0%{transform:scale(1);} 40%{transform:scale(1.25);} 70%{transform:scale(0.95);} 100%{transform:scale(1);} }
.task-check.checked { animation:taskCheckBounce 0.3s ease; }

/* Confetti burst for 100% phase completion */
@keyframes confettiBurst { 0%{transform:scale(0);opacity:1;} 100%{transform:scale(1.5);opacity:0;} }
.confetti-piece { position:absolute; width:6px; height:6px; border-radius:2px; animation:confettiBurst 0.8s ease-out forwards; pointer-events:none; z-index:50; }

/* Phase expand/collapse smooth transition */
.phase-card .phase-tasks,.phase-card .phase-progress { overflow:hidden; transition:max-height 0.35s ease,opacity 0.25s ease,padding 0.25s ease; }
.phase-card.collapsed .phase-tasks,.phase-card.collapsed .phase-progress { max-height:0; opacity:0; padding-top:0; padding-bottom:0; }
.phase-card:not(.collapsed) .phase-tasks,.phase-card:not(.collapsed) .phase-progress { max-height:2000px; opacity:1; }
.task-code-expand { font-size:0.65rem; color:var(--accent); cursor:pointer; padding:2px 6px; border-radius:3px; background:rgba(37,99,235,0.1); border:1px solid rgba(37,99,235,0.2); flex-shrink:0; align-self:center; transition:all 0.15s; }
.task-code-expand:hover { background:rgba(37,99,235,0.2); }
.task-code-copy { font-size:0.7rem; color:var(--text-dim); cursor:pointer; padding:2px 4px; border-radius:3px; transition:color 0.15s; flex-shrink:0; }
.task-code-copy:hover { color:var(--accent); }
.phase-task-types { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.task-type-count { font-size:0.7rem; font-weight:600; padding:2px 8px; border-radius:12px; background:rgba(37,99,235,0.08); color:var(--text-muted); border:1px solid var(--border); }
.task-type-count.review { background:rgba(96,165,250,0.12); color:var(--info); border-color:rgba(96,165,250,0.3); }
.task-type-count.fix { background:rgba(16,185,129,0.12); color:var(--success); border-color:rgba(16,185,129,0.3); }
.task-type-count.audit { background:rgba(245,158,11,0.12); color:var(--warn); border-color:rgba(245,158,11,0.3); }
.task-type-count.verify { background:rgba(139,92,246,0.12); color:#A78BFA; border-color:rgba(139,92,246,0.3); }
.task-type-count.doc { background:rgba(6,182,212,0.12); color:#22D3EE; border-color:rgba(6,182,212,0.3); }
.issue-item { display:flex; flex-direction:column; gap:6px; padding:12px; border-bottom:1px solid rgba(30,41,59,0.5); transition:background 0.15s; }
.issue-item:last-child { border-bottom:none; }
.issue-item:hover { background:rgba(37,99,235,0.04); border-radius:6px; }
.issue-header { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.issue-severity { font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:2px 8px; border-radius:4px; flex-shrink:0; }
.issue-severity.critical { background:rgba(239,68,68,0.15); color:var(--error); border:1px solid rgba(239,68,68,0.3); }
.issue-severity.high { background:rgba(245,158,11,0.15); color:var(--warn); border:1px solid rgba(245,158,11,0.3); }
.issue-severity.medium { background:rgba(96,165,250,0.15); color:var(--info); border:1px solid rgba(96,165,250,0.3); }
.issue-severity.low { background:rgba(16,185,129,0.15); color:var(--success); border:1px solid rgba(16,185,129,0.3); }
.issue-type { font-size:0.82rem; font-weight:600; color:var(--text); }
.issue-count { font-size:0.7rem; color:var(--text-dim); background:var(--bg-hover); padding:2px 8px; border-radius:10px; margin-left:auto; }
.issue-files { font-size:0.75rem; color:var(--text-muted); line-height:1.5; }
.issue-files code { font-family:'SF Mono',Monaco,monospace; background:#0a0e17; padding:2px 6px; border-radius:4px; font-size:0.72rem; }
.issue-impact { font-size:0.78rem; color:var(--warn); padding:6px 10px; background:rgba(245,158,11,0.06); border-radius:6px; border-left:3px solid var(--warn); }
.issue-fix { font-size:0.78rem; color:var(--info); padding:6px 10px; background:rgba(96,165,250,0.06); border-radius:6px; border-left:3px solid var(--info); }
.issue-empty { text-align:center; padding:32px; color:var(--text-dim); font-size:0.85rem; }
@media(max-width:700px){
  .hero h1{ font-size:clamp(1.25rem,5vw,1.5rem); }
  .scorecard-grid{ grid-template-columns:1fr 1fr; }
  .timeline{ padding-left:24px; }
  .timeline-phase::before{ left:-20px; width:10px; height:10px; }
  .timeline-phase:hover{ transform:none; }
  .overall-health{ flex-direction:column; text-align:center; }
  .health-ring{ margin:0 auto; }
  .action-bar{ gap:8px; padding:12px; }
  .btn{ padding:8px 14px; font-size:0.8rem; }
  .phase-card{ padding:16px; }
  .sprint-tracker{ grid-template-columns:repeat(2,1fr); }
  .findings-banner{ justify-content:center; }
}
@media(max-width:480px){
  .container{ padding:0 16px 40px; }
  .nav,.top-nav{ padding:10px 12px; margin:0 -16px 16px; }
  .nav-links a{ padding:0.3rem 0.4rem; font-size:0.8rem; }
  .scorecard-grid{ grid-template-columns:1fr; }
  .phase-header{ flex-direction:column; gap:6px; }
  .phase-meta{ gap:6px; }
  .phase-actions{ gap:6px; }
  .sprint-tracker{ grid-template-columns:1fr; }
  .toast{ bottom:12px; right:12px; left:12px; }
  .json-preview pre{ font-size:0.7rem; }
}
@media(min-width:1200px){
  .container{ max-width:1200px; }
  .scorecard-grid{ grid-template-columns:repeat(4,1fr); }
  .sprint-tracker{ grid-template-columns:repeat(4,1fr); }
}
    @keyframes phaseFlash { 0%{box-shadow:0 0 0 0 rgba(16,185,129,0.6);} 70%{box-shadow:0 0 0 10px rgba(16,185,129,0);} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0);} }
    .phase-complete-flash { animation:phaseFlash 0.8s ease-out; }
    .phase-tasks li:focus { outline:2px solid var(--accent); outline-offset:-2px; border-radius:4px; }
    .phase-tasks li:focus .task-check { border-color:var(--accent); }

    /* --- Visual Patch Diff Canvas --- */
    .patch-diff-wrap { display:flex; gap:8px; margin-top:8px; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--bg-card); font-family:'SF Mono',Monaco,monospace; font-size:0.72rem; }
    .patch-diff-col { flex:1; min-width:0; }
    .patch-diff-header { padding:6px 10px; background:rgba(148,163,184,0.08); border-bottom:1px solid var(--border); font-weight:700; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted); }
    .patch-diff-line { padding:3px 10px; white-space:pre-wrap; word-break:break-word; line-height:1.5; border-bottom:1px solid rgba(148,163,184,0.04); }
    .patch-diff-line.del { background:rgba(239,68,68,0.08); color:#f87171; }
    .patch-diff-line.add { background:rgba(34,197,94,0.08); color:#4ade80; }
    .patch-diff-line.ctx { color:var(--text-dim); }
    .patch-diff-line .diff-gutter { display:inline-block; width:20px; text-align:right; margin-right:8px; opacity:0.4; font-size:0.65rem; }

    /* --- Sprint Velocity Tracker --- */
    .sprint-tracker { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:16px; }
    .sprint-metric { background:var(--surface-1); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:12px 14px; text-align:center; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:var(--transition-base); }
.sprint-metric:hover { box-shadow:var(--shadow-sm); transform:translateY(-2px); }
    .sprint-metric-value { font-size:1.15rem; font-weight:800; color:var(--text-main); }
    .sprint-metric-label { font-size:0.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; margin-top:4px; }
    .sprint-metric-delta { font-size:0.72rem; margin-top:4px; font-weight:600; }
    .sprint-metric-delta.positive { color:var(--success); }
    .sprint-metric-delta.negative { color:var(--error); }
    .sprint-effort-bar { display:flex; align-items:center; gap:8px; margin-top:6px; }
    .sprint-effort-bar .bar-track { flex:1; height:5px; background:var(--bg-input); border-radius:3px; overflow:hidden; }
    .sprint-effort-bar .bar-fill { height:100%; border-radius:3px; transition:width .4s ease; }

    /* --- Print page-break guards --- */
    @media print {
      .phase-card, .task-detail-card, .timeline-phase { page-break-inside: avoid; break-inside: avoid; }
      .issue-item { page-break-inside: avoid; break-inside: avoid; }
      pre, code, .task-code-block, .patch-diff-wrap { page-break-inside: auto; }
      .filter-bar, .search-bar, .phase-action-btn, .task-timer, .btn { display: none !important; }
    }

    /* Sign-in Modal (copied from dashboard.css) */
    .signin-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; z-index:1000; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
    .signin-overlay.active { display:flex; }
    .signin-panel { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; max-width:400px; width:100%; padding:28px; box-shadow:0 24px 64px rgba(0,0,0,0.5); position:relative; }
    .signin-panel .signin-close { position:absolute; top:12px; right:16px; background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:1.4rem; line-height:1; }
    .signin-panel h3 { margin:0 0 6px; color:var(--text-main); font-size:1.1rem; }
    .signin-panel .signin-sub { color:var(--text-muted); font-size:0.85rem; margin-bottom:18px; }
    .signin-panel .signin-field { margin-bottom:14px; }
    .signin-panel .signin-field label { display:block; font-size:0.78rem; color:var(--text-muted); margin-bottom:4px; }
    .signin-panel .signin-field input { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg-input); color:var(--text-main); font-family:inherit; font-size:0.9rem; outline:none; transition:border-color 0.2s, box-shadow 0.2s; }
    .signin-panel .signin-field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(99,102,241,0.15); }
    .signin-panel .signin-field input::placeholder { color:var(--text-muted); }
    .signin-panel .signin-btn { width:100%; padding:12px; border:none; border-radius:10px; background:linear-gradient(135deg, var(--accent), var(--primary-hover)); color:#fff; font-size:0.9rem; font-weight:600; cursor:pointer; transition:all 0.2s; }
    .signin-panel .signin-btn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 6px 20px rgba(99,102,241,0.4); }
    .signin-panel .signin-btn:disabled { opacity:0.6; cursor:not-allowed; }
    .signin-panel .signin-error { color:var(--error); font-size:0.82rem; margin-top:10px; display:none; }
    .signin-panel .signin-footer { margin-top:14px; text-align:center; font-size:0.8rem; color:var(--text-muted); }
    .signin-form { display: none; }
    .signin-form.active { display: block; }
    .signin-header { text-align:center; margin-bottom:18px; }
    .signin-icon { font-size:2rem; display:block; margin-bottom:8px; }
    .signin-title { margin:0 0 6px; color:var(--text-main); font-size:1.25rem; font-weight:700; }
    .signin-subtabs { display:flex; gap:0; margin-bottom:18px; background:var(--bg-input); border:1px solid var(--border); border-radius:10px; padding:4px; }
    .signin-subtab { flex:1; padding:8px 0; border:none; border-radius:8px; background:transparent; color:var(--text-muted); font-size:0.85rem; font-weight:500; cursor:pointer; transition:all 0.2s; font-family:inherit; }
    .signin-subtab.active { background:var(--bg-card); color:var(--text-main); box-shadow:0 2px 8px rgba(0,0,0,0.2); }
    .signin-divider { text-align:center; margin:16px 0; font-size:0.8rem; color:var(--text-muted); position:relative; }
    .signin-divider span { background:var(--bg-card); padding:0 12px; position:relative; z-index:1; }
    .signin-divider::before { content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--border); z-index:0; }
    .signin-note { margin:14px 0 0; font-size:0.8rem; color:var(--text-muted); text-align:center; }
    .signin-footer-sep { color:var(--text-muted); margin:0 6px; }

    /* Light theme overrides */
    html[data-theme="light"] {
      --bg: #f8fafc;
      --bg-card: #ffffff;
      --bg-hover: #f1f5f9;
      --border: #e2e8f0;
      --border-accent: rgba(37,99,235,0.15);
      --text: #0f172a;
      --text-muted: #64748b;
      --text-dim: #94a3b8;
      --accent: #2563EB;
      --accent-glow: rgba(37,99,235,0.08);
      --success: #10B981;
      --warn: #d97706;
      --error: #EF4444;
      --info: #3B82F6;
      --text-main: var(--text);
      --bg-input: var(--bg-hover);
      --primary-hover: #1d4ed8;
      --surface-1: rgba(255,255,255,0.55);
      --surface-2: rgba(241,245,249,0.70);
      --surface-3: rgba(255,255,255,0.85);
      --glass-border: rgba(0,0,0,0.06);
      --glass-highlight: rgba(0,0,0,0.03);
      --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
      --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
      --shadow-glow: 0 0 30px rgba(37,99,235,0.08);
    }
    html[data-theme="light"] .nav,
    html[data-theme="light"] .top-nav {
      background: rgba(248,250,252,0.85);
    }