/* =====================================================================
   Платформа подготовки к ЕГЭ/ОГЭ — оформление
   Шрифт Onest, мягкие карточки, живые, но сдержанные анимации
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&display=swap');

:root{
  /* поверхности */
  --bg:#f4f5fa;
  --surface:#ffffff;
  --surface-2:#f8f9fc;
  --surface-3:#eef1f8;
  --line:#e6e9f2;
  --line-soft:#eff1f7;

  /* текст */
  --text:#14161c;
  --text-2:#4a4f5e;
  --muted:#7b8194;

  /* бренд */
  --brand:#4f6bed;
  --brand-2:#6c5ce7;
  --brand-soft:#eef1fe;
  --brand-ring:rgba(79,107,237,.18);

  /* статусы (иконка + подпись обязательны, цвет не несёт смысл в одиночку) */
  --good:#0ca30c;   --good-soft:#e8f7e8;
  --warn:#b8860b;   --warn-soft:#fdf4e0;
  --bad:#d03b3b;    --bad-soft:#fceceb;

  /* графики */
  --series-1:#2a78d6;
  --series-2:#eb6834;
  --series-3:#1baf7a;
  --series-4:#eda100;
  --grid:#e9ecf3;
  --axis:#c9cedb;

  --radius:16px;
  --radius-sm:11px;
  --shadow-1:0 1px 2px rgba(20,22,28,.05), 0 2px 8px rgba(20,22,28,.04);
  --shadow-2:0 2px 6px rgba(20,22,28,.06), 0 12px 28px rgba(20,22,28,.08);
  --ease:cubic-bezier(.22,.9,.3,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:15px/1.55 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0 0 .5em; line-height:1.22; font-weight:700; letter-spacing:-.015em}
h1{font-size:27px} h2{font-size:21px} h3{font-size:16.5px}
p{margin:0 0 .8em}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
small,.small{font-size:13px}
.muted{color:var(--muted)}
.hidden{display:none !important}
.center{text-align:center}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px}
.tnum{font-variant-numeric:tabular-nums}

::selection{background:var(--brand-ring)}
:focus-visible{outline:3px solid var(--brand-ring); outline-offset:2px; border-radius:8px}

/* ---------------- Шапка ---------------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:12px 22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.topbar .brand{
  font-weight:800; font-size:16.5px; margin-right:auto; letter-spacing:-.02em;
  display:flex; align-items:center; gap:9px;
}
.topbar .brand::before{
  content:""; width:26px; height:26px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 3px 10px rgba(79,107,237,.35);
}
.topbar .who{color:var(--muted); font-size:13px}

/* ---------------- Вкладки ---------------- */
.tabs{
  display:flex; gap:2px; padding:0 18px; background:var(--surface);
  border-bottom:1px solid var(--line); overflow-x:auto;
  position:sticky; top:57px; z-index:40; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  position:relative; border:0; background:none; padding:13px 14px 12px;
  font:inherit; font-size:14px; font-weight:500; color:var(--muted);
  cursor:pointer; white-space:nowrap; transition:color .18s var(--ease);
}
.tab:hover{color:var(--text)}
.tab.active{color:var(--brand); font-weight:650}
.tab::after{
  content:""; position:absolute; left:12px; right:12px; bottom:0; height:2.5px;
  border-radius:3px 3px 0 0; background:var(--brand);
  transform:scaleX(0); transition:transform .22s var(--ease);
}
.tab.active::after{transform:scaleX(1)}

/* ---------------- Раскладка ---------------- */
.wrap{max-width:1140px; margin:0 auto; padding:24px 22px 80px}
.page{display:none}
.page.active{display:block; animation:fadeUp .32s var(--ease)}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

.grid{display:grid; gap:14px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(min(176px,100%),1fr))}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.spacer{flex:1}
.divider{height:1px; background:var(--line); margin:20px 0}

/* ---------------- Карточки ---------------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-1);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card.tight{padding:13px 15px}
.card.hover:hover{box-shadow:var(--shadow-2); transform:translateY(-2px)}
.card h3{margin-bottom:.4em}

/* ---------------- Плитки статистики ---------------- */
.stat{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:15px 16px; position:relative; overflow:hidden;
}
.stat .label{font-size:12px; font-weight:500; color:var(--muted); letter-spacing:.01em}
.stat .value{font-size:29px; font-weight:800; margin-top:5px; letter-spacing:-.03em; line-height:1.1}
.stat .sub{font-size:12.5px; color:var(--muted); margin-top:3px}
.stat .emoji{position:absolute; top:12px; right:14px; font-size:21px; opacity:.9}

/* ---------------- Кнопки ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  padding:9px 15px; border-radius:11px; font:inherit; font-size:14px; font-weight:550;
  cursor:pointer; white-space:nowrap;
  transition:transform .14s var(--ease), box-shadow .18s var(--ease),
             background .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover{background:var(--surface-2); border-color:#d5daea; transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border-color:transparent; color:#fff; box-shadow:0 3px 12px rgba(79,107,237,.3);
}
.btn.primary:hover{box-shadow:0 6px 20px rgba(79,107,237,.38)}
.btn.ok{background:var(--good); border-color:var(--good); color:#fff}
.btn.ok:hover{background:#0a8f0a}
.btn.danger{background:var(--surface); color:var(--bad); border-color:#f0cfce}
.btn.danger:hover{background:var(--bad-soft)}
.btn.sm{padding:6px 11px; font-size:13px; border-radius:9px}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}

/* ---------------- Формы ---------------- */
label.field{display:block; margin-bottom:13px}
label.field > span{display:block; font-size:13px; font-weight:500; color:var(--text-2); margin-bottom:5px}
input,select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:11px;
  font:inherit; background:var(--surface); color:var(--text);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
input:hover,select:hover,textarea:hover{border-color:#d5daea}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3.5px var(--brand-ring);
}
textarea{resize:vertical; min-height:84px; line-height:1.5}
input[type=checkbox],input[type=radio]{width:auto; margin-right:7px; accent-color:var(--brand)}
.inline-check{
  display:flex; align-items:center; font-size:14px; margin-bottom:9px;
  padding:7px 9px; border-radius:9px; cursor:pointer; transition:background .15s var(--ease);
}
.inline-check:hover{background:var(--surface-2)}

/* ---------------- Значки ---------------- */
.badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:3.5px 10px; border-radius:20px; font-size:12.5px; font-weight:600;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-2);
}
.badge.ok{background:var(--good-soft); color:#0a7d0a; border-color:#c8e9c8}
.badge.warn{background:var(--warn-soft); color:#8a6508; border-color:#f0dfae}
.badge.bad{background:var(--bad-soft); color:#b32f2f; border-color:#f3cccb}
.badge.brand{background:var(--brand-soft); color:var(--brand); border-color:#d6ddfc}

/* ---------------- Прогресс ---------------- */
.bar{height:9px; background:var(--surface-3); border-radius:20px; overflow:hidden}
.bar > i{
  display:block; height:100%; border-radius:20px; width:0;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transition:width .9s var(--ease);
}
.bar.ok > i{background:linear-gradient(90deg,#22b455,var(--good))}
.bar.warn > i{background:linear-gradient(90deg,#f2c14e,#e0a020)}
.bar.bad > i{background:linear-gradient(90deg,#e56b6b,var(--bad))}

/* ---------------- Таблицы ---------------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); box-shadow:var(--shadow-1)}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:middle}
th{font-size:11.5px; font-weight:650; text-transform:uppercase; letter-spacing:.05em;
   color:var(--muted); background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .14s var(--ease)}
tbody tr:hover{background:var(--surface-2)}

/* ---------------- Список элементов ---------------- */
.item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 17px; margin-bottom:11px; display:flex; gap:15px; align-items:flex-start;
  transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.item:hover{box-shadow:var(--shadow-2); transform:translateY(-2px); border-color:#dbe0f0}
.item .main{flex:1; min-width:0}
.item .title{font-weight:650; margin-bottom:4px; letter-spacing:-.01em}
.item .meta{font-size:13px; color:var(--muted); display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.item .side{display:flex; flex-direction:column; gap:7px; align-items:flex-end}
.item.accent-open{border-left:4px solid var(--brand)}
.item.accent-done{border-left:4px solid var(--good)}
.item.accent-late{border-left:4px solid var(--bad)}

/* ---------------- Задание ---------------- */
.task{
  border:1px solid var(--line); border-radius:var(--radius); padding:18px;
  margin-bottom:14px; background:var(--surface);
}
.task .head{display:flex; gap:9px; align-items:center; margin-bottom:11px; flex-wrap:wrap}
.task .num{
  width:30px; height:30px; border-radius:10px; flex:none;
  background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-weight:750; font-size:13.5px;
}
.task .prompt{white-space:pre-wrap; margin-bottom:13px; line-height:1.6}
.task img{max-width:100%; border-radius:11px; margin-bottom:13px; border:1px solid var(--line)}
.opt{
  display:flex; align-items:flex-start; gap:9px; padding:9px 11px; cursor:pointer;
  border-radius:10px; transition:background .15s var(--ease);
}
.opt:hover{background:var(--surface-2)}
.opt input{margin-top:3px; flex:none}

/* разбор ошибки — комментарий преподавателя к заданию */
.feedback{
  border-left:3px solid var(--bad); background:var(--bad-soft);
  padding:11px 14px; border-radius:0 11px 11px 0; margin-top:10px; font-size:14px;
}
.feedback.ok{border-left-color:var(--good); background:var(--good-soft)}
.feedback .who{font-size:12px; font-weight:650; color:var(--muted); margin-bottom:3px;
  text-transform:uppercase; letter-spacing:.04em}

/* ---------------- Модальное окно ---------------- */
.modal-bg{
  position:fixed; inset:0; background:rgba(20,22,28,.42); backdrop-filter:blur(3px);
  z-index:100; display:flex; align-items:flex-start; justify-content:center;
  padding:40px 16px; overflow-y:auto; animation:fadeIn .18s var(--ease);
}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.modal{
  background:var(--surface); border-radius:20px; width:100%; max-width:740px;
  box-shadow:0 24px 70px rgba(20,22,28,.28); padding:24px;
  animation:popIn .26s var(--ease);
}
@keyframes popIn{from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none}}
.modal.wide{max-width:960px}
.modal .mhead{display:flex; align-items:center; gap:12px; margin-bottom:18px}
.modal .mhead h2{margin:0; flex:1}

/* ---------------- Карточки-игра ---------------- */
.flip{perspective:1400px; height:290px; margin:0 auto 18px; max-width:530px; cursor:pointer}
.flip .inner{position:relative; width:100%; height:100%;
  transition:transform .55s var(--ease); transform-style:preserve-3d}
.flip.turned .inner{transform:rotateY(180deg)}
.flip .face{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:20px;
  border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-2);
  display:flex; align-items:center; justify-content:center; padding:28px; text-align:center;
  font-size:20px; line-height:1.45; overflow-y:auto; font-weight:550;
}
.flip .face.back{
  transform:rotateY(180deg); font-size:16.5px; font-weight:400;
  background:linear-gradient(150deg,var(--brand-soft),#f3f0ff);
}

/* ---------------- Графики ---------------- */
.chart{width:100%; display:block; overflow:visible}
.chart text{font-family:'Onest',sans-serif}
.chart .grid-line{stroke:var(--grid); stroke-width:1}
.chart .axis-line{stroke:var(--axis); stroke-width:1}
.chart .tick{fill:var(--muted); font-size:11.5px}
.chart .dlabel{fill:var(--text-2); font-size:11.5px; font-weight:650}
.chart .mark{transition:opacity .16s var(--ease)}
.chart .hit{fill:transparent; cursor:pointer}
.chart:hover .mark.dim{opacity:.35}
.chart-legend{display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--text-2); margin-top:10px}
.chart-legend i{width:11px; height:11px; border-radius:3.5px; display:inline-block; margin-right:6px; vertical-align:-1px}
.chart-tip{
  position:fixed; z-index:300; pointer-events:none; background:#14161c; color:#fff;
  padding:8px 11px; border-radius:9px; font-size:12.5px; line-height:1.45;
  box-shadow:0 8px 24px rgba(0,0,0,.28); opacity:0; transition:opacity .12s;
  max-width:230px;
}
.chart-tip.on{opacity:1}
.chart-tip b{font-weight:650}

/* кольцо прогресса */
.ring-wrap{position:relative; width:150px; height:150px; flex:none}
.ring-wrap .inside{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
}
.ring-wrap .big{font-size:30px; font-weight:800; letter-spacing:-.03em; line-height:1}
.ring-wrap .cap{font-size:11.5px; color:var(--muted); margin-top:3px}
.ring-track{stroke:var(--surface-3)}
.ring-fill{stroke-linecap:round; transition:stroke-dashoffset 1.1s var(--ease)}

/* трекер активности */
.streak{display:flex; gap:5px; flex-wrap:wrap}
.streak b{
  width:19px; height:19px; border-radius:6px; background:var(--surface-3);
  display:block; transition:transform .15s var(--ease);
}
.streak b:hover{transform:scale(1.22)}
.streak b[data-l="1"]{background:#cde2fb}
.streak b[data-l="2"]{background:#86b6ef}
.streak b[data-l="3"]{background:#3987e5}
.streak b[data-l="4"]{background:#1c5cab}

/* ---------------- Настроение / статус ---------------- */
.mood{
  display:flex; align-items:center; gap:13px; padding:15px 17px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--surface);
}
.mood .face{font-size:37px; line-height:1; animation:bob 3.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)}}
.mood .txt{flex:1}
.mood .txt b{display:block; font-size:16px; font-weight:700; margin-bottom:2px}
.mood .txt span{font-size:13.5px; color:var(--muted)}
.mood.good{background:linear-gradient(120deg,var(--good-soft),#f4fbf4); border-color:#cfead0}
.mood.mid{background:linear-gradient(120deg,var(--warn-soft),#fdf9ef); border-color:#f0e2ba}
.mood.low{background:linear-gradient(120deg,var(--bad-soft),#fdf2f1); border-color:#f3d3d2}

/* ---------------- Прочее ---------------- */
.empty{
  text-align:center; color:var(--muted); padding:40px 18px; font-size:14px;
  border:1.5px dashed var(--line); border-radius:var(--radius); background:var(--surface-2);
}
.notice{padding:12px 15px; border-radius:12px; font-size:14px; margin-bottom:14px}
.notice.err{background:var(--bad-soft); color:#b32f2f}
.notice.ok{background:var(--good-soft); color:#0a7d0a}
.notice.info{background:var(--brand-soft); color:#3a51c9}
.notice.warn{background:var(--warn-soft); color:#8a5a00}
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:#14161c; color:#fff; padding:12px 20px; border-radius:12px;
  font-size:14px; font-weight:500; z-index:200; box-shadow:0 10px 34px rgba(0,0,0,.3);
  animation:toastIn .3s var(--ease);
}
@keyframes toastIn{from{opacity:0; transform:translate(-50%,14px)} to{opacity:1; transform:translate(-50%,0)}}

/* короткий салют при сдаче работы */
.confetti{position:fixed; inset:0; pointer-events:none; z-index:250; overflow:hidden}
.confetti i{
  position:absolute; width:9px; height:14px; border-radius:2px; top:-20px;
  animation:fall linear forwards;
}
@keyframes fall{
  to{transform:translateY(105vh) rotate(760deg); opacity:.15}
}

/* ---------------- Экран входа ---------------- */
.auth{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:
    radial-gradient(760px 460px at 12% -8%, #e6ebff 0%, transparent 62%),
    radial-gradient(700px 440px at 92% 108%, #efe9ff 0%, transparent 62%),
    var(--bg);
}
.auth .box{
  width:100%; max-width:432px; background:var(--surface); border:1px solid var(--line);
  border-radius:22px; padding:30px; box-shadow:0 4px 12px rgba(20,22,28,.05), 0 22px 56px rgba(20,22,28,.09);
  animation:popIn .4s var(--ease);
}
.auth .logo{text-align:center; margin-bottom:22px}
.auth .logo .mark{
  width:52px; height:52px; border-radius:16px; margin:0 auto 13px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 8px 22px rgba(79,107,237,.34);
  display:flex; align-items:center; justify-content:center; font-size:25px;
}
.auth .logo .t{font-size:21px; font-weight:800; letter-spacing:-.025em}
.auth .logo .s{font-size:13.5px; color:var(--muted); margin-top:4px}
.switcher{
  display:flex; background:var(--surface-3); border-radius:12px; padding:4px; margin-bottom:20px;
}
.switcher button{
  flex:1; border:0; background:none; padding:9px; border-radius:9px;
  font:inherit; font-size:14px; font-weight:550; cursor:pointer; color:var(--muted);
  transition:.18s var(--ease);
}
.switcher button.active{background:var(--surface); color:var(--text); font-weight:650; box-shadow:var(--shadow-1)}

@media (max-width:640px){
  .wrap{padding:18px 14px 70px}
  h1{font-size:23px} h2{font-size:19px}
  .modal{padding:18px; border-radius:16px}
  .item{flex-direction:column; gap:11px}
  .item .side{flex-direction:row; align-items:center; width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
@media print{ .topbar,.tabs,.btn{display:none !important} body{background:#fff} }

/* ---------- Папки по разделам ---------- */
.folder { margin-bottom: 10px; }
.folder-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); cursor: pointer; font: inherit; text-align: left;
  transition: background .15s, border-color .15s;
}
.folder-head:hover { background: var(--surface-2); border-color: var(--brand-soft); }
.folder-arrow { color: var(--muted); font-size: 12px; width: 12px; }
.folder-name { font-weight: 650; letter-spacing: -.01em; }
.folder-head .badge { margin-left: auto; }
.folder-body { padding: 10px 0 4px 12px; border-left: 2px solid var(--line-soft); margin-left: 18px; }
.folder-body:empty { display: none; }

/* ---------- Таблица шкалы ---------- */
.scale-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 6px; margin-top: 12px;
}
.scale-cell {
  border: 1px solid var(--line); border-radius: 9px; padding: 6px 4px;
  text-align: center; font-size: 13px; background: var(--surface);
}
.scale-cell b { display: block; font-size: 15px; letter-spacing: -.02em; }
.scale-cell span { color: var(--muted); font-size: 11px; }
.scale-cell.pass { border-color: rgba(12,168,60,.45); background: var(--good-soft); }
.mini-select {
  display: inline-block; width: auto; padding: 3px 24px 3px 8px; font-size: 12px;
  border-radius: 8px; border: 1px solid var(--line); background-color: var(--surface);
  color: var(--muted); cursor: pointer; vertical-align: middle;
}
.mini-select:hover { border-color: var(--brand); color: var(--text); }

/* ---------- Автосохранение ---------- */
.autosave { color: var(--muted); margin-left: 6px; }
.autosave.ok { color: #2e7d32; }
.autosave.warn { color: #8a6100; }
.autosave.bad { color: #b3261e; font-weight: 600; }

/* ---------- «глазик» у пароля ---------- */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 44px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; background: transparent; color: var(--muted, #888);
  border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pw-eye:hover, .pw-eye.on { color: var(--brand); }
.pw-eye:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ---------- приглашение ---------- */
.invite-banner { display: flex; gap: 10px; align-items: center; padding: 12px 14px; margin-bottom: 14px;
  border-radius: 12px; background: color-mix(in srgb, var(--brand) 12%, transparent); font-size: 14px; }
.invite-link { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.invite-link input { flex: 1 1 260px; min-width: 0; font-family: ui-monospace, monospace; font-size: 13px; }

/* ---------- согласия ---------- */
.consents{margin:6px 0 12px; display:flex; flex-direction:column; gap:8px}
.consents .age{display:flex; gap:16px; flex-wrap:wrap; padding-bottom:4px}
.chk{display:flex; gap:9px; align-items:flex-start; font-size:14px; line-height:1.45; cursor:pointer}
.chk input{margin:2px 0 0; width:18px; height:18px; flex:0 0 18px; accent-color:var(--brand)}
.consents .c-minor{border-left:3px solid var(--brand); padding:8px 0 4px 12px}
.auth .legal-links{margin-top:14px; text-align:center; font-size:12.5px; color:var(--muted)}
.auth .legal-links a{color:var(--muted)}

/* ---------- ученик / репетитор при регистрации ---------- */
.who-toggle{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px}
.who-toggle label{position:relative; cursor:pointer}
.who-toggle input{position:absolute; opacity:0; pointer-events:none}
.who-toggle span{display:block; text-align:center; padding:10px 8px; border-radius:10px; font-size:14px; font-weight:600;
  border:1.5px solid color-mix(in srgb, var(--muted) 35%, transparent); color:var(--muted)}
.who-toggle input:checked + span{border-color:var(--brand); color:var(--brand); background:color-mix(in srgb, var(--brand) 9%, transparent)}
.who-toggle input:focus-visible + span{outline:2px solid var(--brand); outline-offset:2px}

/* ---------- полоса доступа репетитора ---------- */
.access-bar{max-width:1100px; margin:12px auto 0; padding:10px 14px; border-radius:12px; font-size:14px;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.access-bar.trial{background:color-mix(in srgb, var(--brand) 10%, transparent)}
.access-bar.expired{background:var(--bad-soft); color:#b32f2f}

/* ---------- критерии проверки пробника ---------- */
.crit-box{margin-top:10px; padding:10px 12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line-soft)}
.crit-row, .crit-res{display:flex; gap:10px; align-items:flex-start; padding:6px 0; flex-wrap:wrap}
.crit-row + .crit-row, .crit-res + .crit-res{border-top:1px dashed var(--line-soft)}
.crit-btns{display:flex; gap:4px}
.btn.cq.active, .btn.cq.active:hover, .btn.cq.active:focus{background:var(--brand) !important; color:#fff !important; border-color:var(--brand) !important}

/* ---------------- Тренажёр карточек (как Quizlet) ---------------- */
.cz-modal .modal{max-width:880px}
.cz-modes{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr)); margin-bottom:18px}
.cz-mode{display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; cursor:pointer;
  padding:16px 18px; border-radius:16px; border:1px solid var(--line); background:var(--surface);
  box-shadow:var(--shadow-1); font:inherit; color:var(--text); transition:transform .18s var(--ease), box-shadow .18s, border-color .18s}
.cz-mode:hover:not([disabled]){transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:#cdd6fb}
.cz-mode[disabled]{opacity:.5; cursor:not-allowed}
.cz-mode .cz-ic{font-size:26px; line-height:1}
.cz-terms summary{cursor:pointer; font-weight:600; margin-bottom:8px}
.cz-term{display:grid; grid-template-columns:minmax(120px,1fr) 2fr; gap:14px; padding:10px 12px; border-bottom:1px solid var(--line-soft); font-size:14px}
.cz-term span{color:var(--text-2); white-space:pre-line}
.cz-top{align-items:center; margin-bottom:8px}
.cz-flip{height:320px; max-width:640px}
.cz-flip .face{font-size:24px}
.cz-flip .face.back{font-size:17px; white-space:pre-line}
.cz-nav{max-width:640px; margin:0 auto; align-items:center}
.cz-hint{margin:0 10px}
.cz-swipe-stage{position:relative; max-width:640px; margin:0 auto}
.cz-drag{touch-action:pan-y; user-select:none}
.cz-stamp{position:absolute; top:18px; z-index:3; padding:6px 14px; border-radius:10px; font-weight:800; font-size:20px;
  letter-spacing:.06em; border:3px solid; opacity:0; transition:opacity .15s; pointer-events:none}
.cz-stamp.yes{left:18px; color:var(--good); border-color:var(--good); transform:rotate(-12deg)}
.cz-stamp.no{right:18px; color:var(--bad); border-color:var(--bad); transform:rotate(12deg)}
.cz-swipe-stage.go-yes .cz-stamp.yes, .cz-swipe-stage.go-no .cz-stamp.no{opacity:1}
.cz-round{width:62px; height:62px; border-radius:50%; font-size:24px; padding:0; justify-content:center}
.cz-match{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr))}
.cz-tile{min-height:92px; padding:12px; border-radius:14px; border:1px solid var(--line); background:var(--surface);
  box-shadow:var(--shadow-1); font:inherit; font-size:13.5px; line-height:1.35; cursor:pointer; color:var(--text);
  transition:transform .15s, opacity .3s, background .15s, border-color .15s}
.cz-tile.term{font-weight:650; font-size:15px; background:var(--surface-2)}
.cz-tile:hover{border-color:#cdd6fb}
.cz-tile.sel{border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 3px var(--brand-ring)}
.cz-tile.wrong{border-color:var(--bad); background:var(--bad-soft); animation:czShake .35s}
.cz-tile.gone{opacity:0; transform:scale(.9); pointer-events:none}
@keyframes czShake{25%{transform:translateX(-5px)} 75%{transform:translateX(5px)}}
.cz-run-concept{text-align:center; margin-bottom:12px}
.cz-run-concept b{display:block; font-size:22px}
.cz-lanes{position:relative; display:grid; grid-template-columns:1fr 1fr; height:380px; border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg,#eef1fe,#f8f9fc); border:1px solid var(--line)}
.cz-lane{display:flex; align-items:flex-end; justify-content:center; padding-bottom:10px; cursor:pointer; font-weight:700;
  background-image:repeating-linear-gradient(180deg,transparent 0 34px,rgba(79,107,237,.07) 34px 46px)}
.cz-lane.yes{color:var(--good); border-right:2px dashed #cdd6fb}
.cz-lane.no{color:var(--bad)}
.cz-lane:hover{background-color:rgba(79,107,237,.04)}
.cz-fall{position:absolute; left:50%; top:0; transform:translateX(-50%); width:min(78%,420px); padding:12px 16px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-2); text-align:center; font-weight:600;
  pointer-events:none; z-index:2}
.cz-fall.yes{left:25%} .cz-fall.no{left:75%}
.cz-fall.yes, .cz-fall.no{width:min(46%,300px); transition:left .25s var(--ease) !important}
.cz-fall.good{border-color:var(--good); background:var(--good-soft)}
.cz-fall.bad{border-color:var(--bad); background:var(--bad-soft)}
.cz-runner{position:absolute; bottom:40px; left:50%; transform:translateX(-50%) scaleX(-1); font-size:40px; transition:left .22s var(--ease); z-index:1}
.cz-runner.yes{left:25%} .cz-runner.no{left:75%}
.cz-prompt{padding:22px; border-radius:18px; background:var(--surface-2); border:1px solid var(--line); margin-bottom:14px; font-size:17px; white-space:pre-line}
.cz-prompt-big{font-size:24px; font-weight:700}
.cz-answer{display:flex; gap:10px; margin-bottom:12px}
.cz-answer input{flex:1; font-size:17px}
.cz-answer.col{flex-direction:column}
.cz-ref{padding:14px 16px; border-radius:14px; border:1px solid var(--line); margin-bottom:12px; white-space:pre-line}
.cz-hit{background:var(--good-soft); color:#0a7d0a; border-radius:4px}
.cz-miss{color:var(--bad); font-weight:600}
.cz-result{text-align:center; padding:10px 0}
.cz-big-emoji{font-size:54px; line-height:1.1}
.cz-pct{font-size:48px; font-weight:800; letter-spacing:-.03em}
.cz-pct.ok{color:var(--good)} .cz-pct.warn{color:var(--warn)} .cz-pct.bad{color:var(--bad)}
.cz-mistakes{text-align:left; margin-top:16px}
.deck-title-edit{border:1px dashed transparent; border-radius:8px; padding:2px 6px; margin-left:-6px; cursor:text}
.deck-title-edit:hover{border-color:var(--line)}
.deck-title-edit:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring)}
.preview-bar{position:sticky; top:0; z-index:45; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 18px; background:#1f2440; color:#fff; font-weight:600}
@media (max-width:640px){
  .cz-flip{height:260px} .cz-flip .face{font-size:19px}
  .cz-lanes{height:330px} .cz-hint{display:none}
  .cz-term{grid-template-columns:1fr}
}
.cz-portion{padding:12px 14px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line); margin-bottom:14px}

/* полоса «идёт урок / скоро занятие» над кабинетом */
.lesson-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; padding: 11px 18px; background: #e5484d; color: #fff; font-weight: 600; }
.lesson-bar.soon { background: var(--brand); }
.lesson-bar .lb-btn { background: #fff; color: #e5484d; border-color: #fff; }
.lesson-bar.soon .lb-btn { color: var(--brand); }
.del-choice { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

/* ================= Календарь расписания ================= */
.cal-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-title { margin-left: 6px; font-size: 15px; }
.seg { display: inline-flex; background: var(--surface-3); border-radius: 10px; padding: 3px; margin-right: 6px; }
.seg button { border: 0; background: none; font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 8px; cursor: pointer; color: var(--text-2); }
.seg button.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.cal-week { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; margin-bottom: 18px; }
.cw-head, .cw-body { display: grid; grid-template-columns: 52px repeat(7, 1fr); }
.cw-head > div { padding: 9px 6px; text-align: center; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.cw-head > div b { display: block; font-size: 17px; color: var(--text); }
.cw-head > div.today b { color: #fff; background: var(--brand); border-radius: 50%; width: 30px; height: 30px; line-height: 30px; margin: 2px auto 0; }
.cw-body { position: relative; max-height: 620px; overflow-y: auto; }
.cw-hours div { font-size: 11px; color: var(--muted); text-align: right; padding-right: 6px; transform: translateY(-7px); }
.cw-day { position: relative; border-left: 1px solid var(--line-soft); }
.cw-slot { border-top: 1px solid var(--line-soft); cursor: pointer; }
.cw-slot:hover { background: var(--brand-soft); }
.cw-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--bad); z-index: 3; pointer-events: none; }
.cw-ev { position: absolute; left: 3px; right: 3px; z-index: 2; text-align: left; border: 0; border-left: 3px solid var(--brand);
  background: var(--brand-soft); color: var(--text); border-radius: 7px; padding: 3px 6px; font: inherit; font-size: 12px;
  overflow: hidden; cursor: pointer; line-height: 1.3; }
.cw-ev span, .cd-ev span { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-ev.live, .cd-ev.live, .cm-ev.live { border-left-color: var(--bad); background: var(--bad-soft); }
.cw-ev.done, .cd-ev.done, .cm-ev.done { border-left-color: var(--axis); background: var(--surface-3); color: var(--text-2); }
.cw-ev.cancelled, .cd-ev.cancelled, .cm-ev.cancelled { border-left-color: var(--axis); background: var(--surface-2); color: var(--muted); text-decoration: line-through; }
.cw-ev:hover, .cd-ev:hover, .cm-ev:hover { filter: brightness(.96); }

.cal-days { display: none; }
.cd-day { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 8px; }
.cd-day.today { border-color: var(--brand); }
.cd-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; margin-bottom: 6px; }
.cd-ev { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--brand); background: var(--brand-soft);
  border-radius: 8px; padding: 8px 10px; margin-top: 6px; font: inherit; font-size: 14px; cursor: pointer; color: var(--text); }

.cal-month { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; background: var(--line-soft); gap: 1px; margin-bottom: 18px; }
.cm-wd { background: var(--surface); text-align: center; font-size: 12px; color: var(--muted); padding: 8px 0; }
.cm-cell { background: var(--surface); min-height: 96px; padding: 5px; cursor: pointer; }
.cm-cell.out { background: var(--surface-2); }
.cm-cell.out .cm-num { color: var(--axis); }
.cm-num { font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.cm-cell.today .cm-num { color: #fff; background: var(--brand); border-radius: 50%; width: 22px; height: 22px; line-height: 22px; text-align: center; }
.cm-ev { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--brand); background: var(--brand-soft);
  border-radius: 5px; padding: 2px 5px; margin-bottom: 3px; font: inherit; font-size: 11px; cursor: pointer; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-more { border: 0; background: none; font: inherit; font-size: 11px; color: var(--brand); cursor: pointer; padding: 0 4px; }

@media (max-width: 760px) {
  .cal-week { display: none; }
  .cal-days { display: block; }
  .cm-cell { min-height: 58px; padding: 3px; }
  .cm-ev { font-size: 0; padding: 0; height: 6px; border-left-width: 0; background: var(--brand); border-radius: 3px; }
  .cm-ev.done { background: var(--axis); }
  .cm-ev.live { background: var(--bad); }
}
.class-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; }
.chip { border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.chip.on, .chip:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }

/* игра «На скорость» и рейтинг */
.cz-timer { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 16px; }
.cz-q { font-size: 18px; line-height: 1.5; text-align: center; padding: 18px 12px 22px; min-height: 90px; }
.cz-speed-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .cz-speed-opts { grid-template-columns: 1fr; } }
.cz-opt { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 14px 12px; font: inherit;
  font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .08s; color: var(--text); }
.cz-opt:hover { border-color: var(--brand); background: var(--brand-soft); }
.cz-opt:active { transform: scale(.98); }
.cz-opt.ok { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.cz-opt.bad { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.cz-rating { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.cz-rrow { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.cz-rrow.me { border-color: var(--brand); background: var(--brand-soft); }
.cz-rrow .spacer { flex: 1; }
.cz-place { width: 26px; text-align: center; font-weight: 700; }

/* тарифы */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.plan { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.plan.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.plan-name { font-weight: 700; font-size: 16px; }
.plan-price { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.plan-price span { font-size: 13px; font-weight: 500; color: var(--muted); }
.plan ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-2); display: flex; flex-direction: column; gap: 4px; }
.room-timer { font-variant-numeric: tabular-nums; font-weight: 700; padding: 3px 9px; border-radius: 8px; background: rgba(255,255,255,.12); white-space: nowrap; }
.room-timer.low { background: #e5484d; color: #fff; }
.notice.warn{background:var(--warn-soft); color:var(--warn)}

/* ================= Телефон и планшет ================= */
.tabs { top: var(--tb-h, 57px); }
.topbar .brand { min-width: 0; }
.topbar .brand span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tb-extra { display: contents; }
.tb-menu-btn { display: none; }

@media (max-width: 640px) {
  .topbar { flex-wrap: nowrap; padding: 9px 12px; gap: 8px; }
  .topbar .brand { font-size: 15px; }
  .topbar .brand::before { width: 22px; height: 22px; border-radius: 7px; }
  .topbar .who, .topbar #logoutBtn, .topbar .tb-extra { display: none; }
  .tb-menu-btn { display: inline-flex; min-width: 38px; justify-content: center; }
  #bellWrap { margin-left: auto; }
  .topbar.open { flex-wrap: wrap; }
  .topbar.open .brand { flex: 1 1 60%; }
  .topbar.open .tb-extra { display: flex; flex-wrap: wrap; gap: 8px; order: 5; flex-basis: 100%; }
  .topbar.open .who { display: block; order: 6; flex: 1; padding: 6px 0; }
  .topbar.open #logoutBtn { display: inline-flex; order: 7; }

  /* вкладки: подсказка, что их можно листать вбок */
  .tabs { padding: 0 8px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .tab { padding: 12px 11px 11px; font-size: 14px; }

  /* плитки цифр — по две в ряд, компактнее */
  .grid.c4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 12px 13px; }
  .stat .value { font-size: 23px; }
  .stat .emoji { top: 9px; right: 10px; font-size: 17px; }
  .card { padding: 15px; }
  .access-bar { margin: 8px 10px 0; font-size: 13px; }

  /* таблицы → карточки */
  .tablewrap table.stack { min-width: 0 !important; }
  .tablewrap table.stack thead { display: none; }
  .tablewrap table.stack, .tablewrap table.stack tbody, .tablewrap table.stack tr { display: block; width: 100%; }
  .tablewrap table.stack tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .tablewrap table.stack tr:last-child { border-bottom: 0; }
  .tablewrap table.stack td { display: block; padding: 4px 0; border: 0; text-align: right; min-height: 26px; overflow: hidden; }
  .tablewrap table.stack td::before { content: attr(data-label); float: left; max-width: 48%; text-align: left;
    font-size: 12px; color: var(--muted); padding-right: 10px; line-height: 1.9; }
  .tablewrap table.stack td[data-label=""]::before { display: none; }
  .tablewrap table.stack td:first-child { font-weight: 650; font-size: 15px; text-align: left; }
  .tablewrap table.stack td:first-child::before { display: none; }
  .tablewrap table.stack td.row { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
  .tablewrap table.stack td.row::before { display: none; }
  .tablewrap table.stack td .row { justify-content: flex-end; }
  .tablewrap table.stack td[colspan] { text-align: center; }
}

/* планшет: шапка без переносов, вкладки плотнее */
@media (min-width: 641px) and (max-width: 1024px) {
  .topbar { padding: 10px 16px; gap: 10px; }
  .topbar .who { display: none; }
  .tab { padding: 13px 11px 12px; }
  .wrap { padding: 20px 18px 70px; }
}
.subj-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.subj-chip { cursor: pointer; }
.subj-chip input { position: absolute; opacity: 0; pointer-events: none; }
.subj-chip span { display: inline-block; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2);
  font-size: 13px; transition: .15s var(--ease); }
.subj-chip input:checked + span { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.subj-chip input:focus-visible + span { outline: 3px solid var(--brand-ring); }

/* ================= ID и привязка ученик ↔ преподаватель ================= */
.id-share { display: flex; flex-direction: column; gap: 10px; }
.id-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pid { font: 700 17px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; color: var(--brand);
  background: var(--brand-soft); border: 1px dashed color-mix(in srgb, var(--brand) 45%, transparent); border-radius: 10px;
  padding: 8px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.pid i { font-style: normal; font-size: 13px; opacity: .7; }
.pid:hover { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.lk-card { min-height: 8px; margin: 4px 0 14px; }
.lk-person { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.lk-ava { width: 48px; height: 48px; border-radius: 14px; flex: none; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 17px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.lk-ava.student { background: linear-gradient(135deg, #1baf7a, #2a78d6); }
.lk-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lk-who b { font-size: 16px; }
.lk-who span { color: var(--text-2); font-size: 13px; }
.lk-who code { font-size: 12px; color: var(--muted); }
.lk-status { margin-top: 10px; font-size: 13.5px; padding: 9px 12px; border-radius: 10px; }
.lk-status.ok { background: var(--good-soft); color: #0a7d0a; }
.lk-status.warn { background: var(--warn-soft); color: #8a6400; }
.lk-status.bad { background: var(--bad-soft); color: #b32f2f; }
.lk-skel { display: flex; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.lk-skel i { width: 48px; height: 48px; border-radius: 14px; background: var(--surface-3); animation: skel 1.1s ease-in-out infinite alternate; }
.lk-skel div { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lk-skel b, .lk-skel span { height: 12px; border-radius: 6px; background: var(--surface-3); animation: skel 1.1s ease-in-out infinite alternate; }
.lk-skel b { width: 55%; } .lk-skel span { width: 35%; }
@keyframes skel { to { opacity: .45; } }
.lk-done { text-align: center; padding: 18px 8px 6px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.lk-done b { font-size: 18px; }
.lk-done span { color: var(--text-2); font-size: 14px; }
.lk-check { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; color: #fff; background: var(--good);
  animation: pop .35s var(--ease); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
#lkCode { font: 600 17px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; }
.locked-teacher { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); font-weight: 600; }
.locked-teacher .lk-ava { width: 34px; height: 34px; border-radius: 10px; font-size: 13px; }
.locked-teacher em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); font-weight: 500; }
@media (max-width: 640px) {
  .lk-actions { position: sticky; bottom: 0; background: var(--surface); padding-top: 10px; }
  .lk-actions .btn { flex: 1; justify-content: center; }
  .lk-actions .spacer { display: none; }
  .pid { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .lk-check, .lk-skel i, .lk-skel b, .lk-skel span { animation: none; } }
.me-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; }
.me-teacher { border-left: 1px solid var(--line); padding-left: 22px; }
.no-teacher { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 1100px; margin: 12px auto; }
.no-teacher span { flex: 1; min-width: 220px; }
.btn.ghost-danger { background: transparent; color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
@media (max-width: 760px) {
  .me-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .me-teacher { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 14px; }
  .no-teacher { margin: 10px; }
}