:root { --bg:#0B0F19; --bg-card:#0F1626; --bg-hover:#131B2E; --border:#1E293B; --border-accent:rgba(37,99,235,0.3); --text:#F3F4F6; --text-muted:#9CA3AF; --text-dim:#64748B; --accent:#2563EB; --accent-glow:rgba(37,99,235,0.15); --success:#10B981; --warn:#F59E0B; --error:#EF4444; --info:#60A5FA; --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; }
* { 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:32px 0 40px; }
.hero h1 { font-size:2rem; font-weight:700; margin-bottom:8px; letter-spacing:-0.02em; }
.hero p { color:var(--text-muted); font-size:0.95rem; max-width:560px; margin:0 auto; }
.hero-badge { display:inline-block; background:rgba(37,99,235,0.12); color:var(--info); font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; padding:5px 14px; border-radius:20px; margin-bottom:16px; border:1px solid var(--border-accent); }
.dropzone { border:2px dashed var(--border); border-radius:16px; padding:48px 32px; text-align:center; cursor:pointer; transition:all 0.3s ease; background:var(--bg-card); margin-bottom:32px; }
.dropzone:hover,.dropzone.dragover { border-color:var(--accent); background:var(--accent-glow); box-shadow:0 0 30px rgba(37,99,235,0.1); }
.dropzone .icon { font-size:2.5rem; margin-bottom:12px; }
.dropzone h3 { font-size:1rem; font-weight:600; margin-bottom:6px; }
.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(--bg-card); border:1px solid var(--border); border-radius:12px; padding:20px; position:relative; overflow:hidden; transition:transform 0.2s; }
.scorecard:hover { transform:translateY(-2px); border-color:var(--border-accent); }
.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; transition:width 0.8s ease; }
.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; }
.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); }
.timeline-phase.completed::before { background:var(--success); border-color:var(--success); }
.timeline-phase.in-progress::before { background:var(--warn); border-color:var(--warn); animation:pulse 2s infinite; }
@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(--bg-card); border:1px solid var(--border); border-radius:12px; padding:20px; transition:all 0.2s; }
.phase-card:hover { border-color:var(--border-accent); }
.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 ease; }
.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); opacity:0; transition:all 0.3s ease; box-shadow:0 8px 24px rgba(0,0,0,0.3); }
.toast.show { transform:translateY(0); opacity:1; }
.toast-success { background:var(--success); }
.toast-error { background:var(--error); }
.toast-info { background:var(--info); }
.summary-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:24px; }
.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); }
.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-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:1.5rem;} .scorecard-grid{grid-template-columns:1fr 1fr;} .timeline{padding-left:24px;} .timeline-phase::before{left:-20px;width:10px;height:10px;} .overall-health{flex-direction:column;text-align:center;} .health-ring{margin:0 auto;} }