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

body{

    font-family:'Outfit',sans-serif;

    font-weight:300;

    background:#050816;

    overflow:hidden;

    color:white;
}

/* GRID */

.grid-bg{

    position:fixed;

    inset:0;

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

    background-size:60px 60px;

    z-index:0;
}

/* MAIN */

.main-layout{

    width:100%;
    height:100vh;

    display:flex;

    position:relative;

    z-index:2;
}

/* LEFT */

.left-side{

    width:58%;

    position:relative;

    display:flex;

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

/* RIGHT */

.right-side{

    width:42%;

    position:relative;

    display:flex;

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

/* LOGO */

.logo-box{

    position:absolute;

    top:30px;
    left:40px;

    display:flex;

    align-items:center;

    gap:18px;
}

.logo-icon{

    width:72px;
    height:72px;

    border-radius:18px;

    background:
    linear-gradient(135deg,#f6de89,#c8a95b);

    color:#000;

    font-size:38px;

    font-weight:700;

    display:flex;

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

    box-shadow:
    0 0 35px rgba(246,222,137,0.35);
}

.logo-box h1{

    font-size:34px;
}

.logo-box p{

    color:#9f9f9f;

    margin-top:6px;
}

.wheel-wrapper{
    width:760px;
    height:760px;
    position:relative;
}

.wheel-svg{
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
}

.wheel-ring-svg{
    fill:none;
    stroke:rgba(255,255,255,0.07);
    stroke-width:2;
}


.wheel-label{
    position:absolute;
    text-align:center;
    z-index:5;
    width:170px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    transition:
    filter .35s ease,
    opacity .35s ease;

text-shadow:
    0 0 12px rgba(255,255,255,.08);
}

.wheel-label i{
    font-size:36px;
    margin-bottom:10px;
}

.wheel-label h2{
    font-size:34px;
    line-height:1;
}

.wheel-label p{
    font-size:16px;
    color:#d0d0d0;
    margin-top:8px;
}

.admin-label{
    top:135px;
    left:50%;
    transform:translateX(-50%);
    color:#f6de89;
}

.staff-label{
    right:120px;
    top:50%;
    transform:translateY(-50%);
    color:#4e8cff;
}

.engineer-label{
    bottom:130px;
    left:50%;
    transform:translateX(-50%);
    color:#27ffd0;
}

.client-label{
    left:120px;
    top:50%;
    transform:translateY(-50%);
    color:#c45dff;
}

.seg{
    fill:none;
    stroke-width:170;
    stroke-linecap:round;
    stroke-linejoin:round;
    cursor:pointer;
    transition:0.4s;
}

.seg:hover{

    transform:
        scale(1.03);

    opacity:1;

    filter:
        brightness(1.25)
        saturate(1.2)
        drop-shadow(0 0 22px currentColor);
}

.admin-seg{
    fill:url(#goldGrad);
    stroke:#f6de89;
    stroke-width:3;
}

.staff-seg{
    fill:url(#blueGrad);
    stroke:#4e8cff;
    stroke-width:3;
}

.engineer-seg{
    fill:url(#greenGrad);
    stroke:#27ffd0;
    stroke-width:3;
}

.client-seg{
    fill:url(#purpleGrad);
    stroke:#c45dff;
    stroke-width:3;
}

/* CENTER */

.center-circle{

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    #f6de89,
    #c8a95b);

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    display:flex;

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

    box-shadow:
    0 0 55px rgba(246,222,137,0.55);

    z-index:10;
}

.inner-circle{

    width:178px;
    height:178px;

    border-radius:50%;

    background:#050816;

    display:flex;

    flex-direction:column;

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

    border:2px solid rgba(255,255,255,0.04);
}

.inner-circle h1{
    font-size:46px;
    color:#f6de89;
    line-height:1;
}

.inner-circle span{
    margin-top:6px;
    letter-spacing:7px;
    color:#8d8d8d;
    font-size:12px;
}

/* TOP BUTTONS */

.top-buttons{

    position:absolute;

    top:30px;
    right:35px;

    display:flex;

    gap:14px;
}

.top-btn{

    height:54px;

    padding:0 22px;

    border-radius:18px;

    border:1px solid rgba(255,255,255,0.08);

    background:
    rgba(255,255,255,0.03);

    color:#d0d0d0;

    font-family:'Outfit',sans-serif;

    font-size:16px;

    display:flex;

    align-items:center;

    gap:10px;

    backdrop-filter:blur(20px);

    cursor:pointer;
}

.top-btn.active{

    color:#f6de89;

    border-color:#f6de89;
}

/* LOGIN CARD */

.login-card{
    width:580px;
    padding:38px;
    border-radius:28px;
    background:rgba(5,10,28,0.35);
    border:1px solid rgba(246,222,137,0.22);
    backdrop-filter:blur(28px);
    box-shadow:
        0 0 45px rgba(0,0,0,0.42),
        inset 0 1px 0 rgba(255,255,255,0.05);
    transform-style:preserve-3d;
transition:0.4s ease;
}

.login-card:hover{
    transform:
        translateY(-4px)
        scale(1.01);

    box-shadow:
        0 25px 60px rgba(0,0,0,.45),
        0 0 35px rgba(246,222,137,.12);
}

.login-card h4{
    color:#f6de89;
    font-size:18px;
    font-weight:600;
    letter-spacing:0.4px;
    margin-bottom:10px;
    text-align:center;
}

.login-card h1{
    font-size:42px;
    line-height:1.08;
    margin-bottom:14px;
    letter-spacing:-1.5px;
    font-weight:700;
    text-align:center;
}

.sub-title{
    color:#8f96a8;
    font-size:15px;
    font-weight:400;
    letter-spacing:0.2px;
    margin-bottom:28px;
    text-align:center;
}
/* ACTIVE ROLE */

.active-role{
    height:74px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.035);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 18px;
    margin-bottom:26px;
}

.role-left{
    display:flex;
    align-items:center;
    gap:14px;
}

.role-icon{
    width:52px;
    height:52px;
    border-radius:50%;
    border:1px solid rgba(246,222,137,0.35);
    background:rgba(246,222,137,0.08);
    display:flex;
    justify-content:center;
    align-items:center;
    color:#f6de89;
    font-size:23px;
}

.active-role small{
    color:#9f9f9f;
    font-size:13px;
}

.active-role h3{
    margin-top:3px;
    font-size:26px;
    color:#f6de89;
}

/* FORM */

form label{
    display:block;
    margin-bottom:9px;
    font-size:14px;
    font-weight:600;
}

.input-box{
    height:56px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.035);
    display:flex;
    align-items:center;
    gap:13px;
    padding:0 18px;
    margin-bottom:20px;
}

.input-box i{
    color:#8d8d8d;
    font-size:17px;
}

.input-box input{
    flex:1;
    background:none;
    border:none;
    outline:none;
    color:white;
    font-size:15px;
    font-weight:400;
    font-family:'Outfit',sans-serif;
}

.input-box input::placeholder{
    color:#777;
}

/* OPTIONS */

.options{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px;
    font-size:14px;
}

.remember{
    display:flex;
    align-items:center;
    gap:8px;
}

.options a{
    color:#f6de89;
    text-decoration:none;
    font-weight:600;
}

/* BUTTON */

.login-btn{
    width:100%;
    height:60px;
    border:none;
    border-radius:18px;
    background:linear-gradient(135deg,#f6de89,#d8b75e);
    color:#000;
    font-size:20px;
    font-weight:700;
    letter-spacing:0.3px;
    font-family:'Outfit',sans-serif;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    box-shadow:0 12px 28px rgba(246,222,137,0.18);
}

/* FOOTER */

.card-footer{
    margin-top:22px;
    display:flex;
    justify-content:center;
    gap:10px;
    color:#8f8f8f;
    font-size:13px;
}

/* PREMIUM WHEEL EFFECTS */

.wheel-wrapper::before{
    content:"";
    position:absolute;
    width:660px;
    height:660px;
    border-radius:50%;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:
        radial-gradient(circle, rgba(246,222,137,0.12), transparent 45%),
        conic-gradient(from 0deg, rgba(246,222,137,.18), rgba(78,140,255,.14), rgba(39,255,208,.14), rgba(196,93,255,.14), rgba(246,222,137,.18));
    filter:blur(22px);
    opacity:.45;
    z-index:0;
    animation:wheelAura 8s linear infinite;
}

@keyframes wheelAura{
    from{ transform:translate(-50%,-50%) rotate(0deg); }
    to{ transform:translate(-50%,-50%) rotate(360deg); }
}

.wheel-svg{
    z-index:2;
}

.seg{
    transform-origin:400px 400px;
    transition:
        transform .35s ease,
        filter .35s ease,
        opacity .35s ease;
}

.seg:hover{
    transform:scale(1.025);
    filter:
        brightness(1.35)
        drop-shadow(0 0 18px currentColor);
    opacity:1;
}

.admin-seg:hover{
    filter:brightness(1.35) drop-shadow(0 0 22px rgba(246,222,137,.75));
}

.staff-seg:hover{
    filter:brightness(1.35) drop-shadow(0 0 22px rgba(78,140,255,.75));
}

.engineer-seg:hover{
    filter:brightness(1.35) drop-shadow(0 0 22px rgba(39,255,208,.75));
}

.client-seg:hover{
    filter:brightness(1.35) drop-shadow(0 0 22px rgba(196,93,255,.75));
}

.seg.active-slice{
    transform:scale(1.04);
    opacity:1;
}

.wheel-label{
    pointer-events:none;
    transition:.35s ease;
}

.wheel-wrapper:hover .wheel-label{
    opacity:1;
    text-shadow:0 0 12px rgba(255,255,255,.08);
}

.center-circle{
    animation:centerPulse 2.6s ease-in-out infinite;
}

@keyframes centerPulse{
    0%,100%{
        box-shadow:0 0 45px rgba(246,222,137,.45);
    }
    50%{
        box-shadow:0 0 75px rgba(246,222,137,.75);
    }
}

.login-card{
    position:relative;
    overflow:hidden;
}

.login-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:28px;
    background:
        linear-gradient(120deg, transparent 20%, rgba(246,222,137,.12), transparent 55%);
    transform:translateX(-120%);
    animation:cardShine 5s ease-in-out infinite;
    pointer-events:none;
}

@keyframes cardShine{
    0%,70%{ transform:translateX(-120%); }
    100%{ transform:translateX(120%); }
}

.input-box{
    transition:.3s ease;
}

.input-box:focus-within{
    border-color:rgba(246,222,137,.55);

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

    box-shadow:
        0 0 0 1px rgba(246,222,137,.18),
        0 0 24px rgba(246,222,137,.12);

    transform:translateY(-1px);
}

.login-btn{
    transition:.3s ease;
}

.login-btn:hover{

    transform:
        translateY(-3px)
        scale(1.01);

    box-shadow:
        0 16px 40px rgba(246,222,137,.35),
        0 0 30px rgba(246,222,137,.22);

    filter:brightness(1.04);
}

.seg.active-slice{

    transform:scale(1.045);

    filter:
        brightness(1.35)
        saturate(1.3)
        drop-shadow(0 0 30px currentColor);

    opacity:1;
}

/* DYNAMIC ROLE THEMES */

.login-card.admin-theme{
    border-color:rgba(246,222,137,.22);
}

.login-card.staff-theme{
    border-color:rgba(78,140,255,.25);
}

.login-card.engineer-theme{
    border-color:rgba(39,255,208,.25);
}

.login-card.client-theme{
    border-color:rgba(196,93,255,.25);
}

/* BUTTON COLORS */

.login-btn.admin-btn{
    background:
    linear-gradient(135deg,#f6de89,#d8b75e);

    color:#000;
}

.login-btn.staff-btn{
    background:
    linear-gradient(135deg,#4e8cff,#235dff);

    color:white;
}

.login-btn.engineer-btn{
    background:
    linear-gradient(135deg,#27ffd0,#00c896);

    color:#000;
}

.login-btn.client-btn{
    background:
    linear-gradient(135deg,#c45dff,#8c3dff);

    color:white;
}

/* ACTIVE ROLE COLORS */

.role-icon.staff-role{
    color:#4e8cff;
    border-color:rgba(78,140,255,.35);
    background:rgba(78,140,255,.08);
}

.role-icon.engineer-role{
    color:#27ffd0;
    border-color:rgba(39,255,208,.35);
    background:rgba(39,255,208,.08);
}

.role-icon.client-role{
    color:#c45dff;
    border-color:rgba(196,93,255,.35);
    background:rgba(196,93,255,.08);
}

/* LABEL ACTIVE EFFECT */

.wheel-label.active-label{
    filter:
        brightness(1.18)
        drop-shadow(0 0 14px currentColor);
}

/* FINAL PREMIUM POLISH */

body::before{
    content:"";
    position:fixed;
    inset:0;
    opacity:.55;
    background:
        radial-gradient(circle at 18% 22%, rgba(246,222,137,.13), transparent 28%),
        radial-gradient(circle at 78% 75%, rgba(78,140,255,.12), transparent 32%),
        radial-gradient(circle at 45% 55%, rgba(196,93,255,.06), transparent 30%);
    pointer-events:none;
    z-index:1;
}

.logo-box,
.top-btn,
.login-card,
.active-role,
.input-box{
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
}


.logo-icon{
    background:linear-gradient(135deg,#fff1b8,#d2a947,#8f6a20);
    box-shadow:
        0 0 28px rgba(246,222,137,.38),
        inset 0 1px 0 rgba(255,255,255,.55);
}

.top-btn:hover{
    color:#f6de89;
    border-color:rgba(246,222,137,.5);
    box-shadow:0 0 18px rgba(246,222,137,.14);
    transform:translateY(-2px);
}

.active-role{
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 14px 34px rgba(0,0,0,.18);
}

.login-card{
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(5,10,28,.78);
}

.input-box:hover{
    border-color:rgba(255,255,255,.16);
    background:rgba(255,255,255,.055);
}

.seg{
    transform-origin:400px 400px;
}

.seg.active-slice{
    filter:
        brightness(1.38)
        saturate(1.35)
        drop-shadow(0 0 32px currentColor);
}

/* MOBILE RESPONSIVE */

@media(max-width:1100px){
    body{
        overflow:auto;
    }

    .main-layout{
        min-height:100vh;
        height:auto;
        flex-direction:column;
        padding:110px 20px 40px;
        gap:30px;
    }

    .left-side,
    .right-side{
        width:100%;
    }

    .wheel-wrapper{
        width:92vw;
        height:92vw;
        max-width:620px;
        max-height:620px;
    }

    .login-card{
        width:min(100%,520px);
    }

    .top-buttons{
        top:24px;
        right:20px;
    }
}

/* ARCHITECT BLUEPRINT BACKGROUND */

body::after{
    content:"";
    position:fixed;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(5,8,22,.55),
            rgba(5,8,22,.35),
            rgba(5,8,22,.60)
        ),
        url("../images/blueprint-bg.png");

    background-size:cover;
    background-position:center;
    opacity:.75;

    pointer-events:none;
    z-index:1;
}

.left-side::before{
    content:"ARCHITECTURAL BLUEPRINT";
    position:absolute;
    top:150px;
    left:48px;
    color:rgba(246,222,137,.35);
    font-size:13px;
    letter-spacing:8px;
    z-index:3;
}

.left-side::after{
    content:"ELEVATION";
    position:absolute;
    bottom:88px;
    left:105px;
    color:rgba(246,222,137,.28);
    font-size:13px;
    letter-spacing:8px;
    z-index:3;
}

.right-side::before{
    content:"PLAN";
    position:absolute;
    top:108px;
    left:-82px;
    color:rgba(246,222,137,.24);
    font-size:13px;
    letter-spacing:7px;
    z-index:3;
}

.main-layout::after{
    content:"";
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at 8% 42%, rgba(246,222,137,.45) 0 2px, transparent 3px),
        radial-gradient(circle at 51% 55%, rgba(246,222,137,.38) 0 2px, transparent 3px),
        radial-gradient(circle at 87% 66%, rgba(246,222,137,.35) 0 2px, transparent 3px);
    opacity:.45;
    pointer-events:none;
    z-index:2;
}

/* BG VISIBILITY FIX */

body::after{
    z-index:0;
    opacity:.95;
    background:
        linear-gradient(
            90deg,
            rgba(5,8,22,.25),
            rgba(5,8,22,.12),
            rgba(5,8,22,.32)
        ),
        url("../images/blueprint-bg.jpg");
    background-size:cover;
    background-position:center;
}

body::before{
    z-index:1;
    opacity:.25;
}

.grid-bg{
    z-index:1;
    opacity:.35;
}

.main-layout{
    z-index:3;
}



/* FINAL CLEAN GLASS LOGIN BOX */

.login-card{
    background:rgba(8,12,28,0.015) !important;
    background-color:rgba(8,12,28,0.015) !important;

    border:1px solid rgba(255,255,255,0.20) !important;

    backdrop-filter:blur(1.2px) saturate(120%) !important;
-webkit-backdrop-filter:blur(1.2px) saturate(120%) !important;

    box-shadow:
        0 22px 55px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.login-card::before{
    opacity:.08 !important;
}

.login-card::after{
    display:none !important;
}

.active-role,
.input-box{
    background:rgba(255,255,255,0.025) !important;
    border:1px solid rgba(255,255,255,0.14) !important;

    backdrop-filter:blur(2px) !important;
-webkit-backdrop-filter:blur(2px) !important;
}

/* ROLE BASED LOGIN CARD SHADOWS */

.login-card.admin-theme{
    box-shadow:
        0 18px 45px rgba(246,222,137,.16),
        0 0 22px rgba(246,222,137,.10),
        inset 0 1px 0 rgba(255,255,255,.14);
}

.login-card.staff-theme{
    box-shadow:
        0 18px 45px rgba(78,140,255,.16),
        0 0 22px rgba(78,140,255,.10),
        inset 0 1px 0 rgba(255,255,255,.14);
}

.login-card.engineer-theme{
    box-shadow:
        0 18px 45px rgba(39,255,208,.14),
        0 0 22px rgba(39,255,208,.10),
        inset 0 1px 0 rgba(255,255,255,.14);
}

.login-card.client-theme{
    box-shadow:
        0 18px 45px rgba(196,93,255,.16),
        0 0 22px rgba(196,93,255,.10),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* HOVER GLOW */

.login-card.admin-theme:hover{
    box-shadow:
        0 25px 65px rgba(246,222,137,.28),
        0 0 40px rgba(246,222,137,.22),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.login-card.staff-theme:hover{
    box-shadow:
        0 25px 65px rgba(78,140,255,.30),
        0 0 40px rgba(78,140,255,.22),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.login-card.engineer-theme:hover{
    box-shadow:
        0 25px 65px rgba(39,255,208,.26),
        0 0 40px rgba(39,255,208,.18),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.login-card.client-theme:hover{
    box-shadow:
        0 25px 65px rgba(196,93,255,.30),
        0 0 40px rgba(196,93,255,.22),
        inset 0 1px 0 rgba(255,255,255,.18);
}

/* FORCE ROLE BASED LOGIN CARD SHADOW */

.login-card.admin-theme{
    box-shadow:
        0 22px 60px rgba(246,222,137,.32),
        0 0 42px rgba(246,222,137,.24),
        inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.login-card.staff-theme{
    box-shadow:
        0 22px 60px rgba(78,140,255,.34),
        0 0 42px rgba(78,140,255,.24),
        inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.login-card.engineer-theme{
    box-shadow:
        0 22px 60px rgba(39,255,208,.30),
        0 0 42px rgba(39,255,208,.22),
        inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.login-card.client-theme{
    box-shadow:
        0 22px 60px rgba(196,93,255,.34),
        0 0 42px rgba(196,93,255,.24),
        inset 0 1px 0 rgba(255,255,255,.20) !important;
}

/* FORCE STRONG ROLE HOVER GLOW */

.login-card.admin-theme:hover{
    transform:
        translateY(-6px)
        scale(1.015);

    box-shadow:
        0 30px 80px rgba(246,222,137,.45),
        0 0 60px rgba(246,222,137,.38),
        0 0 120px rgba(246,222,137,.18),
        inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.login-card.staff-theme:hover{
    transform:
        translateY(-6px)
        scale(1.015);

    box-shadow:
        0 30px 80px rgba(78,140,255,.48),
        0 0 60px rgba(78,140,255,.40),
        0 0 120px rgba(78,140,255,.18),
        inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.login-card.engineer-theme:hover{
    transform:
        translateY(-6px)
        scale(1.015);

    box-shadow:
        0 30px 80px rgba(39,255,208,.42),
        0 0 60px rgba(39,255,208,.34),
        0 0 120px rgba(39,255,208,.16),
        inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.login-card.client-theme:hover{
    transform:
        translateY(-6px)
        scale(1.015);

    box-shadow:
        0 30px 80px rgba(196,93,255,.48),
        0 0 60px rgba(196,93,255,.40),
        0 0 120px rgba(196,93,255,.18),
        inset 0 1px 0 rgba(255,255,255,.24) !important;
}

/* DEFAULT ADMIN ACTIVE SHADOW */

.login-card{
    box-shadow:
        0 22px 60px rgba(246,222,137,.30),
        0 0 42px rgba(246,222,137,.22),
        inset 0 1px 0 rgba(255,255,255,.20) !important;
}

/* MOBILE ROLE FIRST FLOW */

.back-to-wheel{
    display:none;
}

@media(max-width:900px){

    body{
        overflow:hidden;
    }

    .main-layout{
        height:100vh;
        width:100%;
        padding:0;
        display:block;
    }

    .left-side,
    .right-side{
        width:100%;
        height:100vh;
        position:absolute;
        inset:0;
        display:flex;
        justify-content:center;
        align-items:center;
        transition:.45s ease;
    }

    .left-side{
        z-index:5;
        opacity:1;
        transform:translateX(0);
    }

    .right-side{
        z-index:6;
        opacity:0;
        pointer-events:none;
        transform:translateX(100%);
    }

    body.mobile-login-open .left-side{
        opacity:0;
        pointer-events:none;
        transform:translateX(-100%);
    }

    body.mobile-login-open .right-side{
        opacity:1;
        pointer-events:auto;
        transform:translateX(0);
    }

    .logo-box{
        top:22px;
        left:22px;
        transform:scale(.85);
        transform-origin:left top;
    }

    .top-buttons{
        display:none;
    }

    .wheel-wrapper{
    width:100vw;
    height:100vw;

    max-width:430px;
    max-height:430px;

    min-width:430px;
    min-height:430px;

    position:relative;

    transform:scale(.88);
}

    .wheel-label{
    width:120px;
}

.wheel-label i{
    font-size:22px;
    margin-bottom:6px;
}

.wheel-label h2{
    font-size:20px;
}

.wheel-label p{
    font-size:11px;
    margin-top:4px;
}

/* PERFECT MOBILE POSITIONS */

.admin-label{
    top:78px;
    left:50%;
    transform:translateX(-50%);
}

.staff-label{
    right:18px;
    top:50%;
    transform:translateY(-50%);
}

.engineer-label{
    bottom:72px;
    left:50%;
    transform:translateX(-50%);
}

.client-label{
    left:18px;
    top:50%;
    transform:translateY(-50%);
}

    .center-circle{
    width:108px;
    height:108px;
}

.inner-circle{
    width:106px;
    height:106px;
}

    .inner-circle h1{
    font-size:28px;
}

    .inner-circle span{
        font-size:10px;
        letter-spacing:5px;
    }

    .login-card{
        width:92%;
        max-width:430px;
        padding:28px !important;
    }

    .back-to-wheel{
        display:flex;
        align-items:center;
        gap:8px;
        border:none;
        background:rgba(255,255,255,.06);
        color:#f6de89;
        border:1px solid rgba(246,222,137,.25);
        padding:10px 14px;
        border-radius:14px;
        margin-bottom:18px;
        font-family:'Outfit',sans-serif;
        cursor:pointer;
    }

    .login-card h1{
        font-size:34px;
    }
}

/* MOBILE WHEEL LABEL FIX */

@media(max-width:900px){

    .wheel-label{
        width:92px;
        text-align:center;
        align-items:center;
    }

    .wheel-label h2{
    font-size:16px;
    letter-spacing:.5px;
        line-height:1;
        white-space:nowrap;
    }

    .wheel-label p{
        font-size:9px;
        line-height:1.1;
        white-space:normal;
    }

    .wheel-label i{
        font-size:19px;
        margin-bottom:4px;
    }

    /* PERFECT SIDE LABEL ALIGNMENT */

.client-label,
.staff-label{
    width:100px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.client-label{
    left:22%;
    top:50%;
    transform:translate(-50%,-50%);
}

.staff-label{
    left:78%;
    top:50%;
    transform:translate(-50%,-50%);
}

    .admin-label{
        top:86px;
    }

    .engineer-label{
        bottom:82px;
    }
}

.wheel-label{
    position:absolute;
    z-index:5;
}

/* CHROME AUTOFILL FIX */

.input-box input:-webkit-autofill,
.input-box input:-webkit-autofill:hover,
.input-box input:-webkit-autofill:focus,
.input-box input:-webkit-autofill:active{

    -webkit-text-fill-color:#ffffff !important;

    -webkit-box-shadow:
        0 0 0px 1000px transparent inset !important;

    box-shadow:
        0 0 0px 1000px transparent inset !important;

    background:transparent !important;

    transition:
        background-color 9999s ease-in-out 0s;
}

.input-box input{
    caret-color:#f6de89;
}

.input-box input:-webkit-autofill,
.input-box input:-webkit-autofill:hover,
.input-box input:-webkit-autofill:focus,
.input-box input:-webkit-autofill:active{
    -webkit-text-fill-color:#ffffff !important;
    -webkit-box-shadow:0 0 0px 1000px transparent inset !important;
    box-shadow:0 0 0px 1000px transparent inset !important;
    background:transparent !important;
    transition:background-color 9999s ease-in-out 0s;
}

.forgot-popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.forgot-popup.active {
    display: flex;
}

.forgot-box {
    width: 360px;
    padding: 28px;
    border-radius: 24px;
    background: rgba(18, 18, 28, 0.95);
    border: 1px solid rgba(246,222,137,0.25);
    box-shadow: 0 25px 80px rgba(0,0,0,0.45);
    position: relative;
    text-align: center;
}

.forgot-box h2 {
    color: #f6de89;
    margin-bottom: 8px;
}

.forgot-box p {
    color: #aaa;
    font-size: 14px;
    margin-bottom: 22px;
}

.forgot-box input {
    width: 100%;
    height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: #fff;
    padding: 0 15px;
    outline: none;
    margin-bottom: 18px;
}

.forgot-box button#sendOtpBtn {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #f6de89, #c49b3f);
    color: #111;
    font-weight: 700;
    cursor: pointer;
}

.forgot-close {
    position: absolute;
    right: 16px;
    top: 14px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}


.message-popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    backdrop-filter:blur(10px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:10000;
}

.message-popup.active{
    display:flex;
}

.message-box{
    width:380px;
    padding:30px;
    border-radius:24px;
    text-align:center;
    background:rgba(18,18,28,.96);
    border:1px solid rgba(246,222,137,.25);
    box-shadow:0 25px 80px rgba(0,0,0,.45);
}

.message-icon{
    font-size:42px;
    color:#f6de89;
    margin-bottom:15px;
}

.message-box h3{
    color:#fff;
    margin-bottom:10px;
}

.message-box p{
    color:#b8b8b8;
    line-height:1.6;
    margin-bottom:22px;
}

.message-box button{
    width:100%;
    height:48px;
    border:none;
    border-radius:14px;
    cursor:pointer;
    font-weight:700;
    background:linear-gradient(
        135deg,
        #f6de89,
        #c49b3f
    );
}

.logo-icon{
    position:relative;
    overflow:hidden;
}

.logo-icon img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:inherit;
}

.logo-icon span{
    width:100%;
    height:100%;

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

.logo-icon img[hidden]{
    display:none !important;
}

.logo-icon span[hidden]{
    display:none !important;
}

/* =========================================================
   SAAS ACCESS / TRIAL / SUBSCRIPTION
========================================================= */

.access-top-btn{
    color:#f6de89;
    border-color:rgba(246,222,137,.35);
    background:rgba(246,222,137,.06);
}

.access-top-btn:hover{
    border-color:#f6de89;
    background:rgba(246,222,137,.10);
    box-shadow:
        0 0 24px rgba(246,222,137,.16);
}


/* =========================================================
   POPUP OVERLAY
========================================================= */

.access-popup{
    position:fixed;
    inset:0;
    z-index:12000;

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

    padding:24px;

    background:
        rgba(2,5,15,.78);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.access-popup.active{
    display:flex;
}


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

.access-modal{
    width:min(760px,94vw);
    max-height:92vh;
    overflow:auto;

    position:relative;

    padding:34px;

    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        ),
        rgba(5,10,28,.96);

    border:
        1px solid
        rgba(246,222,137,.24);

    box-shadow:
        0 30px 90px rgba(0,0,0,.55),
        0 0 45px rgba(246,222,137,.12),
        inset 0 1px 0 rgba(255,255,255,.08);

    animation:
        accessModalIn .24s ease;
}

.registration-modal{
    width:min(720px,94vw);
}

@keyframes accessModalIn{
    from{
        opacity:0;
        transform:
            translateY(18px)
            scale(.98);
    }

    to{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   CLOSE / BACK
========================================================= */

.access-close{
    position:absolute;

    top:18px;
    right:18px;

    width:42px;
    height:42px;

    border-radius:14px;

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

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

    color:#fff;

    font-size:17px;

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

    cursor:pointer;

    transition:.25s ease;
}

.access-close:hover{
    color:#f6de89;

    border-color:
        rgba(246,222,137,.45);

    background:
        rgba(246,222,137,.08);

    transform:rotate(4deg);
}

.access-back-btn{
    position:absolute;

    top:20px;
    left:20px;

    border:
        1px solid
        rgba(246,222,137,.20);

    background:
        rgba(246,222,137,.06);

    color:#f6de89;

    min-height:40px;

    padding:0 14px;

    border-radius:13px;

    font-family:'Outfit',sans-serif;

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

    cursor:pointer;
}


/* =========================================================
   HEADER
========================================================= */

.access-modal-head{
    text-align:center;

    padding:
        10px 50px 28px;
}

.access-main-icon{
    width:66px;
    height:66px;

    border-radius:20px;

    margin:
        0 auto 16px;

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

    font-size:27px;

    color:#111;

    background:
        linear-gradient(
            135deg,
            #fff1b8,
            #d8b75e
        );

    box-shadow:
        0 15px 35px
        rgba(246,222,137,.22);
}

.demo-main-icon{
    color:#07160f;

    background:
        linear-gradient(
            135deg,
            #91ffe0,
            #27ffd0
        );
}

.subscription-main-icon{
    background:
        linear-gradient(
            135deg,
            #fff1b8,
            #c89f3f
        );
}

.access-eyebrow{
    display:inline-block;

    color:#f6de89;

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

    letter-spacing:1.4px;

    text-transform:uppercase;

    margin-bottom:8px;
}

.access-modal-head h2{
    font-size:32px;

    line-height:1.15;

    margin-bottom:10px;

    font-weight:700;
}

.access-modal-head p{
    color:#9fa6b7;

    font-size:15px;

    line-height:1.6;
}


/* =========================================================
   ACCESS OPTION CARDS
========================================================= */

.access-option-grid{
    display:grid;

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

    gap:18px;
}

.access-option-card{
    min-height:210px;

    text-align:left;

    display:flex;
    gap:18px;

    padding:22px;

    border-radius:22px;

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

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

    color:#fff;

    font-family:'Outfit',sans-serif;

    cursor:pointer;

    transition:.28s ease;
}

.access-option-card:hover{
    transform:
        translateY(-4px);

    border-color:
        rgba(246,222,137,.38);

    background:
        rgba(246,222,137,.055);

    box-shadow:
        0 18px 40px rgba(0,0,0,.28),
        0 0 24px rgba(246,222,137,.10);
}

.access-option-icon{
    width:52px;
    height:52px;

    min-width:52px;

    border-radius:16px;

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

    font-size:21px;

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

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

.demo-icon{
    color:#27ffd0;

    border-color:
        rgba(39,255,208,.26);

    background:
        rgba(39,255,208,.08);
}

.subscription-icon{
    color:#f6de89;

    border-color:
        rgba(246,222,137,.26);

    background:
        rgba(246,222,137,.08);
}

.access-option-content{
    flex:1;
}

.access-option-title{
    display:flex;

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

    gap:10px;

    margin-bottom:12px;
}

.access-option-title span{
    font-size:20px;
    font-weight:700;
}

.access-option-title strong{
    font-size:11px;

    padding:6px 9px;

    border-radius:999px;

    color:#f6de89;

    background:
        rgba(246,222,137,.08);

    border:
        1px solid
        rgba(246,222,137,.16);
}

.access-option-content p{
    color:#9fa6b7;

    font-size:14px;

    line-height:1.55;

    margin-bottom:22px;
}

.access-option-link{
    color:#f6de89;

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

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


/* =========================================================
   REGISTRATION FORMS
========================================================= */

.access-form-grid{
    display:grid;

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

    gap:18px;
}

.access-form-group{
    min-width:0;
}

.access-form-group.full-field{
    grid-column:
        1 / -1;
}

.access-form-group label{
    display:block;

    margin-bottom:8px;

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

    color:#dcdcdc;
}

.access-input{
    height:54px;

    display:flex;
    align-items:center;

    gap:12px;

    padding:0 16px;

    border-radius:15px;

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

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

    transition:.25s ease;
}

.access-input:focus-within{
    border-color:
        rgba(246,222,137,.52);

    box-shadow:
        0 0 0 1px
        rgba(246,222,137,.12),
        0 0 20px
        rgba(246,222,137,.08);
}

.access-input i{
    color:#8d94a4;

    font-size:15px;
}

.access-input input{
    flex:1;

    min-width:0;

    border:none;
    outline:none;

    background:transparent;

    color:#fff;

    font-family:'Outfit',sans-serif;

    font-size:14px;
}

.access-input input::placeholder{
    color:#777f90;
}


/* =========================================================
   INFO STRIPS
========================================================= */

.trial-info-strip,
.manual-payment-note{
    margin-top:18px;

    display:flex;

    align-items:flex-start;

    gap:11px;

    padding:14px 16px;

    border-radius:15px;

    font-size:13px;

    line-height:1.5;
}

.trial-info-strip{
    color:#baf7e7;

    background:
        rgba(39,255,208,.06);

    border:
        1px solid
        rgba(39,255,208,.18);
}

.trial-info-strip i{
    color:#27ffd0;

    margin-top:2px;
}

.manual-payment-note{
    color:#d8cfae;

    background:
        rgba(246,222,137,.055);

    border:
        1px solid
        rgba(246,222,137,.16);
}

.manual-payment-note i{
    color:#f6de89;

    margin-top:2px;
}

.manual-payment-note div{
    display:flex;

    flex-direction:column;

    gap:3px;
}

.manual-payment-note strong{
    color:#f6de89;
}


/* =========================================================
   BILLING OPTIONS
========================================================= */

.access-billing-options{
    display:grid;

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

    gap:12px;
}

.billing-option{
    cursor:pointer;

    margin:0 !important;
}

.billing-option input{
    display:none;
}

.billing-option span{
    min-height:88px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:center;

    gap:4px;

    padding:15px;

    border-radius:15px;

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

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

    transition:.25s ease;
}

.billing-option i{
    color:#f6de89;

    margin-bottom:2px;
}

.billing-option strong{
    font-size:15px;
}

.billing-option small{
    color:#9097a8;

    font-size:12px;
}

.billing-option input:checked + span{
    border-color:
        rgba(246,222,137,.55);

    background:
        rgba(246,222,137,.08);

    box-shadow:
        0 0 0 1px
        rgba(246,222,137,.10);
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.access-submit-btn{
    width:100%;
    height:56px;

    margin-top:20px;

    border:none;

    border-radius:17px;

    background:
        linear-gradient(
            135deg,
            #f6de89,
            #d4ae4f
        );

    color:#111;

    font-family:'Outfit',sans-serif;

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

    cursor:pointer;

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

    gap:10px;

    transition:.25s ease;

    box-shadow:
        0 12px 28px
        rgba(246,222,137,.16);
}

.access-submit-btn:hover{
    transform:
        translateY(-2px);

    box-shadow:
        0 18px 38px
        rgba(246,222,137,.25);
}

.access-submit-btn:disabled{
    opacity:.55;

    cursor:not-allowed;

    transform:none;
}


/* =========================================================
   LIGHT MODE
========================================================= */

html[data-theme="light"] .access-popup{
    background:
        rgba(255,255,255,.72);
}

html[data-theme="light"] .access-modal{
    background:#fff;

    border-color:
        rgba(185,143,39,.34);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.12);
}

html[data-theme="light"] .access-modal h2,
html[data-theme="light"] .access-option-card,
html[data-theme="light"] .access-form-group label{
    color:#111;
}

html[data-theme="light"] .access-modal-head p,
html[data-theme="light"] .access-option-content p,
html[data-theme="light"] .billing-option small{
    color:#535353;
}

html[data-theme="light"] .access-option-card,
html[data-theme="light"] .access-input,
html[data-theme="light"] .billing-option span{
    background:#fff;

    border-color:
        rgba(185,143,39,.28);
}

html[data-theme="light"] .access-input input{
    color:#111;
}

html[data-theme="light"] .access-close{
    color:#111;

    background:#fff;

    border-color:
        rgba(185,143,39,.30);
}

html[data-theme="light"] .access-option-card:hover{
    background:
        rgba(246,222,137,.10);
}


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

@media(max-width:700px){

    .access-popup{
        padding:12px;
    }

    .access-modal{
        padding:
            26px 18px 20px;

        border-radius:22px;

        max-height:94vh;
    }

    .access-modal-head{
        padding:
            38px 10px 22px;
    }

    .access-modal-head h2{
        font-size:26px;
    }

    .access-option-grid,
    .access-form-grid,
    .access-billing-options{
        grid-template-columns:
            1fr;
    }

    .access-option-card{
        min-height:auto;
    }

    .access-form-group.full-field{
        grid-column:auto;
    }

}


/* =========================================================
   PAID SUBSCRIPTION FORM — GOLDEN VERTICAL SCROLLBAR ONLY
========================================================= */

html:not([data-theme="light"])
#subscriptionRegisterPopup .access-modal{
    scrollbar-width:thin;
    scrollbar-color:#d6b14f rgba(255,255,255,.04);
}


/* CHROME / EDGE */

html:not([data-theme="light"])
#subscriptionRegisterPopup .access-modal::-webkit-scrollbar{
    width:8px;
}


html:not([data-theme="light"])
#subscriptionRegisterPopup .access-modal::-webkit-scrollbar-track{
    background:rgba(255,255,255,.035);
    border-radius:999px;
}


html:not([data-theme="light"])
#subscriptionRegisterPopup .access-modal::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            180deg,
            #f6de89,
            #c99a2d
        );

    border-radius:999px;

    border:2px solid rgba(5,10,28,.92);
}


html:not([data-theme="light"])
#subscriptionRegisterPopup .access-modal::-webkit-scrollbar-thumb:hover{
    background:
        linear-gradient(
            180deg,
            #fff0ad,
            #d9ad3e
        );
}
/* =========================================================
   SUBSCRIPTION — TEMPORARILY LOCKED
========================================================= */
.access-option-card.subscription-locked-card,
.access-option-card.subscription-locked-card:disabled{
    cursor:not-allowed;
    opacity:.78;
    transform:none;
    border-color:rgba(246,222,137,.18);
    background:linear-gradient(135deg,rgba(246,222,137,.035),rgba(255,255,255,.018));
    box-shadow:none;
}
.access-option-card.subscription-locked-card:hover,
.access-option-card.subscription-locked-card:disabled:hover{
    transform:none;
    border-color:rgba(246,222,137,.18);
    background:linear-gradient(135deg,rgba(246,222,137,.035),rgba(255,255,255,.018));
    box-shadow:none;
}
.subscription-locked-card .subscription-icon{
    color:#f6de89;
    background:rgba(246,222,137,.07);
    border-color:rgba(246,222,137,.20);
}
.subscription-locked-card .coming-soon-badge{
    color:#f6de89;
    background:rgba(246,222,137,.08);
    border-color:rgba(246,222,137,.20);
}
.subscription-locked-card .access-option-content p{
    max-width:470px;
    line-height:1.6;
}
.subscription-locked-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#c9b873 !important;
}
.subscription-locked-link i{font-size:11px;}


/* =========================================================
   ADESYNC FIXED LOGIN BRANDING — v3.27
   Login/index page only.
   Tenant/company branding inside authenticated pages remains untouched.
========================================================= */

.adesync-login-brand .adesync-fixed-logo{
    width:72px;
    height:72px;
    padding:10px;
    border-radius:18px;
    background:
        linear-gradient(145deg, rgba(8,27,52,.98), rgba(3,14,30,.98));
    border:1px solid rgba(214,178,92,.70);
    box-shadow:
        0 12px 34px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(255,255,255,.04),
        0 0 24px rgba(214,178,92,.12);
}

.adesync-login-brand .adesync-fixed-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:0;
    filter:drop-shadow(0 5px 8px rgba(0,0,0,.32));
}

.adesync-login-brand-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.adesync-wordmark{
    margin:0;
    line-height:.94;
    font-size:34px !important;
    font-family:Inter, Poppins, "Segoe UI", sans-serif;
    font-weight:900;
    letter-spacing:-1.15px;
    text-transform:none;
    white-space:nowrap;
    text-shadow:0 5px 18px rgba(0,0,0,.22);
}

.adesync-wordmark-ade{
    color:#f7f9fc;
}

.adesync-wordmark-sync{
    color:#4da0ff;
}

body.light-mode .adesync-wordmark-ade,
body.light .adesync-wordmark-ade,
[data-theme="light"] .adesync-wordmark-ade{
    color:#071b3d;
}

body.light-mode .adesync-wordmark-sync,
body.light .adesync-wordmark-sync,
[data-theme="light"] .adesync-wordmark-sync{
    color:#1976d2;
}

/* Center wheel: fixed ADESYNC product identity, never tenant/company identity. */
.center-circle .adesync-wheel-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    overflow:hidden;
}

.adesync-wheel-logo{
    width:72px;
    height:48px;
    object-fit:contain;
    display:block;
    filter:drop-shadow(0 5px 8px rgba(0,0,0,.34));
}

.adesync-wheel-wordmark{
    display:block;
    font-family:Inter, Poppins, "Segoe UI", sans-serif;
    font-size:17px;
    line-height:1;
    font-weight:900;
    letter-spacing:.15px;
    white-space:nowrap;
    text-shadow:0 3px 12px rgba(0,0,0,.28);
}

/* The existing center-circle geometry remains unchanged. Only branding content changes. */
@media (max-width: 900px){
    .adesync-login-brand .adesync-fixed-logo{
        width:58px;
        height:58px;
        padding:8px;
        border-radius:15px;
    }

    .adesync-wordmark{
        font-size:28px !important;
    }

    .adesync-wheel-logo{
        width:62px;
        height:42px;
    }

    .adesync-wheel-wordmark{
        font-size:15px;
    }
}