/* =====================================================================
   AsiaMTA — Login  ("Access Gate")
   Desktop: split console gate — brand/radar pane + centered sign-in panel
   Mobile : same gate, single column, centered (no bottom sheet)
===================================================================== */

:root{
    --bg:            #05070d;
    --surface:       #0d1424;
    --surface-2:     rgba(255,255,255,.045);
    --surface-3:     rgba(255,255,255,.07);
    --border:        rgba(255,255,255,.09);
    --border-strong: rgba(255,255,255,.16);

    --text:          #eef2fb;
    --text-dim:      #97a3c4;
    --text-faint:    #5c6890;

    --cyan:   #2fe0ff;
    --violet: #8f6bff;
    --pink:   #ff4fd8;
    --brand:         var(--cyan);
    --brand-2:       var(--violet);
    --brand-glow:    rgba(47,224,255,.35);

    --green: #2fe6a3;
    --red:   #ff5170;

    --font-display: 'Chakra Petch', 'Inter', sans-serif;
    --font-body:    'Inter', -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html, body{ height:100%; }

body{
    font-family:var(--font-body);
    background:var(--bg);
    color:var(--text);
    min-height:100dvh;
    position:relative;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

/* =========================
   PAGE GRID
========================= */

.page-grid{
    display:flex;
    min-height:100vh;
    min-height:100dvh;
}

.visual-pane{ flex:1.05 1 0; }
.form-pane{ flex:1 1 0; }

/* =========================
   VISUAL PANE (desktop brand side)
========================= */

.visual-pane{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:56px 56px 40px;
    overflow:hidden;
    background:
        radial-gradient(900px 620px at 18% -10%, rgba(47,224,255,.16), transparent 60%),
        radial-gradient(760px 560px at 100% 115%, rgba(143,107,255,.20), transparent 60%),
        linear-gradient(165deg, #0a0f1e 0%, #060911 60%, #05070d 100%);
    border-right:1px solid var(--border);
}

/* grid floor */
.visual-pane::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(143,167,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(143,167,255,.055) 1px, transparent 1px);
    background-size:46px 46px;
    -webkit-mask-image:radial-gradient(720px 620px at 30% 30%, #000 0%, transparent 75%);
            mask-image:radial-gradient(720px 620px at 30% 30%, #000 0%, transparent 75%);
    pointer-events:none;
}

.visual-glow{
    position:absolute;
    width:420px; height:420px;
    border-radius:50%;
    background:var(--cyan);
    filter:blur(130px);
    opacity:.22;
    top:-120px; left:-100px;
    animation:driftGlow 16s ease-in-out infinite;
    pointer-events:none;
}
@keyframes driftGlow{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,26px)} }

.visual-content{
    position:relative;
    z-index:1;
    max-width:400px;
    animation:paneIn .6s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes paneIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }

/* radar / logo mark */
.radar{
    position:relative;
    width:132px;
    height:132px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:32px;
}

.radar-ring{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(47,224,255,.22);
}
.radar-ring.r1{ inset:0; }
.radar-ring.r2{ inset:16px; border-color:rgba(143,107,255,.20); }
.radar-ring.r3{ inset:32px; border-color:rgba(47,224,255,.16); }

.radar-sweep{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:conic-gradient(from 0deg, rgba(47,224,255,.55), transparent 32%);
    -webkit-mask-image:radial-gradient(circle, transparent 46%, #000 47%);
            mask-image:radial-gradient(circle, transparent 46%, #000 47%);
    animation:spin 5s linear infinite;
    opacity:.8;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.visual-logo{
    position:relative;
    z-index:2;
    width:64px;
    height:64px;
    object-fit:contain;
    border-radius:16px;
    background:rgba(6,9,16,.7);
    box-shadow:0 0 0 1px var(--border-strong), 0 14px 30px rgba(0,0,0,.5);
    padding:8px;
}

.visual-title{
    font-family:var(--font-display);
    font-size:28px;
    font-weight:700;
    color:#fff;
    letter-spacing:-.01em;
    margin-bottom:10px;
}
.visual-title span{
    display:block;
    font-size:14px;
    font-weight:600;
    color:var(--text-faint);
    font-family:var(--font-mono);
    text-transform:uppercase;
    letter-spacing:.14em;
    margin-top:6px;
}

.visual-tagline{
    color:var(--text-dim);
    font-size:15px;
    line-height:1.6;
    max-width:340px;
    margin-bottom:34px;
}

.visual-features{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.visual-features li{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:13.5px;
    color:var(--text-dim);
    font-family:var(--font-body);
    opacity:0;
    animation:fieldIn .5s ease forwards;
}
.visual-features li:nth-child(1){ animation-delay:.15s; }
.visual-features li:nth-child(2){ animation-delay:.24s; }
.visual-features li:nth-child(3){ animation-delay:.33s; }

.f-ico{
    width:30px; height:30px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:linear-gradient(135deg, rgba(47,224,255,.14), rgba(143,107,255,.14));
    border:1px solid var(--border);
    color:var(--cyan);
}
.f-ico svg{ width:15px; height:15px; }

.visual-footer{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-family:var(--font-mono);
    color:var(--text-faint);
    text-transform:uppercase;
    letter-spacing:.06em;
}

.status-dot{
    width:6px; height:6px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 3px rgba(47,230,163,.18);
    animation:pulseDot 1.8s ease-in-out infinite;
    flex-shrink:0;
}
@keyframes pulseDot{
    0%,100%{ box-shadow:0 0 0 3px rgba(47,230,163,.18); }
    50%{ box-shadow:0 0 0 6px rgba(47,230,163,.06); }
}

/* =========================
   FORM PANE (right / mobile-only column)
========================= */

.form-pane{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 24px;
    background:
        radial-gradient(640px 480px at 85% 0%, rgba(143,107,255,.08), transparent 60%),
        radial-gradient(560px 420px at 10% 100%, rgba(47,224,255,.06), transparent 60%),
        var(--bg);
}

.login-wrap{
    position:relative;
    z-index:1;
    width:100%;
    max-width:378px;
}

.login-form{
    border-radius:24px;
    background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
    border:1px solid var(--border);
    padding:38px 34px 32px;
    box-shadow:0 24px 60px rgba(0,0,0,.45);
    text-align:center;
    position:relative;
    animation:cardIn .55s cubic-bezier(.2,.8,.2,1);
}

@keyframes cardIn{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)} }

.login-form > *{ position:relative; z-index:1; }

#lgo{
    max-width:96px;
    height:auto;
    margin:0 auto 18px;
    display:block;
    filter:drop-shadow(0 8px 20px rgba(47,224,255,.25));
    animation:logoIn .6s cubic-bezier(.2,.8,.2,1) .1s both;
}

@keyframes logoIn{ from{opacity:0; transform:translateY(-8px) scale(.9)} to{opacity:1; transform:translateY(0) scale(1)} }

.form-title{
    font-family:var(--font-display);
    font-size:22px;
    font-weight:700;
    color:#fff;
    margin-bottom:6px;
}

.login-tagline{
    color:var(--text-faint);
    font-size:12.5px;
    font-family:var(--font-mono);
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}

.login-tagline::before{
    content:"";
    width:6px; height:6px;
    border-radius:50%;
    background:#2fe6a3;
    box-shadow:0 0 0 3px rgba(47,230,163,.18);
    animation:pulseDot 1.8s ease-in-out infinite;
}

.form-sub{
    color:var(--text-dim);
    font-size:13.5px;
    line-height:1.5;
    margin-bottom:28px;
}

.field{ text-align:left; margin-bottom:16px; opacity:0; animation:fieldIn .5s ease forwards; }
.field:nth-of-type(1){ animation-delay:.18s; }
.field:nth-of-type(2){ animation-delay:.26s; }

@keyframes fieldIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }

.field label{
    display:block;
    font-size:11.5px;
    font-weight:700;
    font-family:var(--font-display);
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--text-dim);
    margin-bottom:8px;
}

.input-icon{
    position:relative;
    display:flex;
    align-items:center;
}

.input-icon svg{
    position:absolute;
    left:14px;
    width:18px;
    height:18px;
    color:var(--text-faint);
    pointer-events:none;
    transition:color .2s ease;
}

.inputu{
    width:100%;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:14px;
    color:var(--text);
    padding:13px 14px 13px 44px;
    font-size:14.5px;
    font-family:var(--font-body);
    outline:none;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.inputu::placeholder{ color:var(--text-faint); }

.inputu:focus{
    border-color:var(--cyan);
    box-shadow:0 0 0 4px var(--brand-glow);
    background:rgba(47,224,255,.05);
}

.inputu:focus ~ svg, .input-icon:focus-within svg{ color:var(--cyan); }

.toggle-pw{
    position:absolute;
    right:10px;
    background:none;
    border:none;
    padding:6px;
    display:flex;
    color:var(--text-faint);
    cursor:pointer;
}
.toggle-pw svg{ position:static; width:18px; height:18px; }
.toggle-pw:hover{ color:var(--text); }
.toggle-pw.shown{ color:var(--cyan); }

.field-row{
    display:flex;
    justify-content:flex-start;
    margin:18px 0 24px;
    opacity:0;
    animation:fieldIn .5s ease .32s forwards;
}

.switch-label{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13.5px;
    color:var(--text-dim);
    cursor:pointer;
    user-select:none;
}

.switch{ position:relative; display:inline-block; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }

.switch-track{
    display:block;
    width:38px;
    height:22px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:999px;
    position:relative;
    transition:background .2s ease, border-color .2s ease;
}

.switch-thumb{
    position:absolute;
    top:2px; left:2px;
    width:16px; height:16px;
    background:var(--text-dim);
    border-radius:50%;
    transition:transform .2s ease, background .2s ease;
}

.switch input:checked + .switch-track{
    background:linear-gradient(90deg, var(--cyan), var(--violet));
    border-color:transparent;
}
.switch input:checked + .switch-track .switch-thumb{
    transform:translateX(16px);
    background:#fff;
}

#btnl{
    width:100%;
    background:linear-gradient(90deg, var(--cyan), var(--violet));
    color:#04141c;
    border:none;
    border-radius:15px;
    padding:14px 0;
    font-size:15px;
    font-weight:800;
    font-family:var(--font-display);
    letter-spacing:.03em;
    text-transform:uppercase;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    box-shadow:0 14px 32px var(--brand-glow);
    position:relative;
    overflow:hidden;
    opacity:0;
    animation:fieldIn .5s ease .4s forwards;
    transition:filter .2s ease, transform .15s ease;
}

/* diagonal shine sweep on hover */
#btnl::before{
    content:"";
    position:absolute;
    top:0; left:-60%;
    width:40%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
    transform:skewX(-20deg);
    transition:left .55s ease;
}
#btnl:hover::before{ left:130%; }

#btnl svg{ width:18px; height:18px; transition:transform .2s ease; }

#btnl:hover{ filter:brightness(1.06); transform:translateY(-1px); }
#btnl:hover svg{ transform:translateX(3px); }
#btnl:active{ transform:translateY(0) scale(.98); }

.msg{
    margin-top:16px;
    font-size:13.5px;
    text-align:center;
    color:#ffb3c0;
    background:rgba(255,81,112,.10);
    border:1px solid rgba(255,81,112,.25);
    padding:11px 12px;
    border-radius:12px;
    animation:shake .4s ease;
}

@keyframes shake{
    10%,90%{ transform:translateX(-1px); }
    20%,80%{ transform:translateX(2px); }
    30%,50%,70%{ transform:translateX(-4px); }
    40%,60%{ transform:translateX(4px); }
}

/* =========================
   RESPONSIVE — single column, centered (no bottom sheet)
========================= */

@media (max-width:980px){

    .page-grid{ grid-template-columns:1fr; }

    .visual-pane{ display:none; }

    .form-pane{
        min-height:100vh;
        min-height:100dvh;
        padding:calc(28px + var(--safe-t)) 20px calc(28px + var(--safe-b));
    }
}

@media (max-width:480px){

    .login-form{
        padding:32px 24px 28px;
        border-radius:22px;
    }

    #lgo{ max-width:84px; }

    .inputu{ font-size:16px; padding:14px 14px 14px 44px; }

    #btnl{ padding:16px 0; font-size:15px; }
}