*{box-sizing:border-box;}

:root{
    --bg:#03040b;
    --panel:rgba(10,14,34,0.78);
    --panel-strong:rgba(8,11,28,0.92);
    --cyan:#00eaff;
    --purple:#8f4dff;
    --pink:#ff2d75;
    --orange:#ff7a18;
    --red:#ff174f;
    --green:#45ff9a;
    --soft:#b8bed6;
    --white:#f7f9ff;
}

html{scroll-behavior:smooth;}

body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    color:white;
    overflow-x:hidden;
    background:#03040b;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-5;
    background:
        radial-gradient(circle at 8% 18%, rgba(0,234,255,0.19), transparent 28%),
        radial-gradient(circle at 92% 10%, rgba(255,45,117,0.23), transparent 30%),
        radial-gradient(circle at 52% 100%, rgba(255,122,24,0.13), transparent 38%),
        linear-gradient(180deg,#050711,#02030a 60%,#03040b);
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-4;
    pointer-events:none;
    background:
        linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:linear-gradient(to bottom, black, transparent 82%);
}

.bg-orbs{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-3;
    overflow:hidden;
}

.bg-orbs span{
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    filter:blur(78px);
    opacity:0.23;
    animation:orbFloat 12s infinite alternate ease-in-out;
}

.bg-orbs span:nth-child(1){left:-140px;top:140px;background:var(--cyan);}
.bg-orbs span:nth-child(2){right:-100px;top:60px;background:var(--pink);animation-delay:2s;}
.bg-orbs span:nth-child(3){left:45%;bottom:-190px;background:var(--orange);animation-delay:4s;}

@keyframes orbFloat{
    from{transform:translate3d(0,0,0) scale(1);}
    to{transform:translate3d(44px,-38px,0) scale(1.15);}
}

.page-shell{
    width:min(1480px, calc(100% - 28px));
    margin:18px auto 60px;
    border-radius:32px;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(6,8,21,0.92), rgba(3,4,11,0.98));
    border:1px solid rgba(255,255,255,0.09);
    box-shadow:
        0 45px 150px rgba(0,0,0,0.72),
        0 0 90px rgba(0,234,255,0.07),
        0 0 120px rgba(255,45,117,0.07);
}

nav{
    position:sticky;
    top:0;
    z-index:50;
    padding:18px 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    background:rgba(4,6,16,0.76);
    border-bottom:1px solid rgba(255,255,255,0.09);
    backdrop-filter:blur(20px);
}

.nav-logo{
    width:82px;
    filter:drop-shadow(0 0 18px rgba(0,234,255,0.55));
}

.nav-links{
    display:flex;
    align-items:center;
    gap:22px;
}

nav a{
    color:rgba(255,255,255,0.88);
    text-decoration:none;
    font-size:13px;
    font-weight:900;
    letter-spacing:0.2px;
    transition:0.25s ease;
}

nav a:hover{
    color:white;
    text-shadow:0 0 16px rgba(0,234,255,0.9);
}

.nav-active{
    color:white;
    position:relative;
}

.nav-active::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-12px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--cyan),var(--purple),var(--orange));
    box-shadow:0 0 18px rgba(0,234,255,0.75);
}

.nav-btn{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:14px 22px;
    border-radius:15px;
    border:1px solid rgba(255,255,255,0.18);
    background:linear-gradient(135deg,rgba(143,77,255,0.85),rgba(255,45,117,0.95),rgba(255,122,24,0.95));
    box-shadow:0 0 30px rgba(255,45,117,0.42);
    animation:ctaBreath 2.8s infinite ease-in-out;
}

.live-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--red);
    box-shadow:0 0 14px var(--red);
    animation:pulseDot 1.25s infinite ease-in-out;
}

@keyframes pulseDot{
    0%,100%{transform:scale(1);opacity:1;}
    50%{transform:scale(1.75);opacity:0.55;}
}

@keyframes ctaBreath{
    0%,100%{box-shadow:0 0 24px rgba(255,45,117,0.42),0 0 38px rgba(255,122,24,0.18);}
    50%{box-shadow:0 0 42px rgba(255,45,117,0.78),0 0 72px rgba(255,122,24,0.28);}
}

.hero{
    position:relative;
    min-height:540px;
    padding:74px 72px 66px;
    overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,0.08);
    background:
        radial-gradient(circle at 18% 54%, rgba(0,234,255,0.18), transparent 30%),
        radial-gradient(circle at 82% 24%, rgba(255,45,117,0.21), transparent 33%),
        linear-gradient(120deg, rgba(2,3,10,0.97), rgba(7,8,24,0.72) 52%, rgba(4,3,12,0.98));
}

.hero::before{
    content:"STAFF";
    position:absolute;
    right:34px;
    top:30px;
    font-size:136px;
    font-weight:950;
    letter-spacing:8px;
    color:rgba(255,45,117,0.08);
    transform:rotate(-3deg);
    pointer-events:none;
}

.hero::after{
    content:"";
    position:absolute;
    left:-4%;
    right:-4%;
    bottom:0;
    height:118px;
    opacity:0.38;
    background:
        repeating-linear-gradient(90deg,
        transparent 0 12px,
        rgba(0,234,255,0.95) 12px 16px,
        rgba(143,77,255,0.95) 16px 20px,
        rgba(255,45,117,0.95) 20px 24px,
        transparent 24px 34px);
    clip-path:polygon(0 82%,3% 32%,6% 72%,9% 22%,12% 82%,15% 38%,18% 74%,21% 26%,24% 88%,27% 42%,30% 70%,33% 30%,36% 84%,39% 24%,42% 76%,45% 40%,48% 92%,51% 26%,54% 74%,57% 38%,60% 86%,63% 28%,66% 72%,69% 44%,72% 90%,75% 18%,78% 76%,81% 36%,84% 84%,87% 28%,90% 72%,93% 46%,96% 86%,100% 30%,100% 100%,0 100%);
    filter:drop-shadow(0 0 22px rgba(0,234,255,0.8));
    animation:spectrumMove 7s infinite linear;
}

@keyframes spectrumMove{
    from{transform:translateX(0);}
    to{transform:translateX(-70px);}
}

.hero-inner{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:44px;
    align-items:center;
}

.status-pill,
.panel-badge{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:10px 14px;
    border-radius:10px;
    color:#eaf0ff;
    font-size:13px;
    font-weight:900;
    letter-spacing:0.8px;
    background:rgba(7,10,25,0.72);
    border:1px solid rgba(255,255,255,0.12);
    box-shadow:0 0 22px rgba(255,45,117,0.24), inset 0 0 20px rgba(255,255,255,0.04);
}

.panel-badge{
    color:#ffbf7d;
    margin-bottom:16px;
}

.hero h1{
    margin:20px 0 18px;
    font-size:clamp(58px, 6.3vw, 100px);
    line-height:0.92;
    letter-spacing:-4px;
    text-transform:uppercase;
    font-style:italic;
    text-shadow:0 0 34px rgba(255,255,255,0.16);
}

.hero h1 span{
    background:linear-gradient(90deg,#ffffff,#9bc0ff,#ff65db,#ff8a2a);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.hero p{
    margin:0;
    color:#d1d6ea;
    font-size:19px;
    line-height:1.65;
    max-width:700px;
}

.hero-panel{
    position:relative;
    padding:26px;
    border-radius:28px;
    background:rgba(8,11,28,0.74);
    border:1px solid rgba(255,255,255,0.13);
    box-shadow:0 28px 70px rgba(0,0,0,0.42), inset 0 0 48px rgba(255,255,255,0.035);
    backdrop-filter:blur(18px);
    overflow:hidden;
}

.hero-panel::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:28px;
    padding:1px;
    background:linear-gradient(135deg, rgba(0,234,255,0.35), transparent 35%, rgba(255,45,117,0.3), rgba(255,122,24,0.3));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}

.hero-panel h2{
    margin:0 0 14px;
    font-size:31px;
    line-height:1.1;
}

.hero-panel p{
    font-size:16px;
    color:var(--soft);
}

.hero-stats{
    margin-top:22px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.stat-box{
    padding:18px;
    border-radius:18px;
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.08);
}

.stat-box strong{
    display:block;
    font-size:30px;
    line-height:1;
}

.stat-box span{
    color:var(--soft);
    font-size:13px;
    font-weight:900;
}

.content{
    width:min(1320px, calc(100% - 40px));
    margin:34px auto 54px;
}

.login-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:26px;
    align-items:start;
}

#dashboardArea,
.dashboard-grid{
    display:none;
    grid-template-columns:360px 1fr;
    gap:26px;
    align-items:start;
}

.card{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    background:var(--panel);
    border:1px solid rgba(255,255,255,0.13);
    padding:30px;
    box-shadow:0 24px 70px rgba(0,0,0,0.38), inset 0 0 45px rgba(255,255,255,0.025);
    backdrop-filter:blur(18px);
}

.card::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("logo.png?v=2") center / 460px no-repeat;
    opacity:0.032;
    pointer-events:none;
}

.card::after{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:28px;
    padding:1px;
    background:linear-gradient(135deg, rgba(0,234,255,0.28), transparent 36%, rgba(255,45,117,0.22), rgba(255,122,24,0.22));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}

.card-content{
    position:relative;
    z-index:2;
}

.card h2{
    margin:0 0 14px;
    font-size:30px;
    text-transform:uppercase;
    letter-spacing:-0.8px;
}

.card p{
    color:var(--soft);
    line-height:1.65;
}

.form-stack{
    display:grid;
    gap:10px;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

input,select,textarea{
    width:100%;
    padding:16px;
    margin:8px 0;
    border-radius:15px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(0,0,0,0.28);
    color:white;
    outline:none;
    font-size:15px;
}

select option{
    background:#070a18;
    color:white;
}

textarea{
    min-height:130px;
    resize:vertical;
}

input:focus,select:focus,textarea:focus{
    border-color:rgba(0,234,255,0.7);
    box-shadow:0 0 18px rgba(0,234,255,0.18);
}

button{
    border:none;
    cursor:pointer;
    color:white;
    font-weight:950;
    padding:14px 20px;
    border-radius:14px;
    margin:7px 6px 7px 0;
    background:linear-gradient(135deg,var(--pink),var(--orange));
    box-shadow:0 0 24px rgba(255,45,117,0.35);
    transition:0.25s ease;
}

button:hover{
    transform:translateY(-3px);
}

.btn-danger{
    background:linear-gradient(135deg,#ff174f,#ff5a1f);
}

.btn-muted{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
    box-shadow:none;
}

.stat-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-bottom:26px;
}

.stat{
    padding:24px;
    border-radius:22px;
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.09);
    box-shadow:0 18px 48px rgba(0,0,0,0.25);
}

.stat strong{
    display:block;
    font-size:38px;
    line-height:1;
    margin-top:8px;
}

.stat span{
    color:var(--soft);
    font-size:13px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:0.7px;
}

.sidebar-card{
    position:sticky;
    top:100px;
}

.user-pill{
    display:inline-block;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(255,122,24,0.12);
    border:1px solid rgba(255,122,24,0.28);
    color:#ffbf7d;
    font-size:13px;
    font-weight:950;
    margin-bottom:16px;
}

.dashboard-head{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-start;
    margin-bottom:18px;
}

.dashboard-head h2{
    margin-top:8px;
}

.tabs{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:24px;
    padding:12px;
    border-radius:18px;
    background:rgba(255,255,255,0.035);
    border:1px solid rgba(255,255,255,0.08);
}

.tab-btn{
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.12);
    box-shadow:none;
    margin:0;
}

.tab-btn.active{
    background:linear-gradient(135deg,var(--purple),var(--pink));
    box-shadow:0 0 24px rgba(255,45,117,0.28);
}

.panel{display:none;}
.panel.active{display:block;}

.panel h2{
    margin:0 0 8px;
    font-size:27px;
    text-transform:uppercase;
}

.panel p{
    color:var(--soft);
    line-height:1.6;
}

.item{
    text-align:left;
    padding:20px;
    margin:14px 0;
    border-radius:20px;
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.09);
    transition:0.25s ease;
}

.item:hover{
    transform:translateY(-3px);
    border-color:rgba(143,77,255,0.5);
    box-shadow:0 18px 44px rgba(0,0,0,0.28);
}

.item strong{
    font-size:18px;
}

.meta{
    color:var(--soft);
    margin-top:8px;
    line-height:1.65;
    word-break:break-word;
}

.status{
    display:inline-block;
    padding:6px 11px;
    border-radius:999px;
    font-size:12px;
    font-weight:950;
    margin-top:10px;
    text-transform:uppercase;
}

.status-pending,.status-login-pending,.status-delete-pending,.status-waiting{
    background:#ffb357;
    color:#111;
}

.status-approved,.status-read,.status-online,.status-connected,.status-healthy,.status-clear{
    background:var(--cyan);
    color:#001114;
}

.status-rejected,.status-unread,.status-suspended,.status-failed,.status-attention{
    background:var(--red);
    color:white;
}

.status-resolved,.status-success{
    background:var(--green);
    color:#001114;
}

.status-processing{
    background:var(--purple);
    color:white;
}

#staffChatMessages,.chat-messages{
    max-height:420px;
    overflow-y:auto;
    padding-right:6px;
}

#staffChatMessages::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar{
    width:8px;
}

#staffChatMessages::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,0.18);
    border-radius:999px;
}

.chat-form{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    margin-top:16px;
}

.chat-form input{
    margin:7px 0;
}

.list-area{
    margin-top:14px;
}

footer{
    text-align:center;
    color:#8d93aa;
    padding:0 0 36px;
}

@media(max-width:1150px){
    .hero-inner,
    .login-grid,
    #dashboardArea,
    .dashboard-grid{
        grid-template-columns:1fr;
    }

    .sidebar-card{
        position:relative;
        top:auto;
    }
}

@media(max-width:950px){
    .page-shell{
        width:100%;
        margin:0;
        border-radius:0;
    }

    nav{
        flex-direction:column;
        align-items:flex-start;
    }

    .nav-links{
        justify-content:flex-start;
        flex-wrap:wrap;
        gap:14px;
    }

    .hero{
        padding:48px 24px 44px;
    }

    .hero::before{
        font-size:62px;
        right:12px;
    }

    .hero h1{
        font-size:45px;
        letter-spacing:-2px;
    }

    .content{
        width:min(100% - 28px,1320px);
    }

    .form-grid,
    .stat-grid,
    .hero-stats{
        grid-template-columns:1fr;
    }

    .dashboard-head{
        display:block;
    }

    .chat-form{
        display:block;
    }
}


/* =======================================================
   VAULT RADIO CINEMATIC STAFF DASHBOARD ENHANCEMENTS
======================================================= */

body{
    background:
        radial-gradient(circle at 14% 16%, rgba(255,45,189,.16), transparent 26%),
        radial-gradient(circle at 82% 18%, rgba(0,234,255,.14), transparent 28%),
        linear-gradient(180deg,#03040b,#050816 52%,#02030a) !important;
}

.page-shell{
    width:min(1650px, calc(100% - 24px)) !important;
    border-radius:36px !important;
    overflow:hidden;
}

nav{
    padding:22px 40px !important;
    min-height:100px;
    backdrop-filter:blur(26px) !important;
    background:rgba(4,6,18,.74) !important;
}

.nav-logo{
    width:94px !important;
}

.nav-links{
    gap:28px !important;
}

nav a{
    font-size:14px !important;
    text-transform:uppercase;
}

.hero{
    min-height:760px !important;
    padding:120px 70px 80px !important;
    background:
        linear-gradient(90deg, rgba(3,4,14,.94) 0%, rgba(3,4,14,.66) 42%, rgba(3,4,14,.32) 100%),
        url("background.png") center center / cover no-repeat !important;
}

.hero::before{
    font-size:clamp(100px,13vw,240px) !important;
    opacity:.11 !important;
}

.hero-inner{
    grid-template-columns:1fr 480px !important;
    gap:50px !important;
}

.hero h1{
    font-size:clamp(74px,8vw,150px) !important;
    line-height:.84 !important;
    letter-spacing:-5px !important;
}

.hero p{
    font-size:20px !important;
    max-width:760px;
}

.hero-panel{
    border-radius:32px !important;
    background:
        radial-gradient(circle at 22% 14%, rgba(255,45,189,.18), transparent 34%),
        linear-gradient(135deg, rgba(16,18,45,.92), rgba(7,9,24,.92)) !important;
    box-shadow:
        0 34px 90px rgba(0,0,0,.48),
        0 0 40px rgba(255,45,189,.08) !important;
}

.hero-panel h2{
    font-size:40px !important;
}

.hero-stats{
    gap:18px !important;
}

.stat-box{
    border-radius:22px !important;
    padding:24px !important;
}

.content{
    width:min(1450px, calc(100% - 42px)) !important;
    margin-top:-70px !important;
    position:relative;
    z-index:10;
}

.login-grid{
    gap:32px !important;
}

.card{
    border-radius:32px !important;
    background:
        linear-gradient(135deg, rgba(13,16,40,.92), rgba(6,8,22,.92)) !important;
    box-shadow:
        0 34px 90px rgba(0,0,0,.42),
        0 0 38px rgba(255,45,189,.06) !important;
}

.card-content{
    padding:12px;
}

.card h2{
    font-size:42px !important;
    margin-bottom:14px;
}

input,
select,
textarea{
    border-radius:18px !important;
    padding:18px !important;
    font-size:15px !important;
    background:rgba(255,255,255,.05) !important;
}

textarea{
    min-height:160px !important;
}

button{
    border-radius:18px !important;
    padding:18px 24px !important;
    text-transform:uppercase;
    letter-spacing:.5px;
    background:
        linear-gradient(135deg,#ff2dbd,#8f4dff,#3478ff) !important;
}

button:hover{
    transform:translateY(-5px) scale(1.01);
}

.stat-grid{
    gap:22px !important;
}

.stat{
    border-radius:28px !important;
    padding:30px !important;
    background:
        linear-gradient(135deg, rgba(255,45,189,.14), rgba(52,120,255,.10));
}

.stat strong{
    font-size:52px !important;
}

.tabs{
    border-radius:24px !important;
    padding:14px !important;
}

.tab-btn{
    border-radius:14px !important;
}

.item{
    border-radius:24px !important;
    padding:24px !important;
}

.item:hover{
    transform:translateY(-5px) scale(1.01);
}

.chat-messages{
    border-radius:24px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    padding:18px;
}

footer{
    padding:20px 0 60px !important;
    font-size:14px;
    letter-spacing:1px;
}

@media(max-width:1200px){

.hero{
    min-height:auto !important;
    padding:100px 28px 70px !important;
}

.hero-inner{
    grid-template-columns:1fr !important;
}

.content{
    margin-top:30px !important;
    width:calc(100% - 28px) !important;
}

.hero h1{
    font-size:72px !important;
}

.card h2{
    font-size:34px !important;
}
}

@media(max-width:760px){

.hero h1{
    font-size:54px !important;
    letter-spacing:-2px !important;
}

.hero-panel h2{
    font-size:30px !important;
}

.nav-links{
    gap:14px !important;
}

.tabs{
    display:grid !important;
    grid-template-columns:1fr !important;
}

.stat-grid{
    grid-template-columns:1fr !important;
}
}