:root{
    --bg1:#3b0a76;
    --bg2:#1a49ff;
    --panel:rgba(255,255,255,.12);
    --panel2:rgba(255,255,255,.18);
    --text:#ffffff;
    --muted:rgba(255,255,255,.75);
    --border:rgba(255,255,255,.20);
    --shadow: 0 18px 40px rgba(0,0,0,.35);
    --radius: 22px;

    --red:#ff3355;
    --blue:#2d7dff;
    --yellow:#ffcc00;
    --green:#3ddc84;

    --btn:#ffffff;
    --btnText:#101828;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:
            radial-gradient(900px 500px at 15% 15%, rgba(255,255,255,.20), transparent 60%),
            radial-gradient(900px 500px at 85% 20%, rgba(255,255,255,.15), transparent 55%),
            radial-gradient(800px 500px at 50% 110%, rgba(255,255,255,.18), transparent 55%),
            linear-gradient(135deg, var(--bg1), var(--bg2));
}

a{color:inherit;text-decoration:none}

.is-hidden{ display:none !important; }

.layout{
    min-height:100%;
    display:grid;
    grid-template-columns: 280px 1fr;
}

.sidebar{
    position:sticky; top:0;
    height:100vh;
    padding:18px 16px;
    background: rgba(0,0,0,.25);
    border-right:1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
}

.brand{
    display:flex; gap:12px; align-items:center;
    padding:12px;
    border:1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.10);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.logo{
    width:44px; height:44px;
    border-radius: 14px;
    display:grid; place-items:center;
    font-weight:900;
    background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.70));
    color:#5b21b6;
    box-shadow: 0 12px 25px rgba(0,0,0,.25);
}

.brand h1{font-size:15px; line-height:1.2}
.brand p{font-size:12px; color:var(--muted); margin-top:2px}

.nav{ margin-top:14px; display:flex; flex-direction:column; gap:8px }
.nav a{
    padding:10px 12px;
    border-radius: 14px;
    border:1px solid transparent;
    color: var(--muted);
    background: transparent;
    transition:.15s;
}
.nav a:hover{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.14);
    color: var(--text);
}
.nav a.active{
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.18);
    color:#fff;
    font-weight:700;
}
.nav small{
    display:block;
    margin-top:14px;
    padding:0 12px;
    font-size:12px;
    color: rgba(255,255,255,.65);
}


.main{
    padding: 28px;
    padding-bottom: 90px;
}

.container{ max-width: 1050px; margin: 0 auto; }

.card{
    background: rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.16);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    backdrop-filter: blur(10px);
}

h2{
    font-size: 26px;
    margin-bottom: 10px;
    letter-spacing: .2px;
}
p{
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 12px;
}

.grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
}
@media (max-width: 900px){
    .layout{ grid-template-columns: 1fr; }
    .sidebar{ position:relative; height:auto; }
    .grid{ grid-template-columns: 1fr; }
}


.btnrow{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }

.btn, button{
    border:0;
    border-radius: 16px;
    padding: 11px 14px;
    font-weight: 800;
    cursor:pointer;
    background: rgba(255,255,255,.90);
    color: #111827;
    box-shadow: 0 14px 26px rgba(0,0,0,.25);
    transition: transform .12s, filter .12s;
}
.btn:hover, button:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.btn:active, button:active{ transform: translateY(0px) scale(.98); }

.btn-primary{
    background: linear-gradient(135deg, rgba(255,255,255,1), rgba(255,255,255,.82));
}
.btn-danger{
    background: linear-gradient(135deg, rgba(255,80,80,1), rgba(255,80,80,.82));
    color: #fff;
}


.question{
    margin-top: 14px;
    border-radius: 24px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.16);
    padding: 16px;
}

.qtitle{
    display:flex;
    justify-content: space-between;
    gap:12px;
    align-items:flex-start;
    margin-bottom: 12px;
}
.qtitle h3{
    font-size: 18px;
}
.qmeta{
    font-size: 12px;
    color: rgba(255,255,255,.70);
}

.answers{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}


label.choice{
    position:relative;
    border: 0;
    border-radius: 20px;
    padding: 16px 16px 16px 56px;
    cursor:pointer;
    color: #fff;
    box-shadow: 0 16px 30px rgba(0,0,0,.25);
    overflow:hidden;
    transition: transform .12s, filter .12s;
    min-height: 72px;
    display:flex;
    align-items:center;
    font-weight: 800;
    line-height:1.25;
}


label.choice input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

label.choice::before{
    content: attr(data-opt);
    position:absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: #111827;
    display:grid; place-items:center;
    font-weight: 900;
    box-shadow: 0 10px 18px rgba(0,0,0,.22);
}

label.choice::after{
    content:"";
    position:absolute;
    inset:-40px -40px auto auto;
    width:120px;
    height:120px;
    background: rgba(255,255,255,.22);
    transform: rotate(25deg);
    border-radius: 30px;
    filter: blur(1px);
}


.answers label.choice:nth-child(1){ background: linear-gradient(135deg, var(--red), #ff5570); }
.answers label.choice:nth-child(2){ background: linear-gradient(135deg, var(--blue), #5a9bff); }
.answers label.choice:nth-child(3){ background: linear-gradient(135deg, var(--yellow), #ffd95c); color:#2b2b2b; }
.answers label.choice:nth-child(3)::before{ color:#2b2b2b; }
.answers label.choice:nth-child(4){ background: linear-gradient(135deg, var(--green), #69e7a8); color:#0f2a1d; }
.answers label.choice:nth-child(4)::before{ color:#0f2a1d; }

label.choice:hover{
    transform: translateY(-2px);
    filter: brightness(1.02);
}


label.choice:has(input:checked){
    outline: 4px solid rgba(255,255,255,.70);
    transform: translateY(-1px);
}


@media (max-width: 700px){
    .answers{ grid-template-columns: 1fr; }
}


.canvaswrap{
    display:grid;
    grid-template-columns: 1fr 340px;
    gap: 14px;
}
@media (max-width: 900px){
    .canvaswrap{ grid-template-columns: 1fr; }
}

.canvasbox{
    padding: 14px;
    border-radius: 22px;
    border:1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.08);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}

.badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.85);
    font-size: 12px;
}

.hr{
    height: 1px;
    margin: 18px 0;
    background: rgba(255,255,255,.12);
}

.empty-state{
    color: rgba(255,255,255,.82);
    padding: 12px 0;
}

.admin-layout{
    display:grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
    align-items:start;
}

.admin-users-panel,
.admin-report-panel{
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.08);
}

.admin-panel-title{
    font-size: 15px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 12px;
}

.admin-users-list{
    display:flex;
    flex-direction:column;
    gap: 10px;
}

.admin-user-card{
    width:100%;
    text-align:left;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.18);
    color: #fff;
    box-shadow: none;
}

.admin-user-card.active{
    outline: 3px solid rgba(255,255,255,.34);
    background: rgba(255,255,255,.16);
}

.admin-user-card small{
    display:block;
    margin-top: 6px;
    color: rgba(255,255,255,.72);
    font-weight: 600;
}

.admin-summary-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.admin-summary-card{
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
}

.admin-summary-card strong{
    display:block;
    font-size: 26px;
    color:#fff;
    margin-top: 4px;
}

.admin-summary-card span{
    font-size:12px;
    color: rgba(255,255,255,.72);
}

.admin-report-header{
    margin-bottom: 14px;
}

@media (max-width: 900px){
    .admin-layout{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px){
    .admin-summary-grid{
        grid-template-columns: 1fr;
    }
}

.table{
    width:100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 18px;
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.18);
}
.table th, .table td{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.82);
    font-size: 14px;
}
.table th{
    background: rgba(255,255,255,.10);
    color: #fff;
    font-weight: 900;
}
.table tr:last-child td{ border-bottom:none; }

.footerbar{
    position: fixed;
    bottom: 0;
    left: 280px;
    right: 0;
    padding: 10px 14px;
    background: rgba(0,0,0,.35);
    border-top: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
    display:flex;
    justify-content: space-between;
    align-items:center;
}
@media (max-width: 900px){
    .footerbar{ left:0; }
}

.support-link{
    opacity: .28;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px dashed rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    transition: .15s;
}
.support-link:hover{ opacity:.7; }
.form-card{
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    padding: 18px;
    backdrop-filter: blur(10px);
}

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

@media (max-width: 700px){
    .form-grid{ grid-template-columns: 1fr; }
}

.field{
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;
    padding: 12px;
}

.field label{
    display:block;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .2px;
    color: rgba(255,255,255,.85);
    margin-bottom: 8px;
}

.field input, .field select{
    width: 100%;
    border: 0;
    outline: none;
    border-radius: 14px;
    padding: 12px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 18px rgba(0,0,0,.18);
}

.field input::placeholder{
    color: rgba(17,24,39,.55);
    font-weight: 600;
}


.form-actions{
    margin-top: 14px;
    display:flex;
    gap:10px;
    flex-wrap: wrap;
}

#certificateArea{
    margin-top: 12px;
}

.certificate{
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 30px;
    border: 1px solid rgba(255,255,255,.18);
    background:
        radial-gradient(500px 220px at 10% 10%, rgba(255,255,255,.20), transparent 60%),
        radial-gradient(420px 240px at 90% 20%, rgba(255,255,255,.12), transparent 60%),
        linear-gradient(135deg, rgba(26,73,255,.92), rgba(59,10,118,.86));
    box-shadow: var(--shadow);
}

.certificate::before{
    content:"";
    position:absolute;
    inset:18px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 22px;
    pointer-events:none;
}

.certificate__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.88);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.certificate h3{
    margin-top: 18px;
    font-size: 30px;
    line-height: 1.2;
}

.certificate__subtitle{
    margin-top: 12px;
    margin-bottom: 4px;
    color: rgba(255,255,255,.72);
}

.certificate__issued-by{
    margin-top: 10px;
    margin-bottom: 0;
    color: rgba(255,255,255,.88);
    font-weight: 700;
}

.certificate__name{
    font-size: 34px;
    font-weight: 900;
    letter-spacing: .4px;
    color: #fff;
}

.certificate__details{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top: 14px;
}

.certificate__details span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.88);
    font-size: 13px;
}

.certificate__score{
    display:flex;
    align-items:end;
    gap:14px;
    margin-top: 22px;
}

.certificate__score strong{
    font-size: 72px;
    line-height: .95;
    color: #fff;
}

.certificate__score span{
    font-size: 18px;
    font-weight: 700;
    color: rgba(255,255,255,.84);
    padding-bottom: 10px;
}

.certificate__stats{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
    margin-top: 22px;
}

.certificate__stats div{
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.88);
    font-weight: 600;
}

.certificate__footer{
    margin-top: 24px;
    display:flex;
    justify-content: space-between;
    gap:12px;
    font-size: 13px;
    color: rgba(255,255,255,.78);
}

.certificate--empty{
    min-height: 220px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

@media (max-width: 700px){
    .certificate{
        padding: 22px;
    }

    .certificate h3{
        font-size: 24px;
    }

    .certificate__name{
        font-size: 28px;
    }

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

    .certificate__score strong{
        font-size: 56px;
    }

    .certificate__stats{
        grid-template-columns: 1fr;
    }

    .certificate__footer{
        flex-direction:column;
    }
}