/* ============================================================
   ОФИЦИАЛЬНЫЙ СТИЛЬ · Ч/Б
   ============================================================ */
:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --gray-1:#f4f4f4;
  --gray-2:#e0e0e0;
  --gray-3:#9a9a9a;
  --gray-4:#4a4a4a;
  --line:#1a1a1a;
  --ok:#0a6b2f;
  --bad:#8a1010;
  --radius:4px;
  --t:.3s cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:"Times New Roman",Georgia,serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  min-height:100dvh;
  display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ============ ШАПКА ============ */
header{
  border-bottom:2px solid var(--line);
  padding:16px 20px;
  display:flex;align-items:center;gap:16px;
}
header .emblem{
  width:44px;height:44px;flex:0 0 44px;
  border:2px solid var(--line);
  display:grid;place-items:center;
  font-weight:700;font-size:1.3rem;
  font-family:Georgia,serif;
}
header .titles{flex:1;min-width:0}
header h1{
  font-size:clamp(1rem,3.4vw,1.25rem);
  font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;
}
header p{
  font-size:.78rem;color:var(--gray-4);
  font-style:italic;margin-top:2px;
}

/* ============ НАВИГАЦИЯ ============ */
nav{
  border-bottom:1px solid var(--gray-2);
  background:var(--paper);
  position:sticky;top:0;z-index:20;
}
.tabs{
  display:flex;gap:0;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto;
  scroll-snap-align:start;
  padding:12px 18px;
  border:none;
  border-right:1px solid var(--gray-2);
  background:var(--paper);
  color:var(--gray-4);
  font-family:inherit;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  cursor:pointer;
  transition:var(--t);
  white-space:nowrap;
  text-decoration:none;
  position:relative;
}
.tab:last-child{border-right:none}
.tab::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t);
}
.tab.active{color:var(--ink);font-weight:700}
.tab.active::after{transform:scaleX(1)}

/* ============ ОСНОВНОЙ КОНТЕНТ ============ */
main{flex:1;padding:24px 20px 60px;max-width:820px;width:100%;margin:0 auto}

.card{
  border:1px solid var(--line);
  background:var(--paper);
  padding:22px;
  margin-bottom:18px;
}

.q-head{
  display:flex;align-items:flex-start;gap:14px;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px dashed var(--gray-2);
}
.q-num{
  flex:0 0 32px;height:32px;
  display:grid;place-items:center;
  border:1.5px solid var(--line);
  font-weight:700;font-size:.9rem;
  font-family:Georgia,serif;
}
.q-text{font-size:1rem;font-weight:700;line-height:1.4;padding-top:4px}

.illus{
  display:block;
  width:100%;max-width:200px;
  margin:0 auto 18px;
  color:var(--ink);
}
.illus svg{width:100%;height:auto;display:block}
.illus svg *{stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ============ ВАРИАНТЫ ОТВЕТА ============ */
.options{display:flex;flex-direction:column;gap:0;counter-reset:opt}
.opt{
  padding:14px 16px;
  border:1px solid var(--gray-2);
  border-top:none;
  background:var(--paper);
  color:var(--ink);
  font-family:inherit;
  font-size:.95rem;
  text-align:left;
  cursor:pointer;
  transition:var(--t);
  position:relative;
  padding-left:52px;
  text-decoration:none;
  display:block;
}
.opt:first-child{border-top:1px solid var(--gray-2)}
.opt::before{
  content:counter(opt,upper-alpha);
  counter-increment:opt;
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;
  display:grid;place-items:center;
  border:1.5px solid var(--line);
  font-weight:700;font-size:.8rem;
  font-family:Georgia,serif;
}
.opt:hover{background:var(--gray-1)}
.opt.correct{
  border-color:var(--ok);background:#eaf5ee;color:var(--ok);font-weight:700;
}
.opt.correct::before{border-color:var(--ok);background:var(--ok);color:#fff}
.opt.wrong{
  border-color:var(--bad);background:#f7eaea;color:var(--bad);
}
.opt.wrong::before{border-color:var(--bad);background:var(--bad);color:#fff}
.opt:disabled{cursor:default}

/* ============ ПРОГРЕСС-БАР ============ */
.bar{
  height:3px;background:var(--gray-2);
  margin:0 0 18px;overflow:hidden;
}
.bar>i{
  display:block;height:100%;width:0%;
  background:var(--ink);
  transition:width .4s var(--t);
}

/* ============ РЕЗУЛЬТАТ ============ */
.result{
  text-align:center;font-weight:700;
  padding:12px;border:1px solid var(--line);
  margin-top:16px;opacity:0;transform:translateY(6px);
  transition:var(--t);font-size:.95rem;
}
.result.show{opacity:1;transform:translateY(0)}
.result.ok{color:var(--ok);border-color:var(--ok);background:#eaf5ee}
.result.bad{color:var(--bad);border-color:var(--bad);background:#f7eaea}

.hint{
  color:var(--gray-4);font-size:.78rem;
  text-align:center;margin-top:12px;
  font-style:italic;
}

/* ============ ФОРМЫ ============ */
.form-row{margin-bottom:14px}
.form-row label{
  display:block;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.05em;
  color:var(--gray-4);margin-bottom:6px;
}
.form-row input,
.form-row select,
.form-row textarea{
  width:100%;padding:10px 12px;
  border:1.5px solid var(--line);
  background:var(--paper);color:var(--ink);
  font-family:inherit;font-size:.95rem;
  outline:none;transition:var(--t);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{border-width:2px}
.form-row textarea{min-height:70px;resize:vertical}

/* ============ БЛОКИ ВОПРОСОВ (конструктор) ============ */
.q-block{
  border:1px solid var(--line);
  padding:16px;margin-bottom:12px;
  background:var(--gray-1);
}
.q-block h4{
  font-size:.9rem;margin-bottom:12px;
  display:flex;justify-content:space-between;align-items:center;
}
.q-block .remove{
  border:none;background:none;color:var(--bad);
  cursor:pointer;font-size:.8rem;text-transform:uppercase;
}
.opt-row{display:flex;gap:8px;margin-bottom:6px;align-items:center}
.opt-row input[type="text"]{flex:1}
.opt-row input[type="radio"]{width:20px;height:20px;accent-color:var(--ink);flex:0 0 20px}
.opt-row .del{
  border:1px solid var(--gray-2);background:var(--paper);
  width:32px;height:32px;cursor:pointer;font-size:1rem;
}
.opt-row .del:hover{border-color:var(--bad);color:var(--bad)}

.audience-box{
  border:1px dashed var(--gray-2);padding:12px;margin-top:8px;
  background:var(--paper);display:none;
}
.audience-box.show{display:block}
.audience-box label{display:block;margin-bottom:6px;font-size:.85rem}
.audience-box input[type="checkbox"]{margin-right:6px}

/* ============ КНОПКИ ============ */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.toolbar .btn{width:auto;padding:10px 16px;font-size:.8rem}

.btn{
  display:block;width:100%;
  padding:13px 18px;
  border:1.5px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  font-family:inherit;font-size:.92rem;
  font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;
  cursor:pointer;transition:var(--t);
  text-decoration:none;
  text-align:center;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--paper);color:var(--ink)}

/* ============ ТОСТ ============ */
.toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);
  padding:12px 24px;background:var(--ink);color:var(--paper);
  border-radius:4px;font-size:.9rem;opacity:0;pointer-events:none;
  transition:var(--t);z-index:100;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{background:var(--ok)}
.toast.bad{background:var(--bad)}

/* ============ КНОПКА СМЕНЫ ТЕМЫ ============ */
.theme-toggle{
  flex:0 0 auto;
  width:40px;height:40px;
  border:1.5px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  font-size:1.2rem;
  display:grid;place-items:center;
  transition:var(--t);
  margin-left:auto;
}
.theme-toggle:hover{
  background:var(--ink);
  color:var(--paper);
}
.theme-toggle .theme-icon{line-height:1}

/* ============ СПИСОК УЧЕНИКОВ ============ */
.class-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.class-tab{
  padding:8px 14px;border:1.5px solid var(--gray-2);
  background:var(--paper);cursor:pointer;
  font-family:inherit;font-size:.85rem;transition:var(--t);
}
.class-tab.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.student-row{
  display:grid;grid-template-columns:1fr auto;
  gap:10px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--gray-2);
}
.student-row:last-child{border-bottom:none}
.student-row .fio{font-size:.95rem}
.student-row .login{font-size:.75rem;color:var(--gray-4);font-family:monospace}
.student-row button{
  border:1px solid var(--gray-2);background:var(--paper);
  padding:6px 10px;cursor:pointer;font-size:.8rem;
}
.student-row button:hover{border-color:var(--bad);color:var(--bad)}

/* ============ ТАЙМЕРЫ ============ */
.timer-wrap{
  display:flex;align-items:center;gap:12px;
  margin-bottom:14px;
}
.timer-label{
  font-size:.78rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--gray-4);
  flex:0 0 auto;
}
.timer-bar{
  flex:1;height:6px;background:var(--gray-2);
  overflow:hidden;
}
.timer-bar>i{
  display:block;height:100%;width:100%;
  background:var(--ink);
  transform-origin:left;
  transition:width .3s linear;
}
.timer-num{
  flex:0 0 50px;text-align:right;
  font-family:"Courier New",monospace;
  font-weight:700;font-size:1rem;
}

/* ============ СТАТИСТИКА ============ */
.stats{
  display:grid;grid-template-columns:1fr 1fr;
  gap:12px;margin-top:16px;
}
.stat{
  border:1px solid var(--line);
  padding:12px;text-align:center;
}
.stat b{display:block;font-size:1.4rem;font-family:Georgia,serif}
.stat span{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-4)}

/* ============ ТАБЛИЦА РЕЗУЛЬТАТОВ ============ */
.results-table{
  width:100%;border-collapse:collapse;
  font-size:.9rem;
}
.results-table th,
.results-table td{
  border:1px solid var(--gray-2);
  padding:8px;text-align:left;
}
.results-table th{
  background:var(--gray-1);font-weight:700;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;
}
.results-table tr:hover{background:var(--gray-1)}
.pct{font-weight:700}
.pct.ok{color:var(--ok)}
.pct.bad{color:var(--bad)}

/* ============ АДАПТИВ ============ */
@media (max-width:520px){
  main{padding:16px 14px 50px}
  .card{padding:16px}
  .q-text{font-size:.92rem}
  .opt{padding:12px 14px 12px 46px;font-size:.88rem}
  .illus{max-width:150px}
  .tab{padding:11px 14px;font-size:.74rem}
  header{padding:12px 14px}
  header .emblem{width:38px;height:38px;flex:0 0 38px;font-size:1.1rem}
  .theme-toggle{width:36px;height:36px;font-size:1.1rem}
  .results-table{font-size:.8rem}
  .results-table th,
  .results-table td{padding:6px}
}

@media (hover:none){
  .opt:hover{background:var(--paper)}
  .btn:hover{background:var(--paper);color:var(--ink)}
  .btn.primary:hover{background:var(--ink);color:var(--paper)}
}

/* ============ ТЁМНАЯ ТЕМА (по системе) ============ */
@media (prefers-color-scheme: dark){
  :root{
    --ink:#e8e8e8;
    --paper:#1a1a1a;
    --gray-1:#242424;
    --gray-2:#333333;
    --gray-3:#888888;
    --gray-4:#b0b0b0;
    --line:#e8e8e8;
    --ok:#4ade80;
    --bad:#f87171;
    --bg:#121212;
    --text:#e8e8e8;
  }
  .opt.correct{background:#143020;color:var(--ok)}
  .opt.wrong{background:#301414;color:var(--bad)}
  .result.ok{background:#143020}
  .result.bad{background:#301414}
}

/* ============ ТЁМНАЯ ТЕМА (по классу body.dark) ============ */
body.dark{
  --ink:#e8e8e8;
  --paper:#1a1a1a;
  --gray-1:#242424;
  --gray-2:#333333;
  --gray-3:#888888;
  --gray-4:#b0b0b0;
  --line:#e8e8e8;
  --ok:#4ade80;
  --bad:#f87171;
  --bg:#121212;
  --text:#e8e8e8;
}
body.dark .opt.correct{background:#143020;color:var(--ok)}
body.dark .opt.wrong{background:#301414;color:var(--bad)}
body.dark .result.ok{background:#143020}
body.dark .result.bad{background:#301414}

body{
  transition:background-color .3s, color .3s;
}


/* ============ MARKDOWN ============ */
.md-view{
  line-height:1.7;
  font-size:.98rem;
  color:var(--ink);
}
.md-view h1,
.md-view h2,
.md-view h3,
.md-view h4,
.md-view h5,
.md-view h6{
  margin:16px 0 8px;
  font-weight:700;
  letter-spacing:.02em;
}
.md-view h1{font-size:1.4rem}
.md-view h2{font-size:1.2rem}
.md-view h3{font-size:1.05rem}
.md-view h4,
.md-view h5,
.md-view h6{font-size:.95rem}
.md-view p{margin:10px 0}
.md-view ul,
.md-view ol{margin:10px 0 10px 24px}
.md-view li{margin:4px 0}
.md-view pre{
  background:var(--gray-1);
  border-left:3px solid var(--ink);
  padding:12px 14px;
  overflow-x:auto;
  margin:12px 0;
  font-size:.88rem;
}
.md-view pre code{
  background:transparent;
  padding:0;
  border-radius:0;
}
.md-view a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
}
.md-view a:hover{
  opacity:.7;
}
.md-view strong{font-weight:700}
.md-view em{font-style:italic}

/* ---------- Поиск ---------- */
.kb-search{
  display:flex;gap:8px;flex-wrap:wrap;
  margin-bottom:14px;
  align-items:center;
}
.kb-search input{
  flex:1;min-width:200px;
  padding:10px 12px;
  border:1.5px solid var(--line);
  background:var(--paper);color:var(--ink);
  font-family:inherit;font-size:.95rem;
  outline:none;transition:var(--t);
}
.kb-search input:focus{border-width:2px}
.kb-search .count{
  font-size:.8rem;color:var(--gray-4);
  text-transform:uppercase;letter-spacing:.05em;
  white-space:nowrap;
}

/* ---------- Подсветка ---------- */
mark{
  background:#fff3a3;
  color:var(--ink);
  padding:1px 3px;
  border-radius:2px;
}
body.dark mark{
  background:#5a4a00;
  color:#fff3a3;
}

/* ---------- Превью в списке ---------- */
.kb-snippet{
  font-size:.82rem;
  color:var(--gray-4);
  margin-top:6px;
  line-height:1.5;
}
.kb-snippet mark{font-weight:700}

/* ---------- Превью Markdown в редакторе ---------- */
.md-preview{
  border:1px dashed var(--gray-2);
  padding:14px;
  margin-top:8px;
  background:var(--gray-1);
  min-height:80px;
}
.md-preview-label{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--gray-4);
  margin-bottom:6px;
}

/* ============================================================
   КАСТОМНЫЕ ЧЕКБОКСЫ И РАДИОКНОПКИ · Ч/Б
   ============================================================ */

/* --- Скрываем нативный вид --- */
input[type="checkbox"],
input[type="radio"]{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  width:22px;
  height:22px;
  flex:0 0 22px;
  border:1.5px solid var(--line);
  background:var(--paper);
  cursor:pointer;
  position:relative;
  transition:var(--t);
  margin:0;
  vertical-align:middle;
  outline:none;
}

/* --- Чекбокс (квадрат) --- */
input[type="checkbox"]{
  border-radius:3px;
}

/* --- Радиокнопка (круг) --- */
input[type="radio"]{
  border-radius:50%;
}

/* --- Наведение --- */
input[type="checkbox"]:hover,
input[type="radio"]:hover{
  background:var(--gray-1);
}

/* --- Фокус (клавиатура) --- */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
}

/* --- Чекбокс: галочка --- */
input[type="checkbox"]:checked{
  background:var(--ink);
  border-color:var(--ink);
}
input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  left:6px;
  top:2px;
  width:6px;
  height:11px;
  border:solid var(--paper);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* --- Радиокнопка: точка --- */
input[type="radio"]:checked{
  border-color:var(--ink);
  border-width:2px;
}
input[type="radio"]:checked::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--ink);
  transform:translate(-50%, -50%);
}

/* --- Отключённые --- */
input[type="checkbox"]:disabled,
input[type="radio"]:disabled{
  opacity:.4;
  cursor:not-allowed;
}

/* ============================================================
   СТИЛИ ДЛЯ ГРУПП ЧЕКБОКСОВ (классы, аудитория)
   ============================================================ */

/* --- Строка с чекбоксом и подписью --- */
.check-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1.5px solid var(--gray-2);
  background:var(--paper);
  cursor:pointer;
  transition:var(--t);
  margin-bottom:8px;
  user-select:none;
  font-size:.92rem;
}
.check-row:hover{
  border-color:var(--ink);
  background:var(--gray-1);
}
.check-row input[type="checkbox"]{
  margin:0;
}
.check-row span{
  flex:1;
  line-height:1.3;
}

/* --- Выбранный чекбокс — рамка вокруг всей строки --- */
.check-row:has(input[type="checkbox"]:checked){
  border-color:var(--ink);
  background:var(--gray-1);
}

/* --- Компактные чекбоксы (классы в конструкторе) --- */
.check-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(90px, 1fr));
  gap:8px;
  margin-top:4px;
}
.check-tile{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1.5px solid var(--gray-2);
  background:var(--paper);
  cursor:pointer;
  transition:var(--t);
  user-select:none;
  font-size:.9rem;
  justify-content:center;
}
.check-tile:hover{
  border-color:var(--ink);
}
.check-tile:has(input:checked){
  border-color:var(--ink);
  background:var(--ink);
  color:var(--paper);
}
.check-tile:has(input:checked) input[type="checkbox"]{
  border-color:var(--paper);
  background:var(--paper);
}
.check-tile:has(input:checked) input[type="checkbox"]::after{
  border-color:var(--ink);
}
.check-tile span{
  font-weight:700;
}

/* ============================================================
   ПРАВИЛЬНЫЙ ОТВЕТ В КОНСТРУКТОРЕ
   ============================================================ */

/* --- Строка варианта с радио --- */
.opt-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  padding:8px 10px;
  border:1.5px solid transparent;
  border-radius:4px;
  transition:var(--t);
  background:var(--paper);
}
.opt-row:hover{
  border-color:var(--gray-2);
}

/* --- Выбранный правильный ответ — яркая рамка --- */
.opt-row:has(input[type="radio"]:checked){
  border-color:var(--ink);
  background:#f0f0f0;
}
body.dark .opt-row:has(input[type="radio"]:checked){
  background:#2a2a2a;
}

/* --- Подпись «Правильный ответ» --- */
.opt-row:has(input[type="radio"]:checked)::after{
  content:"✓ правильный";
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:700;
  color:var(--ink);
  border:1px solid var(--ink);
  padding:2px 6px;
  border-radius:2px;
  margin-left:auto;
  white-space:nowrap;
}

/* --- Текстовое поле внутри opt-row --- */
.opt-row input[type="text"]{
  flex:1;
  min-width:0;
  padding:8px 10px;
  border:1px solid var(--gray-2);
  background:var(--paper);
  color:var(--ink);
  font-family:inherit;
  font-size:.92rem;
  outline:none;
  transition:var(--t);
}
.opt-row input[type="text"]:focus{
  border-color:var(--ink);
}

/* --- Кнопка удалить --- */
.opt-row .del{
  flex:0 0 36px;
  height:36px;
  border:1.5px solid var(--gray-2);
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  font-size:1.1rem;
  transition:var(--t);
  display:grid;
  place-items:center;
}
.opt-row .del:hover{
  border-color:var(--bad);
  color:var(--bad);
  background:var(--paper);
}

/* --- Тёмная тема: правильный ответ --- */
body.dark input[type="checkbox"]:checked::after{
  border-color:var(--paper);
}
body.dark input[type="radio"]:checked::after{
  background:var(--ink);
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:520px){
  input[type="checkbox"],
  input[type="radio"]{
    width:20px;
    height:20px;
    flex:0 0 20px;
  }
  input[type="checkbox"]:checked::after{
    left:5px;
    top:1px;
    width:6px;
    height:10px;
  }
  input[type="radio"]:checked::after{
    width:8px;
    height:8px;
  }
  .check-grid{
    grid-template-columns:repeat(auto-fill, minmax(72px, 1fr));
  }
  .opt-row:has(input[type="radio"]:checked)::after{
    font-size:.62rem;
    padding:1px 4px;
  }
}

.site-footer {
  margin-top: 40px;
  padding: 14px 0;
  text-align: center;
  border-top: 1px solid var(--line, #e2e2e2);
  font-size: .8rem;
  color: var(--gray-4, #888);
  animation: footerFadeIn .5s ease;
}

@keyframes footerFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.footer-link {
  position: relative;
  color: var(--gray-4, #888);
  text-decoration: none;
  padding: 2px 4px;
  transition: color .25s ease;
}

.footer-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s ease;
}

.footer-link:hover {
  color: var(--ink, #222);
}

.footer-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.footer-dot {
  margin: 0 8px;
  color: var(--gray-2, #ccc);
}

/* ============ АВАТАРКА ============ */
.avatar{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border:2px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:Georgia,serif;
  font-weight:700;
  font-size:1rem;
  letter-spacing:.02em;
  background:var(--paper);
  color:var(--ink);
  text-transform:uppercase;
  user-select:none;
}
.avatar.lg{
  width:80px;height:80px;flex:0 0 80px;
  font-size:1.6rem;
}
.avatar.sm{
  width:32px;height:32px;flex:0 0 32px;
  font-size:.75rem;
}

@media (max-width:520px){
  .avatar{width:38px;height:38px;flex:0 0 38px;font-size:.9rem}
  .avatar.lg{width:64px;height:64px;flex:0 0 64px;font-size:1.3rem}
}