/* CROWN — Login screen (Inazuma blue + golden crown, light/dark, animated) */
@import url('fonts.css');

:root {
    --brand-900: #1d2e5c; --brand-800: #233157; --brand-700: #273a6f; --brand-600: #2e4480;
    --violet-500: #3d63dd; --violet-400: #4664b8; --violet-300: #94b5ff;
    --teal-glow: rgba(61, 99, 221, .4);
    --gold-500: #f0b429; --gold-400: #f6c651; --gold-300: #fde68a; --gold-600: #d97706;
    --ease: cubic-bezier(.16, 1, .3, 1);
    --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
    --font: 'Inter', system-ui, sans-serif; --font-head: 'Poppins', var(--font);
}
:root, :root[data-theme="light"] {
    --bg: #f7f9ff; --surface: #ffffff; --surface-2: #f7f9ff; --border: #dfeaff;
    --text: #1e1f24; --text-soft: #62636c; --text-faint: #8b8d98;
}
:root[data-theme="dark"] {
    --bg: #212224; --surface: #28292b; --surface-2: #303134; --border: #36373b;
    --text: #eeeef0; --text-soft: #b4b6bf; --text-faint: #72747f;
}

* { box-sizing: border-box; }
body {
    margin: 0; font-family: var(--font);
    height: 100vh;
    display: grid; grid-template-columns: 1.05fr 1fr; grid-template-rows: 1fr;
    color: var(--text); background: var(--bg); overflow: hidden;
    transition: background .4s var(--ease), color .4s var(--ease);
    -webkit-font-smoothing: antialiased;
}
@supports (height: 100dvh) {
    body { height: 100dvh; }
}

/* ═══ Keyframes ═══ */
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes spinRev { to { transform: rotate(-360deg); } }
@keyframes floatY  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes fadeUp  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes drift   { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,-24px) scale(1.12); } 100% { transform: translate(0,0) scale(1); } }
@keyframes glowPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes crownGlow { 0%,100% { filter: drop-shadow(0 0 6px rgba(246,198,81,.5)) drop-shadow(0 0 14px rgba(240,180,41,.3)); } 50% { filter: drop-shadow(0 0 12px rgba(246,198,81,.8)) drop-shadow(0 0 28px rgba(240,180,41,.5)); } }
@keyframes crownFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
@keyframes sparkle { 0%,100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1); } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
@keyframes shake { 10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(2px); } 30%,50%,70% { transform: translateX(-4px); } 40%,60% { transform: translateX(4px); } }

/* ═══ Crown SVG sizing ═══ */
.crown-svg { width: 36px; height: 36px; animation: crownGlow 3s ease-in-out infinite, crownFloat 5s ease-in-out infinite; }
.crown-svg-sm { width: 34px; height: 34px; animation: crownGlow 3s ease-in-out infinite; }
.crown-svg-xs { width: 24px; height: 24px; }

/* ═══ Combined logo: crown + SEAIT (main) + CICT (badge) ═══ */
@keyframes imgPulse  { 0%,100% { filter: drop-shadow(0 0 3px rgba(246,198,81,.3)); } 50% { filter: drop-shadow(0 0 8px rgba(246,198,81,.6)); } }
@keyframes badgePop   { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes badgeFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes logoBreathe{ 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* Hero brand combo — crown on top, SEAIT as main circle, CICT as badge */
.logo-combo {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    width: 60px; height: 72px;
    animation: floatY 5s ease-in-out infinite;
}
.crown-top { width: 20px; height: 20px; animation: crownGlow 3s ease-in-out infinite, crownFloat 5s ease-in-out infinite; flex-shrink: 0; margin-bottom: -3px; z-index: 2; }
.logo-main { position: relative; width: 52px; height: 52px; }
.logo-seait {
    width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(246,198,81,.3);
    background: #fff;
    animation: imgPulse 3s ease-in-out infinite, logoBreathe 4s ease-in-out infinite;
}
.logo-cict-badge {
    position: absolute; bottom: -2px; right: -4px;
    width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--brand-700);
    background: #fff;
    animation: badgePop .6s var(--ease-bounce) .3s both, badgeFloat 3s ease-in-out infinite 1s;
}

/* Auth form icon combo */
.auth-icon-combo {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    width: 60px; height: 72px;
    position: relative; z-index: 1;
}
.crown-top-sm { width: 18px; height: 18px; animation: crownGlow 3s ease-in-out infinite; flex-shrink: 0; margin-bottom: -3px; z-index: 2; }
.auth-icon-main { position: relative; width: 50px; height: 50px; }
.auth-img-seait {
    width: 50px; height: 50px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(246,198,81,.25);
    background: #fff;
    animation: imgPulse 3s ease-in-out infinite, logoBreathe 4s ease-in-out infinite;
}
.auth-img-cict-badge {
    position: absolute; bottom: -2px; right: -3px;
    width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--surface);
    background: #fff;
    animation: badgePop .6s var(--ease-bounce) .3s both, badgeFloat 3s ease-in-out infinite 1s;
}

/* Mobile brand combo */
.mb-logo-combo {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    width: 44px; height: 52px;
    flex-shrink: 0;
}
.crown-top-xs { width: 14px; height: 14px; flex-shrink: 0; margin-bottom: -2px; z-index: 2; }
.mb-logo-main { position: relative; width: 38px; height: 38px; }
.mb-img-seait {
    width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
    border: 1.5px solid rgba(246,198,81,.25);
    background: #fff;
}
.mb-img-cict-badge {
    position: absolute; bottom: -1px; right: -2px;
    width: 16px; height: 16px; border-radius: 50%; object-fit: cover;
    border: 1.5px solid var(--surface);
    background: #fff;
}

/* (loader-logo-combo and old loader image styles removed — see LOADER section below) */

/* ═══════════════════════════════════════
   LEFT HERO PANEL
═══════════════════════════════════════ */
.auth-hero {
    background: radial-gradient(circle at 20% 20%, var(--brand-700), var(--brand-900) 72%);
    color: #fff;
    padding: 54px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden; height: 100%;
    transition: background .4s var(--ease);
}
[data-theme="light"] .auth-hero {
    background: radial-gradient(circle at 20% 20%, #2e4480, #1d2e5c 72%);
}

.auth-hero .blob { position: absolute; border-radius: 50%; filter: blur(14px); pointer-events: none; }
.auth-hero .blob.b1 {
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(61,99,221,.52), transparent 70%);
    top: -90px; right: -70px;
    animation: drift 14s ease-in-out infinite;
}
.auth-hero .blob.b2 {
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(240,180,41,.35), transparent 70%);
    bottom: -80px; left: -50px;
    animation: drift 18s ease-in-out infinite reverse;
}
.auth-hero .blob.b3 {
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(148,181,255,.25), transparent 70%);
    top: 40%; left: 30%;
    animation: drift 22s ease-in-out infinite 3s;
}
[data-theme="light"] .auth-hero .blob.b1 { background: radial-gradient(circle, rgba(61,99,221,.42), transparent 70%); }
[data-theme="light"] .auth-hero .blob.b2 { background: radial-gradient(circle, rgba(240,180,41,.28), transparent 70%); }

.auth-hero .grid-lines {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at 40% 40%, #000, transparent 75%);
}

/* Sparkles on hero */
.auth-hero .hero-spark {
    position: absolute; width: 4px; height: 4px; border-radius: 50%;
    background: var(--gold-300); pointer-events: none;
    box-shadow: 0 0 6px var(--gold-400), 0 0 14px rgba(246,198,81,.5);
    animation: sparkle 3s ease-in-out infinite;
}
.auth-hero .hero-spark.s1 { top: 15%; left: 20%; animation-delay: 0s; }
.auth-hero .hero-spark.s2 { top: 35%; left: 60%; animation-delay: .8s; }
.auth-hero .hero-spark.s3 { top: 65%; left: 15%; animation-delay: 1.6s; }
.auth-hero .hero-spark.s4 { top: 25%; left: 75%; animation-delay: 2.2s; width: 3px; height: 3px; }
.auth-hero .hero-spark.s5 { top: 75%; left: 50%; animation-delay: 1.2s; width: 3px; height: 3px; }

.auth-hero .brand { display: flex; align-items: center; gap: 16px; position: relative; z-index: 2; animation: fadeUp .6s var(--ease) both; }
.auth-hero .brand .logo-wrap { position: relative; width: 66px; height: 66px; display: grid; place-items: center; flex-shrink: 0; }
.auth-hero .brand .logo-wrap .ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--gold-400); border-right-color: var(--violet-300); animation: spin 4s linear infinite; }
.auth-hero .brand .logo-wrap .logo-circle {
    width: 60px; height: 60px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
    box-shadow: 0 8px 26px rgba(240,180,41,.3), inset 0 0 0 1px rgba(246,198,81,.15);
    animation: floatY 5s ease-in-out infinite;
}
.auth-hero .brand .brand-abbr { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 2px; }
.auth-hero .brand b { display: block; font-family: var(--font-head); font-size: 22px; line-height: 1.2; color: #fff; }
.auth-hero .brand .brand-tag { display: block; font-size: 11px; letter-spacing: .08em; color: rgba(255,255,255,.55); margin-top: 3px; }

.auth-hero .hero-copy { position: relative; z-index: 2; animation: fadeUp .7s var(--ease) .1s both; }
.auth-hero .hero-copy h1 { font-family: var(--font-head); font-size: 42px; line-height: 1.08; margin: 0 0 16px; color: #fff; }
.auth-hero .hero-copy h1 .accent {
    background: linear-gradient(90deg, var(--gold-300), var(--gold-400), var(--violet-300), var(--gold-300));
    background-size: 300% auto;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: shimmer 4s linear infinite;
}
.auth-hero .hero-copy p { color: rgba(255,255,255,.72); font-size: 16px; max-width: 430px; }

.auth-hero .hero-feats { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.auth-hero .hero-feats div {
    display: flex; align-items: center; gap: 10px;
    color: rgba(255,255,255,.88); font-size: 14px;
    animation: fadeUp .6s var(--ease) both;
}
.auth-hero .hero-feats div:nth-child(1) { animation-delay: .25s; }
.auth-hero .hero-feats div:nth-child(2) { animation-delay: .35s; }
.auth-hero .hero-feats div:nth-child(3) { animation-delay: .45s; }
.auth-hero .hero-feats .tick {
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(61,99,221,.22); color: var(--violet-300);
    display: grid; place-items: center; font-size: 13px;
    flex-shrink: 0;
}

/* Showcase redirect card in hero panel */
.showcase-redirect-card {
    position: relative; z-index: 2; display: block;
    margin-top: 28px; padding: 20px 24px; border-radius: 18px;
    background: linear-gradient(135deg, rgba(246,198,81,.08), rgba(61,99,221,.06));
    border: 1px solid rgba(246,198,81,.2);
    text-decoration: none; overflow: hidden;
    transition: all .4s var(--ease-bounce);
    animation: fadeUp .7s var(--ease) .5s both;
}
.showcase-redirect-card:hover {
    transform: translateY(-4px);
    background: linear-gradient(135deg, rgba(246,198,81,.14), rgba(61,99,221,.1));
    border-color: rgba(246,198,81,.45);
    box-shadow: 0 12px 36px rgba(240,180,41,.2), 0 0 0 1px rgba(246,198,81,.15);
}
.src-glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 30% 50%, rgba(246,198,81,.12), transparent 70%);
    opacity: 0; transition: opacity .4s var(--ease);
}
.showcase-redirect-card:hover .src-glow { opacity: 1; }
.src-content { display: flex; align-items: center; gap: 16px; position: relative; z-index: 2; }
.src-icon-wrap { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; gap: 0; }
.src-icon-crown { width: 16px; height: 16px; flex-shrink: 0; margin-bottom: -2px; z-index: 2; animation: crownGlow 3s ease-in-out infinite; }
.src-icon-main { position: relative; width: 44px; height: 44px; }
.src-img-seait {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(246,198,81,.3); background: #fff;
    animation: imgPulse 3s ease-in-out infinite, logoBreathe 4s ease-in-out infinite;
}
.src-img-cict {
    position: absolute; bottom: -1px; right: -2px;
    width: 18px; height: 18px; border-radius: 50%; object-fit: cover;
    border: 1.5px solid var(--brand-700); background: #fff;
    animation: badgePop .6s var(--ease-bounce) .3s both;
}
.src-text { flex: 1; min-width: 0; }
.src-badge {
    display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 9px; font-weight: 800;
    letter-spacing: .12em; background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
    color: var(--brand-900); margin-bottom: 4px;
}
.src-text b { display: block; font-family: var(--font-head); font-size: 16px; color: #fff; line-height: 1.2; }
.src-text p { font-size: 12px; color: rgba(255,255,255,.55); margin: 4px 0 0; line-height: 1.4; }
.src-arrow {
    font-size: 22px; color: var(--gold-400); flex-shrink: 0;
    transition: transform .4s var(--ease-bounce);
    text-shadow: 0 0 12px rgba(246,198,81,.5);
}
.showcase-redirect-card:hover .src-arrow { transform: translateX(6px); }
.src-shimmer {
    position: absolute; top: 0; bottom: 0; width: 80px; left: -120%;
    background: linear-gradient(90deg, transparent, rgba(246,198,81,.15), transparent);
    transition: left .8s var(--ease);
}
.showcase-redirect-card:hover .src-shimmer { left: 120%; }
.showcase-redirect-card.sr-mobile { display: none; }

.auth-hero .foot { position: relative; z-index: 2; color: rgba(255,255,255,.4); font-size: 12.5px; }

/* ═══════════════════════════════════════════════════════
   RIGHT FORM PANEL
═══════════════════════════════════════════════════════ */
@keyframes afOrbit  { to { transform: rotate(360deg); } }
@keyframes afFloat  { 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-12px) scale(1.03);} }
@keyframes afPing   { 0%{transform:scale(1);opacity:.8;} 100%{transform:scale(2.4);opacity:0;} }
@keyframes afSlideIn{ from{opacity:0;transform:translateX(32px) scale(.98);} to{opacity:1;transform:none;} }
@keyframes afShimBtn{ 0%{left:-80%;} 100%{left:130%;} }

.auth-form-wrap {
    display: flex; align-items: center; justify-content: center;
    padding: 40px 32px;
    position: relative;
    height: 100%; overflow: hidden;
    background: radial-gradient(ellipse at 70% 20%, rgba(61,99,221,.12) 0%, transparent 55%),
                radial-gradient(ellipse at 20% 85%, rgba(240,180,41,.08) 0%, transparent 50%),
                var(--bg);
    transition: background .4s var(--ease);
}
:root[data-theme="dark"] .auth-form-wrap {
    background: radial-gradient(ellipse at 70% 20%, rgba(61,99,221,.14) 0%, transparent 55%),
                radial-gradient(ellipse at 20% 85%, rgba(240,180,41,.1) 0%, transparent 50%),
                var(--bg);
}

.auth-form-wrap .theme-toggle { position: absolute; top: 22px; right: 24px; z-index: 10; }
.auth-form-inner { width: 100%; max-width: 420px; position: relative; z-index: 2; }

.auth-form-wrap::before {
    content: '';
    position: absolute; top: -120px; right: -120px;
    width: 400px; height: 400px; border-radius: 50%;
    border: 1.5px dashed rgba(61,99,221,.2);
    animation: afOrbit 22s linear infinite;
    pointer-events: none;
}
.auth-form-wrap::after {
    content: '';
    position: absolute; bottom: -80px; left: -80px;
    width: 280px; height: 280px; border-radius: 50%;
    border: 1px dashed rgba(240,180,41,.15);
    animation: afOrbit 30s linear infinite reverse;
    pointer-events: none;
}

.af-dot { position: absolute; border-radius: 50%; pointer-events: none; }
.af-dot.d1 { width:8px; height:8px; background:#4664b8; top:18%; right:12%; opacity:.5; animation:afFloat 4s ease-in-out infinite; }
.af-dot.d2 { width:5px; height:5px; background:#f6c651; top:32%; right:6%;  opacity:.4; animation:afFloat 5.5s ease-in-out infinite .8s; }
.af-dot.d3 { width:6px; height:6px; background:#94b5ff; bottom:28%; right:18%; opacity:.45; animation:afFloat 3.8s ease-in-out infinite 1.4s; }
.af-dot.d4 { width:4px; height:4px; background:#f0b429; bottom:16%; left:8%;  opacity:.35; animation:afFloat 6s ease-in-out infinite .4s; }
.af-ping {
    position: absolute; top:18%; right:12%;
    width:8px; height:8px; border-radius:50%;
    background: rgba(61,99,221,.35);
    animation: afPing 2.4s ease-out infinite;
    pointer-events: none;
}

.auth-icon-wrap {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; margin: 0 auto 18px;
    animation: afFloat 4s ease-in-out infinite;
}
.auth-icon-wrap .auth-icon-circle {
    width: 60px; height: 60px; border-radius: 18px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
    box-shadow: 0 8px 28px rgba(240,180,41,.3), 0 2px 8px rgba(0,0,0,.1), inset 0 0 0 1px rgba(246,198,81,.15);
    position: relative; z-index: 1;
}
.auth-icon-ring {
    position: absolute; inset: -8px; border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--gold-400); border-right-color: var(--violet-400);
    animation: spin 4s linear infinite;
}
.auth-icon-glow {
    position: absolute; inset: -20px; border-radius: 50%;
    background: radial-gradient(circle, rgba(246,198,81,.2), transparent 70%);
    animation: glowPulse 2.5s ease-in-out infinite;
    pointer-events: none;
}

.auth-card {
    width: 100%; max-width: 420px;
    position: relative; z-index: 2;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 40px 40px 36px;
    box-shadow:
        0 0 0 1px rgba(61,99,221,.06),
        0 4px 8px rgba(29,46,92,.04),
        0 16px 48px rgba(29,46,92,.10);
    animation: afSlideIn .55s var(--ease) .1s both;
    transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), transform .3s var(--ease);
    transform: perspective(800px);
}
:root[data-theme="dark"] .auth-card {
    box-shadow: 0 0 0 1px rgba(61,99,221,.1), 0 8px 48px rgba(0,0,0,.6);
}
.auth-card:hover {
    box-shadow:
        0 0 0 1px rgba(246,198,81,.12),
        0 8px 16px rgba(29,46,92,.06),
        0 24px 64px rgba(29,46,92,.14);
}

.auth-card::before {
    content: '';
    position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--gold-400) 30%, var(--violet-300) 50%, var(--gold-400) 70%, transparent);
    opacity: .7;
    animation: shimmer 3s linear infinite;
    background-size: 200% 100%;
}

.auth-card .mobile-brand { display: none; align-items: center; gap: 12px; margin-bottom: 24px; }
.auth-card .mobile-brand .mb-logo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand-600), var(--brand-800)); box-shadow: 0 4px 14px rgba(240,180,41,.25); }
.auth-card .mobile-brand b { font-family: var(--font-head); font-size: 20px; color: var(--text); }

.auth-card-head { text-align: center; margin-bottom: 32px; }
.auth-card-head h2 {
    font-family: var(--font-head); font-size: 28px; font-weight: 800;
    margin: 0 0 8px; color: var(--text);
    letter-spacing: -.02em;
}
.auth-card-head .lead {
    color: var(--text-soft); font-size: 14.5px; margin: 0;
}

.auth-field { margin-bottom: 20px; position: relative; }
.auth-field label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    margin-bottom: 8px; color: var(--text-soft);
    transition: color .2s var(--ease);
}
.auth-field label svg { width: 13px; height: 13px; opacity: .7; transition: opacity .2s; }
.auth-field input {
    width: 100%; padding: 14px 16px;
    border: 1.5px solid var(--border); border-radius: 14px;
    font-size: 15px; font-family: var(--font);
    background: var(--surface-2); color: var(--text);
    transition: border .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.auth-field input::placeholder { color: var(--text-faint); }
.auth-field input:focus {
    outline: none; background: var(--surface);
    border-color: var(--gold-400);
    box-shadow: 0 0 0 4px rgba(246,198,81,.12);
}
.auth-field:focus-within label { color: var(--gold-500); }
.auth-field:focus-within label svg { opacity: 1; }

.auth-btn {
    width: 100%; padding: 15px; border: 0; border-radius: 14px;
    margin-top: 8px; cursor: pointer;
    background: linear-gradient(135deg, var(--gold-600) 0%, var(--gold-400) 40%, var(--gold-300) 70%, var(--gold-400) 100%);
    background-size: 200% 100%;
    color: var(--brand-900); font-family: var(--font-head); font-weight: 700; font-size: 15.5px;
    letter-spacing: .03em;
    box-shadow: 0 6px 24px rgba(240,180,41,.45), 0 2px 6px rgba(0,0,0,.1);
    transition: box-shadow .25s var(--ease), transform .15s var(--ease), background-position .5s var(--ease);
    position: relative; overflow: hidden;
}
.auth-btn::after {
    content: '';
    position: absolute; top: 0; bottom: 0;
    width: 60px; left: -80%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    border-radius: 999px;
    animation: afShimBtn 2.4s linear infinite;
}
.auth-btn:hover {
    box-shadow: 0 10px 32px rgba(240,180,41,.6), 0 2px 8px rgba(0,0,0,.15);
    transform: translateY(-2px);
    background-position: 100% 0;
}
.auth-btn:active { transform: translateY(0); box-shadow: 0 4px 14px rgba(240,180,41,.35); }
.auth-btn .btn-spinner { display: none; width: 17px; height: 17px; border: 2px solid rgba(29,46,92,.3); border-top-color: var(--brand-900); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; margin-right: 8px; }
.auth-btn.loading .btn-spinner { display: inline-block; }
.auth-btn.loading .btn-label { opacity: .8; }
.auth-btn.loading::after { display: none; }
.auth-btn .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.4); transform: scale(0); animation: ripple .6s linear; pointer-events: none; }

.auth-error {
    background: rgba(224,67,90,.1);
    color: #e0435a;
    border: 1px solid rgba(224,67,90,.28);
    padding: 12px 15px; border-radius: 12px; font-size: 14px;
    margin-bottom: 22px; display: flex; align-items: center; gap: 8px;
    animation: fadeUp .4s var(--ease) both, shake .5s ease-in-out;
}
.auth-error::before { content:'\26A0'; font-size: 16px; }

.login-footer { text-align: center; margin-top: 18px; font-size: 12px; color: var(--text-faint); }

/* ═══════════════════════════════════════
   RESPONSIVE — Comprehensive for all devices
═══════════════════════════════════════ */

/* ---- Tablet landscape (≤1024px) ---- */
@media (max-width: 1024px) {
    .auth-hero { padding: 40px; }
    .auth-hero .hero-copy h1 { font-size: 36px; }
    .auth-hero .hero-copy p { font-size: 15px; max-width: 380px; }
    .auth-form-wrap { padding: 32px 24px; }
    .auth-card { padding: 36px 28px; }
}

/* ---- Tablet portrait (≤860px) — hide hero, show mobile brand ---- */
@media (max-width: 860px) {
    html, body { height: 100%; }
    body { display: block; overflow: hidden; }
    .auth-hero { display: none; }
    .auth-card .mobile-brand { display: flex; }
    .auth-form-wrap {
        position: fixed; inset: 0;
        display: flex; align-items: center; justify-content: center;
        padding: 32px 20px;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .auth-card { padding: 32px 24px; }
    .showcase-redirect-card.sr-mobile {
        display: block;
        width: 100%; max-width: 420px;
        margin: 20px auto 0;
        padding: 16px 18px; border-radius: 16px;
    }
    .showcase-redirect-card.sr-mobile .src-content { gap: 12px; }
    .showcase-redirect-card.sr-mobile .src-icon-main { width: 40px; height: 40px; }
    .showcase-redirect-card.sr-mobile .src-img-seait { width: 40px; height: 40px; }
    .showcase-redirect-card.sr-mobile .src-img-cict { width: 16px; height: 16px; }
    .showcase-redirect-card.sr-mobile .src-text b { font-size: 14px; }
    .showcase-redirect-card.sr-mobile .src-text p { font-size: 11.5px; }
    .showcase-redirect-card.sr-mobile .src-badge { font-size: 8.5px; padding: 2px 9px; }
    .showcase-redirect-card.sr-mobile .src-arrow { font-size: 18px; }
}
@supports (height: 100dvh) {
    @media (max-width: 860px) {
        html, body { height: 100dvh; }
    }
}

/* ---- Small tablet (≤720px) ---- */
@media (max-width: 720px) {
    .auth-form-wrap { padding: 24px 16px; }
    .auth-card { padding: 28px 22px; border-radius: 20px; }
    .auth-card::before { display: none; }
    .auth-icon-wrap { width: 64px; height: 64px; margin-bottom: 14px; }
    .auth-icon-wrap .auth-icon-circle { width: 54px; height: 54px; }
    .auth-card h1 { font-size: 22px; }
    .auth-card .auth-subtitle { font-size: 13px; }
    .auth-input-group input { padding: 11px 13px; font-size: 15px; }
    .auth-btn { padding: 12px; font-size: 14px; }
    .login-footer { font-size: 11px; }
    .theme-toggle { top: 16px; right: 16px; }
}

/* ---- Phone (≤560px) ---- */
@media (max-width: 560px) {
    body { padding-top: env(safe-area-inset-top); }
    .auth-form-wrap {
        padding: 20px 14px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
    .auth-form-wrap::before { top: -100px; right: -100px; width: 320px; height: 320px; }
    .auth-form-wrap::after { bottom: -60px; left: -60px; width: 220px; height: 220px; }
    .auth-card {
        padding: 24px 18px; border-radius: 18px;
        max-width: 100%;
    }
    .auth-card::before { display: none; }
    .mobile-brand { margin-bottom: 20px; }
    .mb-logo-combo { width: 40px; height: 48px; }
    .mb-logo-main { width: 34px; height: 34px; }
    .mb-img-seait { width: 34px; height: 34px; }
    .mb-img-cict-badge { width: 14px; height: 14px; }
    .mobile-brand b { font-size: 18px; }
    .mobile-brand span { font-size: 10px; }
    .auth-icon-wrap { width: 60px; height: 60px; margin-bottom: 12px; }
    .auth-icon-wrap .auth-icon-circle { width: 50px; height: 50px; border-radius: 16px; }
    .auth-icon-ring { inset: -6px; }
    .auth-card h1 { font-size: 20px; margin-bottom: 4px; }
    .auth-card .auth-subtitle { font-size: 12px; margin-bottom: 20px; }
    .auth-input-group { margin-bottom: 14px; }
    .auth-input-group input {
        padding: 10px 12px; font-size: 15px; border-radius: 11px;
        -webkit-appearance: none; appearance: none;
    }
    .auth-input-group .ai-icon { width: 16px; height: 16px; }
    .auth-input-group .ai-icon svg { width: 15px; height: 15px; }
    .auth-input-group label { font-size: 12px; margin-bottom: 5px; }
    .auth-btn { padding: 11px; font-size: 14px; margin-top: 6px; border-radius: 12px; }
    .auth-btn .btn-spinner { width: 15px; height: 15px; border-width: 2px; margin-right: 6px; }
    .auth-error { padding: 10px 12px; font-size: 13px; margin-bottom: 16px; border-radius: 10px; }
    .login-footer { font-size: 11px; margin-top: 14px; }
    .theme-toggle { top: 14px; right: 14px; }
    .theme-toggle .tt-track { width: 50px; height: 26px; }
    .theme-toggle .tt-thumb { width: 20px; height: 20px; }
    [data-theme="dark"] .tt-thumb { left: 27px; }
    .showcase-redirect-card { padding: 16px 18px; margin-top: 20px; border-radius: 14px; }
    .src-content { gap: 12px; }
    .src-icon-main { width: 38px; height: 38px; }
    .src-img-seait { width: 38px; height: 38px; }
    .src-img-cict { width: 16px; height: 16px; }
    .src-text b { font-size: 14px; }
    .src-text p { font-size: 11px; }
    .src-badge { font-size: 8px; padding: 2px 8px; }
    .src-arrow { font-size: 18px; }
}

/* ---- Small phone (≤400px) ---- */
@media (max-width: 400px) {
    .auth-form-wrap { padding: 16px 10px; }
    .auth-card { padding: 20px 14px; border-radius: 16px; }
    .auth-icon-wrap { width: 54px; height: 54px; margin-bottom: 10px; }
    .auth-icon-wrap .auth-icon-circle { width: 44px; height: 44px; border-radius: 14px; }
    .auth-card h1 { font-size: 18px; }
    .auth-card .auth-subtitle { font-size: 11px; margin-bottom: 16px; }
    .auth-input-group input { padding: 9px 11px; font-size: 14px; }
    .auth-btn { padding: 10px; font-size: 13px; }
    .auth-error { padding: 8px 10px; font-size: 12px; }
    .login-footer { font-size: 10px; }
    .mobile-brand b { font-size: 16px; }
    .mobile-brand span { font-size: 9px; }
    .showcase-redirect-card { padding: 14px; margin-top: 16px; }
    .src-text b { font-size: 13px; }
    .src-text p { font-size: 10px; }
}

/* ---- Landscape phone ---- */
@media (max-width: 860px) and (orientation: landscape) and (max-height: 500px) {
    body { grid-template-columns: 1fr; grid-template-rows: 1fr; height: 100vh; overflow: auto; }
    .auth-hero { display: none; }
    .auth-card .mobile-brand { display: flex; margin-bottom: 12px; }
    .auth-form-wrap { padding: 16px 20px; height: 100vh; overflow-y: auto; }
    .auth-card { padding: 20px 18px; }
    .auth-icon-wrap { width: 50px; height: 50px; margin-bottom: 8px; }
    .auth-icon-wrap .auth-icon-circle { width: 42px; height: 42px; }
    .auth-card h1 { font-size: 18px; margin-bottom: 2px; }
    .auth-card .auth-subtitle { font-size: 11px; margin-bottom: 14px; }
    .auth-input-group { margin-bottom: 10px; }
    .auth-input-group input { padding: 9px 11px; font-size: 14px; }
    .auth-btn { padding: 9px; font-size: 13px; margin-top: 4px; }
    .showcase-redirect-card { margin-top: 14px; padding: 14px; }
}

/* Theme toggle */
.theme-toggle { background: none; border: 0; cursor: pointer; padding: 0; display: inline-flex; z-index: 5; }
.tt-track { width: 58px; height: 30px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); position: relative; display: inline-flex; align-items: center; transition: border-color .3s var(--ease); }
.tt-thumb { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-400), var(--gold-500)); display: grid; place-items: center; color: var(--brand-900); transition: left .35s var(--ease), background .35s var(--ease); box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.tt-thumb svg { width: 15px; height: 15px; }
.tt-sun { display: block; } .tt-moon { display: none; }
[data-theme="dark"] .tt-thumb { left: 31px; background: linear-gradient(135deg, var(--violet-400), var(--violet-500)); color: #fff; }
[data-theme="dark"] .tt-sun { display: none; } [data-theme="dark"] .tt-moon { display: block; }

/* ═══════════════════════════════════════
   LOADER — Cinematic loading splash
   Fluid sizing: all dimensions use clamp()
   + vmin/vmax so the loader scales smoothly
   at EVERY screen size — no breakpoints needed.
═══════════════════════════════════════ */
@keyframes ldBlobDrift  { 0%{transform:translate(0,0) scale(1);} 33%{transform:translate(4vmin,-3vmin) scale(1.15);} 66%{transform:translate(-2vmin,2vmin) scale(.9);} 100%{transform:translate(0,0) scale(1);} }
@keyframes ldScan       { 0%{transform:translateY(-100%);opacity:0;} 10%{opacity:.6;} 90%{opacity:.6;} 100%{transform:translateY(100vh);opacity:0;} }
@keyframes ldParticle   { 0%{transform:translateY(0) scale(1);opacity:.9;} 100%{transform:translateY(-9vmin) scale(.3);opacity:0;} }
@keyframes ldHaloPulse  { 0%,100%{transform:scale(1);opacity:.5;} 50%{transform:scale(1.15);opacity:.08;} }
@keyframes ldLogoPop    { 0%{transform:scale(.5);opacity:0;} 65%{transform:scale(1.07);opacity:1;} 100%{transform:scale(1);} }
@keyframes ldFadeUp     { from{opacity:0;transform:translateY(22px);} to{opacity:1;transform:none;} }
@keyframes ldBarGlow    { 0%,100%{box-shadow:0 0 8px rgba(240,180,41,.6),0 0 18px rgba(240,180,41,.3);} 50%{box-shadow:0 0 18px rgba(240,180,41,1),0 0 40px rgba(240,180,41,.6);} }
@keyframes ldShine      { 0%{left:-60%;} 100%{left:120%;} }
@keyframes ldTitlePulse { 0%,100%{letter-spacing:.06em;opacity:1;} 50%{letter-spacing:.15em;opacity:.88;} }
@keyframes ldStatusBlink{ 0%,100%{opacity:.55;} 50%{opacity:1;} }
@keyframes ldGlowDisc   { 0%,100%{opacity:.55;transform:scale(1);} 50%{opacity:.9;transform:scale(1.08);} }
@keyframes ldTrackFade  { 0%,100%{opacity:.18;} 50%{opacity:.32;} }
@keyframes ldRingFlare  { 0%,100%{filter:drop-shadow(0 0 5px currentColor);} 50%{filter:drop-shadow(0 0 12px currentColor) drop-shadow(0 0 24px currentColor);} }
@keyframes ldCometTail  { 0%,100%{opacity:.7;} 50%{opacity:1;} }

/* Container */
.app-loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #2e4480 0%, #1d2e5c 55%, #101a3a 100%); transition: opacity .8s ease, visibility .8s; }
.app-loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }

/* Background blobs + grid + scanline — all fluid with vmin */
.ld-bg { position: absolute; inset: 0; pointer-events: none; }
.ld-blob { position: absolute; border-radius: 50%; filter: blur(clamp(20px, 6vmin, 60px)); mix-blend-mode: screen; will-change: transform; }
.ld-blob.lb1 { width: clamp(160px, 55vmin, 520px); height: clamp(160px, 55vmin, 520px); background: radial-gradient(circle, rgba(240,180,41,.35), transparent 70%); top: clamp(-160px, -16vmin, -60px); left: clamp(-160px, -12vmin, -60px); animation: ldBlobDrift 16s ease-in-out infinite; }
.ld-blob.lb2 { width: clamp(130px, 44vmin, 420px); height: clamp(130px, 44vmin, 420px); background: radial-gradient(circle, rgba(61,99,221,.28), transparent 70%); bottom: clamp(-120px, -12vmin, -50px); right: clamp(-100px, -10vmin, -40px); animation: ldBlobDrift 20s ease-in-out infinite reverse; }
.ld-blob.lb3 { width: clamp(90px, 32vmin, 300px); height: clamp(90px, 32vmin, 300px); background: radial-gradient(circle, rgba(148,181,255,.2), transparent 70%); top: 50%; left: 50%; transform: translate(-50%,-50%); animation: ldBlobDrift 12s ease-in-out infinite 4s; }
.ld-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(148,181,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(148,181,255,.06) 1px, transparent 1px); background-size: clamp(28px, 5.5vmin, 52px) clamp(28px, 5.5vmin, 52px); mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 68%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 68%); }
.ld-scan { position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(240,180,41,.7), transparent); animation: ldScan 4s linear infinite; }

/* Floating particles — sizes with clamp */
.ld-particles { position: absolute; inset: 0; pointer-events: none; }
.ld-p { position: absolute; border-radius: 50%; animation: ldParticle linear infinite; }
.ld-p.p1{width:clamp(3px,.7vmin,6px);height:clamp(3px,.7vmin,6px);background:var(--brand-600);left:18%;bottom:22%;animation-duration:3.2s;animation-delay:0s;box-shadow:0 0 8px var(--brand-500);}
.ld-p.p2{width:clamp(2px,.5vmin,4px);height:clamp(2px,.5vmin,4px);background:var(--brand-400);left:34%;bottom:18%;animation-duration:4.1s;animation-delay:.7s;box-shadow:0 0 6px var(--brand-300);}
.ld-p.p3{width:clamp(3px,.6vmin,5px);height:clamp(3px,.6vmin,5px);background:#fff;left:55%;bottom:28%;animation-duration:3.7s;animation-delay:1.2s;box-shadow:0 0 7px rgba(255,255,255,.8);}
.ld-p.p4{width:clamp(2px,.4vmin,3px);height:clamp(2px,.4vmin,3px);background:var(--brand-600);left:72%;bottom:20%;animation-duration:2.9s;animation-delay:.3s;box-shadow:0 0 5px var(--brand-500);}
.ld-p.p5{width:clamp(3px,.7vmin,6px);height:clamp(3px,.7vmin,6px);background:var(--brand-400);left:82%;bottom:35%;animation-duration:4.4s;animation-delay:1.8s;box-shadow:0 0 8px var(--brand-300);}
.ld-p.p6{width:clamp(2px,.5vmin,4px);height:clamp(2px,.5vmin,4px);background:var(--brand-600);left:10%;bottom:40%;animation-duration:3.5s;animation-delay:.5s;box-shadow:0 0 6px var(--brand-500);}
.ld-p.p7{width:clamp(3px,.6vmin,5px);height:clamp(3px,.6vmin,5px);background:#fff;left:45%;bottom:15%;animation-duration:5.0s;animation-delay:2.1s;box-shadow:0 0 7px rgba(255,255,255,.8);}
.ld-p.p8{width:clamp(2px,.4vmin,3px);height:clamp(2px,.4vmin,3px);background:var(--brand-400);left:62%;bottom:42%;animation-duration:3.0s;animation-delay:1.0s;box-shadow:0 0 5px var(--brand-300);}

/* Stage + orbit — orbit-size is the master fluid variable */
.loader-stage { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; animation: ldFadeUp .6s cubic-bezier(.16,1,.3,1) both; max-width: 100vw; overflow: hidden; padding: 2vmin; }
.loader-orbit {
    --orbit-size: clamp(110px, 36vmin, 260px);
    position: relative;
    width: var(--orbit-size); height: var(--orbit-size);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* Track rings — insets as percentage of orbit-size */
.ld-track { position: absolute; border-radius: 50%; border: 1px solid rgba(148,181,255,.14); animation: ldTrackFade 3s ease-in-out infinite; }
.ld-track.tk1 { inset: 0; }
.ld-track.tk2 { inset: calc(var(--orbit-size) * 0.085); animation-delay: .8s; border-color: rgba(61,99,221,.12); }
.ld-track.tk3 { inset: calc(var(--orbit-size) * -0.06); border: 1.5px dashed rgba(148,181,255,.1); animation-delay: 1.6s; }

/* Pulsing halos — insets as percentage of orbit-size */
.ld-halo { position: absolute; border-radius: 50%; border: 1.5px solid rgba(61,99,221,.4); pointer-events: none; }
.ld-halo.h1 { inset: calc(var(--orbit-size) * -0.11); animation: ldHaloPulse 2.8s ease-in-out infinite; }
.ld-halo.h2 { inset: calc(var(--orbit-size) * -0.18); animation: ldHaloPulse 2.8s ease-in-out infinite .9s; border-color: rgba(148,181,255,.25); }
.ld-halo.h3 { inset: calc(var(--orbit-size) * -0.27); animation: ldHaloPulse 2.8s ease-in-out infinite 1.8s; border-color: rgba(148,181,255,.12); }

/* Conic-gradient orbit rings (spinning arcs) — insets relative to orbit */
.orbit-ring { position: absolute; border-radius: 50%; }
.orbit-ring.r1 { inset: 0; background: conic-gradient(from 0deg, transparent 0%, rgba(61,99,221,.0) 60%, var(--brand-500) 80%, var(--brand-600) 90%, #ffffff 95%, transparent 100%); mask-image: radial-gradient(circle, transparent 44%, black 46%, black 49%, transparent 51%); -webkit-mask-image: radial-gradient(circle, transparent 44%, black 46%, black 49%, transparent 51%); filter: drop-shadow(0 0 7px var(--brand-500)) drop-shadow(0 0 14px rgba(61,99,221,.5)); animation: spin 1.4s linear infinite, ldRingFlare 2s ease-in-out infinite; }
.orbit-ring.r2 { inset: calc(var(--orbit-size) * 0.085); background: conic-gradient(from 180deg, transparent 0%, rgba(148,181,255,.0) 55%, var(--brand-300) 78%, var(--brand-400) 88%, #ffffff 93%, transparent 100%); mask-image: radial-gradient(circle, transparent 42%, black 44%, black 48%, transparent 50%); -webkit-mask-image: radial-gradient(circle, transparent 42%, black 44%, black 48%, transparent 50%); filter: drop-shadow(0 0 6px var(--brand-300)) drop-shadow(0 0 12px rgba(148,181,255,.45)); animation: spinRev 2s linear infinite, ldRingFlare 2.4s ease-in-out infinite .6s; }
.orbit-ring.r3 { inset: calc(var(--orbit-size) * -0.06); background: none; border: 1.5px dashed rgba(148,181,255,.22); animation: spin 9s linear infinite; }

/* Glow disc behind logo */
.ld-glow-disc {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
    width: calc(var(--orbit-size) * 0.9); height: calc(var(--orbit-size) * 0.9);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240,180,41,.28) 0%, rgba(240,180,41,.1) 45%, transparent 72%);
    animation: ldGlowDisc 2.2s ease-in-out infinite;
    pointer-events: none; z-index: 1;
}

/* Orbit arms (rotating spokes with comet dots) */
.orbit-arm { position: absolute; inset: 0; border-radius: 50%; }
.orbit-arm.a1{animation:spin    2.2s linear infinite;}
.orbit-arm.a2{animation:spinRev 3.1s linear infinite;}
.orbit-arm.a3{animation:spin    4.8s linear infinite;}
.orbit-arm.a4{animation:spinRev 2.7s linear infinite .5s;}
.orbit-arm.a5{animation:spin    3.6s linear infinite 1.1s;}
.orbit-comet { position: absolute; top: calc(var(--orbit-size) * 0.015); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; animation: ldCometTail 1.6s ease-in-out infinite; }
.orbit-comet::after { content: ''; display: block; width: 2px; height: calc(var(--orbit-size) * 0.07); margin-top: 1px; border-radius: 0 0 999px 999px; }
.orbit-comet.teal::after  { background: linear-gradient(to bottom, rgba(148,181,255,.8), transparent); }
.orbit-comet.gold::after  { background: linear-gradient(to bottom, rgba(246,198,81,.8),  transparent); }
.orbit-comet.white::after { background: linear-gradient(to bottom, rgba(255,255,255,.8), transparent); }
.orbit-comet.sm::after    { width: 1.5px; height: calc(var(--orbit-size) * 0.045); }
.orbit-dot { width: calc(var(--orbit-size) * 0.042); height: calc(var(--orbit-size) * 0.042); border-radius: 50%; flex-shrink: 0; }
.orbit-dot.sm { width: calc(var(--orbit-size) * 0.027); height: calc(var(--orbit-size) * 0.027); }
.orbit-dot.teal  { background: #94b5ff; box-shadow: 0 0 8px #4664b8, 0 0 20px rgba(61,99,221,.8), 0 0 36px rgba(61,99,221,.4); }
.orbit-dot.gold  { background: #f6c651; box-shadow: 0 0 8px #f0b429, 0 0 20px rgba(240,180,41,.8), 0 0 36px rgba(240,180,41,.4); }
.orbit-dot.white { background: #ffffff; box-shadow: 0 0 8px rgba(255,255,255,.9), 0 0 20px rgba(255,255,255,.7), 0 0 36px rgba(255,255,255,.4); }

/* Logo wrapper + pulse rings */
.loader-logo-wrap { position: relative; display: flex; align-items: center; justify-content: center; z-index: 3; }
.logo-pulse-ring { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border-radius: 50%; pointer-events: none; }
.logo-pulse-ring.lp1 { width: calc(var(--orbit-size) * 0.88); height: calc(var(--orbit-size) * 0.88); border: 2px solid rgba(240,180,41,.55); animation: ldHaloPulse 2.2s ease-in-out infinite; }
.logo-pulse-ring.lp2 { width: calc(var(--orbit-size) * 0.94); height: calc(var(--orbit-size) * 0.94); border: 1.5px solid rgba(240,180,41,.3); animation: ldHaloPulse 2.2s ease-in-out infinite .7s; }
.logo-pulse-ring.lp3 { width: calc(var(--orbit-size) * 0.98); height: calc(var(--orbit-size) * 0.98); border: 1px solid rgba(240,180,41,.15); animation: ldHaloPulse 2.2s ease-in-out infinite 1.4s; }

/* Float wrapper — handles the gentle up/down floating */
.loader-logo-float {
    animation: floatY 3.8s ease-in-out 1.2s infinite;
}

/* Logo disc — the circular container; handles pop-in animation */
.loader-logo-disc {
    width: calc(var(--orbit-size) * 0.846); height: calc(var(--orbit-size) * 0.846); border-radius: 50%;
    position: relative;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
    box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 0 8px rgba(240,180,41,.35),
                0 0 30px rgba(240,180,41,.75), 0 0 60px rgba(240,180,41,.4), 0 0 100px rgba(240,180,41,.18);
    animation: ldLogoPop .8s var(--ease-bounce) .15s both;
    overflow: visible;
}

/* Crown position wrapper — centers crown on top edge of disc */
.loader-crown-pos {
    position: absolute; top: calc(var(--orbit-size) * -0.12); left: 0; right: 0;
    display: flex; justify-content: center;
    z-index: 4; pointer-events: none;
}

/* Crown SVG — handles only the float/rotate animation */
.loader-crown {
    width: calc(var(--orbit-size) * 0.27); height: calc(var(--orbit-size) * 0.27);
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
    animation: crownGlow 2s ease-in-out infinite, crownFloat 4s ease-in-out infinite;
}

/* SEAIT image — fills the entire disc; handles only breathe animation */
.loader-img-seait {
    width: calc(var(--orbit-size) * 0.846); height: calc(var(--orbit-size) * 0.846); border-radius: 50%; object-fit: cover;
    border: 4px solid rgba(246,198,51,.5); background: #fff;
    box-sizing: border-box;
    animation: imgPulse 2s ease-in-out infinite, logoBreathe 3s ease-in-out infinite;
}

/* CICT badge position wrapper — anchors badge at bottom-right of disc */
.loader-cict-pos {
    position: absolute; bottom: calc(var(--orbit-size) * -0.035); right: calc(var(--orbit-size) * -0.046);
    z-index: 5;
}

/* CICT badge image — handles only the pop-in + float animation */
.loader-img-cict-badge {
    width: calc(var(--orbit-size) * 0.27); height: calc(var(--orbit-size) * 0.27); border-radius: 50%; object-fit: cover;
    border: 3px solid var(--brand-700); background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
    animation: badgePop .6s var(--ease-bounce) .5s both, badgeFloat 3s ease-in-out 1s infinite;
}

/* Title + subtitle — fluid font-size with clamp */
.loader-title { margin-top: clamp(12px, 3vmin, 28px); font-family: var(--font-head); font-weight: 800; font-size: clamp(16px, 5.5vmin, 36px); background: linear-gradient(90deg, #ffffff 0%, #f6c651 35%, #94b5ff 65%, #ffffff 100%); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 2s linear infinite, ldTitlePulse 4s ease-in-out infinite, ldFadeUp .65s cubic-bezier(.16,1,.3,1) .3s both; filter: drop-shadow(0 0 12px rgba(246,198,81,.5)); white-space: nowrap; }
.loader-sub { margin-top: clamp(4px, 1vmin, 6px); color: #f6c651; font-size: clamp(7px, 1.8vmin, 11.5px); letter-spacing: clamp(.1em, .4vmin, .3em); text-transform: uppercase; text-shadow: 0 0 18px rgba(246,198,51,.9), 0 0 36px rgba(246,198,51,.4); animation: glowPulse 2.6s ease-in-out infinite, ldFadeUp .65s cubic-bezier(.16,1,.3,1) .42s both; white-space: nowrap; }

/* Progress bar — fluid width with clamp */
.loader-bar-wrap { margin-top: clamp(12px, 3vmin, 24px); display: flex; flex-direction: column; align-items: center; gap: clamp(5px, 1vmin, 8px); animation: ldFadeUp .6s cubic-bezier(.16,1,.3,1) .45s both; }
.loader-bar-track { width: clamp(130px, 36vmin, 260px); height: clamp(5px, 1vmin, 7px); border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(240,180,41,.2); overflow: hidden; box-shadow: inset 0 0 8px rgba(0,0,0,.4); }
.loader-bar-fill { position: relative; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #f0b429 0%, #f6c651 50%, #94b5ff 100%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite, ldBarGlow 1.8s ease-in-out infinite; transition: width .06s linear; }
.bar-shine { position: absolute; top: 0; bottom: 0; width: clamp(25px, 7vmin, 50px); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); border-radius: 999px; animation: ldShine 1.6s linear infinite; }
.loader-bar-meta { width: clamp(130px, 36vmin, 260px); display: flex; justify-content: space-between; align-items: center; }
.loader-status { color: rgba(246,198,51,.7); font-size: clamp(8px, 1.6vmin, 11px); letter-spacing: .08em; animation: ldStatusBlink 1.4s ease-in-out infinite; }
.loader-pct { color: rgba(255,255,255,.75); font-size: clamp(9px, 1.8vmin, 12px); font-weight: 600; letter-spacing: .06em; font-family: var(--font-head); text-shadow: 0 0 10px rgba(246,198,51,.6); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
    .app-loader { transition: opacity .2s; }
}

/* ---- Landscape phone loader ---- */
@media (max-height: 500px) and (orientation: landscape) {
    .app-loader { align-items: flex-start; padding-top: calc(10px + env(safe-area-inset-top)); }
    .loader-orbit { --orbit-size: clamp(100px, 22vmax, 160px); }
    .loader-title { margin-top: clamp(6px, 2vmin, 12px); }
    .loader-bar-wrap { margin-top: clamp(6px, 2vmin, 12px); }
}

/* ---- Very small screens: hide non-essential decorations for performance ---- */
@media (max-width: 480px) {
    .ld-p.p6, .ld-p.p7, .ld-p.p8 { display: none; }
    .orbit-arm.a4, .orbit-arm.a5 { display: none; }
}
@media (max-width: 380px) {
    .ld-p.p4, .ld-p.p5 { display: none; }
    .orbit-arm.a3 { display: none; }
    .ld-scan { display: none; }
}