| |
| :root { |
| --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| --font-display: 'Outfit', sans-serif; |
| --font-mono: 'JetBrains Mono', monospace; |
|
|
| |
| --bg-dark: #0a0e17; |
| --bg-card: rgba(17, 24, 39, 0.75); |
| --bg-card-hover: rgba(31, 41, 55, 0.85); |
| --bg-input: #111827; |
| --bg-nested: rgba(15, 23, 42, 0.6); |
|
|
| --border-subtle: rgba(255, 255, 255, 0.08); |
| --border-focus: #6366f1; |
| --border-hover: rgba(255, 255, 255, 0.16); |
|
|
| --text-primary: #f8fafc; |
| --text-secondary: #94a3b8; |
| --text-muted: #64748b; |
|
|
| --accent-primary: #6366f1; |
| --accent-primary-hover: #4f46e5; |
| --accent-secondary: #06b6d4; |
| --accent-gradient: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%); |
| --accent-glow: 0 0 25px rgba(99, 102, 241, 0.25); |
|
|
| --success: #10b981; |
| --warning: #f59e0b; |
| --danger: #ef4444; |
|
|
| --radius-sm: 6px; |
| --radius-md: 10px; |
| --radius-lg: 16px; |
| --radius-xl: 24px; |
|
|
| --transition-fast: 0.15s ease; |
| --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1); |
| } |
|
|
| |
| *, |
| *::before, |
| *::after { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| body { |
| font-family: var(--font-sans); |
| background-color: var(--bg-dark); |
| color: var(--text-primary); |
| min-height: 100vh; |
| line-height: 1.5; |
| -webkit-font-smoothing: antialiased; |
| background-image: |
| radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.12) 0px, transparent 50%), |
| radial-gradient(at 100% 100%, rgba(6, 182, 212, 0.08) 0px, transparent 50%); |
| background-attachment: fixed; |
| } |
|
|
| |
| .app-layout { |
| display: flex; |
| flex-direction: column; |
| min-height: 100vh; |
| max-width: 1440px; |
| margin: 0 auto; |
| padding: 0 1.5rem 2rem; |
| } |
|
|
| |
| .navbar { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 1.25rem 0; |
| border-bottom: 1px solid var(--border-subtle); |
| margin-bottom: 2rem; |
| } |
|
|
| .brand { |
| display: flex; |
| align-items: center; |
| gap: 0.85rem; |
| } |
|
|
| .brand-icon { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| width: 44px; |
| height: 44px; |
| border-radius: var(--radius-md); |
| background: var(--accent-gradient); |
| color: #ffffff; |
| box-shadow: var(--accent-glow); |
| } |
|
|
| .brand-title { |
| font-family: var(--font-display); |
| font-size: 1.4rem; |
| font-weight: 700; |
| letter-spacing: -0.02em; |
| background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
|
|
| .brand-sub { |
| font-size: 0.8rem; |
| color: var(--text-muted); |
| } |
|
|
| .nav-actions { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| } |
|
|
| |
| .studio-container { |
| display: grid; |
| grid-template-columns: 1.15fr 1fr; |
| gap: 2rem; |
| align-items: start; |
| } |
|
|
| @media (max-width: 960px) { |
| .studio-container { |
| grid-template-columns: 1fr; |
| gap: 1.5rem; |
| } |
| } |
|
|
