.ct-understanding-entry { margin-block: 24px 8px; padding: 20px; border: 1px solid var(--ct-purple); border-radius: 16px; background: var(--ct-lilac); color: var(--ct-ink); }
.ct-understanding-entry p { margin: 0 0 12px; }
.ct-understanding-button { font: inherit; font-weight: 700; line-height: 1.6; padding: 10px 18px; border: 1px solid var(--ct-purple); border-radius: 10px; background: var(--ct-lilac); color: var(--ct-ink); cursor: pointer; }
.ct-understanding-button:hover { border-color: currentColor; }
.ct-understanding-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
[dir="rtl"] .ct-understanding-actions { justify-content: flex-start; direction: ltr; }
[dir="rtl"] .ct-understanding-actions > * { direction: rtl; }
.ct-understanding.ct-learning { margin: 0; color: var(--learn-ink); }
.ct-bootstrap-modal.ct-understanding > .modal-dialog { max-width: 760px; margin: 20px auto; }
.ct-bootstrap-modal.ct-understanding .modal-content { background: var(--ct-white); color: var(--ct-ink); border-color: var(--learn-line); }
.ct-understanding :is(.modal-header,.modal-body,.modal-footer) { padding: 24px; }
.ct-understanding .modal-header { display: block; border-bottom: 1px solid var(--learn-line); }
.ct-understanding-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ct-understanding .modal-header h2 { font-size: clamp(1.1rem, 2.4vw, 1.4rem); margin: 0; color: inherit; }
.ct-understanding-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; font: 28px/1 Arial,sans-serif; border: 1px solid var(--learn-control-line); border-radius: 10px; background: var(--learn-bg); color: var(--learn-ink); cursor: pointer; }
.ct-understanding .modal-header p { color: var(--learn-muted); font-size: .85rem; margin: 8px 0 0; }
.ct-understanding :is(h3,h4) { color: inherit; margin-block: 12px; line-height: 1.8; }
.ct-understanding h3 { font-size: 1.2rem; }
.ct-understanding p { line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; margin-block: 8px; }
.ct-understanding-kicker,.ct-understanding a { color: var(--learn-accent); font-weight: 700; }
.ct-understanding .ct-understanding-muted { color: var(--learn-muted); font-size: .9rem; }
.ct-understanding .ct-understanding-button { color: var(--learn-bg); background: var(--learn-accent); border-color: var(--learn-accent); }
.ct-understanding .ct-understanding-secondary { color: var(--learn-accent); background: var(--learn-bg); border-color: var(--learn-control-line); }
.ct-understanding :is(button,a,summary,textarea,select,input):focus-visible,.ct-understanding-entry button:focus-visible { outline: 3px solid var(--ct-purple); outline-offset: 3px; }
.ct-understanding :is(button,fieldset):disabled { opacity: .6; cursor: not-allowed; }
.ct-understanding [hidden] { display: none !important; }
.ct-understanding-steps { display: flex; gap: 8px; margin-block: 0 16px; }
.ct-understanding-steps button { flex: 1; font: inherit; padding: 12px 8px; border: 1px solid var(--learn-control-line); background: var(--learn-bg); color: var(--learn-ink); border-radius: 9px; cursor: pointer; }
.ct-understanding-steps [aria-current="step"] { background: var(--learn-selected); border: 2px solid var(--learn-accent); font-weight: 700; }
.ct-understanding-field { display: grid; gap: 8px; margin-block: 16px; font-weight: 700; }
.ct-understanding :is(textarea,select) { width: 100%; font: inherit; font-weight: 400; color: var(--learn-ink); background: var(--learn-raised); border: 1px solid var(--learn-control-line); padding: 12px; border-radius: 10px; }
.ct-understanding textarea { resize: vertical; min-height: 110px; }
.ct-understanding textarea::placeholder { color: var(--learn-muted); opacity: 1; }
.ct-understanding [data-review-code],.ct-understanding pre { font-family: Consolas,monospace; text-align: left; tab-size: 2; }
.ct-understanding pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px; background: var(--learn-soft); color: var(--learn-ink); border-radius: 8px; }
.ct-understanding :is(.ct-understanding-reference,.ct-understanding-original,.ct-understanding-feedback) { padding: 12px; background: var(--learn-soft); border: 1px solid var(--learn-line); border-radius: 10px; margin-block: 10px; }
.ct-understanding :is(.ct-understanding-reference,.ct-understanding-original) summary { padding-block: 0; font-size: .9rem; }
.ct-understanding :is(.ct-understanding-reference,.ct-understanding-original)[open] summary { margin-bottom: 8px; }
.ct-understanding-feedback { font-size: .9rem; }
.ct-understanding-feedback p { margin: 0; }
.ct-understanding-feedback p + p { margin-top: 10px; }
.ct-understanding fieldset { min-width: 0; padding: 0; border: 0; margin: 0; }
.ct-understanding .ct-understanding-criterion { padding-block: 4px 16px; }
.ct-understanding legend { font-size: 1rem; font-weight: 700; line-height: 1.8; margin-bottom: 12px; padding: 0; }
.ct-understanding-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.ct-understanding-options label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px; border: 1px solid var(--learn-control-line); border-radius: 8px; cursor: pointer; line-height: 1.5; }
.ct-understanding-options input { flex-shrink: 0; }
.ct-understanding-options label:has(:checked) { background: var(--learn-selected); border-color: var(--learn-accent); }
.ct-understanding input[type="radio"] { width: 18px; height: 18px; accent-color: var(--learn-accent); }
.ct-understanding summary { cursor: pointer; line-height: 1.8; padding-block: 10px; font-weight: 700; }
.ct-understanding-notice,.ct-understanding-warning { padding: 12px; border-inline-start: 4px solid var(--learn-warning); background: var(--learn-warning-bg); color: var(--learn-warning); border-radius: 6px; }
.ct-understanding-success { padding: 12px; border-inline-start: 4px solid var(--learn-success); background: var(--learn-success-bg); color: var(--learn-success); border-radius: 6px; }
.ct-understanding-error { color: var(--learn-error); font-weight: 700; }
.ct-understanding-extra { border-top: 1px solid var(--learn-line); margin-top: 20px; }
.ct-understanding-topic-link { font-size: .9rem; }
.ct-understanding [data-review-finish] { padding: 12px; margin-block: 16px; border: 1px solid var(--learn-success); border-radius: 10px; background: var(--learn-success-bg); color: var(--learn-success); }
.ct-understanding .modal-footer { border-top: 1px solid var(--learn-line); display: block; font-size: .8rem; color: var(--learn-muted); padding-block: 12px; }
.ct-understanding[dir="rtl"] { text-align: right; }
.ct-understanding[dir="ltr"] { text-align: left; }
.ct-understanding[dir="rtl"] [dir="ltr"] { text-align: left; }
@media(max-width:600px) { .ct-bootstrap-modal.ct-understanding > .modal-dialog { width: calc(100% - 16px); margin: 8px auto; } .ct-understanding :is(.modal-header,.modal-body,.modal-footer) { padding: 16px; } .ct-understanding-options label { font-size: .9rem; padding: 10px 8px; } .ct-understanding-steps { gap: 4px; } .ct-understanding-steps button { font-size: .86rem; padding: 10px 4px; } }