:root { --bg:#0b0c10; --text:#ece8dc; --dim:#8e8b83; --line:#1c1e26; --acc:#12d9c4; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 "Inter Tight","Segoe UI",system-ui,sans-serif; }
a { color:inherit; }
.dim { color:var(--dim); }
/* Barra */
.top { display:flex; align-items:center; justify-content:space-between; height:60px; padding:0 16px; border-bottom:1px solid var(--line); }
.brand img { display:block; height:44px; width:auto; }
.top-end { display:flex; gap:6px; }
.icon { display:grid; place-items:center; width:36px; height:36px; border-radius:8px; color:var(--dim); }
.icon:hover { color:var(--text); background:#15171e; }
.empty { max-width:640px; margin:18vh auto 0; padding:0 16px; text-align:center; color:var(--dim); }
/* Login: el logo arriba; el formulario es el bloque común de login.css */
.login-page { min-height:100vh; min-height:100dvh; display:grid; place-items:center; }
.login { width:100%; padding:32px 16px; display:flex; flex-direction:column; align-items:center; }
.login-logo { display:block; margin:0 auto 18px; }
.login-logo .sc { width:min(400px, calc(100vw - 32px)); }
.login-err { color:#ef5350; margin:0 0 12px; font-size:14px; }
/* Logo de Scout animado: velas en ola, ojos con brillo y parpadeo */
.sc{position:relative;aspect-ratio:1536/1024}
.sc>img{position:absolute;display:block}
.sc .sc-base{inset:0;width:100%;height:100%}
.sc .sc-c{opacity:0;mix-blend-mode:screen;filter:drop-shadow(0 0 6px #19f0dc);animation:sc-candle 5s ease-in-out infinite}
@keyframes sc-candle{0%,100%{opacity:0}12%{opacity:.95}30%{opacity:0}}
.sc .sc-eye{transform-origin:50% 60%;animation:sc-blink 6s infinite,sc-glow 3s ease-in-out infinite}
.sc .sc-eye+.sc-eye{animation-delay:.04s,0s}
@keyframes sc-blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}
@keyframes sc-glow{0%,100%{filter:drop-shadow(0 0 3px #19f0dc)}50%{filter:drop-shadow(0 0 12px #19f0dc)}}
@media (prefers-reduced-motion:reduce){.sc *{animation:none!important}}