/* Teacher prototype: layout, information hierarchy and chart types follow the local CENTURY references. */
.app-header { gap: 24px; padding: 0 24px; }
#feature-nav { gap: 24px; min-width: 0; }
#feature-nav button { color: #626d79; }
#feature-nav button[aria-current] { color: #364350; }
#feature-nav button[aria-current]::after { background: #ef2159; }
.app-demo-label { color: #65717d; }
.ct-dashboard { --ct-blue: #007ca8; --ct-bright: #00aeef; --ct-text: #3c4651; --ct-muted: #687482; position: absolute; inset: var(--app-header-height) 0 0; overflow: auto; overscroll-behavior: contain; color: var(--ct-text); background: #f3f3f1; font: 400 14px/1.6 var(--kyj-font-family); scrollbar-gutter: stable; }
.ct-content { max-width: 1880px; margin: auto; padding: 0 24px 24px; }
.ct-dashboard :where(h1,h2,h3,p,ol,ul,fieldset) { margin: 0; }
.ct-dashboard :where(h1,h2,h3,p,small,td,th,button,label) { overflow-wrap: anywhere; }
.ct-dashboard h1 { font-size: 24px; line-height: 32px; font-weight: 600; }
.ct-dashboard h2 { font-size: 20px; line-height: 28px; font-weight: 600; }
.ct-dashboard h3 { font-size: 15px; line-height: 24px; font-weight: 600; }
.ct-dashboard svg { stroke: none; }
.ct-dashboard small { display: block; color: var(--ct-muted); font-size: 12px; line-height: 19px; }
.ct-dashboard p { margin: 6px 0; }
.ct-class-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0 16px; border-bottom: 1px solid #fff; }
.ct-class-heading { display: flex; align-items: center; gap: 12px; }
.ct-class-heading p { font-size: 12px; color: var(--ct-muted); margin: 0; }
.ct-back { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: #ee1653; color: #fff; font-size: 32px; line-height: 1; }
.ct-back:hover { background: #ca1044; }
.ct-class-meta { display: flex; align-items: center; gap: 16px; color: var(--ct-muted); font-size: 12px; }
.ct-demo-badge { padding: 4px 10px; border: 1px solid #b6c1cb; border-radius: 18px; }
.ct-section-heading { display: flex; align-items: baseline; gap: 16px; padding: 18px 0 12px; }
.ct-section-heading h2 { font-size: 17px; }
.ct-section-heading > span { font-size: 12px; color: var(--ct-muted); }
.ct-section-heading > button { margin-left: auto; }
.ct-filterbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding: 10px 0 16px; min-height: 58px; }
.ct-grow { flex: 1; }
.ct-filter { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ct-filter > span { color: var(--ct-muted); }
.ct-dashboard select { appearance: auto; width: auto; min-width: 100px; max-width: 100%; min-height: 34px; padding: 5px 8px; border: 1px solid #aeb7c0; border-radius: 6px; color: #3c4651; background: #fff; font: inherit; }
.ct-dashboard input:not([type=checkbox]), .ct-dashboard textarea { font: inherit; min-height: 36px; padding: 6px 10px; border: 1px solid #aeb7c0; border-radius: 6px; background: #fff; color: #3c4651; max-width: 100%; }
.ct-dashboard textarea { width: 100%; resize: vertical; }
.ct-dashboard input[type=checkbox] { accent-color: #007ca8; width: 16px; height: 16px; flex-shrink: 0; }
.ct-dashboard :where(input,textarea,select,button,summary,[tabindex]):focus-visible { outline: 2px solid #007ca8; outline-offset: 3px; }
.ct-button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; gap: 6px; padding: 6px 14px; border: 1px solid #b5bec7; border-radius: 6px; color: #465460; background: #fff; font-size: 13px; line-height: 20px; white-space: normal; }
.ct-button:hover { background: #edf4f7; border-color: #8c9baa; }
.ct-button.main { background: #00759f; border-color: #00759f; color: #fff; }
.ct-button.main:hover { background: #005d80; }
.ct-button:disabled { background: #edf0f3; color: #7b8590; border-color: #d1d8de; }
.ct-link { color: #00779e; font-size: inherit; min-height: 30px; text-align: left; }
.ct-link:hover { text-decoration: underline; }
.ct-panel { background: #fff; border-radius: 18px; padding: 20px; margin-bottom: 20px; min-width: 0; }
.ct-panel-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.ct-panel-heading h2 { font-size: 17px; line-height: 24px; }
.ct-subtle, .ct-footnote { color: var(--ct-muted); font-size: 12px; line-height: 20px; }
.ct-footnote { padding: 14px 0; }
.ct-pill { display: inline-flex; align-items: center; padding: 3px 8px; font-size: 11px; line-height: 18px; background: #edf0f3; color: #52616d; border-radius: 5px; white-space: nowrap; }
.ct-pill.blue { background: #e0f2fa; color: #006a91; }
.ct-pill.green { background: #e6f5e9; color: #296b3b; }
.ct-pill.orange { background: #fff0e2; color: #9a4913; }
.ct-pill.yellow { background: #fff8dc; color: #7d5d00; }
.ct-kpis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 20px; }
.ct-panel > .ct-kpis { margin-bottom: 0; }
.ct-kpis > div { background: #fff; border-radius: 14px; padding: 18px; min-width: 0; }
.ct-panel .ct-kpis > div { padding: 10px 0; }
.ct-kpis span { color: #737d88; font-size: 12px; }
.ct-kpis strong { display: block; font-size: 26px; line-height: 36px; color: #0082ae; margin: 8px 0 4px; font-weight: 500; }
.ct-overview-layout { display: grid; grid-template-columns: minmax(0,3fr) minmax(260px,1fr); gap: 20px; align-items: start; }
.ct-overview-layout > * { min-width: 0; }
.ct-table-wrap { overflow: auto; min-width: 0; }
.ct-table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; font-size: 13px; min-width: 600px; }
.ct-table th { font-weight: 500; }
.ct-table thead th { color: #697785; font-size: 11px; background: #fff; padding: 12px 10px; border-bottom: 1px solid #e4e7eb; vertical-align: bottom; }
.ct-table td, .ct-table tbody th { padding: 10px; border-bottom: 1px solid #eceff2; vertical-align: middle; }
.ct-table tbody tr:nth-child(even) { background: #f1f2f3; }
.ct-table tbody tr:hover { background: #eaf2f7; }
.ct-table small { font-size: 11px; }
.ct-table thead button { color: #637689; text-align: left; }
.ct-score { display: inline-block; white-space: nowrap; }
.ct-score.good, .ct-matrix-legend .good { color: #287943; }
.ct-score.medium, .ct-matrix-legend .medium { color: #896700; }
.ct-score.low, .ct-matrix-legend .low { color: #a34c14; }
.ct-score.none { color: #7d8791; }
.ct-bar { display: block; height: 3px; background: #e8edf0; border-radius: 3px; min-width: 45px; max-width: 120px; margin-top: 5px; }
.ct-bar i { display: block; height: 100%; background: #00a4db; border-radius: inherit; }
.ct-bar.good i { background: #63c565; }
.ct-bar.medium i { background: #f1cc32; }
.ct-bar.low i { background: #ee943f; }
.ct-bar.blue i { background: #00aeef; }
.ct-list-item { padding: 12px 0; border-bottom: 1px solid #edf0f2; }
.ct-list-item:last-child { border-bottom: 0; }
.ct-list-item h3 { margin-top: 4px; }
.ct-list-item p { font-size: 13px; }
.ct-attention { display: flex; gap: 10px; align-items: baseline; }
.ct-attention strong { color: #b15b1e; font-size: 32px; font-weight: 500; }
.ct-matrix-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; }
.ct-matrix-title > div { display: flex; flex-direction: column; gap: 4px; }
.ct-matrix-title h2 { font-size: 17px; }
.ct-search input { width: 210px; border-radius: 20px !important; }
.ct-matrix-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 0 0 12px; font-size: 11px; color: #6d7883; }
.ct-matrix-scroll { max-height: calc(100dvh - 350px); min-height: 260px; border-radius: 16px 16px 0 0; }
.ct-matrix { min-width: 1040px; table-layout: fixed; }
.ct-matrix thead { position: sticky; top: 0; z-index: 3; }
.ct-matrix th:first-child { width: 140px; }
.ct-matrix th { width: 120px; }
.ct-matrix thead th { height: 74px; line-height: 16px; }
.ct-matrix td { padding: 0; height: 50px; border-right: 1px solid #fff; }
.ct-matrix tbody th { padding: 5px 12px; }
.ct-sticky { position: sticky; left: 0; z-index: 2; background: #fff; }
.ct-matrix tr:nth-child(even) .ct-sticky { background: #eceef0; }
.ct-matrix thead .ct-sticky { z-index: 4; }
.ct-matrix tr.ct-average > :is(td,th) { font-weight: 600; background: #e8edf1; }
.ct-heat { width: 100%; height: 50px; padding: 6px 10px; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; position: relative; font-size: 12px; color: #34443b; text-align: left; }
.ct-heat strong { font-weight: 500; }
.ct-heat small { position: absolute; right: 5px; bottom: 3px; font-size: 9px; line-height: 12px; color: #43504b; }
.ct-heat.good { background: #78d16e; }
.ct-heat.medium { background: #f8d64a; }
.ct-heat.low { background: #f6a05b; }
.ct-heat.none { background: transparent; color: #82909a; }
.ct-heat .ct-bar { width: 85%; max-width: none; background: #ffffff44; height: 2px; }
.ct-heat .ct-bar i { background: #fff; }
button.ct-heat:hover { outline: 2px solid #437f9a; outline-offset: -2px; }
.ct-topic-options, .ct-display-options { position: relative; font-size: 12px; }
.ct-dashboard summary { cursor: pointer; padding: 8px 0; min-height: 32px; }
.ct-topic-options fieldset, .ct-display-options[open] { background: #fff; border: 1px solid #dce2e8; border-radius: 8px; padding: 12px; }
.ct-topic-options fieldset { position: absolute; width: 250px; top: 100%; left: 0; z-index: 8; box-shadow: 0 8px 24px #263b501a; }
.ct-topic-options fieldset label, .ct-display-options label { display: flex; align-items: center; gap: 8px; padding: 6px 0; min-height: 32px; }
.ct-display-options[open] { position: absolute; right: 24px; top: 192px; z-index: 9; box-shadow: 0 8px 24px #263b501a; min-width: 180px; }
.ct-half-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.ct-half-grid > * { min-width: 0; }
.ct-question-bars article { margin: 12px 0 22px; }
.ct-stacked { display: flex; min-height: 28px; background: #edf0f2; border-radius: 4px; overflow: hidden; margin: 8px 0; color: #35453e; font-size: 12px; text-align: center; }
.ct-stacked .good { background: #74cd75; }
.ct-stacked .low { background: #f4a260; }
.ct-stacked .none { background: #dce1e7; }
.ct-answer-status { padding: 5px 12px; border-radius: 4px; font-size: 12px; min-height: 32px; }
.ct-answer-status.good { background: #dcf0da; color: #2f683d; }
.ct-answer-status.low { background: #ffe2ca; color: #9a501b; }
.ct-answer-status.none { color: #6f7d88; }
.ct-resource { border-top: 1px solid #e9edf0; padding: 5px 0; margin-top: 8px; }
.ct-resource p { font-size: 13px; white-space: pre-line; line-height: 1.8; }
.ct-resource summary { color: #566776; font-size: 12px; }
.ct-scatter { display: block; width: 100%; max-height: 480px; height: auto; }
.ct-point { cursor: pointer; }
.ct-point:focus { outline: none; }
.ct-point:focus circle { stroke: #254a61; stroke-width: 4px; }
.ct-ai-card { border: 1px solid #e2e7ec; }
.ct-ai-title { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.ct-ai-title > span:first-child { background: #f2eaf8; color: #74469d; border-radius: 5px; font-size: 11px; padding: 4px 8px; }
.ct-ai-title h2 { flex: 1; min-width: 220px; font-size: 18px; }
.ct-ai-columns { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 24px; }
.ct-ai-columns h3 { margin-bottom: 10px; color: #526375; }
.ct-ai-columns p { font-size: 13px; }
.ct-name-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ct-name-chips .ct-button { min-height: 26px; padding: 2px 7px; font-size: 11px; background: #f4f7f9; border-color: #e2e7ec; }
.ct-ai-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; }
.ct-preparation-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin: 16px 0 20px; }
.ct-preparation-head p { font-size: 13px; color: #697784; }
.ct-preparation-head > div:last-child { display: flex; gap: 10px; }
.ct-plans { min-width: 1120px; background: #fff; border-radius: 16px; margin-bottom: 20px; }
.ct-plans th:first-child { width: 140px; }
.ct-plans td { vertical-align: top; max-width: 320px; }
.ct-plans td p { font-size: 12px; }
.ct-plans .ct-resource p { font-size: 11px; }
.ct-plan-question { display: flex; gap: 5px; align-items: baseline; margin: 6px 0; }
.ct-plan-question > .ct-link { font-size: 12px; }
.ct-empty { text-align: center; color: #6e7a86; padding: 36px 16px; }
.ct-feedback { margin: 16px 0; border: 1px solid #c8e4ef; background: #edf8fc; color: #295c72; border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 14px; }
.ct-feedback > button:last-child { margin-left: auto; }
.ct-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 11px; color: #6d7985; padding: 20px 0 0; }
.ct-modal-overlay { position: fixed; inset: var(--app-header-height) 0 0; z-index: 35; display: grid; align-items: center; justify-items: center; padding: 28px; background: #1b26346b; }
.ct-modal { width: min(1180px,100%); max-height: calc(100dvh - var(--app-header-height) - 56px); display: flex; flex-direction: column; border-radius: 28px; background: #f5f5f3; box-shadow: 0 16px 80px #1b263426; overflow: hidden; }
.ct-modal > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px 12px; flex-shrink: 0; }
.ct-modal header p { color: #677684; font-size: 12px; }
.ct-close { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; color: #fff; background: #0085b1; font-size: 28px; line-height: 1; }
.ct-close:hover { background: #006f96; }
.ct-modal-content { padding: 12px 28px 26px; overflow: auto; min-height: 0; }
.ct-modal-attempt-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.ct-modal-attempt-overview > div { min-width: 0; background: #fff; padding: 20px; border-radius: 20px; }
.ct-last-attempt { display: flex; align-items: center; gap: 24px; }
.ct-rings { width: 126px; height: 126px; border-radius: 50%; border: 6px solid #00aeef; outline: 4px solid #dce7ec; outline-offset: 5px; flex-shrink: 0; display: grid; place-items: center; color: #007aa6; font-size: 26px; }
.ct-blue { color: #007ca8; }
.ct-attempt-chart, .ct-activity-chart { width: 100%; display: block; height: auto; }
.ct-attempt-table { font-size: 12px; min-width: 900px; background: #fff; border-radius: 16px; }
.ct-attempt-table td, .ct-attempt-table th { white-space: nowrap; }
.ct-expand { color: #006e98; padding: 4px; min-width: 32px; min-height: 32px; }
.ct-expanded-answer { white-space: normal; padding: 12px 16px; max-width: 100%; }
.ct-original-answer { background: #f5f7f9; padding: 12px; border-radius: 8px; white-space: pre-wrap; }
.ct-modal-tabs { display: flex; gap: 20px; border-bottom: 1px solid #fff; margin-bottom: 20px; }
.ct-modal-tabs .ct-button { background: none; border: 0; border-radius: 0; border-bottom: 3px solid transparent; padding: 7px 2px; }
.ct-modal-tabs [aria-current] { border-bottom-color: #ef2159; }
.ct-profile-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 20px; margin-bottom: 20px; align-items: start; }
.ct-profile-grid > div { min-width: 0; }
.ct-profile-identity { background: #fff; border-radius: 20px; padding: 24px; text-align: center; min-height: 255px; }
.ct-profile-avatar { display: inline-grid; place-items: center; width: 108px; height: 108px; border: 6px solid #5ab76a; outline: 4px solid #d9f1df; outline-offset: 5px; border-radius: 50%; font-size: 26px; background: #f3fbf4; color: #477c51; margin-bottom: 18px; }
.ct-profile-identity h3 { font-size: 20px; }
.ct-profile-identity p { font-size: 12px; color: #71808e; }
.ct-profile-grid .ct-kpis { grid-template-columns: 1fr 1fr; }
.ct-strength, .ct-improve { display: flex; gap: 10px; align-items: center; }
.ct-strength > span { color: #37aa56; font-size: 22px; }
.ct-improve > span { color: #c39300; font-size: 22px; }
.ct-active-days { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; align-items: center; }
.ct-active-days > span { padding: 5px 7px; border-radius: 6px; background: #e7e9ec; font-size: 11px; }
.ct-active-days > span.active { color: #006d94; background: #dff3fc; }
.ct-question-stem { font-size: 16px; line-height: 1.9; background: #fff; padding: 24px; border-radius: 14px; }
.ct-answer-choices { padding-left: 24px; margin: 20px 0 !important; }
.ct-answer-choices li { padding: 8px; }
.ct-question-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0; font-size: 12px; }
.ct-student-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 18px 0; }
.ct-student-choices label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 44px; padding: 10px; background: #fff; border-radius: 8px; }
.ct-student-choices small { flex-basis: 100%; margin-left: 24px; }
.ct-resource form { display: flex; flex-direction: column; gap: 12px; padding: 12px 0; }
.ct-resource form > label { display: flex; flex-direction: column; gap: 6px; }
.ct-resource form .ct-checkbox { flex-direction: row; align-items: center; }
.ct-learning-map-layout { display: grid; grid-template-columns: minmax(0,2.3fr) minmax(240px,1fr); gap: 16px; }
.ct-live-graph { position: relative; height: 480px; border-radius: 14px; overflow: hidden; background: #08162e; }
.ct-live-graph iframe { width: 100%; height: 100%; border: 0; display: block; }
.ct-live-graph > span { position: absolute; left: 16px; bottom: 10px; font-size: 11px; color: #bfd0e6; pointer-events: none; }
.ct-level-legend { display: flex; flex-wrap: wrap; gap: 24px; padding: 4px 0 18px; }
.ct-level-legend > div { display: flex; align-items: center; gap: 8px; }
.ct-level-legend i, .ct-graph-state-list i { width: 12px; height: 12px; display: inline-block; border-radius: 50%; flex-shrink: 0; border: 1px solid #60708933; }
.ct-level-legend span { color: #6a7785; font-size: 12px; }
.ct-graph-state-list { max-height: 480px; overflow: auto; }
.ct-graph-state-list > button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 8px; border-bottom: 1px solid #edf0f3; text-align: left; }
.ct-graph-state-list > button:hover { background: #f2f7fa; }
.ct-graph-state-list span { flex: 1; font-size: 12px; }
.ct-graph-state-list b { font-size: 11px; font-weight: 400; color: #617080; }
.ct-path-summary { padding: 12px 16px; border-left: 3px solid #8151ac; background: #f7f3fa; margin-bottom: 20px !important; }
.ct-learning-path { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; list-style: none; padding: 0; margin-top: 24px !important; }
.ct-learning-path li { padding: 16px; background: #f4f7fa; border-radius: 12px; min-width: 0; }
.ct-learning-path li > span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #007ca8; color: #fff; margin-bottom: 8px; }
.ct-learning-path p { font-size: 12px; }
.ct-path-refs { display: flex; flex-direction: column; align-items: flex-start; margin: 8px 0; }
.ct-path-refs .ct-link { font-size: 11px; }
.ct-learning-path .ct-button { font-size: 12px; margin-top: 8px; }
.ct-class-recommendations { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.ct-class-recommendations > article { border: 1px solid #e3e8ed; border-radius: 12px; padding: 16px; }
.ct-class-recommendations p { font-size: 12px; }
.learning-graph-embed .app-header, .learning-graph-embed .explorer, .learning-graph-embed #selection, .learning-graph-embed #workflow-view { display: none !important; }
.learning-graph-embed #app { background: radial-gradient(ellipse at 50% 50%,#123159,#061225); }
.learning-graph-embed .node-label { font-size: 11px; }
@media (max-width: 1100px) { .ct-learning-path { grid-template-columns: repeat(2,minmax(0,1fr)); } .ct-class-recommendations { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 767px) { .ct-learning-map-layout { grid-template-columns: minmax(0,1fr); } .ct-live-graph { height: 360px; } .ct-graph-state-list { max-height: 260px; } .ct-learning-path { grid-template-columns: minmax(0,1fr); } .ct-level-legend { gap: 12px; } }
@media (max-width: 1200px) { .app-header { gap: 16px; } #feature-nav { gap: 16px; } .app-demo-label { display: none; } .ct-overview-layout { grid-template-columns: minmax(0,2fr) minmax(240px,1fr); } .ct-ai-columns { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 850px) { .ct-overview-layout { grid-template-columns: minmax(0,1fr); } .ct-overview-layout > aside { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; } .ct-half-grid { grid-template-columns: minmax(0,1fr); } .ct-class-meta { flex-direction: column; align-items: flex-end; gap: 6px; } .ct-profile-grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 767px) {
  .app-header { padding: 8px 16px 0; gap: 0; }
  #feature-nav { gap: 22px; width: 100%; overflow-x: auto; flex-shrink: 0; min-height: 56px; }
  #feature-nav button { flex-shrink: 0; min-height: 44px; }
  .ct-content { padding: 0 16px 16px; }
  .ct-class-header { gap: 12px; padding: 16px 0; align-items: flex-start; }
  .ct-class-header h1 { font-size: 20px; }
  .ct-class-meta > span:last-child { display: none; }
  .ct-section-heading { flex-wrap: wrap; gap: 8px; }
  .ct-section-heading > span { display: none; }
  .ct-kpis { gap: 8px; }
  .ct-kpis > div { padding: 12px; }
  .ct-kpis strong { font-size: 22px; line-height: 28px; }
  .ct-panel { padding: 16px; border-radius: 14px; }
  .ct-overview-layout > aside { display: block; }
  .ct-filterbar { gap: 10px 16px; }
  .ct-filterbar > span:first-child { flex-basis: 100%; }
  .ct-filterbar select, .ct-button, .ct-link, .ct-dashboard summary { min-height: 44px; }
  .ct-matrix-title { flex-direction: column; align-items: stretch; }
  .ct-search input { width: 100%; min-height: 44px !important; }
  .ct-matrix-scroll { max-height: 65dvh; }
  .ct-matrix th:first-child { width: 125px; }
  .ct-display-options[open] { top: 275px; right: 16px; }
  .ct-modal-overlay { padding: 12px; }
  .ct-modal { max-height: calc(100dvh - var(--app-header-height) - 24px); border-radius: 18px; }
  .ct-modal > header { padding: 16px 16px 8px; }
  .ct-modal header h2 { font-size: 18px; }
  .ct-modal-content { padding: 12px 16px 20px; }
  .ct-modal-attempt-overview { grid-template-columns: minmax(0,1fr); }
  .ct-rings { width: 95px; height: 95px; font-size: 22px; }
  .ct-student-choices { grid-template-columns: minmax(0,1fr); }
  .ct-preparation-head > div:last-child { flex-wrap: wrap; }
  .ct-profile-grid .ct-kpis { grid-template-columns: 1fr 1fr; }
}