kussssh/IPO-Analyzer
0
1/* ═══════════════════════════════════════════════════2 IPO Analyzer — Premium Dark Theme v2.03 with Document Version Timeline & Module Grid4 ═══════════════════════════════════════════════════ */5 6:root {7 --bg-primary: #06080f;8 --bg-secondary: #0d1117;9 --bg-card: #151b28;10 --bg-card-hover: #1c2435;11 --bg-glass: rgba(21, 27, 40, 0.8);12 --border: rgba(255, 255, 255, 0.06);13 --border-hover: rgba(255, 255, 255, 0.12);14 --border-accent: rgba(99, 102, 241, 0.3);15 16 --text-primary: #f1f5f9;17 --text-secondary: #94a3b8;18 --text-muted: #64748b;19 20 --accent: #6366f1;21 --accent-light: #818cf8;22 --accent-glow: rgba(99, 102, 241, 0.25);23 --accent-deep: #4f46e5;24 25 --blue: #185FA5;26 --blue-light: #3b82f6;27 --blue-bg: rgba(24, 95, 165, 0.15);28 29 --green: #10b981;30 --green-light: #34d399;31 --green-bg: rgba(16, 185, 129, 0.1);32 --green-border: rgba(16, 185, 129, 0.3);33 --green-glow: rgba(16, 185, 129, 0.25);34 35 --yellow: #f59e0b;36 --yellow-bg: rgba(245, 158, 11, 0.1);37 --yellow-border: rgba(245, 158, 11, 0.3);38 39 --amber: #EF9F27;40 --amber-bg: rgba(239, 159, 39, 0.12);41 --amber-border: rgba(239, 159, 39, 0.3);42 43 --red: #ef4444;44 --red-bg: rgba(239, 68, 68, 0.1);45 --red-border: rgba(239, 68, 68, 0.3);46 47 --cyan: #06b6d4;48 --cyan-bg: rgba(6, 182, 212, 0.1);49 50 --radius: 12px;51 --radius-sm: 8px;52 --radius-lg: 16px;53 --radius-xl: 20px;54 55 --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);56 --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);57 --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.15);58}59 60* { margin: 0; padding: 0; box-sizing: border-box; }61 62body {63 font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;64 background: var(--bg-primary);65 color: var(--text-primary);66 line-height: 1.6;67 min-height: 100vh;68 overflow-x: hidden;69}70 71/* ── Animated Background ── */72body::before {73 content: '';74 position: fixed;75 top: -50%; left: -50%;76 width: 200%; height: 200%;77 background: radial-gradient(ellipse at 25% 15%, rgba(99, 102, 241, 0.07) 0%, transparent 50%),78 radial-gradient(ellipse at 75% 85%, rgba(16, 185, 129, 0.04) 0%, transparent 50%),79 radial-gradient(ellipse at 50% 50%, rgba(6, 182, 212, 0.03) 0%, transparent 40%);80 z-index: -1;81 animation: bgShift 25s ease-in-out infinite alternate;82}83 84@keyframes bgShift {85 0% { transform: translate(0, 0); }86 100% { transform: translate(-5%, -3%); }87}88 89/* ═══════════════════════════════════════90 HEADER91 ═══════════════════════════════════════ */92 93.header {94 position: sticky; top: 0; z-index: 100;95 background: rgba(6, 8, 15, 0.88);96 backdrop-filter: blur(24px) saturate(150%);97 border-bottom: 1px solid var(--border);98 padding: 0 24px;99}100 101.header-inner {102 max-width: 1280px; margin: 0 auto;103 display: flex; align-items: center; justify-content: space-between; height: 64px;104}105 106.logo { display: flex; align-items: center; gap: 10px; }107.logo-icon { font-size: 24px; }108.logo-text { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; }109.logo-badge {110 font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px;111 background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: white; letter-spacing: 1px;112}113 114.nav { display: flex; gap: 4px; }115 116.nav-btn {117 background: transparent; border: none; color: var(--text-secondary);118 font-size: 13px; font-weight: 500; padding: 8px 16px;119 border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s; font-family: inherit;120}121.nav-btn:hover { background: var(--bg-card); color: var(--text-primary); }122.nav-btn.active { background: var(--accent); color: white; box-shadow: 0 2px 12px var(--accent-glow); }123 124/* ═══════════════════════════════════════125 SECTIONS & HERO126 ═══════════════════════════════════════ */127 128.section { max-width: 1280px; margin: 0 auto; padding: 32px 24px; }129.section-title { font-size: 24px; font-weight: 700; margin-bottom: 24px; }130 131.hero { text-align: center; padding: 40px 0 28px; }132.hero-title {133 font-size: 44px; font-weight: 900; letter-spacing: -1.5px;134 background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-light) 50%, var(--cyan) 100%);135 -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;136 margin-bottom: 12px; line-height: 1.1;137}138.hero-subtitle { font-size: 16px; color: var(--text-secondary); max-width: 640px; margin: 0 auto; line-height: 1.7; }139 140/* ═══════════════════════════════════════141 IPO TRACKER — Company Cards142 ═══════════════════════════════════════ */143 144.tracker-controls { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }145 146.tracker-search-panel {147 background: var(--bg-card);148 border: 1px solid var(--border);149 border-radius: var(--radius-lg);150 padding: 18px;151 margin-bottom: 22px;152}153 154.tracker-search-row {155 display: flex;156 flex-direction: column;157 gap: 8px;158 margin-bottom: 18px;159}160 161.tracker-search-label {162 font-size: 12px;163 font-weight: 600;164 color: var(--text-secondary);165 text-transform: uppercase;166 letter-spacing: 0.08em;167}168 169.tracker-search-input {170 width: 100%;171 background: var(--bg-secondary);172 border: 1px solid var(--border);173 border-radius: var(--radius);174 padding: 13px 14px;175 color: var(--text-primary);176 font-size: 14px;177 font-family: inherit;178 outline: none;179 transition: border-color 0.2s, box-shadow 0.2s;180}181 182.tracker-search-input:focus {183 border-color: var(--accent-light);184 box-shadow: 0 0 0 3px var(--accent-glow);185}186 187.tracker-latest-grid {188 display: grid;189 grid-template-columns: repeat(3, minmax(0, 1fr));190 gap: 12px;191}192 193.tracker-latest-card {194 background: rgba(255, 255, 255, 0.02);195 border: 1px solid var(--border);196 border-radius: var(--radius);197 padding: 14px;198}199 200.tracker-latest-title {201 font-size: 12px;202 font-weight: 700;203 color: var(--text-primary);204 margin-bottom: 10px;205}206 207.tracker-latest-list {208 display: flex;209 flex-direction: column;210 gap: 8px;211}212 213.tracker-latest-item {214 width: 100%;215 text-align: left;216 background: var(--bg-secondary);217 border: 1px solid var(--border);218 border-radius: var(--radius-sm);219 padding: 10px 11px;220 cursor: pointer;221 color: inherit;222 transition: border-color 0.2s, transform 0.2s, background 0.2s;223}224 225.tracker-latest-item:hover {226 border-color: var(--accent-light);227 background: rgba(99, 102, 241, 0.08);228 transform: translateY(-1px);229}230 231.tracker-latest-date {232 display: block;233 font-size: 11px;234 color: var(--cyan);235 margin-bottom: 2px;236}237 238.tracker-latest-name {239 display: block;240 font-size: 12px;241 color: var(--text-secondary);242 line-height: 1.5;243}244 245.tracker-latest-empty {246 font-size: 12px;247 color: var(--text-muted);248}249 250.refresh-btn {251 background: linear-gradient(135deg, var(--accent), var(--accent-deep));252 border: none; color: white; padding: 10px 24px; border-radius: var(--radius-sm);253 cursor: pointer; font-size: 14px; font-weight: 600; font-family: inherit;254 transition: all 0.3s; display: flex; align-items: center; gap: 8px; white-space: nowrap;255}256.refresh-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-glow); }257.refresh-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }258.refresh-btn:disabled .refresh-icon { animation: spin 1s linear infinite; }259 260.tracker-stats { font-size: 13px; color: var(--text-muted); display: flex; gap: 16px; }261.tracker-stat { display: flex; align-items: center; gap: 4px; }262.tracker-stat .dot { width: 8px; height: 8px; border-radius: 50%; }263 264.tracker-filters { display: flex; gap: 4px; margin-left: auto; }265.filter-btn {266 background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted);267 padding: 6px 14px; border-radius: 20px; cursor: pointer; font-size: 12px;268 font-weight: 500; font-family: inherit; transition: all 0.2s;269}270.filter-btn:hover { border-color: var(--border-hover); color: var(--text-secondary); }271.filter-btn.active { background: var(--accent); border-color: var(--accent); color: white; }272 273.tracker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }274 275.tracker-pagination {276 margin-top: 18px;277 display: flex;278 align-items: center;279 justify-content: space-between;280 gap: 16px;281 flex-wrap: wrap;282}283 284.tracker-pagination-meta {285 font-size: 12px;286 color: var(--text-secondary);287}288 289.tracker-pagination-controls {290 display: flex;291 align-items: center;292 gap: 8px;293 flex-wrap: wrap;294}295 296.tracker-page-btn,297.tracker-page-nav {298 background: var(--bg-card);299 border: 1px solid var(--border);300 color: var(--text-secondary);301 min-width: 38px;302 padding: 8px 12px;303 border-radius: var(--radius-sm);304 cursor: pointer;305 font-size: 12px;306 font-weight: 600;307 font-family: inherit;308 transition: all 0.2s;309}310 311.tracker-page-btn:hover,312.tracker-page-nav:hover {313 border-color: var(--accent-light);314 color: var(--text-primary);315}316 317.tracker-page-btn.active {318 background: var(--accent);319 border-color: var(--accent);320 color: #fff;321}322 323.tracker-page-nav:disabled {324 opacity: 0.45;325 cursor: not-allowed;326}327 328.tracker-page-ellipsis {329 color: var(--text-muted);330 font-size: 13px;331 padding: 0 2px;332}333 334@media (max-width: 960px) {335 .tracker-latest-grid {336 grid-template-columns: 1fr;337 }338 339 .tracker-pagination {340 flex-direction: column;341 align-items: stretch;342 }343 344 .tracker-pagination-controls {345 justify-content: center;346 }347}348 349/* ── Company Card ── */350.company-card {351 background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);352 padding: 24px; transition: all 0.3s ease; position: relative; overflow: hidden;353 animation: cardSlideIn 0.4s ease-out both;354}355.company-card::before {356 content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;357 background: linear-gradient(90deg, var(--accent), var(--cyan)); opacity: 0; transition: opacity 0.3s;358}359.company-card:hover { border-color: var(--border-accent); transform: translateY(-3px); box-shadow: var(--shadow-glow); }360.company-card:hover::before { opacity: 1; }361 362@keyframes cardSlideIn {363 from { opacity: 0; transform: translateY(16px); }364 to { opacity: 1; transform: translateY(0); }365}366 367.card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }368.card-company-name { font-size: 16px; font-weight: 700; color: var(--text-primary); line-height: 1.3; flex: 1; margin-right: 12px; }369.card-date { font-size: 11px; color: var(--text-muted); background: var(--bg-secondary); padding: 3px 10px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }370 371/* Timeline inside card */372.card-timeline { display: flex; align-items: center; gap: 0; margin-bottom: 16px; padding: 8px 0; }373.card-timeline-step { display: flex; align-items: center; gap: 6px; }374.card-timeline-node {375 width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;376 font-size: 10px; font-weight: 600; border: 2px solid var(--border);377 background: var(--bg-secondary); color: var(--text-muted); transition: all 0.3s;378}379.card-timeline-node.available { border-color: var(--green-border); background: var(--green-bg); color: var(--green); }380.card-timeline-node.locked { opacity: 0.4; }381 382.card-timeline-label { font-size: 11px; color: var(--text-muted); font-weight: 500; }383.card-timeline-label.available { color: var(--text-secondary); }384 385.card-timeline-line { flex: 1; height: 2px; background: var(--border); margin: 0 6px; }386.card-timeline-line.filled { background: var(--green); }387 388/* Analyse Button */389.card-actions { margin-top: 4px; }390.card-subtle {391 font-size: 12px;392 color: var(--text-muted);393 margin-bottom: 14px;394}395.analyse-btn {396 width: 100%; background: linear-gradient(135deg, var(--accent), var(--accent-deep));397 border: none; color: white; padding: 10px 16px; border-radius: var(--radius-sm);398 cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit;399 transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 6px;400}401.analyse-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px var(--accent-glow); }402 403/* ═══════════════════════════════════════404 ANALYSIS PAGE (after clicking Analyse)405 ═══════════════════════════════════════ */406 407.analysis-page { max-width: 1100px; }408 409/* Top Bar */410.analysis-topbar {411 background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);412 padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0;413}414.analysis-company-name { font-size: 18px; font-weight: 600; color: var(--text-primary); }415.analysis-company-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }416.analysis-stage-badge {417 font-size: 11px; padding: 4px 12px; border-radius: 20px; font-weight: 600;418 background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border);419}420 421/* ── Document Version Slider ── */422.ver-bar {423 background: var(--bg-card); border: 1px solid var(--border); border-top: none;424 padding: 14px 20px; display: flex; align-items: center; gap: 16px;425}426.ver-label { font-size: 12px; color: var(--text-secondary); white-space: nowrap; font-weight: 500; }427.ver-track-wrap { flex: 1; display: flex; flex-direction: column; }428.ver-track { flex: 1; position: relative; height: 28px; display: flex; align-items: center; }429.ver-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--border); border-radius: 1px; }430.ver-fill { position: absolute; left: 0; height: 2px; border-radius: 1px; transition: width 0.4s ease; background: var(--blue); }431.ver-dots { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; }432.ver-dot {433 width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border);434 background: var(--bg-secondary); display: flex; align-items: center; justify-content: center;435 cursor: pointer; transition: all 0.3s; font-size: 11px; font-weight: 600; color: var(--text-muted);436}437.ver-dot.active { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 0 12px rgba(24, 95, 165, 0.4); }438.ver-dot.past { border-color: var(--blue); color: var(--blue); }439.ver-dot.locked { opacity: 0.35; cursor: not-allowed; }440.ver-dot:not(.locked):hover { transform: scale(1.1); }441.ver-names { display: flex; justify-content: space-between; margin-top: 6px; }442.ver-name { font-size: 10px; color: var(--text-muted); text-align: center; width: 60px; font-weight: 500; }443.ver-name.active { color: var(--blue-light); font-weight: 600; }444.ver-name.locked { opacity: 0.35; }445 446/* ── Diff Banner ── */447.diff-banner {448 background: var(--amber-bg); border: 1px solid var(--amber-border); border-top: none;449 padding: 8px 20px; display: flex; align-items: center; gap: 10px; border-radius: 0 0 var(--radius) var(--radius);450}451.diff-icon {452 width: 20px; height: 20px; border-radius: 50%; background: var(--amber);453 display: flex; align-items: center; justify-content: center; color: #fff;454 font-size: 11px; font-weight: 700; flex-shrink: 0;455}456.diff-text { font-size: 12px; color: var(--yellow); }457.diff-text strong { color: var(--text-primary); }458.diff-chips { display: flex; gap: 6px; margin-left: auto; }459.chip { font-size: 11px; padding: 2px 10px; border-radius: 20px; font-weight: 500; }460.chip-red { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }461.chip-amber { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }462.chip-green { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }463 464/* ── 8-Module Grid (2 columns) ── */465.modules-grid {466 display: grid; grid-template-columns: 1fr 1fr; gap: 1px;467 background: var(--border); border-radius: var(--radius); overflow: hidden;468 margin-top: 20px;469}470.mod-cell {471 background: var(--bg-card); padding: 18px 20px; cursor: pointer;472 position: relative; transition: background 0.2s;473 overflow: visible;474}475.mod-cell:hover { background: var(--bg-card-hover); }476.mod-cell.changed { border-left: 3px solid var(--amber); }477.mod-cell.flagged { border-left: 3px solid var(--red); }478.mod-cell.is-loading { cursor: default; }479.mod-cell.is-loading:hover { background: var(--bg-card); }480.mod-cell.expanded { background: var(--bg-card-hover); }481 482.mod-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }483.mod-header-right { display: flex; align-items: center; gap: 10px; }484.mod-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }485.mod-delta { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 500; }486.mod-expand-indicator {487 color: var(--text-secondary);488 font-size: 20px;489 line-height: 1;490 width: 16px;491 text-align: center;492}493.delta-changed { background: var(--amber-bg); color: var(--amber); }494.delta-flagged { background: var(--red-bg); color: var(--red); }495.delta-clean { background: var(--green-bg); color: var(--green); }496 497.mod-preview { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }498.mod-expanded-panel {499 max-height: 0;500 overflow: hidden;501 opacity: 0;502 transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.2s ease;503}504.mod-expanded-panel.open {505 max-height: 1200px;506 opacity: 1;507 margin-top: 14px;508 padding-top: 14px;509 border-top: 1px solid var(--border);510}511.mod-detail-inner {512 padding: 0;513}514.mod-detail-heading {515 font-size: 13px;516 line-height: 1.6;517 color: var(--text-primary);518 font-weight: 600;519 margin-bottom: 14px;520}521.mod-detail-block {522 margin-top: 14px;523}524.mod-detail-title {525 font-size: 11px;526 font-weight: 700;527 letter-spacing: 0.04em;528 text-transform: uppercase;529 color: var(--cyan);530 margin-bottom: 8px;531}532.mod-detail-list {533 margin: 0;534 padding-left: 18px;535 color: var(--text-secondary);536 font-size: 12px;537 line-height: 1.6;538}539.mod-detail-text {540 color: var(--text-secondary);541 font-size: 12px;542 line-height: 1.7;543 white-space: pre-wrap;544}545.mod-detail-list li + li {546 margin-top: 6px;547}548.mini-table {549 width: 100%;550 border-collapse: collapse;551 font-size: 11px;552 color: var(--text-secondary);553 background: rgba(255,255,255,0.02);554 border-radius: 10px;555 overflow: hidden;556}557.mini-table th,558.mini-table td {559 padding: 8px 10px;560 border: 1px solid rgba(255,255,255,0.06);561 text-align: left;562 vertical-align: top;563}564.mini-table th {565 color: var(--text-primary);566 font-weight: 600;567 background: rgba(255,255,255,0.03);568}569.skeleton-pill {570 width: 64px;571 height: 18px;572 background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12), rgba(255,255,255,0.06));573 background-size: 200% 100%;574 animation: skeletonPulse 1.4s linear infinite;575}576.skeleton-line {577 height: 11px;578 border-radius: 999px;579 margin: 8px 0;580 background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12), rgba(255,255,255,0.06));581 background-size: 200% 100%;582 animation: skeletonPulse 1.4s linear infinite;583}584.skeleton-line.w-80 { width: 80%; }585.skeleton-line.w-60 { width: 60%; }586@keyframes skeletonPulse {587 0% { background-position: 200% 0; }588 100% { background-position: -200% 0; }589}590.mod-change-line {591 font-size: 11px; color: var(--amber); margin-top: 6px;592 display: flex; align-items: flex-start; gap: 6px;593}594.mod-flag-line {595 font-size: 11px; color: var(--red); margin-top: 6px;596 display: flex; align-items: flex-start; gap: 6px;597}598.dot-changed { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex-shrink: 0; margin-top: 4px; }599.dot-flagged { width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex-shrink: 0; margin-top: 4px; }600 601/* ── Bottom Bar ── */602.bottom-bar {603 background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);604 padding: 12px 20px; display: flex; align-items: center; gap: 12px; margin-top: 16px;605}606.radar-pill {607 display: flex; align-items: center; gap: 8px; background: var(--bg-secondary);608 border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; cursor: pointer;609}610.radar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 1.5s ease-in-out infinite; }611@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }612.radar-text { font-size: 12px; color: var(--text-primary); font-weight: 500; }613.action-btn {614 font-size: 12px; color: var(--text-secondary); background: none;615 border: 1px solid var(--border); border-radius: 6px; padding: 6px 14px;616 cursor: pointer; margin-left: auto; font-family: inherit; transition: all 0.2s;617}618.action-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }619.json-results {620 background: var(--bg-card);621 border: 1px solid var(--border);622 border-radius: var(--radius);623 padding: 16px;624 color: var(--text-secondary);625 font-size: 12px;626 overflow: auto;627}628 629/* ── Processing Indicator ── */630.analysis-processing { margin: 20px 0; }631 632/* ═══════════════════════════════════════633 UPLOAD ZONE & PROGRESS634 ═══════════════════════════════════════ */635 636.upload-zone {637 border: 2px dashed var(--border-hover); border-radius: var(--radius-xl);638 padding: 56px 32px; text-align: center; cursor: pointer;639 transition: all 0.3s ease; background: var(--bg-card); max-width: 600px; margin: 0 auto;640}641.upload-zone:hover, .upload-zone.dragover {642 border-color: var(--accent); background: rgba(99, 102, 241, 0.04);643 box-shadow: 0 0 40px var(--accent-glow); transform: translateY(-2px);644}645.upload-icon { font-size: 48px; margin-bottom: 16px; }646.upload-zone h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }647.upload-zone p { color: var(--text-muted); font-size: 14px; }648.upload-info { margin-top: 16px; font-size: 12px; color: var(--text-muted); }649 650.progress-container { max-width: 600px; margin: 32px auto 0; }651.progress-card {652 background: var(--bg-card); border: 1px solid var(--border);653 border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);654}655.progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }656.progress-filename { font-weight: 600; font-size: 15px; }657.progress-status { font-size: 13px; color: var(--accent-light); font-weight: 500; }658.progress-bar-outer { height: 6px; background: var(--bg-secondary); border-radius: 3px; overflow: hidden; margin-bottom: 12px; }659.progress-bar-inner {660 height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light));661 border-radius: 3px; transition: width 0.5s ease; position: relative;662}663.progress-bar-inner::after {664 content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;665 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);666 animation: shimmer 2s infinite;667}668@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }669.progress-message { font-size: 13px; color: var(--text-secondary); }670 671/* ── Back Button ── */672.back-btn {673 background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);674 padding: 8px 20px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px;675 font-family: inherit; transition: all 0.2s; margin-bottom: 20px;676}677.back-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); border-color: var(--border-hover); }678 679/* ═══════════════════════════════════════680 LEGACY RESULTS (uploaded PDFs)681 ═══════════════════════════════════════ */682 683.verdict-banner {684 background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl);685 padding: 32px; text-align: center; margin-bottom: 24px; box-shadow: var(--shadow-lg);686 position: relative; overflow: hidden;687}688.verdict-banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }689.verdict-banner.strong::before { background: linear-gradient(90deg, var(--green), var(--green-light)); }690.verdict-banner.watch::before { background: linear-gradient(90deg, var(--yellow), #fbbf24); }691.verdict-banner.avoid::before { background: linear-gradient(90deg, var(--red), #f87171); }692.verdict-company { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 12px; }693.verdict-badge { display: inline-block; padding: 8px 24px; border-radius: 24px; font-size: 14px; font-weight: 700; letter-spacing: 1px; margin-bottom: 16px; }694.verdict-badge.strong { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }695.verdict-badge.watch { background: var(--yellow-bg); color: var(--yellow); border: 1px solid var(--yellow-border); }696.verdict-badge.avoid { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }697.verdict-score { font-size: 14px; color: var(--text-secondary); }698 699.signal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 32px; }700.signal-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; align-items: center; gap: 12px; transition: all 0.2s; }701.signal-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-hover); }702.signal-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }703.signal-dot.positive { background: var(--green); box-shadow: 0 0 8px var(--green); }704.signal-dot.neutral { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }705.signal-dot.negative { background: var(--red); box-shadow: 0 0 8px var(--red); }706.signal-label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }707 708.modules-container { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; }709.module-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all 0.2s; }710.module-card:hover { border-color: var(--border-hover); }711.module-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; cursor: pointer; user-select: none; }712.module-header:hover { background: var(--bg-card-hover); }713.module-title { display: flex; align-items: center; gap: 12px; }714.module-title h3 { font-size: 16px; font-weight: 600; }715.module-signal { font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px; letter-spacing: 0.5px; }716.module-signal.POSITIVE { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }717.module-signal.NEUTRAL { background: var(--yellow-bg); color: var(--yellow); border: 1px solid var(--yellow-border); }718.module-signal.NEGATIVE { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }719.module-body { padding: 0 24px 24px; display: none; animation: fadeIn 0.3s ease; }720.module-body.open { display: block; }721@keyframes fadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }722.module-body p { color: var(--text-secondary); font-size: 14px; line-height: 1.7; margin-bottom: 12px; }723.module-body strong { color: var(--text-primary); }724 725.data-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }726.data-table th { text-align: left; padding: 10px 14px; background: var(--bg-secondary); color: var(--text-secondary); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }727.data-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-primary); font-family: 'JetBrains Mono', monospace; font-size: 13px; }728.data-table tr:hover td { background: rgba(99, 102, 241, 0.03); }729 730.tag { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; margin: 2px 4px 2px 0; }731.tag-strength { background: var(--green-bg); color: var(--green); }732.tag-risk { background: var(--red-bg); color: var(--red); }733.tag-info { background: rgba(99, 102, 241, 0.1); color: var(--accent-light); }734 735.thesis-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; margin-bottom: 32px; }736.thesis-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }737.thesis-card p { color: var(--text-secondary); font-size: 15px; line-height: 1.8; margin-bottom: 20px; }738.thesis-card ul { list-style: none; padding: 0; }739.thesis-card li { padding: 6px 0; font-size: 14px; color: var(--text-secondary); }740.thesis-card li::before { margin-right: 8px; }741.thesis-card .positives li::before { content: '✅'; }742.thesis-card .concerns li::before { content: '⚠️'; }743.thesis-section-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 16px 0 8px; text-transform: uppercase; letter-spacing: 0.5px; }744 745.reasoning { margin-top: 12px; padding: 12px 16px; background: var(--bg-secondary); border-radius: var(--radius-sm); border-left: 3px solid var(--accent); font-size: 13px; color: var(--text-secondary); font-style: italic; }746 747/* ═══════════════════════════════════════748 HISTORY749 ═══════════════════════════════════════ */750 751.history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }752.history-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; cursor: pointer; transition: all 0.2s; }753.history-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); }754.history-card h4 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }755.history-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-muted); }756 757.empty-state { text-align: center; color: var(--text-muted); padding: 48px; font-size: 15px; grid-column: 1 / -1; }758.empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.6; }759 760/* ── Spinner ── */761.tracker-loading { text-align: center; padding: 64px; color: var(--text-muted); grid-column: 1 / -1; }762.spinner { display: inline-block; width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 16px; }763@keyframes spin { to { transform: rotate(360deg); } }764.loading-text { font-size: 14px; color: var(--text-secondary); }765.loading-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }766 767/* ── Footer ── */768.footer { text-align: center; padding: 32px 24px; border-top: 1px solid var(--border); margin-top: 48px; }769.footer p { font-size: 12px; color: var(--text-muted); max-width: 700px; margin: 0 auto; }770 771/* ── Responsive ── */772@media (max-width: 768px) {773 .hero-title { font-size: 28px; }774 .tracker-grid { grid-template-columns: 1fr; }775 .modules-grid { grid-template-columns: 1fr; }776 .tracker-controls { flex-direction: column; align-items: stretch; }777 .tracker-filters { margin-left: 0; justify-content: center; }778 .nav { gap: 2px; }779 .nav-btn { font-size: 12px; padding: 6px 10px; }780 .ver-bar { flex-direction: column; align-items: flex-start; gap: 8px; }781}782 783/* ═══════════════════════════════════════784 PAGINATION CONTROLS785 ═══════════════════════════════════════ */786.pagination-controls {787 display: flex;788 flex-direction: column;789 align-items: center;790 gap: 16px;791 margin-top: 40px;792 padding-top: 24px;793 border-top: 1px solid var(--border);794}795.pagination-info {796 font-size: 13px;797 color: var(--text-muted);798}799.pagination-buttons {800 display: flex;801 gap: 6px;802 flex-wrap: wrap;803 justify-content: center;804}805.page-btn {806 background: var(--bg-card);807 border: 1px solid var(--border);808 color: var(--text-secondary);809 min-width: 36px;810 height: 36px;811 padding: 0 12px;812 border-radius: var(--radius-sm);813 cursor: pointer;814 font-size: 13px;815 font-weight: 500;816 font-family: inherit;817 display: flex;818 align-items: center;819 justify-content: center;820 transition: all 0.2s;821}822.page-btn:hover:not(:disabled) {823 border-color: var(--border-hover);824 color: var(--text-primary);825 background: var(--bg-card-hover);826}827.page-btn.active {828 background: var(--accent);829 color: white;830 border-color: var(--accent);831 box-shadow: 0 2px 12px var(--accent-glow);832}833.page-btn:disabled {834 opacity: 0.4;835 cursor: not-allowed;836}837.page-ellipsis {838 color: var(--text-muted);839 display: flex;840 align-items: center;841 padding: 0 4px;842}843