@charset "UTF-8";*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:Roboto,sans-serif;background-color:#f7f9fc;color:#0b4983;line-height:1.5}h1,h2,h3,h4{font-weight:600;color:#0b4983}p{margin-bottom:1rem;color:#34495e}:root{--primary-color: #2C3E50;--secondary-color: #34495E;--success-color: #4CAF50;--warning-color: #FFC107;--danger-color: #F44336;--light-bg: #f7f7f7;--card-bg: #fff}.card{background:var(--card-bg);border-radius:12px;box-shadow:0 4px 12px #0000001a;padding:1.5rem}button{padding:.8rem 1.2rem;border:none;border-radius:8px;cursor:pointer;font-size:1rem;transition:background .2s ease,transform .2s ease}button:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:#0ea5e9;color:#fff;border-radius:8px;padding:.5rem 1rem;font-weight:600;transition:background .2s}.btn-primary:hover:not(:disabled){background:var(--secondary-color);transform:translateY(-2px)}.btn-secondary{background:#ecf0f1;color:var(--primary-color)}.btn-secondary:hover:not(:disabled){background:#dcdde1;transform:translateY(-2px)}.timer-wrapper{position:relative;width:60px;height:60px}.timer-svg{transform:rotate(-90deg);width:100%;height:100%}.timer-bg{fill:none;stroke:#eee;stroke-width:3}.timer-progress{fill:none;stroke-width:3;stroke-linecap:round;transition:stroke-dasharray .5s ease,stroke .5s ease}.timer-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:700;color:var(--primary-color)}.progress-bar{height:6px;background:#ecf0f1;border-radius:3px;overflow:hidden}.progress{height:100%;background:var(--primary-color);transition:width .3s ease}.container{max-width:1400px;margin:0 auto;padding:1rem}.correct-msg{color:var(--success-color);font-weight:700;z-index:100}.wrong-msg{color:var(--danger-color);font-weight:700;z-index:100}@media (max-width: 600px){.container{padding:.5rem}.app-container .quiz-title{font-size:2rem;margin-bottom:1.5rem}.app-container{text-align:left;min-height:60vh}h2,h3{font-size:1.3rem}}.app-container .card{max-width:500px;width:95%;margin:0 auto}@media (min-width: 768px){.app-container .card{max-width:800px}}@media (min-width: 1200px){.app-container .card{max-width:1000px}}.main-nav{display:flex;justify-content:center;padding:1rem 0}@media (min-width: 768px){.main-nav{gap:20px}}