:root { --mall-sidebar-width: 232px; --mall-topbar-height: 76px; }
html { background: #060b14; }
html[data-theme="light"] { background: #f4f6fa; }
body { margin: 0; }
.boot-loading { min-height: calc(100dvh - var(--mall-topbar-height)); margin-top: var(--mall-topbar-height); margin-left: var(--mall-sidebar-width); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; background: #060b14; color: #94a5bc; font: 14px "Segoe UI Variable", "Microsoft YaHei UI", sans-serif; }
html[data-theme="light"] .boot-loading { background: #f4f6fa; color: #5e6f85; }
.boot-spinner { width: 34px; height: 34px; border: 3px solid #27364b; border-top-color: #ecf2fb; border-radius: 50%; animation: boot-spin .8s linear infinite; }
html[data-theme="light"] .boot-spinner { border-color: #e0e8f3; border-top-color: #334b69; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
@media (min-width: 1900px) { :root { --mall-sidebar-width: 280px; } }
@media (max-width: 1250px) { :root { --mall-sidebar-width: 190px; } }
@media (max-width: 980px) { :root { --mall-sidebar-width: 82px; } }
@media (max-width: 600px) { :root { --mall-sidebar-width: 0px; --mall-topbar-height: 123px; } }
@media (prefers-reduced-motion: reduce) { .boot-spinner { animation: none; } }