| :root { |
| --bg-0: #0d0f12; |
| --bg-1: #13161a; |
| --bg-2: #191d22; |
| --bg-3: #232930; |
| --bg-4: #2d353d; |
| --surface: rgba(242, 245, 247, 0.05); |
| --surface-strong: rgba(242, 245, 247, 0.08); |
| --surface-hover: rgba(242, 245, 247, 0.12); |
| --panel-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%); |
| --metal-band: linear-gradient(135deg, rgba(236, 240, 244, 0.14) 0%, rgba(157, 167, 176, 0.07) 55%, rgba(255, 166, 79, 0.08) 100%); |
| --border: rgba(220, 226, 232, 0.16); |
| --border-strong: rgba(220, 226, 232, 0.22); |
| --border-active: rgba(255, 151, 60, 0.58); |
|
|
| --text-primary: #f2f5f7; |
| --text-secondary: #d1d7dd; |
| --text-muted: #96a0aa; |
| --text-dim: #707982; |
|
|
| --silver-0: #f5f7fa; |
| --silver-1: #dde3e8; |
| --silver-2: #bcc4cc; |
| --silver-3: #8f98a2; |
|
|
| --accent-orange: #ff9a3d; |
| --accent-orange-strong: #ff7f11; |
| --accent-orange-soft: #ffc27a; |
| --accent-green: #51cb91; |
| --accent-red: #ff7878; |
|
|
| --grad-primary: linear-gradient(135deg, #ff7f11 0%, #ffbe72 100%); |
| --grad-border: linear-gradient(90deg, rgba(244, 247, 250, 0.08) 0%, rgba(255, 149, 61, 0.52) 100%); |
|
|
| --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.34); |
| --shadow-glow: 0 0 28px rgba(255, 145, 48, 0.16); |
|
|
| --space-xs: 4px; |
| --space-sm: 8px; |
| --space-md: 16px; |
| --space-lg: 24px; |
| --space-xl: 32px; |
| --space-2xl: 48px; |
|
|
| --radius-sm: 10px; |
| --radius-md: 14px; |
| --radius-lg: 20px; |
| --radius-xl: 28px; |
| --radius-full: 999px; |
|
|
| --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; |
| --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace; |
| } |
|
|
| *, |
| *::before, |
| *::after { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| html { |
| font-size: 16px; |
| scroll-behavior: smooth; |
| } |
|
|
| body { |
| min-height: 100vh; |
| font-family: var(--font-sans); |
| color: var(--text-primary); |
| line-height: 1.6; |
| background: |
| radial-gradient(circle at top right, rgba(255, 148, 54, 0.18), transparent 30%), |
| radial-gradient(circle at 20% 18%, rgba(223, 229, 236, 0.12), transparent 28%), |
| linear-gradient(180deg, #111317 0%, #161a1e 36%, #0e1013 100%); |
| -webkit-font-smoothing: antialiased; |
| } |
|
|
| body::before, |
| body::after { |
| content: ""; |
| position: fixed; |
| inset: auto; |
| pointer-events: none; |
| z-index: -1; |
| } |
|
|
| body::before { |
| top: -120px; |
| right: -120px; |
| width: 420px; |
| height: 420px; |
| border-radius: 50%; |
| background: radial-gradient(circle, rgba(255, 145, 48, 0.14) 0%, transparent 70%); |
| } |
|
|
| body::after { |
| bottom: -140px; |
| left: -140px; |
| width: 420px; |
| height: 420px; |
| border-radius: 50%; |
| background: radial-gradient(circle, rgba(220, 228, 236, 0.08) 0%, transparent 72%); |
| } |
|
|
| .header { |
| position: sticky; |
| top: 0; |
| z-index: 100; |
| padding: 20px var(--space-2xl); |
| border-bottom: 1px solid var(--border); |
| background: rgba(14, 16, 20, 0.82); |
| backdrop-filter: blur(24px); |
| } |
|
|
| .header__inner { |
| max-width: 1240px; |
| margin: 0 auto; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: var(--space-lg); |
| } |
|
|
| .header__copy { |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| } |
|
|
| .header__brand { |
| display: flex; |
| align-items: center; |
| gap: 14px; |
| } |
|
|
| .header__logo { |
| display: grid; |
| place-items: center; |
| width: 48px; |
| height: 48px; |
| border-radius: 16px; |
| background: linear-gradient(145deg, rgba(242, 245, 247, 0.1), rgba(255, 151, 60, 0.09)); |
| border: 1px solid rgba(236, 241, 244, 0.16); |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-glow); |
| animation: pulse-glow 4s ease-in-out infinite; |
| } |
|
|
| @keyframes pulse-glow { |
| 0%, |
| 100% { |
| transform: translateY(0); |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 20px rgba(255, 151, 60, 0.12); |
| } |
|
|
| 50% { |
| transform: translateY(-1px); |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 28px rgba(255, 151, 60, 0.2); |
| } |
| } |
|
|
| .header__title { |
| font-size: 1.9rem; |
| font-weight: 800; |
| letter-spacing: -0.04em; |
| color: var(--silver-0); |
| text-shadow: 0 0 12px rgba(255, 255, 255, 0.04); |
| } |
|
|
| .header__badge { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| padding: 4px 12px; |
| border-radius: var(--radius-full); |
| font-size: 0.72rem; |
| font-weight: 700; |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| color: #2f1600; |
| background: linear-gradient(135deg, #ffc27a, #ff8b1e); |
| box-shadow: 0 8px 24px rgba(255, 139, 30, 0.26); |
| } |
|
|
| .header__subtitle { |
| max-width: 760px; |
| color: var(--text-secondary); |
| font-size: 0.92rem; |
| } |
|
|
| .header__status { |
| display: inline-flex; |
| align-items: center; |
| gap: 10px; |
| padding: 10px 16px; |
| border-radius: var(--radius-full); |
| background: rgba(240, 244, 247, 0.06); |
| border: 1px solid rgba(240, 244, 247, 0.12); |
| color: var(--silver-1); |
| font-size: 0.8rem; |
| font-weight: 600; |
| white-space: nowrap; |
| } |
|
|
| .header__status::before { |
| content: ""; |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: var(--accent-orange); |
| box-shadow: 0 0 12px rgba(255, 151, 60, 0.65); |
| } |
|
|
| .query-bar, |
| .upload-zone, |
| .stage-rail, |
| .footer { |
| padding-left: var(--space-2xl); |
| padding-right: var(--space-2xl); |
| } |
|
|
| .query-bar { |
| padding-top: var(--space-lg); |
| } |
|
|
| .query-bar__inner, |
| .query-bar__meta, |
| .upload-zone__inner, |
| .stage-rail__track, |
| .footer span { |
| max-width: 1240px; |
| margin-left: auto; |
| margin-right: auto; |
| } |
|
|
| .query-bar__inner { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) auto auto; |
| gap: 14px; |
| padding: 18px; |
| border-radius: 26px; |
| background: linear-gradient(180deg, rgba(244, 247, 250, 0.08), rgba(244, 247, 250, 0.03)); |
| border: 1px solid rgba(240, 244, 247, 0.12); |
| box-shadow: var(--shadow-soft); |
| } |
|
|
| .query-bar__meta { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: var(--space-md); |
| margin-top: 12px; |
| padding: 0 6px; |
| } |
|
|
| .query-bar__scope { |
| color: var(--text-secondary); |
| font-size: 0.82rem; |
| letter-spacing: 0.01em; |
| } |
|
|
| .query-bar__detail { |
| display: inline-flex; |
| align-items: center; |
| gap: 12px; |
| } |
|
|
| .query-bar__detail-label { |
| color: var(--text-muted); |
| font-size: 0.74rem; |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: 0.12em; |
| } |
|
|
| .query-bar__input, |
| .query-bar__select { |
| border: 1px solid rgba(236, 241, 244, 0.12); |
| background: rgba(9, 11, 14, 0.5); |
| color: var(--text-primary); |
| outline: none; |
| transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease; |
| } |
|
|
| .query-bar__input { |
| min-width: 0; |
| padding: 17px 20px; |
| border-radius: 18px; |
| font-size: 0.98rem; |
| } |
|
|
| .query-bar__input::placeholder { |
| color: var(--text-dim); |
| } |
|
|
| .query-bar__input:focus, |
| .query-bar__select:focus { |
| border-color: var(--border-active); |
| box-shadow: 0 0 0 4px rgba(255, 145, 48, 0.13); |
| background: rgba(12, 15, 19, 0.72); |
| } |
|
|
| .query-bar__select { |
| min-width: 156px; |
| padding: 11px 14px; |
| border-radius: 14px; |
| font-size: 0.86rem; |
| } |
|
|
| .query-bar__btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 10px; |
| padding: 0 24px; |
| min-height: 58px; |
| border: 1px solid transparent; |
| border-radius: 18px; |
| font-family: var(--font-sans); |
| font-size: 0.92rem; |
| font-weight: 700; |
| color: #1f1408; |
| background: var(--grad-primary); |
| cursor: pointer; |
| transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease; |
| box-shadow: 0 14px 30px rgba(255, 138, 29, 0.2); |
| } |
|
|
| .query-bar__btn:hover:not(:disabled) { |
| transform: translateY(-1px); |
| filter: brightness(1.03); |
| box-shadow: 0 18px 34px rgba(255, 138, 29, 0.24); |
| } |
|
|
| .query-bar__btn:active:not(:disabled) { |
| transform: translateY(0); |
| } |
|
|
| .query-bar__btn:disabled { |
| opacity: 0.48; |
| cursor: not-allowed; |
| box-shadow: none; |
| } |
|
|
| .query-bar__btn--bench { |
| color: var(--silver-0); |
| background: linear-gradient(180deg, rgba(245, 248, 250, 0.08), rgba(245, 248, 250, 0.03)); |
| border-color: rgba(255, 151, 60, 0.45); |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); |
| } |
|
|
| .query-bar__btn--bench:hover:not(:disabled) { |
| color: var(--silver-0); |
| border-color: rgba(255, 151, 60, 0.75); |
| } |
|
|
| .btn-icon { |
| font-size: 0.8rem; |
| } |
|
|
| .upload-zone { |
| padding-top: 18px; |
| padding-bottom: 8px; |
| } |
|
|
| .upload-zone__inner { |
| display: grid; |
| gap: 16px; |
| } |
|
|
| .upload-zone__droparea, |
| .upload-zone__corpus { |
| background: var(--metal-band); |
| border: 1px solid var(--border); |
| border-radius: 24px; |
| box-shadow: var(--shadow-soft); |
| } |
|
|
| .upload-zone__droparea { |
| position: relative; |
| padding: 38px 28px; |
| text-align: center; |
| cursor: pointer; |
| overflow: hidden; |
| transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; |
| } |
|
|
| .upload-zone__droparea::before { |
| content: ""; |
| position: absolute; |
| inset: 10px; |
| border: 1px dashed rgba(236, 241, 244, 0.14); |
| border-radius: 18px; |
| } |
|
|
| .upload-zone__droparea:hover, |
| .upload-zone__droparea.dragover { |
| border-color: rgba(255, 151, 60, 0.56); |
| box-shadow: 0 24px 42px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 151, 60, 0.08); |
| transform: translateY(-1px); |
| } |
|
|
| .upload-zone__icon { |
| position: relative; |
| z-index: 1; |
| font-size: 2rem; |
| margin-bottom: 10px; |
| } |
|
|
| .upload-zone__text, |
| .upload-zone__hint { |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .upload-zone__text { |
| color: var(--text-secondary); |
| font-size: 0.95rem; |
| } |
|
|
| .upload-zone__text strong { |
| color: var(--silver-0); |
| } |
|
|
| .upload-zone__browse { |
| color: var(--accent-orange-soft); |
| text-decoration: underline; |
| text-decoration-thickness: 2px; |
| text-underline-offset: 2px; |
| font-weight: 700; |
| cursor: pointer; |
| } |
|
|
| .upload-zone__hint { |
| margin-top: 6px; |
| color: var(--text-muted); |
| font-size: 0.75rem; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| } |
|
|
| .upload-zone__input { |
| display: none; |
| } |
|
|
| .upload-zone__status { |
| display: grid; |
| gap: 8px; |
| } |
|
|
| .upload-zone__status:empty { |
| display: none; |
| } |
|
|
| .upload-status-item { |
| padding: 10px 12px; |
| border-radius: 14px; |
| border: 1px solid rgba(240, 244, 247, 0.08); |
| background: rgba(240, 244, 247, 0.04); |
| color: var(--text-secondary); |
| animation: fadeInUp 0.3s ease-out; |
| } |
|
|
| .upload-status-item--success { |
| border-color: rgba(81, 203, 145, 0.22); |
| background: rgba(81, 203, 145, 0.1); |
| color: #9bf0c2; |
| } |
|
|
| .upload-status-item--error { |
| border-color: rgba(255, 120, 120, 0.22); |
| background: rgba(255, 120, 120, 0.1); |
| color: #ffc2c2; |
| } |
|
|
| .upload-status-item--loading { |
| border-color: rgba(255, 151, 60, 0.24); |
| background: rgba(255, 151, 60, 0.11); |
| color: var(--accent-orange-soft); |
| } |
|
|
| .upload-steps { |
| padding: 16px 18px; |
| border-radius: 20px; |
| background: linear-gradient(180deg, rgba(255, 151, 60, 0.12), rgba(244, 247, 250, 0.05)); |
| border: 1px solid rgba(255, 151, 60, 0.18); |
| box-shadow: var(--shadow-soft); |
| } |
|
|
| .upload-steps__title { |
| margin-bottom: 10px; |
| color: var(--silver-0); |
| font-weight: 700; |
| } |
|
|
| .upload-step { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 6px 0; |
| color: var(--text-muted); |
| transition: color 0.3s ease, opacity 0.3s ease; |
| } |
|
|
| .upload-step--active { |
| color: var(--silver-0); |
| } |
|
|
| .upload-step--complete { |
| color: #92e7ba; |
| } |
|
|
| .upload-step__icon { |
| width: 20px; |
| text-align: center; |
| } |
|
|
| .upload-zone__corpus { |
| padding: 18px; |
| } |
|
|
| .corpus-header { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: var(--space-md); |
| margin-bottom: 14px; |
| } |
|
|
| .corpus-header__copy { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| } |
|
|
| .corpus-header__title { |
| color: var(--silver-0); |
| font-size: 0.88rem; |
| font-weight: 700; |
| letter-spacing: 0.02em; |
| } |
|
|
| .corpus-header__summary { |
| color: var(--text-muted); |
| font-size: 0.74rem; |
| } |
|
|
| .corpus-header__refresh { |
| width: 36px; |
| height: 36px; |
| border-radius: 12px; |
| border: 1px solid rgba(236, 241, 244, 0.12); |
| background: rgba(240, 244, 247, 0.04); |
| color: var(--text-muted); |
| cursor: pointer; |
| transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; |
| } |
|
|
| .corpus-header__refresh:hover:not(:disabled) { |
| color: var(--accent-orange-soft); |
| border-color: rgba(255, 151, 60, 0.36); |
| transform: translateY(-1px); |
| } |
|
|
| .corpus-docs { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 10px; |
| color: var(--text-muted); |
| } |
|
|
| .corpus-doc-chip { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| min-height: 42px; |
| padding: 8px 14px; |
| border-radius: var(--radius-full); |
| border: 1px solid rgba(236, 241, 244, 0.11); |
| background: rgba(240, 244, 247, 0.04); |
| color: var(--text-secondary); |
| font-family: var(--font-mono); |
| font-size: 0.72rem; |
| cursor: pointer; |
| transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; |
| } |
|
|
| .corpus-doc-chip:hover { |
| transform: translateY(-1px); |
| border-color: rgba(255, 151, 60, 0.36); |
| background: rgba(240, 244, 247, 0.06); |
| } |
|
|
| .corpus-doc-chip--selected { |
| border-color: rgba(255, 151, 60, 0.5); |
| background: linear-gradient(180deg, rgba(255, 151, 60, 0.18), rgba(240, 244, 247, 0.08)); |
| color: var(--silver-0); |
| box-shadow: 0 10px 22px rgba(255, 145, 48, 0.12); |
| } |
|
|
| .corpus-doc-chip--muted { |
| opacity: 0.68; |
| cursor: default; |
| } |
|
|
| .corpus-doc-chip--muted:hover { |
| transform: none; |
| border-color: rgba(236, 241, 244, 0.11); |
| background: rgba(240, 244, 247, 0.04); |
| } |
|
|
| .corpus-doc-chip__name { |
| max-width: 220px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .corpus-doc-chip__size { |
| color: var(--text-dim); |
| font-size: 0.64rem; |
| } |
|
|
| .corpus-doc-chip__state { |
| padding: 2px 8px; |
| border-radius: var(--radius-full); |
| background: rgba(240, 244, 247, 0.08); |
| color: var(--text-muted); |
| font-size: 0.62rem; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
|
|
| .corpus-doc-chip__delete { |
| border: none; |
| background: none; |
| color: var(--text-dim); |
| cursor: pointer; |
| font-size: 0.8rem; |
| line-height: 1; |
| transition: color 0.2s ease, transform 0.2s ease; |
| } |
|
|
| .corpus-doc-chip__delete:hover { |
| color: var(--accent-red); |
| transform: scale(1.08); |
| } |
|
|
| .stage-rail { |
| padding-top: 18px; |
| padding-bottom: 12px; |
| overflow-x: auto; |
| } |
|
|
| .stage-rail__track { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| min-width: fit-content; |
| } |
|
|
| .stage-card { |
| min-width: 150px; |
| padding: 20px 22px; |
| border-radius: 22px; |
| text-align: center; |
| border: 1px solid rgba(236, 241, 244, 0.11); |
| background: linear-gradient(180deg, rgba(244, 247, 250, 0.08), rgba(244, 247, 250, 0.03)); |
| box-shadow: var(--shadow-soft); |
| transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease; |
| } |
|
|
| .stage-card.active { |
| transform: translateY(-3px); |
| border-color: rgba(255, 151, 60, 0.54); |
| background: linear-gradient(180deg, rgba(255, 151, 60, 0.15), rgba(244, 247, 250, 0.05)); |
| box-shadow: 0 18px 32px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(255, 151, 60, 0.08); |
| } |
|
|
| .stage-card.complete { |
| border-color: rgba(81, 203, 145, 0.34); |
| background: linear-gradient(180deg, rgba(81, 203, 145, 0.13), rgba(244, 247, 250, 0.04)); |
| } |
|
|
| .stage-card__number { |
| color: var(--text-dim); |
| font-size: 0.72rem; |
| font-family: var(--font-mono); |
| letter-spacing: 0.1em; |
| margin-bottom: 8px; |
| } |
|
|
| .stage-card__label { |
| color: var(--silver-0); |
| font-size: 1rem; |
| font-weight: 800; |
| letter-spacing: 0.08em; |
| margin-bottom: 10px; |
| } |
|
|
| .stage-card__status { |
| color: var(--text-muted); |
| font-size: 0.73rem; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| font-family: var(--font-mono); |
| } |
|
|
| .stage-card.active .stage-card__status { |
| color: var(--accent-orange-soft); |
| } |
|
|
| .stage-card.complete .stage-card__status { |
| color: #92e7ba; |
| } |
|
|
| .stage-rail__connector { |
| width: 54px; |
| height: 2px; |
| background: linear-gradient(90deg, rgba(236, 241, 244, 0.12), rgba(236, 241, 244, 0.04)); |
| transition: background 0.35s ease, box-shadow 0.35s ease; |
| } |
|
|
| .stage-rail__connector.active { |
| background: linear-gradient(90deg, rgba(255, 151, 60, 0.4), rgba(255, 196, 118, 0.85)); |
| box-shadow: 0 0 14px rgba(255, 151, 60, 0.18); |
| } |
|
|
| .dashboard { |
| max-width: 1400px; |
| margin: 0 auto; |
| display: grid; |
| grid-template-columns: 1.25fr 1fr; |
| gap: var(--space-lg); |
| padding: var(--space-lg) var(--space-2xl) var(--space-2xl); |
| } |
|
|
| .panel { |
| border-radius: 26px; |
| border: 1px solid rgba(236, 241, 244, 0.1); |
| background: linear-gradient(180deg, rgba(244, 247, 250, 0.08), rgba(244, 247, 250, 0.03)); |
| overflow: hidden; |
| box-shadow: var(--shadow-soft); |
| transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease; |
| } |
|
|
| .panel:hover { |
| transform: translateY(-2px); |
| border-color: rgba(236, 241, 244, 0.16); |
| } |
|
|
| .panel__title { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 18px 22px; |
| border-bottom: 1px solid rgba(236, 241, 244, 0.08); |
| color: var(--silver-0); |
| font-size: 0.86rem; |
| font-weight: 700; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| } |
|
|
| .panel__icon { |
| font-size: 1rem; |
| } |
|
|
| .panel__body { |
| padding: 22px; |
| max-height: 520px; |
| overflow-y: auto; |
| } |
|
|
| .panel__body::-webkit-scrollbar { |
| width: 6px; |
| } |
|
|
| .panel__body::-webkit-scrollbar-track { |
| background: transparent; |
| } |
|
|
| .panel__body::-webkit-scrollbar-thumb { |
| border-radius: 999px; |
| background: rgba(236, 241, 244, 0.12); |
| } |
|
|
| .panel__placeholder { |
| padding: 28px 8px; |
| color: var(--text-muted); |
| text-align: center; |
| font-size: 0.9rem; |
| } |
|
|
| .panel--answer, |
| .panel--benchmark, |
| .panel--bus { |
| grid-column: 1 / -1; |
| } |
|
|
| .panel--answer { |
| border-color: rgba(255, 151, 60, 0.12); |
| } |
|
|
| .panel--benchmark { |
| border: 1px solid rgba(255, 151, 60, 0.18); |
| background: linear-gradient(180deg, rgba(255, 151, 60, 0.08), rgba(244, 247, 250, 0.03)); |
| } |
|
|
| .panel--benchmark[hidden] { |
| display: none; |
| } |
|
|
| .bench-body { |
| display: flex; |
| align-items: stretch; |
| justify-content: space-between; |
| gap: 18px; |
| } |
|
|
| .bench-loader { |
| width: 100%; |
| text-align: center; |
| padding: 24px; |
| color: var(--text-secondary); |
| } |
|
|
| .bench-col { |
| flex: 1; |
| padding: 20px; |
| border-radius: 22px; |
| border: 1px solid rgba(236, 241, 244, 0.1); |
| background: rgba(255, 255, 255, 0.03); |
| } |
|
|
| .bench-col--winner { |
| border-color: rgba(255, 151, 60, 0.4); |
| background: linear-gradient(180deg, rgba(255, 151, 60, 0.13), rgba(255, 255, 255, 0.04)); |
| box-shadow: 0 0 0 1px rgba(255, 151, 60, 0.08); |
| } |
|
|
| .bench-col__title { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| margin-bottom: 16px; |
| color: var(--silver-0); |
| font-size: 1rem; |
| } |
|
|
| .bench-col--winner .bench-col__title { |
| color: var(--accent-orange-soft); |
| } |
|
|
| .bench-vs { |
| display: flex; |
| align-items: center; |
| color: var(--text-dim); |
| font-weight: 800; |
| letter-spacing: 0.12em; |
| } |
|
|
| .bench-stat { |
| margin: 12px 0; |
| padding-bottom: 10px; |
| border-bottom: 1px solid rgba(236, 241, 244, 0.06); |
| } |
|
|
| .bench-stat:last-child { |
| border-bottom: none; |
| padding-bottom: 0; |
| } |
|
|
| .bench-stat__label { |
| display: block; |
| color: var(--text-dim); |
| font-size: 0.68rem; |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| } |
|
|
| .bench-stat__value { |
| margin-top: 4px; |
| color: var(--text-primary); |
| font-weight: 600; |
| } |
|
|
| .bench-stat__value--good { |
| color: #92e7ba; |
| } |
|
|
| .bench-stat__value--bad { |
| color: #ffb3b3; |
| } |
|
|
| .bench-answer { |
| margin-top: 6px; |
| padding: 12px; |
| border-radius: 14px; |
| background: rgba(0, 0, 0, 0.18); |
| color: var(--text-secondary); |
| font-size: 0.82rem; |
| line-height: 1.55; |
| max-height: 170px; |
| overflow-y: auto; |
| } |
|
|
| .evidence-card { |
| margin-bottom: 14px; |
| padding: 16px; |
| border-radius: 18px; |
| border: 1px solid rgba(236, 241, 244, 0.08); |
| background: rgba(255, 255, 255, 0.03); |
| transition: transform 0.18s ease, border-color 0.18s ease; |
| } |
|
|
| .evidence-card:hover { |
| transform: translateY(-1px); |
| border-color: rgba(255, 151, 60, 0.28); |
| } |
|
|
| .evidence-card__source { |
| margin-bottom: 8px; |
| color: var(--accent-orange-soft); |
| font-size: 0.73rem; |
| font-family: var(--font-mono); |
| } |
|
|
| .evidence-card__quote { |
| margin-bottom: 10px; |
| padding-left: 14px; |
| border-left: 2px solid rgba(255, 151, 60, 0.6); |
| color: var(--text-secondary); |
| font-size: 0.88rem; |
| font-style: italic; |
| } |
|
|
| .evidence-card__supports { |
| color: var(--text-muted); |
| font-size: 0.8rem; |
| } |
|
|
| .mode-badge { |
| display: inline-flex; |
| align-items: center; |
| padding: 3px 10px; |
| border-radius: var(--radius-full); |
| font-family: var(--font-mono); |
| font-size: 0.64rem; |
| font-weight: 700; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
|
|
| .mode-badge--quick { |
| color: var(--silver-1); |
| background: rgba(236, 241, 244, 0.08); |
| border: 1px solid rgba(236, 241, 244, 0.12); |
| } |
|
|
| .mode-badge--reasoning { |
| color: var(--accent-orange-soft); |
| background: rgba(255, 151, 60, 0.12); |
| border: 1px solid rgba(255, 151, 60, 0.2); |
| } |
|
|
| .mode-badge--vision { |
| color: var(--silver-0); |
| background: rgba(255, 196, 118, 0.1); |
| border: 1px solid rgba(255, 196, 118, 0.16); |
| } |
|
|
| .confidence-meter { |
| display: flex; |
| justify-content: center; |
| padding: var(--space-xl) var(--space-lg); |
| } |
|
|
| .confidence-meter__ring { |
| position: relative; |
| width: 132px; |
| height: 132px; |
| } |
|
|
| .confidence-meter__ring svg { |
| width: 100%; |
| height: 100%; |
| transform: rotate(-90deg); |
| } |
|
|
| .confidence-meter__bg { |
| fill: none; |
| stroke: rgba(236, 241, 244, 0.12); |
| stroke-width: 7; |
| } |
|
|
| .confidence-meter__fill { |
| fill: none; |
| stroke: var(--accent-orange); |
| stroke-width: 7; |
| stroke-linecap: round; |
| filter: drop-shadow(0 0 10px rgba(255, 151, 60, 0.28)); |
| transition: stroke-dashoffset 1.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
|
|
| .confidence-meter__value { |
| position: absolute; |
| inset: 0; |
| display: grid; |
| place-items: center; |
| font-size: 1.6rem; |
| font-weight: 800; |
| color: var(--silver-0); |
| } |
|
|
| .trace-item { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 12px; |
| padding: 11px 0; |
| border-bottom: 1px solid rgba(236, 241, 244, 0.06); |
| font-size: 0.85rem; |
| } |
|
|
| .trace-item:last-child { |
| border-bottom: none; |
| } |
|
|
| .trace-item__label { |
| color: var(--text-secondary); |
| } |
|
|
| .trace-item__value { |
| color: var(--text-primary); |
| font-size: 0.8rem; |
| font-weight: 600; |
| font-family: var(--font-mono); |
| text-align: right; |
| } |
|
|
| .trace-item__value--success { |
| color: #92e7ba; |
| } |
|
|
| .answer-section { |
| margin-bottom: 18px; |
| } |
|
|
| .answer-section__title { |
| margin-bottom: 10px; |
| padding-bottom: 8px; |
| border-bottom: 1px solid rgba(255, 151, 60, 0.2); |
| color: var(--accent-orange-soft); |
| font-size: 0.94rem; |
| font-weight: 800; |
| } |
|
|
| .answer-section__title--alert { |
| color: #ffb3b3; |
| border-bottom-color: rgba(255, 120, 120, 0.2); |
| } |
|
|
| .answer-section__content { |
| color: var(--text-secondary); |
| font-size: 0.9rem; |
| line-height: 1.7; |
| white-space: pre-wrap; |
| } |
|
|
| .spinner { |
| display: inline-block; |
| width: 16px; |
| height: 16px; |
| border: 2px solid rgba(236, 241, 244, 0.18); |
| border-top-color: var(--accent-orange); |
| border-radius: 50%; |
| animation: spin 0.8s linear infinite; |
| } |
|
|
| @keyframes spin { |
| to { |
| transform: rotate(360deg); |
| } |
| } |
|
|
| .status-dot { |
| display: inline-block; |
| width: 8px; |
| height: 8px; |
| margin-right: 6px; |
| border-radius: 50%; |
| } |
|
|
| .status-dot--running { |
| background: var(--accent-orange-soft); |
| animation: blink 1s infinite; |
| } |
|
|
| .status-dot--complete { |
| background: var(--accent-green); |
| } |
|
|
| @keyframes blink { |
| 0%, |
| 100% { |
| opacity: 1; |
| } |
|
|
| 50% { |
| opacity: 0.35; |
| } |
| } |
|
|
| .panel--bus { |
| background: linear-gradient(180deg, rgba(255, 151, 60, 0.06), rgba(244, 247, 250, 0.03)); |
| } |
|
|
| .bus-message { |
| display: flex; |
| gap: 12px; |
| padding: 12px 0; |
| border-bottom: 1px solid rgba(236, 241, 244, 0.06); |
| font-size: 0.82rem; |
| } |
|
|
| .bus-message:last-child { |
| border-bottom: none; |
| } |
|
|
| .bus-message__sender { |
| min-width: 110px; |
| color: var(--accent-orange-soft); |
| font-size: 0.75rem; |
| font-weight: 800; |
| text-transform: uppercase; |
| font-family: var(--font-mono); |
| } |
|
|
| .bus-message__type { |
| flex: 0 0 auto; |
| align-self: flex-start; |
| padding: 3px 8px; |
| border-radius: var(--radius-full); |
| background: rgba(240, 244, 247, 0.06); |
| color: var(--text-muted); |
| font-size: 0.72rem; |
| font-family: var(--font-mono); |
| } |
|
|
| .bus-message__content { |
| flex: 1; |
| color: var(--text-secondary); |
| white-space: pre-wrap; |
| } |
|
|
| .gap-item { |
| margin-top: 12px; |
| padding: 14px; |
| border-radius: 16px; |
| border: 1px solid rgba(255, 120, 120, 0.18); |
| background: rgba(255, 120, 120, 0.08); |
| } |
|
|
| .gap-item__title { |
| color: #ffb3b3; |
| font-size: 0.88rem; |
| font-weight: 800; |
| } |
|
|
| .alert-card { |
| padding: 16px; |
| border-radius: 16px; |
| border: 1px solid rgba(255, 120, 120, 0.18); |
| background: rgba(255, 120, 120, 0.08); |
| color: #ffd0d0; |
| } |
|
|
| .alert-card--error strong { |
| color: #ffdede; |
| } |
|
|
| .footer { |
| padding-top: 6px; |
| padding-bottom: var(--space-2xl); |
| } |
|
|
| .footer span { |
| display: block; |
| color: var(--text-dim); |
| font-size: 0.76rem; |
| text-align: center; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| } |
|
|
| .animate-in { |
| animation: fadeInUp 0.45s ease-out forwards; |
| } |
|
|
| @keyframes fadeInUp { |
| from { |
| opacity: 0; |
| transform: translateY(8px); |
| } |
|
|
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| @media (max-width: 1100px) { |
| .dashboard { |
| grid-template-columns: 1fr; |
| } |
|
|
| .bench-body { |
| flex-direction: column; |
| } |
|
|
| .bench-vs { |
| justify-content: center; |
| } |
| } |
|
|
| @media (max-width: 900px) { |
| .header, |
| .query-bar, |
| .upload-zone, |
| .stage-rail, |
| .footer, |
| .dashboard { |
| padding-left: var(--space-md); |
| padding-right: var(--space-md); |
| } |
|
|
| .header__inner, |
| .query-bar__meta { |
| flex-direction: column; |
| align-items: stretch; |
| } |
|
|
| .header__status { |
| width: fit-content; |
| } |
|
|
| .query-bar__inner { |
| grid-template-columns: 1fr; |
| } |
|
|
| .query-bar__detail { |
| justify-content: space-between; |
| } |
|
|
| .stage-card { |
| min-width: 120px; |
| } |
|
|
| .stage-rail__connector { |
| width: 28px; |
| } |
|
|
| .bus-message { |
| flex-direction: column; |
| } |
|
|
| .bus-message__sender { |
| min-width: 0; |
| } |
| } |
|
|
