/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */ *, ::before, ::after { box-sizing: border-box; } html { font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; line-height: 1.15; -webkit-text-size-adjust: 100%; tab-size: 4; } body { margin: 0; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { border-color: currentcolor; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } legend { padding: 0; } progress { vertical-align: baseline; } summary { display: list-item; } /* @font-face for Geist + Geist Mono. Hand-written for now; TypographyService * will generate these by scanning the fonts folder. Files in public/fonts/. */ @font-face { font-family: 'Geist'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/geist/Geist-Regular.ttf') format('truetype'); } @font-face { font-family: 'Geist'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/geist/Geist-Bold.ttf') format('truetype'); } @font-face { font-family: 'Geist'; font-weight: 900; font-style: normal; font-display: swap; src: url('/fonts/geist/Geist-Black.ttf') format('truetype'); } @font-face { font-family: 'Geist Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/geist-mono/GeistMono-Regular.ttf') format('truetype'); } @font-face { font-family: 'Geist Mono'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/geist-mono/GeistMono-Bold.ttf') format('truetype'); } /* * Design tokens. The ramps + fonts are theme-neutral (:root). The semantic * tokens live in named-theme blocks (:root[data-theme="..."]) — the theme * picker sets data-theme on , and app-page defaults it to "dark". * Components add their own per-theme overrides via config css.themes.. */ :root { --neutral-50: #fafafa; --neutral-100: #f5f5f5; --neutral-200: #e5e5e5; --neutral-300: #d4d4d4; --neutral-400: #a3a3a3; --neutral-500: #737373; --neutral-600: #525252; --neutral-700: #404040; --neutral-800: #262626; --neutral-900: #171717; --neutral-950: #0a0a0a; --accent-50: #fef2f2; --accent-100: #fee2e2; --accent-400: #f87171; --accent-500: #ef4444; --accent-600: #dc2626; --accent-700: #b91c1c; --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace; } :root[data-theme="dark"] { --page-bg: var(--neutral-800); --surface: var(--neutral-50); --text: var(--neutral-100); --text-muted: var(--neutral-400); --line: var(--neutral-700); --accent: var(--accent-500); --on-accent: var(--neutral-50); } :root[data-theme="light"] { --page-bg: var(--neutral-50); --surface: #ffffff; --text: var(--neutral-900); --text-muted: var(--neutral-500); --line: var(--neutral-200); --accent: var(--accent-500); --on-accent: var(--neutral-50); } :root { --button-radius: 10px; --button-padding-y: 9px; --button-padding-x: 18px; --input-radius: 8px; --card-radius: 14px; --card-padding: 20px; --login-radius: 14px; --login-surface: var(--neutral-50); --theme-picker-radius: 8px; --sidebar-nav-width: 240px; } :root[data-theme="dark"] { --card-border: var(--neutral-700); } :root[data-theme="light"] { --card-border: var(--neutral-200); } :root { --palette-color-names: red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose; --palette-neutral-names: slate gray zinc neutral stone; } :root { --palette-amber-50: #fffbeb; --palette-amber-100: #fef3c7; --palette-amber-200: #fde68a; --palette-amber-300: #fcd34d; --palette-amber-400: #fbbf24; --palette-amber-500: #f59e0b; --palette-amber-600: #d97706; --palette-amber-700: #b45309; --palette-amber-800: #92400e; --palette-amber-900: #78350f; --palette-amber-950: #451a03; } :root { --palette-blue-50: #eff6ff; --palette-blue-100: #dbeafe; --palette-blue-200: #bfdbfe; --palette-blue-300: #93c5fd; --palette-blue-400: #60a5fa; --palette-blue-500: #3b82f6; --palette-blue-600: #2563eb; --palette-blue-700: #1d4ed8; --palette-blue-800: #1e40af; --palette-blue-900: #1e3a8a; --palette-blue-950: #172554; } :root { --palette-cyan-50: #ecfeff; --palette-cyan-100: #cffafe; --palette-cyan-200: #a5f3fc; --palette-cyan-300: #67e8f9; --palette-cyan-400: #22d3ee; --palette-cyan-500: #06b6d4; --palette-cyan-600: #0891b2; --palette-cyan-700: #0e7490; --palette-cyan-800: #155e75; --palette-cyan-900: #164e63; --palette-cyan-950: #083344; } :root { --palette-emerald-50: #ecfdf5; --palette-emerald-100: #d1fae5; --palette-emerald-200: #a7f3d0; --palette-emerald-300: #6ee7b7; --palette-emerald-400: #34d399; --palette-emerald-500: #10b981; --palette-emerald-600: #059669; --palette-emerald-700: #047857; --palette-emerald-800: #065f46; --palette-emerald-900: #064e3b; --palette-emerald-950: #022c22; } :root { --palette-fuchsia-50: #fdf4ff; --palette-fuchsia-100: #fae8ff; --palette-fuchsia-200: #f5d0fe; --palette-fuchsia-300: #f0abfc; --palette-fuchsia-400: #e879f9; --palette-fuchsia-500: #d946ef; --palette-fuchsia-600: #c026d3; --palette-fuchsia-700: #a21caf; --palette-fuchsia-800: #86198f; --palette-fuchsia-900: #701a75; --palette-fuchsia-950: #4a044e; } :root { --palette-gray-50: #f9fafb; --palette-gray-100: #f3f4f6; --palette-gray-200: #e5e7eb; --palette-gray-300: #d1d5db; --palette-gray-400: #9ca3af; --palette-gray-500: #6b7280; --palette-gray-600: #4b5563; --palette-gray-700: #374151; --palette-gray-800: #1f2937; --palette-gray-900: #111827; --palette-gray-950: #030712; } :root { --palette-green-50: #f0fdf4; --palette-green-100: #dcfce7; --palette-green-200: #bbf7d0; --palette-green-300: #86efac; --palette-green-400: #4ade80; --palette-green-500: #22c55e; --palette-green-600: #16a34a; --palette-green-700: #15803d; --palette-green-800: #166534; --palette-green-900: #14532d; --palette-green-950: #052e16; } :root { --palette-indigo-50: #eef2ff; --palette-indigo-100: #e0e7ff; --palette-indigo-200: #c7d2fe; --palette-indigo-300: #a5b4fc; --palette-indigo-400: #818cf8; --palette-indigo-500: #6366f1; --palette-indigo-600: #4f46e5; --palette-indigo-700: #4338ca; --palette-indigo-800: #3730a3; --palette-indigo-900: #312e81; --palette-indigo-950: #1e1b4b; } :root { --palette-lime-50: #f7fee7; --palette-lime-100: #ecfccb; --palette-lime-200: #d9f99d; --palette-lime-300: #bef264; --palette-lime-400: #a3e635; --palette-lime-500: #84cc16; --palette-lime-600: #65a30d; --palette-lime-700: #4d7c0f; --palette-lime-800: #3f6212; --palette-lime-900: #365314; --palette-lime-950: #1a2e05; } :root { --palette-neutral-50: #fafafa; --palette-neutral-100: #f5f5f5; --palette-neutral-200: #e5e5e5; --palette-neutral-300: #d4d4d4; --palette-neutral-400: #a3a3a3; --palette-neutral-500: #737373; --palette-neutral-600: #525252; --palette-neutral-700: #404040; --palette-neutral-800: #262626; --palette-neutral-900: #171717; --palette-neutral-950: #0a0a0a; } :root { --palette-orange-50: #fff7ed; --palette-orange-100: #ffedd5; --palette-orange-200: #fed7aa; --palette-orange-300: #fdba74; --palette-orange-400: #fb923c; --palette-orange-500: #f97316; --palette-orange-600: #ea580c; --palette-orange-700: #c2410c; --palette-orange-800: #9a3412; --palette-orange-900: #7c2d12; --palette-orange-950: #431407; } :root { --palette-pink-50: #fdf2f8; --palette-pink-100: #fce7f3; --palette-pink-200: #fbcfe8; --palette-pink-300: #f9a8d4; --palette-pink-400: #f472b6; --palette-pink-500: #ec4899; --palette-pink-600: #db2777; --palette-pink-700: #be185d; --palette-pink-800: #9d174d; --palette-pink-900: #831843; --palette-pink-950: #500724; } :root { --palette-purple-50: #faf5ff; --palette-purple-100: #f3e8ff; --palette-purple-200: #e9d5ff; --palette-purple-300: #d8b4fe; --palette-purple-400: #c084fc; --palette-purple-500: #a855f7; --palette-purple-600: #9333ea; --palette-purple-700: #7e22ce; --palette-purple-800: #6b21a8; --palette-purple-900: #581c87; --palette-purple-950: #3b0764; } :root { --palette-red-50: #fef2f2; --palette-red-100: #fee2e2; --palette-red-200: #fecaca; --palette-red-300: #fca5a5; --palette-red-400: #f87171; --palette-red-500: #ef4444; --palette-red-600: #dc2626; --palette-red-700: #b91c1c; --palette-red-800: #991b1b; --palette-red-900: #7f1d1d; --palette-red-950: #450a0a; } :root { --palette-rose-50: #fff1f2; --palette-rose-100: #ffe4e6; --palette-rose-200: #fecdd3; --palette-rose-300: #fda4af; --palette-rose-400: #fb7185; --palette-rose-500: #f43f5e; --palette-rose-600: #e11d48; --palette-rose-700: #be123c; --palette-rose-800: #9f1239; --palette-rose-900: #881337; --palette-rose-950: #4c0519; } :root { --palette-sky-50: #f0f9ff; --palette-sky-100: #e0f2fe; --palette-sky-200: #bae6fd; --palette-sky-300: #7dd3fc; --palette-sky-400: #38bdf8; --palette-sky-500: #0ea5e9; --palette-sky-600: #0284c7; --palette-sky-700: #0369a1; --palette-sky-800: #075985; --palette-sky-900: #0c4a6e; --palette-sky-950: #082f49; } :root { --palette-slate-50: #f8fafc; --palette-slate-100: #f1f5f9; --palette-slate-200: #e2e8f0; --palette-slate-300: #cbd5e1; --palette-slate-400: #94a3b8; --palette-slate-500: #64748b; --palette-slate-600: #475569; --palette-slate-700: #334155; --palette-slate-800: #1e293b; --palette-slate-900: #0f172a; --palette-slate-950: #020617; } :root { --palette-stone-50: #fafaf9; --palette-stone-100: #f5f5f4; --palette-stone-200: #e7e5e4; --palette-stone-300: #d6d3d1; --palette-stone-400: #a8a29e; --palette-stone-500: #78716c; --palette-stone-600: #57534e; --palette-stone-700: #44403c; --palette-stone-800: #292524; --palette-stone-900: #1c1917; --palette-stone-950: #0c0a09; } :root { --palette-teal-50: #f0fdfa; --palette-teal-100: #ccfbf1; --palette-teal-200: #99f6e4; --palette-teal-300: #5eead4; --palette-teal-400: #2dd4bf; --palette-teal-500: #14b8a6; --palette-teal-600: #0d9488; --palette-teal-700: #0f766e; --palette-teal-800: #115e59; --palette-teal-900: #134e4a; --palette-teal-950: #042f2e; } :root { --palette-violet-50: #f5f3ff; --palette-violet-100: #ede9fe; --palette-violet-200: #ddd6fe; --palette-violet-300: #c4b5fd; --palette-violet-400: #a78bfa; --palette-violet-500: #8b5cf6; --palette-violet-600: #7c3aed; --palette-violet-700: #6d28d9; --palette-violet-800: #5b21b6; --palette-violet-900: #4c1d95; --palette-violet-950: #2e1065; } :root { --palette-yellow-50: #fefce8; --palette-yellow-100: #fef9c3; --palette-yellow-200: #fef08a; --palette-yellow-300: #fde047; --palette-yellow-400: #facc15; --palette-yellow-500: #eab308; --palette-yellow-600: #ca8a04; --palette-yellow-700: #a16207; --palette-yellow-800: #854d0e; --palette-yellow-900: #713f12; --palette-yellow-950: #422006; } :root { --palette-zinc-50: #fafafa; --palette-zinc-100: #f4f4f5; --palette-zinc-200: #e4e4e7; --palette-zinc-300: #d4d4d8; --palette-zinc-400: #a1a1aa; --palette-zinc-500: #71717a; --palette-zinc-600: #52525b; --palette-zinc-700: #3f3f46; --palette-zinc-800: #27272a; --palette-zinc-900: #18181b; --palette-zinc-950: #09090b; } :root[data-accent="amber"] { --accent-50: #fffbeb; --accent-100: #fef3c7; --accent-200: #fde68a; --accent-300: #fcd34d; --accent-400: #fbbf24; --accent-500: #f59e0b; --accent-600: #d97706; --accent-700: #b45309; --accent-800: #92400e; --accent-900: #78350f; --accent-950: #451a03; } :root[data-accent="blue"] { --accent-50: #eff6ff; --accent-100: #dbeafe; --accent-200: #bfdbfe; --accent-300: #93c5fd; --accent-400: #60a5fa; --accent-500: #3b82f6; --accent-600: #2563eb; --accent-700: #1d4ed8; --accent-800: #1e40af; --accent-900: #1e3a8a; --accent-950: #172554; } :root[data-accent="cyan"] { --accent-50: #ecfeff; --accent-100: #cffafe; --accent-200: #a5f3fc; --accent-300: #67e8f9; --accent-400: #22d3ee; --accent-500: #06b6d4; --accent-600: #0891b2; --accent-700: #0e7490; --accent-800: #155e75; --accent-900: #164e63; --accent-950: #083344; } :root[data-accent="emerald"] { --accent-50: #ecfdf5; --accent-100: #d1fae5; --accent-200: #a7f3d0; --accent-300: #6ee7b7; --accent-400: #34d399; --accent-500: #10b981; --accent-600: #059669; --accent-700: #047857; --accent-800: #065f46; --accent-900: #064e3b; --accent-950: #022c22; } :root[data-accent="fuchsia"] { --accent-50: #fdf4ff; --accent-100: #fae8ff; --accent-200: #f5d0fe; --accent-300: #f0abfc; --accent-400: #e879f9; --accent-500: #d946ef; --accent-600: #c026d3; --accent-700: #a21caf; --accent-800: #86198f; --accent-900: #701a75; --accent-950: #4a044e; } :root[data-surface="gray"] { --neutral-50: #f9fafb; --neutral-100: #f3f4f6; --neutral-200: #e5e7eb; --neutral-300: #d1d5db; --neutral-400: #9ca3af; --neutral-500: #6b7280; --neutral-600: #4b5563; --neutral-700: #374151; --neutral-800: #1f2937; --neutral-900: #111827; --neutral-950: #030712; } :root[data-accent="green"] { --accent-50: #f0fdf4; --accent-100: #dcfce7; --accent-200: #bbf7d0; --accent-300: #86efac; --accent-400: #4ade80; --accent-500: #22c55e; --accent-600: #16a34a; --accent-700: #15803d; --accent-800: #166534; --accent-900: #14532d; --accent-950: #052e16; } :root[data-accent="indigo"] { --accent-50: #eef2ff; --accent-100: #e0e7ff; --accent-200: #c7d2fe; --accent-300: #a5b4fc; --accent-400: #818cf8; --accent-500: #6366f1; --accent-600: #4f46e5; --accent-700: #4338ca; --accent-800: #3730a3; --accent-900: #312e81; --accent-950: #1e1b4b; } :root[data-accent="lime"] { --accent-50: #f7fee7; --accent-100: #ecfccb; --accent-200: #d9f99d; --accent-300: #bef264; --accent-400: #a3e635; --accent-500: #84cc16; --accent-600: #65a30d; --accent-700: #4d7c0f; --accent-800: #3f6212; --accent-900: #365314; --accent-950: #1a2e05; } :root[data-surface="neutral"] { --neutral-50: #fafafa; --neutral-100: #f5f5f5; --neutral-200: #e5e5e5; --neutral-300: #d4d4d4; --neutral-400: #a3a3a3; --neutral-500: #737373; --neutral-600: #525252; --neutral-700: #404040; --neutral-800: #262626; --neutral-900: #171717; --neutral-950: #0a0a0a; } :root[data-accent="orange"] { --accent-50: #fff7ed; --accent-100: #ffedd5; --accent-200: #fed7aa; --accent-300: #fdba74; --accent-400: #fb923c; --accent-500: #f97316; --accent-600: #ea580c; --accent-700: #c2410c; --accent-800: #9a3412; --accent-900: #7c2d12; --accent-950: #431407; } :root[data-accent="pink"] { --accent-50: #fdf2f8; --accent-100: #fce7f3; --accent-200: #fbcfe8; --accent-300: #f9a8d4; --accent-400: #f472b6; --accent-500: #ec4899; --accent-600: #db2777; --accent-700: #be185d; --accent-800: #9d174d; --accent-900: #831843; --accent-950: #500724; } :root[data-accent="purple"] { --accent-50: #faf5ff; --accent-100: #f3e8ff; --accent-200: #e9d5ff; --accent-300: #d8b4fe; --accent-400: #c084fc; --accent-500: #a855f7; --accent-600: #9333ea; --accent-700: #7e22ce; --accent-800: #6b21a8; --accent-900: #581c87; --accent-950: #3b0764; } :root[data-accent="red"] { --accent-50: #fef2f2; --accent-100: #fee2e2; --accent-200: #fecaca; --accent-300: #fca5a5; --accent-400: #f87171; --accent-500: #ef4444; --accent-600: #dc2626; --accent-700: #b91c1c; --accent-800: #991b1b; --accent-900: #7f1d1d; --accent-950: #450a0a; } :root[data-accent="rose"] { --accent-50: #fff1f2; --accent-100: #ffe4e6; --accent-200: #fecdd3; --accent-300: #fda4af; --accent-400: #fb7185; --accent-500: #f43f5e; --accent-600: #e11d48; --accent-700: #be123c; --accent-800: #9f1239; --accent-900: #881337; --accent-950: #4c0519; } :root[data-accent="sky"] { --accent-50: #f0f9ff; --accent-100: #e0f2fe; --accent-200: #bae6fd; --accent-300: #7dd3fc; --accent-400: #38bdf8; --accent-500: #0ea5e9; --accent-600: #0284c7; --accent-700: #0369a1; --accent-800: #075985; --accent-900: #0c4a6e; --accent-950: #082f49; } :root[data-surface="slate"] { --neutral-50: #f8fafc; --neutral-100: #f1f5f9; --neutral-200: #e2e8f0; --neutral-300: #cbd5e1; --neutral-400: #94a3b8; --neutral-500: #64748b; --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1e293b; --neutral-900: #0f172a; --neutral-950: #020617; } :root[data-surface="stone"] { --neutral-50: #fafaf9; --neutral-100: #f5f5f4; --neutral-200: #e7e5e4; --neutral-300: #d6d3d1; --neutral-400: #a8a29e; --neutral-500: #78716c; --neutral-600: #57534e; --neutral-700: #44403c; --neutral-800: #292524; --neutral-900: #1c1917; --neutral-950: #0c0a09; } :root[data-accent="teal"] { --accent-50: #f0fdfa; --accent-100: #ccfbf1; --accent-200: #99f6e4; --accent-300: #5eead4; --accent-400: #2dd4bf; --accent-500: #14b8a6; --accent-600: #0d9488; --accent-700: #0f766e; --accent-800: #115e59; --accent-900: #134e4a; --accent-950: #042f2e; } :root[data-accent="violet"] { --accent-50: #f5f3ff; --accent-100: #ede9fe; --accent-200: #ddd6fe; --accent-300: #c4b5fd; --accent-400: #a78bfa; --accent-500: #8b5cf6; --accent-600: #7c3aed; --accent-700: #6d28d9; --accent-800: #5b21b6; --accent-900: #4c1d95; --accent-950: #2e1065; } :root[data-accent="yellow"] { --accent-50: #fefce8; --accent-100: #fef9c3; --accent-200: #fef08a; --accent-300: #fde047; --accent-400: #facc15; --accent-500: #eab308; --accent-600: #ca8a04; --accent-700: #a16207; --accent-800: #854d0e; --accent-900: #713f12; --accent-950: #422006; } :root[data-surface="zinc"] { --neutral-50: #fafafa; --neutral-100: #f4f4f5; --neutral-200: #e4e4e7; --neutral-300: #d4d4d8; --neutral-400: #a1a1aa; --neutral-500: #71717a; --neutral-600: #52525b; --neutral-700: #3f3f46; --neutral-800: #27272a; --neutral-900: #18181b; --neutral-950: #09090b; } /* * Base layout + shared element styles. Consumes the semantic tokens. * Component-specific styles live in resources/css/components/*.css. */ html, body { padding: 0; } body { min-height: 100vh; display: flex; flex-direction: column; background: var(--page-bg); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.4em; font-family: var(--font-sans); font-weight: 500; line-height: 1.2; } h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 19px; } p { margin: 0 0 0.8em; line-height: 1.6; } .topbar { display: flex; align-items: center; justify-content: flex-end; padding: 18px 24px; } .topbar__nav { display: flex; align-items: center; gap: 14px; } .topbar__nav form { margin: 0; } .muted { color: var(--text-muted); font-size: 14px; } .main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: safe center; padding: 24px; } .landing { display: flex; flex-direction: column; align-items: center; } /* App shell — sidebar (left) + scrollable main (right). On . */ body.app-shell { flex-direction: row; height: 100vh; overflow: hidden; } .app-shell__wrap { flex: 1; min-width: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } .app-shell__main { flex: 1; overflow-y: auto; padding: 28px 32px; } /* Brand logo — sizes the inline tokenized SVG injected by MediaService. */ .brand-logo svg { display: block; width: 200px; height: auto; } /* * Button. Base + variants (primary, ghost) + every state (hover, active, * focus-visible, disabled). --button-* vars come from CssService * (config/components/button.php['css']); hardcoded values are fallbacks. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: var(--button-padding-y, 9px) var(--button-padding-x, 18px); border: 1px solid transparent; border-radius: var(--button-radius, 8px); font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-100); } /* primary */ .btn--primary { background: var(--accent-500); border-color: var(--accent-500); color: var(--on-accent); } .btn--primary:hover { background: var(--accent-600); border-color: var(--accent-600); } .btn--primary:active { background: var(--accent-700); border-color: var(--accent-700); } /* ghost */ .btn--ghost { background: transparent; border-color: var(--line); color: var(--text); } .btn--ghost:hover { border-color: var(--neutral-500); background: rgba(255, 255, 255, 0.04); } .btn--ghost:active { background: rgba(255, 255, 255, 0.08); } /* disabled / inactive — both