/* DOST iLAB Central - login styles */
/* Loaded via $this->registerCssFile('@web/css/login.css') */
/* Deliberately distinct from the Local Portal: image-left / form-right,
   orbital-field background, Sora/Inter type, cyan + indigo. */

/* Login screen is a full-bleed overlay — hide the app chrome behind it */
.navbar, .navbar-main, .navbar-default, .main-header, header.main-header{display:none !important}

#cen{
    --cyan:#15A6E0; --indigo:#2433C4; --indigo-d:#1B238F;
    --ink:#0C1B33; --slate:#5B6B86; --line:#E5EBF3; --field:#F2F6FB;
    --fd:"Sora",system-ui,sans-serif; --fb:"Inter",system-ui,sans-serif;
    position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
    padding:30px 16px; overflow:auto; font-family:var(--fb); color:var(--ink);
    background:
        radial-gradient(1000px 560px at 12% -8%, rgba(21,166,224,.20), transparent 60%),
        radial-gradient(900px 600px at 92% 108%, rgba(36,51,196,.20), transparent 60%),
        linear-gradient(150deg,#08152C 0%,#070F22 70%);
}
#cen *{box-sizing:border-box}

/* ---------- background: soft glows + atomic orbits ---------- */
#cen .cen-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
#cen .cen-glow{position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; mix-blend-mode:screen}
#cen .cen-g1{width:560px;height:560px; top:-180px; left:-120px;
    background:radial-gradient(circle at 35% 35%, rgba(21,166,224,.6), transparent 66%);
    animation:cenDrift 22s ease-in-out infinite}
#cen .cen-g2{width:520px;height:520px; bottom:-200px; right:-140px;
    background:radial-gradient(circle at 60% 40%, rgba(36,51,196,.55), transparent 66%);
    animation:cenDrift 28s ease-in-out infinite reverse}
@keyframes cenDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,-20px)}}

#cen .cen-orbits{position:absolute; inset:0; width:100%; height:100%}
#cen .cen-orbit circle{fill:none; stroke:rgba(120,180,235,.12); stroke-width:1.2}
#cen .cen-orbit--soft circle{stroke:rgba(36,80,180,.14)}
#cen .cen-orbit .cen-e{fill:rgba(150,205,250,.75); stroke:none}
#cen .cen-orbit{animation:cenSpin 60s linear infinite; transform-origin:center}
#cen .cen-orbit--soft{animation-duration:90s; animation-direction:reverse}
@keyframes cenSpin{to{transform:rotate(360deg)}}

/* ---------- card: image LEFT, form RIGHT (enlarged to match Local Portal) ---------- */
#cen .cen-card{position:relative; z-index:2; width:min(1040px,100%);
    display:grid; grid-template-columns:1.08fr 0.92fr;
    background:#fff; border-radius:22px; overflow:hidden;
    box-shadow:0 30px 80px -28px rgba(5,18,40,.6)}

/* ---------- left media ---------- */
#cen .cen-media{position:relative; min-height:566px; order:0}
#cen .cen-shot{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
#cen .cen-cover{position:absolute; inset:0;
    background:
        linear-gradient(205deg, rgba(18,86,176,.50) 0%, rgba(20,46,128,.82) 50%, rgba(8,18,52,.94) 100%),
        radial-gradient(120% 90% at 0% 0%, rgba(21,166,224,.42), transparent 55%)}
#cen .cen-scan{position:absolute; left:0; right:0; height:170px; z-index:1;
    background:linear-gradient(transparent, rgba(120,200,255,.12), transparent); animation:cenScan 8s linear infinite}
@keyframes cenScan{0%{top:-170px}100%{top:100%}}
#cen .cen-edge{position:absolute; top:0; right:0; bottom:0; width:3px; z-index:3;
    background:linear-gradient(var(--cyan),var(--indigo))}
#cen .cen-mtext{position:absolute; z-index:2; left:38px; right:38px; bottom:36px}
#cen .cen-eyebrow{display:inline-flex; align-items:center; gap:7px; font:600 9px var(--fd); letter-spacing:.2em;
    text-transform:uppercase; color:#d3ecfb; padding:5px 10px; border:1px solid rgba(255,255,255,.3);
    border-radius:999px; margin-bottom:14px}
#cen .cen-eyebrow svg{width:12px; height:12px}
#cen .cen-mtext p{margin:0; font-size:12px; line-height:1.55; color:#e9f2fb; max-width:46ch; text-shadow:0 1px 14px rgba(0,0,0,.5)}

/* ---------- right form ---------- */
#cen .cen-form{padding:56px 52px 44px; display:flex; flex-direction:column; background:#fff; text-align:left}
#cen .cen-op-chip{display:inline-flex; align-items:center; gap:11px; margin-bottom:34px}
#cen .cen-op-icon{height:42px; width:42px; object-fit:contain; display:block}
#cen .cen-op-text{display:flex; flex-direction:column; line-height:1.1}
#cen .cen-op-text span{font:700 17px var(--fd); color:var(--ink)}
#cen .cen-op-text span b{color:var(--cyan); font-weight:700}
#cen .cen-op-text small{font-size:10px; letter-spacing:.06em; color:var(--slate); text-transform:uppercase}

#cen .cen-title{font-family:var(--fd); font-weight:700; font-size:26px; letter-spacing:-.01em; margin:0 0 6px; line-height:1.15; color:var(--ink)}
#cen .cen-title b{color:var(--cyan); font-weight:700}
#cen .cen-sub{margin:0 0 32px; font-size:12.5px; line-height:1.5; color:var(--slate); max-width:36ch}

#cen .cen-formel{margin:0}
#cen .cen-field{position:relative; margin-bottom:16px}
#cen .cen-ic{position:absolute; left:14px; top:25px; transform:translateY(-50%); width:18px; height:18px;
    stroke:#9AA8BD; fill:none; stroke-width:1.7; pointer-events:none}
#cen .cen-in{width:100%; height:50px; padding:0 14px 0 44px; background:var(--field); color:#1E293B;
    border:1px solid var(--line); border-radius:11px; font:500 14px var(--fb); outline:none;
    transition:border-color .15s, box-shadow .15s, background .15s}
#cen .cen-in::placeholder{color:#94A3B8}
#cen .cen-in:focus{border-color:var(--cyan); background:#fff; box-shadow:0 0 0 3px rgba(21,166,224,.18)}
#cen .cen-field .help-block{margin:5px 2px 0; font-size:12px; color:#dc2626; text-align:left; min-height:0}

#cen .cen-row{display:flex; align-items:center; gap:8px; margin:6px 2px 22px; font-size:12.5px;
    color:var(--slate); cursor:pointer; font-weight:400}
#cen .cen-row input[type=checkbox]{accent-color:var(--cyan); width:15px; height:15px; margin:0}

#cen .cen-signin{position:relative; height:51px; border:0; border-radius:12px; cursor:pointer; width:100%;
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    font:600 14.5px var(--fd); letter-spacing:.01em; color:#fff;
    background:linear-gradient(120deg,#15A6E0 0%,#2433C4 64%,#1B238F 120%);
    box-shadow:0 12px 26px -10px rgba(36,51,196,.6), inset 0 1px 0 rgba(255,255,255,.25);
    transition:transform .12s, box-shadow .2s, filter .2s; overflow:hidden}
#cen .cen-signin::after{content:""; position:absolute; inset:0;
    background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
    transform:translateX(-120%); transition:transform .55s}
#cen .cen-signin:hover{filter:brightness(1.06); box-shadow:0 16px 32px -10px rgba(36,51,196,.72); color:#fff}
#cen .cen-signin:hover::after{transform:translateX(120%)}
#cen .cen-signin:active{transform:translateY(1px)}
#cen .cen-signin svg{width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2}

#cen .cen-help{display:block; text-align:center; margin-top:16px; font-size:12.5px; color:var(--indigo); text-decoration:none; font-weight:500}
#cen .cen-help:hover{text-decoration:underline}
#cen .cen-foot{margin-top:auto; padding-top:30px; font-size:11px; color:#94A3B8; text-align:center; letter-spacing:.02em}

/* ---------- responsive ---------- */
@media (max-width:880px){
    #cen .cen-card{grid-template-columns:1fr; max-width:430px}
    #cen .cen-media{display:none}
    #cen .cen-form{padding:40px 30px 28px}
}
@media (prefers-reduced-motion:reduce){
    #cen .cen-orbit{animation:none}
    #cen .cen-scan{display:none}
    #cen .cen-glow{animation:none}
    #cen .cen-signin::after{display:none}
}