.card,
.summary-card,
.exam-card,
.question-card,
.mode-card,
.access-box,
.empty-box,
.redeem-panel,
.action-panel,
.edit-panel,
.box,
.wrapper {
    background: var(--color-surface);
    border: 1px solid rgba(219, 228, 239, 0.8);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card,
.summary-card,
.exam-card,
.question-card,
.mode-card,
.access-box,
.empty-box,
.redeem-panel,
.action-panel,
.edit-panel,
.box {
    padding: var(--space-6);
}

.btn,
button,
.back-btn,
.dashboard-btn,
.search-btn,
.clear-btn,
.action-btn,
.mini-btn,
.save-btn,
.delete-btn,
.update-btn,
.exam-button,
.action-link,
.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.2;
}

.btn:hover,
button:hover,
.back-btn:hover,
.dashboard-btn:hover,
.search-btn:hover,
.clear-btn:hover,
.action-btn:hover,
.mini-btn:hover,
.save-btn:hover,
.update-btn:hover,
.exam-button:hover,
.action-link:hover,
.page-btn:hover {
    background: var(--color-primary-dark);
    color: #ffffff;
    text-decoration: none;
}

.clear-btn,
.page-btn {
    background: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-border);
}

.delete-btn,
.bulk-delete-btn {
    background: var(--color-danger);
}

.disabled-button,
button:disabled {
    background: #cbd5e1;
    color: #475569;
    cursor: not-allowed;
}

.badge,
.subject-badge,
.hero-badge,
.mini-tag,
.score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 700;
    background: var(--color-info-bg);
    color: var(--color-info);
}

.msg,
.success,
.error,
.alert {
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin: 12px 0;
    font-weight: 700;
}

.msg.success,
.success,
.alert-success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.msg.error,
.error,
.alert-error {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.msg.info,
.alert-info {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.empty,
.empty-box,
.empty-state {
    text-align: center;
    color: var(--color-muted);
}

.pagination {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pagination .active,
.page-btn.active {
    background: var(--color-primary);
    color: #ffffff;
}

@media (max-width: 640px) {
    .btn,
    button,
    .back-btn,
    .dashboard-btn,
    .search-btn,
    .clear-btn,
    .action-btn,
    .mini-btn,
    .save-btn,
    .delete-btn,
    .update-btn,
    .exam-button,
    .action-link {
        width: 100%;
    }
}