Spaces:
Sleeping
Sleeping
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;700&display=swap'); | |
| :root { | |
| --bg-color: #0f1115; | |
| --panel-bg: rgba(25, 28, 35, 0.6); | |
| --panel-border: rgba(255, 255, 255, 0.08); | |
| --text-primary: #f0f0f0; | |
| --text-secondary: #a0a5b1; | |
| --accent-primary: #6366f1; | |
| --accent-secondary: #8b5cf6; | |
| --accent-glow: rgba(99, 102, 241, 0.2); | |
| --danger: #ef4444; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--bg-color); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* Background Glow */ | |
| .background-glow { | |
| position: fixed; | |
| top: -20%; | |
| left: -10%; | |
| width: 70vw; | |
| height: 70vw; | |
| background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%); | |
| z-index: -1; | |
| border-radius: 50%; | |
| pointer-events: none; | |
| } | |
| .app-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2rem; | |
| } | |
| /* Header */ | |
| .app-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding-bottom: 1rem; | |
| border-bottom: 1px solid var(--panel-border); | |
| } | |
| .logo-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .logo-icon { | |
| color: var(--accent-primary); | |
| } | |
| h1 { | |
| font-family: 'Outfit', sans-serif; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| letter-spacing: -0.5px; | |
| } | |
| h1 span { | |
| font-weight: 400; | |
| color: var(--text-secondary); | |
| } | |
| /* Layout */ | |
| .main-content { | |
| display: block; | |
| } | |
| .charts-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| margin-top: 1rem; | |
| } | |
| .top-controls { | |
| display: flex; | |
| gap: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .top-controls > * { | |
| flex: 1; | |
| } | |
| /* Shared Panel Style (Glassmorphism) */ | |
| .glass-panel { | |
| background: var(--panel-bg); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid var(--panel-border); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); | |
| } | |
| /* Search Bar */ | |
| .search-container { | |
| background: var(--panel-bg); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid var(--panel-border); | |
| border-radius: 12px; | |
| padding: 0.75rem 1rem; | |
| transition: all 0.3s ease; | |
| } | |
| .search-container:focus-within { | |
| border-color: var(--accent-primary); | |
| box-shadow: 0 0 15px var(--accent-glow); | |
| } | |
| .search-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .search-input-wrapper { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .search-icon { | |
| color: var(--text-secondary); | |
| } | |
| .search-input { | |
| flex: 1; | |
| background: transparent; | |
| border: none; | |
| color: var(--text-primary); | |
| font-size: 1.1rem; | |
| outline: none; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .search-controls { | |
| display: flex; | |
| gap: 0.75rem; | |
| align-items: center; | |
| border-top: 1px solid var(--panel-border); | |
| padding-top: 0.75rem; | |
| } | |
| select { | |
| background: rgba(0,0,0,0.3); | |
| color: var(--text-primary); | |
| border: 1px solid var(--panel-border); | |
| padding: 0.5rem; | |
| border-radius: 6px; | |
| font-family: 'Inter', sans-serif; | |
| outline: none; | |
| cursor: pointer; | |
| } | |
| .search-button { | |
| background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); | |
| color: white; | |
| border: none; | |
| padding: 0.5rem 1.25rem; | |
| border-radius: 6px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| margin-left: auto; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| .search-button:hover:not(:disabled) { | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 12px var(--accent-glow); | |
| } | |
| .search-button:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| /* Nav Tabs */ | |
| .nav-tabs { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .tab-btn { | |
| background: none; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-family: 'Inter', sans-serif; | |
| font-weight: 500; | |
| font-size: 1rem; | |
| padding: 0.5rem 1rem; | |
| cursor: pointer; | |
| border-bottom: 2px solid transparent; | |
| transition: all 0.2s; | |
| } | |
| .tab-btn:hover { | |
| color: var(--text-primary); | |
| } | |
| .tab-btn.active { | |
| color: var(--accent-primary); | |
| border-bottom: 2px solid var(--accent-primary); | |
| } | |
| .single-column { | |
| width: 100%; | |
| max-width: 900px; | |
| margin: 0 auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| } | |
| /* Sample Queries */ | |
| .sample-queries { | |
| margin-top: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| flex-wrap: wrap; | |
| } | |
| .sample-label { | |
| color: var(--text-secondary); | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| } | |
| .chips-container { | |
| display: flex; | |
| gap: 0.5rem; | |
| flex-wrap: wrap; | |
| } | |
| .chip { | |
| background: rgba(139, 92, 246, 0.1); | |
| border: 1px solid rgba(139, 92, 246, 0.2); | |
| color: var(--accent-primary); | |
| padding: 0.35rem 0.75rem; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .chip:hover:not(:disabled) { | |
| background: rgba(139, 92, 246, 0.2); | |
| transform: translateY(-1px); | |
| } | |
| .chip:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| /* Results Panel */ | |
| .results-empty { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 4rem 2rem; | |
| text-align: center; | |
| color: var(--text-secondary); | |
| } | |
| .empty-icon { | |
| margin-bottom: 1rem; | |
| opacity: 0.5; | |
| } | |
| .results-loading { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 4rem; | |
| gap: 1rem; | |
| color: var(--text-secondary); | |
| } | |
| .pulse-circle { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: var(--accent-primary); | |
| animation: pulse 1.5s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--accent-glow); } | |
| 70% { transform: scale(1); box-shadow: 0 0 0 15px transparent; } | |
| 100% { transform: scale(0.95); box-shadow: 0 0 0 0 transparent; } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.4s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .results-panel { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| } | |
| .answer-card { | |
| border-left: 4px solid var(--accent-primary); | |
| } | |
| .card-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .card-header h3 { | |
| font-family: 'Outfit', sans-serif; | |
| font-size: 1.1rem; | |
| } | |
| .text-primary { | |
| color: var(--accent-primary); | |
| } | |
| .badge { | |
| font-size: 0.75rem; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 4px; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.25rem; | |
| margin-left: auto; | |
| } | |
| .cache-badge { | |
| background: rgba(34, 197, 94, 0.1); | |
| color: #4ade80; | |
| border: 1px solid rgba(74, 222, 128, 0.2); | |
| } | |
| .answer-content { | |
| line-height: 1.6; | |
| color: #e2e8f0; | |
| } | |
| .answer-content h3 { | |
| font-size: 1.1rem; | |
| margin-top: 1.5rem; | |
| margin-bottom: 0.5rem; | |
| color: var(--primary-color); | |
| font-weight: 600; | |
| } | |
| .answer-content p { | |
| margin-bottom: 1rem; | |
| } | |
| .answer-content strong { | |
| color: #fff; | |
| font-weight: 600; | |
| } | |
| .answer-content ul, .answer-content ol { | |
| margin-bottom: 1rem; | |
| padding-left: 1.5rem; | |
| } | |
| .answer-content li { | |
| margin-bottom: 0.25rem; | |
| } | |
| .section-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 1rem; | |
| color: var(--text-secondary); | |
| } | |
| .citations-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| } | |
| .citation-card { | |
| padding: 1rem; | |
| transition: transform 0.2s; | |
| } | |
| .citation-card:hover { | |
| transform: translateX(4px); | |
| border-color: rgba(255,255,255,0.15); | |
| } | |
| .citation-title { | |
| font-weight: 500; | |
| margin-bottom: 0.5rem; | |
| } | |
| .citation-meta { | |
| display: flex; | |
| gap: 1rem; | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Admin Panel */ | |
| .admin-panel { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| } | |
| .admin-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .admin-header h3 { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 1rem; | |
| } | |
| .icon-button { | |
| background: transparent; | |
| border: none; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: color 0.2s; | |
| } | |
| .icon-button:hover { | |
| color: var(--text-primary); | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| } | |
| .stat-card { | |
| background: rgba(0,0,0,0.2); | |
| padding: 1rem; | |
| border-radius: 8px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.25rem; | |
| } | |
| .stat-label { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .stat-value { | |
| font-family: 'Outfit', sans-serif; | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| } | |
| .admin-controls { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| padding-top: 1rem; | |
| border-top: 1px solid var(--panel-border); | |
| } | |
| .control-group label { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 0.5rem; | |
| } | |
| .slider-row { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: center; | |
| } | |
| .slider-row input[type=range] { | |
| flex: 1; | |
| } | |
| .button-group { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-top: 0.5rem; | |
| } | |
| .btn-small { | |
| background: rgba(255,255,255,0.1); | |
| color: white; | |
| border: none; | |
| padding: 0.4rem 0.8rem; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 0.85rem; | |
| } | |
| .btn-primary { | |
| flex: 1; | |
| background: var(--accent-primary); | |
| color: white; | |
| border: none; | |
| padding: 0.6rem; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-weight: 500; | |
| } | |
| .btn-danger { | |
| flex: 1; | |
| background: transparent; | |
| color: var(--danger); | |
| border: 1px solid var(--danger); | |
| padding: 0.6rem; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| font-weight: 500; | |
| } | |
| .btn-danger:hover { | |
| background: rgba(239, 68, 68, 0.1); | |
| } | |
| /* Eval Results */ | |
| .eval-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-top: 1rem; | |
| font-size: 0.85rem; | |
| } | |
| .eval-table th, .eval-table td { | |
| text-align: left; | |
| padding: 0.5rem; | |
| border-bottom: 1px solid var(--panel-border); | |
| } | |
| .eval-table th { | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| .eval-error { | |
| color: var(--danger); | |
| font-size: 0.85rem; | |
| margin-top: 1rem; | |
| padding: 0.5rem; | |
| background: rgba(239, 68, 68, 0.1); | |
| border-radius: 4px; | |
| } | |
| .miss-badge { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: #f87171; | |
| border: 1px solid rgba(248, 113, 113, 0.2); | |
| } | |
| .search-metadata { | |
| display: flex; | |
| gap: 0.75rem; | |
| margin-bottom: 1rem; | |
| } | |
| .meta-tag { | |
| font-size: 0.75rem; | |
| padding: 0.2rem 0.5rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 4px; | |
| color: var(--text-secondary); | |
| border: 1px solid var(--panel-border); | |
| } | |
| .toast-message { | |
| color: var(--primary); | |
| font-size: 0.85rem; | |
| margin-top: 0.5rem; | |
| padding: 0.5rem; | |
| background: rgba(56, 189, 248, 0.1); | |
| border-radius: 4px; | |
| text-align: center; | |
| animation: fadeIn 0.3s ease; | |
| } | |