*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #f8fafc;--bg-white: #ffffff;--bg-card: #ffffff;--border-color: #e2e8f0;--accent-blue: #0056b3;--accent-sky: #3b82f6;--accent-red: #dc2626;--accent-green: #16a34a;--accent-yellow: #ca8a04;--text-primary: #1e293b;--text-secondary: #475569;--text-muted: #94a3b8;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--shadow-sm: 0 1px 3px rgba(0,0,0,.1);--shadow-md: 0 4px 6px -1px rgba(0,0,0,.1);--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1)}html,body{height:100%;font-family:Inter,-apple-system,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased}#root{min-height:100vh}.app-container{min-height:100vh;padding:20px 16px 60px;display:flex;flex-direction:column;align-items:center;gap:20px}.header{width:100%;max-width:900px;padding:20px 28px;background:var(--accent-blue);color:#fff;border-radius:var(--radius-lg);display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-md)}.header h1{font-size:1.4rem;font-weight:700}.header p{font-size:.85rem;opacity:.9}.question-card{width:100%;max-width:900px;background:var(--bg-white);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:40px;box-shadow:var(--shadow-sm)}.question-text{font-size:1.15rem;line-height:1.6;color:var(--text-primary);margin-bottom:24px}.options-grid{display:grid;grid-template-columns:1fr;gap:12px}.option-btn{padding:16px 20px;background:#f1f5f9;border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;text-align:left;transition:all .2s;display:flex;align-items:center;gap:12px;font-size:1rem;color:var(--text-primary)}.option-btn:hover{background:#e2e8f0;border-color:var(--accent-sky)}.option-btn.selected{background:#eff6ff;border-color:var(--accent-sky);color:var(--accent-blue);font-weight:600}.option-label{background:#fff;border:1px solid var(--border-color);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:700;flex-shrink:0}.selected .option-label{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue)}.essay-textarea{width:100%;min-height:150px;padding:16px;border:2px solid var(--border-color);border-radius:var(--radius-md);font-size:1rem;outline:none;transition:all .2s}.essay-textarea:focus{border-color:var(--accent-sky);box-shadow:0 0 0 4px #3b82f61a}.btn{padding:12px 24px;border-radius:var(--radius-md);font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:opacity .2s}.btn-primary{background:var(--accent-blue);color:#fff}.btn-secondary{background:#cbd5e1;color:var(--text-primary)}.btn-success{background:var(--accent-green);color:#fff}.btn-danger{background:var(--accent-red);color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed}.table-container{width:100%;overflow-x:auto;background:#fff;border-radius:var(--radius-lg);border:1px solid var(--border-color)}table{width:100%;border-collapse:collapse}th{padding:16px;background:#f8fafc;border-bottom:2px solid var(--border-color);color:var(--text-secondary);font-size:.85rem;text-transform:uppercase;letter-spacing:.5px}td{padding:16px;border-bottom:1px solid var(--border-color);font-size:.95rem;color:var(--text-primary)}.result-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:#f1f5f9}.result-card{max-width:500px;width:100%;background:#fff;padding:40px;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);text-align:center}.result-icon{font-size:3rem;margin-bottom:16px;display:block}.mobile-only{display:none!important}@media (max-width: 768px){.desktop-only{display:none!important}.mobile-only{display:flex!important}.app-container{padding:10px 8px 40px}.header{padding:15px;flex-direction:column;gap:10px;text-align:center}.header h1{font-size:1.1rem}.question-card,.result-card{padding:20px}.question-text{font-size:1rem}.option-btn{font-size:.9rem;padding:12px}.btn{padding:10px 15px;font-size:.9rem;width:100%;margin-bottom:5px}.header>div[style]{width:100%;flex-wrap:wrap}div[style*="gap: 20px"]{flex-direction:column!important}div[style*="flex: 1"]{width:100%;max-width:100%}.main-exam-layout{flex-direction:column-reverse!important;align-items:stretch!important}.nav-palette{width:100%!important;margin-bottom:20px}}@media (max-width: 480px){.login-card{padding:20px 16px!important;margin:0 8px!important}.login-screen{padding:12px!important}}