*{box-sizing:border-box;margin:0;padding:0}:root{--primary:#4c9aff;--success:#36b37e;--danger:#ff5630;--warning:#ffab00;--bg:#f0f4ff;--card-bg:#fff;--text:#2c3e50;--text-secondary:#7a8599;--border:#e4e8f0;--radius:12px}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#app{flex-direction:column;min-height:100vh;display:flex}.app-header{color:#fff;z-index:100;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);justify-content:space-between;align-items:center;height:56px;padding:0 24px;display:flex;position:sticky;top:0;box-shadow:0 2px 8px #00000026}.app-header .logo{cursor:pointer;letter-spacing:1px;font-size:20px;font-weight:700}.app-header nav{gap:8px;display:flex}.app-header nav a{color:#ffffffd9;border-radius:8px;padding:6px 14px;font-size:14px;text-decoration:none;transition:all .2s}.app-header nav a:hover,.app-header nav a.router-link-active{color:#fff;background:#fff3}.app-main{flex:1;width:100%;max-width:960px;margin:0 auto;padding:24px 16px}.page-title{color:var(--text);margin-bottom:20px;font-size:24px;font-weight:700}.card{background:var(--card-bg);border-radius:var(--radius);margin-bottom:16px;padding:20px;box-shadow:0 2px 12px #0000000f}.btn{cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:10px 20px;font-size:15px;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:#3b82f6;transform:translateY(-1px)}.btn-success{background:var(--success);color:#fff}.btn-success:hover{background:#2ea06e}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#e0432a}.btn-outline{border:2px solid var(--border);color:var(--text);background:0 0}.btn-outline:hover{border-color:var(--primary);color:var(--primary)}.btn-lg{border-radius:12px;padding:14px 32px;font-size:18px}.empty-state{text-align:center;color:var(--text-secondary);padding:48px 20px}.empty-state .icon{margin-bottom:12px;font-size:48px}.empty-state p{margin-bottom:16px;font-size:16px}@keyframes correctPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes wrongShake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.feedback-correct{animation:.4s correctPulse}.feedback-wrong{animation:.4s wrongShake}.progress-bar{background:var(--border);border-radius:4px;width:100%;height:8px;overflow:hidden}.progress-bar .fill{background:linear-gradient(90deg, var(--primary), var(--success));border-radius:4px;height:100%;transition:width .3s}