Spaces:
Runtime error
Runtime error
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| scrollbar-width: none; | |
| -ms-overflow-style: none; | |
| } | |
| html::-webkit-scrollbar, | |
| body::-webkit-scrollbar { | |
| display: none; | |
| } | |
| :root { | |
| --bg: #ffffff; | |
| --bg-secondary: #f5f5f5; | |
| --text: #000000; | |
| --text-secondary: #666666; | |
| --border: #e0e0e0; | |
| --safe: #00a86b; | |
| --safe-bg: #e8f5e9; | |
| --danger: #dc2626; | |
| --danger-bg: #fef2f2; | |
| --accent: #000000; | |
| } | |
| /* | |
| * DESIGN SYSTEM REFERENCE | |
| * ─────────────────────────────────────────────── | |
| * | |
| * Typography: | |
| * Label: 10px / 600 / 0.15em / uppercase / --text-secondary | |
| * Button: 11px / 600 / 0.1em / uppercase | |
| * Body: 12-13px / 400 / --text or --text-secondary | |
| * Mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace | |
| * Heading: 16-28px / 700 | |
| * | |
| * Spacing: 8, 12, 16, 20, 24, 32, 40, 48px | |
| * Borders: 1px solid var(--border) | |
| * Accents: border-left 3-4px solid var(--safe | --danger | --accent) | |
| * | |
| * Color modifiers (add to element): | |
| * .safe → green state (--safe, --safe-bg) | |
| * .danger → red state (--danger, --danger-bg) | |
| * | |
| * Reusable components: | |
| * .btn filled button | |
| * .btn-secondary ghost button (use with .btn) | |
| * .btn-outline standalone outline link/button | |
| * .tabs / .tab tab navigation (nest for sub-tabs) | |
| * .tab-count badge inside .tab | |
| * .tab-content tab panel (add .active) | |
| * .section-title section header label with border | |
| * .status-banner verdict banner (add .safe/.danger) | |
| * .model-card prediction card (add .safe/.danger) | |
| * .prob-bar/.prob-fill 4px progress bar (add .safe/.danger to fill) | |
| * .feature-item key-value pair row | |
| * .features-grid auto-fill grid for feature items | |
| * .models-grid auto-fit grid for cards | |
| * .error-notice error message block | |
| */ | |
| body { | |
| font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| min-height: 100vh; | |
| line-height: 1.4; | |
| font-weight: 400; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .container { | |
| max-width: 960px; | |
| margin: 0 auto; | |
| padding: 0 24px; | |
| } | |
| /* HEADER */ | |
| header { | |
| padding: 48px 0 40px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .logo { | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| margin-bottom: 4px; | |
| } | |
| .tagline { | |
| font-size: 11px; | |
| color: var(--text-secondary); | |
| letter-spacing: 0.05em; | |
| } | |
| /* INPUT SECTION */ | |
| .input-section { | |
| padding: 48px 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .input-label { | |
| font-size: 10px; | |
| font-weight: 600; | |
| letter-spacing: 0.15em; | |
| text-transform: uppercase; | |
| color: var(--text-secondary); | |
| margin-bottom: 12px; | |
| display: block; | |
| } | |
| .input-wrapper { | |
| display: flex; | |
| gap: 0; | |
| margin-bottom: 16px; | |
| } | |
| input[type="text"] { | |
| flex: 1; | |
| padding: 16px 20px; | |
| border: 1px solid var(--border); | |
| border-right: none; | |
| font-size: 14px; | |
| font-family: inherit; | |
| background: var(--bg); | |
| color: var(--text); | |
| outline: none; | |
| transition: border-color 0.2s; | |
| } | |
| input[type="text"]:focus { | |
| border-color: var(--text); | |
| } | |
| input[type="text"]::placeholder { | |
| color: #999; | |
| } | |
| .btn { | |
| padding: 16px 32px; | |
| border: 1px solid var(--text); | |
| background: var(--text); | |
| color: var(--bg); | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| font-family: inherit; | |
| transition: all 0.2s; | |
| white-space: nowrap; | |
| } | |
| .btn:hover { | |
| background: #333; | |
| } | |
| .btn:active { | |
| transform: scale(0.98); | |
| } | |
| .btn-group { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .btn-secondary { | |
| background: var(--bg); | |
| color: var(--text); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--bg-secondary); | |
| } | |
| /* OUTLINE BUTTON — standalone outline link or button */ | |
| .btn-outline, | |
| .learn-more-btn, | |
| .show-more-btn, | |
| .back-link { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border: 1px solid var(--border); | |
| background: transparent; | |
| color: var(--text); | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| text-decoration: none; | |
| font-family: inherit; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .btn-outline:hover, | |
| .learn-more-btn:hover, | |
| .show-more-btn:hover, | |
| .back-link:hover { | |
| border-color: var(--text); | |
| background: var(--bg-secondary); | |
| } | |
| /* LOADING */ | |
| .loading { | |
| display: none; | |
| padding: 80px 0; | |
| text-align: center; | |
| } | |
| .loading-bar { | |
| width: 48px; | |
| height: 2px; | |
| background: var(--border); | |
| margin: 0 auto 16px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .loading-bar::after { | |
| content: ''; | |
| position: absolute; | |
| left: -50%; | |
| width: 50%; | |
| height: 100%; | |
| background: var(--text); | |
| animation: loading 1s ease-in-out infinite; | |
| } | |
| @keyframes loading { | |
| 0% { left: -50%; } | |
| 100% { left: 100%; } | |
| } | |
| .loading-text { | |
| font-size: 10px; | |
| letter-spacing: 0.15em; | |
| text-transform: uppercase; | |
| color: var(--text-secondary); | |
| } | |
| /* RESULTS */ | |
| .results { | |
| display: none; | |
| padding: 48px 0; | |
| } | |
| /* STATUS BANNER */ | |
| .status-banner { | |
| padding: 32px; | |
| margin-bottom: 32px; | |
| text-align: center; | |
| } | |
| .status-banner.safe { | |
| background: var(--safe-bg); | |
| border-left: 4px solid var(--safe); | |
| } | |
| .status-banner.danger { | |
| background: var(--danger-bg); | |
| border-left: 4px solid var(--danger); | |
| } | |
| .status-icon { | |
| font-size: 30px; | |
| line-height: 1; | |
| } | |
| .status-banner.safe .status-icon { | |
| color: var(--safe); | |
| } | |
| .status-banner.danger .status-icon { | |
| color: var(--danger); | |
| } | |
| .status-title { | |
| font-size: 28px; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .status-banner.safe .status-title { | |
| color: var(--safe); | |
| } | |
| .status-banner.danger .status-title { | |
| color: var(--danger); | |
| } | |
| .status-subtitle { | |
| font-size: 11px; | |
| color: var(--text-secondary); | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| margin-top: 4px; | |
| } | |
| /* ENSEMBLE SCORE */ | |
| .ensemble-score { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: center; | |
| gap: 4px; | |
| margin: 4px; | |
| } | |
| .status-banner.safe .model-confidence { | |
| color: var(--safe); | |
| } | |
| .status-banner.danger .model-confidence { | |
| color: var(--danger); | |
| } | |
| .ensemble-bar { | |
| width: 100%; | |
| max-width: 360px; | |
| height: 4px; | |
| background: var(--border); | |
| margin: 10px auto 8px; | |
| } | |
| /* ensemble-bar uses .prob-fill for the fill element */ | |
| .status-kicker { | |
| font-size: 10px; | |
| font-weight: 600; | |
| letter-spacing: 0.14em; | |
| text-transform: uppercase; | |
| color: var(--text-secondary); | |
| margin-bottom: 10px; | |
| } | |
| .status-headline { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .status-headline > div:last-child { | |
| text-align: left; | |
| } | |
| .banner-score-label { | |
| font-size: 10px; | |
| font-weight: 600; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--text-secondary); | |
| } | |
| .banner-score-value { | |
| font-size: 10px; | |
| font-weight: 700; | |
| letter-spacing: 0.04em; | |
| } | |
| .status-banner.safe .banner-score-value { | |
| color: var(--safe); | |
| } | |
| .status-banner.danger .banner-score-value { | |
| color: var(--danger); | |
| } | |
| .banner-score-note { | |
| font-size: 10px; | |
| color: var(--text-secondary); | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| margin-bottom: 10px; | |
| } | |
| .status-votes { | |
| font-size: 10px; | |
| color: var(--text-secondary); | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| /* URL DISPLAY */ | |
| .url-display { | |
| padding: 16px 20px; | |
| background: var(--bg-secondary); | |
| font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace; | |
| font-size: 13px; | |
| word-break: break-all; | |
| margin-bottom: 32px; | |
| border-left: 2px solid var(--border); | |
| } | |
| /* SECTION TITLES */ | |
| .section-title { | |
| font-size: 10px; | |
| font-weight: 600; | |
| letter-spacing: 0.15em; | |
| text-transform: uppercase; | |
| color: var(--text-secondary); | |
| margin-bottom: 16px; | |
| padding-bottom: 8px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| /* TABS */ | |
| .tabs { | |
| display: flex; | |
| gap: 0; | |
| margin-bottom: 32px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .tab { | |
| padding: 12px 24px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| background: none; | |
| border: none; | |
| border-bottom: 2px solid transparent; | |
| cursor: pointer; | |
| color: var(--text-secondary); | |
| transition: all 0.2s; | |
| font-family: inherit; | |
| margin-bottom: -1px; | |
| } | |
| .tab:hover { | |
| color: var(--text); | |
| } | |
| .tab.active { | |
| color: var(--text); | |
| border-bottom-color: var(--text); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| /* MODEL CARDS */ | |
| .models-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 16px; | |
| margin-bottom: 40px; | |
| } | |
| .model-card { | |
| padding: 24px; | |
| border: 1px solid var(--border); | |
| background: var(--bg); | |
| } | |
| .model-card.safe { | |
| border-left: 3px solid var(--safe); | |
| } | |
| .model-card.danger { | |
| border-left: 3px solid var(--danger); | |
| } | |
| .model-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: 16px; | |
| } | |
| .model-name { | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| } | |
| .model-prediction { | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| padding: 4px 8px; | |
| } | |
| .model-prediction.safe { | |
| color: var(--safe); | |
| background: var(--safe-bg); | |
| } | |
| .model-prediction.danger { | |
| color: var(--danger); | |
| background: var(--danger-bg); | |
| } | |
| .model-confidence { | |
| font-size: 10px; | |
| font-weight: 700; | |
| margin-bottom: 8px; | |
| } | |
| .model-confidence-label { | |
| font-size: 10px; | |
| color: var(--text-secondary); | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| } | |
| /* PROBABILITY BAR */ | |
| .prob-container { | |
| margin-top: 16px; | |
| } | |
| .prob-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 8px; | |
| } | |
| .prob-label { | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| width: 70px; | |
| color: var(--text-secondary); | |
| } | |
| .prob-bar { | |
| flex: 1; | |
| height: 4px; | |
| background: var(--bg-secondary); | |
| position: relative; | |
| } | |
| .prob-fill { | |
| height: 100%; | |
| transition: width 0.5s ease; | |
| } | |
| .prob-fill.safe { | |
| background: var(--safe); | |
| } | |
| .prob-fill.danger { | |
| background: var(--danger); | |
| } | |
| .prob-value { | |
| font-size: 11px; | |
| font-weight: 600; | |
| width: 45px; | |
| text-align: right; | |
| } | |
| /* FEATURES GRID */ | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); | |
| gap: 8px; | |
| margin-bottom: 32px; | |
| } | |
| .feature-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 12px 16px; | |
| background: var(--bg-secondary); | |
| border-left: 2px solid var(--border); | |
| font-size: 12px; | |
| transition: border-color 0.2s; | |
| } | |
| .feature-item:hover { | |
| border-left-color: var(--text); | |
| } | |
| .feature-item.highlight-safe { | |
| border-left-color: var(--safe); | |
| background: var(--safe-bg); | |
| } | |
| .feature-item.highlight-danger { | |
| border-left-color: var(--danger); | |
| background: var(--danger-bg); | |
| } | |
| .feature-label { | |
| color: var(--text-secondary); | |
| font-size: 11px; | |
| } | |
| .feature-value { | |
| font-weight: 600; | |
| font-family: 'SF Mono', 'Monaco', monospace; | |
| font-size: 12px; | |
| } | |
| .feature-value.true { | |
| color: var(--safe); | |
| } | |
| .feature-value.false { | |
| color: var(--danger); | |
| } | |
| .show-more-btn { width: 100%; margin-top: 16px; } | |
| [id^="hiddenFeatures-"] { | |
| display: contents; | |
| } | |
| [id^="hiddenFeatures-"].features-hidden { | |
| display: none; | |
| } | |
| /* FOOTER */ | |
| footer { | |
| padding: 32px 0; | |
| border-top: 1px solid var(--border); | |
| text-align: center; | |
| } | |
| .footer-text { | |
| font-size: 10px; | |
| color: var(--text-secondary); | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| } | |
| .learn-more-btn { margin-top: 16px; padding: 12px 28px; } | |
| /* TAB COUNT BADGE */ | |
| .tab-count { | |
| display: inline-block; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border); | |
| font-size: 10px; | |
| font-weight: 700; | |
| padding: 1px 6px; | |
| margin-left: 4px; | |
| vertical-align: middle; | |
| } | |
| .tab.active .tab-count { | |
| background: var(--text); | |
| color: var(--bg); | |
| border-color: var(--text); | |
| } | |
| /* FEATURE SPLIT BAR */ | |
| .feature-split { | |
| margin-top: 16px; | |
| } | |
| .feature-split-bar { | |
| display: flex; | |
| height: 32px; | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| } | |
| .split-url { | |
| background: var(--bg-secondary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 10px; | |
| font-weight: 600; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| border-right: 1px solid var(--border); | |
| } | |
| .split-html { | |
| background: var(--text); | |
| color: var(--bg); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 10px; | |
| font-weight: 600; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| } | |
| /* COMBINED FEATURES TABS */ | |
| .combined-features-tabs { | |
| margin-top: 32px; | |
| } | |
| /* ERROR NOTICE */ | |
| .error-notice { | |
| font-size: 12px; | |
| color: var(--danger); | |
| padding: 16px 20px; | |
| background: var(--danger-bg); | |
| border-left: 2px solid var(--danger); | |
| margin: 16px 0; | |
| } | |
| /* RESPONSIVE */ | |
| @media (max-width: 640px) { | |
| header { | |
| padding: 32px 0; | |
| } | |
| .input-section { | |
| padding: 32px 0; | |
| } | |
| .input-wrapper { | |
| flex-direction: column; | |
| } | |
| input[type="text"] { | |
| border-right: 1px solid var(--border); | |
| border-bottom: none; | |
| } | |
| .btn { | |
| width: 100%; | |
| } | |
| .btn-group { | |
| flex-direction: column; | |
| } | |
| .models-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .status-title { | |
| font-size: 22px; | |
| } | |
| .status-headline { | |
| gap: 10px; | |
| } | |
| .status-icon { | |
| font-size: 26px; | |
| } | |
| .banner-score-value { | |
| font-size: 14px; | |
| } | |
| } | |
| /* ============================================= | |
| MODELS PAGE | |
| ============================================= */ | |
| /* MODELS PAGE - HEADER */ | |
| .models-page header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-end; | |
| } | |
| .header-left { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .logo a { | |
| color: var(--text); | |
| text-decoration: none; | |
| } | |
| .logo a:hover { | |
| opacity: 0.7; | |
| } | |
| .back-link { padding: 8px 16px; } | |
| /* PAGE TITLE */ | |
| .page-title-section { | |
| padding: 48px 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .page-title { | |
| font-size: 28px; | |
| font-weight: 700; | |
| letter-spacing: 0.02em; | |
| margin-bottom: 8px; | |
| } | |
| .page-description { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| max-width: 640px; | |
| } | |
| /* SECTION */ | |
| .section { | |
| padding: 40px 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .section:last-child { | |
| border-bottom: none; | |
| } | |
| .section-subtitle { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| margin-bottom: 24px; | |
| line-height: 1.5; | |
| } | |
| /* COMPARISON TABLE */ | |
| .comparison-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 13px; | |
| margin-bottom: 24px; | |
| } | |
| .comparison-table th { | |
| text-align: left; | |
| padding: 12px 16px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| color: var(--text-secondary); | |
| border-bottom: 2px solid var(--border); | |
| white-space: nowrap; | |
| } | |
| .comparison-table td { | |
| padding: 12px 16px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .comparison-table tr:hover td { | |
| background: var(--bg-secondary); | |
| } | |
| .comparison-table .model-name-cell { | |
| font-weight: 600; | |
| font-size: 12px; | |
| } | |
| .comparison-table .best { | |
| color: var(--safe); | |
| font-weight: 700; | |
| } | |
| /* METRIC CARDS */ | |
| .metrics-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); | |
| gap: 16px; | |
| margin-bottom: 32px; | |
| } | |
| .metric-card { | |
| padding: 20px; | |
| border: 1px solid var(--border); | |
| text-align: center; | |
| } | |
| .metric-value { | |
| font-size: 28px; | |
| font-weight: 700; | |
| margin-bottom: 4px; | |
| } | |
| .metric-label { | |
| font-size: 10px; | |
| color: var(--text-secondary); | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| } | |
| .metric-value.highlight { | |
| color: var(--safe); | |
| } | |
| /* MODEL DETAIL CARDS */ | |
| .model-detail { | |
| margin-bottom: 40px; | |
| padding: 32px; | |
| border: 1px solid var(--border); | |
| border-left: 3px solid var(--accent); | |
| } | |
| .model-detail-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: 24px; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| .model-detail-name { | |
| font-size: 16px; | |
| font-weight: 700; | |
| letter-spacing: 0.02em; | |
| } | |
| .model-detail-type { | |
| font-size: 10px; | |
| font-weight: 600; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--text-secondary); | |
| padding: 4px 10px; | |
| border: 1px solid var(--border); | |
| } | |
| /* CONFUSION MATRIX */ | |
| .confusion-matrix { | |
| display: inline-grid; | |
| grid-template-columns: auto auto auto; | |
| gap: 0; | |
| margin: 16px 0; | |
| font-size: 13px; | |
| } | |
| .cm-header { | |
| padding: 8px 20px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--text-secondary); | |
| text-align: center; | |
| } | |
| .cm-cell { | |
| padding: 16px 24px; | |
| text-align: center; | |
| font-weight: 700; | |
| font-size: 14px; | |
| font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace; | |
| border: 1px solid var(--border); | |
| } | |
| .cm-tp { background: var(--safe-bg); color: var(--safe); } | |
| .cm-tn { background: var(--safe-bg); color: var(--safe); } | |
| .cm-fp { background: var(--danger-bg); color: var(--danger); } | |
| .cm-fn { background: var(--danger-bg); color: var(--danger); } | |
| .cm-label { | |
| padding: 8px 16px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--text-secondary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /* FEATURES LIST */ | |
| .features-list { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 4px; | |
| margin-top: 16px; | |
| } | |
| .feature-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 10px 16px; | |
| background: var(--bg-secondary); | |
| font-size: 12px; | |
| } | |
| .feature-row:nth-child(even) { | |
| background: var(--bg); | |
| } | |
| .feature-rank { | |
| font-size: 10px; | |
| color: var(--text-secondary); | |
| font-weight: 600; | |
| width: 24px; | |
| flex-shrink: 0; | |
| } | |
| .feature-name { | |
| flex: 1; | |
| font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace; | |
| font-size: 11px; | |
| } | |
| .feature-importance { | |
| font-weight: 700; | |
| font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace; | |
| font-size: 11px; | |
| text-align: right; | |
| width: 70px; | |
| flex-shrink: 0; | |
| } | |
| .importance-bar-bg { | |
| flex: 1; | |
| max-width: 120px; | |
| height: 4px; | |
| background: var(--border); | |
| margin: 0 12px; | |
| flex-shrink: 0; | |
| } | |
| .importance-bar-fill { | |
| height: 100%; | |
| background: var(--text); | |
| } | |
| /* HYPERPARAMS */ | |
| .params-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 8px; | |
| } | |
| .param-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 10px 16px; | |
| background: var(--bg-secondary); | |
| font-size: 12px; | |
| } | |
| .param-key { | |
| color: var(--text-secondary); | |
| font-size: 11px; | |
| } | |
| .param-value { | |
| font-weight: 600; | |
| font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace; | |
| font-size: 11px; | |
| } | |
| /* PIPELINE DIAGRAM */ | |
| .pipeline { | |
| display: flex; | |
| margin: 24px 0; | |
| counter-reset: step; | |
| } | |
| .pipeline-step { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 12px; | |
| border: 1px solid var(--border); | |
| border-right: none; | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| background: var(--bg); | |
| position: relative; | |
| } | |
| .pipeline-step:last-child { border-right: 1px solid var(--border); } | |
| /* Arrow connector between steps */ | |
| .pipeline-step:not(:last-child)::after { | |
| content: '\2192'; | |
| position: absolute; | |
| right: -4px; | |
| top: 50%; | |
| transform: translate(50%, -50%); | |
| font-size: 11px; | |
| color: var(--text-secondary); | |
| background: var(--bg); | |
| z-index: 1; | |
| padding: 2px 0; | |
| line-height: 1; | |
| } | |
| .pipeline-step .step-number { | |
| width: 22px; | |
| height: 22px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| background: var(--text); | |
| color: var(--bg); | |
| font-size: 11px; | |
| font-weight: 700; | |
| flex-shrink: 0; | |
| line-height: 1; | |
| } | |
| /* COLLAPSIBLE TOGGLE */ | |
| .collapsible-toggle { | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| user-select: none; | |
| } | |
| .collapsible-toggle:hover { | |
| color: var(--text); | |
| } | |
| .toggle-icon { | |
| margin-left: auto; | |
| font-size: 16px; | |
| font-weight: 400; | |
| color: var(--text-secondary); | |
| transition: transform 0.2s; | |
| flex-shrink: 0; | |
| width: 20px; | |
| text-align: center; | |
| line-height: 1; | |
| } | |
| .collapsible-content { | |
| display: none; | |
| padding-top: 8px; | |
| } | |
| .collapsible-content.open { | |
| display: block; | |
| } | |
| /* FEATURE GRID */ | |
| .feature-count { | |
| font-weight: 400; | |
| color: var(--text-secondary); | |
| letter-spacing: 0.05em; | |
| margin-left: 8px; | |
| } | |
| .feature-category-label { | |
| font-size: 12px; | |
| font-weight: 700; | |
| letter-spacing: 0.04em; | |
| margin: 24px 0 10px; | |
| color: var(--text); | |
| } | |
| .feature-category-label:first-of-type { | |
| margin-top: 0; | |
| } | |
| .feature-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 6px; | |
| } | |
| .feature-chip { | |
| position: relative; | |
| padding: 8px 12px; | |
| font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace; | |
| font-size: 11px; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border); | |
| cursor: default; | |
| transition: all 0.15s; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .feature-chip:hover { | |
| border-color: var(--text); | |
| background: var(--bg); | |
| overflow: visible; | |
| } | |
| .feature-chip:hover::after { | |
| content: attr(data-tip); | |
| position: absolute; | |
| bottom: calc(100% + 10px); | |
| left: 50%; | |
| transform: translateX(-50%); | |
| padding: 12px 16px; | |
| background: var(--text); | |
| color: var(--bg); | |
| font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| font-size: 12px; | |
| line-height: 1.5; | |
| white-space: normal; | |
| width: max-content; | |
| max-width: 300px; | |
| z-index: 1000; | |
| pointer-events: none; | |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); | |
| } | |
| .feature-chip:hover::before { | |
| content: ''; | |
| position: absolute; | |
| bottom: calc(100% + 4px); | |
| left: 50%; | |
| transform: translateX(-50%); | |
| border: 6px solid transparent; | |
| border-top-color: var(--text); | |
| z-index: 1000; | |
| pointer-events: none; | |
| } | |
| /* SUBSECTION SPACER */ | |
| .subsection { | |
| margin-top: 24px; | |
| } | |
| /* TABLE SCROLL WRAPPER */ | |
| .table-scroll { | |
| overflow-x: auto; | |
| margin-bottom: 32px; | |
| } | |
| /* INSIGHT CARDS (comparison tab) */ | |
| .insights-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 16px; | |
| } | |
| .insight-card { | |
| padding: 20px; | |
| border: 1px solid var(--border); | |
| } | |
| .insight-card.insight-safe { border-left: 3px solid var(--safe); } | |
| .insight-card.insight-accent { border-left: 3px solid var(--accent); } | |
| .insight-label { | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| margin-bottom: 8px; | |
| } | |
| .insight-title { | |
| font-size: 16px; | |
| font-weight: 700; | |
| margin-bottom: 4px; | |
| } | |
| .insight-desc { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| /* MODELS PAGE RESPONSIVE */ | |
| @media (max-width: 640px) { | |
| .models-page header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 16px; | |
| } | |
| .page-title { | |
| font-size: 22px; | |
| } | |
| .comparison-table { | |
| font-size: 11px; | |
| } | |
| .comparison-table th, | |
| .comparison-table td { | |
| padding: 8px 10px; | |
| } | |
| .metrics-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .model-detail { | |
| padding: 20px; | |
| } | |
| .pipeline { | |
| flex-wrap: wrap; | |
| } | |
| .pipeline-step { | |
| flex: 1 1 40%; | |
| border-right: 1px solid var(--border); | |
| margin: -0.5px; | |
| } | |
| .pipeline-step:not(:last-child)::after { display: none; } | |
| .confusion-matrix { | |
| font-size: 11px; | |
| } | |
| .cm-cell { | |
| padding: 12px 16px; | |
| font-size: 12px; | |
| } | |
| .feature-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |