@font-face {
  font-family: 'Cairo';
  src: url('assets/assets/fonts/cairo/Cairo-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('assets/assets/fonts/cairo/Cairo-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('assets/assets/fonts/cairo/Cairo-SemiBold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('assets/assets/fonts/cairo/Cairo-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root { color-scheme: dark; --sky: #0c0a15; --ink: #f5f2ff; --muted: #a6a0bc; --signal: #c1b3ff; }
#app-loader, #app-loader * { box-sizing: border-box; }
html, body { margin: 0; background: var(--sky); }
#app-loader { position: fixed; inset: 0; z-index: 10; overflow: auto; display: grid; place-items: center; padding: max(32px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); color: var(--ink); font-family: Cairo, system-ui, -apple-system, sans-serif; text-align: center; isolation: isolate; background: radial-gradient(ellipse at 50% 40%, #29213d 0%, #151020 38%, var(--sky) 76%); transition: opacity .45s ease, visibility .45s; }
#app-loader::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .3; background-image: radial-gradient(circle, #b6adc9 1px, transparent 1px); background-size: 73px 73px; mask-image: linear-gradient(transparent, #000 30%, transparent); }
#app-loader.is-ready { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-card { width: min(100%, 440px); margin: auto; }
.loading-eyebrow { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; margin: 0 0 28px; }
.loading-constellation { position: relative; width: 260px; height: 260px; max-width: 100%; margin: 0 auto 22px; display: grid; place-items: center; }
.loading-ring { position: absolute; inset: 10px; border: 1px solid #c1b3ff18; border-radius: 50%; }
.loading-ring::after { content: ''; position: absolute; top: 15%; left: 13%; width: 7px; height: 7px; background: var(--signal); border-radius: 50%; box-shadow: 0 0 18px #c1b3ff99; }
.loading-ring:nth-child(1) { animation: orbit 18s linear infinite; }
.loading-ring:nth-child(2) { inset: 32px; border-style: dashed; animation: orbit 28s linear infinite reverse; }
.loading-ring:nth-child(2)::after { width: 4px; height: 4px; opacity: .5; }
.loading-mark { display: grid; place-items: center; width: 120px; height: 120px; border: 1px solid #d4caff40; border-radius: 32px; background: linear-gradient(145deg, #c5b6ff22, #9c7dff08); box-shadow: inset 0 1px 0 #ffffff20, 0 0 70px #9a7cff18; transform: rotate(-6deg); }
.loading-logo { width: 88px; height: 88px; border-radius: 23px; transform: rotate(6deg); }
.loading-title { margin: 0; font-size: clamp(32px, 5vw, 46px); font-weight: 700; letter-spacing: -.045em; line-height: 1.2; }
.loading-subtitle { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 12px 0 36px; }
.loading-track { position: relative; height: 3px; overflow: hidden; border-radius: 3px; background: #ffffff0d; width: min(100%, 260px); margin: 0 auto 18px; }
.loading-track::after { content: ''; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--signal), transparent); animation: signal 2s ease-in-out infinite; }
.loading-copy { color: #c9c1dd; font-size: 12px; line-height: 1.7; margin: 0; }
.loading-footer { margin: 36px 0 0; color: #777087; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.loading-footer span { display: inline-block; width: 5px; height: 5px; margin-inline-end: 7px; background: #adccb9; border-radius: 50%; vertical-align: middle; }
[dir=rtl] .loading-eyebrow, [dir=rtl] .loading-title, [dir=rtl] .loading-footer { letter-spacing: normal; }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes signal { from { transform: translateX(-110%); } to { transform: translateX(360%); } }
@media (min-width: 840px) and (max-height: 600px) { .loading-card { width: min(100%, 760px); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; text-align: start; } .loading-eyebrow { margin-bottom: 10px; } .loading-constellation { margin: 0; } .loading-track { margin-inline: 0; } .loading-subtitle { margin-bottom: 24px; } .loading-footer { margin-top: 20px; } }
@media (max-width: 360px) { .loading-constellation { width: 210px; height: 210px; } }
@media (prefers-reduced-motion: reduce) { #app-loader, #app-loader *, #app-loader *::after { animation: none !important; transition: none !important; } .loading-track::after { transform: translateX(75%); } }