Spaces:
Running
Running
| :root { | |
| /* Glass Base */ | |
| --glass-bg: rgba(255, 255, 255, 0.04); | |
| --glass-border: rgba(255, 255, 255, 0.08); | |
| --glass-shadow: rgba(0, 0, 0, 0.6); | |
| --glass-highlight: rgba(255, 255, 255, 0.05); | |
| --glass-blur: 24px; | |
| /* Accent – Cool Blue‑Violet → Cyan */ | |
| --accent-start: #6C5CE7; | |
| --accent-mid: #A29BFE; | |
| --accent-end: #00CEC9; | |
| --accent-gradient: linear-gradient(135deg, var(--accent-start), var(--accent-mid), var(--accent-end)); | |
| --accent-glow: rgba(108, 92, 231, 0.15); | |
| --accent-soft: rgba(108, 92, 231, 0.08); | |
| /* Text */ | |
| --text-primary: #f1f5f9; | |
| --text-secondary: #94a3b8; | |
| --text-muted: #64748b; | |
| /* Backgrounds */ | |
| --bg-base: #0a0a0a; | |
| --bg-surface: #111111; | |
| --bg-elevated: #1a1a1a; | |
| /* Radii */ | |
| --radius-sm: 0.5rem; | |
| --radius-md: 0.75rem; | |
| --radius-lg: 1rem; | |
| --radius-xl: 1.5rem; | |
| --radius-full: 9999px; | |
| /* Easing (spring-like) */ | |
| --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); | |
| --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); | |
| --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); | |
| /* Durations */ | |
| --duration-fast: 150ms; | |
| --duration-base: 300ms; | |
| --duration-slow: 500ms; | |
| } | |
| /* ---------- Reset & Base ---------- */ | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html { | |
| font-size: 16px; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: var(--bg-base); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| min-height: 100dvh; | |
| overflow-x: hidden; | |
| } | |
| /* ---------- Scrollbar ---------- */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(255, 255, 255, 0.12); | |
| border-radius: var(--radius-full); | |
| transition: background var(--duration-fast) var(--ease-smooth); | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| } | |
| /* ---------- Glassmorphism Base ---------- */ | |
| .glass { | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(var(--glass-blur)); | |
| -webkit-backdrop-filter: blur(var(--glass-blur)); | |
| border: 1px solid var(--glass-border); | |
| box-shadow: 0 8px 32px var(--glass-shadow), inset 0 1px 0 var(--glass-highlight); | |
| border-radius: var(--radius-lg); | |
| } | |
| /* Glass Variants */ | |
| .glass-light { | |
| background: rgba(255, 255, 255, 0.06); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); | |
| } | |
| .glass-dark { | |
| background: rgba(0, 0, 0, 0.6); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7); | |
| } | |
| .glass-accent { | |
| background: var(--accent-soft); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| border: 1px solid rgba(108, 92, 231, 0.15); | |
| box-shadow: 0 4px 32px var(--accent-glow); | |
| } | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.03); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| border-radius: var(--radius-md); | |
| box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3); | |
| transition: all var(--duration-base) var(--ease-smooth); | |
| } | |
| .glass-card:hover { | |
| background: rgba(255, 255, 255, 0.06); | |
| border-color: rgba(255, 255, 255, 0.12); | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); | |
| transform: translateY(-2px); | |
| } | |
| /* ---------- Background Gradients (Animated Mesh) ---------- */ | |
| .bg-gradient-dark { | |
| background: | |
| radial-gradient(ellipse at 20% 50%, rgba(108, 92, 231, 0.08) 0%, transparent 60%), | |
| radial-gradient(ellipse at 80% 20%, rgba(0, 206, 201, 0.06) 0%, transparent 50%), | |
| var(--bg-base); | |
| } | |
| .bg-gradient-radial { | |
| background: | |
| radial-gradient(circle at 30% 40%, rgba(108, 92, 231, 0.06) 0%, transparent 50%), | |
| radial-gradient(circle at 70% 80%, rgba(0, 206, 201, 0.04) 0%, transparent 40%), | |
| var(--bg-base); | |
| } | |
| .bg-gradient-subtle { | |
| background: | |
| linear-gradient(180deg, rgba(108, 92, 231, 0.03) 0%, transparent 50%), | |
| var(--bg-base); | |
| } | |
| /* Animated gradient mesh (2026 trend) */ | |
| @keyframes gradientShift { | |
| 0% { | |
| background-position: 0% 50%; | |
| } | |
| 50% { | |
| background-position: 100% 50%; | |
| } | |
| 100% { | |
| background-position: 0% 50%; | |
| } | |
| } | |
| .animate-gradient-mesh { | |
| background: linear-gradient(-45deg, #0a0a0a, #1a1a2e, #16213e, #0a0a0a); | |
| background-size: 400% 400%; | |
| animation: gradientShift 12s ease-in-out infinite; | |
| } | |
| /* ---------- Glow Effects ---------- */ | |
| .glow-accent { | |
| box-shadow: | |
| 0 0 40px var(--accent-glow), | |
| 0 0 80px rgba(108, 92, 231, 0.04), | |
| inset 0 0 40px rgba(108, 92, 231, 0.02); | |
| } | |
| .glow-hover { | |
| transition: box-shadow var(--duration-base) var(--ease-smooth); | |
| } | |
| .glow-hover:hover { | |
| box-shadow: | |
| 0 0 60px var(--accent-glow), | |
| 0 0 120px rgba(108, 92, 231, 0.06), | |
| inset 0 0 60px rgba(108, 92, 231, 0.03); | |
| } | |
| /* ---------- Text Styles ---------- */ | |
| .text-gradient { | |
| background: var(--accent-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .text-gradient-white { | |
| background: linear-gradient(135deg, #f1f5f9, #94a3b8); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* ---------- Buttons ---------- */ | |
| .btn-glass { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| padding: 0.6rem 1.4rem; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-full); | |
| cursor: pointer; | |
| transition: all var(--duration-base) var(--ease-spring); | |
| user-select: none; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-glass::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: var(--glass-highlight); | |
| opacity: 0; | |
| transition: opacity var(--duration-fast) var(--ease-smooth); | |
| } | |
| .btn-glass:hover { | |
| background: rgba(255, 255, 255, 0.08); | |
| border-color: rgba(255, 255, 255, 0.15); | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); | |
| } | |
| .btn-glass:hover::before { | |
| opacity: 1; | |
| } | |
| .btn-glass:active { | |
| transform: scale(0.95); | |
| } | |
| .btn-glass-primary { | |
| background: var(--accent-soft); | |
| border-color: rgba(108, 92, 231, 0.2); | |
| color: var(--accent-mid); | |
| } | |
| .btn-glass-primary:hover { | |
| background: rgba(108, 92, 231, 0.18); | |
| border-color: rgba(108, 92, 231, 0.3); | |
| box-shadow: 0 8px 32px var(--accent-glow); | |
| } | |
| .btn-glass-accent { | |
| background: var(--accent-gradient); | |
| border: none; | |
| color: #0a0a0a; | |
| font-weight: 600; | |
| } | |
| .btn-glass-accent:hover { | |
| transform: translateY(-2px) scale(1.02); | |
| box-shadow: 0 12px 40px var(--accent-glow); | |
| } | |
| .btn-glass-accent:active { | |
| transform: scale(0.95); | |
| } | |
| .btn-icon { | |
| width: 2.5rem; | |
| height: 2.5rem; | |
| padding: 0; | |
| border-radius: var(--radius-full); | |
| } | |
| /* ---------- Inputs ---------- */ | |
| .input-glass { | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| font-size: 0.875rem; | |
| font-family: inherit; | |
| color: var(--text-primary); | |
| background: rgba(255, 255, 255, 0.04); | |
| backdrop-filter: blur(8px); | |
| -webkit-backdrop-filter: blur(8px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-md); | |
| outline: none; | |
| transition: all var(--duration-fast) var(--ease-smooth); | |
| } | |
| .input-glass::placeholder { | |
| color: var(--text-muted); | |
| } | |
| .input-glass:focus { | |
| border-color: rgba(108, 92, 231, 0.3); | |
| background: rgba(255, 255, 255, 0.06); | |
| box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.04); | |
| } | |
| .input-glass:hover { | |
| border-color: rgba(255, 255, 255, 0.12); | |
| } | |
| /* ---------- Code Blocks ---------- */ | |
| .code-block-glass { | |
| background: rgba(0, 0, 0, 0.6); | |
| backdrop-filter: blur(8px); | |
| -webkit-backdrop-filter: blur(8px); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| border-radius: var(--radius-md); | |
| padding: 1.25rem; | |
| font-family: 'JetBrains Mono', 'Fira Code', monospace; | |
| font-size: 0.85rem; | |
| line-height: 1.6; | |
| color: #e2e8f0; | |
| overflow-x: auto; | |
| position: relative; | |
| } | |
| .code-block-glass .copy-btn { | |
| position: absolute; | |
| top: 0.6rem; | |
| right: 0.6rem; | |
| padding: 0.2rem 0.6rem; | |
| font-size: 0.7rem; | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| background: rgba(255, 255, 255, 0.06); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| transition: all var(--duration-fast) var(--ease-smooth); | |
| } | |
| .code-block-glass .copy-btn:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: var(--text-primary); | |
| } | |
| /* ---------- Animations (Framer Motion inspired) ---------- */ | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn var(--duration-base) var(--ease-smooth) forwards; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(16px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-fade-in-up { | |
| animation: fadeInUp var(--duration-slow) var(--ease-spring) forwards; | |
| } | |
| @keyframes fadeInDown { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-16px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-fade-in-down { | |
| animation: fadeInDown var(--duration-slow) var(--ease-spring) forwards; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| .animate-slide-in { | |
| animation: slideIn var(--duration-slow) var(--ease-spring) forwards; | |
| } | |
| @keyframes slideInRight { | |
| from { | |
| opacity: 0; | |
| transform: translateX(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| .animate-slide-in-right { | |
| animation: slideInRight var(--duration-slow) var(--ease-spring) forwards; | |
| } | |
| @keyframes scaleIn { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.92); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| .animate-scale-in { | |
| animation: scaleIn var(--duration-base) var(--ease-spring) forwards; | |
| } | |
| @keyframes pulseGlow { | |
| 0%, | |
| 100% { | |
| box-shadow: 0 0 20px var(--accent-glow); | |
| } | |
| 50% { | |
| box-shadow: 0 0 40px rgba(108, 92, 231, 0.2); | |
| } | |
| } | |
| .animate-pulse-glow { | |
| animation: pulseGlow 2.5s ease-in-out infinite; | |
| } | |
| /* Shimmer (light streak) */ | |
| @keyframes shimmer { | |
| 0% { | |
| background-position: -200% center; | |
| } | |
| 100% { | |
| background-position: 200% center; | |
| } | |
| } | |
| .animate-shimmer { | |
| background: linear-gradient( | |
| 90deg, | |
| transparent 0%, | |
| rgba(255, 255, 255, 0.04) 25%, | |
| rgba(255, 255, 255, 0.08) 50%, | |
| rgba(255, 255, 255, 0.04) 75%, | |
| transparent 100% | |
| ); | |
| background-size: 200% 100%; | |
| animation: shimmer 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, | |
| 100% { | |
| transform: translateY(0px); | |
| } | |
| 50% { | |
| transform: translateY(-6px); | |
| } | |
| } | |
| .animate-float { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes floatSlow { | |
| 0%, | |
| 100% { | |
| transform: translateY(0px); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| .animate-float-slow { | |
| animation: floatSlow 5s ease-in-out infinite; | |
| } | |
| @keyframes spinSlow { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .animate-spin-slow { | |
| animation: spinSlow 4s linear infinite; | |
| } | |
| /* ---------- Stagger Children ---------- */ | |
| .stagger-children>* { | |
| opacity: 0; | |
| animation: fadeInUp var(--duration-slow) var(--ease-spring) forwards; | |
| } | |
| .stagger-children>*:nth-child(1) { | |
| animation-delay: 0.05s; | |
| } | |
| .stagger-children>*:nth-child(2) { | |
| animation-delay: 0.10s; | |
| } | |
| .stagger-children>*:nth-child(3) { | |
| animation-delay: 0.15s; | |
| } | |
| .stagger-children>*:nth-child(4) { | |
| animation-delay: 0.20s; | |
| } | |
| .stagger-children>*:nth-child(5) { | |
| animation-delay: 0.25s; | |
| } | |
| .stagger-children>*:nth-child(6) { | |
| animation-delay: 0.30s; | |
| } | |
| .stagger-children>*:nth-child(7) { | |
| animation-delay: 0.35s; | |
| } | |
| .stagger-children>*:nth-child(8) { | |
| animation-delay: 0.40s; | |
| } | |
| .stagger-children>*:nth-child(9) { | |
| animation-delay: 0.45s; | |
| } | |
| .stagger-children>*:nth-child(10) { | |
| animation-delay: 0.50s; | |
| } | |
| /* ---------- Utility Animation Classes ---------- */ | |
| .hover-lift { | |
| transition: transform var(--duration-base) var(--ease-spring), | |
| box-shadow var(--duration-base) var(--ease-smooth); | |
| } | |
| .hover-lift:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); | |
| } | |
| .hover-glow { | |
| transition: box-shadow var(--duration-base) var(--ease-smooth); | |
| } | |
| .hover-glow:hover { | |
| box-shadow: 0 0 60px var(--accent-glow); | |
| } | |
| .hover-scale { | |
| transition: transform var(--duration-fast) var(--ease-spring); | |
| } | |
| .hover-scale:hover { | |
| transform: scale(1.04); | |
| } | |
| .hover-scale:active { | |
| transform: scale(0.96); | |
| } | |
| /* ---------- Glass Components ---------- */ | |
| /* Chat Bubble */ | |
| .chat-bubble-glass { | |
| background: rgba(255, 255, 255, 0.04); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| border-radius: var(--radius-lg); | |
| padding: 1rem; | |
| transition: all var(--duration-base) var(--ease-smooth); | |
| } | |
| .chat-bubble-glass.user { | |
| background: var(--accent-soft); | |
| border-color: rgba(108, 92, 231, 0.12); | |
| } | |
| /* Sidebar Glass */ | |
| .sidebar-glass { | |
| background: rgba(0, 0, 0, 0.4); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-right: 1px solid rgba(255, 255, 255, 0.04); | |
| } | |
| /* Header Glass */ | |
| .header-glass { | |
| background: rgba(0, 0, 0, 0.5); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.04); | |
| } | |
| /* Dropdown Glass */ | |
| .dropdown-glass { | |
| background: rgba(20, 20, 20, 0.85); | |
| backdrop-filter: blur(24px); | |
| -webkit-backdrop-filter: blur(24px); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| border-radius: var(--radius-md); | |
| box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6); | |
| } | |
| .dropdown-glass .dropdown-item { | |
| padding: 0.5rem 1rem; | |
| color: var(--text-secondary); | |
| transition: all var(--duration-fast) var(--ease-smooth); | |
| cursor: pointer; | |
| border-radius: var(--radius-sm); | |
| } | |
| .dropdown-glass .dropdown-item:hover { | |
| background: rgba(255, 255, 255, 0.06); | |
| color: var(--text-primary); | |
| } | |
| /* Chain of Thought */ | |
| .cot-step-glass { | |
| border-left: 2px solid rgba(255, 255, 255, 0.06); | |
| padding-left: 0.75rem; | |
| margin-left: 0.5rem; | |
| transition: border-color var(--duration-fast) var(--ease-smooth); | |
| } | |
| .cot-step-glass.active { | |
| border-left-color: var(--accent-mid); | |
| } | |
| .cot-step-glass .step-number { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| font-size: 0.65rem; | |
| font-weight: 600; | |
| border-radius: var(--radius-full); | |
| background: var(--accent-soft); | |
| color: var(--accent-mid); | |
| flex-shrink: 0; | |
| } | |
| .cot-step-glass .step-number.done { | |
| background: rgba(108, 92, 231, 0.15); | |
| color: var(--accent-mid); | |
| } | |
| .cot-step-glass .step-number.pending { | |
| background: rgba(255, 255, 255, 0.04); | |
| color: var(--text-muted); | |
| } | |
| /* File Tree */ | |
| .file-tree-glass .file-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.3rem 0.6rem; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| color: var(--text-secondary); | |
| transition: all var(--duration-fast) var(--ease-smooth); | |
| } | |
| .file-tree-glass .file-item:hover { | |
| background: rgba(255, 255, 255, 0.04); | |
| color: var(--text-primary); | |
| } | |
| .file-tree-glass .file-item.selected { | |
| background: rgba(255, 255, 255, 0.06); | |
| color: var(--text-primary); | |
| } | |
| .file-tree-glass .file-item .folder-chevron { | |
| transition: transform var(--duration-fast) var(--ease-smooth); | |
| margin-left: auto; | |
| } | |
| .file-tree-glass .file-item .folder-chevron.open { | |
| transform: rotate(90deg); | |
| } | |
| /* Web Preview Frame */ | |
| .preview-frame-glass { | |
| background: rgba(0, 0, 0, 0.4); | |
| backdrop-filter: blur(8px); | |
| -webkit-backdrop-filter: blur(8px); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| } | |
| .preview-frame-glass iframe { | |
| width: 100%; | |
| height: 200px; | |
| border: none; | |
| background: var(--bg-base); | |
| } | |
| /* Prompt Input */ | |
| .prompt-input-glass { | |
| display: flex; | |
| align-items: flex-end; | |
| gap: 0.5rem; | |
| padding: 0.5rem; | |
| background: rgba(255, 255, 255, 0.03); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| border-radius: var(--radius-lg); | |
| transition: all var(--duration-fast) var(--ease-smooth); | |
| } | |
| .prompt-input-glass:focus-within { | |
| border-color: rgba(108, 92, 231, 0.2); | |
| background: rgba(255, 255, 255, 0.05); | |
| box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.03); | |
| } | |
| .prompt-input-glass textarea { | |
| flex: 1; | |
| border: none; | |
| resize: none; | |
| outline: none; | |
| font-size: 0.9rem; | |
| font-family: inherit; | |
| color: var(--text-primary); | |
| background: transparent; | |
| min-height: 2.5rem; | |
| max-height: 8rem; | |
| padding: 0.25rem 0; | |
| } | |
| .prompt-input-glass textarea::placeholder { | |
| color: var(--text-muted); | |
| } | |
| /* Badge / Tag */ | |
| .badge-glass { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.25rem; | |
| padding: 0.15rem 0.6rem; | |
| font-size: 0.7rem; | |
| font-weight: 500; | |
| letter-spacing: 0.02em; | |
| border-radius: var(--radius-full); | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| } | |
| .badge-glass.accent { | |
| background: var(--accent-soft); | |
| border-color: rgba(108, 92, 231, 0.15); | |
| color: var(--accent-mid); | |
| } | |
| /* Divider */ | |
| .divider-glass { | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent); | |
| border: none; | |
| margin: 0.5rem 0; | |
| } | |
| /* Tooltip */ | |
| .tooltip-glass { | |
| position: relative; | |
| } | |
| .tooltip-glass .tooltip-text { | |
| position: absolute; | |
| bottom: calc(100% + 0.5rem); | |
| left: 50%; | |
| transform: translateX(-50%) scale(0.9); | |
| padding: 0.3rem 0.8rem; | |
| font-size: 0.75rem; | |
| color: var(--text-primary); | |
| background: rgba(20, 20, 20, 0.9); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| border-radius: var(--radius-sm); | |
| white-space: nowrap; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: all var(--duration-fast) var(--ease-smooth); | |
| } | |
| .tooltip-glass:hover .tooltip-text { | |
| opacity: 1; | |
| transform: translateX(-50%) scale(1); | |
| } | |
| /* Loading Spinner */ | |
| .spinner-glass { | |
| width: 2rem; | |
| height: 2rem; | |
| border: 2px solid rgba(255, 255, 255, 0.04); | |
| border-top-color: var(--accent-mid); | |
| border-radius: var(--radius-full); | |
| animation: spinSlow 0.8s linear infinite; | |
| } | |
| /* ---------- Responsive ---------- */ | |
| @media (max-width: 768px) { | |
| :root { | |
| --glass-blur: 16px; | |
| --radius-lg: 0.75rem; | |
| --radius-xl: 1rem; | |
| } | |
| .glass { | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| } | |
| .glass-card:hover { | |
| transform: translateY(-1px); | |
| } | |
| .code-block-glass { | |
| font-size: 0.75rem; | |
| padding: 0.75rem; | |
| } | |
| .btn-glass { | |
| padding: 0.5rem 1rem; | |
| font-size: 0.8rem; | |
| } | |
| } | |
| /* ---------- Utilities ---------- */ | |
| .relative { | |
| position: relative; | |
| } | |
| .overflow-hidden { | |
| overflow: hidden; | |
| } | |
| .select-none { | |
| user-select: none; | |
| } | |
| .transition-all { | |
| transition: all var(--duration-base) var(--ease-smooth); | |
| } | |
| .transition-fast { | |
| transition: all var(--duration-fast) var(--ease-smooth); | |
| } | |
| .transition-slow { | |
| transition: all var(--duration-slow) var(--ease-smooth); | |
| } |