:root{
    --bg:#0f1724;
    --card:#0b1220;
    --muted:#9aa4b2;
    --accent:#06b6d4; /* cyan */
    --accent-2:#7c3aed; /* purple */
    --success:#16a34a;
    --danger:#ef4444;
    --warn:#f59e0b;
    --glass: rgba(255,255,255,0.03);
    --radius:12px;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body,#app{height:100%}
body{
    margin:0;
    background: linear-gradient(180deg, #071226 0%, #071b2b 100%);
    color:#e6eef6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* TOPBAR */
.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 18px;
    border-bottom:1px solid rgba(255,255,255,0.03);
    backdrop-filter: blur(6px);
}
.brand{font-weight:600}
.timer{
    background: linear-gradient(90deg,var(--accent),var(--accent-2));
    padding:6px 10px;border-radius:8px;font-weight:600;
    box-shadow: 0 6px 18px rgba(7, 18, 36, 0.5);
}

/* MAIN */
.main{padding:18px; max-width:1100px;margin:0 auto; padding-bottom: 100px; }
.page{display:none}
.page.active{display:block}

.card{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:var(--radius);
    padding:16px;
    box-shadow: 0 6px 20px rgba(2,6,23,0.6);
}

/* QUIZ LAYOUT */
.quiz-wrap{
    display:flex;gap:16px;
    align-items:flex-start;
    margin-top:12px;
}
.quiz-left{
    flex:1;
    min-width:280px;
    background:var(--glass);
    border-radius:12px;
    padding:16px;
}
.quiz-right{
    width:320px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

/* Question header */
.question-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.question-number-shape{display:flex;align-items:center;gap:12px}
.qnum{
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    width:64px;height:64px;border-radius:16px;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;
    box-shadow:0 8px 26px rgba(7,18,36,0.5);
}
.qtype{opacity:0.9;font-weight:600;color:var(--muted)}

/* Question area */
.question-area{min-height:220px;padding:12px;border-radius:8px;background:rgba(255,255,255,0.02)}
.question-text{font-size:16px;margin-bottom:12px}
.choices{display:flex;flex-direction:column;gap:12px}
.choice{
    display:flex;align-items:center;gap:16px;padding:12px 16px;border-radius:12px;border:2px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.02);cursor:pointer;user-select:none;
    transition:all 0.25s ease-in-out;position:relative;
}
.choice:hover{
    transform:translateY(-2px);background:rgba(255,255,255,0.05);border-color:var(--accent);
}
.choice.selected{
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.2), rgba(124, 58, 237, 0.1));
    border-color: var(--accent-2);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

.choice input{position:absolute;opacity:0;width:0;height:0;}

.choice .custom-check{
    width:24px;height:24px;border-radius:6px;border:2px solid var(--muted);
    background-color:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;
    transition:all 0.2s ease;flex-shrink:0;
}
.choice .custom-check.radio{border-radius:50%;}
.choice.selected .custom-check{
    border-color:var(--accent);background-color:var(--accent-2);
}
.choice.selected .custom-check:after{
    content:'✓';color:white;font-size:16px;font-weight:700;
}
.choice-text{
    flex:1;font-size:16px;line-height:1.5;
}
.choice-text strong{
    color:var(--accent);margin-right:8px;font-weight:700;
}

/* Category choices */
.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 10px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.03);
}
.category-statement {flex: 1;color: #e6eef6;}
.category-options {display: flex;gap: 8px;}
.category-btn {
    padding: 8px 12px;border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;border-radius: 8px;cursor: pointer;
    color: var(--muted);font-weight: 600;transition: all 0.2s ease-in-out;
}
.category-btn.selected {
    background: linear-gradient(90deg, rgba(6,182,212,0.2), rgba(124,58,237,0.1));
    border-color: var(--accent-2);color: white;
}
.category-btn:hover:not(.selected) {
    background: rgba(255, 255, 255, 0.05);border-color: var(--accent);
}

/* controls */
.controls{
    display:flex;gap:8px;margin-top:12px;
}
.ml-auto{
    margin-left: auto;
}
.btn{
    padding:10px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:600;
    transition: all .22s ease-in-out;
}
.btn:hover{
    transform: translateY(-2px);box-shadow: 0 4px 10px rgba(2,6,23,0.6);
}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#042028}
.btn.warn{background:var(--warn);color:#0b0a05}
.btn.danger{background:var(--danger);color:white}

/* nav-grid */
.nav-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px;background:var(--glass);border-radius:10px;
}
.nav-item{
    padding:10px;border-radius:8px;text-align:center;font-weight:700;cursor:pointer;border:1px solid rgba(255,255,255,0.03);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.nav-item:hover{
    transform: scale(1.1);box-shadow: 0 4px 10px rgba(2, 6, 23, 0.6);z-index: 10;
}
.nav-item.red{background:transparent;color:#f8d7da;border-color:rgba(255,255,255,0.03)}
.nav-item.green{background:rgba(22,163,74,0.12);color:var(--success);border-color:rgba(22,163,74,0.08)}
.nav-item.yellow{background:rgba(245,158,11,0.12);color:var(--warn);border-color:rgba(245,158,11,0.08)}
.legend{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:8px 12px;color:var(--muted)}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%}
.dot.red{background:var(--danger)}
.dot.green{background:var(--success)}
.dot.yellow{background:var(--warn)}

/* profile card */
.profile-card{text-align:center;padding:20px}
.profile-photo{width:120px;height:120px;border-radius:20px;object-fit:cover;margin-bottom:12px}
.profile-card .socials {
    display: flex;flex-wrap: wrap; 
    gap: 15px;justify-content: center;margin-top: 20px;
}
.profile-card .social-item {
    display: flex;flex-direction: column;align-items: center;
}
.profile-card .social {
    display: inline-flex;align-items: center;justify-content: center;
    width: 48px;height: 48px;border-radius: 10px;color: white;
    transition: transform 0.2s ease-in-out;font-size: 1.5em;
}
.profile-card .social:hover {transform: scale(1.1);}
.profile-card .social.youtube { background-color: #FF0000; }
.profile-card .social.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.profile-card .social.tiktok { background-color: #000000; }
.profile-card .social.facebook { background-color: #1877F2; }
.profile-card .social-label {
    margin-top: 5px;font-size: 0.8em;color: var(--muted);
}
.profile-card .social i {color: white;}

/* bottom nav */
.bottom-nav{
    position:fixed;bottom:12px;left:50%;transform:translateX(-50%);
    display:flex;gap:12px;background:rgba(2,6,23,0.7);padding:8px;border-radius:24px;backdrop-filter:blur(6px);
    box-shadow:0 8px 30px rgba(2,6,23,0.6);
}
.nav-btn{
    background:transparent;border:0;color:var(--muted);padding:10px 14px;
    border-radius:14px;display:flex;flex-direction:column;align-items:center;
    gap:4px;cursor:pointer;transition:all .22s
}
.nav-btn:hover{transform:translateY(-4px) scale(1.05);color:white}
.nav-btn.emphasize{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#042028;padding:12px 18px}
.nav-btn.emphasize:hover{box-shadow: 0 10px 25px rgba(6, 182, 212, 0.4);}
.nav-btn .icon{font-weight:700}
.nav-btn.locked {
    opacity: 0.5;cursor: not-allowed;
    pointer-events: none;transform: none !important;
}

/* modal */
.modal{
    position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
    background:rgba(2,6,23,0.6);z-index:60;
}
.modal.hidden{display:none}
.modal-card{background:#071226;padding:18px;border-radius:14px;min-width:320px;max-width:480px}
.modal h3{margin-top:0}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.modal form label{display:block;margin:8px 0}
.modal input[type="text"], .modal input[type="password"]{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit}
.checkbox{display:flex;align-items:center;gap:8px;margin-top:8px}

/* toast */
.toast{
    position: fixed;bottom: 80px;left: 50%;transform: translateX(-50%);
    background: #2d3748;color: white;padding: 12px 20px;
    border-radius: 8px;z-index: 70;opacity: 0;transition: opacity 0.4s ease;
}
.toast.active{opacity: 1;}

/* responsive */
@media (max-width:900px){
    .quiz-wrap{flex-direction:column}
    .quiz-right{width:100%}
    .nav-grid{grid-template-columns:repeat(6,1fr)}
    .bottom-nav{left:12px;transform:none}
    .qnum{width:52px;height:52px}
    .nav-grid .nav-item{padding:8px;font-size:14px}
    .category-item{flex-direction:column;gap:8px;text-align:center}
    .category-options{width:100%}
    .category-btn{width:100%}
}