:root{
    --bg:#070b11;
    --card:#101722;
    --card2:#131d2b;

    --gold:#d4af37;
    --yellow:#f5c542;

    --green:#16a34a;
    --danger:#ef4444;

    --text:#f8fafc;
    --muted:#a8b3c7;

    --border:rgba(212,175,55,.14);

    --shadow:
        0 12px 30px
        rgba(0,0,0,.35);
}

/* ===================================================
BASE
=================================================== */

html,
body{
    background:var(--bg);
}

.qdksj-app{
    background:var(--bg);
    color:var(--text);
    font-family:
        Inter,
        system-ui,
        sans-serif;
    min-height:100vh;
}

.qdksj-app *{
    box-sizing:border-box;
}

/* ===================================================
LOGIN
=================================================== */

.qdksj-login-wrap{

    min-height:100vh;

    display:grid;

    grid-template-columns:
        42fr 58fr;

    overflow:hidden;

    position:relative;

    background:
        radial-gradient(
            circle at top left,
            rgba(245,197,66,.12),
            transparent 18%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(245,197,66,.06),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #04080f,
            #06111f 45%,
            #020812
        );
}

.qdksj-login-card{

    width:100%;
    max-width:520px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.02)
        );

    border:
        1px solid var(--border);

    border-radius:34px;

    padding:42px;

    backdrop-filter:
        blur(20px);

    box-shadow:
        var(--shadow);

    text-align:center;
}

/* PROMINENT MASJID LOGO */

.qdksj-logo{

    width:120px;
    height:120px;

    margin:
        0 auto 28px;
}

.qdksj-brand{
    margin:0;
    font-size:38px;
    font-weight:800;
    color:var(--gold);
    line-height:1.05;
}

.qdksj-subtitle{
    color:var(--muted);
    margin:12px 0 28px;
}

/* ===================================================
INPUTS
=================================================== */

.qdksj-input,
.qdksj-search{

    width:100%;

    height:68px;

    border-radius:18px;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid
        rgba(255,255,255,.10);

    color:var(--text);

    padding:0 24px;

    font-size:18px;

    outline:none;

    transition:
        all .2s ease;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.03);
}

.qdksj-input,
#qdksj-volunteer{
    margin-bottom:14px;
}

.qdksj-input:focus,
.qdksj-search:focus,
#qdksj-volunteer:focus{

    border-color:
        rgba(212,175,55,.45);

    box-shadow:
        0 0 0 4px
        rgba(212,175,55,.10);
}
#qdksj-volunteer{

    width:100%;

    height:68px;

    border-radius:18px;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid
        rgba(255,255,255,.10);

    color:var(--text);

    padding:
        0 56px 0 18px;

    font-size:18px;

    outline:none;

    transition:
        all .2s ease;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.03);

    text-indent:8px;
}

#qdksj-pin{

    text-align:left;

    padding-left:28px;
}

#qdksj-pin::placeholder{

    text-align:left;

    opacity:.72;
}
/* ===================================================
BUTTONS
=================================================== */

.qdksj-login-btn,
.qdksj-assign,
.qdksj-walkin-btn,
.qdksj-logout-btn{

    border:none;
    border-radius:18px;
    cursor:pointer;
    font-weight:700;
    transition:.2s ease;
}

.qdksj-login-btn,
.qdksj-assign{

    background:
        linear-gradient(
            180deg,
            var(--yellow),
            var(--gold)
        );

    color:#111;
    height:56px;
    padding:0 24px;
}

.qdksj-login-btn:hover,
.qdksj-assign:hover{
    transform:
        translateY(-1px);
}

/* QUIET ICON UNDO */

.qdksj-undo{

    width:44px;
    min-width:44px;
    height:44px;

    border:none;
    border-radius:999px;

    background:
        rgba(239,68,68,.08);

    border:
        1px solid
        rgba(239,68,68,.15);

    color:#ff7272;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:18px;
    cursor:pointer;
    transition:.2s;
}

.qdksj-undo:hover{
    background:
        rgba(239,68,68,.16);

    transform:
        scale(1.04);
}

.qdksj-walkin-btn{
    background:#161f2c;
    border:
        1px solid rgba(212,175,55,.18);

    color:var(--gold);
    padding:0 22px;
}

.qdksj-logout-btn{
    background:#1a2331;
    color:#fff;
    padding:14px 18px;
}

/* ===================================================
DASHBOARD
=================================================== */

.qdksj-dashboard{

    width:100%;
    max-width:1600px;

    margin:0 auto;

    padding:
    42px 40px
    24px;

    background:var(--bg);
}

.qdksj-header{

    display:flex;
    align-items:center;
    gap:20px;

    background:var(--card);

    border:
        1px solid var(--border);

    border-radius:28px;

    padding:18px 22px;

    margin-bottom:22px;

    box-shadow:
        var(--shadow);
}

.qdksj-header-left{
    display:flex;
    align-items:center;
    gap:12px;
}

/* COMPACT APP LOGO */

.qdksj-header-logo{
    width:54px;
    height:54px;
    object-fit:contain;
    border-radius:14px;
}

.qdksj-header h2{
    margin:0;
    font-size:24px;
    color:var(--gold);
}

.qdksj-header strong{
    color:var(--yellow);
}

/* ===================================================
STATS
=================================================== */

.qdksj-cards{
    display:grid;
    grid-template-columns:
        repeat(6,1fr);

    gap:14px;
    margin-bottom:22px;
}

.qdksj-card{

    background:
        linear-gradient(
            180deg,
            var(--card2),
            var(--card)
        );

    border:
        1px solid
        rgba(212,175,55,.08);

    border-radius:22px;

    padding:18px;

    min-height:118px;

    box-shadow:
        var(--shadow);
}

.qdksj-card span{
    color:var(--muted);
    font-size:13px;
}

.qdksj-card h2{
    margin:14px 0 0;
    font-size:36px;
    line-height:1;
    color:var(--gold);
}

/* ===================================================
SEARCH
=================================================== */

.qdksj-search-wrap{
    display:flex;
    gap:12px;
    margin-bottom:20px;
}

.qdksj-search{
    flex:1;
}

/* ===================================================
RESULTS
=================================================== */

.qdksj-results{
    display:grid;
    gap:14px;
}

.qdksj-person-card{

    background:
        linear-gradient(
            180deg,
            #13202d,
            #0f1724
        );

    border:
        1px solid
        rgba(212,175,55,.08);

    border-radius:28px;

    padding:20px 24px;

    box-shadow:
        var(--shadow);
}

.qdksj-person-card.assigned{

    border:
        2px solid
        var(--green);

    background:
        linear-gradient(
            90deg,
            rgba(22,163,74,.12),
            rgba(212,175,55,.03),
            #0f1724
        );
}

/* LONG NAME SAFE */

.qdksj-person-row{

    display:grid;

    grid-template-columns:
        minmax(300px,2fr)
        auto
        auto
        auto;

    align-items:center;
    gap:18px;
}

.qdksj-person-name{
    font-size:28px;
    font-weight:800;
    line-height:1.15;
    color:var(--gold);
    word-break:break-word;
}

.qdksj-person-phone{
    font-size:17px;
    color:var(--muted);
    white-space:nowrap;
}

.qdksj-person-meta{
    font-size:17px;
    color:var(--muted);
    white-space:nowrap;
}

/* ASSIGNED + UNDO GROUP */

.qdksj-status-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    justify-self:end;
}

.qdksj-assigned-badge{

    background:
        rgba(22,163,74,.16);

    border:
        1px solid
        rgba(22,163,74,.25);

    color:#8df0b2;

    padding:9px 14px;
    border-radius:999px;

    font-size:13px;
    font-weight:700;

    white-space:nowrap;
}

/* ===================================================
MODAL
=================================================== */

.qdksj-walkin-modal{
    position:fixed;
    inset:0;

    background:
        rgba(0,0,0,.82);

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:9999;
    padding:20px;
}

.qdksj-modal-card{

    width:100%;
    max-width:460px;

    background:
        linear-gradient(
            180deg,
            var(--card2),
            var(--card)
        );

    border:
        1px solid var(--border);

    border-radius:30px;

    padding:28px;
}

/* ===================================================
RESPONSIVE
=================================================== */

@media(max-width:1200px){

    .qdksj-cards{
        grid-template-columns:
            repeat(3,1fr);
    }

    .qdksj-person-row{
        grid-template-columns:
            1fr;
    }

    .qdksj-status-wrap{
        justify-self:start;
    }
}

@media(max-width:768px){

    .qdksj-dashboard{
    padding:
        26px 16px
        16px;
}

    .qdksj-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .qdksj-cards{
        grid-template-columns:
            repeat(2,1fr);
    }

    .qdksj-search-wrap{
        flex-direction:column;
    }

    .qdksj-person-name{
        font-size:22px;
    }

    .qdksj-person-phone,
    .qdksj-person-meta{
        font-size:15px;
    }

    .qdksj-walkin-btn,
    .qdksj-assign{
        width:100%;
    }
}
/* ===================================================
LOGIN LOADING SCREEN
=================================================== */

.qdksj-loading{

    position:fixed;
    inset:0;

    background:
        rgba(7,11,17,.92);

    backdrop-filter:
        blur(12px);

    z-index:999999;

    display:flex;
    align-items:center;
    justify-content:center;

    opacity:1;
}

.qdksj-loading-inner{
    text-align:center;
}

.qdksj-loading-logo{
    width:140px;
    height:140px;
    object-fit:contain;
    margin:0 auto 24px;
    display:block;
}

.qdksj-loading h2{
    color:var(--gold);
    font-size:28px;
    margin-bottom:24px;
    font-weight:700;
}

.qdksj-spinner{

    width:56px;
    height:56px;

    border-radius:999px;

    border:
        4px solid
        rgba(212,175,55,.12);

    border-top:
        4px solid
        var(--gold);

    margin:auto;

    animation:
        qdksjSpin .9s linear infinite;
}

@keyframes qdksjSpin{

    from{
        transform:
            rotate(0deg);
    }

    to{
        transform:
            rotate(360deg);
    }
}
.qdksj-loading-title{
    color:var(--gold);
    font-size:34px;
    font-weight:800;
    margin:0 0 10px;
}

.qdksj-loading-volunteer{
    color:#f8fafc;
    font-size:22px;
    margin:0 0 10px;
}

.qdksj-loading-volunteer span{
    color:var(--yellow);
    font-weight:700;
}

.qdksj-loading-subtitle{
    color:var(--muted);
    font-size:16px;
    margin-bottom:24px;
}
/* ===================================================
SEARCH POLISH
=================================================== */

.qdksj-search-loading{

    background:
        linear-gradient(
            180deg,
            var(--card2),
            var(--card)
        );

    border:
        1px solid
        rgba(212,175,55,.08);

    border-radius:24px;

    padding:28px;

    text-align:center;

    color:var(--muted);

    font-size:18px;
}

.qdksj-empty-state{

    background:
        linear-gradient(
            180deg,
            var(--card2),
            var(--card)
        );

    border:
        1px solid
        rgba(212,175,55,.08);

    border-radius:30px;

    padding:42px;

    text-align:center;

    box-shadow:
        var(--shadow);
}

.qdksj-empty-icon{
    font-size:42px;
    color:var(--gold);
    margin-bottom:14px;
}

.qdksj-empty-state h3{
    color:var(--gold);
    margin-bottom:10px;
}

.qdksj-empty-state p{
    color:var(--muted);
}
/* ===================================================
MOBILE RESPONSIVE PASS
=================================================== */

@media (max-width: 1024px){

    .qdksj-container{
        padding:20px;
        max-width:100%;
    }

    .qdksj-dashboard-inner{
        padding:0;
    }

    .qdksj-cards{
        grid-template-columns:
        repeat(2,1fr);

        gap:14px;
    }

    .qdksj-header{
        padding:18px 20px;
    }

    .qdksj-header-left{
        gap:10px;
    }

    .qdksj-header-logo{
        width:48px;
        height:48px;
    }

    .qdksj-header h2{
        font-size:22px;
    }
}

@media (max-width: 768px){

    .qdksj-container{
        padding:14px;
    }

    .qdksj-header{

        flex-direction:column;
        align-items:flex-start;
        gap:18px;

        padding:18px;
        border-radius:24px;
    }

    .qdksj-header-right{
        width:100%;
    }

    .qdksj-logout-btn{
        width:100%;
        justify-content:center;
    }

    .qdksj-cards{

        grid-template-columns:
        repeat(2,1fr);

        gap:12px;
    }

    .qdksj-card{
        padding:18px;
        min-height:auto;
    }

    .qdksj-card h2{
        font-size:26px;
    }

    .qdksj-search-wrap{
        margin-top:18px;
    }

    .qdksj-search{
        height:58px;
        font-size:18px;
        padding:0 20px;
    }

    .qdksj-person-card{
        padding:16px;
        border-radius:22px;
    }

    .qdksj-person-row{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }

    .qdksj-person-main{
        width:100%;
    }

    .qdksj-person-name{
        font-size:17px;
        line-height:1.45;
        word-break:break-word;
    }

    .qdksj-person-phone{
        font-size:15px;
    }

    .qdksj-person-meta{
        font-size:14px;
    }

    .qdksj-status-wrap{
        width:100%;

        display:flex;
        align-items:center;
        justify-content:space-between;
    }

    .qdksj-assign{
        min-width:120px;
        height:46px;
    }

    .qdksj-undo{
        width:44px;
        height:44px;
    }

    .qdksj-loading-card{
        width:92%;
        padding:32px 22px;
    }

    .qdksj-loading-logo{
        width:82px;
    }
}

@media (max-width: 480px){

    .qdksj-cards{
        grid-template-columns:1fr;
    }

    .qdksj-header-logo{
        width:42px;
        height:42px;
    }

    .qdksj-header h2{
        font-size:20px;
    }

    .qdksj-person-name{
        font-size:16px;
    }

    .qdksj-search{
        font-size:16px;
        height:54px;
    }

    .qdksj-card h2{
        font-size:24px;
    }

    .qdksj-login-card{
        width:92%;
        padding:28px 22px;
    }

    .qdksj-input,
    .qdksj-select{
        height:54px;
        font-size:16px;
    }

    .qdksj-login-btn{
        height:54px;
    }
}

/* ===================================================
PREMIUM CSS PASS V1
Safe visual upgrade
=================================================== */

/* -------------------------
HEADER
-------------------------- */

.qdksj-header{

    background:
        linear-gradient(
            180deg,
            rgba(19,29,43,.92),
            rgba(16,23,34,.96)
        );

    border:
        1px solid
        rgba(212,175,55,.14);

    box-shadow:
        0 18px 44px
        rgba(0,0,0,.28);
}

/* -------------------------
STAT CARDS
-------------------------- */

.qdksj-card{

    position:relative;

    overflow:hidden;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.qdksj-card:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.34);

    border-color:
        rgba(212,175,55,.16);
}

.qdksj-card::before{

    content:'';

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(245,197,66,.35),
            transparent
        );
}

/* -------------------------
SEARCH INPUT
-------------------------- */

.qdksj-search{

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.qdksj-search:focus{

    transform:
        translateY(-1px);
}

/* -------------------------
PERSON CARDS
-------------------------- */

.qdksj-person-card{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(19,32,45,.95),
            rgba(15,23,36,.98)
        );

    border:
        1px solid
        rgba(212,175,55,.10);

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.24);

    transition:
        transform .24s ease,
        box-shadow .24s ease,
        border-color .24s ease,
        background .24s ease;
}

.qdksj-person-card:hover{

    transform:
        translateY(-2px);

    border-color:
        rgba(245,197,66,.22);

    box-shadow:
        0 20px 40px
        rgba(0,0,0,.34);
}

.qdksj-person-card::before{

    content:'';

    position:absolute;

    top:0;
    left:18px;
    right:18px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(245,197,66,.24),
            transparent
        );
}

/* -------------------------
ASSIGNED CARD PREMIUM
-------------------------- */

.qdksj-person-card.assigned{

    border:
        1px solid
        rgba(245,197,66,.20);

    background:
        linear-gradient(
            135deg,
            rgba(22,163,74,.08),
            rgba(212,175,55,.05),
            rgba(15,23,36,1)
        );

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.32);
}

.qdksj-assigned-badge{

    background:
        rgba(245,197,66,.10);

    border:
        1px solid
        rgba(245,197,66,.18);

    color:
        #f5d26b;

    backdrop-filter:
        blur(8px);
}

/* -------------------------
TEXT HIERARCHY
-------------------------- */

.qdksj-person-name{

    letter-spacing:
        -.02em;
}

.qdksj-person-phone{

    opacity:.82;
}

.qdksj-person-meta{

    color:
        rgba(248,250,252,.66);

    font-size:15px;
}

/* -------------------------
BUTTONS
-------------------------- */

.qdksj-login-btn,
.qdksj-assign,
.qdksj-walkin-btn,
.qdksj-logout-btn,
.qdksj-undo{

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.qdksj-login-btn:hover,
.qdksj-assign:hover,
.qdksj-walkin-btn:hover,
.qdksj-logout-btn:hover{

    transform:
        translateY(-1px);

    box-shadow:
        0 10px 22px
        rgba(212,175,55,.18);
}

.qdksj-login-btn:active,
.qdksj-assign:active,
.qdksj-walkin-btn:active,
.qdksj-logout-btn:active,
.qdksj-undo:active{

    transform:
        scale(.985);
}

/* -------------------------
MODAL
-------------------------- */

.qdksj-walkin-modal{

    backdrop-filter:
        blur(10px);

    animation:
        qdksjFadeIn .18s ease;
}

.qdksj-modal-card{

    box-shadow:
        0 26px 60px
        rgba(0,0,0,.38);

    border:
        1px solid
        rgba(212,175,55,.14);
}

/* -------------------------
TOAST
-------------------------- */

#qdksj-toast{

    min-width:220px;

    backdrop-filter:
        blur(18px);

    letter-spacing:
        .01em;
}

/* -------------------------
ANIMATIONS
-------------------------- */

@keyframes qdksjFadeIn{

    from{

        opacity:0;

        transform:
            translateY(8px);
    }

    to{

        opacity:1;

        transform:
            translateY(0);
    }
}

/* collector emphasis */

.qdksj-person-meta{

    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

.qdksj-person-meta .collector{

    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:6px 12px;

    border-radius:999px;

    background:
        rgba(245,197,66,.08);

    border:
        1px solid
        rgba(245,197,66,.14);

    color:
        #f2cf66;

    font-size:13px;
    font-weight:600;
}

/* ===================================================
PREMIUM ASSIGNED STATE
=================================================== */

.qdksj-person-card.assigned{

    position:relative;

    border:
        1px solid
        rgba(245,197,66,.22);

    background:
        linear-gradient(
            135deg,
            rgba(22,163,74,.07),
            rgba(245,197,66,.045),
            rgba(15,23,36,1)
        );

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.34),
        0 0 0 1px
        rgba(245,197,66,.05),
        0 0 26px
        rgba(245,197,66,.06);
}

.qdksj-person-card.assigned::after{

    content:'';

    position:absolute;

    inset:0;

    border-radius:inherit;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(245,197,66,.03),
            transparent
        );
}

/* assigned badge premium */

.qdksj-assigned-badge{

    background:
        linear-gradient(
            180deg,
            rgba(245,197,66,.14),
            rgba(212,175,55,.08)
        );

    border:
        1px solid
        rgba(245,197,66,.20);

    color:
        #f5d56f;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.04);

    font-weight:700;
}
/* ===================================================
PREMIUM MODAL POLISH
=================================================== */

.qdksj-modal-card{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(19,29,43,.98),
            rgba(16,23,34,.99)
        );

    border:
        1px solid
        rgba(245,197,66,.16);

    box-shadow:
        0 30px 70px
        rgba(0,0,0,.42);

    backdrop-filter:
        blur(20px);

    animation:
        qdksjModalRise .22s ease;
}

.qdksj-modal-card::before{

    content:'';

    position:absolute;

    top:0;
    left:26px;
    right:26px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(245,197,66,.30),
            transparent
        );
}

.qdksj-modal-card h3{

    margin:0 0 10px;

    color:
        var(--gold);

    font-size:28px;
    font-weight:800;
}

.qdksj-modal-card p{

    margin:0 0 22px;

    color:
        rgba(248,250,252,.72);

    line-height:1.5;
}

/* nicer spacing between buttons */

.qdksj-modal-card .qdksj-login-btn{

    flex:1;
}

@keyframes qdksjModalRise{

    from{

        opacity:0;

        transform:
            translateY(10px)
            scale(.985);
    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }
}
/* ===================================================
PREMIUM STATS CARDS
=================================================== */

.qdksj-card{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(19,29,43,.98),
            rgba(16,23,34,.99)
        );

    border:
        1px solid
        rgba(245,197,66,.10);

    box-shadow:
        0 14px 32px
        rgba(0,0,0,.28);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.qdksj-card::before{

    content:'';

    position:absolute;

    top:0;
    left:18px;
    right:18px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(245,197,66,.22),
            transparent
        );
}

.qdksj-card:hover{

    transform:
        translateY(-2px);

    border-color:
        rgba(245,197,66,.18);

    box-shadow:
        0 20px 42px
        rgba(0,0,0,.34);
}

.qdksj-card span{

    display:block;

    color:
        rgba(248,250,252,.58);

    font-size:13px;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

    font-weight:600;
}

.qdksj-card h2{

    margin-top:14px;

    font-size:42px;
    font-weight:800;

    color:
        #f5d26b;

    letter-spacing:
        -.03em;

    text-shadow:
        0 0 18px
        rgba(245,197,66,.06);
}
/* ===================================================
PREMIUM SEARCH BAR
=================================================== */

.qdksj-search-wrap{

    position:relative;

    margin-bottom:24px;
}

.qdksj-search{

    height:64px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.02)
        );

    border:
        1px solid
        rgba(245,197,66,.10);

    border-radius:24px;

    padding:
        0 26px;

    font-size:18px;
    font-weight:500;

    color:
        var(--text);

    box-shadow:
        0 10px 26px
        rgba(0,0,0,.20);

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease,
        background .22s ease;
}

.qdksj-search::placeholder{

    color:
        rgba(248,250,252,.42);

    font-weight:500;
}

.qdksj-search:focus{

    transform:
        translateY(-1px);

    border-color:
        rgba(245,197,66,.28);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 0 0 4px
        rgba(245,197,66,.08),
        0 14px 34px
        rgba(0,0,0,.28);
}
/* ===================================================
MICRO ANIMATION PASS
=================================================== */

.qdksj-person-card{

    animation:
        qdksjCardEnter
        .22s ease;
}

@keyframes qdksjCardEnter{

    from{

        opacity:0;

        transform:
            translateY(8px)
            scale(.992);
    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }
}

/* smoother interactions */

.qdksj-person-card,
.qdksj-card,
.qdksj-modal-card,
.qdksj-search,
.qdksj-login-btn,
.qdksj-assign,
.qdksj-walkin-btn,
.qdksj-logout-btn,
.qdksj-undo{

    will-change:
        transform,
        opacity;
}
/* ===================================================
PREMIUM SPLIT LOGIN
=================================================== */

.qdksj-login-wrap{

    min-height:100vh;

    display:grid;
    grid-template-columns:
        42fr 58fr;

    padding:0;

    overflow:hidden;

    background:
    radial-gradient(
        circle at top left,
        rgba(245,197,66,.09),
        transparent 28%
    ),
    radial-gradient(
        circle at bottom right,
        rgba(212,175,55,.05),
        transparent 26%
    ),
    linear-gradient(
        135deg,
        #05090f,
        #08111d
    );
}

/* -------------------------
LEFT BRAND PANEL
-------------------------- */

.qdksj-login-brand{

    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:80px;

    overflow:hidden;
}
.qdksj-login-brand::before{

    content:'';

    position:absolute;

    width:800px;
    height:800px;

    top:-240px;
    left:-320px;

    border-radius:999px;

    background:
        radial-gradient(
            circle,
            rgba(245,197,66,.10),
            transparent 68%
        );

    filter:
        blur(80px);
}

/* cinematic rings */

.qdksj-login-brand::after{

    content:'';

    position:absolute;

    width:760px;
    height:760px;

    left:-420px;
    bottom:-280px;

    border-radius:999px;

    border:
        1px solid
        rgba(245,197,66,.08);

    box-shadow:
        0 0 0 60px rgba(245,197,66,.03),
        0 0 0 120px rgba(245,197,66,.02);
}

.qdksj-login-brand-inner{

    position:relative;
    z-index:2;

    width:100%;
    max-width:700px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding-left:9%;
}

.qdksj-spectre-logo{

    width:100%;
    max-width:620px;

    height:auto;

    display:block;

    margin:0 0 36px;

    filter:
        drop-shadow(
            0 18px 44px
            rgba(0,0,0,.34)
        );
}

.qdksj-brand-title{

    color:
        rgba(245,210,107,.92);

    font-size:28px;

    line-height:1.18;

    font-weight:700;

    letter-spacing:
        -.03em;

    max-width:420px;

    margin:0;
}

/* -------------------------
RIGHT LOGIN SIDE
-------------------------- */

.qdksj-login-side{

    display:flex;
    align-items:center;
    justify-content:center;

    padding:80px;
}

.qdksj-login-card{

    width:100%;
    max-width:560px;

    min-height:720px;

    border-radius:42px;

    padding:72px 54px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.028),
            rgba(255,255,255,.015)
        );

    border:
        1px solid
        rgba(245,197,66,.12);

    box-shadow:
        0 40px 100px
        rgba(0,0,0,.42);

    backdrop-filter:
        blur(26px);

    display:flex;
    flex-direction:column;
    justify-content:center;

    position:relative;
    overflow:hidden;
}

.qdksj-logo{

    width:150px;
    height:150px;

    margin-bottom:30px;
}

.qdksj-brand{

    font-size:42px;
}

.qdksj-subtitle{

    font-size:18px;

    margin-bottom:34px;
}

/* -------------------------
RESPONSIVE
-------------------------- */

@media(max-width:1024px){

    .qdksj-login-wrap{

        grid-template-columns:
            1fr;
    }

    .qdksj-login-brand{

        min-height:320px;

        border-right:none;

        border-bottom:
            1px solid
            rgba(245,197,66,.08);

        padding:42px 26px;
    }

    .qdksj-brand-title{

        font-size:12px;
    }

    .qdksj-spectre-logo{

        max-width:240px;
        margin-bottom:20px;
    }

    .qdksj-login-side{

        padding:28px 20px;
    }

    .qdksj-login-card{

        padding:34px 28px;
    }
}
/* ==========================================
SPECTRE CREDIT
========================================== */

.qdksj-credit{

    display:flex;
    align-items:center;
    gap:10px;

    margin-left:auto;

    font-size:12px;

    color:
        rgba(255,255,255,.60);

    flex-wrap:wrap;
}

.qdksj-credit-brand{

    display:flex;
    align-items:center;
    gap:10px;

    text-decoration:none;

    color:inherit;

    transition:
        all .22s ease;
}

.qdksj-credit-brand:hover{

    transform:
        translateY(-1px);

    opacity:1;
}

.qdksj-credit-logo{

    height:20px;
    width:auto;

    display:block;

    opacity:.92;

    transition:
        all .2s ease;
}

.qdksj-credit-brand:hover .qdksj-credit-logo{

    transform:
        translateY(-1px);

    opacity:1;
}

.qdksj-credit-separator{

    opacity:.35;
}
/* ==========================================
PREMIUM SCROLLBAR
========================================== */

::-webkit-scrollbar{

    width:10px;
}

::-webkit-scrollbar-track{

    background:
        rgba(255,255,255,.03);

    border-radius:999px;
}

::-webkit-scrollbar-thumb{

    background:
        linear-gradient(
            180deg,
            rgba(245,210,107,.18),
            rgba(245,210,107,.08)
        );

    border-radius:999px;

    border:
        2px solid
        rgba(0,0,0,.18);

    transition:
        all .2s ease;
}

::-webkit-scrollbar-thumb:hover{

    background:
        linear-gradient(
            180deg,
            rgba(245,210,107,.30),
            rgba(245,210,107,.16)
        );
}
/* ==========================================
VOLUNTEER DROPDOWN FIX
========================================== */

#qdksj-volunteer{

    background:
        rgba(20,28,45,.92);

    color:#fff;

    border:
        1px solid
        rgba(245,210,107,.18);

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
}

#qdksj-volunteer option{

    background:
        #101826;

    color:
        #ffffff;
}