/* 2.5.0 PREMIUM LOGIN (SB 25 Oct): /super, /<CODE>, /<CODE>/staff, /staff — NEXUS Night navy + gold, glassy card, soft moving light
   (CSS only, transform + opacity = light on cheap phones, stopped for prefers-reduced-motion), big fields, AA contrast.
   Used only when <body> has class "sbprem" (set by web/js/core/loginprem.js on those addresses); the old /admin/ and /app/ look is unchanged. */
body.sbprem { background: #050c22; color: #f3f5fb; min-height: 100vh; }
body.sbprem #root { position: relative; z-index: 1; }
.sbp-bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 85% -10%, #12306e 0%, #0a1a44 38%, #050c22 75%); }
.sbp-bg i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; will-change: transform; }
.sbp-bg i:nth-child(1) { width: 46vmax; height: 46vmax; left: -12vmax; top: -14vmax; background: radial-gradient(circle, rgba(212, 160, 23, 0.55), rgba(212, 160, 23, 0) 70%); animation: sbpA 26s ease-in-out infinite alternate; }
.sbp-bg i:nth-child(2) { width: 52vmax; height: 52vmax; right: -18vmax; bottom: -20vmax; background: radial-gradient(circle, rgba(46, 98, 214, 0.6), rgba(46, 98, 214, 0) 70%); animation: sbpB 32s ease-in-out infinite alternate; }
.sbp-bg i:nth-child(3) { width: 26vmax; height: 26vmax; left: 55%; top: 18%; background: radial-gradient(circle, rgba(242, 201, 76, 0.28), rgba(242, 201, 76, 0) 70%); animation: sbpA 40s ease-in-out infinite alternate-reverse; }
@keyframes sbpA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(8vmax, 6vmax, 0) scale(1.12); } }
@keyframes sbpB { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-7vmax, -5vmax, 0) scale(0.95); } }
@media (prefers-reduced-motion: reduce) { .sbp-bg i { animation: none !important; } }
/* office / super login (admin.html) */
body.sbprem .login { grid-template-columns: minmax(0, 1fr) !important; place-items: center; min-height: 100vh; padding: 28px 16px 70px; background: transparent !important; }
body.sbprem .login > .art { display: none !important; }
body.sbprem .login .form { padding: 0 !important; width: 100%; display: flex; justify-content: center; }
body.sbprem .login .form .card,
body.sbprem .login .box { width: 440px; max-width: 100%; background: rgba(13, 26, 62, 0.72) !important; border: 1px solid rgba(212, 160, 23, 0.38); border-radius: 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); color: #f3f5fb; padding: 28px 26px 24px; }
body.sbprem .sbp-head { text-align: center; margin-bottom: 18px; }
body.sbprem .sbp-head .sbp-logo { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 12px 34px rgba(212, 160, 23, 0.28); object-fit: cover; background: #0a1a44; }
/* 2.8.8: when the company's own logo is the one shown, sit it on white and keep the whole logo visible (same as the old small company badge) */
body.sbprem .sbp-head .sbp-logo.sbp-logo-co { object-fit: contain; background: #fff; padding: 8px; }
body.sbprem .sbp-head .sbp-co { width: 64px; height: 64px; border-radius: 18px; object-fit: contain; background: #fff; margin-inline-start: -14px; border: 3px solid #0d1a3e; vertical-align: bottom; }
body.sbprem .sbp-hi { font-size: 15px; color: #f2c94c; font-weight: 700; margin-top: 12px; letter-spacing: 0.2px; }
body.sbprem .sbp-title { font-size: 22px; font-weight: 800; margin: 4px 0 2px; color: #ffffff; line-height: 1.25; }
body.sbprem .sbp-sub { font-size: 13.5px; color: #c3cbe0; }
body.sbprem .login label.f { color: #dfe5f3 !important; font-size: 13.5px; font-weight: 600; }
body.sbprem .login .input { height: 52px; font-size: 17px; border-radius: 14px; background: rgba(5, 12, 34, 0.7) !important; border: 1px solid rgba(195, 203, 224, 0.28) !important; color: #ffffff !important; }
body.sbprem .login .input:focus { border-color: #d4a017 !important; box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.28) !important; outline: none; }
body.sbprem .login .input::placeholder { color: #8f9bb8; }
body.sbprem .login .btn.lg,
body.sbprem .login #go { height: 54px; border-radius: 15px; font-size: 17px; font-weight: 800; background: linear-gradient(180deg, #f2c94c, #d4a017) !important; color: #1a1300 !important; border: 0 !important; box-shadow: 0 10px 26px rgba(212, 160, 23, 0.32); }
body.sbprem .login .btn.ghost { color: #f2c94c !important; background: transparent !important; border: 0 !important; text-decoration: underline; text-underline-offset: 3px; }
body.sbprem .login .muted, body.sbprem .login .small.muted { color: #c3cbe0 !important; }
body.sbprem .login .bb { color: #fff; }
body.sbprem .sbp-foot { position: fixed; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 12px; color: #aab4cc; letter-spacing: 1.6px; z-index: 1; pointer-events: none; }
body.sbprem .sbp-foot b { color: #f2c94c; font-weight: 800; }
body.sbprem .sbp-lang { position: fixed; top: 14px; inset-inline-end: 14px; z-index: 3; }
body.sbprem .sbp-chip { display: inline-flex; gap: 6px; align-items: center; margin-top: 10px; padding: 5px 12px; border-radius: 999px; background: rgba(212, 160, 23, 0.14); border: 1px solid rgba(212, 160, 23, 0.4); color: #f8e2a0; font-size: 12.5px; font-weight: 700; }
/* staff login (app.html) — phone first, big friendly buttons */
body.sbprem .login { background: transparent !important; }
body.sbprem .login .head { display: none; }
body.sbprem .login .box .appname { display: none; }
body.sbprem .login .box .lang button { color: #dfe5f3; border-color: rgba(195, 203, 224, 0.3); background: rgba(5, 12, 34, 0.5); min-height: 38px; }
body.sbprem .login .box .lang button.on { background: #d4a017; color: #1a1300; border-color: #d4a017; }
body.sbprem .login .brandline { background: rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 10px 12px; }
body.sbprem .login .brandline .b { color: #fff; }
body.sbprem .login a { color: #f2c94c; }
@media (max-width: 480px) { body.sbprem .login .form .card, body.sbprem .login .box { padding: 22px 18px 20px; border-radius: 22px; } body.sbprem .sbp-title { font-size: 20px; } }