.trial-notice { padding: 8px 24px; background: #edf4ff; color: #526782; font-size: 12px; flex-shrink: 0; }
.trial-result { padding: 12px 24px; background: #ecfdf5; color: #126b40; font-size: 14px; flex-shrink: 0; line-height: 1.6; }
[hidden] { display: none !important; }
.trial-unsubmitted { color: #65758b; padding: 12px; background: #f1f5f9; border-radius: 8px; }
.trial-correct-answer { margin-bottom: 12px; font-weight: 700; }
.trial-back { background: #0866ed; color: white; padding: 14px 32px; border-radius: 12px; text-align: center; }
footer { gap: 16px; }
#btn-complete-learning { background: white; color: #526782; border: 1px solid #dce5ef; box-shadow: none; max-width: 180px; }
@media(max-width: 700px) {
    body > header { padding: 12px; height: auto; min-height: 70px; gap: 8px; flex-wrap: wrap; }
    body > header > div { gap: 8px; }
    body > header > div:first-child > .w-px, body > header .w-\[192px\] { display: none; }
    .trial-workspace { overflow-y: auto; display: block; }
    .trial-workspace > div { overflow: visible; }
    .trial-workspace > div > div { padding: 16px; }
    .trial-workspace > aside { width: 100%; border-top: 1px solid #dce5ef; }
    #slide-container { padding: 20px; }
    #question-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
    footer { padding: 12px !important; flex-wrap: wrap; height: auto !important; }
    footer button { padding: 10px 16px !important; }
}