.thac-app-root{
    --thac-primary: var(--tutor-color-primary, #3b82f6);
    --thac-primary-hover: var(--tutor-color-primary-hover, #2563eb);
    --thac-text: var(--tutor-color-text-primary, #24324a);
    --thac-muted: var(--tutor-color-muted, #6b7280);
    --thac-border: var(--tutor-color-border, #d9e0ea);
    --thac-bg-soft: var(--tutor-color-bg-gray, #f6f8fc);
    --thac-success: var(--tutor-color-success, #22c55e);
    --thac-success-soft: #ecfdf3;
    --thac-danger: var(--tutor-color-danger, #ef4444);
    --thac-danger-soft: #fef2f2;
    --thac-radius: 14px;
    color: var(--thac-text);
}
.thac-app-root button,
.thac-app-root .button,
.thac-app-root .next-btn,
.thac-app-root .prev-btn{
    transition: all .18s ease;
}
.thac-app-root button:hover,
.thac-app-root .button:hover,
.thac-app-root .next-btn:hover,
.thac-app-root .prev-btn:hover{
    transform: translateY(-1px);
}
.thac-app-root .card{
    border-color: var(--thac-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05) !important;
}
.thac-app-root .chip,
.thac-app-root .badge{
    color: var(--thac-primary) !important;
    border-color: color-mix(in srgb, var(--thac-primary) 20%, white) !important;
    background: color-mix(in srgb, var(--thac-primary) 8%, white) !important;
}
.thac-app-root .notice.ok,
.thac-app-root .feedback.ok,
.thac-app-root .option.correct,
.thac-app-root .token.correct{
    background: var(--thac-success-soft) !important;
    border-color: color-mix(in srgb, var(--thac-success) 35%, white) !important;
    color: #166534 !important;
}
.thac-app-root .notice.bad,
.thac-app-root .feedback.bad,
.thac-app-root .option.wrong,
.thac-app-root .token.wrong{
    background: var(--thac-danger-soft) !important;
    border-color: color-mix(in srgb, var(--thac-danger) 35%, white) !important;
    color: #b42318 !important;
}
.thac-app-root .progress-track{
    background: color-mix(in srgb, var(--thac-primary) 12%, white) !important;
    border-color: color-mix(in srgb, var(--thac-primary) 18%, white) !important;
}
.thac-app-root .progress-fill{
    background: linear-gradient(90deg, var(--thac-success), var(--thac-primary)) !important;
}
.thac-app-root .option,
.thac-app-root .select,
.thac-app-root .reveal-card,
.thac-app-root .example,
.thac-app-root .highlight-sentence{
    border-color: var(--thac-border) !important;
}
.thac-app-root .scorebig{
    color: var(--thac-primary) !important;
}
.thac-app-root .tutor-btn,
.thac-app-root button.tutor-btn{
    border-radius: 12px !important;
}