html.loading { overflow: hidden; background: #111916; }
html.loading[data-theme="light"] { background: #f3f5ed; }
html.loading #app { visibility: hidden; pointer-events: none; }
#preloader { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: #111916; color: #a6cfa0; font-family: "Segoe UI", Arial, sans-serif; transition: opacity .4s; }
[data-theme="light"] #preloader { background: #f3f5ed; color: #255b46; }
#preloader strong { font-size: 13px; letter-spacing: 3px; }
#preloader #loader-status { font-size: 12px; color: #a4b3a7; max-width: 330px; padding: 0 20px; text-align: center; line-height: 1.7; }
[data-theme="light"] #preloader #loader-status { color: #64765f; }
.loader-scene { width: 130px; height: 140px; perspective: 650px; display: grid; place-items: center; margin-bottom: 14px; }
.loader-cube { position: relative; width: 76px; height: 76px; transform-style: preserve-3d; animation: rubik-spin 5s linear infinite; }
.loader-face { position: absolute; inset: 0; box-sizing: border-box; display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; padding: 3px; border-radius: 5px; background: #14201b; backface-visibility: hidden; }
.loader-face i { background: var(--sticker); border-radius: 3px; box-shadow: inset 0 1px 2px #ffffff50, inset 0 -2px 2px #0003; }
.loader-face.front { --sticker: #43a882; transform: translateZ(38px); }
.loader-face.back { --sticker: #487fc6; transform: rotateY(180deg) translateZ(38px); }
.loader-face.right { --sticker: #e44d36; transform: rotateY(90deg) translateZ(38px); }
.loader-face.left { --sticker: #ed923a; transform: rotateY(-90deg) translateZ(38px); }
.loader-face.top { --sticker: #f5d04a; transform: rotateX(90deg) translateZ(38px); }
.loader-face.bottom { --sticker: #f0f1e9; transform: rotateX(-90deg) translateZ(38px); }
.loader-track { width: 140px; height: 3px; border-radius: 3px; overflow: hidden; background: #71866b30; }
.loader-track i { display: block; width: 45%; height: 100%; background: #95c9a5; animation: loader-sweep 1.4s ease-in-out infinite alternate; }
#preloader.complete .loader-track i { animation: none; width: 100%; }
#preloader.loaded { opacity: 0; pointer-events: none; }
#loader-retry { border: 1px solid #799573; background: transparent; color: inherit; border-radius: 8px; padding: 10px 16px; cursor: pointer; }
#preloader.failed .loader-track { display: none; }
#loader-retry[hidden] { display: none; }
@keyframes rubik-spin { from { transform: rotateX(-24deg) rotateY(-35deg); } to { transform: rotateX(-24deg) rotateY(325deg); } }
@keyframes loader-sweep { from { transform: translateX(-50%); } to { transform: translateX(180%); } }
@media (prefers-reduced-motion: reduce) { .loader-cube { animation: none; transform: rotateX(-24deg) rotateY(-35deg); } .loader-track i { animation: none; width: 100%; opacity: .5; } }