:root { color-scheme: dark; --canvas: #101216; --ink: #f2f4f7; --muted: #a6afbd; --track: #303640; }
:root[data-theme="light"] { color-scheme: light; --canvas: #f3f4f6; --ink: #1c222b; --muted: #5c6777; --track: #dee3e9; }
html, body { margin: 0; background: var(--canvas); }
#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); font-family: system-ui, sans-serif; }
#loading .mark { width: 64px; height: 64px; border-radius: 20px; }
#loading h1 { font-size: 34px; font-weight: 700; letter-spacing: -1.5px; margin: 18px 0 4px; }
#loading h1 span { color: #ff8a3d; }
#loading p { color: var(--muted); font-size: 13px; }
.loading-bar { width: 110px; height: 3px; margin-top: 22px; border-radius: 8px; background: var(--track); overflow: hidden; }
.loading-bar::after { content: ''; display: block; width: 42px; height: 100%; border-radius: inherit; background: #ff8a3d; animation: loading 1.3s ease-in-out infinite alternate; }
@keyframes loading { to { transform: translateX(68px); } }
@media (prefers-reduced-motion: reduce) { .loading-bar::after { animation: none; width: 100%; } }
flutter-view ~ #loading, body:has(flutter-view) #loading { display: none; }