:root{
    --dg-bg:#020813;
    --dg-bg2:#07172c;
    --dg-panel:#071528;
    --dg-panel2:#03101f;

    --dg-gold:#d9ad32;
    --dg-gold-light:#ffe68a;
    --dg-gold-dark:#8f6509;

    --dg-white:#f6f8fb;
    --dg-muted:#8898ac;

    --dg-border:rgba(212,175,55,.22);
}


*{
    box-sizing:border-box;
}


html,
body{
    margin:0;

    min-width:100%;
    min-height:100%;

    font-family:"Vazirmatn",Tahoma,Arial,sans-serif;
}


body{
    min-height:100vh;

    overflow-x:hidden;

    color:var(--dg-white);

    background:
        radial-gradient(
            circle at 13% 15%,
            #0d315a 0,
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(212,175,55,.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #01050c,
            #051328 50%,
            #020812
        );
}


/* ==========================================================
   BACKGROUND
========================================================== */

.dg-login-background{
    position:fixed;

    inset:0;

    z-index:0;

    overflow:hidden;

    pointer-events:none;
}


.dg-grid{
    position:absolute;

    inset:0;

    opacity:.045;

    background-image:
        linear-gradient(
            rgba(255,255,255,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.06) 1px,
            transparent 1px
        );

    background-size:52px 52px;

    mask-image:
        radial-gradient(
            circle at center,
            #000,
            transparent 80%
        );
}


.dg-aurora{
    position:absolute;

    border-radius:50%;

    filter:blur(45px);

    animation:
        dgAuroraFloat
        10s ease-in-out infinite;
}


.dg-aurora-one{
    width:600px;
    height:600px;

    top:-330px;
    right:-250px;

    background:
        rgba(212,175,55,.10);
}


.dg-aurora-two{
    width:650px;
    height:650px;

    left:-350px;
    bottom:-350px;

    background:
        rgba(29,100,205,.13);

    animation-delay:-5s;
}


@keyframes dgAuroraFloat{

    50%{
        transform:
            translate(35px,-20px)
            scale(1.1);
    }

}


.dg-star{
    position:absolute;

    width:3px;
    height:3px;

    border-radius:50%;

    background:#ffe47c;

    box-shadow:
        0 0 11px #d4af37;

    animation:
        dgStarPulse
        3s ease-in-out infinite;
}


.star-1{top:16%;left:9%;}
.star-2{top:23%;right:13%;animation-delay:-1s;}
.star-3{bottom:20%;left:17%;animation-delay:-2s;}
.star-4{bottom:12%;right:20%;animation-delay:-.7s;}
.star-5{top:55%;left:4%;animation-delay:-1.8s;}


@keyframes dgStarPulse{

    50%{
        opacity:.2;
        transform:scale(.5);
    }

}


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

.dg-login-page{
    position:relative;

    z-index:2;

    min-height:100vh;

    display:flex;

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

    padding:32px;
}


.dg-login-shell{
    width:min(1280px,100%);

    display:grid;

    grid-template-columns:
        minmax(0,1.25fr)
        minmax(390px,.75fr);

    gap:22px;

    align-items:stretch;
}


/* ==========================================================
   COMMON PANEL
========================================================== */

.dg-brand-panel,
.dg-auth-panel{
    position:relative;

    min-height:690px;

    overflow:hidden;

    border-radius:34px;

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

    background:
        linear-gradient(
            145deg,
            rgba(9,25,47,.97),
            rgba(2,10,22,.98)
        );

    box-shadow:
        0 35px 90px rgba(0,0,0,.48),
        inset 0 1px 0 rgba(255,255,255,.055);

    backdrop-filter:blur(25px);
}


/* ==========================================================
   BRAND PANEL
========================================================== */

.dg-brand-panel{
    padding:42px;

    display:flex;

    flex-direction:column;
}


.dg-brand-glow{
    position:absolute;

    width:430px;
    height:430px;

    top:-230px;
    right:-150px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,215,90,.15),
            transparent 67%
        );

    filter:blur(15px);
}


.dg-brand-header{
    position:relative;

    z-index:3;

    display:flex;

    align-items:center;

    gap:22px;
}


/* LOGO */

.dg-logo-stage{
    position:relative;

    width:112px;
    height:112px;

    flex:0 0 112px;

    display:flex;

    align-items:center;
    justify-content:center;
}


.dg-logo-orbit{
    position:absolute;

    border-radius:32px;
}


.orbit-a{
    inset:0;

    border:
        1px solid rgba(255,222,109,.28);

    animation:
        dgOrbitA 8s linear infinite;
}


.orbit-b{
    inset:9px;

    border:
        1px dashed rgba(212,175,55,.20);

    animation:
        dgOrbitB 12s linear infinite;
}


@keyframes dgOrbitA{
    to{transform:rotate(360deg);}
}


@keyframes dgOrbitB{
    to{transform:rotate(-360deg);}
}


.dg-logo-box{
    position:relative;

    z-index:3;

    width:84px;
    height:84px;

    display:flex;

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

    padding:8px;

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fff7da
        );

    border:
        1px solid #f1cc55;

    box-shadow:
        0 0 0 5px rgba(212,175,55,.07),
        0 13px 30px rgba(0,0,0,.32),
        0 0 32px rgba(212,175,55,.28);

    animation:
        dgLogoBreath
        4s ease-in-out infinite;
}


@keyframes dgLogoBreath{

    50%{
        box-shadow:
            0 0 0 7px rgba(212,175,55,.11),
            0 16px 34px rgba(0,0,0,.38),
            0 0 48px rgba(212,175,55,.40);
    }

}


.dg-logo-box img{
    width:100%;
    height:100%;

    object-fit:contain;
}


.dg-logo-box span{
    color:#9b700e;

    font-family:Georgia,serif;

    font-size:24px;

    font-weight:900;
}


/* BRAND HEADING */

.dg-brand-heading{
    min-width:0;
}


.dg-eyebrow{
    display:block;

    color:#8997aa;

    font-size:8px;

    font-weight:900;

    letter-spacing:2.6px;
}


.dg-brand-heading h1{
    margin:5px 0 0;

    color:#f0cc55;

    font-size:30px;

    font-weight:950;

    line-height:1.2;

    text-shadow:
        0 0 20px rgba(212,175,55,.18);
}


.dg-brand-heading p{
    margin:7px 0 0;

    color:#cad3df;

    font-size:12px;
}


/* MAIN */

.dg-brand-main{
    position:relative;

    z-index:3;

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        35px 0;
}


.dg-system-status{
    display:flex;

    align-items:center;

    gap:8px;

    color:#c9a83b;

    font-size:8px;

    font-weight:950;

    letter-spacing:1px;
}


.dg-system-status i{
    width:5px;
    height:5px;

    border-radius:50%;

    background:#e6bd3f;

    box-shadow:
        0 0 10px #d4af37;

    animation:
        dgOnline
        2s ease-in-out infinite;
}


@keyframes dgOnline{

    50%{
        opacity:.3;
    }

}


.dg-brand-main h2{
    max-width:690px;

    margin:
        18px 0 0;

    color:#fff;

    font-size:37px;

    line-height:1.55;

    font-weight:950;
}


.dg-brand-main h2 span{
    color:#e4bd40;
}


.dg-brand-main > p{
    max-width:680px;

    margin:
        15px 0 0;

    color:#8e9db0;

    font-size:12px;

    line-height:2;
}


/* FEATURES */

.dg-feature-row{
    display:grid;

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

    gap:10px;

    margin-top:34px;
}


.dg-feature{
    min-width:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:13px 8px;

    border-radius:17px;

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

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

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


.dg-feature:hover{
    transform:translateY(-4px);

    background:
        rgba(212,175,55,.055);

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


.dg-feature i{
    color:#e8c346;

    font-size:19px;
}


.dg-feature span{
    color:#9ba9ba;

    font-size:8px;

    text-align:center;
}


/* ==========================================================
   ARCHITECT
========================================================== */

.dg-architect-card{
    position:relative;

    z-index:4;

    display:grid;

    grid-template-columns:
        54px
        minmax(0,1fr)
        auto;

    gap:14px;

    align-items:center;

    padding:13px 14px;

    overflow:hidden;

    border-radius:20px;

    color:inherit;

    text-decoration:none;

    background:
        linear-gradient(
            145deg,
            rgba(212,175,55,.075),
            rgba(255,255,255,.018)
        );

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

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


.dg-architect-card::before{
    content:"";

    position:absolute;

    top:0;
    left:-50%;

    width:35%;
    height:100%;

    transform:skewX(-20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,240,179,.10),
            transparent
        );

    transition:left .7s ease;
}


.dg-architect-card:hover::before{
    left:120%;
}


.dg-architect-card:hover{
    transform:translateY(-4px);

    border-color:
        rgba(255,222,112,.42);

    box-shadow:
        0 14px 30px rgba(0,0,0,.25),
        0 0 22px rgba(212,175,55,.08);
}


.dg-architect-icon{
    width:53px;
    height:53px;

    display:flex;

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

    border-radius:16px;

    color:#edc84e;

    background:
        rgba(212,175,55,.09);

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

    font-size:20px;
}


.dg-architect-info{
    display:flex;

    flex-direction:column;

    min-width:0;

    direction:ltr;

    text-align:left;
}


.dg-architect-info span{
    color:#68778b;

    font-size:6px;

    font-weight:950;

    letter-spacing:2px;
}


.dg-architect-info strong{
    margin-top:2px;

    color:#f0ca52;

    font-size:14px;

    font-weight:950;
}


.dg-architect-info small{
    margin-top:3px;

    color:#929faf;

    font-size:8px;
}


.dg-architect-open{
    display:flex;

    align-items:center;

    gap:6px;

    padding:
        7px 10px;

    border-radius:11px;

    color:#c5a438;

    background:
        rgba(212,175,55,.07);

    font-size:7px;

    font-weight:900;

    letter-spacing:.8px;
}


/* FOOTER */

.dg-brand-footer{
    position:relative;

    z-index:3;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:9px;

    margin-top:16px;

    color:#627185;

    font-size:7px;
}


.dg-brand-footer > i{
    width:1px;
    height:8px;

    background:
        rgba(212,175,55,.24);
}


.dg-secure{
    display:flex;

    align-items:center;

    gap:5px;
}


.dg-secure b{
    width:5px;
    height:5px;

    border-radius:50%;

    background:#44d59b;

    box-shadow:
        0 0 8px rgba(68,213,155,.65);
}


/* ==========================================================
   AUTH PANEL
========================================================== */

.dg-auth-panel{
    display:flex;

    align-items:center;

    justify-content:center;

    padding:34px;
}


.dg-auth-light{
    position:absolute;

    width:330px;
    height:260px;

    top:-140px;
    left:50%;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(212,175,55,.14),
            transparent 70%
        );

    filter:blur(20px);
}


.dg-auth-content{
    position:relative;

    z-index:3;

    width:100%;

    max-width:370px;
}


.dg-mobile-brand{
    display:none;
}


.dg-auth-emblem{
    display:flex;

    justify-content:center;

    margin-bottom:14px;
}


.dg-shield{
    width:66px;
    height:66px;

    display:flex;

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

    border-radius:21px;

    color:#f0ca53;

    background:
        rgba(212,175,55,.08);

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

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

    font-size:25px;

    animation:
        dgShieldPulse
        4s ease-in-out infinite;
}


@keyframes dgShieldPulse{

    50%{
        transform:translateY(-3px);

        box-shadow:
            0 0 30px rgba(212,175,55,.16);
    }

}


.dg-auth-heading{
    text-align:center;

    margin-bottom:28px;
}


.dg-auth-heading span{
    color:#c59f2e;

    font-family:Georgia,serif;

    font-size:11px;

    font-weight:900;

    letter-spacing:1.5px;
}


.dg-auth-heading h2{
    margin:
        6px 0 0;

    color:#fff;

    font-size:24px;

    font-weight:950;
}


.dg-auth-heading p{
    margin:
        5px 0 0;

    color:#6f7d90;

    font-size:8px;

    letter-spacing:.7px;
}


/* FORM */

.dg-field{
    margin-bottom:17px;
}


.dg-field label{
    display:block;

    margin-bottom:7px;

    color:#c8d0db;

    font-size:9px;

    font-weight:800;
}


.dg-input{
    position:relative;
}


.dg-input > i{
    position:absolute;

    right:15px;
    top:50%;

    transform:translateY(-50%);

    color:#c59f2f;

    font-size:14px;

    pointer-events:none;
}


.dg-input input{
    width:100%;
    height:52px;

    outline:0;

    padding:
        0 43px 0 43px;

    border-radius:15px;

    color:#fff;

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

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

    font-size:11px;

    font-weight:700;

    direction:ltr;

    text-align:left;

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


.dg-input input:focus{
    background:
        rgba(255,255,255,.055);

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

    box-shadow:
        0 0 0 4px rgba(212,175,55,.055);
}


.dg-password-toggle{
    position:absolute;

    left:9px;
    top:50%;

    transform:translateY(-50%);

    width:35px;
    height:35px;

    display:flex;

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

    padding:0;

    border:0;

    color:#69778a;

    background:transparent;

    cursor:pointer;
}


.dg-form-error{
    display:flex;

    align-items:flex-start;

    gap:8px;

    margin-bottom:15px;

    padding:11px;

    border-radius:13px;

    color:#ffc6c6;

    background:
        rgba(255,73,73,.07);

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

    font-size:9px;
}


.dg-login-button{
    position:relative;

    width:100%;
    height:54px;

    display:flex;

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

    gap:10px;

    margin-top:7px;

    overflow:hidden;

    border:0;

    border-radius:16px;

    color:#07101f;

    background:
        linear-gradient(
            135deg,
            #ffeca0,
            #e0b538 45%,
            #aa780d
        );

    box-shadow:
        0 12px 27px rgba(212,175,55,.20),
        inset 0 1px 0 rgba(255,255,255,.62);

    font-size:11px;

    font-weight:950;

    cursor:pointer;

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


.dg-login-button::before{
    content:"";

    position:absolute;

    top:-20%;
    left:-45%;

    width:35%;
    height:140%;

    transform:skewX(-20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.58),
            transparent
        );

    transition:left .65s ease;
}


.dg-login-button:hover::before{
    left:125%;
}


.dg-login-button:hover{
    transform:translateY(-3px);

    box-shadow:
        0 16px 33px rgba(212,175,55,.29);
}


.dg-login-security{
    display:flex;

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

    gap:6px;

    margin-top:18px;

    color:#657487;

    font-size:8px;
}


.dg-login-security i{
    color:#4ed29b;
}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1100px){

    .dg-login-page{
        padding:22px;
    }

    .dg-login-shell{
        grid-template-columns:
            minmax(0,1fr)
            370px;
    }

    .dg-brand-panel,
    .dg-auth-panel{
        min-height:620px;
    }

    .dg-brand-panel{
        padding:32px;
    }

    .dg-brand-main h2{
        font-size:31px;
    }

    .dg-feature-row{
        grid-template-columns:
            repeat(2,1fr);
    }

}


/* ==========================================================
   TABLET PORTRAIT / MOBILE
========================================================== */

@media(max-width:820px){

    body{
        background:
            linear-gradient(
                145deg,
                #020812,
                #06172d,
                #020812
            );
    }

    .dg-login-page{
        display:block;

        padding:
            18px 14px 30px;
    }

    .dg-login-shell{
        display:flex;

        flex-direction:column;

        width:100%;

        max-width:520px;

        margin:auto;
    }

    .dg-brand-panel{
        display:none;
    }

    .dg-auth-panel{
        min-height:auto;

        padding:
            25px 22px 28px;

        border-radius:28px;
    }

    .dg-mobile-brand{
        display:flex;

        flex-direction:column;

        align-items:center;

        margin-bottom:28px;

        text-align:center;
    }

    .dg-mobile-logo{
        width:74px;
        height:74px;

        display:flex;

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

        margin-bottom:12px;

        padding:7px;

        border-radius:20px;

        color:#8d650d;

        background:#fff;

        border:
            1px solid #e5bb42;

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

        font-family:Georgia,serif;

        font-weight:900;
    }

    .dg-mobile-logo img{
        width:100%;
        height:100%;

        object-fit:contain;
    }

    .dg-mobile-brand strong{
        color:#efca50;

        font-size:17px;
    }

    .dg-mobile-brand span{
        margin-top:5px;

        color:#8f9caf;

        font-size:9px;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media(max-width:480px){

    .dg-login-page{
        padding:
            10px 8px 22px;
    }

    .dg-auth-panel{
        padding:
            22px 15px 25px;

        border-radius:23px;
    }

    .dg-auth-content{
        max-width:none;
    }

    .dg-mobile-logo{
        width:64px;
        height:64px;
    }

    .dg-mobile-brand strong{
        font-size:14px;
    }

    .dg-auth-heading h2{
        font-size:20px;
    }

    .dg-shield{
        width:56px;
        height:56px;

        font-size:21px;
    }

    .dg-input input{
        height:50px;

        font-size:12px;
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation:none !important;

        transition:none !important;
    }

}