| :root { |
| color-scheme: light; |
| --bg: #f5efe2; |
| --surface: #fffdf8; |
| --surface-strong: #efe4cb; |
| --text: #1b2a2f; |
| --muted: #58656b; |
| --accent: #264653; |
| --accent-2: #e76f51; |
| --border: #d8ddd4; |
| --shadow: 0 18px 48px rgba(38, 70, 83, 0.12); |
| --shadow-sm: 0 2px 8px rgba(38, 70, 83, 0.08); |
| --shadow-hover: 0 8px 24px rgba(38, 70, 83, 0.15); |
|
|
| |
| --risk-low: #2a9d8f; |
| --risk-low-bg: rgba(42, 157, 143, 0.12); |
| --risk-moderate: #e9c46a; |
| --risk-moderate-bg: rgba(233, 196, 106, 0.15); |
| --risk-high: #e76f51; |
| --risk-high-bg: rgba(231, 111, 81, 0.15); |
| --risk-critical: #8f1d14; |
| --risk-critical-bg: rgba(143, 29, 20, 0.12); |
|
|
| |
| --text-xs: 0.75rem; |
| --text-sm: 0.875rem; |
| --text-base: 1rem; |
| --text-lg: 1.125rem; |
| --text-xl: 1.25rem; |
|
|
| font-family: "IBM Plex Sans", "Segoe UI", sans-serif; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| body { |
| margin: 0; |
| min-width: 320px; |
| background: |
| radial-gradient(circle at top left, rgba(231, 111, 81, 0.18), transparent 26%), |
| linear-gradient(180deg, #f6f0e7 0%, #f4efe6 42%, #edf2ec 100%); |
| color: var(--text); |
| } |
|
|
| #root { |
| min-height: 100vh; |
| } |
|
|
| .app-shell { |
| padding: 32px 20px 48px; |
| } |
|
|
| |
| .hero { |
| max-width: 1200px; |
| margin: 0 auto 24px; |
| padding: 28px 32px; |
| border: 1px solid rgba(255, 255, 255, 0.7); |
| border-radius: 20px; |
| background: rgba(255, 253, 248, 0.78); |
| backdrop-filter: blur(12px); |
| box-shadow: var(--shadow); |
| } |
|
|
| .eyebrow { |
| margin: 0 0 8px; |
| color: var(--accent-2); |
| text-transform: uppercase; |
| letter-spacing: 0.16em; |
| font-size: 0.8rem; |
| font-weight: 700; |
| } |
|
|
| .hero h1 { |
| margin: 0; |
| font-family: "Space Grotesk", "IBM Plex Sans", sans-serif; |
| font-size: clamp(2rem, 4vw, 3.6rem); |
| } |
|
|
| .hero-copy { |
| max-width: 720px; |
| color: var(--muted); |
| font-size: 1.05rem; |
| } |
|
|
| |
| .layout { |
| max-width: 1200px; |
| margin: 0 auto; |
| display: grid; |
| grid-template-columns: minmax(320px, 420px) 1fr; |
| gap: 24px; |
| } |
|
|
| .panel { |
| display: flex; |
| flex-direction: column; |
| gap: 20px; |
| } |
|
|
| |
| .card { |
| background: rgba(255, 253, 248, 0.95); |
| border: 1px solid rgba(38, 70, 83, 0.08); |
| border-radius: 16px; |
| padding: 24px; |
| box-shadow: var(--shadow-sm); |
| transition: box-shadow 0.2s ease, transform 0.2s ease; |
| } |
|
|
| .card:hover { |
| box-shadow: var(--shadow-hover); |
| } |
|
|
| .card h2 { |
| margin: 0 0 20px 0; |
| font-size: var(--text-xl); |
| font-weight: 600; |
| color: var(--accent); |
| letter-spacing: -0.01em; |
| padding-bottom: 12px; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| |
| .model-selector { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| padding: 12px 16px; |
| margin-bottom: 20px; |
| background: rgba(38, 70, 83, 0.04); |
| border-radius: 12px; |
| border: 1px solid rgba(38, 70, 83, 0.06); |
| } |
|
|
| .model-selector__icon { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| width: 28px; |
| height: 28px; |
| border-radius: 6px; |
| background: linear-gradient(135deg, var(--accent), #33658a); |
| color: #fff; |
| font-size: var(--text-xs); |
| font-weight: 700; |
| flex-shrink: 0; |
| } |
|
|
| .model-selector__label { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| flex: 1; |
| font-size: var(--text-sm); |
| color: var(--muted); |
| flex-direction: row; |
| } |
|
|
| .model-selector__select { |
| flex: 1; |
| max-width: 220px; |
| padding: 8px 12px; |
| border-radius: 8px; |
| } |
|
|
| .model-selector--disabled { |
| opacity: 0.6; |
| } |
|
|
| .model-selector__status { |
| font-size: var(--text-sm); |
| color: var(--muted); |
| font-style: italic; |
| } |
|
|
| |
| .scenario-form { |
| display: flex; |
| flex-direction: column; |
| gap: 20px; |
| } |
|
|
| .form-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); |
| gap: 16px; |
| } |
|
|
| label { |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| font-size: var(--text-sm); |
| font-weight: 500; |
| color: var(--muted); |
| } |
|
|
| input, |
| select, |
| button { |
| font: inherit; |
| } |
|
|
| input, |
| select { |
| border: 1px solid var(--border); |
| border-radius: 10px; |
| padding: 10px 12px; |
| background: #fff; |
| color: var(--text); |
| transition: border-color 0.15s ease, box-shadow 0.15s ease; |
| } |
|
|
| input:focus, |
| select:focus { |
| outline: none; |
| border-color: var(--accent); |
| box-shadow: 0 0 0 3px rgba(38, 70, 83, 0.1); |
| } |
|
|
| |
| .primary-button { |
| border: none; |
| border-radius: 12px; |
| padding: 14px 20px; |
| background: linear-gradient(135deg, var(--accent) 0%, #33658a 100%); |
| color: #fff; |
| font-weight: 600; |
| font-size: var(--text-sm); |
| letter-spacing: 0.02em; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| box-shadow: 0 2px 8px rgba(38, 70, 83, 0.2); |
| } |
|
|
| .primary-button:hover:not(:disabled) { |
| transform: translateY(-1px); |
| box-shadow: 0 4px 12px rgba(38, 70, 83, 0.25); |
| } |
|
|
| .primary-button:active:not(:disabled) { |
| transform: translateY(0); |
| } |
|
|
| .primary-button:disabled { |
| opacity: 0.6; |
| cursor: not-allowed; |
| transform: none; |
| } |
|
|
| |
| .metric-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); |
| gap: 16px; |
| } |
|
|
| .metric-item { |
| padding: 16px; |
| background: rgba(38, 70, 83, 0.02); |
| border-radius: 12px; |
| border: 1px solid transparent; |
| transition: border-color 0.15s ease, background 0.15s ease; |
| } |
|
|
| .metric-item:hover { |
| border-color: var(--border); |
| background: rgba(38, 70, 83, 0.04); |
| } |
|
|
| .metric-label { |
| display: block; |
| margin-bottom: 6px; |
| color: var(--muted); |
| font-size: var(--text-xs); |
| font-weight: 500; |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| } |
|
|
| .metric-value { |
| font-size: var(--text-lg); |
| font-weight: 600; |
| color: var(--text); |
| } |
|
|
| |
| .risk-indicator { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| padding: 6px 12px; |
| border-radius: 8px; |
| font-weight: 600; |
| font-size: var(--text-sm); |
| } |
|
|
| .risk-indicator--low { |
| background: var(--risk-low-bg); |
| color: #1d7a6f; |
| } |
|
|
| .risk-indicator--moderate { |
| background: var(--risk-moderate-bg); |
| color: #9a7b20; |
| } |
|
|
| .risk-indicator--high { |
| background: var(--risk-high-bg); |
| color: #c44a32; |
| } |
|
|
| .risk-indicator--critical { |
| background: var(--risk-critical-bg); |
| color: var(--risk-critical); |
| } |
|
|
| |
| .disclaimer, |
| .drivers, |
| .summary-provider { |
| margin-top: 18px; |
| color: var(--muted); |
| font-size: var(--text-sm); |
| } |
|
|
| |
| .summary-text { |
| line-height: 1.6; |
| color: var(--text); |
| } |
|
|
| .summary-meta { |
| margin-top: 16px; |
| padding-top: 16px; |
| border-top: 1px solid var(--border); |
| } |
|
|
| .summary-provider { |
| margin: 0 0 8px 0; |
| } |
|
|
| .summary-provider strong { |
| color: var(--accent); |
| } |
|
|
| .fallback-badge { |
| display: inline-block; |
| margin-left: 8px; |
| padding: 2px 8px; |
| font-size: var(--text-xs); |
| font-weight: 500; |
| background: rgba(231, 111, 81, 0.1); |
| color: var(--accent-2); |
| border-radius: 4px; |
| } |
|
|
| .drivers { |
| margin: 0; |
| } |
|
|
| |
| .driver-list { |
| display: grid; |
| gap: 16px; |
| } |
|
|
| .driver-item { |
| padding: 16px 18px; |
| border-radius: 12px; |
| background: linear-gradient(135deg, rgba(38, 70, 83, 0.03) 0%, rgba(38, 70, 83, 0.01) 100%); |
| border: 1px solid rgba(38, 70, 83, 0.06); |
| transition: all 0.2s ease; |
| } |
|
|
| .driver-item:hover { |
| background: rgba(38, 70, 83, 0.05); |
| border-color: rgba(38, 70, 83, 0.1); |
| } |
|
|
| .driver-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 12px; |
| flex-wrap: wrap; |
| margin-bottom: 12px; |
| } |
|
|
| .driver-header strong { |
| font-size: var(--text-sm); |
| font-weight: 600; |
| color: var(--text); |
| } |
|
|
| .driver-direction { |
| font-size: var(--text-xs); |
| font-weight: 500; |
| padding: 3px 10px; |
| border-radius: 6px; |
| } |
|
|
| .driver-direction--increases { |
| background: var(--risk-high-bg); |
| color: #c44a32; |
| } |
|
|
| .driver-direction--decreases { |
| background: var(--risk-low-bg); |
| color: #1d7a6f; |
| } |
|
|
| .driver-bar-track { |
| width: 100%; |
| height: 8px; |
| border-radius: 999px; |
| background: rgba(38, 70, 83, 0.1); |
| overflow: hidden; |
| } |
|
|
| .driver-bar-fill { |
| height: 100%; |
| border-radius: 999px; |
| background: linear-gradient(90deg, #e76f51, #f4a261); |
| } |
|
|
| .driver-explanation { |
| margin: 0 0 16px; |
| padding: 12px; |
| background: rgba(38, 70, 83, 0.04); |
| border-radius: 8px; |
| font-size: var(--text-sm); |
| color: var(--muted); |
| line-height: 1.5; |
| } |
|
|
| .driver-metrics { |
| display: flex; |
| justify-content: space-between; |
| gap: 12px; |
| flex-wrap: wrap; |
| margin-top: 12px; |
| color: var(--muted); |
| font-size: var(--text-sm); |
| } |
|
|
| .impact--positive { |
| color: var(--risk-low); |
| font-weight: 500; |
| } |
|
|
| .impact--negative { |
| color: var(--risk-high); |
| font-weight: 500; |
| } |
|
|
| |
| .loading-spinner, |
| .empty-state, |
| .error-card { |
| display: grid; |
| place-items: center; |
| min-height: 160px; |
| text-align: center; |
| } |
|
|
| .empty-state { |
| color: var(--muted); |
| font-size: var(--text-sm); |
| } |
|
|
| .error-card { |
| color: #8f1d14; |
| background: rgba(143, 29, 20, 0.05); |
| border-color: rgba(143, 29, 20, 0.1); |
| } |
|
|
| |
| .tab-navigation { |
| display: flex; |
| gap: 8px; |
| max-width: 1200px; |
| margin: 0 auto 24px; |
| padding: 0 4px; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .tab-button { |
| padding: 12px 24px; |
| border: none; |
| background: transparent; |
| color: var(--muted); |
| font-size: var(--text-sm); |
| font-weight: 500; |
| cursor: pointer; |
| border-bottom: 3px solid transparent; |
| margin-bottom: -1px; |
| transition: all 0.2s ease; |
| } |
|
|
| .tab-button:hover { |
| color: var(--text); |
| } |
|
|
| .tab-button--active { |
| color: var(--accent); |
| border-bottom-color: var(--accent); |
| } |
|
|
| |
| .admin-panel { |
| display: flex; |
| flex-direction: column; |
| gap: 24px; |
| max-width: 900px; |
| } |
|
|
| .layout--single { |
| grid-template-columns: 1fr; |
| } |
|
|
| .models-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); |
| gap: 24px; |
| } |
|
|
| .model-info { |
| margin-bottom: 24px; |
| } |
|
|
| .section-title { |
| margin: 20px 0 12px; |
| font-size: var(--text-sm); |
| font-weight: 600; |
| color: var(--muted); |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| } |
|
|
| .metric-item--highlight { |
| background: rgba(42, 157, 143, 0.08); |
| border-color: rgba(42, 157, 143, 0.15); |
| } |
|
|
| .features-details { |
| margin-top: 16px; |
| font-size: var(--text-sm); |
| } |
|
|
| .features-details summary { |
| cursor: pointer; |
| color: var(--muted); |
| font-weight: 500; |
| } |
|
|
| .features-details summary:hover { |
| color: var(--text); |
| } |
|
|
| .features-list { |
| margin: 8px 0 0; |
| padding-left: 20px; |
| color: var(--muted); |
| font-size: var(--text-xs); |
| columns: 2; |
| column-gap: 24px; |
| } |
|
|
| .features-list li { |
| margin-bottom: 4px; |
| } |
|
|
| .train-section { |
| margin-top: 20px; |
| padding-top: 20px; |
| border-top: 1px solid var(--border); |
| } |
|
|
| .train-note { |
| margin-top: 12px; |
| font-size: var(--text-xs); |
| color: var(--muted); |
| } |
|
|
| .train-result { |
| margin-top: 16px; |
| padding: 12px 16px; |
| border-radius: 8px; |
| font-size: var(--text-sm); |
| } |
|
|
| .train-result--success { |
| background: var(--risk-low-bg); |
| color: #1d7a6f; |
| } |
|
|
| .train-result--error { |
| background: var(--risk-high-bg); |
| color: #c44a32; |
| } |
|
|
| .data-status-card .metric-item--highlight .metric-value { |
| color: #1d7a6f; |
| } |
|
|
| .warning-text { |
| margin-top: 12px; |
| padding: 12px; |
| background: rgba(233, 196, 106, 0.15); |
| border-radius: 8px; |
| color: #9a7b20; |
| font-size: var(--text-sm); |
| } |
|
|
| .info-card { |
| background: rgba(38, 70, 83, 0.02); |
| } |
|
|
| .info-list { |
| margin: 0; |
| padding-left: 20px; |
| color: var(--muted); |
| font-size: var(--text-sm); |
| line-height: 1.8; |
| } |
|
|
| .info-list strong { |
| color: var(--text); |
| } |
|
|
| .loading-text, |
| .empty-state-text { |
| color: var(--muted); |
| font-size: var(--text-sm); |
| text-align: center; |
| padding: 24px 0; |
| } |
|
|
| |
| @media (max-width: 960px) { |
| .layout { |
| grid-template-columns: 1fr; |
| } |
|
|
| .model-selector__label { |
| flex-wrap: wrap; |
| } |
|
|
| .model-selector__select { |
| max-width: none; |
| width: 100%; |
| } |
|
|
| .models-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .features-list { |
| columns: 1; |
| } |
| } |
|
|
| |
| .upload-section { |
| margin-top: 20px; |
| padding-top: 20px; |
| border-top: 1px solid var(--border); |
| } |
|
|
| .upload-note { |
| margin: 0 0 12px; |
| color: var(--muted); |
| font-size: var(--text-sm); |
| } |
|
|
| .upload-controls { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| flex-wrap: wrap; |
| } |
|
|
| .file-input { |
| flex: 1; |
| min-width: 200px; |
| padding: 8px; |
| border: 1px dashed var(--border); |
| border-radius: 8px; |
| background: rgba(38, 70, 83, 0.02); |
| cursor: pointer; |
| transition: border-color 0.2s ease, background 0.2s ease; |
| } |
|
|
| .file-input:hover { |
| border-color: var(--accent); |
| background: rgba(38, 70, 83, 0.04); |
| } |
|
|
| .file-input:disabled { |
| opacity: 0.6; |
| cursor: not-allowed; |
| } |
|
|
| .upload-status { |
| font-size: var(--text-sm); |
| color: var(--accent); |
| font-weight: 500; |
| } |
|
|
| .secondary-button { |
| border: 1px solid var(--border); |
| border-radius: 10px; |
| padding: 10px 18px; |
| background: #fff; |
| color: var(--text); |
| font-weight: 500; |
| font-size: var(--text-sm); |
| cursor: pointer; |
| transition: all 0.2s ease; |
| } |
|
|
| .secondary-button:hover:not(:disabled) { |
| border-color: var(--accent); |
| background: rgba(38, 70, 83, 0.04); |
| } |
|
|
| .secondary-button:disabled { |
| opacity: 0.6; |
| cursor: not-allowed; |
| } |
|
|
| .reset-button { |
| margin-top: 12px; |
| } |
|
|
| |
| .export-section { |
| margin-top: 24px; |
| padding: 20px; |
| background: rgba(255, 253, 248, 0.95); |
| border: 1px solid rgba(38, 70, 83, 0.08); |
| border-radius: 16px; |
| text-align: center; |
| } |
|
|
| .export-button { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| padding: 12px 24px; |
| border: 2px solid var(--accent); |
| border-radius: 10px; |
| background: transparent; |
| color: var(--accent); |
| font-weight: 600; |
| font-size: var(--text-sm); |
| cursor: pointer; |
| transition: all 0.2s ease; |
| } |
|
|
| .export-button:hover:not(:disabled) { |
| background: var(--accent); |
| color: #fff; |
| } |
|
|
| .export-button:disabled { |
| opacity: 0.6; |
| cursor: not-allowed; |
| } |
|
|
| .export-note { |
| margin: 12px 0 0; |
| color: var(--muted); |
| font-size: var(--text-sm); |
| } |
|
|
