.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-sm);padding:12px 20px;border-radius:var(--radius-md);font-weight:500;font-size:var(--fs-base);transition:all .2s;border:2px solid transparent;min-height:44px;user-select:none}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--primary);color:#fff}
.btn-secondary{background:var(--card-bg);color:var(--text);border-color:var(--border)}
.btn-success{background:var(--success);color:#fff}
.btn-error{background:var(--error);color:#fff}
.btn-ghost{background:transparent;color:var(--text-muted)}
.btn-block{width:100%}
.btn-icon{width:44px;height:44px;padding:0;border-radius:50%;font-size:20px}
.btn:disabled{opacity:.5;pointer-events:none}
.card{background:var(--card-bg);border-radius:var(--radius-lg);padding:var(--sp-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.card-clickable{cursor:pointer;transition:all .2s}
.card-clickable:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.card.disabled{opacity:.5;pointer-events:none}
.input{width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:var(--radius-md);background:var(--card-bg);color:var(--text);transition:border-color .2s;font-size:var(--fs-base)}
.input:focus{outline:none;border-color:var(--primary)}
.answer-option{display:flex;align-items:flex-start;gap:var(--sp-md);padding:var(--sp-md) var(--sp-lg);background:var(--card-bg);border:2px solid var(--border);border-radius:var(--radius-md);margin-bottom:var(--sp-sm);cursor:pointer;transition:all .2s;min-height:60px}
.answer-option:hover:not(.disabled){border-color:var(--primary);background:rgba(30,58,95,.04)}
.answer-option.correct{border-color:var(--success);background:var(--success-bg)}
.answer-option.incorrect{border-color:var(--error);background:var(--error-bg)}
.answer-option.disabled{cursor:default;pointer-events:none}
.answer-checkbox{width:32px;height:32px;min-width:32px;border:2px solid var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-sm);background:var(--bg)}
.answer-option.correct .answer-checkbox{background:var(--success);border-color:var(--success);color:#fff}
.answer-option.incorrect .answer-checkbox{background:var(--error);border-color:var(--error);color:#fff}
.answer-text{flex:1;padding-top:4px;line-height:1.5}
.progress-bar{width:100%;height:8px;background:var(--border);border-radius:4px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--success),#34d399);transition:width .4s}
.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:20px;font-size:var(--fs-xs);font-weight:600}
.badge-success{background:var(--success-bg);color:var(--success)}
.badge-error{background:var(--error-bg);color:var(--error)}
.badge-primary{background:rgba(30,58,95,.1);color:var(--primary)}
.zone-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--sp-lg) var(--sp-md)}
.zone-icon{font-size:36px;margin-bottom:var(--sp-sm)}
.zone-count{font-size:var(--fs-xxl);font-weight:700;color:var(--primary);line-height:1}
.zone-label{font-size:var(--fs-sm);color:var(--text-muted);font-weight:500;margin-top:4px}
.question-card{background:var(--card-bg);border-radius:var(--radius-lg);padding:var(--sp-lg);box-shadow:var(--shadow-md);margin-bottom:var(--sp-md)}
.question-number{font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:var(--sp-sm)}
.question-text{font-size:var(--fs-lg);font-weight:500;line-height:1.5;margin-bottom:var(--sp-md)}
.question-image{width:100%;max-height:300px;object-fit:contain;border-radius:var(--radius-md);margin-bottom:var(--sp-md);cursor:zoom-in;background:var(--bg);transition:transform .3s}
.question-image.zoomed{transform:scale(1.08)}
.question-image.shake{animation:shake .5s;border:2px solid var(--error)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.fade-in{animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.exam-timer{font-family:'Courier New',monospace;font-size:var(--fs-xl);font-weight:700;padding:8px 16px;background:var(--bg);border-radius:var(--radius-md)}
.exam-timer.danger{color:var(--error);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.category-chip{display:flex;align-items:center;gap:var(--sp-md);padding:var(--sp-md) var(--sp-lg);background:var(--card-bg);border:2px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all .2s;margin-bottom:var(--sp-sm);width:100%;text-align:left;min-height:56px}
.category-chip:hover{border-color:var(--primary)}
.category-chip.selected{border-color:var(--primary);background:rgba(30,58,95,.08)}
.tabs{display:flex;gap:var(--sp-xs);background:var(--bg);padding:4px;border-radius:var(--radius-md)}
.tab{flex:1;padding:10px 16px;border-radius:var(--radius-sm);font-weight:500;transition:all .2s;text-align:center}
.tab.active{background:var(--card-bg);color:var(--primary);box-shadow:var(--shadow-sm)}
.empty-state{text-align:center;padding:var(--sp-xl) var(--sp-md);color:var(--text-muted)}
.result-screen{text-align:center;padding:var(--sp-xl) var(--sp-md)}
.result-icon{font-size:72px;margin-bottom:var(--sp-md)}
.result-title{font-size:var(--fs-xxl);font-weight:700;margin-bottom:var(--sp-md)}
.result-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:var(--sp-md);margin:var(--sp-lg) 0}
.result-stat{padding:var(--sp-md);background:var(--bg);border-radius:var(--radius-md)}
.result-stat-value{font-size:var(--fs-xl);font-weight:700;color:var(--primary)}
.result-stat-label{font-size:var(--fs-xs);color:var(--text-muted);margin-top:4px}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--sp-md)}
.modal-content{background:var(--card-bg);border-radius:var(--radius-lg);padding:var(--sp-lg);max-width:500px;width:100%;max-height:80vh;overflow-y:auto}
.side-menu{position:fixed;top:0;right:-300px;width:300px;height:100%;background:var(--card-bg);box-shadow:-4px 0 20px rgba(0,0,0,.2);z-index:100;transition:right .3s;padding:var(--sp-lg);overflow-y:auto}
.side-menu.open{right:0}
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;display:none}
.menu-overlay.show{display:block}