Spaces:
Sleeping
Sleeping
| :root { | |
| --white: #ffffff; | |
| --navy: #0a1628; | |
| --soft-gray: #f5f7fa; | |
| --clinical-blue: #2c5cf5; | |
| --clinical-blue-dark: #1e40af; | |
| --clinical-blue-soft: #eff6ff; | |
| --success: #10b981; | |
| --warning: #f59e0b; | |
| --alert: #ef4444; | |
| --info: #3b82f6; | |
| --text-primary: #1f2937; | |
| --text-secondary: #6b7280; | |
| --text-muted: #94a3b8; | |
| --border-light: #e5e7eb; | |
| --border-medium: #d1d5db; | |
| --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); | |
| --shadow-md: 0 4px 10px rgba(15, 23, 42, 0.05); | |
| --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.08); | |
| --shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.1); | |
| --focus-ring: 0 0 0 3px rgba(44, 92, 245, 0.12); | |
| --ease-apple: cubic-bezier(0.4, 0, 0.2, 1); | |
| --page-width: 1280px; | |
| --content-width: 960px; | |
| --radius-sm: 8px; | |
| --radius-md: 12px; | |
| --radius-lg: 16px; | |
| --radius-xl: 24px; | |
| } | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| scrollbar-color: rgba(10, 22, 40, 0.28) rgba(255, 255, 255, 0.42); | |
| scrollbar-width: thin; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; | |
| color: var(--text-primary); | |
| background: | |
| radial-gradient(circle at top left, rgba(44, 92, 245, 0.08), transparent 28%), | |
| radial-gradient(circle at right 18%, rgba(16, 185, 129, 0.06), transparent 26%), | |
| linear-gradient(180deg, #fcfdff 0%, #f3f6fb 100%); | |
| min-height: 100vh; | |
| -webkit-font-smoothing: antialiased; | |
| overflow-x: hidden; | |
| } | |
| ::-webkit-scrollbar { | |
| width: 10px; | |
| height: 10px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: rgba(255, 255, 255, 0.42); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(10, 22, 40, 0.28); | |
| border: 2px solid rgba(255, 255, 255, 0.42); | |
| border-radius: 999px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(10, 22, 40, 0.4); | |
| } | |
| [hidden] { | |
| display: none ; | |
| } | |
| img { | |
| display: block; | |
| max-width: 100%; | |
| } | |
| button, | |
| input, | |
| select, | |
| a { | |
| font: inherit; | |
| } | |
| a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| .nowrap { | |
| white-space: nowrap; | |
| } | |
| button { | |
| border: 0; | |
| background: none; | |
| cursor: pointer; | |
| } | |
| button:focus-visible, | |
| input:focus-visible, | |
| select:focus-visible, | |
| a:focus-visible, | |
| .upload-zone:focus-within { | |
| outline: none; | |
| box-shadow: var(--focus-ring); | |
| } | |
| .app-shell { | |
| min-height: 100vh; | |
| padding: 0 24px 40px; | |
| } | |
| .topbar { | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| padding: 16px 0; | |
| } | |
| .topbar--solid .topbar__inner { | |
| background: rgba(255, 255, 255, 0.94); | |
| } | |
| .topbar__inner { | |
| max-width: var(--page-width); | |
| margin: 0 auto; | |
| padding: 12px 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 24px; | |
| border-radius: 20px; | |
| border: 1px solid rgba(10, 22, 40, 0.05); | |
| background: rgba(255, 255, 255, 0.8); | |
| backdrop-filter: blur(20px); | |
| box-shadow: var(--shadow-sm); | |
| transition: background-color 200ms var(--ease-apple), box-shadow 200ms var(--ease-apple); | |
| } | |
| .topbar__inner > * { | |
| min-width: 0; | |
| } | |
| .brand { | |
| display: inline-flex; | |
| align-items: center; | |
| } | |
| .brand__wordmark { | |
| height: 56px; | |
| width: auto; | |
| } | |
| .nav { | |
| display: flex; | |
| align-items: center; | |
| gap: 32px; | |
| } | |
| .nav a { | |
| position: relative; | |
| color: var(--text-secondary); | |
| font-size: 15px; | |
| font-weight: 500; | |
| transition: color 200ms var(--ease-apple); | |
| } | |
| .nav a::after { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| bottom: -8px; | |
| height: 2px; | |
| background: var(--clinical-blue); | |
| transform: scaleX(0); | |
| transition: transform 200ms var(--ease-apple); | |
| } | |
| .nav a:hover, | |
| .nav a.is-active { | |
| color: var(--navy); | |
| } | |
| .nav a:hover::after, | |
| .nav a.is-active::after { | |
| transform: scaleX(1); | |
| } | |
| .topbar__actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .icon-button, | |
| .profile-pill { | |
| min-height: 40px; | |
| border-radius: 999px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0 16px; | |
| background: var(--white); | |
| border: 1px solid var(--border-light); | |
| color: var(--text-secondary); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .mobile-nav-toggle { | |
| display: none; | |
| width: 40px; | |
| padding: 0; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .mobile-nav-toggle span { | |
| width: 18px; | |
| height: 2px; | |
| background: var(--navy); | |
| border-radius: 999px; | |
| } | |
| .profile-pill { | |
| width: 40px; | |
| padding: 0; | |
| color: var(--clinical-blue); | |
| font-weight: 700; | |
| } | |
| .mobile-nav { | |
| max-width: var(--page-width); | |
| margin: 8px auto 0; | |
| padding: 14px; | |
| display: none; | |
| flex-direction: column; | |
| gap: 12px; | |
| background: rgba(255, 255, 255, 0.92); | |
| border: 1px solid rgba(10, 22, 40, 0.06); | |
| border-radius: 16px; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .page-container { | |
| max-width: var(--page-width); | |
| margin: 0 auto; | |
| } | |
| .page-container, | |
| .route-view, | |
| .results-grid, | |
| .upload-layout, | |
| .technical-shell, | |
| .technical-content, | |
| .history-group, | |
| .footer-grid, | |
| .page-header--results, | |
| .panel-header, | |
| .history-card, | |
| .nodule-card { | |
| min-width: 0; | |
| } | |
| .route-view { | |
| animation: routeFade 320ms var(--ease-apple); | |
| } | |
| .page-entrance { | |
| animation: pageRise 420ms var(--ease-apple); | |
| } | |
| .page-entrance--delay { | |
| animation-delay: 120ms; | |
| animation-fill-mode: both; | |
| } | |
| .hero { | |
| min-height: calc(100vh - 140px); | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr); | |
| gap: 48px; | |
| align-items: center; | |
| } | |
| .eyebrow { | |
| margin: 0 0 14px; | |
| color: var(--clinical-blue); | |
| text-transform: uppercase; | |
| letter-spacing: 0.14em; | |
| font-size: 12px; | |
| font-weight: 700; | |
| } | |
| .hero h1, | |
| .page-header h1 { | |
| margin: 0; | |
| color: var(--navy); | |
| font-size: clamp(3rem, 7vw, 4.5rem); | |
| line-height: 0.98; | |
| letter-spacing: -0.03em; | |
| } | |
| .hero__subtitle { | |
| margin: 18px 0 0; | |
| font-size: 24px; | |
| line-height: 1.35; | |
| color: var(--text-secondary); | |
| } | |
| .hero__lede, | |
| .page-header p, | |
| .section-copy p, | |
| .feature-card p, | |
| .step-card p, | |
| .stat-card span, | |
| .summary-text, | |
| .history-card__file, | |
| .history-card__score, | |
| .empty-state p, | |
| .modal__body p, | |
| .settings-group label { | |
| color: var(--text-secondary); | |
| line-height: 1.7; | |
| } | |
| .hero__lede { | |
| max-width: 52ch; | |
| margin: 24px 0 0; | |
| font-size: 18px; | |
| } | |
| .hero__actions, | |
| .page-header__actions { | |
| margin-top: 40px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| } | |
| .button { | |
| min-height: 48px; | |
| padding: 0 24px; | |
| border-radius: var(--radius-sm); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| font-weight: 600; | |
| transition: | |
| background-color 200ms var(--ease-apple), | |
| color 200ms var(--ease-apple), | |
| border-color 200ms var(--ease-apple), | |
| transform 200ms var(--ease-apple), | |
| box-shadow 200ms var(--ease-apple); | |
| } | |
| .button:hover { | |
| transform: translateY(-1px); | |
| } | |
| .button--hero { | |
| min-height: 56px; | |
| padding: 0 48px; | |
| color: var(--white); | |
| background: var(--clinical-blue); | |
| box-shadow: 0 1px 2px rgba(44, 92, 245, 0.16); | |
| } | |
| .button--primary { | |
| color: var(--white); | |
| background: linear-gradient(135deg, var(--clinical-blue) 0%, #3b82f6 100%); | |
| box-shadow: 0 1px 2px rgba(44, 92, 245, 0.16); | |
| } | |
| .button--primary:hover, | |
| .button--hero:hover { | |
| background: var(--clinical-blue-dark); | |
| box-shadow: 0 4px 12px rgba(44, 92, 245, 0.22); | |
| } | |
| .button--secondary { | |
| color: var(--clinical-blue); | |
| background: rgba(255, 255, 255, 0.82); | |
| border: 1.5px solid rgba(44, 92, 245, 0.18); | |
| } | |
| .button--secondary:hover { | |
| background: var(--clinical-blue-soft); | |
| border-color: var(--clinical-blue); | |
| } | |
| .button--ghost { | |
| color: var(--text-secondary); | |
| background: transparent; | |
| } | |
| .button--ghost:hover { | |
| color: var(--text-primary); | |
| background: var(--soft-gray); | |
| } | |
| .button--danger { | |
| color: #b91c1c; | |
| } | |
| .button--danger:hover { | |
| background: rgba(239, 68, 68, 0.08); | |
| } | |
| .scroll-hint { | |
| margin-top: 40px; | |
| } | |
| .scroll-hint span { | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 999px; | |
| display: inline-block; | |
| background: rgba(44, 92, 245, 0.24); | |
| animation: pulseHint 2s infinite var(--ease-apple); | |
| } | |
| .hero__visual { | |
| position: relative; | |
| min-height: 520px; | |
| display: grid; | |
| place-items: center; | |
| } | |
| .hero__visual-glow { | |
| position: absolute; | |
| inset: 10% 14%; | |
| border-radius: 32px; | |
| background: | |
| radial-gradient(circle at center, rgba(44, 92, 245, 0.18), transparent 55%), | |
| radial-gradient(circle at 65% 40%, rgba(59, 130, 246, 0.16), transparent 32%); | |
| filter: blur(18px); | |
| } | |
| .hero__visual-card, | |
| .card, | |
| .stat-card, | |
| .step-card, | |
| .feature-card, | |
| .history-card, | |
| .sample-card { | |
| background: rgba(255, 255, 255, 0.9); | |
| border: 1px solid rgba(10, 22, 40, 0.06); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .hero__visual-card { | |
| position: relative; | |
| z-index: 1; | |
| width: min(100%, 460px); | |
| padding: 28px; | |
| border-radius: 28px; | |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(244, 248, 255, 0.92)); | |
| border: 1px solid rgba(44, 92, 245, 0.08); | |
| box-shadow: var(--shadow-xl); | |
| } | |
| .hero__visual-card img { | |
| width: 100%; | |
| } | |
| .hero__visual-copy { | |
| margin-top: 18px; | |
| } | |
| .hero__visual-copy p { | |
| margin: 0; | |
| font-size: 22px; | |
| font-weight: 700; | |
| color: var(--navy); | |
| } | |
| .hero__visual-copy span { | |
| display: block; | |
| margin-top: 6px; | |
| color: var(--text-secondary); | |
| font-size: 15px; | |
| } | |
| .hero__symbol { | |
| position: absolute; | |
| right: 12px; | |
| bottom: 22px; | |
| width: 128px; | |
| opacity: 0.18; | |
| } | |
| .section-block { | |
| padding: 96px 0 0; | |
| } | |
| .section-copy h2, | |
| .panel-header h2, | |
| .panel-header h3, | |
| .modal__header h2, | |
| .card h3, | |
| .empty-state h3 { | |
| margin: 0; | |
| color: var(--navy); | |
| letter-spacing: -0.02em; | |
| } | |
| .section-copy h2 { | |
| font-size: clamp(2rem, 3vw, 3rem); | |
| max-width: 16ch; | |
| } | |
| .steps-grid, | |
| .stats-grid, | |
| .feature-grid { | |
| margin-top: 28px; | |
| display: grid; | |
| gap: 24px; | |
| } | |
| .steps-grid { | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| } | |
| .stats-grid { | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| } | |
| .feature-grid { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .step-card, | |
| .stat-card, | |
| .feature-card, | |
| .card, | |
| .history-card, | |
| .sample-card { | |
| padding: 28px; | |
| border-radius: var(--radius-lg); | |
| } | |
| .step-card:hover, | |
| .feature-card:hover, | |
| .history-card:hover, | |
| .sample-card:hover { | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .step-badge { | |
| width: 80px; | |
| height: 80px; | |
| margin-bottom: 28px; | |
| border-radius: 999px; | |
| display: grid; | |
| place-items: center; | |
| color: var(--clinical-blue); | |
| background: var(--clinical-blue-soft); | |
| font-size: 32px; | |
| font-weight: 700; | |
| } | |
| .step-card h3, | |
| .feature-card h3 { | |
| margin: 0 0 12px; | |
| color: var(--navy); | |
| font-size: 24px; | |
| } | |
| .stat-card strong { | |
| display: block; | |
| color: var(--navy); | |
| font-size: clamp(2.2rem, 5vw, 3rem); | |
| letter-spacing: -0.03em; | |
| } | |
| .cta-panel { | |
| margin-top: 96px; | |
| padding: 40px; | |
| border-radius: 28px; | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(239, 244, 255, 0.98) 100%); | |
| border: 1px solid rgba(44, 92, 245, 0.08); | |
| box-shadow: var(--shadow-lg); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 24px; | |
| } | |
| .page-header { | |
| width: 100%; | |
| padding: 56px 0 20px; | |
| } | |
| .page-header p { | |
| margin: 14px 0 0; | |
| font-size: 18px; | |
| } | |
| .back-link, | |
| .breadcrumb { | |
| display: inline-block; | |
| margin-bottom: 14px; | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| } | |
| .upload-layout { | |
| display: grid; | |
| gap: 32px; | |
| grid-template-columns: minmax(0, 1.2fr) minmax(280px, 360px); | |
| align-items: start; | |
| width: min(100%, 1120px); | |
| margin: 0 auto; | |
| } | |
| .upload-focus { | |
| padding: 32px; | |
| } | |
| .upload-zone { | |
| position: relative; | |
| min-height: 340px; | |
| padding: 36px; | |
| border-radius: 24px; | |
| border: 2px dashed var(--border-medium); | |
| background: | |
| radial-gradient(circle at top, rgba(44, 92, 245, 0.05), transparent 44%), | |
| linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 247, 250, 0.88)); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| transition: border-color 200ms var(--ease-apple), transform 200ms var(--ease-apple), box-shadow 200ms var(--ease-apple); | |
| } | |
| .upload-zone:hover, | |
| .upload-zone.is-dragging { | |
| border-color: var(--clinical-blue); | |
| transform: translateY(-1px); | |
| } | |
| .upload-zone input { | |
| position: absolute; | |
| inset: 0; | |
| opacity: 0; | |
| cursor: pointer; | |
| } | |
| .upload-zone__icon { | |
| width: 88px; | |
| height: 88px; | |
| margin-bottom: 20px; | |
| border-radius: 999px; | |
| display: grid; | |
| place-items: center; | |
| background: linear-gradient(180deg, rgba(44, 92, 245, 0.14), rgba(44, 92, 245, 0.06)); | |
| } | |
| .upload-zone__icon img { | |
| width: 56px; | |
| height: 56px; | |
| } | |
| .upload-zone h2 { | |
| margin: 0; | |
| max-width: 14ch; | |
| color: var(--navy); | |
| font-size: 36px; | |
| line-height: 1.1; | |
| } | |
| .upload-zone p { | |
| margin: 14px 0 0; | |
| color: var(--text-secondary); | |
| } | |
| .selected-file-panel { | |
| margin-top: 20px; | |
| padding: 24px; | |
| border-radius: var(--radius-lg); | |
| background: linear-gradient(180deg, rgba(239, 244, 255, 0.95), rgba(255, 255, 255, 0.96)); | |
| border: 1px solid rgba(44, 92, 245, 0.12); | |
| } | |
| .selected-file__header strong { | |
| display: block; | |
| color: var(--navy); | |
| font-size: 18px; | |
| overflow-wrap: anywhere; | |
| word-break: break-word; | |
| } | |
| .selected-file__header p { | |
| margin: 6px 0 0; | |
| overflow-wrap: anywhere; | |
| word-break: break-word; | |
| } | |
| .file-facts { | |
| margin-top: 18px; | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| .file-facts div, | |
| .timing-grid div { | |
| padding: 14px; | |
| border-radius: 12px; | |
| background: var(--soft-gray); | |
| } | |
| .file-facts span, | |
| .timing-grid span, | |
| .risk-banner__metrics span { | |
| display: block; | |
| margin-bottom: 8px; | |
| color: var(--text-secondary); | |
| font-size: 12px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .file-facts strong, | |
| .timing-grid strong { | |
| color: var(--navy); | |
| font-size: 16px; | |
| display: block; | |
| line-height: 1.35; | |
| overflow-wrap: anywhere; | |
| word-break: break-word; | |
| } | |
| .selected-file__actions { | |
| margin-top: 18px; | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 12px; | |
| } | |
| .pulse-button { | |
| animation: pulseButton 2s infinite var(--ease-apple); | |
| } | |
| .upload-divider { | |
| margin: 22px 0; | |
| text-align: center; | |
| } | |
| .upload-divider span { | |
| color: var(--text-muted); | |
| font-size: 13px; | |
| letter-spacing: 0.08em; | |
| } | |
| .sample-card { | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| gap: 18px; | |
| text-align: left; | |
| } | |
| .sample-card__icon { | |
| width: 52px; | |
| height: 52px; | |
| border-radius: 16px; | |
| display: grid; | |
| place-items: center; | |
| background: var(--soft-gray); | |
| color: var(--clinical-blue); | |
| font-size: 28px; | |
| } | |
| .sample-card__copy strong, | |
| .history-card h3 { | |
| display: block; | |
| color: var(--navy); | |
| font-size: 18px; | |
| } | |
| .sample-card__copy small { | |
| display: block; | |
| margin-top: 4px; | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| } | |
| .upload-sidebar { | |
| display: grid; | |
| gap: 24px; | |
| } | |
| .recent-uploads { | |
| margin-top: 18px; | |
| display: grid; | |
| gap: 14px; | |
| } | |
| .recent-upload-item { | |
| padding: 16px; | |
| border-radius: 12px; | |
| border: 1px solid var(--border-light); | |
| background: var(--white); | |
| } | |
| .recent-upload-item strong { | |
| display: block; | |
| color: var(--navy); | |
| } | |
| .recent-upload-item p { | |
| margin: 6px 0 0; | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| } | |
| .status-banner { | |
| margin-top: 18px; | |
| padding: 14px 16px; | |
| border-radius: 12px; | |
| font-size: 14px; | |
| } | |
| .status-banner--warning { | |
| color: #92400e; | |
| background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); | |
| border: 1px solid rgba(245, 158, 11, 0.18); | |
| } | |
| .analysis-view { | |
| min-height: calc(100vh - 180px); | |
| display: grid; | |
| place-content: center; | |
| justify-items: center; | |
| text-align: center; | |
| } | |
| .analysis-pulse { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 999px; | |
| display: grid; | |
| place-items: center; | |
| animation: analysisPulse 2s infinite var(--ease-apple); | |
| } | |
| .analysis-pulse img { | |
| width: 60px; | |
| height: 60px; | |
| object-fit: contain; | |
| } | |
| .analysis-view h1 { | |
| margin: 28px 0 12px; | |
| color: var(--navy); | |
| font-size: 32px; | |
| } | |
| .analysis-detail { | |
| margin: 0; | |
| font-size: 18px; | |
| } | |
| .analysis-steps { | |
| margin-top: 20px; | |
| display: flex; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .analysis-steps span { | |
| padding: 8px 14px; | |
| border-radius: 999px; | |
| background: var(--soft-gray); | |
| color: var(--text-secondary); | |
| transition: all 250ms var(--ease-apple); | |
| } | |
| .analysis-steps .is-active { | |
| background: rgba(44, 92, 245, 0.12); | |
| color: var(--clinical-blue); | |
| } | |
| .progress-module { | |
| margin-top: 28px; | |
| width: min(420px, 100%); | |
| } | |
| .progress-track, | |
| .progress-bar { | |
| height: 8px; | |
| border-radius: 999px; | |
| background: var(--border-light); | |
| overflow: hidden; | |
| } | |
| .progress-track span, | |
| .progress-bar span { | |
| display: block; | |
| height: 100%; | |
| width: 0; | |
| border-radius: inherit; | |
| transition: width 500ms var(--ease-apple); | |
| } | |
| .progress-track span { | |
| background: linear-gradient(90deg, #60a5fa 0%, var(--clinical-blue) 100%); | |
| } | |
| .progress-module strong { | |
| display: block; | |
| margin-top: 12px; | |
| color: var(--navy); | |
| } | |
| .page-header--results { | |
| max-width: none; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-end; | |
| gap: 24px; | |
| } | |
| .scan-detail-grid { | |
| margin-top: 20px; | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| .scan-detail-grid div { | |
| padding: 14px; | |
| border-radius: 12px; | |
| background: rgba(255, 255, 255, 0.72); | |
| border: 1px solid rgba(10, 22, 40, 0.05); | |
| } | |
| .scan-detail-grid span { | |
| display: block; | |
| margin-bottom: 8px; | |
| color: var(--text-secondary); | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| } | |
| .scan-detail-grid strong { | |
| color: var(--navy); | |
| display: block; | |
| line-height: 1.35; | |
| overflow-wrap: anywhere; | |
| word-break: break-word; | |
| } | |
| .risk-banner { | |
| margin-top: 12px; | |
| padding: 24px; | |
| border-radius: 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 24px; | |
| box-shadow: var(--shadow-sm); | |
| border-left: 4px solid var(--success); | |
| } | |
| .risk-banner--low { | |
| background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); | |
| border-left-color: var(--success); | |
| } | |
| .risk-banner--medium { | |
| background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); | |
| border-left-color: var(--warning); | |
| } | |
| .risk-banner--high { | |
| background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); | |
| border-left-color: var(--alert); | |
| } | |
| .risk-banner__identity, | |
| .risk-banner__metrics { | |
| display: flex; | |
| align-items: center; | |
| gap: 18px; | |
| } | |
| .risk-banner__icon { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 999px; | |
| display: grid; | |
| place-items: center; | |
| color: var(--white); | |
| font-weight: 700; | |
| background: var(--success); | |
| } | |
| .risk-banner--medium .risk-banner__icon { | |
| background: var(--warning); | |
| } | |
| .risk-banner--high .risk-banner__icon { | |
| background: var(--alert); | |
| } | |
| .risk-banner__label { | |
| margin: 0 0 6px; | |
| color: var(--text-secondary); | |
| font-size: 13px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .risk-banner__identity h2 { | |
| margin: 0; | |
| color: var(--navy); | |
| font-size: 28px; | |
| } | |
| .risk-banner__recommendation { | |
| display: block; | |
| margin-top: 6px; | |
| color: var(--text-secondary); | |
| font-size: 15px; | |
| } | |
| .risk-banner__metrics { | |
| margin-left: auto; | |
| } | |
| .risk-banner__metrics strong { | |
| color: var(--navy); | |
| font-size: 18px; | |
| } | |
| .results-grid { | |
| margin-top: 32px; | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr); | |
| gap: 32px; | |
| align-items: start; | |
| } | |
| .results-sidebar { | |
| display: grid; | |
| gap: 24px; | |
| } | |
| .results-main { | |
| position: sticky; | |
| top: 104px; | |
| } | |
| .panel-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| gap: 16px; | |
| margin-bottom: 20px; | |
| } | |
| .scan-stage { | |
| min-height: 420px; | |
| border-radius: 20px; | |
| background: #02060d; | |
| display: grid; | |
| place-items: center; | |
| overflow: hidden; | |
| } | |
| .scan-stage img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| } | |
| .scan-placeholder { | |
| padding: 36px; | |
| text-align: center; | |
| color: rgba(255, 255, 255, 0.74); | |
| } | |
| .scan-placeholder img { | |
| width: min(240px, 60%); | |
| margin: 0 auto 24px; | |
| opacity: 0.65; | |
| } | |
| .legend { | |
| margin-top: 20px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 20px; | |
| color: var(--text-secondary); | |
| } | |
| .dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 999px; | |
| display: inline-block; | |
| margin-right: 8px; | |
| } | |
| .dot--high { | |
| background: var(--alert); | |
| } | |
| .dot--medium { | |
| background: var(--warning); | |
| } | |
| .dot--low { | |
| background: var(--success); | |
| } | |
| .filter-select, | |
| .search-input { | |
| min-height: 44px; | |
| padding: 0 14px; | |
| border-radius: 10px; | |
| border: 1px solid var(--border-medium); | |
| background: var(--white); | |
| color: var(--navy); | |
| } | |
| .timing-grid { | |
| margin-top: 18px; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); | |
| gap: 12px; | |
| } | |
| .empty-state { | |
| padding: 28px; | |
| border-radius: 20px; | |
| text-align: center; | |
| background: linear-gradient(135deg, #effcf7 0%, #ffffff 100%); | |
| } | |
| .empty-state__icon { | |
| width: 72px; | |
| height: 72px; | |
| margin: 0 auto 20px; | |
| border-radius: 999px; | |
| display: grid; | |
| place-items: center; | |
| color: var(--white); | |
| background: var(--success); | |
| font-size: 30px; | |
| font-weight: 700; | |
| } | |
| .nodules-list, | |
| .history-groups { | |
| display: grid; | |
| gap: 18px; | |
| } | |
| .nodule-card { | |
| padding: 20px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-light); | |
| background: var(--white); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .nodule-card__top, | |
| .history-card__row, | |
| .metric-block__row, | |
| .history-card__actions { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 16px; | |
| align-items: center; | |
| } | |
| .risk-pill { | |
| padding: 6px 12px; | |
| border-radius: 999px; | |
| font-size: 13px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| } | |
| .risk-pill--low { | |
| color: #047857; | |
| background: rgba(16, 185, 129, 0.12); | |
| } | |
| .risk-pill--medium { | |
| color: #b45309; | |
| background: rgba(245, 158, 11, 0.14); | |
| } | |
| .risk-pill--high { | |
| color: #b91c1c; | |
| background: rgba(239, 68, 68, 0.12); | |
| } | |
| .nodule-location { | |
| margin: 12px 0 20px; | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| } | |
| .metric-block + .metric-block, | |
| .recommendation-block { | |
| margin-top: 18px; | |
| } | |
| .metric-block__row { | |
| margin-bottom: 10px; | |
| } | |
| .recommendation-block span { | |
| display: block; | |
| margin-bottom: 8px; | |
| color: var(--navy); | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| .recommendation-block p { | |
| margin: 0; | |
| color: var(--text-secondary); | |
| } | |
| .floating-bar { | |
| margin-top: 28px; | |
| padding: 16px; | |
| border-radius: 18px; | |
| position: sticky; | |
| bottom: 18px; | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 12px; | |
| background: rgba(255, 255, 255, 0.88); | |
| border: 1px solid rgba(10, 22, 40, 0.06); | |
| backdrop-filter: blur(18px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .history-toolbar { | |
| width: 100%; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| .history-toolbar .search-input { | |
| flex: 1 1 320px; | |
| } | |
| .history-group { | |
| width: 100%; | |
| padding-top: 28px; | |
| } | |
| .history-group h2 { | |
| margin: 0 0 16px; | |
| color: var(--navy); | |
| font-size: 24px; | |
| } | |
| .history-card__date { | |
| display: block; | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| margin-bottom: 12px; | |
| } | |
| .history-card__score { | |
| margin: 14px 0 10px; | |
| } | |
| .progress-bar--compact { | |
| margin-bottom: 14px; | |
| } | |
| .history-card__actions { | |
| margin-top: 18px; | |
| } | |
| .technical-shell { | |
| display: grid; | |
| gap: 24px; | |
| } | |
| .technical-tabs { | |
| width: 100%; | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| .technical-tab { | |
| min-height: 44px; | |
| padding: 0 18px; | |
| border-radius: 999px; | |
| border: 1px solid var(--border-light); | |
| background: rgba(255, 255, 255, 0.9); | |
| color: var(--text-secondary); | |
| box-shadow: var(--shadow-sm); | |
| white-space: normal; | |
| } | |
| .technical-tab.is-active { | |
| color: var(--clinical-blue); | |
| border-color: rgba(44, 92, 245, 0.22); | |
| background: rgba(239, 244, 255, 0.95); | |
| } | |
| .technical-content { | |
| width: 100%; | |
| } | |
| .technical-card { | |
| display: grid; | |
| gap: 24px; | |
| } | |
| .section-copy--wide h2, | |
| .section-copy--wide p { | |
| max-width: none; | |
| } | |
| .architecture-flow { | |
| padding: 24px; | |
| border-radius: 18px; | |
| background: linear-gradient(180deg, rgba(239, 244, 255, 0.9), rgba(255, 255, 255, 0.95)); | |
| border: 1px solid rgba(44, 92, 245, 0.1); | |
| display: grid; | |
| gap: 12px; | |
| justify-items: center; | |
| text-align: center; | |
| color: var(--navy); | |
| font-weight: 600; | |
| } | |
| .architecture-flow__split, | |
| .technical-columns, | |
| .developer-grid, | |
| .media-grid, | |
| .footer-grid { | |
| display: grid; | |
| gap: 20px; | |
| } | |
| .architecture-flow__split { | |
| width: 100%; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .architecture-flow__split div, | |
| .metric-table div, | |
| .code-card, | |
| .media-card { | |
| padding: 18px; | |
| border-radius: 16px; | |
| background: var(--white); | |
| border: 1px solid var(--border-light); | |
| } | |
| .architecture-flow__split small { | |
| color: var(--text-secondary); | |
| font-size: 13px; | |
| } | |
| .technical-columns { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .technical-list { | |
| margin: 0; | |
| padding-left: 18px; | |
| color: var(--text-secondary); | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .media-grid { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .media-grid--two { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .media-card img { | |
| width: 100%; | |
| border-radius: 12px; | |
| } | |
| .media-card figcaption { | |
| margin-top: 12px; | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| line-height: 1.6; | |
| } | |
| .metric-table { | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .metric-table div { | |
| display: grid; | |
| grid-template-columns: 1.2fr 0.8fr 0.8fr; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .metric-table strong { | |
| color: var(--navy); | |
| } | |
| .stats-grid--four { | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| } | |
| .developer-grid { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .code-card__header { | |
| margin-bottom: 14px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .code-card pre { | |
| margin: 0; | |
| padding: 18px; | |
| border-radius: 14px; | |
| background: #0f172a; | |
| color: #e2e8f0; | |
| overflow: auto; | |
| font-size: 13px; | |
| line-height: 1.7; | |
| } | |
| .footer { | |
| max-width: var(--page-width); | |
| margin: 48px auto 0; | |
| padding: 32px 0 12px; | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| } | |
| .footer-grid { | |
| grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); | |
| align-items: start; | |
| } | |
| .footer-brand { | |
| display: grid; | |
| gap: 14px; | |
| align-content: start; | |
| } | |
| .footer-brand__logo { | |
| width: clamp(180px, 24vw, 240px); | |
| max-width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| .footer-grid strong { | |
| color: var(--navy); | |
| font-size: 16px; | |
| } | |
| .footer-grid p { | |
| margin: 10px 0 0; | |
| max-width: 30ch; | |
| line-height: 1.7; | |
| } | |
| .footer-heading { | |
| display: block; | |
| margin-bottom: 10px; | |
| color: var(--navy); | |
| font-size: 13px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| } | |
| .footer-link { | |
| display: block; | |
| margin-top: 8px; | |
| color: var(--text-secondary); | |
| } | |
| .footer-copy { | |
| display: block; | |
| margin-top: 8px; | |
| } | |
| .footer-strip { | |
| margin-top: 20px; | |
| padding: 14px 18px; | |
| border-top: 1px solid rgba(10, 22, 40, 0.06); | |
| color: var(--text-muted); | |
| font-size: 12px; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| #footerHelpButton, | |
| #footerSettingsButton { | |
| padding: 0; | |
| border: 0; | |
| background: transparent; | |
| text-align: left; | |
| cursor: pointer; | |
| font: inherit; | |
| } | |
| .modal-backdrop { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 80; | |
| background: rgba(10, 22, 40, 0.28); | |
| display: grid; | |
| place-items: center; | |
| padding: 24px; | |
| } | |
| .modal { | |
| width: min(100%, 420px); | |
| max-height: min(80vh, 720px); | |
| overflow: auto; | |
| border-radius: 18px; | |
| background: var(--white); | |
| box-shadow: var(--shadow-xl); | |
| } | |
| .modal--settings { | |
| width: min(100%, 400px); | |
| } | |
| .modal__header, | |
| .modal__footer { | |
| padding: 18px 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 16px; | |
| border-bottom: 1px solid var(--border-light); | |
| } | |
| .modal__footer { | |
| border-top: 1px solid var(--border-light); | |
| border-bottom: 0; | |
| justify-content: flex-end; | |
| } | |
| .modal__body { | |
| padding: 20px; | |
| display: grid; | |
| gap: 18px; | |
| } | |
| .settings-group { | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .settings-group h3 { | |
| margin: 0; | |
| color: var(--navy); | |
| font-size: 16px; | |
| } | |
| .icon-close { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 999px; | |
| background: var(--soft-gray); | |
| font-size: 24px; | |
| line-height: 1; | |
| } | |
| .notes-input { | |
| min-height: 120px; | |
| resize: vertical; | |
| padding: 14px; | |
| border-radius: 12px; | |
| border: 1px solid var(--border-medium); | |
| background: var(--white); | |
| color: var(--navy); | |
| font: inherit; | |
| } | |
| @keyframes routeFade { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes pageRise { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes analysisPulse { | |
| 0%, | |
| 100% { | |
| transform: scale(1); | |
| opacity: 0.88; | |
| } | |
| 50% { | |
| transform: scale(1.15); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes pulseHint { | |
| 0%, | |
| 100% { | |
| transform: scale(1); | |
| opacity: 0.48; | |
| } | |
| 50% { | |
| transform: scale(1.2); | |
| opacity: 0.9; | |
| } | |
| } | |
| @keyframes pulseButton { | |
| 0%, | |
| 100% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.02); | |
| } | |
| } | |
| @media (max-width: 1100px) { | |
| .hero, | |
| .upload-layout, | |
| .results-grid, | |
| .steps-grid, | |
| .stats-grid, | |
| .feature-grid, | |
| .page-header--results, | |
| .technical-columns, | |
| .developer-grid, | |
| .media-grid, | |
| .footer-grid, | |
| .stats-grid--four { | |
| grid-template-columns: 1fr; | |
| display: grid; | |
| } | |
| .page-header--results { | |
| align-items: start; | |
| } | |
| .page-header__actions { | |
| width: 100%; | |
| } | |
| .results-main { | |
| position: static; | |
| } | |
| .risk-banner, | |
| .risk-banner__identity, | |
| .risk-banner__metrics, | |
| .floating-bar, | |
| .cta-panel { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| } | |
| @media (max-width: 900px) { | |
| .topbar__inner { | |
| gap: 16px; | |
| padding: 12px 16px; | |
| } | |
| .hero { | |
| gap: 32px; | |
| } | |
| .hero__visual { | |
| min-height: 420px; | |
| } | |
| .section-block { | |
| padding-top: 72px; | |
| } | |
| .cta-panel, | |
| .upload-focus, | |
| .step-card, | |
| .stat-card, | |
| .feature-card, | |
| .card, | |
| .history-card, | |
| .sample-card { | |
| padding: 24px; | |
| } | |
| .page-header { | |
| padding: 40px 0 16px; | |
| } | |
| .page-header--results, | |
| .risk-banner, | |
| .panel-header, | |
| .nodule-card__top, | |
| .history-card__row, | |
| .metric-block__row, | |
| .history-card__actions, | |
| .modal__footer { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .risk-banner__metrics { | |
| width: 100%; | |
| margin-left: 0; | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| .floating-bar { | |
| flex-wrap: wrap; | |
| justify-content: flex-start; | |
| } | |
| .scan-stage { | |
| min-height: 340px; | |
| } | |
| .metric-table div { | |
| grid-template-columns: 1fr; | |
| justify-items: start; | |
| } | |
| .code-card__header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| } | |
| @media (max-width: 767px) { | |
| .app-shell { | |
| padding: 0 16px 32px; | |
| } | |
| .topbar { | |
| padding: 12px 0; | |
| } | |
| .topbar__inner { | |
| padding: 10px 14px; | |
| gap: 12px; | |
| } | |
| .nav, | |
| .topbar__actions .icon-button:not(.mobile-nav-toggle) { | |
| display: none; | |
| } | |
| .mobile-nav-toggle { | |
| display: inline-flex; | |
| } | |
| .mobile-nav.is-open { | |
| display: flex; | |
| } | |
| .mobile-nav a { | |
| padding: 10px 4px; | |
| } | |
| .brand__wordmark { | |
| height: 44px; | |
| } | |
| .hero { | |
| min-height: auto; | |
| padding: 36px 0 12px; | |
| grid-template-columns: 1fr; | |
| } | |
| .hero__visual { | |
| min-height: 320px; | |
| } | |
| .hero__visual-card { | |
| padding: 20px; | |
| border-radius: 22px; | |
| } | |
| .hero__symbol { | |
| width: 88px; | |
| right: 4px; | |
| bottom: 12px; | |
| } | |
| .hero h1, | |
| .page-header h1 { | |
| font-size: clamp(2.4rem, 12vw, 3.4rem); | |
| } | |
| .hero__subtitle { | |
| font-size: 20px; | |
| } | |
| .hero__actions, | |
| .page-header__actions, | |
| .selected-file__actions, | |
| .history-card__actions { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| .section-block { | |
| padding-top: 56px; | |
| } | |
| .step-card, | |
| .stat-card, | |
| .feature-card, | |
| .card, | |
| .history-card, | |
| .sample-card, | |
| .cta-panel, | |
| .upload-focus, | |
| .modal__header, | |
| .modal__body, | |
| .modal__footer { | |
| padding-left: 18px; | |
| padding-right: 18px; | |
| } | |
| .cta-panel { | |
| margin-top: 56px; | |
| } | |
| .button, | |
| .button--hero, | |
| .button--ghost, | |
| .button--secondary, | |
| .button--primary { | |
| width: 100%; | |
| } | |
| .button--hero { | |
| padding: 0 24px; | |
| } | |
| .file-facts, | |
| .timing-grid, | |
| .scan-detail-grid, | |
| .architecture-flow__split { | |
| grid-template-columns: 1fr; | |
| } | |
| .upload-zone { | |
| min-height: 280px; | |
| padding: 28px 20px; | |
| } | |
| .upload-zone h2 { | |
| font-size: 28px; | |
| } | |
| .sample-card { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .analysis-view { | |
| min-height: calc(100vh - 140px); | |
| } | |
| .analysis-view h1 { | |
| font-size: 28px; | |
| } | |
| .risk-banner { | |
| padding: 20px; | |
| } | |
| .risk-banner__identity { | |
| align-items: flex-start; | |
| } | |
| .risk-banner__identity h2 { | |
| font-size: 24px; | |
| } | |
| .risk-banner__metrics { | |
| grid-template-columns: 1fr; | |
| } | |
| .scan-stage { | |
| min-height: 260px; | |
| } | |
| .scan-placeholder { | |
| padding: 24px 18px; | |
| } | |
| .technical-tabs { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .technical-tab { | |
| width: 100%; | |
| white-space: normal; | |
| } | |
| .metric-table div, | |
| .footer-grid, | |
| .developer-grid, | |
| .media-grid, | |
| .media-grid--two { | |
| grid-template-columns: 1fr; | |
| } | |
| .modal-backdrop { | |
| padding: 16px; | |
| align-items: end; | |
| } | |
| .modal { | |
| width: 100%; | |
| max-height: min(88vh, 760px); | |
| } | |
| .modal__footer { | |
| align-items: stretch; | |
| } | |
| .floating-bar { | |
| position: static; | |
| padding: 14px; | |
| } | |
| .history-toolbar { | |
| flex-direction: column; | |
| } | |
| .footer { | |
| margin-top: 40px; | |
| } | |
| } | |
| @media (max-width: 520px) { | |
| .technical-tabs { | |
| grid-template-columns: 1fr; | |
| } | |
| .step-badge { | |
| width: 64px; | |
| height: 64px; | |
| margin-bottom: 20px; | |
| font-size: 24px; | |
| } | |
| .step-card h3, | |
| .feature-card h3 { | |
| font-size: 20px; | |
| } | |
| .footer-strip { | |
| padding-left: 0; | |
| padding-right: 0; | |
| line-height: 1.5; | |
| } | |
| } | |
| body.theme-dark { | |
| background: #010101; | |
| color: #f4f4f5; | |
| } | |
| body.theme-dark .topbar__inner { | |
| background: rgba(0, 0, 0, 0.9); | |
| border-color: rgba(255, 255, 255, 0.08); | |
| box-shadow: 0 30px 60px rgba(0, 0, 0, 0.85); | |
| } | |
| body.theme-dark .nav a { | |
| color: rgba(255, 255, 255, 0.8); | |
| } | |
| body.theme-dark .nav a.is-active, | |
| body.theme-dark .nav a:hover { | |
| color: #fff; | |
| } | |
| body.theme-dark h1, | |
| body.theme-dark h2, | |
| body.theme-dark h3, | |
| body.theme-dark h4, | |
| body.theme-dark h5, | |
| body.theme-dark h6, | |
| body.theme-dark p, | |
| body.theme-dark span, | |
| body.theme-dark strong, | |
| body.theme-dark small { | |
| color: rgba(255, 255, 255, 0.95); | |
| } | |
| body.theme-dark .page-header h1, | |
| body.theme-dark .page-header h2, | |
| body.theme-dark .history-toolbar span, | |
| body.theme-dark .hero__subtitle, | |
| body.theme-dark .lead-text, | |
| body.theme-dark .cta-panel h2, | |
| body.theme-dark .page-header__actions button { | |
| color: #fff; | |
| } | |
| body.theme-dark .hero h1, | |
| body.theme-dark .hero__subtitle, | |
| body.theme-dark .hero__lede, | |
| body.theme-dark .section-copy h2, | |
| body.theme-dark .section-copy p, | |
| body.theme-dark .panel-header h2, | |
| body.theme-dark .panel-header p, | |
| body.theme-dark .summary-text, | |
| body.theme-dark .feature-card h3, | |
| body.theme-dark .stat-card strong, | |
| body.theme-dark .history-card h3, | |
| body.theme-dark .history-card__file, | |
| body.theme-dark .history-card__date, | |
| body.theme-dark .history-card__score, | |
| body.theme-dark .risk-banner__label, | |
| body.theme-dark .legend span, | |
| body.theme-dark .results-meta, | |
| body.theme-dark .analysis-detail, | |
| body.theme-dark .breadcrumb { | |
| color: rgba(255, 255, 255, 0.8); | |
| } | |
| body.theme-dark .card, | |
| body.theme-dark .modal, | |
| body.theme-dark .upload-zone, | |
| body.theme-dark .hero__visual-card, | |
| body.theme-dark .results-main, | |
| body.theme-dark .results-sidebar .card, | |
| body.theme-dark .history-card, | |
| body.theme-dark .stat-card, | |
| body.theme-dark .feature-card, | |
| body.theme-dark .step-card, | |
| body.theme-dark .cta-panel, | |
| body.theme-dark .sample-card, | |
| body.theme-dark .panel-header, | |
| body.theme-dark .technical-card, | |
| body.theme-dark .media-card, | |
| body.theme-dark .code-card, | |
| body.theme-dark .floating-bar, | |
| body.theme-dark .upload-focus, | |
| body.theme-dark .technical-columns, | |
| body.theme-dark .metric-table div, | |
| body.theme-dark .selected-file-panel, | |
| body.theme-dark .file-facts div, | |
| body.theme-dark .timing-grid div, | |
| body.theme-dark .scan-detail-grid div, | |
| body.theme-dark .nodule-card, | |
| body.theme-dark .recent-upload-item, | |
| body.theme-dark .empty-state { | |
| background: rgba(0, 0, 0, 0.85); | |
| border-color: rgba(255, 255, 255, 0.08); | |
| box-shadow: 0 25px 45px rgba(0, 0, 0, 0.9); | |
| } | |
| body.theme-dark .results-main, | |
| body.theme-dark .results-sidebar .card { | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| } | |
| body.theme-dark .modal-backdrop { | |
| background: rgba(0, 0, 0, 0.78); | |
| } | |
| body.theme-dark .upload-zone__icon, | |
| body.theme-dark .status-banner { | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| color: #fff; | |
| } | |
| body.theme-dark .risk-banner { | |
| border-left-width: 1px; | |
| } | |
| body.theme-dark .risk-banner--low { | |
| background: rgba(16, 185, 129, 0.12); | |
| border-left-color: var(--success); | |
| } | |
| body.theme-dark .risk-banner--medium { | |
| background: rgba(245, 158, 11, 0.12); | |
| border-left-color: var(--warning); | |
| } | |
| body.theme-dark .risk-banner--high { | |
| background: rgba(239, 68, 68, 0.12); | |
| border-left-color: var(--alert); | |
| } | |
| body.theme-dark .analysis-view h1 { | |
| color: #fff; | |
| } | |
| body.theme-dark .analysis-steps span { | |
| background: rgba(255, 255, 255, 0.08); | |
| color: #f4f4f5; | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| } | |
| body.theme-dark input, | |
| body.theme-dark textarea, | |
| body.theme-dark select, | |
| body.theme-dark .search-input, | |
| body.theme-dark .filter-select { | |
| background: rgba(0, 0, 0, 0.92); | |
| border-color: rgba(255, 255, 255, 0.2); | |
| color: #f4f4f5; | |
| } | |
| body.theme-dark ::placeholder { | |
| color: rgba(255, 255, 255, 0.45); | |
| } | |
| body.theme-dark .scroll-hint span { | |
| background: rgba(255, 255, 255, 0.5); | |
| } | |
| body.theme-dark .upload-divider span { | |
| color: rgba(255, 255, 255, 0.45); | |
| } | |
| body.theme-dark .icon-button { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-color: rgba(255, 255, 255, 0.12); | |
| color: #fff; | |
| } | |
| body.theme-dark .icon-button:hover { | |
| background: rgba(255, 255, 255, 0.12); | |
| border-color: rgba(255, 255, 255, 0.2); | |
| } | |
| body.theme-dark .footer, | |
| body.theme-dark .footer-grid, | |
| body.theme-dark .footer-strip { | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| body.theme-dark .footer-link, | |
| body.theme-dark .footer-heading { | |
| color: #fff; | |
| } | |
| body.theme-dark .technical-tabs { | |
| background: rgba(0, 0, 0, 0.95); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| padding: 14px; | |
| border-radius: 16px; | |
| } | |
| body.theme-dark .technical-tab { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-color: rgba(255, 255, 255, 0.12); | |
| color: #fff; | |
| box-shadow: none; | |
| } | |
| body.theme-dark .technical-tab.is-active { | |
| background: rgba(255, 255, 255, 0.18); | |
| border-color: rgba(255, 255, 255, 0.2); | |
| color: #fff; | |
| } | |