/* =====================================================
   CYBER QUEST
   Global Style Sheet
   Theme: Professional Cyber Learning Platform
===================================================== */

/* ==========================
   GOOGLE FONT
========================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800&display=swap');


/* ==========================
   RESET
========================== */

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#050816;

    color:#ffffff;

    min-height:100vh;

    line-height:1.6;

    overflow-x:hidden;

}


/* ==========================
   GLOBAL VARIABLES
========================== */

:root{

    --background:#050816;

    --surface:#101827;

    --surface-light:#172036;

    --primary:#00E5FF;

    --primary-hover:#31EEFF;

    --border:rgba(0,229,255,.15);

    --text:#ffffff;

    --muted:#94A3B8;

    --danger:#EF4444;

    --success:#22C55E;

    --radius:16px;

    --shadow:

        0 15px 35px rgba(0,0,0,.35);

}


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

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

    linear-gradient(

        rgba(0,229,255,.05) 1px,

        transparent 1px

    ),

    linear-gradient(

        90deg,

        rgba(0,229,255,.05) 1px,

        transparent 1px

    );

    background-size:50px 50px;

    z-index:-2;

}


/* ==========================
   RADIAL GLOW
========================== */

body::after{

    content:"";

    position:fixed;

    top:-300px;

    left:50%;

    transform:translateX(-50%);

    width:900px;

    height:900px;

    background:

    radial-gradient(

        circle,

        rgba(0,229,255,.08),

        transparent 70%

    );

    z-index:-3;

}


/* ==========================
   CONTAINERS
========================== */

.container{

    width:92%;

    max-width:1400px;

    margin:auto;

}

.section{

    padding:70px 0;

}


/* ==========================
   TYPOGRAPHY
========================== */

h1{

    font-size:48px;

    font-weight:700;

    margin-bottom:15px;

}

h2{

    font-size:34px;

    font-weight:700;

    margin-bottom:15px;

}

h3{

    font-size:24px;

    font-weight:600;

}

p{

    color:var(--muted);

    line-height:1.8;

}

a{

    color:inherit;

    text-decoration:none;

}

img{

    max-width:100%;

    display:block;

}


/* ==========================
   GLOBAL CARD
========================== */

.card{

    background:linear-gradient(

        180deg,

        var(--surface),

        #0F172A

    );

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

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:35px;

}


/* =====================================================
   GLOBAL BUTTON
===================================================== */

button{

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

    width:100%;

    height:52px;

    background:linear-gradient(135deg,#00E5FF,#00B8D9);

    color:#05101B;

    border:none;

    border-radius:12px;

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

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

button:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(0,229,255,.35);

}

button:active{

    transform:scale(.98);

}


/* ==========================
   GLOBAL FORMS
========================== */

input,
select,
textarea{

    width:100%;

    padding:14px 16px;

    background:#0A1020;

    color:white;

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

    border-radius:10px;

    outline:none;

    transition:.3s;

    font-family:inherit;

}

input:focus,
select:focus,
textarea:focus{

    border-color:var(--primary);

    box-shadow:

    0 0 12px rgba(0,229,255,.15);

}

input::placeholder{

    color:var(--muted);

}


/* ==========================
   GLOBAL TABLE
========================== */

table{

    width:100%;

    border-collapse:collapse;

}

/* =====================================================
   NAVBAR
===================================================== */

.navbar{

    position:sticky;

    top:0;

    z-index:999;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 60px;

    background:rgba(10,15,28,.88);

    backdrop-filter:blur(14px);

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

}

.logo{

    font-size:30px;

    font-weight:800;

    letter-spacing:2px;

    color:white;

}

.logo span{

    color:var(--primary);

}

.nav-links{

    display:flex;

    align-items:center;

    gap:35px;

    list-style:none;

}

.nav-links li{

    list-style:none;

}

.nav-links a{

    color:white;

    font-weight:500;

    transition:.3s;

    position:relative;

}

.nav-links a:hover{

    color:var(--primary);

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

}

.nav-links a:hover::after{

    width:100%;

}


/* =====================================================
   HERO SECTION
===================================================== */

.hero{

    min-height:85vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    flex-direction:column;

    padding:40px;

}

.hero h1{

    font-size:64px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:20px;

}

.hero h1 span{

    color:var(--primary);

}

.hero p{

    max-width:760px;

    font-size:18px;

    margin-bottom:35px;

}


/* =====================================================
   LOGIN / REGISTER CARD
===================================================== */

.card{

    width:100%;

    max-width:450px;

    margin:70px auto;

}

.card h2{

    text-align:center;

    color:var(--primary);

    margin-bottom:30px;

}

.card h3{

    color:white;

    margin-top:20px;

    margin-bottom:10px;

}

.card p{

    margin-bottom:18px;

}

.card button{

    width:100%;

}

.account-text{

    text-align:center;

    margin-top:25px;

    font-size:14px;

    color:var(--muted);

}

.account-text a{

    color:var(--primary);

    font-weight:700;

}

.account-text a:hover{

    text-decoration:underline;

}


/* =====================================================
   BUTTON HELPERS
===================================================== */

.mission-start-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:25px;

}

.result-button{

    margin-top:35px;

    text-align:center;

}


/* =====================================================
   FOOTER
===================================================== */

footer{

    margin-top:70px;

    padding:30px;

    text-align:center;

    color:var(--muted);

    border-top:1px solid rgba(255,255,255,.05);

}


/* =====================================================
   UTILITY CLASSES
===================================================== */

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.mt-10{

    margin-top:10px;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mt-40{

    margin-top:40px;

}

.mb-10{

    margin-bottom:10px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-30{

    margin-bottom:30px;

}

.mb-40{

    margin-bottom:40px;

}

.hidden{

    display:none;

}


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

@media(max-width:992px){

    .navbar{

        padding:18px 30px;

    }

    .hero h1{

        font-size:48px;

    }

}

@media(max-width:768px){

    .navbar{

        flex-direction:column;

        gap:18px;

    }

    .nav-links{

        flex-wrap:wrap;

        justify-content:center;

        gap:20px;

    }

    .hero{

        min-height:70vh;

        padding:30px;

    }

    .hero h1{

        font-size:40px;

    }

    .hero p{

        font-size:16px;

    }

    .card{

        width:95%;

        margin:40px auto;

    }

}

@media(max-width:500px){

    h1{

        font-size:34px;

    }

    h2{

        font-size:28px;

    }

    .hero h1{

        font-size:34px;

    }

    .btn{

        width:100%;

    }

}

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

.card button{

    width:100%;

    margin-top:10px;

    background:linear-gradient(135deg,#00E5FF,#00B8D9);

    color:#05101B;

    border:none;

    border-radius:12px;

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

    font-size:16px;

    font-weight:700;

}
/* =====================================================
   CYBERQUEST UX POLISH LAYER
   Consistent navigation, accessibility and visual rhythm
===================================================== */
:root{
    --cq-panel:rgba(15,23,42,.86);
    --cq-panel-2:rgba(19,28,46,.92);
    --cq-line:rgba(148,163,184,.16);
    --cq-glow:0 18px 55px rgba(0,229,255,.10);
    --cq-soft-shadow:0 18px 48px rgba(0,0,0,.28);
}
body{background-attachment:fixed;}
button,input,select,textarea{font:inherit;}
button,a,input,select,textarea{outline:none;}
:focus-visible{outline:3px solid rgba(0,229,255,.72);outline-offset:3px;}
::selection{background:rgba(0,229,255,.26);color:#fff;}

.cq-navbar{
    position:sticky;top:0;z-index:1000;
    min-height:76px;padding:0 4%;
    background:rgba(5,8,22,.88)!important;
    border-bottom:1px solid rgba(0,229,255,.14);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    box-shadow:0 10px 35px rgba(0,0,0,.18);
}
.nav-brand-wrap{display:flex;align-items:center;gap:14px;min-width:max-content;}
.cq-logo{font-weight:800;letter-spacing:1.5px;display:flex;align-items:center;gap:7px;}
.cq-logo span{color:var(--primary);}
.nav-back-button{
    display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;
    border:1px solid rgba(0,229,255,.18);border-radius:11px;
    background:rgba(15,23,42,.74);color:#dcecff;cursor:pointer;
    transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.nav-back-button:hover{transform:translateX(-2px);border-color:rgba(0,229,255,.55);background:rgba(0,229,255,.09);}
.nav-links{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.nav-links a{position:relative;padding:10px 12px!important;border-radius:10px;color:#b7c7dc!important;transition:.2s ease;}
.nav-links a:hover,.nav-links a.active{color:#fff!important;background:rgba(0,229,255,.08);}
.nav-links a.active::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:10px;background:var(--primary);box-shadow:0 0 10px var(--primary);}
.nav-links .nav-logout{color:#fca5a5!important;}
.nav-links .nav-logout:hover{background:rgba(239,68,68,.10);}

.page-nav-actions{display:flex;align-items:center;gap:10px;margin:0 0 22px;}
.context-back{
    min-height:42px;padding:0 14px;border-radius:11px;border:1px solid rgba(148,163,184,.18);
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    background:rgba(15,23,42,.72);color:#dcecff;cursor:pointer;text-decoration:none;
    transition:.2s ease;
}
.context-back:hover{border-color:rgba(0,229,255,.45);background:rgba(0,229,255,.08);transform:translateY(-1px);}


.eyebrow{display:block;margin-bottom:8px;color:#67e8f9;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;}
.count-chip{display:inline-flex;align-items:center;min-height:34px;padding:0 11px;border-radius:999px;background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.18);color:#a5f3fc;font-size:12px;}
.info-banner{display:flex;align-items:flex-start;gap:18px;padding:22px 24px;border:1px solid rgba(0,229,255,.16);border-radius:16px;background:linear-gradient(135deg,rgba(0,229,255,.06),rgba(15,23,42,.74));box-shadow:var(--cq-soft-shadow);}
.info-banner strong{color:#e8fbff;min-width:max-content}.info-banner span{color:#9fb0c5;line-height:1.7;}

@media(max-width:960px){
    .cq-navbar{align-items:flex-start!important;padding-top:13px;padding-bottom:13px;gap:12px;}
    .nav-links{justify-content:flex-start;}
    .nav-back-button span{display:none;}
}
@media(max-width:640px){
    .cq-navbar{position:relative;}
    .nav-brand-wrap{width:100%;justify-content:space-between;}
    .nav-links{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;}
    .page-nav-actions{flex-wrap:wrap;}
    .info-banner{flex-direction:column;gap:8px;}
}

/* =====================================================
   CYBERQUEST UX SYSTEM V2
   One navigation model, clearer hierarchy, better touch UX
===================================================== */
:root{
    --cq-bg:#050816;
    --cq-surface:rgba(12,20,36,.92);
    --cq-surface-raised:rgba(17,27,47,.96);
    --cq-border:rgba(148,163,184,.14);
    --cq-border-strong:rgba(0,229,255,.30);
    --cq-text:#f8fbff;
    --cq-muted:#93a4bd;
    --cq-cyan:#00e5ff;
    --cq-cyan-soft:#67e8f9;
    --cq-radius:18px;
    --cq-shadow:0 18px 52px rgba(0,0,0,.28);
    --cq-focus:0 0 0 4px rgba(0,229,255,.13);
}

html{scroll-behavior:smooth;}
body{min-height:100vh;line-height:1.55;}
a,button,input,select,textarea{-webkit-tap-highlight-color:transparent;}
a,button{touch-action:manipulation;}
button:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed;}

.cq-navbar{
    position:sticky!important;
    top:0;
    z-index:1000;
    min-height:78px;
    width:100%;
    padding:0 clamp(18px,4vw,68px)!important;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    background:rgba(4,8,21,.92)!important;
    border-bottom:1px solid rgba(0,229,255,.13)!important;
    box-shadow:0 10px 32px rgba(0,0,0,.20)!important;
    backdrop-filter:blur(18px) saturate(125%);
    -webkit-backdrop-filter:blur(18px) saturate(125%);
}
.nav-left-cluster{display:flex;align-items:center;gap:16px;min-width:max-content;}
.cq-logo{white-space:nowrap;text-decoration:none!important;}
.nav-back-button{
    min-width:88px;
    min-height:42px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid rgba(148,163,184,.18);
    border-radius:12px;
    background:rgba(15,23,42,.76);
    color:#dce8f6;
    font-weight:700;
    cursor:pointer;
    box-shadow:none;
    transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.nav-back-icon{font-size:18px;line-height:1;transition:transform .18s ease;}
.nav-back-button:hover{background:rgba(0,229,255,.08);border-color:rgba(0,229,255,.38);color:#fff;transform:none;}
.nav-back-button:hover .nav-back-icon{transform:translateX(-3px);}

.nav-links{gap:4px!important;}
.nav-links a{
    min-height:42px;
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    padding:0 13px!important;
    border-radius:11px!important;
    font-size:13px;
    font-weight:650;
    letter-spacing:.1px;
}
.nav-links a.active{background:rgba(0,229,255,.085)!important;color:#fff!important;}
.nav-links a.active::after{left:13px!important;right:13px!important;bottom:5px!important;height:2px!important;}
.nav-links .nav-logout{margin-left:5px;}

/* Inputs and controls: predictable 44px+ targets */
input:not([type="checkbox"]):not([type="radio"]),select,button,.btn{
    min-height:44px;
}
input,select,textarea{caret-color:var(--cq-cyan);}
:focus-visible{outline:none!important;box-shadow:var(--cq-focus)!important;border-color:rgba(0,229,255,.65)!important;}

/* Avoid excessive motion for accessibility */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

@media(max-width:1040px){
    .cq-navbar{align-items:flex-start;flex-direction:column;padding-top:12px!important;padding-bottom:12px!important;gap:10px;}
    .nav-left-cluster{width:100%;}
    .nav-links{width:100%;overflow-x:auto;flex-wrap:nowrap!important;padding:0 0 4px;scrollbar-width:thin;}
    .nav-links li{flex:0 0 auto;}
}
@media(max-width:600px){
    .cq-navbar{position:sticky!important;padding-left:14px!important;padding-right:14px!important;}
    .nav-left-cluster{gap:10px;}
    .nav-back-button{min-width:44px;width:44px;padding:0;}
    .nav-back-button span:not(.nav-back-icon){display:none;}
    .cq-logo{font-size:20px!important;}
    .admin-nav-badge{display:none!important;}
    .nav-links a{font-size:12px;padding:0 11px!important;}
}