body[data-cc-zhaoui] {
    --primary-color: var(--zh-color-primary);
    --primary: var(--zh-color-primary);
    --system-accent: var(--zh-color-primary);
    --bg-mica: var(--zh-bg-subtle);
    --card-bg: var(--zh-bg-elevated);
    --border-subtle: var(--zh-border);
    background: var(--zh-bg-subtle);
    color: var(--zh-text);
    font-family: var(--zh-font-sans);
}
body[data-cc-zhaoui="assessment"] .container,
body[data-cc-zhaoui="assessment"] .modal-content {
    background: var(--zh-bg-elevated);
    border: 1px solid var(--zh-border);
    border-radius: var(--zh-radius-lg);
    box-shadow: none;
}
body[data-cc-zhaoui="assessment"] header { background: var(--zh-bg-elevated); color: var(--zh-text); border-bottom: 1px solid var(--zh-border); }
body[data-cc-zhaoui="assessment"] h1,
body[data-cc-zhaoui="assessment"] h2 { color: var(--zh-text); }
body[data-cc-zhaoui="assessment"] .btn { background: var(--zh-color-primary); color: var(--zh-on-primary); border-radius: var(--zh-radius-md); box-shadow: none; }
body[data-cc-zhaoui="assessment"] .option { border-color: var(--zh-border); border-radius: var(--zh-radius-md); background: var(--zh-bg-elevated); }
body[data-cc-zhaoui="assessment"] .option.selected { border-color: var(--zh-color-primary); background: var(--zh-bg-subtle); }
body[data-cc-zhaoui="assessment"] .guide-content,
body[data-cc-zhaoui="assessment"] .result-content { color: var(--zh-text); }
body[data-cc-zhaoui] .modal-content { max-height: 85vh; overflow-y: auto; }
body[data-cc-zhaoui="guide"] code,
body[data-cc-zhaoui="guide"] pre { overflow-wrap: anywhere; }
body[data-cc-zhaoui="guide"] pre { overflow-x: auto; }
body[data-cc-zhaoui="guide"] h1 { font-size: clamp(28px, 4vw, 36px); line-height: 1.25; font-weight: 650; margin-bottom: 12px; }
body[data-cc-zhaoui="guide"] h2 { font-size: 24px; line-height: 1.4; font-weight: 600; margin: 32px 0 16px; }
body[data-cc-zhaoui="guide"] h3 { font-size: 18px; line-height: 1.5; font-weight: 600; margin-bottom: 12px; }
body[data-cc-zhaoui="guide"] .glass,
body[data-cc-zhaoui="guide"] .mica { background: var(--zh-bg-elevated); border-color: var(--zh-border); box-shadow: none; }
body[data-cc-zhaoui="book"] .header h1 { color: var(--zh-text); text-shadow: none; }
body[data-cc-zhaoui="book"] .card,
body[data-cc-zhaoui="book"] .login-container { background: var(--zh-bg-elevated); border: 1px solid var(--zh-border); box-shadow: none; border-radius: var(--zh-radius-lg); }
body[data-cc-zhaoui="book"] .btn-primary { background: var(--zh-color-primary); border-color: var(--zh-color-primary); }
body[data-cc-zhaoui="book"] .form-control { border-color: var(--zh-border); border-radius: var(--zh-radius-md); }
body[data-cc-zhaoui="book"] .answer-item { align-items: flex-start; }
@media (max-width: 640px) {
    body[data-cc-zhaoui="assessment"] .container { max-width: calc(100% - 20px); margin: 12px auto; }
    body[data-cc-zhaoui="assessment"] .btn-group { flex-wrap: wrap; gap: 8px; }
    body[data-cc-zhaoui="assessment"] .option { overflow-wrap: anywhere; }
}