/* Platform wordmark / logo slots. Heights are fixed per size so the logo keeps its aspect ratio (width follows) and the layout does not move when it replaces the text. */
[data-qx-brand]{display:inline-flex;align-items:center;max-width:100%;color:var(--ink,#e6f1f5)}
[data-qx-brand] .qx-word{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;font-weight:650;letter-spacing:.03em;line-height:1;white-space:nowrap}
[data-qx-brand] img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain}
[data-qx-brand=login]{height:56px}[data-qx-brand=login] .qx-word{font-size:30px}
[data-qx-brand=header]{height:22px}[data-qx-brand=header] .qx-word{font-size:17px}
[data-qx-brand=compact]{height:30px}[data-qx-brand=compact] .qx-word{font-size:12.5px}
@media (max-width:640px){[data-qx-brand=login]{height:46px}[data-qx-brand=login] .qx-word{font-size:26px}[data-qx-brand=header]{height:20px}[data-qx-brand=header] .qx-word{font-size:15px}}

/* Loading screen: shown by index.html from the first paint (the wordmark is already in the markup), faded out by app.js once the sign-in form or the first data is ready */
.qx-splash{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--bg,#050f14);color:var(--ink,#e6f1f5);transition:opacity .35s ease}
.qx-splash.done{opacity:0;pointer-events:none}
.qx-splash-bar{position:relative;width:140px;height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.qx-splash-bar::after{content:"";position:absolute;top:0;left:-45%;width:45%;height:100%;border-radius:2px;background:var(--accent,#2dd4bf);animation:qx-splash-run 1.1s ease-in-out infinite}
.qx-splash-msg{font:12px "Segoe UI",system-ui,sans-serif;opacity:.65;letter-spacing:.04em}
@keyframes qx-splash-run{from{left:-45%}to{left:100%}}
@media (prefers-reduced-motion:reduce){.qx-splash-bar::after{animation:none;left:0;width:100%;opacity:.5}.qx-splash{transition:none}}