body {font-family: Arial, sans-serif; background: var(--color-bg-deep); color: var(--color-text-primary); margin:0; padding:0;}
header {background:#111827; color:#F3F4F6; padding:1rem; text-align:center;}
.card {background:#151C2F; border-radius:20px; padding:2rem; margin:1rem auto; max-width:800px; box-shadow:0 4px 12px rgba(0,0,0,0.3); transition:transform 0.3s, opacity 0.3s;}
button {background:linear-gradient(135deg, #4F7CFF, #7C5CFF); color:#F3F4F6; border:none; border-radius:14px; padding:0.6rem 1.2rem; cursor:pointer; font-size:1rem; transition:transform 0.1s, box-shadow 0.2s;}
button:hover {transform:translateY(-2px); box-shadow:0 6px 12px rgba(0,0,0,0.4);}
header {background:#2c3e50; color:#fff; padding:1rem; text-align:center;}
main {padding:1rem; max-width:800px; margin:auto;}
#app {padding-top:80px;}
#quiz-section, #result-section {display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:calc(100vh - 80px - 60px);}

.hidden {display:none;}
#timer {font-size:1.2rem; margin-bottom:1rem;}
#question-container {margin-bottom:1rem;}
button {background:#2c3e50; color:#fff; border:none; padding:0.5rem 1rem; cursor:pointer; font-size:1rem;}
button:disabled {background:#aaa; cursor:not-allowed;}
input[type=text], input[type=number], input[type=password] {background:#111827; color:#F3F4F6; border:1px solid rgba(255,255,255,0.12); border-radius:12px; padding:0.5rem; width:100%; max-width:300px; margin-top:0.5rem; transition:border-color 0.2s;}
input:focus {border-color:#4F7CFF; outline:none; box-shadow:0 0 0 2px rgba(79,124,255,0.2);}