/* 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}

/* Пилюли/бейджи */
.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}
}

/* Крупный режим для 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}