/* ── TOKENS ── */
:root {
    --ink:    #0b0f19;
    --ink2:   #1e2538;
    --paper:  #f7f4ef;
    --paper2: #ede9e3;
    --gold:   #c8a96e;
    --gold2:  #e8d5a3;
    --red:    #c0392b;
    --blue:   #1a3a6b;
    --blue2:  #2563eb;
    --white:  #ffffff;
    --border: rgba(255,255,255,.1);
    --ease:   cubic-bezier(.4,0,.2,1);
    --spring: cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{
    box-sizing:border-box;
    margin:0;
    padding:0
}
html,body{
    height:100%;
    overflow:hidden
}
body{
    font-family:'DM Sans',system-ui,sans-serif;
    background:var(--ink);
    display:flex;
    align-items:stretch;
}

/* ── LEFT PANEL (brand) ── */
.left-panel{
    width:42%;
    min-width:400px;
    background:linear-gradient(165deg,#0d1320 0%,#111827 50%,#0a0e1a 100%);
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
    flex-shrink:0;
}

/* Animated grid lines */
.grid-lines{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(200,169,110,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(200,169,110,.06) 1px,transparent 1px);
    background-size:60px 60px;
    animation:gridDrift 20s linear infinite;
}
@keyframes gridDrift{
    from{
        background-position:0 0
    }
    to{
        background-position:60px 60px
    }
}

/* Floating orbs */
.orb{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    animation:orbFloat var(--dur,12s) ease-in-out infinite alternate;
}
.orb-1{
    width:300px;
    height:300px;
    background:rgba(26,58,107,.4);
    top:-80px;
    right:-60px;
    --dur:15s
}
.orb-2{
    width:200px;
    height:200px;
    background:rgba(200,169,110,.12);
    bottom:100px;
    left:-60px;
    --dur:10s
}
.orb-3{
    width:150px;
    height:150px;
    background:rgba(37,99,235,.15);
    top:50%;
    left:30%;
    --dur:18s
}
@keyframes orbFloat{
    from{
        transform:translate(0,0) scale(1)
    }
    to{
        transform:translate(20px,30px) scale(1.1)
    }
}

/* Noise texture overlay */
.noise{
    position:absolute;
    inset:0;
    opacity:.03;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:200px;
}

.left-content{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    height:100%;
    padding:48px 52px;
}

/* Logo */
.brand-mark{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:auto;
    animation:fadeSlideDown .8s var(--ease) both;
}
.brand-ico{
    width:44px;
    height:44px;
    border-radius:10px;
    background:linear-gradient(135deg,var(--gold),#a07840);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    color:var(--ink);
    font-weight:700;
    box-shadow:0 8px 24px rgba(200,169,110,.3);
}
.brand-name{
    font-family:'Playfair Display',serif;
    font-size:22px;
    font-weight:700;
    color:var(--white);
    letter-spacing:-.3px;
}
.brand-tagline{
    font-size:11px;
    color:rgba(255,255,255,.4);
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-top:1px
}

/* Hero text */
.hero-block{
    margin:auto 0;
    animation:fadeSlideUp .9s .2s var(--ease) both;
}
.hero-eyebrow{
    font-size:11px;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:var(--gold);
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:20px;
}
.hero-eyebrow::before{
    content:'';
    width:28px;
    height:1px;
    background:var(--gold)
}
.hero-headline{
    font-family:'Playfair Display',serif;
    font-size:42px;
    font-weight:800;
    line-height:1.15;
    color:var(--white);
    letter-spacing:-.5px;
    margin-bottom:20px;
}
.hero-headline em{
    color:var(--gold);
    font-style:italic
}
.hero-desc{
    font-size:14.5px;
    color:rgba(255,255,255,.5);
    line-height:1.7;
    max-width:340px
}

/* Stats strip */
.stats-strip{
    display:flex;
    gap:32px;
    margin-top:40px;
    animation:fadeSlideUp .9s .35s var(--ease) both;
}
.stat-item .val{
    font-family:'Space Mono',monospace;
    font-size:22px;
    font-weight:700;
    color:var(--white);
    display:block;
}
.stat-item .lbl{
    font-size:11px;
    color:rgba(255,255,255,.35);
    margin-top:2px;
    letter-spacing:.5px
}

/* Footer links */
.left-foot{
    margin-top:auto;
    padding-top:32px;
    display:flex;
    gap:18px;
    animation:fadeSlideUp .9s .5s var(--ease) both;
}
.left-foot a{
    font-size:11.5px;
    color:rgba(255,255,255,.3);
    text-decoration:none;
    transition:color .2s
}
.left-foot a:hover{
    color:rgba(255,255,255,.7)
}

/* ── RIGHT PANEL (login form) ── */
.right-panel{
    flex:1;
    background:var(--paper);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
    position:relative;
    overflow:hidden;
}

/* Subtle background pattern */
.right-panel::before{
    content:'';
    position:absolute;
    inset:0;
    background-image:radial-gradient(var(--paper2) 1.5px,transparent 1.5px);
    background-size:28px 28px;
    opacity:.6;
}

/* Gold accent line */
.right-panel::after{
    content:'';
    position:absolute;
    left:0;
    top:20%;
    width:3px;
    height:60%;
    background:linear-gradient(180deg,transparent,var(--gold),transparent);
    border-radius:0 2px 2px 0;
}

.form-wrapper{
    width:100%;
    max-width:420px;
    position:relative;
    z-index:1;
}

/* Role selector */
.role-selector{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:32px;
    animation:fadeSlideDown .7s .15s var(--ease) both;
}
.role-btn{
    border:2px solid var(--paper2);
    border-radius:14px;
    padding:16px 14px;
    background:var(--white);
    cursor:pointer;
    transition:all .22s var(--ease);
    text-align:center;
    position:relative;
    overflow:hidden;
}
.role-btn::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--ink);
    opacity:0;
    transition:opacity .22s;
}
.role-btn:hover{
    border-color:var(--gold);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,.1)
}
.role-btn.active{
    border-color:var(--ink);
    background:var(--ink);
}
.role-btn.active .role-ico-wrap{
    background:rgba(200,169,110,.15);
}
.role-btn.active .role-title{
    color:var(--white);
}
.role-btn.active .role-sub{
    color:rgba(255,255,255,.5);
}
.role-btn.active .role-check{
    opacity:1;
    transform:scale(1)
}
.role-ico-wrap{
    width:42px;
    height:42px;
    border-radius:10px;
    background:rgba(26,58,107,.07);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 10px;
    font-size:20px;
    transition:background .22s;
}
.role-title{
    font-size:13px;
    font-weight:600;
    color:var(--ink);
    margin-bottom:3px;
    transition:color .22s
}
.role-sub{
    font-size:11px;
    color:#6b7280;
    line-height:1.3;
    transition:color .22s
}
.role-check{
    position:absolute;
    top:8px;
    right:8px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    color:var(--ink);
    font-weight:900;
    opacity:0;
    transform:scale(.4);
    transition:all .25s var(--spring);
}

/* Form header */
.form-head{
    margin-bottom:28px;
    animation:fadeSlideDown .7s .05s var(--ease) both;
}
.form-greeting{
    font-size:11px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--gold);
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:12px;
}
.form-greeting::before{
    content:'';
    width:20px;
    height:1px;
    background:var(--gold)
}
.form-title{
    font-family:'Playfair Display',serif;
    font-size:30px;
    font-weight:800;
    color:var(--ink);
    letter-spacing:-.5px;
    line-height:1.2;
    margin-bottom:6px;
}
.form-sub{
    font-size:13.5px;
    color:#6b7280
}

/* Role badge in form */
.role-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 12px;
    border-radius:99px;
    font-size:11.5px;
    font-weight:600;
    margin-top:8px;
    background:rgba(26,58,107,.08);
    color:var(--blue);
    transition:all .25s var(--ease);
    border:1px solid rgba(26,58,107,.12);
}
.role-badge.admin-sys{
    background:rgba(192,57,43,.08);
    color:var(--red);
    border-color:rgba(192,57,43,.15)
}
.role-badge span{
    display:inline-block;
    transition:transform .25s var(--spring)
}

/* Input fields */
.field{
    margin-bottom:18px;
    animation:fadeSlideUp .65s var(--ease) both;
}
.field:nth-child(1){
    animation-delay:.25s
}
.field:nth-child(2){
    animation-delay:.32s
}
.field:nth-child(3){
    animation-delay:.39s
}
.field-label{
    display:block;
    font-size:12px;
    font-weight:600;
    color:#374151;
    margin-bottom:7px;
    letter-spacing:.3px;
}
.field-wrap{
    position:relative
}
.field-ico{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    font-size:15px;
    color:#9ca3af;
    pointer-events:none;
    transition:color .2s;
}
.field-input{
    width:100%;
    height:48px;
    padding:0 14px 0 42px;
    border:1.5px solid #e5e7eb;
    border-radius:12px;
    background:var(--white);
    font-family:'DM Sans',sans-serif;
    font-size:14px;
    color:var(--ink);
    outline:none;
    transition:border-color .2s,box-shadow .2s;
    appearance:none;
}
.field-input:focus{
    border-color:var(--ink);
    box-shadow:0 0 0 4px rgba(11,15,25,.06)
}
.field-input:focus + .field-ico ~ .field-ico-left, /* reset */
.field-wrap:focus-within .field-ico{
    color:var(--ink)
}
.field-toggle{
    position:absolute;
    right:13px;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    cursor:pointer;
    color:#9ca3af;
    font-size:16px;
    padding:4px;
    border-radius:6px;
    transition:color .2s;
}
.field-toggle:hover{
    color:var(--ink)
}

/* Remember + Forgot */
.field-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:22px;
    animation:fadeSlideUp .65s .4s var(--ease) both;
}
.check-label{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-size:13px;
    color:#4b5563
}
.check-input{
    width:17px;
    height:17px;
    border:1.5px solid #d1d5db;
    border-radius:5px;
    appearance:none;
    cursor:pointer;
    background:var(--white);
    transition:all .15s;
    position:relative;
    flex-shrink:0;
}
.check-input:checked{
    background:var(--ink);
    border-color:var(--ink)
}
.check-input:checked::after{
    content:'✓';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:11px;
    color:#fff;
    font-weight:700
}
.forgot-link{
    font-size:13px;
    color:var(--blue2);
    text-decoration:none;
    font-weight:500
}
.forgot-link:hover{
    text-decoration:underline
}

/* Submit button */
.btn-submit{
    width:100%;
    height:52px;
    border:none;
    border-radius:14px;
    font-family:'DM Sans',sans-serif;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    transition:all .25s var(--ease);
    animation:fadeSlideUp .65s .45s var(--ease) both;
}
.btn-submit-inner{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
}
/* Admin sys */
.btn-submit.sys{
    background:linear-gradient(135deg,var(--ink) 0%,#1e3050 100%);
    color:var(--gold)
}
.btn-submit.sys:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 32px rgba(11,15,25,.25)
}
.btn-submit.sys:active{
    transform:translateY(0)
}
/* Admin báo */
.btn-submit.nws{
    background:linear-gradient(135deg,var(--blue) 0%,var(--blue2) 100%);
    color:#fff
}
.btn-submit.nws:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 32px rgba(37,99,235,.3)
}
.btn-submit.nws:active{
    transform:translateY(0)
}

/* Shimmer effect on button */
.btn-submit::after{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
    transition:left .4s;
}
.btn-submit:hover::after{
    left:100%
}

/* Loading state */
.btn-submit.loading .btn-text{
    opacity:0
}
.btn-submit.loading .btn-loader{
    opacity:1
}
.btn-loader{
    position:absolute;
    width:22px;
    height:22px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.3);
    border-top-color:currentColor;
    animation:spin .7s linear infinite;
    opacity:0;
}
@keyframes spin{
    to{
        transform:rotate(360deg)
    }
}

/* Demo accounts */
.demo-strip{
    margin-top:22px;
    padding:14px 16px;
    border:1.5px dashed #d1d5db;
    border-radius:12px;
    background:rgba(255,255,255,.6);
    animation:fadeSlideUp .65s .52s var(--ease) both;
}
.demo-label{
    font-size:11px;
    font-weight:600;
    color:#6b7280;
    letter-spacing:.5px;
    text-transform:uppercase;
    margin-bottom:8px;
    display:flex;
    align-items:center;
    gap:6px
}
.demo-label::before{
    content:'';
    flex:1;
    height:1px;
    background:#e5e7eb
}
.demo-label::after{
    content:'';
    flex:1;
    height:1px;
    background:#e5e7eb
}
.demo-accounts{
    display:flex;
    gap:6px;
    flex-wrap:wrap
}
.demo-acct{
    font-family:'Space Mono',monospace;
    font-size:10.5px;
    background:var(--white);
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:5px 9px;
    color:#374151;
    cursor:pointer;
    transition:all .15s;
    display:flex;
    align-items:center;
    gap:5px;
}
.demo-acct:hover{
    border-color:var(--gold);
    color:var(--ink)
}
.demo-acct .dot{
    width:6px;
    height:6px;
    border-radius:50%
}

/* Error message */
.err-msg{
    display:none;
    align-items:center;
    gap:7px;
    padding:11px 14px;
    border-radius:10px;
    margin-top:14px;
    background:rgba(192,57,43,.08);
    border:1px solid rgba(192,57,43,.2);
    color:var(--red);
    font-size:13px;
    font-weight:500;
}
.err-msg.show{
    display:flex;
    animation:shake .4s var(--ease)
}
@keyframes shake{
    0%,100%{
        transform:translateX(0)
    }
    25%{
        transform:translateX(-6px)
    }
    75%{
        transform:translateX(6px)
    }
}

/* ── ANIMATIONS ── */
@keyframes fadeSlideDown{
    from{
        opacity:0;
        transform:translateY(-16px)
    }
    to{
        opacity:1;
        transform:translateY(0)
    }
}
@keyframes fadeSlideUp{
    from{
        opacity:0;
        transform:translateY(16px)
    }
    to{
        opacity:1;
        transform:translateY(0)
    }
}

/* ── TRANSITION OVERLAY ── */
.page-transition{
    position:fixed;
    inset:0;
    z-index:9999;
    pointer-events:none;
    background:var(--ink);
    transform:scaleX(0);
    transform-origin:left;
}
.page-transition.active{
    animation:wipeIn .5s var(--ease) forwards;
}
@keyframes wipeIn{
    to{
        transform:scaleX(1)
    }
}

/* ── RESPONSIVE ── */
@media(max-width:900px){
    .left-panel{
        display:none
    }
    .right-panel{
        padding:24px
    }
    .right-panel::after{
        display:none
    }
}
@media(max-width:480px){
    .role-selector{
        grid-template-columns:1fr 1fr
    }
    .role-sub{
        display:none
    }
}