/* Skillkids тренажёр. Цвета взяты из логотипа: жёлтый, красный, бирюзовый, синий. */ @font-face { font-family: "Rubik"; src: url("../vendor/fonts/Rubik.ttf") format("truetype"); font-weight: 300 900; font-display: swap; } @font-face { font-family: "Nunito"; src: url("../vendor/fonts/Nunito.ttf") format("truetype"); font-weight: 200 1000; font-display: swap; } :root { --ink: #23304a; --muted: #66728c; --paper: #ffffff; --soft: #f1f6fb; --line: #dbe4ef; --yellow: #ffd93b; --yellow-d: #e0ad00; --red: #ff4b4f; --red-d: #cf2b30; --teal: #2ec4a9; --teal-d: #1a9a83; --blue: #247ba0; --blue-d: #17597a; --ok: #33b652; --ok-d: #238a3b; --ok-bg: #e4f9e9; --bad-bg: #ffe9ea; --warn-bg: #fff5d1; --head: "Rubik", "Segoe UI", sans-serif; --body: "Nunito", "Segoe UI", sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; } body { color: var(--ink); font: 700 17px/1.5 var(--body); -webkit-font-smoothing: antialiased; min-height: 100vh; background-color: #1f7196; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cg fill='%23fff' fill-opacity='.03'%3E%3Cpath d='M0 0L150 70 40 190Z'/%3E%3Cpath d='M360 40L230 150 340 270Z'/%3E%3Cpath d='M120 360L250 210 300 360Z'/%3E%3C/g%3E%3Cg fill='%23000' fill-opacity='.025'%3E%3Cpath d='M170 0L290 0 220 90Z'/%3E%3Cpath d='M0 240L100 300 0 360Z'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(170deg, #2a8fb4 0%, #1f7196 45%, #185a7e 100%); background-attachment: fixed; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; } h1, h2, h3, h4 { font-family: var(--head); margin: 0; line-height: 1.15; } .pic { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; } .ui { width: 1.15em; height: 1.15em; display: block; } /* Заголовки на фоне страницы, как надпись на логотипе */ .title { font: 800 36px/1.1 var(--head); color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .25); margin: 0 0 6px; letter-spacing: -.01em; } .lead { color: #e2f2fa; margin: 0 0 20px; font-weight: 700; } .sec { font: 700 22px/1.2 var(--head); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .22); margin: 30px 0 12px; } .muted { color: var(--muted); } /* Шапка */ .hud { background: var(--paper); box-shadow: 0 4px 0 rgba(0, 0, 0, .14); position: sticky; top: 0; z-index: 20; } .hud-in { max-width: 1160px; margin: 0 auto; padding: 6px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 9px; text-align: left; } .brand img { width: 54px; height: 54px; object-fit: contain; display: block; transition: transform .2s; } .brand:hover img { transform: rotate(-6deg) scale(1.06); } .brand b { font: 800 17px/1.02 var(--head); } .brand small { display: block; font: 600 13px/1.1 var(--head); color: var(--muted); } .tabs { display: flex; gap: 4px; flex-wrap: wrap; } .tab { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 13px; font: 600 15px var(--head); color: var(--muted); transition: background .15s, color .15s; } .tab i { width: 26px; height: 26px; display: block; } .tab:hover { background: var(--soft); color: var(--ink); } .tab.on { background: #e3f4ff; color: var(--blue-d); box-shadow: inset 0 0 0 2px #9fd6f2; } .stats { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .chip { display: flex; align-items: center; gap: 6px; padding: 4px 11px 4px 7px; border-radius: 13px; background: var(--soft); font: 700 15px var(--head); white-space: nowrap; } .chip i { width: 24px; height: 24px; display: block; } .chip.btnish:hover { background: #e3edf7; } .lvl { display: flex; align-items: center; gap: 7px; padding: 4px 11px 4px 7px; border-radius: 13px; background: var(--soft); } .lvl i { width: 26px; height: 26px; display: block; } .lvl b { font: 700 13px/1 var(--head); display: block; margin-bottom: 4px; white-space: nowrap; } .xpbar { width: 86px; height: 8px; border-radius: 5px; background: #d3deea; overflow: hidden; } .xpbar u { display: block; height: 100%; background: linear-gradient(90deg, #ffc21a, #ff9b14); border-radius: 5px; transition: width .5s; } .mode-pill { display: flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 13px; background: var(--ink); color: #fff; font: 800 14px var(--head); } .mode-pill:hover { background: #33446a; } .ava { width: 42px; height: 46px; display: block; transition: transform .15s; } .ava:hover { transform: translateY(-2px); } .wrap { max-width: 1160px; margin: 0 auto; padding: 24px 18px 70px; } /* Кнопки с объёмом */ .btn { --c: #fff; --d: #c5d0de; --t: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 14px; background: var(--c); color: var(--t); box-shadow: 0 5px 0 var(--d); font: 700 16px var(--head); transition: transform .08s, box-shadow .08s, filter .15s; position: relative; top: 0; white-space: nowrap; } .btn:hover:not(:disabled) { filter: brightness(1.05); } .btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--d); } .btn:disabled { opacity: .5; cursor: default; } .btn:focus-visible, .choice:focus-visible, .tab:focus-visible, .world:focus-visible, .node:focus-visible { outline: 3px solid #1d9bf0; outline-offset: 3px; } .btn.go { --c: var(--yellow); --d: var(--yellow-d); } .btn.ok { --c: var(--ok); --d: var(--ok-d); --t: #fff; } .btn.red { --c: var(--red); --d: var(--red-d); --t: #fff; } .btn.blue { --c: var(--blue); --d: var(--blue-d); --t: #fff; } .btn.big { padding: 15px 28px; font-size: 19px; border-radius: 17px; } .btn.small { padding: 7px 13px; font-size: 14px; box-shadow: 0 4px 0 var(--d); } .btn i { width: 24px; height: 24px; display: block; } .card { background: var(--paper); border-radius: 22px; padding: 22px; box-shadow: 0 6px 0 rgba(13, 42, 66, .28); } /* Персонаж */ .mascot { width: 100%; height: 100%; display: block; overflow: visible; } .mascot .m-flame { transform-origin: 60px 62px; animation: flicker 1.1s ease-in-out infinite alternate; } .mascot .m-eyes { transform-origin: 60px 85px; animation: blink 4.6s infinite; } .bob { animation: bob 2.6s ease-in-out infinite; } .talking .m-mouth { transform-origin: 60px 102px; animation: talk .26s ease-in-out infinite alternate; } @keyframes flicker { from { transform: scale(1, .94) rotate(-2deg); } to { transform: scale(1.03, 1.06) rotate(2deg); } } @keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97.5% { transform: scaleY(.08); } } @keyframes bob { 50% { transform: translateY(-7px); } } @keyframes talk { from { transform: scaleY(.45); } to { transform: scaleY(1.25); } } .bubble { position: relative; background: var(--paper); border-radius: 18px; padding: 12px 16px; font-weight: 800; box-shadow: 0 4px 0 rgba(13, 42, 66, .2); } .bubble.left::before { content: ""; position: absolute; left: -12px; top: 22px; border: 8px solid transparent; border-right: 13px solid var(--paper); border-left: 0; } /* Вход и выбор экзамена */ .gate { min-height: calc(100vh - 80px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 18px 50px; text-align: center; } .gate-logo { width: 190px; height: 190px; object-fit: contain; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .2)); } .gate .title { font-size: 40px; margin-top: 10px; } .who-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 18px 0; max-width: 760px; } .who { background: var(--paper); border-radius: 20px; padding: 12px 18px 12px; width: 134px; box-shadow: 0 6px 0 rgba(13, 42, 66, .28); transition: transform .12s; font: 700 16px var(--head); overflow-wrap: anywhere; } .who:hover { transform: translateY(-4px) rotate(-1.5deg); } .who span { display: block; width: 74px; height: 86px; margin: 0 auto 6px; } .new-who { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; width: 100%; max-width: 440px; } .new-who input { flex: 1 1 190px; } .modes-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; width: 100%; max-width: 760px; margin-top: 22px; } .exam-door { --c: #ffcf33; --d: #dea900; background: var(--c); border-radius: 28px; padding: 22px; box-shadow: 0 9px 0 var(--d); color: var(--ink); transition: transform .12s, box-shadow .12s; display: block; text-align: center; } .exam-door:hover { transform: translateY(-4px); box-shadow: 0 13px 0 var(--d); } .exam-door:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--d); } .exam-door.ege { --c: #ff6166; --d: #cf2b30; color: #fff; } .exam-door i { display: block; width: 104px; height: 104px; margin: 0 auto 6px; animation: bob 3s ease-in-out infinite; } .exam-door b { display: block; font: 900 50px/1 var(--head); letter-spacing: .01em; } .exam-door em { display: block; font: 700 17px var(--head); font-style: normal; margin: 4px 0 8px; } .exam-door small { display: block; font-weight: 800; font-size: 14px; opacity: .85; } .exam-door .last { display: inline-block; margin-top: 9px; padding: 2px 10px; background: rgba(255, 255, 255, .85); border-radius: 9px; color: var(--ink); font-size: 12px; } /* Главная: приветствие */ .hero { display: grid; grid-template-columns: 1fr 300px; gap: 18px; margin-bottom: 8px; } .hero-main { display: flex; align-items: center; gap: 16px; background: linear-gradient(120deg, #ffe34f, #ffc61f); padding: 18px 24px; box-shadow: 0 6px 0 var(--yellow-d); position: relative; overflow: hidden; } .hero-main::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 210px; height: 210px; background: rgba(255, 255, 255, .22); transform: rotate(28deg); } .hero-mascot { flex: 0 0 auto; width: 112px; height: 130px; position: relative; z-index: 1; } .hero-txt { position: relative; z-index: 1; min-width: 0; } .hero-txt h1 { font: 800 30px/1.1 var(--head); } .hero-txt p { margin: 5px 0 13px; font-size: 16px; } .row-btn { display: flex; gap: 12px; flex-wrap: wrap; } .goal { padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; gap: 8px; } .goal-top { display: flex; align-items: center; gap: 10px; } .goal-top i { flex: 0 0 auto; width: 46px; height: 46px; display: block; } .goal h3 { font-size: 17px; } .goal small { color: var(--muted); font-size: 14px; display: block; line-height: 1.25; } .goalbar { height: 15px; border-radius: 9px; background: #e2eaf3; overflow: hidden; } .goalbar u { display: block; height: 100%; background: linear-gradient(90deg, #4ed36d, #2fb44f); border-radius: 9px; transition: width .5s; } /* Карта миров */ .worlds { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; } .world { --c: #888; --d: #555; background: var(--c); border-radius: 22px; padding: 12px 12px 12px; box-shadow: 0 7px 0 var(--d); color: #fff; text-align: center; transition: transform .12s, box-shadow .12s; position: relative; overflow: hidden; display: block; width: 100%; } .world::before { content: ""; position: absolute; left: -30px; top: -40px; width: 110px; height: 110px; background: rgba(255, 255, 255, .13); transform: rotate(35deg); } .world:hover { transform: translateY(-4px); box-shadow: 0 11px 0 var(--d); } .world:hover i { animation: wiggle .5s ease; } .world:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--d); } .world i { display: block; width: 76px; height: 76px; margin: 2px auto 5px; position: relative; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .18)); } .world b { display: block; font: 700 16px/1.15 var(--head); min-height: 37px; position: relative; display: flex; align-items: center; justify-content: center; } .world small { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; background: rgba(0, 0, 0, .2); padding: 1px 10px 1px 6px; border-radius: 10px; font: 700 13px var(--head); position: relative; } .world small svg { width: 15px; height: 15px; } .world small svg path { fill: #ffd93b; stroke: none; } .world .mini { display: block; height: 7px; border-radius: 4px; background: rgba(0, 0, 0, .22); margin-top: 8px; overflow: hidden; position: relative; } .world .mini u { display: block; height: 100%; background: #ffe14d; border-radius: 4px; } @keyframes wiggle { 25% { transform: rotate(-9deg) scale(1.08); } 75% { transform: rotate(9deg) scale(1.08); } } /* Звёзды */ .stars { display: inline-flex; gap: 1px; vertical-align: middle; } .st { width: 20px; height: 20px; display: block; } .st path { fill: #dbe3ee; stroke: #9aa8bc; } .st.on path { fill: #ffd21f; stroke: #c88b00; } /* Экран мира */ .world-head { --c: #888; --d: #555; display: flex; align-items: center; gap: 16px; background: var(--c); color: #fff; border-radius: 24px; padding: 16px 20px; box-shadow: 0 7px 0 var(--d); margin-bottom: 8px; flex-wrap: wrap; } .world-head i { flex: 0 0 auto; width: 84px; height: 84px; display: block; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .2)); } .world-head h1 { font: 800 30px/1.1 var(--head); } .world-head p { margin: 4px 0 0; font-weight: 800; } .world-head .row-btn { margin-left: auto; } .lesson-now { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 14px 0 6px; border-left: 6px solid #22c55e; } .lesson-now small { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .7; } .lesson-now b { font: 800 22px/1.2 var(--head); } .lesson-now { align-items: stretch; } .check-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .12); } .check-row.first { border-top: 0; } .check-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .check-row b { font: 800 17px/1.25 var(--head); } .lesson-learn { text-align: left; margin: 6px 0 10px; } /* Игровые задания уроков: шаги по порядку, пары. */ .q .steps { display: grid; gap: 6px; margin: 12px 0; font-size: .92em; } .q .steps.alt .step-row b { background: #ff9b14; } .q .step-row { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; background: rgba(121, 198, 236, .14); text-align: left; } .q .step-row b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #3aa0d8; color: #fff; font-size: .85em; } /* Картинки в вопросах: окна программ, панели, клавиши, поле с роботом. Светлые, как скриншоты. */ .q .v-win, .q .v-grid, .q .v-row, .q .v-big, .q .v-rule, .q .v-nodes, .q .v-phone, .q .v-slide, .q .v-prog, .q .v-keys-wrap { margin: 10px 0 12px; } .v-win { display: block; width: fit-content; max-width: 100%; border-radius: 10px; overflow: hidden; background: #fff; color: #1f2430; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); font: 500 13px/1.35 'Segoe UI', Arial, sans-serif; text-align: left; } .v-bar { display: flex; align-items: center; gap: 5px; background: #e9ecf2; padding: 6px 10px; font-size: 12px; color: #555; } .v-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; } .v-bar i:nth-child(2) { background: #febc2e; } .v-bar i:nth-child(3) { background: #28c840; } .v-bar span { margin-left: 8px; font-weight: 600; } .v-url { background: #fff; border-radius: 6px; padding: 2px 10px; font-weight: 400 !important; color: #2a6; min-width: 160px; } .v-body { padding: 10px 12px; } .v-dark { background: #1e2129; color: #e8eaf0; } .v-dark .v-bar { background: #2b2f3a; color: #bbb; } .v-panel .v-body { padding: 4px 0; min-width: 210px; } .v-layer { display: flex; gap: 8px; align-items: center; padding: 5px 10px; border-bottom: 1px solid #eef0f4; } .v-layer.sel { background: #dbe8ff; } .v-layer.off { opacity: .4; text-decoration: line-through; } .v-keys kbd { display: inline-block; min-width: 26px; padding: 4px 8px; border-radius: 7px; background: #fff; color: #222; border: 1px solid #c8ccd6; box-shadow: 0 3px 0 #aab0bf; font: 700 14px/1 'Segoe UI', Arial, sans-serif; text-align: center; } .v-keys b { margin: 0 5px; opacity: .7; } .v-big { display: flex; flex-direction: column; align-items: center; width: fit-content; } .v-big span { font-size: 56px; line-height: 1.1; } .v-big small { opacity: .8; } .v-row { display: flex; flex-wrap: wrap; gap: 10px; } .v-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 76px; padding: 10px 8px; border-radius: 12px; background: #fff; color: #222; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); text-align: center; } .v-card span { font-size: 34px; line-height: 1; } .v-card small { font-size: 12px; font-weight: 600; } .v-mark { position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; border-radius: 50%; background: #ff9b14; color: #fff; display: grid; place-items: center; font-size: 13px; } .v-ev { border-collapse: collapse; font-size: 13px; } .v-ev th { background: #f1f3f7; padding: 5px 10px; text-align: left; } .v-ev td { padding: 6px 10px; border-top: 1px solid #e3e6ec; } .v-ev td:first-child { color: #3a6; } .v-ev td:last-child { color: #c63; } .v-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: fit-content; padding: 8px; border-radius: 12px; background: #2d2f3a; color: #fff; font-weight: 600; } .v-rule span { padding: 6px 10px; border-radius: 8px; background: #454857; } .v-rule .w { background: #2e8b57; } .v-rule .d { background: #c0392b; } .v-nodes { display: flex; flex-wrap: wrap; align-items: center; gap: 0; padding: 12px; border-radius: 10px; background: #252830; width: fit-content; } .v-node { display: flex; align-items: center; border-radius: 8px; overflow: hidden; background: #3b3f4b; color: #fff; font: 600 12px/1.2 'Segoe UI', Arial, sans-serif; } .v-node b { padding: 7px 10px; } .v-node i { padding: 0 6px; font-style: normal; color: #fff; opacity: .8; } .v-wire { width: 20px; height: 3px; background: #fff; opacity: .8; } .v-track { display: flex; align-items: stretch; gap: 3px; margin: 4px 0; min-width: 260px; } .v-track em { width: 34px; font-style: normal; font-size: 11px; opacity: .7; align-self: center; } .v-track span { padding: 6px 8px; border-radius: 4px; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; } .v-phone { width: 170px; padding: 10px 8px; border-radius: 26px; background: #111; box-shadow: 0 3px 12px rgba(0, 0, 0, .35); } .v-phone > div { min-height: 230px; border-radius: 18px; background: #fff; color: #222; padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; text-align: center; font: 600 13px/1.3 'Segoe UI', Arial, sans-serif; } .v-btn { display: inline-block; padding: 7px 16px; border-radius: 10px; background: #3b82f6; color: #fff; font-weight: 700; } .v-page .v-body { min-width: 240px; background: #fff; } .v-fx { display: flex; gap: 8px; padding: 4px 6px; border: 1px solid #dfe3ea; border-radius: 4px; font-family: Consolas, monospace; margin-bottom: 6px; } .v-fx b { color: #2a7; font-style: italic; } .v-sheet { border-collapse: collapse; font-size: 13px; } .v-sheet th { background: #f1f3f7; color: #667; font-weight: 600; padding: 3px 8px; border: 1px solid #dfe3ea; } .v-sheet td { min-width: 54px; padding: 4px 8px; border: 1px solid #dfe3ea; text-align: right; } .v-sheet td.sel { outline: 2px solid #1a8a3a; outline-offset: -2px; background: #e8f6ec; } .v-slide { width: 220px; aspect-ratio: 16 / 9; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); color: #222; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font: 600 12px/1.3 'Segoe UI', Arial, sans-serif; text-align: left; } .v-slide b { font-size: 15px; } .v-grid { border-collapse: separate; border-spacing: 3px; background: #2f6b3a; border-radius: 10px; padding: 3px; } .v-grid td { width: 38px; height: 38px; border-radius: 6px; background: #8fd18f; text-align: center; vertical-align: middle; font-size: 22px; line-height: 1; } .v-grid td.paint { background: #ffd34d; } .v-grid td.wall { background: #7a5b3a; } .v-grid td.water { background: #5bb7ff; } .v-grid td.lbl { background: #fff3c4; color: #8a4b00; font: 800 16px/1 'Segoe UI', Arial, sans-serif; } .v-prog { display: flex; flex-wrap: wrap; gap: 6px; font-size: 20px; } .v-step, .v-loop { padding: 4px 10px; border-radius: 8px; background: #3b82f6; color: #fff; font-weight: 700; letter-spacing: 2px; } .v-loop { background: #ff9b14; letter-spacing: 0; } @media (max-width: 520px) { .v-grid td { width: 32px; height: 32px; font-size: 18px; } .v-phone { width: 150px; } .v-slide { width: 190px; } } /* Учитель: занятия без отметки сверху календаря, даты в журнале со временем. */ .cal-todo-box { margin: 12px 0; border-left: 4px solid #f59e0b; background: #fffbeb; } .cal-todo-box b { display: block; margin-bottom: 8px; color: #92400e; } .jg th.jg-d button small { display: block; font-size: 10px; font-weight: 500; opacity: .7; } /* Руководитель: таблица учеников и родителей. */ .st-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0 8px; } .st-search { flex: 1 1 260px; min-width: 0; padding: 10px 14px; border: 1px solid #d6dde8; border-radius: 10px; font: 600 14px var(--body); background: #fff; color: #1f2937; } .st-search:focus { outline: 2px solid #93c5fd; border-color: #93c5fd; } .st-card { padding: 0; overflow: hidden; } .st-table th { position: sticky; top: 0; background: #f8fafc; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; } .st-table td { vertical-align: middle; } .st-row { cursor: pointer; transition: background .12s; } .st-row:hover { background: #f1f6ff; } .st-go { color: #9ca3af; font-size: 22px; text-align: right; } .st-dots { display: flex; align-items: center; gap: 4px; } .st-dots i { width: 11px; height: 11px; border-radius: 50%; background: #e5e7eb; } .st-dots i.on { background: #22c55e; } .st-dots i.on.low { background: #f59e0b; } .st-dots b { margin-left: 6px; font-size: 13px; } .st-dots b.bad { color: #dc2626; } .st-dots b.warn { color: #d97706; } .warn-t { color: #d97706; } .kid-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; margin: 2px 4px 2px 0; border-radius: 999px; background: #eef4ff; color: #1d4ed8; font: 700 13px var(--body); border: 0; cursor: pointer; } .kid-chip:hover { background: #dbe8ff; } .kid-chip i { flex: none; width: 8px; height: 8px; padding: 0; margin: 0; border-radius: 50%; background: #22c55e; } .kid-chip i.kd-warn { background: #f59e0b; } .kid-chip i.kd-bad { background: #dc2626; } /* Расписание неделей: дни колонками, занятия карточками. */ .wk { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 8px; overflow-x: auto; } .wk-day { background: #f8fafc; border-radius: 10px; padding: 8px; min-height: 140px; display: flex; flex-direction: column; gap: 6px; } .wk-day.today { background: #eaf1ff; box-shadow: inset 0 0 0 2px #93c5fd; } .wk-day > b { font-size: 13px; color: #374151; display: flex; justify-content: space-between; align-items: center; } .wk-day > b button { color: #2563eb; font-weight: 800; font-size: 16px; padding: 0 4px; } .wk-ev { text-align: left; padding: 7px 9px; border-radius: 9px; background: #fff; border-left: 4px solid #22c55e; box-shadow: 0 1px 4px rgba(31, 41, 55, .08); font: 600 12px/1.35 var(--body); color: #1f2937; width: 100%; cursor: pointer; } .wk-ev:hover { background: #f1f6ff; } .wk-ev.on { box-shadow: inset 0 0 0 2px #2563eb; } .wk-ev b { display: block; font-size: 13px; } .wk-ev small { display: block; color: #6b7280; } .view-pills { display: inline-flex; background: #eef1f6; border-radius: 10px; padding: 3px; gap: 2px; margin-left: auto; } .view-pills button { padding: 5px 12px; border-radius: 8px; font: 700 13px var(--body); color: #4b5563; } .view-pills button.on { background: #fff; color: #1d4ed8; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); } /* Варианты ответа картинками. */ .choice.has-pic { padding: 8px; min-height: 64px; } .pic-choice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; } .pic-choice svg { width: 76px; height: 76px; } .pic-choice small { font-size: 12px; opacity: .85; font-weight: 600; } .pic-choice .v-keys kbd { font-size: 15px; } .pic-choice .v-sw { width: 54px; height: 34px; border-radius: 8px; border: 2px solid rgba(255, 255, 255, .7); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); } .pic-choice .v-arrow { font-size: 34px; line-height: 1; } .pic-choice .v-mini { background: #fff; color: #222; border-radius: 8px; padding: 6px 10px; min-width: 110px; text-align: left; font: 500 13px/1.3 'Segoe UI', Arial, sans-serif; } .v-sw-big { display: inline-block; width: 90px; height: 56px; border-radius: 12px; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); } .v-shape-prog { display: flex; width: fit-content; margin: 10px 0 12px; flex-direction: column; gap: 3px; padding: 8px 12px; border-radius: 10px; background: #0f7a4a; color: #fff; font: 700 14px/1.3 'Segoe UI', Arial, sans-serif; } .v-shape-prog span { padding-left: 16px; } /* Блоки Scratch в вопросах: цвета как в редакторе Scratch 3. */ .sb-two { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; } .sb-two .sb-s { margin: 10px 0 12px; } .sb-s { display: flex; width: fit-content; flex-direction: column; align-items: flex-start; margin: 10px 0 12px; font: 600 13px/1.25 'Helvetica Neue', Arial, sans-serif; max-width: 100%; text-align: left; } .sb-b { --c: #4c97ff; background: var(--c); color: #fff; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; padding: 6px 10px; min-height: 30px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, .18); margin-top: -1px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); } .sb-hat { border-radius: 18px 18px 5px 5px; padding-top: 11px; min-width: 150px; } .sb-cw { display: flex; flex-direction: column; align-items: flex-start; margin-top: -1px; } .sb-cw > .sb-ctop, .sb-cw > .sb-cmid { border-radius: 5px 5px 5px 0; } .sb-cin { display: flex; flex-direction: column; align-items: flex-start; border-left: 16px solid var(--c); padding: 2px 0 2px 0; min-height: 22px; } .sb-cbot { min-height: 14px; width: 70px; padding: 0; border-radius: 0 5px 5px 5px; } .sb-n { background: #fff; color: #575e75; border-radius: 12px; padding: 1px 8px; font-weight: 500; } .sb-d { background: rgba(0, 0, 0, .14); border-radius: 5px; padding: 1px 7px; } .sb-r { background: var(--c); border: 1px solid rgba(0, 0, 0, .2); border-radius: 12px; padding: 1px 8px; } .sb-q { background: var(--c); border: 1px solid rgba(0, 0, 0, .2); border-radius: 4px; padding: 2px 9px; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); padding: 2px 12px; } .sb-sw { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; vertical-align: middle; } .sb-flag { color: #4cbf56; font-size: 16px; text-shadow: 0 0 1px #1d6b25; } .sb-m { --c: #4c97ff; } .sb-l { --c: #9966ff; } .sb-snd { --c: #cf63cf; } .sb-e { --c: #ffbf00; } .sb-c { --c: #ffab19; } .sb-sen { --c: #5cb1d6; } .sb-o { --c: #59c059; } .sb-v { --c: #ff8c1a; } .sb-p { --c: #ff6680; } @media (max-width: 520px) { .sb-s { font-size: 12px; } .sb-b { padding: 5px 8px; } .sb-cin { border-left-width: 12px; } } .q .steps.code .step-row code { font-family: Consolas, 'Courier New', monospace; white-space: pre; } .path { position: relative; margin: 24px auto 0; width: 100%; max-width: 480px; } .path svg.road { position: absolute; left: 50%; top: 0; margin-left: -200px; width: 400px; pointer-events: none; } .node { position: absolute; width: 190px; margin-left: -95px; text-align: center; left: 50%; } .node-b { --c: #fff; --d: #c5d0de; display: grid; place-items: center; width: 84px; height: 78px; margin: 0 auto; border-radius: 50%; background: var(--c); box-shadow: 0 7px 0 var(--d); font: 800 28px var(--head); color: var(--ink); transition: transform .1s, box-shadow .1s; } .node-b:hover { transform: translateY(-3px) scale(1.04); } .node-b:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--d); } .node.done .node-b { --c: var(--yellow); --d: var(--yellow-d); } .node.next .node-b { --c: #5fe07d; --d: #2fa84c; color: #fff; animation: pulse-node 1.5s infinite; } .node .ui { width: 42px; height: 42px; } @keyframes pulse-node { 50% { filter: brightness(1.12); transform: scale(1.07); } } .node-t { display: block; margin-top: 10px; background: var(--paper); border-radius: 13px; padding: 5px 9px 4px; font: 700 14px/1.15 var(--head); box-shadow: 0 3px 0 rgba(13, 42, 66, .25); } .node-t .stars { margin-top: 3px; } .node-t .st { width: 16px; height: 16px; } /* Лист темы и диалоги */ .back { position: fixed; inset: 0; background: rgba(12, 32, 52, .62); z-index: 50; display: grid; place-items: center; padding: 14px; overflow: auto; } .sheet { background: var(--paper); border-radius: 26px; width: min(470px, 100%); padding: 24px; text-align: center; box-shadow: 0 10px 0 rgba(0, 0, 0, .3); } .sheet i.t { display: block; width: 84px; height: 84px; margin: 0 auto 8px; } .sheet h3 { font-size: 24px; margin-bottom: 4px; } .sheet p { margin: 6px 0 12px; color: var(--muted); } .sheet .row-btn { justify-content: center; margin-top: 16px; } .sheet .facts { display: flex; justify-content: center; gap: 16px; font-size: 14px; color: var(--muted); flex-wrap: wrap; } .sheet .facts b { color: var(--ink); } /* Окно разбора: Искра объясняет */ .explain { background: var(--soft); border-radius: 28px; width: min(740px, 100%); max-height: calc(100vh - 28px); overflow: auto; box-shadow: 0 10px 0 rgba(0, 0, 0, .3); } .ex-head { display: flex; gap: 14px; padding: 16px 20px 0; align-items: flex-start; position: sticky; top: 0; background: var(--soft); z-index: 2; padding-bottom: 8px; } .ex-m { flex: 0 0 auto; width: 88px; height: 102px; } .ex-say { flex: 1; min-width: 0; margin-top: 8px; font: 700 18px/1.3 var(--head); } .ex-x { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: #dfe7f1; display: grid; place-items: center; color: var(--muted); transition: background .15s; } .ex-x:hover { background: #cfdae7; color: var(--ink); } .ex-body { padding: 4px 20px 16px; } .ex-q { background: var(--paper); border-radius: 16px; padding: 12px 16px; margin-bottom: 12px; font-size: 16px; font-weight: 600; } .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } .pair div { border-radius: 16px; padding: 8px 15px; overflow-wrap: anywhere; } .pair small { display: block; font: 600 13px var(--head); opacity: .8; } .pair b { font: 800 23px var(--head); } .pair .yours { background: var(--bad-bg); color: #b4222b; } .pair .right { background: var(--ok-bg); color: #1a7f35; } .trap { padding: 11px 15px; background: var(--warn-bg); border-radius: 15px; margin-bottom: 12px; display: flex; gap: 10px; align-items: flex-start; } .trap i { flex: 0 0 auto; width: 32px; height: 32px; display: block; } .ex-sol { background: var(--paper); border-radius: 16px; padding: 12px 18px; font-weight: 600; } .ex-sol h4 { font-size: 17px; margin-bottom: 4px; } .ex-sol p { margin: 6px 0; } .ex-sol ol { margin: 6px 0; padding-left: 24px; } .ex-sol li { margin: 3px 0; } .ex-foot { padding: 4px 20px 22px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .ex-foot .sp { flex: 1; } .opts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--muted); } .opts label { display: flex; gap: 6px; align-items: center; cursor: pointer; } select { font: 700 15px var(--body); padding: 7px 10px; border-radius: 11px; border: 2px solid var(--line); background: #fff; color: var(--ink); } input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--blue); } /* Экран задания */ .play { max-width: 860px; margin: 0 auto; padding: 18px 18px 60px; } .play-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .quit { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; display: grid; place-items: center; transition: background .15s; } .quit:hover { background: rgba(255, 255, 255, .34); } .prog { flex: 1 1 180px; min-width: 120px; color: #fff; font: 700 15px var(--head); } .prog-bar { height: 16px; border-radius: 9px; background: rgba(0, 0, 0, .25); overflow: hidden; margin-top: 4px; } .prog-bar u { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #ffe14d, #ffb31a); transition: width .4s; } .pill { display: flex; align-items: center; gap: 6px; padding: 5px 13px 5px 8px; border-radius: 15px; background: var(--paper); font: 800 17px var(--head); box-shadow: 0 4px 0 rgba(13, 42, 66, .28); white-space: nowrap; } .pill i { width: 26px; height: 26px; display: block; } .pill.hot { background: #fff0d6; color: #d0541b; } .task-card { padding: 20px 26px 24px; } .task-tag { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 11px; } .task-tag i { width: 36px; height: 36px; display: block; } .task-tag b { font: 700 16px var(--head); } .task-tag small { color: var(--muted); font-size: 14px; } .task-tag .stars { margin-left: auto; } .tno { font: 800 15px var(--head); background: var(--ink); color: #fff; padding: 3px 13px; border-radius: 10px; } .q { font-size: 21px; line-height: 1.5; font-weight: 700; margin: 0 0 18px; overflow-wrap: anywhere; } .q pre, .ex-q pre { background: #1c2740; color: #e7eeff; border-radius: 14px; padding: 12px 16px; font: 500 16px/1.5 Consolas, "Cascadia Mono", monospace; overflow-x: auto; margin: 10px 0; } .q table.mt, .ex-q table.mt { border-collapse: collapse; margin: 10px 0; } .q table.mt th, .q table.mt td, .ex-q table.mt th, .ex-q table.mt td { border: 2px solid var(--ink); padding: 5px 13px; text-align: center; min-width: 38px; font-size: 18px; } .ex-q table.mt th, .ex-q table.mt td { font-size: 15px; padding: 3px 9px; border-width: 1.5px; } .q table.mt th, .ex-q table.mt th { background: #eaf1f8; } .q table.mt.wide td:first-child, .ex-q table.mt.wide td:first-child { text-align: left; } input[type=text] { font: 800 21px var(--body); padding: 11px 16px; width: 100%; max-width: 280px; border: 3px solid var(--line); border-radius: 15px; background: var(--soft); color: var(--ink); transition: border-color .15s, background .15s; } input[type=text]:focus { outline: none; border-color: #38a9de; background: #fff; } input[type=text]::placeholder { color: #9aa8bc; font-weight: 700; } input[type=text].right { border-color: var(--ok); background: var(--ok-bg); } input[type=text].wrong { border-color: var(--red); background: var(--bad-bg); } .ans { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; } .choice { --c: #fff; font: 700 18px/1.25 var(--head); padding: 13px 16px; border-radius: 16px; background: var(--c); box-shadow: inset 0 0 0 3px var(--line), 0 4px 0 #c5d0de; transition: transform .08s, box-shadow .08s, background .15s; overflow-wrap: anywhere; } .choice:hover:not(:disabled) { background: #eef8ff; box-shadow: inset 0 0 0 3px #79c6ec, 0 4px 0 #79c6ec; } .choice:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 0 0 3px #79c6ec, 0 1px 0 #79c6ec; } .choice.picked { background: #e3f4ff; box-shadow: inset 0 0 0 3px #38a9de, 0 4px 0 #38a9de; } .choice.right { background: var(--ok-bg); box-shadow: inset 0 0 0 3px var(--ok), 0 4px 0 var(--ok-d); } .choice.wrong { background: var(--bad-bg); box-shadow: inset 0 0 0 3px var(--red), 0 4px 0 var(--red-d); } .choice:disabled { cursor: default; } .tools { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; align-items: center; } .tools .sp { flex: 1; } .hint { display: flex; gap: 10px; margin-top: 16px; padding: 11px 15px; background: var(--warn-bg); border-radius: 15px; } .hint i { flex: 0 0 auto; width: 32px; height: 32px; display: block; } .friend { display: flex; align-items: center; gap: 10px; margin-top: 16px; } .friend > span { flex: 0 0 auto; width: 76px; height: 90px; } .friend .bubble { max-width: 500px; } .result-bar { position: sticky; bottom: 14px; margin-top: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 18px; border-radius: 19px; font: 800 19px var(--head); z-index: 3; } .result-bar.good { background: #d5f7dd; color: #16702e; box-shadow: 0 6px 0 var(--ok); } .result-bar.bad { background: #ffdfe0; color: #ac1c26; box-shadow: 0 6px 0 var(--red); } .result-bar .sp { flex: 1; } .result-bar small { font: 700 15px var(--body); display: block; } /* Испытания */ .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .flt { padding: 6px 14px; border-radius: 12px; background: rgba(255, 255, 255, .17); color: #fff; font: 600 15px var(--head); transition: background .15s; } .flt:hover { background: rgba(255, 255, 255, .28); } .flt.on { background: var(--paper); color: var(--ink); } .trial-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; } @media (max-width: 400px) { .trial-list { grid-template-columns: 1fr; } } .trial { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; border-top: 8px solid var(--c); } .trial-top { display: flex; align-items: center; gap: 12px; } .trial-top i { flex: 0 0 auto; width: 54px; height: 54px; display: block; } .trial h3 { font-size: 18px; } .trial p { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); flex: 1; } .trial-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .trial-foot .sp { flex: 1; } .tagnum { font: 600 13px var(--head); background: var(--soft); padding: 3px 9px; border-radius: 8px; color: var(--muted); } /* Экзамен */ .x-grid { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; max-width: 1060px; margin: 0 auto; } @media (max-width: 800px) { .x-grid { grid-template-columns: 1fr; } } .x-side { padding: 16px; } .x-side b { font: 700 16px var(--head); } .nums { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; } .num { width: 44px; height: 44px; border-radius: 13px; background: var(--soft); box-shadow: inset 0 0 0 2px var(--line); font: 700 16px var(--head); position: relative; transition: transform .1s; } .num:hover { transform: translateY(-2px); } .num.done { background: #d9f0ff; box-shadow: inset 0 0 0 2px #79c6ec; color: var(--blue-d); } .num.cur { background: var(--ink); box-shadow: none; color: #fff; } .num.flag::after { content: ""; position: absolute; top: -3px; right: -3px; width: 13px; height: 13px; border-radius: 50%; background: #ff9b14; border: 2px solid #fff; } .num.ok { background: var(--ok-bg); box-shadow: inset 0 0 0 2px var(--ok); color: #1a7f35; } .num.no { background: var(--bad-bg); box-shadow: inset 0 0 0 2px var(--red); color: #b4222b; } .legend { display: flex; gap: 11px; flex-wrap: wrap; font-size: 13px; color: var(--muted); } .dot { display: inline-block; width: 11px; height: 11px; border-radius: 4px; margin-right: 4px; vertical-align: -1px; } .timer { display: flex; align-items: center; gap: 7px; font: 800 20px var(--head); font-variant-numeric: tabular-nums; } .timer i { width: 28px; height: 28px; display: block; } .pill.low { background: #ffe0e1; color: #c5222c; animation: pulse-low 1s infinite; } @keyframes pulse-low { 50% { transform: scale(1.05); } } /* Итог */ .victory { text-align: center; padding: 26px 22px 28px; } .victory .v-m { width: 124px; height: 144px; margin: 0 auto 2px; } .big-stars { display: flex; justify-content: center; gap: 6px; margin: 8px 0; } .big-stars .st { width: 66px; height: 66px; animation: starpop .5s cubic-bezier(.3, 1.8, .5, 1) both; } .big-stars .st:nth-child(2) { animation-delay: .18s; width: 80px; height: 80px; margin-top: -9px; } .big-stars .st:nth-child(3) { animation-delay: .36s; } @keyframes starpop { from { transform: scale(0) rotate(-50deg); opacity: 0; } to { transform: none; opacity: 1; } } .victory h1 { font: 800 30px/1.15 var(--head); margin: 2px 0 6px; } .score { font: 900 48px/1 var(--head); margin: 6px 0; } .score small { font: 700 20px var(--head); color: var(--muted); } .gain { display: inline-flex; align-items: center; gap: 6px; background: #fff3cf; padding: 5px 14px 5px 9px; border-radius: 14px; font: 800 18px var(--head); margin: 4px; } .gain i { width: 28px; height: 28px; display: block; } .victory .row-btn { justify-content: center; margin-top: 18px; } table.t { width: 100%; border-collapse: collapse; } table.t th, table.t td { padding: 9px 11px; text-align: left; border-bottom: 2px solid var(--soft); font-size: 15px; } table.t th { color: var(--muted); font: 600 13px var(--head); } .t-wrap { overflow-x: auto; } .tagok { color: #1a7f35; font: 800 14px var(--head); } /* Награды */ .badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; } .badge { background: var(--paper); border-radius: 20px; padding: 14px 12px; text-align: center; box-shadow: 0 5px 0 rgba(13, 42, 66, .28); } .badge i { display: block; width: 76px; height: 76px; margin: 0 auto 5px; } .badge b { display: block; font: 700 15px/1.15 var(--head); } .badge small { display: block; color: var(--muted); font-size: 13px; line-height: 1.25; margin-top: 3px; } .badge.off { background: rgba(255, 255, 255, .55); } .badge.off i { filter: grayscale(1) opacity(.45); } .badge.off b { color: #485670; } .badge.off small { color: #465369; } /* Всплывающие уведомления и эффекты */ .toasts { position: fixed; top: 74px; right: 14px; z-index: 70; display: flex; flex-direction: column; gap: 9px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 11px; background: var(--ink); color: #fff; padding: 9px 17px 9px 11px; border-radius: 17px; box-shadow: 0 5px 0 rgba(0, 0, 0, .3); max-width: 320px; } .toast i { flex: 0 0 auto; width: 44px; height: 44px; display: block; } .toast b { display: block; font: 700 16px/1.15 var(--head); color: #ffe14d; } .toast small { font-size: 14px; font-weight: 700; line-height: 1.2; display: block; } .conf { position: fixed; left: 50%; top: 42%; width: 15px; height: 15px; z-index: 60; pointer-events: none; clip-path: polygon(50% 0, 100% 100%, 0 100%); animation: conf 1s cubic-bezier(.15, .7, .4, 1) forwards; } @keyframes conf { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } } .fly { position: fixed; left: 50%; top: 44%; z-index: 61; pointer-events: none; font: 900 40px var(--head); color: #ffd21f; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; transform: translateX(-50%); animation: fly 1s ease-out forwards; } @keyframes fly { from { opacity: 0; transform: translate(-50%, 16px) scale(.6); } 25% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } to { opacity: 0; transform: translate(-50%, -80px) scale(1); } } .frac { display: inline-flex; flex-direction: column; text-align: center; vertical-align: middle; font-size: .82em; line-height: 1.15; margin: 0 3px; } .frac span:first-child { border-bottom: 2px solid currentColor; padding: 0 3px; } .brk { overflow-wrap: anywhere; word-break: break-all; } .note { color: #d5eaf5; font-size: 14px; margin-top: 18px; } .warn { padding: 10px 14px; border-radius: 13px; background: var(--warn-bg); font-size: 15px; margin-top: 12px; } @media (max-width: 1120px) { .tab span { display: none; } .tab { padding: 6px 9px; } } @media (max-width: 860px) { .hero { grid-template-columns: 1fr; } .title { font-size: 29px; } .hero-txt h1 { font-size: 25px; } } @media (max-width: 640px) { .brand span { display: none; } .hud-in { padding: 6px 10px; gap: 8px; } .stats { margin-left: 0; } .xpbar { width: 60px; } } @media (max-width: 540px) { .hero-main { padding: 14px; } .hero-mascot { width: 76px; height: 90px; } .task-card { padding: 16px; } .q { font-size: 19px; } .pair b { font-size: 19px; } .world-head .row-btn { margin-left: 0; } .ex-m { width: 62px; height: 72px; } .ex-say { font-size: 16px; } .gate-logo { width: 140px; height: 140px; } .gate .title { font-size: 30px; } .friend > span { width: 56px; height: 66px; } .exam-door b { font-size: 40px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; } } @media print { .hud, .noprint, .back, .toasts { display: none !important; } body { background: #fff; } .card { box-shadow: none; } .title, .sec, .lead { color: #000; text-shadow: none; } } /* ---------- Подписи и дорожка: общее ---------- */ .sec-count { font: 600 14px var(--head); opacity: .85; margin-left: 8px; text-shadow: none; } .world em { display: block; font: 600 12px var(--head); font-style: normal; opacity: .92; margin-top: 2px; position: relative; } .path svg.road polyline { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 22; } .btn.big i { width: 28px; height: 28px; } /* ---------- ОГЭ: тот же яркий стиль, но взрослее ---------- */ html[data-mode="oge"] .world { border-radius: 18px; } html[data-mode="oge"] .card { border-radius: 18px; } html[data-mode="oge"] .world:hover i { animation: none; transform: scale(1.06); transition: transform .15s; } html[data-mode="oge"] .hero-main::after { background: rgba(255, 255, 255, .16); } /* ---------- Кнопка ЕГЭ на входе: уже в новой теме ---------- */ .exam-door.ege { --d: #27e0ff; background: linear-gradient(150deg, #151a3f, #0a0d24); color: #eaf2ff; box-shadow: 0 0 0 1px rgba(39, 224, 255, .5), 0 0 34px rgba(109, 92, 255, .55); } .exam-door.ege:hover, .exam-door.ege:active { box-shadow: 0 0 0 1px rgba(39, 224, 255, .9), 0 0 50px rgba(39, 224, 255, .5); } .exam-door.ege b { background: linear-gradient(90deg, #27e0ff, #a78bff); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- ЕГЭ: тёмная неоновая тема ---------- */ html[data-mode="ege"] { --ink: #e8eeff; --muted: #93a0c4; --paper: rgba(20, 26, 56, .72); --soft: rgba(255, 255, 255, .06); --line: rgba(255, 255, 255, .14); --ok: #2fe39a; --ok-d: #16a56d; --ok-bg: rgba(47, 227, 154, .14); --bad-bg: rgba(255, 79, 120, .15); --warn-bg: rgba(255, 196, 61, .13); --neon: #27e0ff; --violet: #7c5cff; --lime: #b6ff5c; --pink: #ff4f78; } html[data-mode="ege"] body { background-color: #070a18; background-image: radial-gradient(900px 520px at 12% -6%, rgba(124, 92, 255, .38), transparent 62%), radial-gradient(760px 480px at 96% 8%, rgba(39, 224, 255, .22), transparent 60%), radial-gradient(900px 620px at 60% 112%, rgba(255, 79, 216, .14), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='20' cy='34' r='1' opacity='.55'/%3E%3Ccircle cx='96' cy='12' r='.7' opacity='.4'/%3E%3Ccircle cx='180' cy='60' r='1.2' opacity='.5'/%3E%3Ccircle cx='60' cy='130' r='.8' opacity='.35'/%3E%3Ccircle cx='140' cy='170' r='1' opacity='.5'/%3E%3Ccircle cx='220' cy='210' r='.7' opacity='.4'/%3E%3Ccircle cx='30' cy='212' r='1.1' opacity='.3'/%3E%3C/g%3E%3C/svg%3E"); background-attachment: fixed; } html[data-mode="ege"] .card, html[data-mode="ege"] .badge, html[data-mode="ege"] .bubble { background: var(--paper); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 14px 40px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 18px; } html[data-mode="ege"] .bubble.left::before { border-right-color: rgba(30, 36, 70, .9); } html[data-mode="ege"] .hud { background: rgba(9, 12, 30, .78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(255, 255, 255, .09); } html[data-mode="ege"] .brand img { filter: drop-shadow(0 0 10px rgba(39, 224, 255, .35)); } html[data-mode="ege"] .tab:hover { background: rgba(255, 255, 255, .08); } html[data-mode="ege"] .tab.on { background: rgba(39, 224, 255, .12); color: var(--neon); box-shadow: inset 0 0 0 1px rgba(39, 224, 255, .55); } html[data-mode="ege"] .mode-pill { background: linear-gradient(90deg, var(--violet), var(--neon)); color: #06101f; } html[data-mode="ege"] .xpbar { background: rgba(255, 255, 255, .12); } html[data-mode="ege"] .xpbar u, html[data-mode="ege"] .prog-bar u { background: linear-gradient(90deg, var(--violet), var(--neon)); box-shadow: 0 0 12px rgba(39, 224, 255, .7); } html[data-mode="ege"] .goalbar { background: rgba(255, 255, 255, .1); } html[data-mode="ege"] .goalbar u { background: linear-gradient(90deg, #17c98a, var(--lime)); box-shadow: 0 0 12px rgba(182, 255, 92, .55); } html[data-mode="ege"] .title { background: linear-gradient(90deg, #fff, #9fe9ff 55%, #b6a6ff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; } html[data-mode="ege"] .sec { text-shadow: none; } html[data-mode="ege"] .lead, html[data-mode="ege"] .note { color: var(--muted); } /* Кнопки: плоские, со свечением */ html[data-mode="ege"] .btn { --d: transparent; background: rgba(255, 255, 255, .08); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .17); border-radius: 12px; } html[data-mode="ege"] .btn:hover:not(:disabled) { background: rgba(255, 255, 255, .14); filter: none; transform: translateY(-1px); } html[data-mode="ege"] .btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); } html[data-mode="ege"] .btn.go { background: linear-gradient(100deg, var(--violet), var(--neon)); color: #06101f; box-shadow: 0 6px 22px rgba(39, 224, 255, .32); } html[data-mode="ege"] .btn.ok { background: linear-gradient(100deg, #18c98b, var(--lime)); color: #06101f; box-shadow: 0 6px 22px rgba(47, 227, 154, .3); } html[data-mode="ege"] .btn.red { background: linear-gradient(100deg, #ff4f78, #ff4fd8); color: #fff; box-shadow: 0 6px 24px rgba(255, 79, 150, .38); } html[data-mode="ege"] .btn.blue { background: rgba(39, 224, 255, .14); color: var(--neon); box-shadow: inset 0 0 0 1px rgba(39, 224, 255, .55); } html[data-mode="ege"] .btn.go:hover:not(:disabled), html[data-mode="ege"] .btn.ok:hover:not(:disabled), html[data-mode="ege"] .btn.red:hover:not(:disabled) { filter: brightness(1.1); } /* Приветствие */ html[data-mode="ege"] .hero-main { background: linear-gradient(120deg, rgba(124, 92, 255, .34), rgba(39, 224, 255, .12)); box-shadow: 0 14px 40px rgba(0, 0, 0, .35); } html[data-mode="ege"] .hero-main::after { background: rgba(39, 224, 255, .07); } html[data-mode="ege"] .hero-txt p { color: #c3cdeb; } /* Предметы: тёмные плитки с подсветкой своего цвета */ html[data-mode="ege"] .world { background: linear-gradient(165deg, color-mix(in srgb, var(--c) 32%, #0c1030), #0b0e26 78%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 58%, transparent), 0 10px 26px rgba(0, 0, 0, .4); border-radius: 16px; } html[data-mode="ege"] .world::before { display: none; } html[data-mode="ege"] .world:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--c), 0 0 30px color-mix(in srgb, var(--c) 55%, transparent); } html[data-mode="ege"] .world:active { transform: translateY(0); } html[data-mode="ege"] .world:hover i { animation: none; } html[data-mode="ege"] .world i { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--c) 70%, transparent)); } html[data-mode="ege"] .world small { background: rgba(255, 255, 255, .08); } html[data-mode="ege"] .world .mini { background: rgba(255, 255, 255, .1); } html[data-mode="ege"] .world .mini u { background: var(--neon); box-shadow: 0 0 8px var(--neon); } html[data-mode="ege"] .world-head { background: linear-gradient(120deg, color-mix(in srgb, var(--c) 40%, #0c1030), #0b0e26); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 58%, transparent), 0 14px 40px rgba(0, 0, 0, .4); border-radius: 18px; } /* Темы как созвездие */ html[data-mode="ege"] .path svg.road polyline { stroke: rgba(39, 224, 255, .45); stroke-width: 2; stroke-dasharray: none; filter: drop-shadow(0 0 5px rgba(39, 224, 255, .9)); } html[data-mode="ege"] .node-b { width: 64px; height: 64px; margin-top: 6px; background: #10143a; color: #cfd8f7; font-size: 21px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); } html[data-mode="ege"] .node-b:active { transform: scale(.96); box-shadow: 0 0 0 2px var(--neon); } html[data-mode="ege"] .node.done .node-b { background: radial-gradient(circle, #fff3b0, #ffc93c 62%, #a06a00); color: #2a1e00; box-shadow: 0 0 26px rgba(255, 201, 60, .85); } html[data-mode="ege"] .node.next .node-b { background: radial-gradient(circle, #d6fbff, var(--neon) 62%, #0a7a99); color: #05202c; box-shadow: 0 0 30px rgba(39, 224, 255, .95); } html[data-mode="ege"] .node-t { background: rgba(14, 18, 46, .85); border: 1px solid rgba(255, 255, 255, .13); box-shadow: none; } html[data-mode="ege"] .st path { fill: rgba(255, 255, 255, .13); stroke: rgba(255, 255, 255, .28); } html[data-mode="ege"] .st.on path { fill: #ffd54a; stroke: #ffd54a; filter: drop-shadow(0 0 4px rgba(255, 213, 74, .85)); } /* Задание */ html[data-mode="ege"] .quit { background: rgba(255, 255, 255, .09); } html[data-mode="ege"] .prog-bar { background: rgba(255, 255, 255, .1); height: 8px; } html[data-mode="ege"] .prog { color: #cdd7f4; } html[data-mode="ege"] .pill { background: rgba(20, 26, 56, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } html[data-mode="ege"] .pill.hot { background: rgba(255, 123, 28, .18); color: #ffb36b; box-shadow: inset 0 0 0 1px rgba(255, 123, 28, .6), 0 0 18px rgba(255, 123, 28, .4); } html[data-mode="ege"] .pill.low { background: rgba(255, 79, 120, .2); color: #ff9db3; } html[data-mode="ege"] .tno { background: linear-gradient(90deg, var(--violet), var(--neon)); color: #06101f; } html[data-mode="ege"] input[type=text] { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .22); color: #fff; border-radius: 12px; } html[data-mode="ege"] input[type=text]:focus { background: rgba(255, 255, 255, .09); border-color: var(--neon); box-shadow: 0 0 0 3px rgba(39, 224, 255, .22); } html[data-mode="ege"] input[type=text].right { border-color: var(--ok); background: var(--ok-bg); } html[data-mode="ege"] input[type=text].wrong { border-color: var(--pink); background: var(--bad-bg); } html[data-mode="ege"] .choice { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); border-radius: 12px; } html[data-mode="ege"] .choice:hover:not(:disabled) { background: rgba(39, 224, 255, .1); box-shadow: inset 0 0 0 1px var(--neon), 0 0 18px rgba(39, 224, 255, .25); } html[data-mode="ege"] .choice:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 0 0 1px var(--neon); } html[data-mode="ege"] .choice.picked { background: rgba(39, 224, 255, .16); box-shadow: inset 0 0 0 1px var(--neon), 0 0 18px rgba(39, 224, 255, .3); } html[data-mode="ege"] .choice.right { background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok), 0 0 18px rgba(47, 227, 154, .3); } html[data-mode="ege"] .choice.wrong { background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--pink); } html[data-mode="ege"] .q table.mt th, html[data-mode="ege"] .q table.mt td, html[data-mode="ege"] .ex-q table.mt th, html[data-mode="ege"] .ex-q table.mt td { border-color: rgba(255, 255, 255, .3); } html[data-mode="ege"] .q table.mt th, html[data-mode="ege"] .ex-q table.mt th { background: rgba(255, 255, 255, .08); } html[data-mode="ege"] .q pre, html[data-mode="ege"] .ex-q pre { background: #050817; box-shadow: inset 0 0 0 1px rgba(39, 224, 255, .28); color: #9df3ff; } html[data-mode="ege"] .result-bar { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 14px; } html[data-mode="ege"] .result-bar.good { background: rgba(10, 56, 42, .92); color: #7dffc4; box-shadow: inset 0 0 0 1px var(--ok), 0 0 26px rgba(47, 227, 154, .3); } html[data-mode="ege"] .result-bar.bad { background: rgba(64, 14, 32, .92); color: #ff9db3; box-shadow: inset 0 0 0 1px var(--pink), 0 0 26px rgba(255, 79, 120, .25); } html[data-mode="ege"] .num { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .17); } html[data-mode="ege"] .num.done { background: rgba(39, 224, 255, .13); box-shadow: inset 0 0 0 1px rgba(39, 224, 255, .7); color: var(--neon); } html[data-mode="ege"] .num.cur { background: linear-gradient(135deg, var(--violet), var(--neon)); color: #06101f; box-shadow: 0 0 16px rgba(39, 224, 255, .6); } html[data-mode="ege"] .num.flag::after { border-color: #0a0e26; } html[data-mode="ege"] .num.ok { background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok); color: var(--ok); } html[data-mode="ege"] .num.no { background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--pink); color: #ff9db3; } html[data-mode="ege"] .trial { border-top: 0; box-shadow: inset 0 2px 0 var(--c), 0 14px 40px rgba(0, 0, 0, .35); } html[data-mode="ege"] .flt { background: rgba(255, 255, 255, .07); color: #cdd7f4; border-radius: 10px; } html[data-mode="ege"] .flt.on { background: var(--neon); color: #06101f; } html[data-mode="ege"] .tagok { color: var(--ok); } /* Окно разбора и диалоги */ html[data-mode="ege"] .back { background: rgba(3, 5, 16, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } html[data-mode="ege"] .explain, html[data-mode="ege"] .sheet { background: #0e1230; box-shadow: 0 0 0 1px rgba(39, 224, 255, .28), 0 30px 80px rgba(0, 0, 0, .6); border-radius: 20px; } html[data-mode="ege"] .ex-head { background: #0e1230; } html[data-mode="ege"] .ex-x { background: rgba(255, 255, 255, .09); } html[data-mode="ege"] .ex-x:hover { background: rgba(255, 255, 255, .17); } html[data-mode="ege"] .ex-q, html[data-mode="ege"] .ex-sol { background: rgba(255, 255, 255, .05); border-radius: 12px; } html[data-mode="ege"] .pair div { border-radius: 12px; } html[data-mode="ege"] .pair .yours { color: #ff9db3; } html[data-mode="ege"] .pair .right { color: #7dffc4; } html[data-mode="ege"] .trap, html[data-mode="ege"] .hint { border-radius: 12px; } html[data-mode="ege"] select { background: #161b42; border-color: rgba(255, 255, 255, .2); color: var(--ink); } html[data-mode="ege"] .gain { background: rgba(39, 224, 255, .11); color: #b5f4ff; } html[data-mode="ege"] table.t th, html[data-mode="ege"] table.t td { border-bottom-color: rgba(255, 255, 255, .08); } html[data-mode="ege"] .badge.off { background: rgba(255, 255, 255, .03); } html[data-mode="ege"] .badge.off b { color: #8f9bbd; } html[data-mode="ege"] .badge.off small { color: #7f8bad; } html[data-mode="ege"] .toast { background: rgba(14, 18, 48, .96); box-shadow: 0 0 0 1px rgba(39, 224, 255, .4), 0 14px 40px rgba(0, 0, 0, .5); border-radius: 14px; } html[data-mode="ege"] .toast b { color: var(--neon); } html[data-mode="ege"] .fly { color: var(--neon); -webkit-text-stroke: 0; text-shadow: 0 0 22px rgba(39, 224, 255, .95); } html[data-mode="ege"] .ava:hover { transform: scale(1.06); } /* Сфера-ассистент */ .orb { overflow: visible; filter: drop-shadow(0 0 14px rgba(39, 224, 255, .55)); } .orb .o-ring { transform-origin: 60px 78px; animation: spin 16s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .orb .m-flame { transform-origin: 60px 42px; } html[data-mode="ege"] .bob { animation-duration: 4.4s; } @media print { html[data-mode="ege"] body { background: #fff; color: #000; } html[data-mode="ege"] .title { color: #000; background: none; } } .task-in { animation: taskin .22s ease-out; } @keyframes taskin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .world-head .btn i { width: 24px; height: 24px; filter: none; flex: 0 0 auto; } .hud-in { max-width: 1320px; } @media (max-width: 1250px) { html[data-mode="ege"] .tab span { display: none; } html[data-mode="ege"] .tab { padding: 6px 9px; } } .brand img { width: 62px; height: 62px; } .brand b { font: 800 19px/1 var(--head); } @media (max-width: 640px) { .brand img { width: 50px; height: 50px; } .brand b { font-size: 16px; } } /* ---------- Входной тест и личный план ---------- */ .gate-m { width: 110px; height: 128px; } .gate-pic { width: 110px; height: 110px; } .gate-worlds { width: 100%; max-width: 900px; margin-top: 6px; } .goal-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; width: 100%; max-width: 720px; margin-top: 14px; } .goal-door { background: var(--paper); border-radius: 18px; padding: 16px 14px; box-shadow: 0 5px 0 rgba(13, 42, 66, .28), inset 0 0 0 3px transparent; transition: transform .1s, box-shadow .1s; color: var(--ink); } .goal-door:hover { transform: translateY(-3px); } .goal-door b { display: block; font: 800 21px/1.15 var(--head); } .goal-door small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; } .goal-door.on { background: var(--yellow); box-shadow: 0 5px 0 var(--yellow-d), inset 0 0 0 3px var(--yellow-d); } .goal-door.on small { color: var(--ink); } .q-date { margin-top: 16px; padding: 12px 18px; width: 100%; max-width: 720px; } .q-date label { font: 700 16px var(--head); display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .q-date small { display: block; color: var(--muted); margin-top: 5px; font-size: 14px; } input[type=date] { font: 700 15px var(--body); padding: 7px 10px; border-radius: 11px; border: 2px solid var(--line); background: #fff; color: var(--ink); } .plan-top { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .plan-m { flex: 0 0 auto; width: 104px; height: 120px; } .plan-head { flex: 1 1 280px; min-width: 0; } .plan-head small { color: var(--muted); font-size: 14px; } .plan-head h1 { font: 800 31px/1.15 var(--head); margin: 2px 0 5px; } .plan-head p { margin: 0 0 14px; } .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; margin-top: 16px; } @media (max-width: 400px) { .plan-grid { grid-template-columns: 1fr; } } .plan-grid h3 { margin-bottom: 8px; } .plan-sum { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-end; align-content: flex-start; } .sum-num { font: 900 42px/1 var(--head); } .sum-num small { display: block; font: 600 13px var(--head); color: var(--muted); margin-top: 4px; } .verdict { flex: 1 0 100%; margin: 8px 0 0; padding: 11px 14px; border-radius: 13px; background: var(--ok-bg); font-weight: 800; } .verdict.bad { background: var(--bad-bg); } .plan-set { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; font-size: 14px; } .plan-set label { display: flex; align-items: center; gap: 7px; } tr.rec td { background: var(--ok-bg); } .late { color: #c5222c; font-size: 14px; } .plan-prog { margin-top: 16px; } .plan-prog h3 { margin-bottom: 8px; } .plan-prog small { display: block; margin-top: 6px; } .topic-list { display: grid; gap: 4px; } .topic-row { display: grid; grid-template-columns: minmax(120px, 1.3fr) minmax(70px, 1fr) 46px; gap: 12px; align-items: center; padding: 7px 8px; border-radius: 11px; text-align: left; color: var(--ink); transition: background .12s; } .topic-row:hover { background: var(--soft); } .topic-row em { font: 700 14px var(--head); font-style: normal; text-align: right; color: var(--muted); } .tbar { height: 10px; border-radius: 6px; background: var(--line); overflow: hidden; display: block; } .tbar u { display: block; height: 100%; background: var(--red); border-radius: 6px; } .tbar u.mid { background: #ffb31a; } .tbar u.hi { background: var(--ok); } .sched { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 11px; } .lesson { display: flex; gap: 12px; align-items: flex-start; padding: 12px 15px; font-size: 15px; } .lesson b { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--ink); font: 800 15px var(--head); } html[data-mode="ege"] .goal-door { background: var(--paper); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); border-radius: 14px; } html[data-mode="ege"] .goal-door.on { background: rgba(39, 224, 255, .15); box-shadow: inset 0 0 0 1px var(--neon), 0 0 22px rgba(39, 224, 255, .35); } html[data-mode="ege"] .goal-door.on small { color: #cdd7f4; } html[data-mode="ege"] input[type=date] { background: #161b42; border-color: rgba(255, 255, 255, .2); color: var(--ink); color-scheme: dark; } html[data-mode="ege"] .lesson b { background: linear-gradient(135deg, var(--violet), var(--neon)); color: #06101f; } html[data-mode="ege"] .sum-num { background: linear-gradient(90deg, #fff, #9fe9ff); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-mode="ege"] .sum-num small { -webkit-text-fill-color: var(--muted); } html[data-mode="ege"] .tbar { background: rgba(255, 255, 255, .1); } html[data-mode="ege"] .tbar u { background: var(--pink); } html[data-mode="ege"] .tbar u.mid { background: #ffc43d; } html[data-mode="ege"] .tbar u.hi { background: var(--ok); } html[data-mode="ege"] .late { color: #ff9db3; } html[data-mode="ege"] .gate-worlds .world { min-height: 0; } @media print { .plan .card { break-inside: avoid; border: 1px solid #ccc; } .sum-num, .plan-head h1 { color: #000; -webkit-text-fill-color: #000; } } /* ---------- Шпаргалка, панель учителя ---------- */ .sheet.howto { width: min(680px, 100%); max-height: calc(100vh - 28px); overflow: auto; } .howto .ex-q, .howto .ex-sol { border: 1px solid var(--line); margin-bottom: 10px; } input[type=password] { font: 800 21px var(--body); padding: 11px 16px; flex: 1 1 190px; border: 3px solid var(--line); border-radius: 15px; background: var(--paper); color: var(--ink); } input[type=password]:focus { outline: none; border-color: #38a9de; } .teacher table.t td div { margin: 2px 0; font-size: 14px; } .week { align-items: flex-start; } .week .sum-num { font-size: 34px; flex: 1 1 110px; } .sheet.howto .ex-sol p, .sheet.howto .ex-q p { color: var(--ink); } /* ---------- Облако: вход и кабинеты ---------- */ .auth { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; text-align: left; margin-top: 12px; } .auth.plain { margin: 12px auto 0; } .auth label { display: flex; flex-direction: column; gap: 5px; font: 700 15px var(--head); } .auth input { max-width: none; width: 100%; font: 800 19px var(--body); padding: 10px 14px; border: 3px solid var(--line); border-radius: 13px; background: var(--soft); color: var(--ink); } .auth input:focus { outline: none; border-color: #38a9de; background: #fff; } .auth .btn { align-self: stretch; } .auth-err { color: #c5222c; margin: 0; font-size: 15px; min-height: 0; } .blocked-box { max-width: 420px; width: 100%; background: #ffe4e5; color: #8d1820; text-align: left; margin-top: 10px; } .blocked-box p { margin: 5px 0 0; font-weight: 600; } .role-pill { padding: 5px 12px; border-radius: 11px; background: var(--ink); color: #fff; font: 700 14px var(--head); } .cred-box { display: grid; gap: 9px; margin: 8px 0; text-align: left; background: var(--soft); padding: 12px 15px; border-radius: 13px; } .cred-box small { display: block; color: var(--muted); font-size: 13px; } .cred-box b { font: 800 19px var(--body); overflow-wrap: anywhere; } .add-st { display: flex; gap: 10px; flex-wrap: wrap; } .add-st input { flex: 1 1 220px; max-width: none; } .chip-st { display: inline-block; padding: 3px 10px; border-radius: 9px; background: var(--soft); font: 700 13px var(--head); color: var(--muted); } .chip-st.ok { background: var(--ok-bg); color: #1a7f35; } .chip-st.bad { background: var(--bad-bg); color: #b4222b; } .access-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .access-top b { font: 700 17px var(--head); } .access-date { display: flex; align-items: center; gap: 8px; font-weight: 700; } .rep-plan { padding: 7px 0; border-bottom: 2px solid var(--soft); } .rep-plan:last-child { border-bottom: 0; } .hw-list { display: grid; gap: 11px; } .hw { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 13px 18px; } .hw-t { flex: 1 1 240px; min-width: 0; } .hw-t b { font: 700 17px var(--head); display: block; } .hw-t small { display: block; margin-bottom: 6px; font-size: 14px; } .hw-form { display: flex; flex-direction: column; gap: 11px; } .hw-form > label, .hw-row label { display: flex; flex-direction: column; gap: 4px; font: 700 14px var(--head); } .hw-form input[type=text] { max-width: none; font-size: 17px; padding: 8px 12px; } .hw-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 11px; } .checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 3px 12px; } .check { display: flex; gap: 8px; align-items: center; padding: 4px 0; font-size: 15px; cursor: pointer; } html[data-mode="ege"] .auth input { background: rgba(255, 255, 255, .06); color: #fff; } .auth input { flex: none; } /* ---------- Программирование: тёмный редактор кода с зелёным курсором ---------- */ .exam-door.prog { --c: #16241c; --d: #3ddc84; background: linear-gradient(150deg, #1d2b23, #0f1712); color: #d9ffe8; box-shadow: 0 0 0 2px #3ddc84, 0 9px 0 #0a120d; } .exam-door.prog b { font-family: Consolas, "Cascadia Mono", monospace; color: #3ddc84; letter-spacing: -.02em; font-size: 34px; } .exam-door.prog b::after { content: "_"; animation: blink 1s steps(1) infinite; } .exam-door.prog em { color: #9fe8bf; } @keyframes blink { 50% { opacity: 0; } } /* Кабинет ученика: светлый и тёплый — мятно-голубой фон, белые карточки, зелёные и бирюзовые акценты. */ html[data-mode="prog"] { --ink: #24324a; --muted: #6b7a90; --soft: #f2f8f6; --line: #d7e6e1; --accent: #12b886; --accent-d: #0c9a6f; } html[data-mode="prog"] body { color: var(--ink); background-color: #eaf7f3; background-image: radial-gradient(circle at 8% 0%, #d6f5ea 0, transparent 40%), radial-gradient(circle at 95% 10%, #dcefff 0, transparent 38%), radial-gradient(circle at 50% 100%, #fff4d6 0, transparent 45%); background-attachment: fixed; } html[data-mode="prog"] .hud { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 2px 14px rgba(36, 50, 74, .08); border-bottom: 0; } html[data-mode="prog"] .hud .brand b { color: var(--ink); } html[data-mode="prog"] .title, html[data-mode="prog"] h2.sec { color: var(--ink); text-shadow: none; } html[data-mode="prog"] .tab { color: var(--muted); } html[data-mode="prog"] .tab.on, html[data-mode="prog"] .tab:hover { background: #e3f6ef; color: var(--accent-d); } html[data-mode="prog"] .card { background: #fff; color: var(--ink); border-radius: 22px; box-shadow: 0 6px 22px rgba(36, 50, 74, .08), 0 1px 0 rgba(36, 50, 74, .04); } html[data-mode="prog"] .muted, html[data-mode="prog"] .lead, html[data-mode="prog"] .note { color: var(--muted); } html[data-mode="prog"] .hero-main { background: linear-gradient(120deg, #d9f7ec 0%, #e5f1ff 100%); box-shadow: 0 8px 26px rgba(18, 184, 134, .14); } html[data-mode="prog"] .hero-main::after { background: rgba(255, 255, 255, .45); } html[data-mode="prog"] .hero-txt h1 { color: #0c8a62; } html[data-mode="prog"] .hero-txt p { color: #44566f; } html[data-mode="prog"] .chip, html[data-mode="prog"] .lvl, html[data-mode="prog"] .mode-pill { background: #e3f6ef; color: #0c7a57; } html[data-mode="prog"] .q pre, html[data-mode="prog"] .ex-q pre, .q pre.code, .ex-sol pre.code { background: #f4f7fb; color: #1d3557; box-shadow: inset 0 0 0 1px #dbe4ef; border-radius: 12px; } html[data-mode="prog"] .q, html[data-mode="prog"] .task-tag b { color: var(--ink); } html[data-mode="prog"] .ans input { background: #fff; color: var(--ink); border-color: var(--line); } html[data-mode="prog"] .choice:not(.right):not(.wrong):not(.picked) { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px #dce8f2, 0 4px 0 #dce8f2; } html[data-mode="prog"] .choice:not(.right):not(.wrong):not(.picked):hover { box-shadow: inset 0 0 0 2px var(--accent), 0 4px 0 #bfe9d9; } html[data-mode="prog"] .choice.picked { background: #e3f6ef; color: #0c7a57; box-shadow: inset 0 0 0 3px var(--accent), 0 4px 0 #bfe9d9; } html[data-mode="prog"] .bubble { background: #fff; color: var(--ink); } html[data-mode="prog"] .bubble.left::before { border-right-color: #fff; } html[data-mode="prog"] .explain, html[data-mode="prog"] .sheet, html[data-mode="prog"] .explain .q, html[data-mode="prog"] .explain .card { color: var(--ink); } html[data-mode="prog"] .explain .card { background: #fff; box-shadow: none; } html[data-mode="prog"] .play-top .pill { background: #fff; box-shadow: 0 2px 10px rgba(36, 50, 74, .1); } html[data-mode="prog"] .goalbar, html[data-mode="prog"] .world .mini, html[data-mode="prog"] .xpbar, html[data-mode="prog"] .prog-bar { background: #e2ece9; } html[data-mode="prog"] .goalbar u, html[data-mode="prog"] .world .mini u, html[data-mode="prog"] .prog-bar u { background: linear-gradient(90deg, #12b886, #38d9a9); } html[data-mode="prog"] .t th, html[data-mode="prog"] .t td { border-color: #e3ebf3; } /* Значки ярче: насыщенный цвет и лёгкая тень, в шапке — цветные плашки, чтобы белые значки не терялись. */ html[data-mode="prog"] .pic { filter: saturate(1.25) contrast(1.05) drop-shadow(0 1px 1.5px rgba(36, 50, 74, .22)); } html[data-mode="prog"] .tab i { width: 34px; height: 34px; padding: 4px; border-radius: 11px; background: #fff1c7; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); } html[data-mode="prog"] .tab:nth-child(2) i { background: #ffe1e1; } html[data-mode="prog"] .tab:nth-child(3) i { background: #fff1c7; } html[data-mode="prog"] .tab:nth-child(4) i { background: #e3dcff; } html[data-mode="prog"] .tab:nth-child(5) i { background: #cfe8ff; } html[data-mode="prog"] .tab:nth-child(6) i { background: #d6f5e6; } html[data-mode="prog"] .tab:nth-child(1) i { background: #d6f0ff; } html[data-mode="prog"] .tab.on i { box-shadow: inset 0 0 0 2px var(--accent); } html[data-mode="prog"] .prog { color: var(--ink); } html[data-mode="prog"] .flt { background: #fff; color: var(--muted); box-shadow: 0 1px 6px rgba(36, 50, 74, .08); } html[data-mode="prog"] .flt.on { background: #e3f6ef; color: #0c7a57; } html[data-mode="prog"] .quit { background: #fff; color: var(--ink); box-shadow: 0 2px 10px rgba(36, 50, 74, .12); } html[data-mode="prog"] .quit:hover { background: #e3f6ef; } html[data-mode="prog"] .exam-door.prog { background: linear-gradient(150deg, #e3f6ef, #d9ecff); color: var(--ink); box-shadow: 0 8px 22px rgba(18, 184, 134, .18); } html[data-mode="prog"] .exam-door.prog b { color: #0c8a62; } html[data-mode="prog"] .exam-door.prog em { color: #44566f; } /* Чёрные «окна» в вопросах (компьютер Minecraft, терминал) остаются тёмными, как настоящий экран. */ .chip-st.warn { background: #fff0cc; color: #7a5200; } /* ---------- Кабинет руководителя: рабочий интерфейс с меню слева ---------- */ /* Светлый рабочий вид: белое меню слева, мягкий фон, синие акценты. */ html[data-mode="biz"] body { background: #f4f7fb; color: #1f2937; } .biz { --b-ink: #1f2937; --b-muted: #6b7280; --b-line: #e5e9f0; --b-accent: #2563eb; --b-soft: #f4f7fb; display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; font-size: 15px; color: var(--b-ink); } .biz-side { background: #fff; color: #374151; display: flex; flex-direction: column; padding: 18px 12px; position: sticky; top: 0; height: 100vh; box-sizing: border-box; border-right: 1px solid #e5e9f0; box-shadow: 2px 0 14px rgba(31, 41, 55, .04); } .biz-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; border-bottom: 1px solid #eef1f6; margin-bottom: 12px; } .biz-brand img { width: 40px; height: 40px; object-fit: contain; } .biz-brand b { display: block; color: #111827; font: 700 16px var(--head); } .biz-brand small { color: #6b7280; font-size: 12px; } .biz-dirs { display: flex; flex-direction: column; gap: 4px; padding: 0 0 14px; margin-bottom: 12px; border-bottom: 1px solid #eef1f6; } .biz-dirs small { color: #9ca3af; font: 600 11px var(--body); text-transform: uppercase; letter-spacing: .06em; padding: 0 8px 4px; } .biz-dir { text-align: left; padding: 8px 10px; border-radius: 8px; color: #374151; font: 700 14px var(--body); border: 1px solid #e5e9f0; } .biz-dir:hover { background: #f1f5fb; color: #111827; } .biz-dir.on { background: #eaf1ff; color: #1d4ed8; border-color: #c7d8fb; } .biz-dirname { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 10px; border-radius: 6px; background: #e0ecff; color: #1d4ed8; font: 600 13px var(--body); } .biz-menu { display: flex; flex-direction: column; gap: 2px; flex: 1; } .biz-nav { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: #4b5563; font: 600 14px var(--body); text-align: left; width: 100%; } .biz-nav svg { width: 18px; height: 18px; flex: none; } .biz-nav em { margin-left: auto; font-style: normal; font-size: 12px; background: #eef1f6; color: #4b5563; padding: 1px 7px; border-radius: 10px; } .biz-nav:hover { background: #f1f5fb; color: #111827; } .biz-nav.on { background: #eaf1ff; color: #1d4ed8; box-shadow: inset 3px 0 0 #2563eb; } .biz-nav.on em { background: #2563eb; color: #fff; } .biz-user { border-top: 1px solid #eef1f6; padding: 14px 8px 0; display: flex; flex-direction: column; gap: 2px; } .biz-user b { color: #111827; font-size: 14px; } .biz-user small { color: #6b7280; font-size: 12px; } .biz-user-btns { display: flex; gap: 12px; margin-top: 8px; } .biz-link { color: #2563eb; font: 600 13px var(--body); padding: 0; } .biz-link:hover { text-decoration: underline; } .biz-main { padding: 24px 28px 60px; min-width: 0; } .biz-top { margin-bottom: 18px; } .biz-top h1 { font: 700 24px/1.2 var(--head); margin: 0; color: var(--b-ink); } .biz-top p { margin: 4px 0 0; color: var(--b-muted); font-size: 14px; } .biz-back { color: var(--b-accent); font: 600 14px var(--body); padding: 0; margin-bottom: 8px; } /* Общие элементы внутри кабинета: плоско и аккуратно. */ .biz .card { border-radius: 10px; padding: 18px; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); border: 1px solid var(--b-line); background: #fff; color: var(--b-ink); } .biz .title { color: var(--b-ink); text-shadow: none; font: 700 22px/1.25 var(--head); margin: 0 0 4px; } .biz .lead, .biz .note { color: var(--b-muted); font-weight: 500; font-size: 14px; } .biz .lead { margin: 0 0 16px; } .biz .sec { color: var(--b-ink); text-shadow: none; font: 700 17px var(--head); margin: 26px 0 10px; } .biz .muted { color: var(--b-muted); } .biz .btn { box-shadow: none; border: 1px solid var(--b-line); border-radius: 8px; padding: 8px 14px; font: 600 14px var(--body); top: 0; } .biz .btn:active:not(:disabled) { transform: none; box-shadow: none; } .biz .btn.small { padding: 5px 10px; font-size: 13px; box-shadow: none; } .biz .btn.big { padding: 10px 18px; font-size: 15px; } .biz .btn.go { --c: #2563eb; --t: #fff; border-color: #2563eb; } .biz .btn.blue { --c: #fff; --t: #2563eb; border-color: #bfdbfe; } .biz .btn.red { --c: #fff; --t: #dc2626; border-color: #fecaca; } .biz .btn.ok { --c: #fff; --t: #15803d; border-color: #bbf7d0; } .biz .filters { gap: 6px; margin-bottom: 12px; } .biz .flt { background: #fff; color: var(--b-muted); border: 1px solid var(--b-line); border-radius: 8px; padding: 5px 11px; font: 600 13px var(--body); } .biz .flt:hover { background: var(--b-soft); } .biz .flt.on { background: #eff6ff; color: var(--b-accent); border-color: #bfdbfe; } .biz .dir-pills { gap: 0; display: inline-flex; border: 1px solid var(--b-line); border-radius: 9px; overflow: hidden; background: #fff; margin-bottom: 16px; flex-wrap: wrap; } .biz .dir-pill { border-radius: 0; box-shadow: none; background: transparent; font: 600 14px var(--body); padding: 8px 14px; color: var(--b-muted); border-right: 1px solid var(--b-line); } .biz .dir-pill:last-child { border-right: none; } .biz .dir-pill.on, .biz .dir-pill.dir-prog.on, .biz .dir-pill.dir-ege.on { background: #eff6ff; color: var(--b-accent); box-shadow: none; } .biz .chat .dir-pill { background: transparent; } .biz .plan-sum.week { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0; padding: 0; } .biz .plan-sum.week .sum-num { padding: 16px 18px; border-right: 1px solid var(--b-line); font: 700 26px/1.1 var(--head); } .biz .plan-sum.week .sum-num:last-child { border-right: none; } .biz .sum-num small { font: 500 13px var(--body); color: var(--b-muted); margin-top: 6px; } .biz .t { font-size: 14px; } .biz .t th { font: 600 12px var(--body); text-transform: uppercase; letter-spacing: .03em; color: var(--b-muted); background: #f9fafb; } .biz .t td, .biz .t th { padding: 9px 10px; border-color: var(--b-line); } .biz .t tr:hover td { background: #f9fafb; } .biz .t-wrap { padding: 0; } .biz .t-wrap > .muted { display: block; padding: 16px; } .biz .t .chip-st, .biz .t .dir-chip { white-space: nowrap; } .biz .chip-st { border-radius: 6px; font: 600 12px var(--body); padding: 2px 8px; } .biz .dir-chip { border-radius: 6px; font: 600 12px var(--body); } .biz .hw-form > label, .biz .hw-row label { font: 600 13px var(--body); color: var(--b-muted); } .biz input[type=text], .biz input[type=date], .biz select, .biz textarea, .biz .hw-form textarea, .biz .par-row input[type="text"], .biz .inline-edit input, .biz .chat-input input { border: 1px solid #d1d5db; border-radius: 8px; background: #fff; font: 500 14px var(--body); padding: 8px 10px; color: var(--b-ink); box-shadow: none; } .biz input:focus, .biz select:focus, .biz textarea:focus { outline: 2px solid #bfdbfe; border-color: var(--b-accent); } .biz .hw-form input[type=text] { font-size: 14px; padding: 8px 10px; } .biz .add-st { border-radius: 10px; } .biz .add-kid summary { color: var(--b-accent); font-weight: 600; } .biz .add-kid summary b { font-weight: 600; } .biz .par-row { border-color: var(--b-line); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .biz-main > * { max-width: 100%; box-sizing: border-box; } /* ---------- Календарь занятий ---------- */ .cal { margin-top: 14px; padding: 14px; } .cal-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .cal-head > b { font: 700 17px var(--head); min-width: 150px; text-align: center; } .cal-head .btn.go { margin-left: auto; } .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--b-line, #e5e7eb); border-left: 1px solid var(--b-line, #e5e7eb); } .cal-w { padding: 6px 8px; font: 600 12px var(--body); color: var(--b-muted, #6b7280); text-transform: uppercase; border-right: 1px solid var(--b-line, #e5e7eb); border-bottom: 1px solid var(--b-line, #e5e7eb); background: #f9fafb; } .cal-d { min-height: 96px; padding: 4px; border-right: 1px solid var(--b-line, #e5e7eb); border-bottom: 1px solid var(--b-line, #e5e7eb); display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cal-d.off { background: #fafafa; } .cal-d.past { background: #fcfcfd; } .cal-d.today { background: #eff6ff; } .cal-n { display: flex; justify-content: space-between; align-items: center; font: 600 13px var(--body); color: var(--b-muted, #6b7280); padding: 2px 4px; border-radius: 6px; width: 100%; text-align: left; } .cal-n span { opacity: 0; color: #2563eb; font-weight: 700; } button.cal-n:hover { background: #eff6ff; } button.cal-n:hover span { opacity: 1; } .cal-d.today .cal-n { color: #2563eb; } .cal-ev { display: block; width: 100%; text-align: left; font: 500 12px/1.25 var(--body); padding: 4px 6px; border-radius: 6px; background: #eef2ff; color: #3730a3; border-left: 3px solid #6366f1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-ev b { font-weight: 700; } .cal-ev i { float: right; font-style: normal; color: #15803d; font-weight: 700; } .cal-ev.dir-prog { background: #ecfdf3; color: #14532d; border-left-color: #22c55e; } .cal-ev.dir-ege { background: #f5f3ff; color: #4c1d95; border-left-color: #8b5cf6; } .cal-ev.dir-oge { background: #fffbeb; color: #78350f; border-left-color: #f59e0b; } .cal-ev.on { outline: 2px solid #2563eb; } .cal-agenda { display: none; } .cal-shift { display: block; font: 600 11px var(--body); color: #475569; background: #f1f5f9; border-radius: 5px; padding: 2px 5px; } .shift-grid th, .shift-grid td { padding: 4px 2px; text-align: center; font-size: 12px; } .shift-grid th.we { color: #2563eb; } .shift-grid th.td { background: #dbeafe; } .shift-grid .sh-name { text-align: left; white-space: nowrap; padding: 4px 8px; position: sticky; left: 0; background: #fff; z-index: 1; } .sh-c button { width: 100%; min-width: 34px; min-height: 34px; border-radius: 6px; font: 600 10.5px/1.15 var(--body); color: #1e3a8a; } .sh-c button:hover { background: #eff6ff; } .sh-c.on button { background: #dbeafe; } .sh-c.sel button { outline: 2px solid #2563eb; } .sh-c i { color: #d97706; font-style: normal; } .ag-day { padding: 8px 0; border-bottom: 1px solid var(--b-line, #e5e7eb); display: flex; flex-direction: column; gap: 4px; } .ag-day > b { font: 600 14px var(--body); } .ag-day.today > b { color: #2563eb; } .ag-day .cal-ev { white-space: normal; font-size: 14px; padding: 7px 9px; } @media (max-width: 700px) { .cal-grid { display: none; } .cal-agenda { display: block; } } .lesson-card { margin-top: 14px; border-left: 4px solid #2563eb; } /* Учитель: уроки курса, задания урока, «назначить задание» */ .lesson-list { display: flex; flex-direction: column; } .lesson-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; background: none; border: 0; border-bottom: 1px solid var(--b-line, #e5e7eb); text-align: left; cursor: pointer; font: inherit; color: inherit; } .lesson-row:last-child { border-bottom: 0; } .lesson-row:hover, .lesson-row.on { background: #eff6ff; } .lesson-row > b { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #dbeafe; color: #1d4ed8; display: grid; place-items: center; font-size: 13px; } .lesson-row span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .lesson-row span small { font-size: 12px; line-height: 1.3; } .lesson-row i { flex: none; font-style: normal; font-size: 13px; color: #2563eb; font-weight: 600; } .lp summary { cursor: pointer; font-weight: 600; margin: 10px 0 6px; } .lp-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; } .lp-list > li { padding-bottom: 10px; border-bottom: 1px dashed var(--b-line, #e5e7eb); } .lp-q { margin-bottom: 6px; line-height: 1.4; overflow-x: auto; } .lp-steps { margin: 4px 0 0; padding-left: 20px; font-size: 14px; } .assign-box { margin-top: 14px; border-left: 4px solid #22c55e; } .assign-box select { max-width: 100%; } .st-row { cursor: pointer; } .lesson-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 10px; } .lesson-head b { font: 700 17px var(--head); } .lesson-topic { display: flex; flex-direction: column; gap: 4px; font: 600 13px var(--body); color: var(--b-muted, #6b7280); margin-bottom: 10px; } .biz-link.dark { color: #2563eb; } .seg.skills .seg-b { min-width: 34px; } .lesson-card .seg-b { white-space: nowrap; padding: 6px 9px; } .lesson-card .j-table td { padding: 7px 6px; } .seg-b:disabled { opacity: .35; cursor: default; } /* ---------- Курсы и отработки ---------- */ .course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-top: 14px; } .course-tile { display: flex; align-items: center; gap: 10px; padding: 10px; background: #fff; border: 1px solid var(--b-line, #e5e7eb); border-radius: 10px; text-align: left; } .course-tile:hover { border-color: #93c5fd; } .course-tile.on { border-color: #2563eb; box-shadow: 0 0 0 2px #bfdbfe; } .course-tile i { width: 36px; height: 36px; flex: none; } .course-tile span { display: flex; flex-direction: column; min-width: 0; } .course-tile b { font: 600 14px var(--body); } .course-tile small { color: var(--b-muted, #6b7280); font-size: 12px; } .mk-form td { background: #f8fafc; } .mk-note { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; border-left: 4px solid #f59e0b; } .mk-note.scheduled { border-left-color: #2563eb; } .biz-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 20px; } .biz-line { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--b-line); } .biz-line:last-child { border-bottom: none; } .biz .now-topic { border-left: 4px solid var(--b-accent); } .biz .now-topic b { font: 700 19px var(--head); } /* ---------- Обзор родителя ---------- */ .po-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; } .po-next { display: flex; flex-direction: column; gap: 3px; border-left: 4px solid #22c55e; justify-content: center; } .po-next small, .po-tile small { font: 600 12px var(--body); text-transform: uppercase; letter-spacing: .04em; color: var(--b-muted); } .po-next b { font: 700 18px var(--head); } .po-next b::first-letter { text-transform: uppercase; } .po-next span { color: var(--b-muted); font-size: 14px; } .po-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; } .po-tile { background: #fff; border: 1px solid var(--b-line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); } .po-tile b { font: 700 26px/1.15 var(--head); color: var(--b-ink); } .po-tile span { font-size: 13px; color: var(--b-muted); line-height: 1.35; } .po-tile.good { border-top: 3px solid #22c55e; } .po-tile.warn { border-top: 3px solid #f59e0b; } .po-tile.bad { border-top: 3px solid #ef4444; } .po-tile.bad b { color: #dc2626; } .po-bar { height: 6px; background: #f1f5f9; border-radius: 3px; overflow: hidden; margin-top: 6px; } .po-bar i { display: block; height: 100%; background: #22c55e; border-radius: 3px; } .po-strip { display: flex; gap: 8px; overflow-x: auto; } .po-day { flex: 1 0 58px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 8px; background: #f8fafc; } .po-day small { font: 600 12px var(--body); color: var(--b-muted); } .po-day i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; color: #fff; } .po-day span { font: 600 12px var(--body); color: var(--b-ink); } .po-day.ok i { background: #22c55e; } .po-day.bad i { background: #ef4444; } .po-day.warn i { background: #f59e0b; } .po-day.none i { background: #e2e8f0; color: #94a3b8; } .po-day.none span { color: var(--b-muted); font-weight: 500; } .po-day span { text-align: center; line-height: 1.25; } .po-tile .po-pay { font: 700 13px var(--body); color: #dc2626; } /* Главное у родителя: крупное «Следующее занятие», три плитки, короткие списки скиллов и заданий */ .po-next-big { padding: 18px 20px; background: linear-gradient(90deg, #f0fdf4, #fff 70%); } .po-next-big b { font-size: 24px; } .po-next-big span { font-size: 16px; color: var(--b-ink); } .po-tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .po-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--b-line); } .po-row:last-child { border-bottom: 0; } .po-row .po-d { flex: none; width: 44px; font: 600 13px var(--body); color: var(--b-muted); } .po-row .po-t { flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; } .po-row .chip-st { flex: none; } @media (max-width: 600px) { .po-tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .po-tiles.three .po-tile { padding: 10px; } .po-tiles.three .po-tile small { font-size: 10px; letter-spacing: 0; } .po-tiles.three .po-tile b { font-size: 20px; } .po-tiles.three .po-tile span { font-size: 12px; } .po-next-big b { font-size: 20px; } } .warn-note { color: #b45309; } @media (max-width: 900px) { .po-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .po-hero { grid-template-columns: 1fr; } } @media (max-width: 480px) { .po-tiles { gap: 10px; } .po-tile { padding: 12px; } .po-tile b { font-size: 22px; } .po-strip { gap: 6px; } .po-day { flex-basis: 64px; } .biz-top h1 { font-size: 20px; } } /* ---------- Выпадающие списки с галочками ---------- */ .dd { position: relative; } .dd > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid #d1d5db; border-radius: 8px; padding: 9px 12px; background: #fff; font: 500 14px var(--body); color: var(--b-ink); } .dd > summary::-webkit-details-marker { display: none; } .dd > summary::after { content: '▾'; color: var(--b-muted); } .dd[open] > summary { border-color: var(--b-accent); outline: 2px solid #bfdbfe; } .dd > summary .dd-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dd-pane { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--b-line); border-radius: 8px; box-shadow: 0 10px 25px rgba(16, 24, 40, .12); max-height: 300px; overflow-y: auto; padding: 6px; } .dd-pane label { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font: 500 14px var(--body); color: var(--b-ink); cursor: pointer; } .dd-pane label:hover { background: #f1f5f9; } .dd-tools { display: flex; gap: 12px; padding: 4px 8px 8px; border-bottom: 1px solid var(--b-line); margin-bottom: 4px; } .hw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 10px 0; } .hw-grid > .hw-f, .hw-grid > label { display: flex; flex-direction: column; gap: 4px; font: 600 13px var(--body); color: var(--b-muted); } @media (max-width: 700px) { .hw-grid { grid-template-columns: 1fr; } } /* ---------- Журнал учителя: сетка дети × занятия ---------- */ .jg th.jg-d { text-align: center; padding: 6px 4px; min-width: 46px; } .jg th.jg-d button { font: 600 12px var(--body); color: var(--b-accent); padding: 2px 4px; border-radius: 5px; } .jg th.jg-d button:hover { background: #eff6ff; } .jg th.jg-d.on button { background: #2563eb; color: #fff; } .jg td.jg-c { text-align: center; padding: 6px 4px; font-weight: 700; } .jg td.jg-c.ok { color: #15803d; } .jg td.jg-c.bad { color: #dc2626; } .jg td.jg-c.warn { color: #b45309; } .jg td.jg-c small { display: block; font: 500 11px var(--body); color: var(--b-muted); } .jg td.jg-c.none { color: #cbd5e1; } .jg td.jg-c.todo { color: #d97706; background: #fffbeb; } .cal-ev .cal-todo { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #f59e0b; color: #fff; font-size: 11px; } .jg .jg-name { white-space: nowrap; position: sticky; left: 0; background: #fff; z-index: 1; } .biz .rep-plan { padding: 8px 0; border-bottom: 1px solid var(--b-line); } .biz .rep-plan:last-child { border-bottom: none; } .biz .seg { box-shadow: inset 0 0 0 1px #d1d5db; border-radius: 8px; } .biz .seg-b { border-right-color: #d1d5db; font-size: 13px; } .biz .checks .check { font: 500 14px var(--body); } .biz .hw-list .card { margin-bottom: 10px; } .biz .hw-form h3 { font: 700 16px var(--head); margin: 0; } .biz .sms-mode { border-radius: 10px; font-weight: 600; font-size: 14px; } .biz .chat-list { background: var(--b-soft); border-radius: 10px; } .biz .msg { box-shadow: none; border: 1px solid var(--b-line); } .biz .row-btn { gap: 8px; } @media (max-width: 700px) { .biz { grid-template-columns: minmax(0, 1fr); } .biz-side, .biz-menu, .biz-dirs { min-width: 0; } .biz-side { position: static; height: auto; padding: 10px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; } .biz-brand { border: none; padding: 0; margin: 0; flex: 1; } .biz-dirs { flex-direction: row; flex: 1 0 100%; order: 2; border: none; padding: 0; margin: 0; overflow-x: auto; } .biz-dirs small { display: none; } .biz-dir { white-space: nowrap; } .biz-menu { flex-direction: row; overflow-x: auto; flex: 1 0 100%; order: 3; gap: 4px; scrollbar-width: none; } .biz-menu::-webkit-scrollbar { display: none; } .biz-nav { width: auto; white-space: nowrap; } .biz-user { border: none; padding: 0; flex-direction: row; align-items: center; gap: 10px; } .biz-user b, .biz-user small { display: none; } .biz-user-btns { margin: 0; } .biz-main { padding: 16px; } } /* ---------- Направления ---------- */ .dir-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .dir-pill { padding: 9px 16px; border-radius: 14px; font: 800 15px var(--head); background: rgba(255, 255, 255, .78); color: var(--ink); box-shadow: 0 4px 0 rgba(0, 0, 0, .15); } .dir-pill small { opacity: .6; margin-left: 4px; } .chat .dir-pill { background: var(--soft); box-shadow: 0 3px 0 rgba(0, 0, 0, .1); } .dir-pill.on { background: #fff; box-shadow: inset 0 0 0 3px #ffcf33, 0 4px 0 rgba(0, 0, 0, .15); } .dir-pill.dir-prog.on { box-shadow: inset 0 0 0 3px #2f9e44, 0 4px 0 rgba(0, 0, 0, .15); } .dir-pill.dir-ege.on { box-shadow: inset 0 0 0 3px #7c5cf5, 0 4px 0 rgba(0, 0, 0, .15); } .dir-chip { display: inline-block; padding: 2px 9px; border-radius: 9px; font: 800 12px var(--body); background: #fff3c4; color: #6b4e00; vertical-align: middle; } .dir-chip.dir-prog { background: #d9f5e0; color: #165c26; } .dir-chip.dir-ege { background: #ebe5ff; color: #43299e; } h1 .dir-chip, h1 .chip-st { font-size: 14px; } /* ---------- Детский чат ---------- */ .chat { display: flex; flex-direction: column; gap: 10px; } .chat-head { display: flex; flex-direction: column; gap: 2px; } .chat-list { height: min(56vh, 520px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--soft); border-radius: 16px; } .msg { max-width: 78%; align-self: flex-start; background: #fff; border-radius: 14px 14px 14px 4px; padding: 7px 11px; box-shadow: 0 2px 0 rgba(0, 0, 0, .08); } .msg.mine { align-self: flex-end; background: #e2f7ff; border-radius: 14px 14px 4px 14px; } .msg.staff { background: #fff6d6; } .msg-h { display: flex; align-items: center; gap: 6px; font-size: 13px; } .msg-h small { opacity: .55; margin-left: auto; } .msg-t { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; } .msg-del { font: 800 18px/1 var(--body); color: #b3261e; padding: 0 4px; } .msg-mute { font: 700 11px/1 var(--body); color: #8a5a00; background: #fff3d6; border-radius: 8px; padding: 4px 7px; margin-left: 6px; } .msg-mute.on { color: #1b6e2f; background: #dff5e3; } .chat-muted { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: #fff3d6; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .chat-muted button { font-weight: 800; color: #b3261e; padding: 0 2px; } .chat-input.muted-note { justify-content: center; color: #8a5a00; background: #fff3d6; border-radius: 10px; padding: 12px; font-size: 14px; } .chat-input { display: flex; gap: 8px; } .chat-input input { flex: 1; min-width: 0; font: 700 16px var(--body); padding: 10px 14px; border: 3px solid var(--line); border-radius: 13px; background: var(--soft); color: var(--ink); } html[data-mode="prog"] .chat-list { background: #f3f8f6; } html[data-mode="prog"] .msg { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(36, 50, 74, .08); } html[data-mode="prog"] .msg.mine { background: #dff5ec; } html[data-mode="prog"] .msg.staff { background: #fff4d6; } html[data-mode="prog"] .chat-input input { background: #fff; color: var(--ink); border-color: var(--line); } html[data-mode="ege"] .chat-list { background: rgba(255, 255, 255, .05); } html[data-mode="ege"] .msg { background: rgba(255, 255, 255, .1); color: #eaf2ff; } html[data-mode="ege"] .msg.mine { background: rgba(39, 224, 255, .18); } /* ---------- CRM: журнал, карточки ---------- */ .seg { display: inline-flex; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--line); } .seg-b { padding: 7px 11px; font: 700 14px var(--body); color: var(--muted); background: transparent; border-right: 2px solid var(--line); } .seg-b:last-child { border-right: none; } .seg-b.on.ok { background: #dcf7e3; color: #14592b; } .seg-b.on.bad { background: #ffe4e5; color: #8d1820; } .seg-b.on.warn { background: #fff0cc; color: #6b4800; } .j-table td { vertical-align: middle; } .j-table select { font: 700 14px var(--body); padding: 6px 8px; border-radius: 10px; border: 2px solid var(--line); background: var(--soft); color: var(--ink); } .hw-form label.grow { flex: 2 1 260px; } .now-topic { display: flex; align-items: center; gap: 14px; } .now-topic > i { width: 54px; height: 54px; flex: none; } .now-topic > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .now-topic small { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; opacity: .65; } .now-topic b { font-size: 20px; } .add-kid summary { cursor: pointer; } .add-kid[open] summary { margin-bottom: 10px; } .inline-edit { display: flex; gap: 6px; align-items: center; } .inline-edit input { width: 170px; font: 700 14px var(--body); padding: 6px 8px; border-radius: 10px; border: 2px solid var(--line); background: var(--soft); color: var(--ink); } @media (max-width: 600px) { .seg-b { padding: 7px 7px; font-size: 13px; } .inline-edit { flex-wrap: wrap; } .inline-edit input { width: 100%; } } .hw-form .note, .sms-note { color: var(--muted); } .hw-form label.check, .par-row label.check { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; text-align: left; } .hw-form label.check input, .par-row label.check input { width: auto; flex: none; margin: 0; } .t tr.voided td { opacity: .55; text-decoration: line-through; } .t tr.voided td:last-child { text-decoration: none; } .hw-form textarea { width: 100%; font: 700 16px var(--body); padding: 10px 14px; border: 3px solid var(--line); border-radius: 13px; background: var(--soft); color: var(--ink); resize: vertical; box-sizing: border-box; } .sms-mode.warn { background: #fff0cc; color: #6b4800; font-weight: 700; } .sms-mode.ok { background: #dcf7e3; color: #14592b; font-weight: 700; } .par-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(150px, 1fr) minmax(150px, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 2px solid var(--line); } .par-row input[type="text"] { width: 100%; box-sizing: border-box; font: 700 15px var(--body); padding: 8px 10px; border: 3px solid var(--line); border-radius: 12px; background: var(--soft); color: var(--ink); } .par-new { border-bottom: none; } @media (max-width: 720px) { .par-row { grid-template-columns: 1fr; } } @media (max-width: 600px) { .hero-main { flex-direction: column; align-items: stretch; gap: 8px; } .hero-mascot { width: 76px; height: 88px; align-self: center; flex: none; } .hero-txt { min-width: 0; } .hero-txt .row-btn { flex-direction: column; align-items: stretch; } .hero-txt .row-btn .btn { width: 100%; max-width: 100%; white-space: normal; justify-content: center; } .next-step .btn { width: 100%; justify-content: center; } .card .row-btn .btn.blue { max-width: 100%; white-space: normal; } } .next-step { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 14px; } .next-step > i { width: 52px; height: 52px; flex: none; } .next-t { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .next-t small { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; opacity: .65; } .next-t b { font-size: 18px; } .next-ex { flex: 1 0 100%; font-size: 14px; font-weight: 700; } .hw-done summary { cursor: pointer; font-weight: 800; } .hw-done-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0 0; } .demo-box { max-width: 420px; width: 100%; margin-top: 10px; text-align: left; } .install-box { max-width: 420px; width: 100%; margin: 4px auto 12px; display: flex; gap: 12px; align-items: center; text-align: left; } .install-box img { width: 48px; height: 48px; border-radius: 12px; flex: none; } .install-box div { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.35; } .install-box .btn { align-self: flex-start; } .demo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; } .demo-list .btn { white-space: normal; line-height: 1.15; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-width: 0; text-align: left; overflow-wrap: anywhere; hyphens: auto; } .demo-list small { font-size: 11px; font-weight: 700; opacity: .7; white-space: normal; line-height: 1.15; }