.processes-unit { display: grid; gap: 1.5rem; margin: 2rem 0; }
.q-reference, .q-practice { display: grid; gap: 1.35rem; }
.q-heading { max-width: 56rem; }
.q-heading h2 { margin: .25rem 0 .6rem; }
.q-heading p, .q-card p, .q-activity p { line-height: 1.6; }
.q-visual-grid { display: grid; grid-template-columns: minmax(18rem, .7fr) minmax(0, 1.3fr); gap: 1rem; }
.q-figure { margin: 0; overflow: hidden; border: 1px solid #cbe0ec; border-radius: 1rem; background: #eaf4f8; }
.q-figure img { width: 100%; height: auto; display: block; object-fit: contain; background: #fff; }
.q-figure figcaption { padding: .8rem 1rem; color: #254960; background: rgb(255 255 255 / 94%); line-height: 1.4; }
.q-process-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.q-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.q-card, .q-activity { padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid #cbe0ec; border-radius: 1rem; background: #fff; box-shadow: 0 .5rem 1.5rem rgb(9 44 70 / 6%); }
.q-card h3, .q-activity h3 { margin: 0 0 .6rem; color: #0e4164; }
.q-connector { display: inline-block; margin: .15rem .15rem .15rem 0; padding: .25rem .55rem; border-radius: 999px; color: #0e4164; background: #eaf6fb; font-weight: 800; }
.q-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; align-items: stretch; }
.q-flow-step { position: relative; padding: .85rem; border-radius: .75rem; color: #173c54; background: #eef8fc; line-height: 1.45; }
.q-flow-step:not(:last-child)::after { content: '→'; position: absolute; right: -.55rem; top: 50%; z-index: 1; color: #20779f; font-weight: 900; transform: translate(50%, -50%); }
.q-table-wrap { overflow-x: auto; border: 1px solid #cbe0ec; border-radius: 1rem; background: #fff; }
.q-table { width: 100%; min-width: 43rem; border-collapse: collapse; }
.q-card .q-table { min-width: 0; table-layout: fixed; }
.q-table th, .q-table td { padding: .75rem 1rem; border-top: 1px solid #d2e1e9; text-align: left; vertical-align: top; }
.q-table th { color: #0e4164; background: #f7fbfd; }
#app .unit-q-page .lesson-head > .hero-image { height: auto; object-fit: contain; background: #fff; }
.q-task-grid { display: grid; gap: .75rem; margin: 1rem 0; }
.q-task { display: block; padding: .9rem 1rem; border: 1px solid #d2e1e9; border-radius: .75rem; background: #f9fcfd; line-height: 1.7; }
.q-select { min-width: min(100%, 13rem); margin: .15rem .25rem; padding: .48rem .65rem; border: 1px solid #9fc2d7; border-radius: .55rem; color: #123551; background: #fff; font: inherit; font-weight: 700; }
.q-correct { border-color: #50b987; background: #eefbf4; }
.q-incorrect { border-color: #df7e73; background: #fff4f1; }
.q-score { min-height: 1.5rem; margin: .75rem 0 0; color: #315a70; font-weight: 700; }
@media (max-width: 820px) { .q-visual-grid, .q-rule-grid, .q-process-images { grid-template-columns: 1fr; } .q-flow { grid-template-columns: 1fr; } .q-flow-step:not(:last-child)::after { content: '↓'; right: 50%; top: auto; bottom: -.65rem; transform: translate(50%, 50%); } }
@media (max-width: 600px) { .q-select { display: block; width: 100%; margin: .65rem 0 0; } }