.l1-catalog-head { display:flex; justify-content:space-between; align-items:center; gap:28px; padding:22px 0 28px; border-bottom:1px solid #cfdedf; }
.l1-catalog-head h1 { font-size:32px; margin:8px 0 12px; }
.l1-catalog-head p { color:#52717b; }
.l1-catalog-head img { width:128px; height:128px; image-rendering:auto; }
.l1-course-summary { display:flex; gap:12px 20px; flex-wrap:wrap; font-size:14px; color:#365d67; }
.l1-unit-navigation { display:flex; gap:10px 22px; flex-wrap:wrap; margin:20px 0 6px; }
.l1-unit-navigation a { color:#176877; font-size:14px; text-decoration:none; padding:6px 0; border-bottom:2px solid transparent; }
.l1-unit-navigation a:hover { border-color:#1b8892; }
.l1-unit { --unit-color:#14818a; padding:26px 0; scroll-margin-top:90px; }
.l1-unit.unit-2 { --unit-color:#d15167; }.l1-unit.unit-3 { --unit-color:#9b731a; }.l1-unit.unit-4 { --unit-color:#26774e; }.l1-unit.unit-5 { --unit-color:#b34b36; }.l1-unit.unit-6 { --unit-color:#41728e; }
.l1-unit > header { display:flex; align-items:baseline; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.l1-unit > header > span { font-size:12px; font-weight:700; color:var(--unit-color); border-left:4px solid var(--unit-color); padding-left:10px; }
.l1-unit > header h2 { font-size:22px; margin:0; }.l1-unit > header p { color:#6b7e85; margin:0; font-size:14px; }
.l1-lesson-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.l1-lesson-card { display:flex; flex-direction:column; padding:20px; border:1px solid #d8e3e5; border-top:3px solid var(--unit-color); background:white; border-radius:8px; min-width:0; }
.l1-lesson-top { display:flex; justify-content:space-between; align-items:center; gap:12px; }.l1-lesson-number { color:var(--unit-color); font-size:24px; font-weight:700; }
.l1-lesson-card h3 { font-size:18px; margin:15px 0 9px; }.l1-lesson-card > p { font-size:14px; color:#607785; line-height:1.65; flex:1; margin:0 0 20px; }
.l1-lesson-card button { align-self:flex-start; display:inline-flex; align-items:center; gap:12px; font-size:14px; }
.l1-classroom-main { max-width:1440px; }.l1-classroom-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 0 22px; }
.l1-classroom-head h1 { font-size:30px; margin:8px 0 0; }.l1-classroom-actions { display:flex; align-items:flex-end; gap:12px; }
.l1-classroom-actions label { display:grid; font-size:12px; gap:6px; color:#607785; }.l1-classroom-actions select { max-width:260px; padding:10px; border:1px solid #cbdce0; border-radius:6px; background:white; color:#234b57; }
.l1-classroom-actions button { display:flex; align-items:center; gap:8px; }
.l1-tabs { display:flex; align-items:stretch; overflow-x:auto; border-bottom:1px solid #cedee2; gap:4px; margin-bottom:24px; }
.l1-tabs button { white-space:nowrap; display:flex; align-items:center; gap:8px; border:0; border-bottom:3px solid transparent; padding:14px 16px; background:transparent; color:#5a7380; font-weight:600; }
.l1-tabs button.active { color:#126c77; border-bottom-color:#16828b; background:#e6f4f1; }.l1-tabs button:hover { background:#edf5f6; }
.l1-tabs svg,.l1-classroom-actions svg,.l1-quiz-actions svg,.l1-demo-list svg,.l1-resources svg,.l1-lesson-card svg,.l1-classroom-footer svg { width:18px; height:18px; flex-shrink:0; }
.l1-reading { max-width:960px; margin:0 auto; padding:10px 0 30px; }.l1-reading > header h2 { font-size:26px; margin:8px 0 14px; }.l1-reading-lead { font-size:17px; line-height:1.7; color:#496d79; }
.l1-goals { padding:18px 0; margin:18px 0; border-top:1px solid #dce6e8; border-bottom:1px solid #dce6e8; }.l1-goals h3,.l1-knowledge h3,.l1-common-mistakes h3 { font-size:19px; margin:0 0 12px; }
.l1-reading li { line-height:1.8; color:#365864; }.l1-reading ol,.l1-reading ul { padding-left:24px; margin:0; }
.l1-knowledge { display:grid; grid-template-columns:36px minmax(0,1fr); gap:16px; padding:22px 0; }.l1-section-index { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#deeeee; color:#1a6f78; font-size:15px; font-weight:700; }
.l1-knowledge p { color:#365864; line-height:1.9; margin:0 0 14px; white-space:pre-wrap; }.l1-code { white-space:pre-wrap; overflow-wrap:anywhere; word-break:normal; background:#edf3f6; color:#203b48; border-left:3px solid #71b5b8; margin:14px 0; padding:18px; font-size:15px; line-height:1.7; text-align:left; max-width:100%; }
.l1-common-mistakes { padding:20px 0; border-top:1px solid #d9e5e7; }.l1-teacher-notes { max-width:960px; margin:auto; }.l1-teacher-notes li { line-height:1.85; margin:14px 0; }
.l1-demo-list { display:grid; gap:12px; }.l1-demo-list article { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:start; gap:18px; padding:22px 0; border-bottom:1px solid #d8e3e5; }.l1-demo-list h3 { font-size:18px; margin:0 0 10px; }.l1-demo-list p { color:#526f7b; line-height:1.7; margin:0; }.l1-demo-list button { display:flex; align-items:center; gap:8px; }
.l1-practical-header { display:flex; align-items:center; gap:18px; margin:14px 0 20px; }.l1-practical-header h2 { font-size:23px; margin:0; }.l1-practical-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.l1-practical-list article { border:1px solid #d6e2e5; background:white; border-radius:8px; padding:24px; min-width:0; }.l1-practical-list h3 { font-size:20px; margin:8px 0 16px; }.l1-practical-list ol,.l1-practical-list ul { padding-left:22px; }.l1-practical-list li { line-height:1.8; color:#365b69; margin:7px 0; }.l1-practical-list details { margin:18px 0; }.l1-practical-list summary { cursor:pointer; color:#166b78; font-weight:600; }.l1-practical-list details > p { white-space:pre-wrap; line-height:1.7; }
.l1-workspace { margin-top:24px; border-top:1px solid #cddde1; padding-top:20px; scroll-margin-top:20px; }.l1-workspace .code-heading h2 { font-size:20px; }.l1-classroom-footer { display:flex; justify-content:space-between; align-items:center; gap:16px; border-top:1px solid #d5e2e5; margin-top:30px; padding:20px 0; color:#66808b; font-size:14px; }.l1-classroom-footer button { display:flex; gap:8px; align-items:center; }
.l1-resources > header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }.l1-resources > header h2 { font-size:23px; }.l1-resources > header a { display:flex; gap:8px; align-items:center; text-decoration:none; }.l1-material-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; }.l1-material-list article { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid #d8e3e5; min-width:0; }.l1-material-list article > span { display:flex; align-items:center; gap:10px; overflow-wrap:anywhere; min-width:0; }.l1-material-list a { color:#166b78; padding:6px 10px; flex-shrink:0; }
.l1-quiz-head { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:8px 0 20px; }.l1-quiz-head h2 { font-size:23px; margin:0 0 10px; }.l1-quiz-head p { margin:0; color:#597582; }.l1-quiz-head button { font-size:13px; }
.l1-quiz-head [data-l1-save-state] { color:#597582; background:transparent; border:0; text-decoration:none; }
.l1-quiz-layout { display:grid; grid-template-columns:180px minmax(0,1fr); gap:30px; }.l1-question-numbers { display:grid; grid-template-columns:repeat(4,36px); gap:8px; margin-bottom:22px; }.l1-question-numbers button { width:36px; height:36px; padding:0; border:1px solid #cadbe0; border-radius:6px; background:white; color:#385a67; }.l1-question-numbers button.answered { background:#e7f4f1; }.l1-question-numbers button.correct { background:#def2e6; color:#1e6842; }.l1-question-numbers button.wrong { background:#fde8e6; color:#ad433b; }.l1-question-numbers button.active { border:2px solid #16818b; font-weight:700; }
.l1-question { min-width:0; max-width:940px; }.l1-question > h3 { font-size:22px; line-height:1.6; margin:16px 0 22px; white-space:pre-wrap; }.l1-options { display:grid; gap:12px; }.l1-options button { display:flex; align-items:flex-start; gap:16px; text-align:left; padding:16px 20px; border:1px solid #cadbe0; border-radius:6px; background:white; color:#2d4f5c; line-height:1.7; min-width:0; font-size:16px; }.l1-options button > b { display:grid; place-items:center; min-width:28px; width:28px; height:28px; border:1px solid #cadbe0; border-radius:50%; }.l1-options button span { overflow-wrap:anywhere; white-space:pre-wrap; }.l1-options button.selected { border:2px solid #16828b; background:#edf8f5; padding:15px 19px; }.l1-options button.answer { background:#e8f5e9; border-color:#399056; }.l1-options button:disabled { opacity:1; cursor:default; }.l1-options svg { width:18px; height:18px; }
.l1-explanation { padding:20px 0; color:#236947; line-height:1.7; }.l1-explanation.incorrect { color:#ad433b; }.l1-explanation p { color:#365d69; margin:8px 0 0; }.l1-quiz-actions { display:flex; justify-content:flex-end; gap:12px; margin:24px 0 0; flex-wrap:wrap; }.l1-quiz-actions button { display:flex; gap:8px; align-items:center; }.l1-statistics { margin:30px 0 0; padding:24px 0; border-top:1px solid #d2e1e4; }.l1-statistics h3 { font-size:20px; }
.l1-course-wrong-code { white-space:pre-wrap; overflow-wrap:anywhere; padding:16px; background:#edf3f6; }
[data-l1-section][hidden],[data-l1-workspace][hidden] { display:none!important; }
.l1-piece-panel { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:14px 0 20px; border-bottom:1px solid #d5e3e5; margin-bottom:14px; }
.l1-piece-teams { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.l1-piece-teams > span { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:#365a65; }
.l1-piece-teams img { width:56px; height:56px; object-fit:contain; flex-shrink:0; }
.l1-piece-panel button { display:flex; align-items:center; gap:8px; white-space:normal; }
.l1-piece-panel svg { width:18px; height:18px; }
.l1-asset-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:20px 0 30px; }
.l1-asset { min-width:0; background:white; border:1px solid #d7e4e7; border-radius:6px; padding:12px; }
.l1-asset > img { display:block; width:100%; height:156px; object-fit:contain; background:#f4f8fa; }
.l1-asset > div { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; }
.l1-asset h3 { font-size:15px; line-height:1.5; margin:0; overflow-wrap:anywhere; }
.l1-asset a { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; color:#167986; border:1px solid #d1e1e6; border-radius:4px; }
.l1-asset > code { display:block; margin-top:8px; font-size:12px; color:#6a818c; overflow-wrap:anywhere; }
@media(max-width:900px) { .l1-asset-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:640px) { .l1-piece-panel { align-items:flex-start; flex-wrap:wrap; gap:12px; }.l1-piece-teams { gap:12px; }.l1-piece-teams img { width:44px; height:44px; }.l1-piece-teams > span { font-size:14px; }.l1-asset-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.l1-asset > img { height:118px; }.l1-asset { padding:10px; } }
@media(max-width:1000px) { .l1-lesson-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.l1-classroom-head { align-items:flex-start; flex-wrap:wrap; }.l1-classroom-actions { width:100%; justify-content:space-between; }.l1-quiz-layout { grid-template-columns:150px minmax(0,1fr); gap:20px; }.l1-question-numbers { grid-template-columns:repeat(4,30px); }.l1-question-numbers button { width:30px; height:34px; } }
@media(max-width:640px) { .l1-catalog-head { gap:14px; }.l1-catalog-head h1 { font-size:26px; }.l1-catalog-head img { width:72px; height:72px; }.l1-course-summary { gap:8px 14px; font-size:12px; }.l1-lesson-grid,.l1-practical-list,.l1-material-list { grid-template-columns:minmax(0,1fr); }.l1-classroom-head h1 { font-size:25px; }.l1-classroom-actions { gap:10px; }.l1-classroom-actions label { min-width:0; }.l1-classroom-actions select { max-width:210px; width:100%; }.l1-tabs button { font-size:14px; padding:12px; }.l1-tabs { margin-bottom:18px; }.l1-knowledge { grid-template-columns:28px minmax(0,1fr); gap:10px; }.l1-section-index { width:28px; height:28px; }.l1-code { padding:12px; font-size:13px; }.l1-demo-list article { grid-template-columns:24px minmax(0,1fr); gap:10px; }.l1-demo-list button { grid-column:2; justify-self:start; }.l1-practical-list article { padding:18px; }.l1-practical-header { flex-wrap:wrap; }.l1-resources > header { flex-wrap:wrap; }.l1-quiz-head { align-items:flex-start; gap:10px; }.l1-quiz-head p { font-size:14px; line-height:1.6; }.l1-quiz-layout { grid-template-columns:minmax(0,1fr); gap:14px; }.l1-quiz-layout aside { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }.l1-question-numbers { display:flex; flex-wrap:wrap; gap:6px; margin:0; }.l1-question-numbers button { width:32px; height:34px; }.l1-question > h3 { font-size:19px; }.l1-options button { padding:14px; font-size:15px; gap:12px; }.l1-options button.selected { padding:13px; }.l1-quiz-actions { justify-content:space-between; gap:8px; }.l1-quiz-actions button { font-size:14px; }.l1-classroom-footer { flex-wrap:wrap; }.l1-material-list article > span { font-size:14px; } }