agentpixel/pinecone-knowledge-indexer
0
1/* style.css - Premium Hacker-Minimalist Dark Tech Stylesheet for Pinecone Knowledge Indexer */2@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&family=Geist:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&display=swap');3 4:root {5 --bg-main: #050505;6 --bg-card: rgba(10, 10, 12, 0.6);7 --bg-card-hover: rgba(16, 16, 20, 0.8);8 --border-color: rgba(255, 255, 255, 0.05);9 --border-hover: rgba(255, 255, 255, 0.12);10 11 --text-primary: #f4f4f5;12 --text-secondary: #a1a1aa;13 --text-muted: #52525b;14 15 --accent: #10b981;16 --accent-hover: #34d399;17 --accent-glow: rgba(16, 185, 129, 0.12);18 --accent-dim: rgba(16, 185, 129, 0.2);19 20 --error: #f43f5e;21 --error-bg: rgba(244, 63, 94, 0.08);22 --error-border: rgba(244, 63, 94, 0.2);23 24 --success: #10b981;25 --success-bg: rgba(16, 185, 129, 0.08);26 --success-border: rgba(16, 185, 129, 0.2);27 28 --info: #3b82f6;29 --info-bg: rgba(59, 130, 246, 0.08);30 --info-border: rgba(59, 130, 246, 0.2);31 32 --font-sans: 'Geist', 'Outfit', -apple-system, sans-serif;33 --font-display: 'Outfit', sans-serif;34 --font-mono: 'Geist Mono', monospace;35 36 --transition-spring: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);37 --transition-smooth: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);38}39 40* {41 box-sizing: border-box;42 margin: 0;43 padding: 0;44}45 46body {47 background-color: var(--bg-main);48 background-image: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.08) 0%, #050505 55%);49 color: var(--text-primary);50 font-family: var(--font-sans);51 line-height: 1.5;52 -webkit-font-smoothing: antialiased;53 min-height: 100vh;54 display: flex;55 flex-direction: column;56 overflow-x: hidden;57}58 59/* Scrollbars */60::-webkit-scrollbar {61 width: 6px;62 height: 6px;63}64::-webkit-scrollbar-track {65 background: var(--bg-main);66}67::-webkit-scrollbar-thumb {68 background: rgba(255, 255, 255, 0.08);69 border-radius: 99px;70}71::-webkit-scrollbar-thumb:hover {72 background: var(--accent-dim);73}74 75/* Container */76.container {77 width: 100%;78 max-width: 1100px;79 margin: 0 auto;80 padding: 0 1.5rem;81}82 83/* Header */84.app-header {85 height: 64px;86 border-bottom: 1px solid var(--border-color);87 display: flex;88 align-items: center;89 background-color: rgba(5, 5, 5, 0.7);90 backdrop-filter: blur(12px);91 -webkit-backdrop-filter: blur(12px);92 position: sticky;93 top: 0;94 z-index: 100;95}96 97.header-content {98 display: flex;99 justify-content: space-between;100 align-items: center;101 width: 100%;102}103 104.brand {105 display: flex;106 align-items: center;107 gap: 0.65rem;108 font-family: var(--font-display);109 font-weight: 700;110 font-size: 1rem;111 letter-spacing: -0.01em;112 color: var(--text-primary);113 text-decoration: none;114 transition: var(--transition-smooth);115}116 117.brand:hover {118 color: var(--accent);119}120 121.brand-icon {122 width: 28px;123 height: 28px;124 background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.03));125 border: 1px solid rgba(16, 185, 129, 0.4);126 border-radius: 6px;127 display: flex;128 align-items: center;129 justify-content: center;130 color: var(--accent);131 font-size: 1.05rem;132 box-shadow: 0 0 10px rgba(16, 185, 129, 0.1);133}134 135.connection-status {136 display: flex;137 align-items: center;138 gap: 0.5rem;139 font-size: 0.75rem;140 font-family: var(--font-mono);141 color: var(--text-secondary);142 background-color: rgba(255, 255, 255, 0.02);143 padding: 0.3rem 0.75rem;144 border-radius: 99px;145 border: 1px solid var(--border-color);146 transition: var(--transition-smooth);147}148 149.status-dot {150 width: 6px;151 height: 6px;152 border-radius: 50%;153 background-color: var(--text-muted);154 transition: var(--transition-smooth);155}156 157.status-dot.connected {158 background-color: var(--success);159 box-shadow: 0 0 8px var(--success);160 animation: status-pulse 2s infinite;161}162 163.status-dot.disconnected {164 background-color: var(--error);165 box-shadow: 0 0 8px var(--error);166}167 168/* Hero Section */169.hero-split {170 display: grid;171 grid-template-cols: 1.2fr 0.8fr;172 gap: 4rem;173 align-items: center;174 padding: 4rem 0;175}176 177.hero-content {178 display: flex;179 flex-direction: column;180 align-items: flex-start;181}182 183.hero-eyebrow {184 font-family: var(--font-mono);185 font-size: 0.7rem;186 font-weight: 500;187 text-transform: uppercase;188 letter-spacing: 0.12em;189 color: var(--accent);190 display: flex;191 align-items: center;192 gap: 0.4rem;193 margin-bottom: 1rem;194 background: rgba(16, 185, 129, 0.08);195 border: 1px solid rgba(16, 185, 129, 0.2);196 padding: 0.25rem 0.65rem;197 border-radius: 99px;198}199 200.hero-content h1 {201 font-family: var(--font-display);202 font-size: 2.85rem;203 font-weight: 800;204 letter-spacing: -0.03em;205 line-height: 1.15;206 margin-bottom: 1rem;207 color: var(--text-primary);208}209 210.hero-content p {211 font-size: 0.98rem;212 color: var(--text-secondary);213 line-height: 1.6;214 margin-bottom: 2rem;215 max-width: 55ch;216}217 218.btn-hero {219 background: rgba(255, 255, 255, 0.03);220 border: 1px solid var(--border-color);221 color: var(--text-primary);222 padding: 0.65rem 1.25rem;223 border-radius: 8px;224 font-size: 0.85rem;225 font-weight: 500;226 cursor: pointer;227 display: inline-flex;228 align-items: center;229 gap: 0.5rem;230 transition: var(--transition-spring);231}232 233.btn-hero:hover {234 background: rgba(16, 185, 129, 0.05);235 border-color: var(--accent);236 color: var(--accent-hover);237 transform: translateY(-2px);238 box-shadow: 0 4px 12px rgba(16, 185, 129, 0.05);239}240 241.btn-hero:active {242 transform: scale(0.96) translateY(0);243}244 245.hero-visual {246 position: relative;247 display: flex;248 justify-content: center;249 align-items: center;250}251 252.visual-wrapper {253 position: relative;254 width: 100%;255 border-radius: 16px;256 overflow: hidden;257 border: 1px solid rgba(255, 255, 255, 0.08);258 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(16, 185, 129, 0.03);259 background-color: var(--bg-card);260 aspect-ratio: 3/2;261}262 263.hero-image {264 width: 100%;265 height: 100%;266 object-fit: cover;267 opacity: 0.75;268 filter: saturate(1.2) contrast(1.1);269 transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);270}271 272.visual-wrapper:hover .hero-image {273 transform: scale(1.04);274 opacity: 0.85;275}276 277.visual-glow {278 position: absolute;279 top: 0;280 left: 0;281 width: 100%;282 height: 100%;283 background: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.08) 0%, transparent 75%);284 pointer-events: none;285 z-index: 1;286}287 288/* Tabs Navigation Capsule styling */289.tabs-nav-container {290 display: flex;291 justify-content: flex-start;292 margin-bottom: 2.25rem;293}294 295.tabs-nav {296 position: relative;297 display: inline-flex;298 background: rgba(255, 255, 255, 0.02);299 border: 1px solid rgba(255, 255, 255, 0.05);300 padding: 4px;301 border-radius: 99px;302 gap: 2px;303}304 305.tab-btn {306 position: relative;307 z-index: 2;308 background: none;309 border: none;310 color: var(--text-secondary);311 padding: 0.6rem 1.25rem;312 font-size: 0.85rem;313 font-weight: 500;314 cursor: pointer;315 display: flex;316 align-items: center;317 gap: 0.5rem;318 border-radius: 99px;319 transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);320}321 322.tab-btn:hover {323 color: var(--text-primary);324}325 326.tab-btn.active {327 color: var(--bg-main);328 font-weight: 600;329}330 331.tab-slider {332 position: absolute;333 top: 4px;334 left: 4px;335 height: calc(100% - 8px);336 background: var(--accent);337 border-radius: 99px;338 z-index: 1;339 transition: transform 0.4s cubic-bezier(0.25, 1, 0.2, 1.1), width 0.4s cubic-bezier(0.25, 1, 0.2, 1.1);340 box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);341}342 343/* Tab Content Transitions */344.tab-content {345 display: none;346 opacity: 0;347 transform: translateY(12px);348 transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);349}350 351.tab-content.active {352 display: block;353 opacity: 1;354 transform: translateY(0);355}356 357/* Nested Double Bezel Layout */358.double-bezel {359 background: rgba(255, 255, 255, 0.015);360 border: 1px solid rgba(255, 255, 255, 0.04);361 padding: 5px;362 border-radius: 20px;363 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);364 margin-bottom: 4rem;365}366 367.bezel-inner {368 background: rgba(10, 10, 12, 0.6);369 border: 1px solid rgba(255, 255, 255, 0.02);370 border-radius: 15px;371 padding: 2.25rem;372 backdrop-filter: blur(16px);373 -webkit-backdrop-filter: blur(16px);374}375 376/* Dropzone styling */377.dropzone-container {378 display: flex;379 flex-direction: column;380 gap: 1.5rem;381}382 383.dropzone {384 border: 1px dashed rgba(255, 255, 255, 0.12);385 border-radius: 12px;386 padding: 3.5rem 2rem;387 text-align: center;388 cursor: pointer;389 background-color: rgba(255, 255, 255, 0.003);390 transition: var(--transition-smooth);391 display: flex;392 flex-direction: column;393 align-items: center;394 gap: 1.25rem;395}396 397.dropzone:hover, .dropzone.dragover {398 border-color: var(--accent);399 background-color: rgba(16, 185, 129, 0.01);400 box-shadow: inset 0 0 24px rgba(16, 185, 129, 0.015);401}402 403.dropzone-icon-container {404 width: 52px;405 height: 52px;406 border-radius: 10px;407 background-color: rgba(255, 255, 255, 0.015);408 border: 1px solid var(--border-color);409 display: flex;410 align-items: center;411 justify-content: center;412 color: var(--text-secondary);413 transition: var(--transition-spring);414}415 416.dropzone:hover .dropzone-icon-container {417 background-color: rgba(16, 185, 129, 0.06);418 border-color: var(--accent);419 color: var(--accent-hover);420 transform: translateY(-2px);421 box-shadow: 0 4px 15px rgba(16, 185, 129, 0.08);422}423 424.dropzone-icon {425 font-size: 1.6rem;426}427 428.dropzone-text {429 font-weight: 500;430 font-size: 0.95rem;431 color: var(--text-primary);432}433 434.accent-link {435 color: var(--accent);436 font-weight: 600;437 text-decoration: underline;438 text-underline-offset: 3px;439}440 441.dropzone-hint {442 font-size: 0.78rem;443 color: var(--text-muted);444}445 446/* Selected File Panel */447.file-details {448 display: flex;449 align-items: center;450 justify-content: space-between;451 background-color: rgba(255, 255, 255, 0.01);452 border: 1px solid var(--border-color);453 padding: 1rem 1.25rem;454 border-radius: 10px;455 animation: form-enter 0.3s ease;456}457 458.file-info {459 display: flex;460 align-items: center;461 gap: 1rem;462}463 464.file-icon-wrapper {465 width: 38px;466 height: 38px;467 border-radius: 8px;468 background-color: rgba(16, 185, 129, 0.06);469 border: 1px solid rgba(16, 185, 129, 0.15);470 display: flex;471 align-items: center;472 justify-content: center;473}474 475.file-icon {476 font-size: 1.2rem;477 color: var(--accent);478}479 480.file-name {481 font-weight: 600;482 font-size: 0.88rem;483 color: var(--text-primary);484 max-width: 450px;485 overflow: hidden;486 text-overflow: ellipsis;487 white-space: nowrap;488}489 490.file-size {491 font-size: 0.75rem;492 color: var(--text-secondary);493 font-family: var(--font-mono);494 margin-top: 0.1rem;495}496 497.btn-remove {498 background: none;499 border: none;500 color: var(--text-secondary);501 cursor: pointer;502 font-size: 1.15rem;503 transition: var(--transition-smooth);504 display: flex;505 align-items: center;506 justify-content: center;507 padding: 0.5rem;508 border-radius: 6px;509}510 511.btn-remove:hover {512 color: var(--error);513 background-color: var(--error-bg);514}515 516/* Dynamic Buttons with Tactile Spring Physics */517.btn-primary {518 background-color: var(--accent);519 color: #030303;520 border: 1px solid transparent;521 padding: 0.85rem 1.75rem;522 border-radius: 8px;523 font-size: 0.88rem;524 font-weight: 600;525 cursor: pointer;526 display: inline-flex;527 align-items: center;528 justify-content: center;529 gap: 0.5rem;530 transition: var(--transition-spring);531 width: 100%;532}533 534.btn-primary:hover:not(:disabled) {535 background-color: var(--accent-hover);536 box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);537}538 539.btn-primary:active:not(:disabled) {540 transform: scale(0.96) translateY(1px);541}542 543.btn-primary:disabled {544 opacity: 0.35;545 cursor: not-allowed;546}547 548/* Stepper Progress UI styling */549.loading-stepper {550 display: none;551 flex-direction: column;552 gap: 1.5rem;553 margin-top: 0.5rem;554 background-color: rgba(255, 255, 255, 0.005);555 border: 1px solid var(--border-color);556 padding: 1.75rem;557 border-radius: 12px;558}559 560.step-item {561 display: flex;562 flex-direction: column;563 gap: 0.65rem;564 opacity: 0.25;565 transition: opacity 0.4s ease;566}567 568.step-item.active {569 opacity: 1;570}571 572.step-item.complete {573 opacity: 0.7;574}575 576.step-header {577 display: flex;578 align-items: center;579 gap: 0.75rem;580}581 582.step-indicator {583 width: 22px;584 height: 22px;585 border-radius: 50%;586 border: 1px solid var(--text-secondary);587 display: flex;588 align-items: center;589 justify-content: center;590 font-size: 0.7rem;591 font-weight: 600;592 font-family: var(--font-mono);593 color: var(--text-secondary);594 transition: var(--transition-smooth);595}596 597.step-item.active .step-indicator {598 border-color: var(--accent);599 color: var(--accent);600 box-shadow: 0 0 8px rgba(16, 185, 129, 0.15);601}602 603.step-item.complete .step-indicator {604 border-color: var(--success);605 background-color: var(--success);606 color: #030303;607}608 609.step-title {610 font-size: 0.88rem;611 font-weight: 600;612 color: var(--text-primary);613}614 615.step-meta {616 margin-left: auto;617 font-size: 0.75rem;618 font-family: var(--font-mono);619 color: var(--text-secondary);620}621 622.step-item.active .step-meta {623 color: var(--accent-hover);624}625 626.progress-bar-bg {627 height: 4px;628 background-color: rgba(255, 255, 255, 0.03);629 border-radius: 99px;630 overflow: hidden;631 width: 100%;632}633 634.progress-bar-fill {635 height: 100%;636 width: 0%;637 background-color: var(--accent);638 border-radius: 99px;639 transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);640}641 642.step-spinner {643 font-size: 0.85rem;644 animation: spin 1s linear infinite;645 display: inline-block;646}647 648/* Ingestion Success Details panel */649.ingest-result {650 display: none;651 margin-top: 0.5rem;652 padding: 1.75rem;653 border-radius: 12px;654 background-color: rgba(16, 185, 129, 0.015);655 border: 1px solid rgba(16, 185, 129, 0.15);656 animation: form-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1);657}658 659.result-header {660 display: flex;661 align-items: center;662 gap: 0.6rem;663 font-family: var(--font-display);664 font-weight: 700;665 font-size: 1.1rem;666 color: var(--accent);667 margin-bottom: 0.5rem;668}669 670.result-header i {671 font-size: 1.35rem;672}673 674.result-description {675 font-size: 0.85rem;676 color: var(--text-secondary);677 margin-bottom: 1.5rem;678}679 680.result-details-grid {681 display: grid;682 grid-template-cols: repeat(auto-fit, minmax(180px, 1fr));683 gap: 1rem;684}685 686.result-detail-card {687 background-color: rgba(255, 255, 255, 0.01);688 border: 1px solid rgba(255, 255, 255, 0.02);689 padding: 0.85rem 1.15rem;690 border-radius: 8px;691}692 693.detail-label {694 font-size: 0.68rem;695 color: var(--text-muted);696 text-transform: uppercase;697 letter-spacing: 0.08em;698 font-weight: 600;699}700 701.detail-val {702 font-size: 1.2rem;703 font-weight: 700;704 color: var(--text-primary);705 margin-top: 0.3rem;706}707 708.detail-val.mono {709 font-family: var(--font-mono);710 font-size: 0.82rem;711 color: var(--text-secondary);712}713 714/* Query Search Panel styling */715.search-form {716 display: flex;717 gap: 0.75rem;718 margin-bottom: 2.25rem;719}720 721.search-input-wrapper {722 position: relative;723 flex-grow: 1;724}725 726.search-input {727 width: 100%;728 background-color: rgba(255, 255, 255, 0.012);729 border: 1px solid var(--border-color);730 color: var(--text-primary);731 padding: 0.85rem 1rem 0.85rem 2.85rem;732 border-radius: 8px;733 font-size: 0.9rem;734 font-family: var(--font-sans);735 outline: none;736 transition: var(--transition-smooth);737}738 739.search-input:focus {740 border-color: var(--accent);741 background-color: rgba(255, 255, 255, 0.02);742 box-shadow: 0 0 15px rgba(16, 185, 129, 0.05);743}744 745.search-icon-left {746 position: absolute;747 left: 1rem;748 top: 50%;749 transform: translateY(-50%);750 color: var(--text-secondary);751 font-size: 1.1rem;752}753 754.search-btn {755 width: auto;756 white-space: nowrap;757 padding: 0.85rem 1.75rem;758}759 760.search-meta {761 font-size: 0.82rem;762 color: var(--text-secondary);763 margin-bottom: 1.25rem;764 display: flex;765 align-items: center;766 gap: 0.5rem;767}768 769.search-meta i {770 color: var(--accent);771}772 773/* Search results display */774.results-container {775 display: flex;776 flex-direction: column;777 gap: 1.25rem;778}779 780.result-card {781 background-color: rgba(255, 255, 255, 0.005);782 border: 1px solid var(--border-color);783 border-radius: 12px;784 padding: 1.5rem;785 transition: var(--transition-spring);786 display: flex;787 flex-direction: column;788 gap: 1rem;789 transform: scale(1);790}791 792.result-card:hover {793 border-color: rgba(16, 185, 129, 0.3);794 background-color: var(--bg-card-hover);795 box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(16, 185, 129, 0.02);796 transform: translateY(-2px);797}798 799.result-card-header {800 display: flex;801 justify-content: space-between;802 align-items: center;803 gap: 1.25rem;804}805 806.result-filename {807 font-weight: 700;808 font-size: 0.9rem;809 color: var(--text-primary);810 display: flex;811 align-items: center;812 gap: 0.5rem;813}814 815.result-filename i {816 color: var(--accent);817}818 819.score-badge {820 font-family: var(--font-mono);821 font-size: 0.7rem;822 font-weight: 600;823 padding: 0.25rem 0.65rem;824 border-radius: 4px;825}826 827.score-badge.high {828 background-color: rgba(16, 185, 129, 0.08);829 color: var(--accent-hover);830 border: 1px solid rgba(16, 185, 129, 0.25);831 box-shadow: 0 0 10px rgba(16, 185, 129, 0.05);832}833 834.score-badge.mid {835 background-color: rgba(59, 130, 246, 0.08);836 color: #60a5fa;837 border: 1px solid rgba(59, 130, 246, 0.25);838}839 840.score-badge.low {841 background-color: rgba(255, 255, 255, 0.02);842 color: var(--text-secondary);843 border: 1px solid var(--border-color);844}845 846.result-text {847 font-size: 0.88rem;848 color: var(--text-secondary);849 line-height: 1.65;850}851 852mark.matched-term {853 background-color: rgba(16, 185, 129, 0.25);854 color: #fff;855 padding: 0.1rem 0.25rem;856 border-radius: 3px;857 border-bottom: 1px solid var(--accent);858 font-weight: 500;859}860 861/* Empty or No Results screen */862.no-results {863 text-align: center;864 padding: 4rem 2rem;865 display: flex;866 flex-direction: column;867 align-items: center;868 gap: 1.25rem;869 color: var(--text-secondary);870}871 872.no-results-icon {873 font-size: 2.2rem;874 color: var(--text-muted);875}876 877/* Bento Grid Statistics styling */878.stats-bento {879 display: grid;880 grid-template-columns: repeat(3, 1fr);881 gap: 1.25rem;882 margin-bottom: 2rem;883}884 885.stat-box {886 background-color: rgba(255, 255, 255, 0.008);887 border: 1px solid var(--border-color);888 border-radius: 12px;889 padding: 1.5rem;890 position: relative;891 overflow: hidden;892 display: flex;893 flex-direction: column;894 justify-content: space-between;895 min-height: 140px;896 transition: var(--transition-spring);897}898 899.stat-box:hover {900 border-color: rgba(255, 255, 255, 0.08);901 background-color: rgba(255, 255, 255, 0.015);902 transform: translateY(-2px);903}904 905.connection-box {906 grid-column: span 2;907 background: radial-gradient(circle at 100% 100%, rgba(16, 185, 129, 0.04) 0%, transparent 60%);908 border: 1px solid rgba(16, 185, 129, 0.1);909}910 911.connection-box:hover {912 border-color: rgba(16, 185, 129, 0.25);913 box-shadow: 0 4px 20px rgba(16, 185, 129, 0.03);914}915 916.stat-header {917 display: flex;918 align-items: center;919 gap: 0.65rem;920}921 922.stat-icon-wrapper {923 width: 32px;924 height: 32px;925 border-radius: 6px;926 background-color: rgba(255, 255, 255, 0.02);927 border: 1px solid var(--border-color);928 display: flex;929 align-items: center;930 justify-content: center;931 color: var(--text-secondary);932 font-size: 1.05rem;933}934 935.connection-box .stat-icon-wrapper {936 background-color: rgba(16, 185, 129, 0.05);937 border-color: rgba(16, 185, 129, 0.2);938 color: var(--accent);939}940 941.stat-label {942 font-size: 0.8rem;943 color: var(--text-secondary);944 font-weight: 500;945}946 947.connection-display-wrapper {948 display: flex;949 align-items: baseline;950 justify-content: space-between;951 margin-top: 1rem;952}953 954.stat-number {955 font-family: var(--font-display);956 font-size: 2rem;957 font-weight: 800;958 letter-spacing: -0.02em;959 color: var(--text-primary);960 line-height: 1.2;961}962 963.stat-number.green {964 color: var(--accent);965 text-shadow: 0 0 15px rgba(16, 185, 129, 0.15);966}967 968.status-pulse-radar {969 position: relative;970 width: 36px;971 height: 36px;972 display: flex;973 align-items: center;974 justify-content: center;975}976 977.radar-ping {978 width: 14px;979 height: 14px;980 border-radius: 50%;981 background-color: var(--accent);982 box-shadow: 0 0 10px var(--accent);983}984 985.radar-glow {986 position: absolute;987 width: 32px;988 height: 32px;989 border-radius: 50%;990 border: 2px solid var(--accent);991 opacity: 0;992 animation: radar-grow 2.5s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;993}994 995.uptime-label {996 font-size: 0.72rem;997 color: var(--text-muted);998 margin-top: 0.75rem;999}1000 1001.uptime-label .mono {1002 font-family: var(--font-mono);1003 color: var(--text-secondary);1004 font-weight: 500;1005}1006 1007.stat-meta-label {1008 font-size: 0.72rem;1009 color: var(--text-muted);1010 margin-top: 0.5rem;1011}1012 1013.mono-dim {1014 font-family: var(--font-mono);1015 color: var(--text-secondary);1016}1017 1018.tabular-nums {1019 font-family: var(--font-mono);1020 font-variant-numeric: tabular-nums;1021 font-weight: 700;1022}1023 1024/* Info spec cards list */1025.stat-info-card {1026 background-color: rgba(255, 255, 255, 0.005);1027 border: 1px solid var(--border-color);1028 border-radius: 12px;1029 padding: 1.5rem;1030 margin-top: 1.5rem;1031}1032 1033.stat-info-title {1034 font-family: var(--font-display);1035 font-weight: 700;1036 font-size: 0.95rem;1037 color: var(--text-primary);1038 margin-bottom: 1.25rem;1039 display: flex;1040 align-items: center;1041 gap: 0.5rem;1042}1043 1044.stat-info-title i {1045 color: var(--accent);1046}1047 1048.stat-info-list {1049 list-style: none;1050 display: flex;1051 flex-direction: column;1052 gap: 0.85rem;1053}1054 1055.stat-info-item {1056 display: flex;1057 justify-content: space-between;1058 align-items: center;1059 padding-bottom: 0.85rem;1060 border-bottom: 1px solid rgba(255, 255, 255, 0.02);1061}1062 1063.stat-info-item:last-child {1064 padding-bottom: 0;1065 border-bottom: none;1066}1067 1068.stat-info-key {1069 font-size: 0.85rem;1070 color: var(--text-secondary);1071}1072 1073.stat-info-value {1074 font-family: var(--font-mono);1075 font-size: 0.8rem;1076 color: var(--text-primary);1077 background-color: rgba(255, 255, 255, 0.015);1078 padding: 0.2rem 0.5rem;1079 border-radius: 4px;1080 border: 1px solid rgba(255, 255, 255, 0.03);1081}1082 1083/* Custom Notification Toast System */1084.toast-container {1085 position: fixed;1086 bottom: 24px;1087 right: 24px;1088 display: flex;1089 flex-direction: column;1090 gap: 10px;1091 z-index: 1000;1092 pointer-events: none;1093 max-width: 380px;1094 width: 100%;1095}1096 1097.toast {1098 background: rgba(10, 10, 12, 0.85);1099 backdrop-filter: blur(16px);1100 -webkit-backdrop-filter: blur(16px);1101 border: 1px solid var(--border-color);1102 border-radius: 10px;1103 padding: 1rem 1.25rem;1104 display: flex;1105 align-items: flex-start;1106 gap: 0.75rem;1107 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);1108 transform: translateX(120%);1109 opacity: 0;1110 pointer-events: auto;1111 transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.25), opacity 0.3s ease;1112}1113 1114.toast.show {1115 transform: translateX(0);1116 opacity: 1;1117}1118 1119.toast-icon {1120 font-size: 1.25rem;1121 flex-shrink: 0;1122 margin-top: 0.1rem;1123}1124 1125.toast-content {1126 flex-grow: 1;1127}1128 1129.toast-title {1130 font-size: 0.85rem;1131 font-weight: 700;1132 color: var(--text-primary);1133}1134 1135.toast-msg {1136 font-size: 0.78rem;1137 color: var(--text-secondary);1138 margin-top: 0.15rem;1139 line-height: 1.4;1140}1141 1142.toast-close {1143 background: none;1144 border: none;1145 color: var(--text-muted);1146 cursor: pointer;1147 font-size: 0.95rem;1148 padding: 0.1rem;1149 transition: var(--transition-smooth);1150}1151 1152.toast-close:hover {1153 color: var(--text-primary);1154}1155 1156/* Toast Theme Modifiers */1157.toast-success {1158 border-color: var(--success-border);1159}1160.toast-success .toast-icon {1161 color: var(--success);1162}1163 1164.toast-error {1165 border-color: var(--error-border);1166}1167.toast-error .toast-icon {1168 color: var(--error);1169}1170 1171.toast-info {1172 border-color: var(--info-border);1173}1174.toast-info .toast-icon {1175 color: var(--info);1176}1177 1178/* Animations */1179@keyframes spin {1180 from { transform: rotate(0deg); }1181 to { transform: rotate(360deg); }1182}1183 1184@keyframes status-pulse {1185 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }1186 70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }1187 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }1188}1189 1190@keyframes radar-grow {1191 0% { transform: scale(0.4); opacity: 0.8; }1192 100% { transform: scale(1.4); opacity: 0; }1193}1194 1195@keyframes form-enter {1196 from {1197 opacity: 0;1198 transform: translateY(8px);1199 }1200 to {