Spaces:
Running
Running
| :root { | |
| --bg: #0b0e14; | |
| --bg-soft: #0f1320; | |
| --panel: #131827; | |
| --panel-2: #181f31; | |
| --border: #232b41; | |
| --text: #e7eaf3; | |
| --muted: #8e97ad; | |
| --accent: #6c8cff; | |
| --accent-strong: #8ba4ff; | |
| --accent-2: #22d3aa; | |
| --danger: #ff6b7a; | |
| --warning: #ffc46b; | |
| --radius: 12px; | |
| --radius-lg: 16px; | |
| --sidebar-width: 288px; | |
| --shadow: 0 8px 32px rgba(0, 0, 0, 0.35); | |
| --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; | |
| --mono: "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace; | |
| } | |
| * { box-sizing: border-box; } | |
| html, body, #root { height: 100%; } | |
| body { | |
| margin: 0; | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: var(--font); | |
| font-size: 15px; | |
| line-height: 1.55; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| button { font-family: inherit; cursor: pointer; } | |
| input, textarea, select { font-family: inherit; } | |
| ::-webkit-scrollbar { width: 9px; height: 9px; } | |
| ::-webkit-scrollbar-thumb { background: #2a3350; border-radius: 8px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| /* ---------------------------------------------------------------- layout */ | |
| .app-shell { display: flex; height: 100%; overflow: hidden; } | |
| .main-column { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| background: | |
| radial-gradient(1200px 500px at 80% -10%, rgba(108, 140, 255, 0.07), transparent 60%), | |
| radial-gradient(900px 400px at 10% 110%, rgba(34, 211, 170, 0.05), transparent 60%), | |
| var(--bg); | |
| } | |
| /* ---------------------------------------------------------------- sidebar */ | |
| .sidebar { | |
| width: var(--sidebar-width); | |
| background: var(--bg-soft); | |
| border-right: 1px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| flex-shrink: 0; | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 18px 16px 14px; | |
| font-weight: 700; | |
| font-size: 17px; | |
| letter-spacing: 0.2px; | |
| } | |
| .brand-logo { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 9px; | |
| background: linear-gradient(135deg, var(--accent), var(--accent-2)); | |
| display: grid; | |
| place-items: center; | |
| color: #0b0e14; | |
| flex-shrink: 0; | |
| } | |
| .new-chat-btn { | |
| margin: 0 14px 12px; | |
| padding: 10px 14px; | |
| border-radius: var(--radius); | |
| border: 1px solid var(--border); | |
| background: linear-gradient(135deg, rgba(108, 140, 255, 0.16), rgba(34, 211, 170, 0.1)); | |
| color: var(--text); | |
| font-weight: 600; | |
| font-size: 14px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| transition: border-color 0.15s, transform 0.05s; | |
| } | |
| .new-chat-btn:hover { border-color: var(--accent); } | |
| .new-chat-btn:active { transform: scale(0.98); } | |
| .session-list { flex: 1; overflow-y: auto; padding: 4px 8px; } | |
| .session-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 9px 10px; | |
| border-radius: 10px; | |
| color: var(--muted); | |
| font-size: 13.5px; | |
| cursor: pointer; | |
| border: 1px solid transparent; | |
| margin-bottom: 2px; | |
| transition: background 0.12s; | |
| } | |
| .session-item:hover { background: var(--panel); color: var(--text); } | |
| .session-item.active { | |
| background: var(--panel); | |
| color: var(--text); | |
| border-color: var(--border); | |
| } | |
| .session-title { | |
| flex: 1; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .session-item .icon-btn { opacity: 0; } | |
| .session-item:hover .icon-btn, .session-item.active .icon-btn { opacity: 1; } | |
| .sidebar-footer { | |
| border-top: 1px solid var(--border); | |
| padding: 10px 12px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .nav-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| width: 100%; | |
| padding: 9px 10px; | |
| background: none; | |
| border: none; | |
| border-radius: 10px; | |
| color: var(--muted); | |
| font-size: 13.5px; | |
| text-align: left; | |
| } | |
| .nav-btn:hover, .nav-btn.active { background: var(--panel); color: var(--text); } | |
| .user-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 8px 10px; | |
| font-size: 13px; | |
| color: var(--muted); | |
| } | |
| .avatar { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--accent), var(--accent-2)); | |
| color: #0b0e14; | |
| font-weight: 700; | |
| font-size: 12px; | |
| display: grid; | |
| place-items: center; | |
| flex-shrink: 0; | |
| } | |
| /* ---------------------------------------------------------------- topbar */ | |
| .topbar { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 20px; | |
| border-bottom: 1px solid var(--border); | |
| background: rgba(15, 19, 32, 0.6); | |
| backdrop-filter: blur(8px); | |
| min-height: 56px; | |
| } | |
| .topbar-title { | |
| font-weight: 600; | |
| font-size: 15px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .topbar-spacer { flex: 1; } | |
| .model-select { | |
| background: var(--panel); | |
| color: var(--text); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| padding: 7px 10px; | |
| font-size: 13px; | |
| outline: none; | |
| } | |
| .model-select:focus { border-color: var(--accent); } | |
| /* ---------------------------------------------------------------- chat */ | |
| .chat-scroll { flex: 1; overflow-y: auto; scroll-behavior: smooth; } | |
| .chat-inner { max-width: 820px; margin: 0 auto; padding: 28px 20px 12px; } | |
| .empty-state { | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 14px; | |
| text-align: center; | |
| padding: 40px 24px; | |
| } | |
| .empty-logo { | |
| width: 64px; | |
| height: 64px; | |
| border-radius: 20px; | |
| background: linear-gradient(135deg, var(--accent), var(--accent-2)); | |
| display: grid; | |
| place-items: center; | |
| color: #0b0e14; | |
| box-shadow: var(--shadow); | |
| } | |
| .empty-state h1 { margin: 4px 0 0; font-size: 26px; } | |
| .empty-state p { margin: 0; color: var(--muted); max-width: 480px; } | |
| .suggestions { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 10px; | |
| margin-top: 14px; | |
| width: 100%; | |
| max-width: 640px; | |
| } | |
| .suggestion-card { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 12px 14px; | |
| font-size: 13.5px; | |
| color: var(--muted); | |
| text-align: left; | |
| transition: border-color 0.15s, color 0.15s; | |
| } | |
| .suggestion-card:hover { border-color: var(--accent); color: var(--text); } | |
| .suggestion-card b { color: var(--text); display: block; margin-bottom: 3px; } | |
| .message-row { display: flex; gap: 12px; margin-bottom: 26px; } | |
| .message-avatar { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 10px; | |
| flex-shrink: 0; | |
| display: grid; | |
| place-items: center; | |
| font-size: 13px; | |
| font-weight: 700; | |
| margin-top: 2px; | |
| } | |
| .message-avatar.user { background: var(--panel-2); color: var(--accent-strong); border: 1px solid var(--border); } | |
| .message-avatar.assistant { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0b0e14; } | |
| .message-body { flex: 1; min-width: 0; } | |
| .message-author { font-size: 13px; font-weight: 700; margin-bottom: 4px; } | |
| .message-content { font-size: 15px; overflow-wrap: break-word; } | |
| .message-content > *:first-child { margin-top: 0; } | |
| .message-content > *:last-child { margin-bottom: 0; } | |
| .message-content p { margin: 0.5em 0; } | |
| .message-content h1, .message-content h2, .message-content h3 { margin: 0.9em 0 0.4em; } | |
| .message-content ul, .message-content ol { margin: 0.4em 0; padding-left: 1.4em; } | |
| .message-content a { color: var(--accent-strong); } | |
| .message-content blockquote { | |
| margin: 0.6em 0; | |
| padding: 2px 14px; | |
| border-left: 3px solid var(--accent); | |
| color: var(--muted); | |
| } | |
| .message-content table { border-collapse: collapse; margin: 0.6em 0; font-size: 14px; } | |
| .message-content th, .message-content td { border: 1px solid var(--border); padding: 6px 10px; } | |
| .message-content th { background: var(--panel); } | |
| .message-content code { | |
| background: var(--panel-2); | |
| border: 1px solid var(--border); | |
| padding: 1.5px 6px; | |
| border-radius: 6px; | |
| font-family: var(--mono); | |
| font-size: 13px; | |
| } | |
| .message-content pre { | |
| background: #0d1119; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 14px; | |
| overflow-x: auto; | |
| margin: 0.7em 0; | |
| } | |
| .message-content pre code { background: none; border: none; padding: 0; font-size: 13px; } | |
| .streaming-cursor::after { | |
| content: "▍"; | |
| color: var(--accent); | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { 50% { opacity: 0; } } | |
| .tool-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } | |
| .tool-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| color: var(--muted); | |
| font-size: 12px; | |
| padding: 4px 10px; | |
| border-radius: 999px; | |
| } | |
| .tool-chip.running { border-color: var(--accent); color: var(--accent-strong); } | |
| .tool-chip.done { border-color: rgba(34, 211, 170, 0.5); color: var(--accent-2); } | |
| .tool-chip .spin { animation: rotate 1s linear infinite; } | |
| @keyframes rotate { to { transform: rotate(360deg); } } | |
| .citations-box { | |
| margin-top: 10px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| background: var(--panel); | |
| overflow: hidden; | |
| } | |
| .citations-header { | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: none; | |
| border: none; | |
| color: var(--muted); | |
| font-size: 12.5px; | |
| font-weight: 600; | |
| padding: 9px 12px; | |
| text-align: left; | |
| } | |
| .citation-item { | |
| border-top: 1px solid var(--border); | |
| padding: 9px 12px; | |
| font-size: 12.5px; | |
| color: var(--muted); | |
| } | |
| .citation-source { color: var(--accent-2); font-weight: 700; margin-bottom: 3px; } | |
| .message-meta { | |
| display: flex; | |
| gap: 12px; | |
| margin-top: 8px; | |
| font-size: 11.5px; | |
| color: #5d6478; | |
| } | |
| .error-banner { | |
| background: rgba(255, 107, 122, 0.1); | |
| border: 1px solid rgba(255, 107, 122, 0.4); | |
| color: var(--danger); | |
| border-radius: var(--radius); | |
| padding: 10px 14px; | |
| font-size: 13.5px; | |
| margin-bottom: 16px; | |
| } | |
| /* ---------------------------------------------------------------- composer */ | |
| .composer-wrap { padding: 8px 20px 18px; } | |
| .composer { | |
| max-width: 820px; | |
| margin: 0 auto; | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 10px 12px; | |
| display: flex; | |
| align-items: flex-end; | |
| gap: 10px; | |
| transition: border-color 0.15s; | |
| box-shadow: var(--shadow); | |
| } | |
| .composer:focus-within { border-color: var(--accent); } | |
| .composer textarea { | |
| flex: 1; | |
| background: none; | |
| border: none; | |
| outline: none; | |
| color: var(--text); | |
| font-size: 15px; | |
| line-height: 1.5; | |
| resize: none; | |
| max-height: 200px; | |
| padding: 6px 2px; | |
| } | |
| .composer textarea::placeholder { color: #5d6478; } | |
| .send-btn { | |
| width: 38px; | |
| height: 38px; | |
| border-radius: 11px; | |
| border: none; | |
| background: linear-gradient(135deg, var(--accent), var(--accent-2)); | |
| color: #0b0e14; | |
| display: grid; | |
| place-items: center; | |
| flex-shrink: 0; | |
| transition: opacity 0.15s, transform 0.05s; | |
| } | |
| .send-btn:disabled { opacity: 0.35; cursor: default; } | |
| .send-btn:not(:disabled):active { transform: scale(0.95); } | |
| .send-btn.stop { background: var(--danger); color: #fff; } | |
| .composer-hint { | |
| max-width: 820px; | |
| margin: 8px auto 0; | |
| text-align: center; | |
| font-size: 11.5px; | |
| color: #5d6478; | |
| } | |
| /* ---------------------------------------------------------------- buttons */ | |
| .icon-btn { | |
| background: none; | |
| border: none; | |
| color: var(--muted); | |
| padding: 5px; | |
| border-radius: 8px; | |
| display: grid; | |
| place-items: center; | |
| transition: background 0.12s, color 0.12s; | |
| } | |
| .icon-btn:hover { background: var(--panel-2); color: var(--text); } | |
| .icon-btn.danger:hover { color: var(--danger); } | |
| .btn { | |
| padding: 9px 16px; | |
| border-radius: 10px; | |
| border: 1px solid var(--border); | |
| background: var(--panel); | |
| color: var(--text); | |
| font-size: 14px; | |
| font-weight: 600; | |
| transition: border-color 0.15s; | |
| } | |
| .btn:hover { border-color: var(--accent); } | |
| .btn.primary { | |
| background: linear-gradient(135deg, var(--accent), var(--accent-2)); | |
| color: #0b0e14; | |
| border: none; | |
| } | |
| .btn.primary:disabled { opacity: 0.5; cursor: default; } | |
| /* ---------------------------------------------------------------- auth */ | |
| .auth-page { | |
| height: 100%; | |
| display: grid; | |
| grid-template-columns: 1.1fr 1fr; | |
| } | |
| @media (max-width: 860px) { .auth-page { grid-template-columns: 1fr; } .auth-hero { display: none; } } | |
| .auth-hero { | |
| background: | |
| radial-gradient(800px 400px at 20% 20%, rgba(108, 140, 255, 0.25), transparent 55%), | |
| radial-gradient(700px 500px at 80% 80%, rgba(34, 211, 170, 0.18), transparent 55%), | |
| var(--bg-soft); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| padding: 64px; | |
| border-right: 1px solid var(--border); | |
| } | |
| .auth-hero h1 { font-size: 40px; margin: 18px 0 10px; line-height: 1.15; } | |
| .auth-hero p { color: var(--muted); font-size: 16px; max-width: 440px; margin: 0 0 26px; } | |
| .hero-feature { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; } | |
| .hero-feature .bullet { | |
| width: 34px; | |
| height: 34px; | |
| border-radius: 10px; | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| display: grid; | |
| place-items: center; | |
| color: var(--accent-2); | |
| flex-shrink: 0; | |
| } | |
| .hero-feature b { display: block; font-size: 14.5px; } | |
| .hero-feature span { color: var(--muted); font-size: 13px; } | |
| .auth-form-side { display: flex; align-items: center; justify-content: center; padding: 32px; } | |
| .auth-card { width: 100%; max-width: 380px; } | |
| .auth-card h2 { margin: 0 0 6px; font-size: 24px; } | |
| .auth-card .sub { color: var(--muted); font-size: 14px; margin: 0 0 24px; } | |
| .field { margin-bottom: 14px; } | |
| .field label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; } | |
| .field input { | |
| width: 100%; | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| color: var(--text); | |
| font-size: 14.5px; | |
| padding: 11px 13px; | |
| outline: none; | |
| transition: border-color 0.15s; | |
| } | |
| .field input:focus { border-color: var(--accent); } | |
| .auth-error { | |
| background: rgba(255, 107, 122, 0.1); | |
| border: 1px solid rgba(255, 107, 122, 0.4); | |
| color: var(--danger); | |
| border-radius: 10px; | |
| padding: 9px 12px; | |
| font-size: 13px; | |
| margin-bottom: 14px; | |
| } | |
| .auth-switch { margin-top: 18px; text-align: center; font-size: 13.5px; color: var(--muted); } | |
| .auth-switch button { background: none; border: none; color: var(--accent-strong); font-weight: 600; font-size: 13.5px; } | |
| /* ---------------------------------------------------------------- demo */ | |
| .demo-banner { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 9px 16px; | |
| font-size: 13px; | |
| color: var(--text); | |
| background: linear-gradient(90deg, rgba(108, 140, 255, 0.16), rgba(34, 211, 170, 0.12)); | |
| border-bottom: 1px solid var(--border); | |
| flex-shrink: 0; | |
| } | |
| .demo-banner-icon { color: var(--accent-strong); flex-shrink: 0; } | |
| .demo-banner-text { flex: 1; min-width: 0; } | |
| .demo-banner-text b { color: var(--accent-2); } | |
| .demo-banner-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| color: var(--text); | |
| text-decoration: none; | |
| font-weight: 600; | |
| font-size: 12.5px; | |
| padding: 5px 11px; | |
| border: 1px solid var(--border); | |
| border-radius: 999px; | |
| background: var(--panel); | |
| white-space: nowrap; | |
| transition: border-color 0.15s; | |
| } | |
| .demo-banner-link:hover { border-color: var(--accent); } | |
| .demo-cta { | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 9px; | |
| font-size: 15px; | |
| padding: 12px 16px; | |
| } | |
| .demo-points { | |
| list-style: none; | |
| padding: 0; | |
| margin: 16px 0 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .demo-points li { | |
| position: relative; | |
| padding-left: 20px; | |
| font-size: 13px; | |
| color: var(--muted); | |
| line-height: 1.45; | |
| } | |
| .demo-points li::before { | |
| content: ""; | |
| position: absolute; | |
| left: 4px; | |
| top: 7px; | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--accent), var(--accent-2)); | |
| } | |
| .repo-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| margin-top: 16px; | |
| font-size: 13px; | |
| color: var(--accent-strong); | |
| text-decoration: none; | |
| font-weight: 600; | |
| } | |
| .repo-link:hover { text-decoration: underline; } | |
| .auth-divider { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin: 24px 0 18px; | |
| color: #5d6478; | |
| font-size: 12px; | |
| } | |
| .auth-divider::before, | |
| .auth-divider::after { | |
| content: ""; | |
| flex: 1; | |
| height: 1px; | |
| background: var(--border); | |
| } | |
| /* ---------------------------------------------------------------- documents */ | |
| .drawer-backdrop { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(4, 6, 10, 0.55); | |
| z-index: 40; | |
| } | |
| .drawer { | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| width: min(420px, 92vw); | |
| background: var(--bg-soft); | |
| border-left: 1px solid var(--border); | |
| z-index: 50; | |
| display: flex; | |
| flex-direction: column; | |
| box-shadow: var(--shadow); | |
| animation: slide-in 0.18s ease-out; | |
| } | |
| @keyframes slide-in { from { transform: translateX(30px); opacity: 0; } } | |
| .drawer-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 16px 18px; | |
| border-bottom: 1px solid var(--border); | |
| font-weight: 700; | |
| } | |
| .drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px; } | |
| .dropzone { | |
| border: 1.5px dashed var(--border); | |
| border-radius: var(--radius); | |
| padding: 26px 16px; | |
| text-align: center; | |
| color: var(--muted); | |
| font-size: 13.5px; | |
| cursor: pointer; | |
| transition: border-color 0.15s, background 0.15s; | |
| margin-bottom: 16px; | |
| } | |
| .dropzone:hover, .dropzone.dragging { border-color: var(--accent); background: rgba(108, 140, 255, 0.05); } | |
| .doc-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 10px 12px; | |
| margin-bottom: 8px; | |
| } | |
| .doc-info { flex: 1; min-width: 0; } | |
| .doc-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .doc-sub { font-size: 12px; color: var(--muted); } | |
| .badge { font-size: 11px; font-weight: 700; padding: 2.5px 8px; border-radius: 999px; } | |
| .badge.ready { background: rgba(34, 211, 170, 0.12); color: var(--accent-2); } | |
| .badge.processing { background: rgba(255, 196, 107, 0.12); color: var(--warning); } | |
| .badge.failed { background: rgba(255, 107, 122, 0.12); color: var(--danger); } | |
| /* ---------------------------------------------------------------- analytics */ | |
| .analytics-scroll { flex: 1; overflow-y: auto; } | |
| .analytics-inner { max-width: 1020px; margin: 0 auto; padding: 28px 20px 40px; } | |
| .analytics-inner h2 { margin: 0 0 4px; } | |
| .analytics-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 22px; } | |
| .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; } | |
| .stat-card { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 16px; | |
| } | |
| .stat-label { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; display: flex; align-items: center; gap: 7px; } | |
| .stat-value { font-size: 26px; font-weight: 700; margin-top: 6px; } | |
| .stat-hint { font-size: 12px; color: var(--muted); margin-top: 2px; } | |
| .chart-card { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 18px; | |
| margin-bottom: 14px; | |
| } | |
| .chart-card h3 { margin: 0 0 14px; font-size: 15px; } | |
| .chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } | |
| @media (max-width: 820px) { .chart-row { grid-template-columns: 1fr; } } | |
| .tool-usage-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 8px 0; | |
| border-bottom: 1px solid var(--border); | |
| font-size: 13.5px; | |
| } | |
| .tool-usage-row:last-child { border-bottom: none; } | |
| .tool-usage-bar { height: 7px; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } | |
| .centered-note { color: var(--muted); text-align: center; padding: 30px 0; font-size: 13.5px; } | |
| /* ---------------------------------------------------------------- misc */ | |
| .fade-in { animation: fade-in 0.25s ease-out; } | |
| @keyframes fade-in { from { opacity: 0; transform: translateY(4px); } } | |
| .spinner { | |
| width: 16px; | |
| height: 16px; | |
| border: 2px solid var(--border); | |
| border-top-color: var(--accent); | |
| border-radius: 50%; | |
| animation: rotate 0.8s linear infinite; | |
| } | |