:root{}

html,body{height:100%}
body{margin:0}

.adminLogin{
    min-height:100svh;
    display:grid;
    place-items:center;
    padding:24px;
    color:var(--color-text);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.adminLogin__card{
    width:100%;
    max-width:420px;
    background: color-mix(in oklab, var(--color-gray-soft) 92%, black);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    box-shadow: 0 12px 40px rgba(0,0,0,.45);
    padding:28px 26px 22px;
    backdrop-filter: blur(6px);
}

.adminLogin__title{
    margin:0 0 6px;
    font-weight:800;
    font-size:clamp(20px,2.4vw,28px);
    text-align:center;
    letter-spacing:.2px;
    color:var(--color-text);
}

.adminLogin__sub{
    margin:0 0 18px;
    text-align:center;
    color:var(--color-text-muted);
    font-size:14px;
}

.adminLogin__form{ display:grid; gap:14px; }

.adminLogin__field label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    color:var(--color-text-muted);
}

.adminLogin__inputWrap{ position:relative; }

.adminLogin__input{
    width:100%;
    padding:12px 14px;
    font-size:16px;
    color:var(--color-text);
    background: color-mix(in oklab, var(--color-gray-soft) 86%, black);
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    outline:none;
    transition: box-shadow .2s, border-color .2s, background-color .2s, transform .04s;
}
.adminLogin__input::placeholder{ color: color-mix(in oklab, var(--color-text-muted) 85%, transparent); }
.adminLogin__input:hover{
    border-color: rgba(255,255,255,.16);
}
.adminLogin__input:focus{
    border-color: var(--color-accent-light);
    box-shadow: 0 0 0 4px rgba(255,164,88,.25);
    background: color-mix(in oklab, var(--color-gray-soft) 95%, var(--color-accent-light));
}

.adminLogin__btn{
    width:100%;
    padding:12px 16px;
    border:0;
    border-radius:12px;
    font-weight:800;
    font-size:16px;
    cursor:pointer;
    color:#111; 
    background: var(--color-accent-light);
    background-image: linear-gradient(135deg,
    var(--color-accent-light) 0%,
    color-mix(in oklab, var(--color-accent-light) 80%, white) 100%);
    box-shadow: 0 10px 24px rgba(255,164,88,.30);
    transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
}
.adminLogin__btn:hover{
    filter: brightness(1.06);
    box-shadow: 0 12px 28px rgba(255,164,88,.40);
}
.adminLogin__btn:active{ transform: translateY(1px); }
.adminLogin__btn:focus-visible{
    outline: 2px solid var(--color-accent-light);
    outline-offset: 3px;
}

.adminLogin__error{
    margin-top:10px;
    text-align:center;
    color:#ff6b6b;
    font-size:14px;
    background: rgba(255,107,107,.10);
    border:1px solid rgba(255,107,107,.35);
    padding:10px 12px;
    border-radius:12px;
}

.adminLogin__toggle{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    border:0; background:transparent; color:var(--color-text-muted);
    padding:8px; border-radius:8px; cursor:pointer; line-height:0;
}
.adminLogin__toggle:hover{
    color: var(--color-text);
    background: rgba(255,255,255,.08);
}

@media (prefers-reduced-motion: reduce){
    .adminLogin__btn, .adminLogin__input { transition:none; }
}