:root{--bg: #f7fbff;--surface: #ffffff;--muted-surface: #f1f5f9;--border: #e6eef9;--text: #0f172a;--muted: #475569;--accent: #2563eb;--accent-2: #3b82f6;--danger: #ef4444;--success: #10b981;--shadow-xs: 0 1px 2px rgba(2,6,23,.04);--shadow-sm: 0 6px 18px rgba(2,6,23,.06);--transition: .22s cubic-bezier(.2,.9,.3,1);--space-1:6px;--space-2:10px;--space-3:14px;--space-4:20px;--space-5:28px;--radius-sm:8px;--radius-md:14px;--radius-lg:22px;--max-width:1200px}html.dark{--bg: #0b1220;--surface: #071127;--muted-surface:#071827;--border: rgba(255,255,255,.06);--text: #e6eef7;--muted: #9fb1c8;--accent: #4f9bff;--accent-2:#79adff;--danger: #ff7b7b;--success:#44d7a9;--shadow-xs: 0 1px 2px rgba(0,0,0,.6);--shadow-sm: 0 8px 24px rgba(0,0,0,.6)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.assessment-container{max-width:var(--max-width);margin:16px auto;height:calc(100vh - 32px);display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3)}.assessment-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3);padding:var(--space-3);background:linear-gradient(180deg,rgba(255,255,255,.8),transparent);border-radius:var(--radius-md);border:1px solid var(--border);box-shadow:var(--shadow-xs)}.advanced-header{position:sticky;top:8px;z-index:50}.header-left{display:flex;flex-direction:column;gap:4px}.assessment-title{margin:0;font-size:20px;letter-spacing:-.2px;font-weight:700}.assessment-sub{margin:0;font-size:13px;color:var(--muted)}.header-right{display:flex;align-items:center;gap:12px}.timer-box{background:var(--muted-surface);padding:8px 12px;border-radius:10px;text-align:right}.timer-box.small{padding:6px 8px}.timer-value{font-weight:700;color:var(--danger);font-size:15px}.timer-label{font-size:11px;color:var(--muted)}.icon-btn{background:transparent;border:1px solid transparent;padding:8px 10px;border-radius:10px;cursor:pointer;transition:var(--transition);font-weight:600}.icon-btn:hover{transform:translateY(-2px);background:var(--muted-surface)}.icon-btn.active{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent}.assessment-body{display:grid;grid-template-columns:260px 1fr;gap:var(--space-4);flex:1;min-height:0}.palette{background:var(--surface);border-radius:var(--radius-md);border:1px solid var(--border);padding:12px;box-shadow:var(--shadow-xs);display:flex;flex-direction:column;gap:12px;overflow:auto}.palette-header{display:flex;justify-content:space-between;align-items:center;gap:8px}.palette-summary{font-weight:700;color:var(--text)}.palette-actions button.small{padding:6px 8px;border-radius:8px;border:1px solid var(--border);background:transparent;cursor:pointer}.palette-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.palette-item{width:100%;aspect-ratio:1/1;display:inline-grid;place-items:center;border-radius:8px;cursor:pointer;border:1px solid var(--border);background:linear-gradient(180deg,var(--muted-surface),transparent);font-weight:600;transition:var(--transition)}.palette-item:hover{transform:translateY(-4px)}.palette-item.active{box-shadow:var(--shadow-sm);transform:translateY(-2px);outline:3px solid rgba(37,99,235,.08)}.palette-item.answered{background:linear-gradient(180deg,var(--success),#e3fff2);border-color:#10b98126}.palette-item.flagged{background:linear-gradient(180deg,#fff6f6,#fff);border-color:#ef44441f}.palette-item.unanswered{background:linear-gradient(180deg,var(--muted-surface),transparent)}.legend{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin-top:auto}.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}.legend-dot.answered{background:var(--success)}.legend-dot.flagged{background:var(--danger)}.legend-dot.unanswered{background:var(--muted)}.assessment-main{display:flex;flex-direction:column;gap:var(--space-3);overflow:auto;padding:6px}.question-meta{display:flex;justify-content:space-between;align-items:center;gap:12px}.meta-left{display:flex;gap:10px;align-items:center}.question-number{font-weight:700;font-size:16px}.question-type-tag{padding:6px 10px;border-radius:10px;background:linear-gradient(90deg,#e6f0ff,#f0f7ff);color:var(--accent);font-weight:600;font-size:12px}.question-box{background:var(--surface);border-radius:var(--radius-md);padding:var(--space-3);border:1px solid var(--border);box-shadow:var(--shadow-xs)}.question-text{font-size:16px;line-height:1.6;margin:0}.question-tools{display:flex;gap:10px;margin-top:12px}.tool-btn{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:transparent;cursor:pointer}.question-body{background:var(--surface);padding:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--border);box-shadow:var(--shadow-xs)}.options-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.option{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;border:1px solid var(--border);background:linear-gradient(180deg,transparent,transparent);cursor:pointer;text-align:left;transition:var(--transition)}.option:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}.option .option-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--accent);flex:0 0 20px;display:inline-block;position:relative}.option.selected{background:linear-gradient(90deg,#2563eb14,#3b82f608);border-color:#2563eb2e;box-shadow:0 6px 18px #2563eb0f}.option.selected .option-radio:after{content:"";position:absolute;left:4px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--accent)}.saq-input{width:100%;padding:12px;border-radius:10px;border:1px solid var(--border);background:var(--muted-surface);color:var(--text)}.skeleton{display:flex;flex-direction:column;gap:10px}.skeleton-line{height:12px;background:linear-gradient(90deg,#eee,#f5f7fa,#eee);border-radius:6px;animation:shimmer 1.2s linear infinite}.skeleton-line.short{width:40%}.skeleton-line.long{width:80%}.skeleton-block{height:12px;width:100%;border-radius:6px;animation:shimmer 1.2s linear infinite;margin-top:6px}.skeleton-options .skeleton-line{height:18px;border-radius:8px;margin-bottom:10px}@keyframes shimmer{0%{background-position:-240px 0}to{background-position:240px 0}}.skeleton-line,.skeleton-block{background-size:480px 100%;background-color:#0000000a}.assessment-footer{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:12px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-xs)}.footer-left,.footer-right{display:flex;gap:10px;align-items:center}.btn{background:var(--accent);color:#fff;border:none;padding:10px 16px;border-radius:12px;cursor:pointer;font-weight:700;transition:var(--transition)}.btn.secondary{background:transparent;color:var(--muted);border:1px solid var(--border);font-weight:600}.btn.danger{background:var(--danger)}.progress-mini{color:var(--muted);font-weight:600}button:focus,.option:focus,textarea:focus{outline:3px solid rgba(37,99,235,.12);outline-offset:2px}@media (max-width: 980px){.assessment-body{grid-template-columns:1fr}.palette{order:2;display:flex;overflow-x:auto;padding:8px;gap:8px}.palette-grid{grid-auto-flow:column;grid-auto-columns:64px;grid-template-columns:none}.assessment-main{order:1}.options-grid{grid-template-columns:1fr}}.legend span{display:flex;align-items:center;gap:6px}