/* AI-Школа — дизайн-система «школа будущего»: светлая, дружелюбная, со вкусом. Без фреймворков. Единый стиль для лендинга, кабинетов, класса, админки. Переменные → компоненты (кнопки, карточки, формы, таблицы, тосты) → типографика. */ :root{ /* поверхности */ --bg:#eef2fc; --bg2:#e7ecfb; --card:#ffffff; --card2:#f5f7ff; /* текст */ --ink:#1e2542; --ink2:#2b3357; --muted:#6f77a0; --line:#e4e8f6; /* бренд и акценты */ --brand:#5b7cfa; --brand2:#8a6cf5; --accent:#ff8a5c; --accent2:#ffd166; --ok:#1fbf95; --warn:#f5a524; --bad:#f4526b; --grad:linear-gradient(135deg,#5b7cfa,#8a6cf5); --grad-warm:linear-gradient(135deg,#ff8a5c,#ffb84d); --radius:18px; --radius-sm:12px; --shadow:0 10px 30px rgba(45,55,105,.10); --shadow-sm:0 3px 10px rgba(45,55,105,.08); --fs:16px; } *{box-sizing:border-box} html,body{margin:0} body{ font:var(--fs)/1.6 "Segoe UI",system-ui,-apple-system,Roboto,Ubuntu,sans-serif; color:var(--ink); background: radial-gradient(1100px 500px at 85% -10%,rgba(138,108,245,.14),transparent 60%), radial-gradient(900px 500px at -10% 10%,rgba(91,124,250,.14),transparent 55%), linear-gradient(180deg,var(--bg),var(--bg2)); background-attachment:fixed; min-height:100vh; } a{color:var(--brand); text-decoration:none} a:hover{text-decoration:underline} .wrap{max-width:1080px; margin:0 auto; padding:24px} .narrow{max-width:560px} /* Шапка */ header.top{display:flex; align-items:center; gap:14px; padding:14px 24px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.72); position:sticky; top:0; z-index:20; backdrop-filter:blur(10px)} header.top .logo{font-weight:800; letter-spacing:.2px; font-size:20px; color:var(--ink)} header.top .logo b{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent} header.top nav{margin-left:auto; display:flex; gap:18px; align-items:center; flex-wrap:wrap} header.top nav a{color:var(--ink2); font-weight:500} /* Типографика */ h1,h2,h3{line-height:1.2; color:var(--ink)} h1{font-size:clamp(26px,4vw,34px); margin:.2em 0; letter-spacing:-.5px} h2{font-size:22px} h3{font-size:18px} .muted{color:var(--muted)} .center{text-align:center} /* Карточки */ .card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm)} .card:hover{box-shadow:var(--shadow)} .grid{display:grid; gap:18px} .grid.cols2{grid-template-columns:1fr 1fr} .grid.cols3{grid-template-columns:repeat(3,1fr)} @media(max-width:760px){.grid.cols2,.grid.cols3{grid-template-columns:1fr}} /* Формы */ label{display:block; font-size:13px; color:var(--muted); margin:12px 0 6px; font-weight:600} input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],select,textarea{ width:100%; padding:12px 14px; background:#fff; color:var(--ink); border:1.5px solid var(--line); border-radius:var(--radius-sm); font-size:15px; outline:none; transition:.15s} input:focus,select:focus,textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(91,124,250,.15)} textarea{min-height:90px; resize:vertical} /* Кнопки */ .btn{display:inline-flex; align-items:center; gap:8px; justify-content:center; cursor:pointer; padding:12px 20px; border-radius:12px; border:1.5px solid transparent; font-weight:700; font-size:15px; background:var(--grad); color:#fff; box-shadow:0 6px 16px rgba(91,124,250,.28); transition:.15s} .btn:hover{filter:brightness(1.05); transform:translateY(-1px); text-decoration:none} .btn:active{transform:translateY(0)} .btn.ghost{background:#fff; border-color:var(--line); color:var(--ink); box-shadow:var(--shadow-sm)} .btn.ghost:hover{border-color:var(--brand); color:var(--brand)} .btn.warm{background:var(--grad-warm); box-shadow:0 6px 16px rgba(255,138,92,.30)} .btn.sm{padding:8px 13px; font-size:13px; border-radius:10px} .btn.bad{background:linear-gradient(135deg,#ff7a8f,#f4526b); box-shadow:0 6px 16px rgba(244,82,107,.28)} .btn:disabled{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none} .row{display:flex; gap:12px; align-items:center; flex-wrap:wrap} .right{margin-left:auto; display:flex; flex-wrap:wrap; gap:0 4px} /* На узком экране блок ссылок в подвале не помещался в строку и вылезал за экран — замер в браузере на 390px показал горизонтальный перелив 221px по всему лендингу. `margin-left:auto` без переноса удерживал ссылки в одну строку любой длины. */ @media(max-width:760px){ .right{margin-left:0; width:100%} } /* Пилюли/бейджи */ .pill{display:inline-block; padding:4px 11px; border-radius:999px; background:var(--card2); border:1px solid var(--line); font-size:12px; color:var(--muted); font-weight:600} .pill.ok{color:var(--ok); background:rgba(31,191,149,.10); border-color:rgba(31,191,149,.30)} .pill.warn{color:#c77e00; background:rgba(245,165,36,.12); border-color:rgba(245,165,36,.30)} .pill.bad{color:var(--bad); background:rgba(244,82,107,.10); border-color:rgba(244,82,107,.30)} /* Слайдеры (фабрика учителей) */ .sliderrow{display:grid; grid-template-columns:130px 1fr 40px; align-items:center; gap:10px; margin:8px 0} input[type=range]{width:100%; accent-color:var(--brand)} /* Галерея аватаров */ .gallery{display:flex; gap:12px; flex-wrap:wrap} .ava{border:2px solid var(--line); border-radius:14px; padding:10px; cursor:pointer; width:140px; text-align:center; font-size:12px; color:var(--muted); background:var(--card2); transition:.15s} .ava.sel{border-color:var(--brand); color:var(--ink)} .ava .dot{width:100%; height:64px; border-radius:10px; background:var(--grad); margin-bottom:6px; display:flex; align-items:center; justify-content:center; font-size:28px} pre.prompt{white-space:pre-wrap; background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:14px; font-size:13px; color:var(--ink2); max-height:340px; overflow:auto} /* Тосты */ .toast{position:fixed; right:18px; bottom:18px; background:#fff; border:1px solid var(--line); padding:13px 18px; border-radius:12px; box-shadow:var(--shadow); opacity:0; transform:translateY(10px); transition:.25s; z-index:50; color:var(--ink)} .toast.show{opacity:1; transform:none} .toast.ok{border-color:rgba(31,191,149,.5)} .toast.bad{border-color:rgba(244,82,107,.5)} .tcard{display:flex; gap:14px; align-items:center} .tcard .ava{cursor:default} /* Таблицы */ table{width:100%; border-collapse:collapse} th,td{text-align:left; padding:11px 9px; border-bottom:1px solid var(--line); font-size:14px} th{color:var(--muted); font-weight:700; font-size:13px} tr:hover td{background:var(--card2)} .hidden{display:none !important} .err{color:var(--bad); font-size:13px; margin-top:6px} /* Прогресс-бар */ .progressbar{height:12px; background:var(--card2); border:1px solid var(--line); border-radius:999px; overflow:hidden} .progressbar > i{display:block; height:100%; background:var(--grad); transition:width .4s} /* Баннеры (расписание/дневник) */ .banner{padding:11px 15px; border-radius:12px; border:1px solid var(--line); margin:5px 0; font-size:14px; background:var(--card2)} .banner.warn{border-color:rgba(245,165,36,.5); background:rgba(245,165,36,.10)} .banner.bad{border-color:rgba(244,82,107,.45); background:rgba(244,82,107,.08)} .banner.ok{border-color:rgba(31,191,149,.5); background:rgba(31,191,149,.09)} /* Модалки поверх затемнения */ #backdrop{background:rgba(30,37,66,.45) !important; backdrop-filter:blur(2px)} /* --- Мобильная адаптация (Фаза 7): лендинг и кабинеты от 360px --- */ @media(max-width:640px){ .wrap{padding:16px} header.top{padding:11px 15px; gap:10px} header.top .logo{font-size:18px} header.top nav{gap:12px; font-size:14px} h1{font-size:25px} h2{font-size:19px} .card{padding:16px; border-radius:15px} .grid{gap:14px} .btn{padding:11px 16px} .sliderrow{grid-template-columns:96px 1fr 32px} /* широкие таблицы (дневник/эксперимент) — горизонтальный скролл внутри карточки */ .card{overflow-x:auto} table{font-size:13px} th,td{padding:9px 7px} /* модалки почти во весь экран */ .card[style*="position:fixed"]{inset:3% 50% auto 50% !important; width:94% !important; max-height:92vh !important} } @media(max-width:400px){ header.top nav{gap:9px; font-size:13px} .btn.sm{padding:7px 10px} } /* …но не мельче 14 px, если тычут пальцем: на 360–393 px правило выше давало 13 px ссылкам шапки во всех детских кабинетах (замер /kid, /diary, /homework). */ @media(max-width:400px) and (pointer:coarse){ header.top nav{font-size:14px} } /* --- ПАЛЕЦ ВМЕСТО МЫШИ (TASK-44 Ф1) --------------------------------------- Замер в браузере на шести устройствах (var/task44/mobile.json) показал, что почти всё, во что ребёнок и родитель тычут пальцем, ниже 44 px: ссылки шапки 21 px, «Читать биографию» на /teachers — 16 px, «Весь план» и «Открыть дневник» в классе — 37 px, ссылки «← На главную» в оферте — 19 px. 44×44 — это не вкусовщина, а совпавшая рекомендация Apple и Google: меньше — палец промахивается, и ребёнок нажимает соседнее. Условие — НЕ ширина окна, а вид указателя: у планшета в альбоме экран шире иного ноутбука, но тычут в него всё равно пальцем. */ @media(pointer:coarse){ header.top nav a, header.top nav > a, header.top .logo{min-height:44px; display:inline-flex; align-items:center} .btn, .btn.sm, button, input[type=submit], input[type=button]{min-height:44px} select, input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number]{min-height:44px} details summary{min-height:44px; display:flex; align-items:center} /* Одиночные ссылки-действия («← На главную», «учебники класса →») — тоже цель для пальца, но подчёркивать их рамкой некуда: даём высоту отступами. */ .backlink, a.btn{min-height:44px; display:inline-flex; align-items:center} /* Шрифт мельче 14 px с планшета в руках не читается, а в классе ребёнка (/kid) им набрано всё, что он смотрит каждый день: «🔥 Серия: 0 дн.», «Баланс: 0 XP», «До уровня 2: ещё 100 XP» — 12 px, «Весь план», «Открыть задания» — 13 px. Замер: /kid, phone-se, 9 мест ниже порога. 14 px — нижняя граница для третьеклассника, дальше он начинает подносить планшет к лицу. */ .pill{font-size:14px} .btn.sm{font-size:14px} th{font-size:14px} label{font-size:14px} .err{font-size:14px} /* Ссылки-стрелки («← На главную» в оферте, «учебники класса →» в кабинете) — это отдельные действия, а не ссылки внутри фразы: по ним тоже тычут пальцем, и 14–19 px высоты им мало. Помечены классом .taplink там, где это действие. */ a.taplink{min-height:44px; display:inline-flex; align-items:center} } /* Длинная почта родителя в шапке (#who) — единственный неразрывный кусок текста на странице. На /tariffs при экране 375 px она растягивала документ до 395 px и давала горизонтальную прокрутку по всей странице: замер tariffs/phone-se, виновник span#who. Разрешаем перенос, а на телефоне убираем совсем — почта родителя в шапке платёжной страницы не нужна никому. */ header.top nav #who{overflow-wrap:anywhere; min-width:0; max-width:100%} @media(max-width:640px){ header.top nav #who{display:none} } /* Крупный режим для 1–4 классов (body.kid-large) */ body.kid-large{--fs:19px} body.kid-large .btn{padding:14px 24px; font-size:17px; border-radius:14px} body.kid-large h1{font-size:clamp(30px,5vw,40px)} body.kid-large .card{border-radius:22px} /* Бейдж мозга учителя (TASK-22 Ф4): родитель видит модель прямо в карточке выбора. */ .brainbadge { display:inline-block; font-size:11px; font-weight:700; color:#fff; padding:2px 8px; border-radius:999px; background:#8a90a8; margin:2px 0; cursor:help; } .brainbadge.deepseek { background:#2f6df6; } .brainbadge.gigachat { background:#12b26a; } .brainbadge.anthropic { background:#a05c2c; } .brainbadge.mock { background:#8a90a8; } /* Общие элементы контентных страниц (TASK-28 Ф5). Раньше .lead и раскрывающиеся вопросы жили только во внутреннем