:root{
  --ink:#eef2ff;
  --ink-dim:#a9b4d6;
  --bg-0:#060a16;
  --bg-1:#0e1626;
  --gold:#5b8dff;
  --gold-bright:#8fb4ff;
  --line:rgba(120,160,255,0.35);
  --neon-a:#5b8dff;
  --neon-b:#3d6dff;
  --neon-c:#e8bd5a;
  --neon-d:#ff4d5f;
  --true-gold:#e8bd5a;
  --true-gold-soft:#e2cf9a;
}
.hex-fixed-btn{
  position:fixed; bottom:18px; left:18px; z-index:400;
  width:44px; height:44px; padding:0; border:none; background:none; cursor:pointer;
  opacity:0.5; transition:opacity .2s ease, transform .2s ease;
}
.hex-fixed-btn:hover{ opacity:1; transform:translateY(-3px); }
.hex-fixed-btn svg{ width:100%; height:100%; display:block; overflow:visible; }
.hex-fixed-btn .hex-bg{
  fill:rgba(10,16,30,0.38); stroke:var(--line); stroke-width:1.6;
  transition:stroke .18s ease, fill .18s ease;
}
.hex-fixed-btn .hex-glyph{
  fill:none; stroke:var(--ink-dim); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; transition:stroke .18s ease;
}
.hex-fixed-btn:hover .hex-bg{ stroke:var(--neon-c); fill:rgba(178,61,255,0.12); }
.hex-fixed-btn:hover .hex-glyph{ stroke:var(--gold-bright); }
@media (max-width:480px){ .hex-fixed-btn{ width:38px; height:38px; bottom:12px; left:12px; } }
*{box-sizing:border-box;}
html,body{margin:0;padding:0; width:100%; height:100%;}
html{
  background-color:var(--bg-0);
  background-image:url('../img/bg-hex.jpg');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  background-attachment:fixed;
}
body{
  background:transparent;
  color:var(--ink);
  font-family:'Cormorant', Georgia, serif;
  font-size:clamp(15px, 1.1vw + 12px, 18px);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
#bg-canvas{
  display:none;
}
#bg-overlay{
  display:none;
}
.brand-gerb{
  height:30px; width:auto; vertical-align:middle; margin-right:8px;
  filter:drop-shadow(0 0 8px rgba(139,123,255,0.55));
}
@media (max-width:480px){ .brand-gerb{ height:24px; margin-right:6px; } }
a{color:var(--true-gold); text-decoration:none;}
a:hover{text-decoration:underline;}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  max-width:760px; margin:14px auto; padding:clamp(9px,1.6vw,12px) clamp(14px,3vw,20px);
  font-family:'Cousine',monospace; font-size:clamp(12px, 0.5vw + 11px, 13.5px); letter-spacing:0.02em;
  position:relative; border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
}
.nav::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(160deg, rgba(14,20,38,0.32), rgba(8,12,24,0.4));
  backdrop-filter:blur(18px) saturate(1.1);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  border-radius:16px;
}
/* Бренд в шапке: герб слева, справа название и под ним подпись.
   Герб выравниваем по центру всего текстового блока, а не по строке. */
.nav .brand{
  display:inline-flex; align-items:center; gap:0;
}
.nav .brand .brand-text{
  display:inline-flex; flex-direction:column; align-items:center; line-height:1;
  /* Прежний градиент названия остаётся ровно таким, каким был. */
  font-family:'Cormorant SC',serif; font-size:clamp(17px, 1.5vw + 13px, 23px); font-weight:700; letter-spacing:0.05em;
  background:linear-gradient(90deg, var(--neon-a), var(--neon-b), var(--neon-c));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 14px rgba(139,123,255,0.55));
}
/* Подпись под названием: то же настоящее металлическое золото, что
   и в панели на главной, но ещё мельче — шапка не должна утяжеляться. */
.nav .brand .brand-sub{
  font-size:0.36em;              /* доля от названия — масштабируется вместе с ним */
  letter-spacing:0.34em;
  text-indent:0.34em;            /* компенсируем разрядку последней буквы */
  margin-top:0.28em;
  color:var(--true-gold);
  background:linear-gradient(
    180deg,
    #6d4708 0%, #b8862b 22%, #e6c25c 42%, #fbe9a6 51%,
    #ddb148 60%, #9c6f1c 80%, #5a3a06 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .nav .brand .brand-sub{ -webkit-text-fill-color:var(--true-gold); background:none; }
}
@media (max-width:480px){
  .nav .brand .brand-sub{ letter-spacing:0.24em; text-indent:0.24em; margin-top:0.22em; }
}
#nav-hamburger-btn{
  display:inline-flex; align-items:center; justify-content:center; margin-left:8px;
  width:30px; height:30px; border-radius:8px; border:1px solid rgba(255,255,255,0.09); background:rgba(255,255,255,0.02);
  color:var(--ink-dim); cursor:pointer; flex:0 0 auto; transition:border-color .15s, color .15s; z-index:610; position:relative;
}
#nav-hamburger-btn svg{ width:14px; height:14px; }
#nav-hamburger-btn:hover{ border-color:var(--gold-bright); color:var(--gold-bright); }
#nav-menu-backdrop{
  display:none; position:fixed; inset:0; z-index:590; background:rgba(2,3,8,0.5);
}
#nav-menu-backdrop.open{ display:block; }
#nav-menu-panel{
  display:none; position:fixed; top:0; right:0; bottom:0; z-index:600;
  width:min(340px, 88vw); overflow-y:auto;
  background:linear-gradient(180deg, rgba(10,14,28,0.94), rgba(6,9,18,0.97));
  backdrop-filter:blur(24px) saturate(1.1); -webkit-backdrop-filter:blur(24px) saturate(1.1);
  border-left:1px solid rgba(255,255,255,0.08);
  box-shadow:-20px 0 60px rgba(0,0,0,0.5);
  padding:80px 0 40px;
}
#nav-menu-panel.open{ display:block; }
.nav-menu-toplink{
  display:block; padding:15px 26px; font-family:'Cormorant SC',serif; font-size:17px;
  color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.06);
  transition:color .15s;
}
.nav-menu-toplink:hover, .nav-menu-toplink.active{ color:var(--gold-bright); }
.nav-menu-group{ border-bottom:1px solid rgba(255,255,255,0.06); }
.nav-menu-cat{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:none; cursor:pointer; text-align:left;
  padding:15px 26px; font-family:'Cormorant SC',serif; font-size:17px; color:var(--ink);
  transition:color .15s;
}
.nav-menu-cat:hover, .nav-menu-cat.active{ color:var(--gold-bright); }
.nav-menu-chevron{ width:12px; height:12px; flex:0 0 auto; color:var(--ink-dim); transition:transform .2s, color .2s; }
.nav-menu-cat[aria-expanded="true"] .nav-menu-chevron{ transform:rotate(90deg); color:var(--gold-bright); }
.nav-menu-sub{ display:none; flex-direction:column; background:rgba(0,0,0,0.15); }
.nav-menu-sub.open{ display:flex; }
.nav-menu-sub a{
  display:block; padding:11px 26px 11px 40px; font-family:'Cousine',monospace; font-size:12.5px;
  color:var(--ink-dim); text-decoration:none; border-top:1px solid rgba(255,255,255,0.04);
  transition:color .15s;
}
.nav-menu-sub a:hover, .nav-menu-sub a.active{ color:var(--gold-bright); }
@media (max-width:480px){
  #nav-menu-panel{ width:100vw; }
}
.nav .links{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.nav .links a{
  display:inline-flex; align-items:center;
  color:var(--ink-dim);
  font-weight:400;
  text-decoration:none; white-space:nowrap;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .15s, border-color .15s;
}
.nav .links a:hover{
  color:var(--gold-bright);
  border-bottom-color:rgba(232,189,90,0.5);
}
.nav .links a.active{
  color:var(--gold-bright);
}
.nav .links .nav-userbadge{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--ink-dim); font-size:13px;
}
.nav .links .nav-userbadge a{ padding:0; border:none; background:none; color:var(--gold-bright); }
.nav .links .nav-userbadge a:hover{ color:var(--ink); }

.wrap{max-width:760px;margin:0 auto; padding:0 clamp(12px, 3vw, 18px) clamp(40px, 8vw, 72px);}

h1{
  font-family:'Cormorant SC', serif; font-weight:700; font-size:clamp(26px,4.5vw,40px); margin:14px 0 10px;
  text-shadow:0 0 24px rgba(139,123,255,0.45), 0 2px 14px rgba(0,0,0,0.7);
  letter-spacing:0.01em;
}
h2{ font-family:'Cormorant SC', serif; font-weight:700; color:var(--gold-bright); font-size:clamp(18px, 1vw + 15px, 22px); text-shadow:0 0 16px rgba(139,123,255,0.3); }
/* Подпись «UNIVERSITY» под названием на главном экране.
   Заголовок LE ROSEY не трогаем — он остаётся тем же шрифтом и цветом.
   Подпись делаем заметно мельче (около 40% от заголовка), чтобы читалась
   как строка герба, а не как второй заголовок.

   Золото здесь настоящее металлическое, а не плоская заливка: градиент
   с тёмной бронзой по краям и светлым бликом в середине обрезается по
   форме букв через background-clip. Плоский #e8bd5a оставлен как цвет
   запасного варианта — он сработает там, где background-clip не поддержан. */
.hex-panel-subtitle{
  font-family:'Cormorant SC', serif;
  font-weight:700;
  font-size:clamp(9.5px, 1.2vw, 13px);
  letter-spacing:0.52em;
  text-indent:0.52em;          /* компенсируем разрядку последней буквы */
  line-height:1;
  margin:-4px 0 12px;
  color:var(--true-gold);
  /* На мелком кегле светлый блик забивает цвет: даём узкую полосу блика
     и широкие насыщенные золотые поля, иначе буквы выглядят белёсыми. */
  background:linear-gradient(
    180deg,
    #6d4708 0%,
    #b8862b 22%,
    #e6c25c 42%,
    #fbe9a6 51%,
    #ddb148 60%,
    #9c6f1c 80%,
    #5a3a06 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  /* Свечение даём фильтром: text-shadow с обрезкой по тексту не работает. */
  filter:drop-shadow(0 1px 1px rgba(0,0,0,0.55)) drop-shadow(0 0 8px rgba(232,189,90,0.28));
}
/* Если браузер не умеет обрезать фон по тексту — остаётся ровный золотой. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .hex-panel-subtitle{ -webkit-text-fill-color:var(--true-gold); background:none; }
}
@media (max-width:480px){
  .hex-panel-subtitle{ letter-spacing:0.38em; text-indent:0.38em; font-size:9.5px; }
}
p.lead{ color:var(--ink-dim); font-style:italic; font-size:clamp(14.5px, 0.6vw + 13px, 17px); max-width:720px; line-height:1.55; text-shadow:0 1px 10px rgba(0,0,0,0.6); }

.card{
  background:linear-gradient(160deg, rgba(14,20,38,0.22), rgba(8,12,24,0.28));
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:clamp(15px,2.4vw,19px) clamp(17px,3vw,22px); margin:14px 0;
  position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 30px rgba(0,0,0,0.25);
  /* transform вынесен отдельно: он анимируется видеокартой, а не
     пересчётом раскладки, поэтому подъём идёт плавно даже на слабых
     устройствах. Кривая с лёгким «доводом» в конце — карточка
     останавливается мягко, а не втыкается. */
  transition: border-color .28s ease,
              box-shadow .28s ease,
              transform .32s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* Подъём только там, где есть настоящее наведение. На сенсорных экранах
   :hover «залипает» после касания, и карточка осталась бы приподнятой. */
@media (hover: hover) and (pointer: fine){
  .card:hover{
    /* Масштаб держим скромным: карточки здесь во всю ширину колонки,
       и увеличение на несколько процентов вылезло бы за край экрана.
       Ощущение приближения даёт подъём и тень, а не размер. */
    /* Академическая сдержанность: подъём 4px без масштабирования.
       Прежние 7px со «вспуханием» читались как рекламный баннер —
       здесь уместнее движение, которое замечаешь, но не разглядываешь. */
    transform: translateY(-4px);
    /* Поднимаем над соседями — иначе выросшая карточка уходит под них. */
    z-index: 3;
    border-color: rgba(232,189,90,0.42);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.06) inset,
      0 14px 36px rgba(0,0,0,0.4),
      0 0 20px rgba(232,189,90,0.08);
  }
  /* Верхняя световая полоса карточки разгорается вместе с подъёмом. */
  .card:hover::before{ opacity:1; box-shadow:0 0 18px rgba(178,61,255,0.85); }

  /* Кнопка внутри наливается золотом — главное, что видно на образце:
     наведение на карточку прямо показывает, что делать дальше. */
  /* Кнопки удаления и отмены исключены: заливать золотом и звать
     стрелкой «дальше» действие, которое стирает данные, — плохая идея. */
  .card:hover .btn.secondary:not(.danger):not([data-no-accent]){
    background: linear-gradient(135deg, var(--true-gold), var(--gold-bright));
    border-color: transparent;
    color: #1a1408;
    box-shadow: 0 4px 16px rgba(232,189,90,0.28);
  }
  .card:hover .chip-btn:not(.filled):not(.danger){
    border-color: rgba(232,189,90,0.6);
    color: var(--gold-bright);
  }

  /* Стрелка появляется у кнопки действия — движение вправо читается
     как «дальше», и это заметнее любой подсветки. */
  .card:hover .btn.secondary:not(.danger):not([data-no-accent])::after{
    content: "→";
    display: inline-block;
    /* Отступ отдельным свойством: пробел внутри content съедается
       при разрядке букв, и стрелка прилипает к тексту. */
    margin-left: .5em;
    animation: card-arrow .34s cubic-bezier(.22,.61,.36,1);
  }
  @keyframes card-arrow{
    from{ opacity:0; transform:translateX(-6px); }
    to  { opacity:1; transform:translateX(0); }
  }

  /* Изображение внутри карточки приближается вместе с ней.
     Работает только там, где картинка обёрнута в .card-media
     с обрезкой — иначе она вылезла бы за скруглённый угол. */
  .card-media{ overflow:hidden; border-radius:12px; }
  .card-media img{ transition: transform .5s cubic-bezier(.22,.61,.36,1); display:block; }
  .card:hover .card-media img{ transform: scale(1.06); }
}

/* Карточка, которую сейчас правят или перетаскивают в режиме управления
   сайтом, не должна прыгать под курсором. */
.cms-editing .card:hover,
.card.cms-dragging,
.cms-dragging{ transform:none; }

/* Уважаем системную настройку: кому анимация мешает — тому её нет.
   Подсветка при этом остаётся, теряется только движение. */
@media (prefers-reduced-motion: reduce){
  .card{ transition: border-color .2s, box-shadow .2s; will-change:auto; }
  .card:hover{ transform:none; }
  .card:hover .card-media img{ transform:none; }
  .card:hover .btn.secondary::after{ animation:none; }
  .card:hover .card-media img{ transform:none; }
}
.card::before{
  content:""; position:absolute; top:0; left:14px; right:14px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--neon-a), var(--neon-b), var(--neon-c), var(--neon-d));
  box-shadow:0 0 12px rgba(178,61,255,0.7);
  /* Приглушена в покое и разгорается при наведении — иначе полоса
     светит одинаково у всех карточек и не помогает глазу. */
  opacity:.82;
  transition: opacity .28s ease, box-shadow .28s ease;
}

footer{ text-align:center; margin-top:48px; font-family:'Cousine',monospace; font-size:12px; letter-spacing:0.1em; color:var(--ink-dim); opacity:0.75; padding-bottom:28px;}

/* ---- единый подвал сайта (js/footer.js переопределяет содержимое <footer>
   и добавляет класс .rich-footer — используем явный класс, а не :has(),
   чтобы не зависеть от поддержки этого селектора в старых браузерах) ---- */
footer.rich-footer{ opacity:1; letter-spacing:normal; text-align:left; padding-bottom:0; margin-top:60px; }
.site-footer-inner{
  max-width:900px; margin:0 auto; padding:36px 20px 24px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.site-footer-top{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid rgba(255,255,255,0.06);
}
.site-footer-brand{ display:flex; align-items:center; gap:12px; }
.site-footer-crest{ width:36px; height:auto; filter:drop-shadow(0 0 8px rgba(139,123,255,0.4)); }
.site-footer-name{ font-family:'Cormorant SC',serif; font-size:17px; color:var(--gold-bright); letter-spacing:0.04em; }
.site-footer-tag{ font-family:'Cousine',monospace; font-size:11px; color:var(--ink-dim); letter-spacing:0.03em; margin-top:2px; }
.site-footer-social{ display:flex; gap:8px; }
.site-footer-icon{
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.09); color:var(--ink-dim); transition:border-color .18s, color .18s;
}
.site-footer-icon:hover{ border-color:var(--gold-bright); color:var(--gold-bright); }
.site-footer-icon svg{ width:15px; height:15px; }

.site-footer-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:20px; margin-bottom:28px; }
.site-footer-heading{ font-family:'Cousine',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:10px; }
.site-footer-col{ display:flex; flex-direction:column; gap:9px; }
.site-footer-col a{ color:var(--ink); font-size:14px; text-decoration:none; transition:color .15s; }
.site-footer-col a:hover{ color:var(--gold-bright); }

.site-footer-bottom{
  display:flex; flex-direction:column; gap:8px; font-family:'Cousine',monospace; font-size:11px; color:var(--ink-dim);
  padding-top:18px; border-top:1px solid rgba(255,255,255,0.06);
}
.site-footer-online-note{ line-height:1.6; }
.site-footer-online-note a{ color:var(--gold-bright); text-decoration:none; border-bottom:1px dotted var(--gold); }

#back-to-top-btn{
  position:fixed; bottom:20px; right:20px; z-index:400;
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(14,20,38,0.7); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.1); color:var(--ink-dim);
  opacity:0; pointer-events:none; transition:opacity .25s, border-color .18s, color .18s;
}
#back-to-top-btn.visible{ opacity:1; pointer-events:auto; }
#back-to-top-btn:hover{ border-color:var(--gold-bright); color:var(--gold-bright); }
#back-to-top-btn svg{ width:15px; height:15px; }
footer a{ color:var(--true-gold); }
footer .footer-admin-link{
  display:inline-block; margin-top:14px; color:var(--ink-dim); opacity:0.7;
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  border-bottom:1px dotted rgba(163,168,207,0.4); padding-bottom:1px;
  transition: color .15s, opacity .15s, border-color .15s;
}
footer .footer-admin-link:hover{ color:var(--true-gold); opacity:1; border-color:var(--true-gold); text-decoration:none; }

.btn{
  display:inline-block; font-family:'Cousine',monospace; font-size:clamp(11.5px, 0.4vw + 10.5px, 13px); letter-spacing:0.05em; text-transform:uppercase;
  background:linear-gradient(90deg, var(--neon-a), var(--neon-b)); color:#0a0a12; font-weight:500;
  border:none; border-radius:999px; padding:clamp(9px,1.4vw,11px) clamp(16px,3vw,21px); cursor:pointer;
  box-shadow:0 2px 14px rgba(91,109,255,0.28);
  transition: transform .15s, box-shadow .15s;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 4px 18px rgba(139,123,255,0.4); text-decoration:none; }
.btn.secondary{ background:transparent; border:1px solid rgba(212,175,55,0.5); color:var(--gold-bright); box-shadow:none; transition:background .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease; }
.btn.secondary:hover{ border-color:var(--gold-bright); box-shadow:0 0 12px rgba(212,175,55,0.18); }

input, textarea, select{
  width:100%; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.09); color:var(--ink);
  font-family:'Cormorant', serif; font-size:clamp(16px, 0.4vw + 15px, 16.5px); padding:9px 12px; border-radius:9px; margin-bottom:11px;
  transition:border-color .15s, box-shadow .15s;
}
select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%239a9280' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; cursor:pointer;
}

/* ---- стилизованное файловое поле (везде вместо голого браузерного виджета) ---- */
.file-drop{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  border:1px dashed var(--line); border-radius:999px; padding:9px 16px;
  font-size:0.85em; color:var(--ink-dim); background:rgba(255,255,255,0.02);
  transition:border-color .18s, color .18s, background .18s;
}
.file-drop:hover{ border-color:var(--gold-bright); color:var(--gold-bright); background:rgba(232,189,90,0.06); }
.file-drop svg{ width:13px; height:13px; }
.file-drop input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; margin:0; padding:0; }
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--neon-b); box-shadow:0 0 0 3px rgba(178,61,255,0.18);
}
label{ font-family:'Cousine',monospace; font-size:12.5px; letter-spacing:0.09em; color:var(--gold-bright); text-transform:uppercase; display:block; margin-bottom:5px; }

.login-field{
  display:flex; align-items:stretch; margin-bottom:14px;
}
.login-field input{
  margin-bottom:0; border-radius:10px 0 0 10px; border-right:none;
}
.login-field .login-suffix{
  display:flex; align-items:center; white-space:nowrap;
  background:rgba(232,189,90,0.08); border:1px solid var(--line); border-left:none;
  border-radius:0 10px 10px 0; padding:0 14px;
  font-family:'Cousine',monospace; font-size:16px; color:var(--true-gold);
}
.auth-tabs{ display:flex; gap:10px; margin-bottom:18px; }
.auth-tab{
  flex:1; text-align:center; cursor:pointer; user-select:none;
  padding:10px 12px; font-family:'Cousine',monospace; font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  border:1.4px solid var(--line); color:var(--ink-dim);
  clip-path:polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  transition:color .15s, border-color .15s, background .15s;
}
.auth-tab.active{
  color:var(--ink); border-color:var(--true-gold); background:rgba(232,189,90,0.16);
  filter:drop-shadow(0 0 10px rgba(232,189,90,0.5));
}

.social-row{
  display:flex; gap:14px; flex-wrap:wrap; margin:20px 0 6px;
}
.social-link{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Cousine',monospace; font-size:14px; letter-spacing:0.04em;
  border:1px solid var(--line); border-radius:999px; padding:11px 20px;
  color:var(--ink); background:rgba(139,123,255,0.06);
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.social-link:hover{ border-color:var(--neon-c); color:var(--gold-bright); text-decoration:none; box-shadow:0 0 18px rgba(255,61,196,0.35); }
.social-link .dot{ width:8px; height:8px; border-radius:50%; background:linear-gradient(90deg,var(--neon-a),var(--neon-c)); flex:0 0 auto; box-shadow:0 0 8px rgba(178,61,255,0.8); }

.materials-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap:18px; margin-top:12px;
}
.material-card{
  border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:16px 18px;
  background:linear-gradient(160deg, rgba(14,20,38,0.2), rgba(8,12,24,0.26));
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  transition:border-color .2s, box-shadow .2s;
}
.material-card:hover{ border-color:rgba(91,141,255,0.4); }
.material-card h3{ font-family:'Cormorant SC',serif; color:var(--gold-bright); font-size:clamp(16px, 0.7vw + 14px, 18.5px); margin:0 0 7px; }
.material-card p{ color:var(--ink-dim); font-size:clamp(14px, 0.4vw + 13px, 15.5px); line-height:1.55; margin:0; }
.material-card .soon{ font-family:'Cousine',monospace; font-size:11px; letter-spacing:0.08em; color:var(--ink-dim); opacity:0.75; text-transform:uppercase; display:block; margin-top:12px;}

/* ---- блок учебной программы: сворачиваемые карточки предметов ---- */
.curriculum-block-title{
  font-family:'Cormorant SC',serif; font-size:clamp(19px, 1vw + 16px, 23px); color:var(--gold-bright);
  margin:32px 0 14px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.08);
}
.subject-block{
  border:1px solid rgba(255,255,255,0.08); border-radius:14px; margin-bottom:10px; overflow:hidden;
  background:linear-gradient(160deg, rgba(14,20,38,0.2), rgba(8,12,24,0.26));
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
}
.subject-block summary{
  list-style:none; cursor:pointer; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:'Cormorant SC',serif; color:var(--ink); font-size:clamp(15px, 0.6vw + 13px, 17px);
  transition:color .15s;
}
.subject-block summary::-webkit-details-marker{ display:none; }
.subject-block summary:hover{ color:var(--gold-bright); }
.subject-block summary .subject-chevron{ width:11px; height:11px; flex:0 0 auto; color:var(--ink-dim); transition:transform .2s; }
.subject-block[open] summary .subject-chevron{ transform:rotate(90deg); }
.subject-block .topic-list{ list-style:none; padding:0 18px 16px; margin:0; }
.subject-block .topic-list li{
  padding:8px 0 8px 18px; border-top:1px solid rgba(255,255,255,0.05); position:relative;
  color:var(--ink-dim); font-size:clamp(13.5px, 0.35vw + 12.5px, 14.5px); line-height:1.5;
}
.subject-block .topic-list li::before{ content:'—'; position:absolute; left:0; color:var(--gold-bright); opacity:0.7; }

/* ---- компактные точечные действия (не основной CTA) — тонкие, приглушённые,
   с лёгким свечением только при взаимодействии, а не постоянно ---- */
.chip-btn{
  display:inline-flex; align-items:center; gap:5px;
  font-family:'Cousine',monospace; font-size:11px; letter-spacing:0.01em;
  background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.09); color:var(--ink-dim);
  border-radius:999px; padding:5px 11px; cursor:pointer;
  transition:border-color .18s, color .18s, background .18s, box-shadow .18s;
}
.chip-btn:hover{ border-color:var(--gold-bright); color:var(--gold-bright); background:rgba(232,189,90,0.05); box-shadow:0 0 10px rgba(232,189,90,0.14); }
.chip-btn:active{ transform:scale(0.97); }
.chip-btn.positive:hover{ border-color:#5fd88a; color:#5fd88a; background:rgba(95,216,138,0.06); box-shadow:0 0 10px rgba(95,216,138,0.16); }
.chip-btn.danger:hover{ border-color:#e0645a; color:#e0645a; background:rgba(224,100,90,0.06); box-shadow:0 0 10px rgba(224,100,90,0.16); }
.chip-btn.filled{ background:linear-gradient(135deg, rgba(232,189,90,0.12), rgba(91,141,255,0.07)); border-color:rgba(212,175,55,0.55); color:var(--gold-bright); }
.chip-btn.filled:hover{ box-shadow:0 0 12px rgba(232,189,90,0.22); }
.chip-btn svg{ width:11px; height:11px; flex:0 0 auto; opacity:0.85; }
.chip-btn:disabled{ opacity:0.35; cursor:default; pointer-events:none; }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:27px; height:27px; flex:0 0 auto; border-radius:50%;
  background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.09); color:var(--ink-dim);
  cursor:pointer; transition:border-color .18s, color .18s, background .18s, box-shadow .18s;
}
.icon-btn:hover{ border-color:var(--gold-bright); color:var(--gold-bright); background:rgba(232,189,90,0.06); box-shadow:0 0 10px rgba(232,189,90,0.18); }
.icon-btn:active{ transform:scale(0.94); }
.icon-btn.danger:hover{ border-color:#e0645a; color:#e0645a; background:rgba(224,100,90,0.06); }
.icon-btn svg{ width:12px; height:12px; }

.chip-row{ display:flex; gap:5px; flex-wrap:wrap; align-items:center; margin-top:8px; }

/* ---- панель вкладок в кабинете руководителя/преподавателя — заменяет
   бесконечную ленту разделов на переключаемые блоки ---- */
#admin-tab-bar{
  display:flex; gap:8px; flex-wrap:wrap; padding:4px 0 14px; margin-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.admin-tab-btn{
  flex:0 0 auto; background:none; border:1px solid rgba(255,255,255,0.09); color:var(--ink-dim);
  font-family:'Cousine',monospace; font-size:12px; letter-spacing:0.02em; white-space:nowrap;
  padding:7px 14px; border-radius:999px; cursor:pointer; transition:color .15s, border-color .15s, background .15s;
}
.admin-tab-btn:hover{ color:var(--gold-bright); border-color:var(--gold-bright); }
.admin-tab-btn.active{ color:var(--gold-bright); border-color:var(--gold); background:rgba(212,175,55,0.08); }
.admin-tab-panel{ animation:admin-tab-fade .2s ease; }
@keyframes admin-tab-fade{ from{ opacity:0; } to{ opacity:1; } }

.field-inline{
  display:flex; gap:6px; align-items:center; flex-wrap:wrap;
}
.field-inline input{ margin-bottom:0; }

/* ---- узкое компактное поле ввода для точечных правок (не занимает всю ширину) ---- */
.field-compact{
  width:auto; flex:0 1 150px; margin-bottom:0 !important;
  font-size:13px !important; padding:7px 11px !important;
}

/* ---- шестигранные значки соцсетей ---- */
.social-hex-row{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:20px 0 6px;
}
.social-hex-row--footer{
  display:inline-flex; align-items:center; gap:10px; vertical-align:middle; margin:0 0 0 8px;
}
.social-hex{
  display:inline-flex; width:54px; height:54px; flex:0 0 auto;
  transition: transform .18s ease, filter .18s ease;
  filter: drop-shadow(0 0 0 rgba(255,61,196,0));
}
.social-hex.social-hex-sm{ width:28px; height:28px; }
.social-hex svg{ width:100%; height:100%; display:block; overflow:visible; }
.social-hex .hex-bg{
  fill: rgba(139,123,255,0.07);
  stroke: var(--line);
  stroke-width:1.6;
  transition: stroke .18s ease, fill .18s ease;
}
.social-hex .hex-glyph{
  fill:none;
  stroke: var(--ink-dim);
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition: stroke .18s ease;
}
.social-hex .hex-dot{
  fill: var(--ink-dim);
  stroke:none;
  transition: fill .18s ease;
}
.social-hex:hover{
  transform: translateY(-3px);
  filter: drop-shadow(0 0 12px rgba(255,61,196,0.45));
}
.social-hex:hover .hex-bg{ stroke: var(--neon-c); fill: rgba(178,61,255,0.12); }
.social-hex:hover .hex-glyph{ stroke: var(--gold-bright); }
.social-hex:hover .hex-dot{ fill: var(--gold-bright); }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; margin:-1px; padding:0; border:0;
}

/* ---- золотая шестигранная рамка вокруг заголовка и вводного текста ----
   Обычный CSS border не может обвести произвольную clip-path-фигуру — он
   рисуется только по исходным прямым краям прямоугольника, поэтому раньше
   золотым были только верх и низ. Решение: два слоя одной и той же формы —
   внешний слой целиком золотой (это и есть рамка), внутренний чуть меньше
   (за счёт inset) и тёмный — золото остаётся видимым только тонкой полоской
   по всему периметру, включая диагональные грани. ---- */
.hex-panel{
  position:relative;
  width:fit-content;
  max-width:380px;
  padding:17px 32px;
  margin:8px auto 26px;
  text-align:center;
  background:linear-gradient(160deg, rgba(91,141,255,0.1), rgba(140,180,255,0.04));
  border:1px solid rgba(200,220,255,0.32);
  clip-path:polygon(13% 0, 87% 0, 100% 50%, 87% 100%, 13% 100%, 0 50%);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  filter:drop-shadow(0 0 14px rgba(139,180,255,0.16));
}
.hex-panel::before{
  display:none;
}
.hex-panel h1{
  position:relative; z-index:1;
  font-size:clamp(21px,3vw,28px);
  color:var(--true-gold);
  margin:0 0 10px;
  text-shadow:0 0 20px rgba(232,189,90,0.5), 0 2px 10px rgba(0,0,0,0.8);
}
.hex-panel .lead{
  position:relative; z-index:1;
  font-size:14.5px;
  color:#dbe6ff;
  margin:0 auto;
  max-width:420px;
  text-shadow:0 1px 8px rgba(0,0,0,0.8);
}
@media (max-width:640px){
  .hex-panel{ padding:22px 26px; max-width:92vw; clip-path:polygon(9% 0, 91% 0, 100% 50%, 91% 100%, 9% 100%, 0 50%); }
  .hex-panel::before{ clip-path:polygon(9% 0, 91% 0, 100% 50%, 91% 100%, 9% 100%, 0 50%); }
}

/* ---- переключатель видимости пароля (глазок) ---- */
.pwd-field{ position:relative; margin-bottom:14px; }
.pwd-field input{ margin-bottom:0; padding-right:44px; }
.pwd-toggle-btn{
  position:absolute; right:2px; top:0; height:100%; width:38px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:var(--ink-dim);
  padding:0; transition:color .15s;
}
.pwd-toggle-btn:hover{ color:var(--gold-bright); }
.pwd-toggle-btn:focus{ outline:none; color:var(--gold-bright); }
.pwd-toggle-btn .icon-eye-off{ display:none; }
.pwd-toggle-btn.is-visible .icon-eye{ display:none; }
.pwd-toggle-btn.is-visible .icon-eye-off{ display:block; }

/* ---- подсказки под полями (занятость логина, сложность пароля) ---- */
.field-hint{ margin:-8px 0 14px; font-size:12.5px; color:var(--ink-dim); }
.field-hint--good{ color:#5fd18a; }
.field-hint--bad{ color:#e05d4a; }

.pwd-strength{ margin:-6px 0 14px; }
.pwd-strength-bar{ display:flex; gap:5px; margin-bottom:4px; }
.pwd-strength-bar span{
  flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,0.08);
  transition:background .2s;
}
.pwd-strength-bar span.seg-weak{ background:#e05d4a; }
.pwd-strength-bar span.seg-medium{ background:#e8bd5a; }
.pwd-strength-bar span.seg-strong{ background:#5fd18a; }
.pwd-strength .field-hint{ margin:0 0 6px; }
.pwd-requirements{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px;
  font-size:12px; color:var(--ink-dim);
}
.pwd-requirements li{ position:relative; padding-left:16px; }
.pwd-requirements li::before{
  content:'✕'; position:absolute; left:0; color:#e05d4a; font-size:10px; top:1px;
}
.pwd-requirements li.req-met{ color:#5fd18a; }
.pwd-requirements li.req-met::before{ content:'✓'; color:#5fd18a; }

/* ---- капча ---- */
.captcha-field{
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.captcha-img{
  height:56px; border-radius:8px; border:1px solid var(--line);
  background:#0d0c1a;
}
.captcha-refresh{
  width:38px; height:38px; border-radius:8px; border:1px solid var(--line);
  background:rgba(255,255,255,0.03); color:var(--ink-dim); cursor:pointer;
  font-size:18px; line-height:1; transition:color .15s, border-color .15s, transform .2s;
}
.captcha-refresh:hover{ color:var(--gold-bright); border-color:var(--gold-bright); transform:rotate(90deg); }

/* ---- бейдж непрочитанных сообщений в навигации ---- */
#nav-unread-badge{
  background:var(--neon-d); color:#fff; border-radius:10px; font-size:11px;
  padding:1px 6px; margin-left:4px; font-family:'Cousine',monospace;
}

/* ---- всплывающий виджет сообщений (снизу справа, на всех страницах) ---- */
@media (max-width:480px){
    }

/* ---- на узких экранах прижимаем гамбургер и оборачиваем пункты меню ---- */
@media (max-width:760px){
  /* ШАПКА НА ТЕЛЕФОНЕ.
     Раньше здесь стоял только flex-wrap:wrap — и четыре элемента
     (герб, ссылки, поиск, кнопка меню) расползались на три яруса
     высотой 109 пикселей, съедая треть экрана.

     Теперь всё в одну строку: слева герб, справа язык, поиск и меню.
     Ссылки убраны — они и так продублированы в выезжающем меню,
     и держать их дважды на узком экране незачем. */
  .nav{
    flex-wrap: nowrap;
    position: relative;
    gap: 8px;
    max-width: 100%;
    margin: 10px;
  }
  .nav > .links{ display: none; }

  /* Герб с названием занимает всё оставшееся место и ужимается,
     если названию не хватает ширины. */
  .nav .brand{ flex: 1 1 auto; min-width: 0; }
  .nav .brand-text{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Кнопки не сжимаются: иначе значок поиска превращается в полоску. */
  .nav .site-search-wrap,
  .nav #nav-hamburger-btn,
  .nav #lang-toggle-btn{ flex: 0 0 auto; }
}

/* ---- колокольчик уведомлений ---- */
#notif-bell-btn{
  background:none; border:none; color:var(--ink-dim); cursor:pointer; font-size:15px;
  position:relative; vertical-align:middle; margin-right:6px; padding:0 2px;
}
#notif-bell-btn:hover{ color:var(--gold-bright); }
#notif-badge{
  position:absolute; top:-6px; right:-8px; background:var(--neon-d); color:#fff; border-radius:9px;
  font-size:10px; padding:0 5px; height:16px; align-items:center; justify-content:center;
  font-family:'Cousine',monospace; box-shadow:0 0 8px rgba(255,77,95,0.6);
}
.notif-dropdown{
  position:fixed; z-index:500; width:300px; max-height:360px; overflow-y:auto;
  background:var(--bg-1); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,0.6), 0 0 30px rgba(139,123,255,0.2);
}
.notif-row{
  display:block; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.05);
  font-size:13px; color:var(--ink-dim); text-decoration:none;
}
.notif-row:hover{ background:rgba(139,123,255,0.08); }
.notif-row.unread{ color:var(--ink); background:rgba(232,189,90,0.06); }
.notif-row .notif-time{ display:block; font-size:10.5px; color:var(--ink-dim); margin-top:3px; font-family:'Cousine',monospace; }
.notif-empty{ padding:16px; color:var(--ink-dim); font-size:13px; text-align:center; }
@media (max-width:760px){
  .notif-dropdown{ width:calc(100vw - 24px) !important; left:12px !important; }
}

/* ---- плавное появление карточек и панелей при прокрутке ---- */
.fade-in-target{ opacity:0; transform:translateY(18px); transition:opacity .65s ease, transform .65s ease; }
.fade-in-target.visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .fade-in-target{ opacity:1; transform:none; transition:none; }
}

/* ---- переключатель языка сайта (RU/EN) ---- */
.lang-toggle-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 12px; border:1.4px solid var(--line); background:rgba(255,255,255,0.03);
  color:var(--ink-dim); font-family:'Cousine',monospace; font-size:12px; letter-spacing:0.06em;
  clip-path:polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
  cursor:pointer; transition:color .15s, border-color .15s;
}
.lang-toggle-btn:hover{ color:var(--gold-bright); border-color:rgba(232,189,90,0.5); }

/* ---- панель режима редактирования (без сервера, правки в localStorage) ---- */
#edit-mode-bar{
  position:fixed; bottom:18px; right:18px; z-index:600;
  display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; max-width:calc(100vw - 24px);
}
#edit-mode-bar button{
  font-family:'Cousine',monospace; font-size:12.5px; letter-spacing:0.03em;
  padding:10px 16px; border-radius:999px; border:1.4px solid var(--line);
  background:rgba(10,16,32,0.82); backdrop-filter:blur(8px);
  color:var(--ink); cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,0.5);
  transition:border-color .15s, color .15s, transform .15s;
}
#edit-mode-bar button:hover{ border-color:var(--gold-bright); color:var(--gold-bright); transform:translateY(-1px); }
#edit-mode-toggle{ border-color:rgba(91,141,255,0.5); }
body.edit-mode-on #edit-mode-toggle{ border-color:var(--true-gold); color:var(--true-gold); }
.editable-active{
  outline:1.5px dashed rgba(232,189,90,0.55); outline-offset:4px; border-radius:4px;
  cursor:text; transition:background .15s;
}
.editable-active:hover{ background:rgba(232,189,90,0.06); }
.editable-active:focus{ outline:1.5px solid var(--true-gold); background:rgba(232,189,90,0.08); }
@media (max-width:600px){
  #edit-mode-bar{ bottom:12px; right:12px; }
  #edit-mode-bar button{ padding:8px 12px; font-size:11.5px; }
}

/* ---- поиск по сайту: лупа разворачивается в строку ввода на той же строке ---- */

#site-search-wrap{
  position:relative; display:flex; align-items:center; margin-left:8px; flex:0 0 auto;
}
#site-search-btn{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:34px; height:34px; border-radius:8px; border:1px solid var(--line);
  background:rgba(255,255,255,0.03); color:var(--ink-dim); cursor:pointer;
  transition:border-color .15s, color .15s;
}
#site-search-btn:hover{ border-color:var(--gold-bright); color:var(--gold-bright); }
#site-search-wrap.open #site-search-btn{ border-color:var(--gold-bright); color:var(--gold-bright); }
#site-search-input{
  width:0; opacity:0; padding:0; margin:0; border:1px solid transparent; border-radius:8px;
  background:rgba(255,255,255,0.03); color:var(--ink);
  font-family:'Cormorant', serif; font-size:14px; height:34px; box-sizing:border-box;
  transition:width .22s ease, opacity .18s ease, padding .22s ease, margin-left .22s ease, border-color .18s ease;
  overflow:hidden;
}
#site-search-wrap.open #site-search-input{
  width:170px; opacity:1; padding:0 10px; margin-left:8px; border-color:var(--line);
}
#site-search-input:focus{ outline:none; box-shadow:none; border-color:var(--gold-bright); }
#site-search-results{
  display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:500;
  width:260px; max-width:calc(100vw - 24px);
  background:var(--bg-1); border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,0.6), 0 0 30px rgba(139,123,255,0.2);
}
#site-search-results.has-results{ display:block; max-height:340px; overflow-y:auto; }
.ssr-item{
  display:flex; flex-direction:column; gap:3px; padding:11px 14px;
  border-bottom:1px solid rgba(255,255,255,0.05); text-decoration:none;
}
.ssr-item:hover{ background:rgba(139,123,255,0.08); text-decoration:none; }
.ssr-item:last-child{ border-bottom:none; }
.ssr-title{ font-family:'Cormorant SC',serif; font-weight:700; font-size:14px; color:var(--gold-bright); }
.ssr-snippet{ font-size:12px; color:var(--ink-dim); line-height:1.4; }
.ssr-snippet mark, .ssr-title mark{ background:rgba(232,189,90,0.35); color:var(--ink); border-radius:2px; padding:0 1px; }
.ssr-empty{ padding:16px; text-align:center; font-size:13px; color:var(--ink-dim); }
@media (max-width:600px){
  #site-search-wrap.open #site-search-input{ width:120px; }
  #site-search-results{ right:-40px; }
}

/* ---------- Структура курса: модули и уроки (course-structure.js) ---------- */
.cs-status{ font-size:13px; color:var(--ink-dim); min-height:18px; margin:8px 0 4px; }
.cs-summary{ font-size:12px; color:var(--ink-dim); text-transform:uppercase;
  letter-spacing:0.06em; margin:14px 0 10px; }
.cs-empty{ font-size:13px; color:var(--ink-dim); font-style:italic; margin:8px 0; }
.cs-module{ border:1px solid var(--line); border-radius:10px; padding:14px 16px;
  margin-bottom:14px; background:rgba(14,22,38,0.4); }
.cs-module-head{ display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap; }
.cs-module-head h4{ margin:0; font-family:'Cormorant SC',serif; font-size:19px; color:var(--ink); }
.cs-module-desc{ font-size:13px; color:var(--ink-dim); margin:6px 0 12px; }
.cs-lesson{ border-left:2px solid var(--line); padding:8px 0 8px 14px; margin:10px 0 10px 6px; }
.cs-lesson-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cs-lesson-title{ flex:1 1 auto; font-size:15px; color:var(--ink); }
.cs-num{ font-family:'Cousine',monospace; font-size:12px; color:var(--gold-bright);
  border:1px solid var(--line); border-radius:4px; padding:1px 6px; }
.cs-lesson-summary{ font-size:13px; color:var(--ink-dim); margin:6px 0 0; }
.cs-lesson-meta{ font-size:12px; color:var(--ink-dim); margin:4px 0 0; opacity:0.85; }
.cs-move{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.cs-mini{ background:transparent; border:1px solid var(--line); color:var(--ink-dim);
  border-radius:6px; padding:2px 9px; font-size:13px; cursor:pointer; line-height:1.5;
  font-family:inherit; transition:color 0.15s, border-color 0.15s; }
.cs-mini:hover:not(:disabled){ color:var(--gold-bright); border-color:var(--gold); }
.cs-mini:disabled{ opacity:0.3; cursor:default; }
.cs-mini.cs-danger:hover:not(:disabled){ color:var(--neon-d); border-color:var(--neon-d); }
.cs-add{ margin-top:12px; }
.cs-add summary{ cursor:pointer; font-size:13px; color:var(--gold-bright);
  padding:6px 0; list-style:none; }
.cs-add summary::-webkit-details-marker{ display:none; }
.cs-add summary:hover{ color:var(--ink); }
.cs-add label{ margin-top:8px; }
.cs-add-module{ border-top:1px solid var(--line); padding-top:10px; }

/* ---------- Программа курса в кабинете ученика ---------- */
.syl-bar{ height:6px; border-radius:3px; background:rgba(120,160,255,0.18);
  overflow:hidden; margin:8px 0 14px; }
.syl-bar span{ display:block; height:100%; background:var(--gold);
  transition:width 0.3s ease; }
.syl-module{ margin-bottom:16px; }
.syl-module h4{ margin:0 0 4px; font-family:'Cormorant SC',serif; font-size:18px; }
.syl-module-desc{ font-size:13px; color:var(--ink-dim); margin:0 0 8px; }
.syl-lesson{ display:flex; align-items:flex-start; gap:10px; padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,0.06); }
.syl-lesson input[type="checkbox"]{ margin:3px 0 0; width:auto; flex:0 0 auto; }
.syl-lesson-body{ flex:1 1 auto; }
.syl-lesson-title{ font-size:15px; }
.syl-lesson.done .syl-lesson-title{ color:var(--ink-dim); text-decoration:line-through; }
.syl-lesson-meta{ font-size:12px; color:var(--ink-dim); margin-top:3px; }

/* =====================================================================
   Панель управления содержимым (видна только руководителю)
   ===================================================================== */
#cms-bar{
  position:fixed; bottom:16px; right:16px; z-index:9999;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  max-width:min(94vw, 640px);
  padding:8px 12px; border-radius:14px;
  background:rgba(8,12,24,0.92); border:1px solid var(--line);
  box-shadow:0 8px 28px rgba(0,0,0,0.55);
  font-family:'Cousine', monospace; font-size:12px;
}
#cms-bar button{
  padding:7px 12px; border-radius:9px; cursor:pointer;
  font-family:'Cousine', monospace; font-size:12px;
  border:1px solid var(--line); background:rgba(255,255,255,0.04); color:var(--ink);
  transition:border-color .15s, color .15s, background .15s;
}
#cms-bar button:hover{ border-color:var(--true-gold); color:var(--true-gold); }
#cms-bar #cms-toggle{ border-color:var(--true-gold); color:var(--true-gold); }
#cms-bar #cms-save{ border-color:#5fd88a; color:#5fd88a; }
#cms-bar #cms-reset{ border-color:#e0645a; color:#e0645a; }
#cms-tools{ display:inline-flex; gap:8px; flex-wrap:wrap; }
#cms-status{ color:var(--ink-dim); max-width:260px; }
#cms-status.cms-ok{ color:#5fd88a; }
#cms-status.cms-err{ color:#e0645a; }

/* Подсветка правимых мест — чтобы было видно, куда можно ткнуть. */
.cms-editable{
  outline:1px dashed rgba(232,189,90,0.45); outline-offset:3px; border-radius:4px;
}
.cms-editable:focus{ outline:1.5px solid var(--true-gold); background:rgba(232,189,90,0.06); }

/* Служебная полоса над каждой карточкой в режиме управления. */
.cms-card-tools{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:-4px 0 12px; padding-bottom:8px;
  border-bottom:1px dashed rgba(232,189,90,0.25);
  font-family:'Cousine', monospace; font-size:11px; color:var(--ink-dim);
}
.cms-card-tools button{
  padding:3px 9px; border-radius:7px; cursor:pointer;
  font-family:'Cousine', monospace; font-size:11px;
  border:1px solid var(--line); background:rgba(255,255,255,0.03); color:var(--ink-dim);
}
.cms-card-tools button:hover{ border-color:var(--true-gold); color:var(--true-gold); }
.cms-grip{ cursor:grab; color:var(--true-gold); font-size:15px; line-height:1; user-select:none; }
.cms-own{ color:var(--true-gold); }

/* Скрытая карточка в режиме управления остаётся видимой, но приглушённой:
   иначе её нельзя было бы вернуть обратно. */
body.cms-editing .cms-hidden-mark{ opacity:0.38; }
body.cms-editing .cms-hidden-mark::after{
  content:'скрыто для посетителей'; display:block; margin-top:8px;
  font-family:'Cousine', monospace; font-size:11px; color:#e0645a;
}
.cms-dragging{ opacity:0.5; outline:2px dashed var(--true-gold); }
body.cms-editing .card{ transition:none; }
@media (max-width:480px){
  #cms-bar{ left:12px; right:12px; bottom:12px; justify-content:center; }
  #cms-status{ max-width:100%; }
}

/* =====================================================================
   Анимированная заставка
   ===================================================================== */
/* Пока идёт заставка, страница под ней не прокручивается — иначе
   на телефоне ролик «уезжает» от случайного касания. */
html.intro-open, html.intro-open body{ overflow:hidden; }

#intro-overlay{
  position:fixed; inset:0; z-index:100000;
  background:#060a16;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  animation:intro-in .35s ease both;
}
#intro-overlay.intro-closing{ animation:intro-out .4s ease both; }

/* cover, а не contain: заставка должна занимать весь экран без полей,
   независимо от того, вертикальный он или широкий. */
#intro-video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  background:#060a16;
}

#intro-skip{
  position:absolute; right:clamp(14px, 3vw, 34px); bottom:clamp(14px, 3vw, 34px);
  padding:9px 20px; border-radius:999px; cursor:pointer;
  font-family:'Cousine', monospace; font-size:12.5px; letter-spacing:0.06em;
  color:var(--true-gold); background:rgba(6,10,22,0.55);
  border:1px solid rgba(232,189,90,0.45);
  backdrop-filter:blur(4px);
  transition:background .18s, color .18s, border-color .18s;
}
#intro-skip:hover{ background:rgba(232,189,90,0.16); color:#fff3c4; border-color:var(--true-gold); }

@keyframes intro-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes intro-out{ from{ opacity:1; } to{ opacity:0; } }

/* Если человек попросил систему не показывать анимации, заставка не
   запускается вовсе — на всякий случай гасим и стилями. */
@media (prefers-reduced-motion: reduce){
  #intro-overlay{ display:none; }
}

/* ─── Тексты на языке оригинала ───────────────────────────────
   Cormorant не содержит греческого и иврита. Без этих правил
   браузер подставляет системный шрифт, и цитата из Иринея
   выглядит инородно рядом с русским текстом.

   Работает двумя способами: по атрибуту lang у элемента
   (правильный путь — он же помогает экранным читалкам
   и поиску) и по классу, когда разметку менять неудобно. */

[lang="grc"], [lang="el"], .text-greek,
[lang="he"], [lang="hbo"], .text-hebrew {
  font-family: 'Noto Serif', 'Cormorant', serif;
  /* Политонический греческий и огласовки иврита выше и ниже строки —
     тесная строка их обрезает. */
  line-height: 1.85;
}

[lang="he"], [lang="hbo"], .text-hebrew {
  font-family: 'Noto Serif Hebrew', 'Noto Serif', serif;
  /* Иврит читается справа налево. Без этого знаки препинания
     и цифры встают не с той стороны. */
  direction: rtl;
  unicode-bidi: isolate;
  text-align: right;
}

/* Отдельное слово или короткая вставка внутри русской фразы:
   направление письма не должно переворачивать всю строку. */
.inline-hebrew {
  font-family: 'Noto Serif Hebrew', 'Noto Serif', serif;
  direction: rtl;
  unicode-bidi: isolate;
}
.inline-greek {
  font-family: 'Noto Serif', 'Cormorant', serif;
}

/* Латынь особого шрифта не требует: Cormorant покрывает
   расширенную латиницу, включая макроны и диграфы. */

/* ─── Сетка карточек ──────────────────────────────────────────
   Карточки остаются ПРЯМЫМИ потомками .wrap — это обязательное
   условие: редактор страниц перемещает их через insertBefore
   внутри .wrap, и любая промежуточная обёртка сломала бы
   перетаскивание.

   Поэтому колонки задаются не вложенным контейнером, а самим
   контейнером: всё по умолчанию во всю ширину, а карточка
   с классом .col-half занимает одну колонку. */

.wrap.grid-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Зазор равен полям карточки — иначе колонки выглядят слипшимися. */
  column-gap: 18px;
  align-items: start;
}
/* По умолчанию всё во всю ширину: заголовки, формы, новости.
   Колонку занимает только то, что явно помечено. */
.wrap.grid-2 > *{ grid-column: 1 / -1; }
.wrap.grid-2 > .card.col-half{ grid-column: span 1; }

/* На узком экране колонки не нужны: текст в половину ширины
   телефона нечитаем. */
@media (max-width: 900px){
  .wrap.grid-2{ display: block; }
}

/* В режиме правки колонки отключаются: перетаскивать карточку
   между колонками неудобно, а порядок в сетке визуально
   не совпадает с порядком в разметке. */
.cms-editing .wrap.grid-2{ display: block; }

/* ─── Карточка целиком как ссылка ─────────────────────────────
   Приём «растянутая ссылка»: настоящая ссылка внутри карточки
   раскрывается невидимым слоем на всю её площадь. Так сохраняется
   правильная разметка — поисковик и экранная читалка видят обычную
   ссылку с текстом, а не div с обработчиком клика.

   Клавиатура работает сама собой: Tab попадает на ссылку. */

.card.is-clickable{ cursor: pointer; }
.card.is-clickable .stretched-link::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  z-index: 1;
}
/* Вложенные ссылки и кнопки должны остаться нажимаемыми —
   поднимаем их над растянутым слоем. */
.card.is-clickable a:not(.stretched-link),
.card.is-clickable button,
.card.is-clickable input,
.card.is-clickable select,
.card.is-clickable textarea,
.card.is-clickable details{
  position: relative;
  z-index: 2;
}

/* Абзацы поднимаем над растянутым слоем — иначе текст нельзя выделить
   и скопировать: слой перехватывает нажатие мыши.

   ЗАГОЛОВОК СЮДА НЕ ВХОДИТ, И ЭТО ВАЖНО. Растянутый слой строится
   от ближайшего предка с position, и если сделать позиционируемым
   заголовок, слой растянется по заголовку, а не по карточке —
   клик по пустому месту перестанет работать. Заголовок и так
   является ссылкой, поднимать его незачем. */
.card.is-clickable p,
.card.is-clickable li,
.card.is-clickable figcaption{
  position: relative;
  z-index: 2;
}
/* Заголовок-ссылка не должен подчёркиваться дважды. */
.card.is-clickable .stretched-link{
  text-decoration: none;
  color: inherit;
}
/* Видимая рамка при переходе с клавиатуры: без неё непонятно,
   на какой карточке находишься. */
.card.is-clickable:focus-within{
  border-color: rgba(232,189,90,0.55);
  box-shadow: 0 0 0 2px rgba(232,189,90,0.25),
              0 18px 44px rgba(0,0,0,0.42);
}

/* ─── Появление карточек при прокрутке ────────────────────────
   Карточки проявляются снизу с небольшой задержкой друг за другом.
   Смысл не в украшении: последовательное появление задаёт порядок
   чтения — глаз идёт сверху вниз, а не мечется по готовой странице.

   Начальное состояние ставится скриптом, а не здесь: если скрипт
   не отработает, карточки должны остаться видимыми. Невидимый
   по умолчанию контент — худшая из возможных поломок. */

.card.will-appear{
  opacity: 0;
  transform: translateY(18px);
}
.card.has-appeared{
  opacity: 1;
  transform: none;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,.61,.36,1);
}

/* ─── Стрелка в кнопке ────────────────────────────────────────
   При наведении на саму кнопку стрелка отъезжает вправо.
   Это отдельный жест от подсветки карточки: он говорит
   «нажми именно сюда». */
.btn .arrow,
.chip-btn .arrow{
  display: inline-block;
  margin-left: .5em;
  transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
.btn:hover .arrow,
.chip-btn:hover .arrow{ transform: translateX(4px); }

/* ─── Заглушка на время загрузки ──────────────────────────────
   Полоски вместо текста, пока данные идут с сервера. Показывать
   форму будущего содержимого честнее, чем слово «Загрузка…»:
   человек видит, сколько всего появится. */
.skeleton{
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.09) 37%,
    rgba(255,255,255,0.04) 63%);
  background-size: 400% 100%;
  animation: skeleton-sweep 1.4s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes skeleton-sweep{
  from{ background-position: 100% 50%; }
  to  { background-position: 0 50%; }
}
.skeleton-line{ height: 13px; margin: 9px 0; }
.skeleton-title{ height: 22px; width: 58%; margin: 4px 0 14px; }

@media (prefers-reduced-motion: reduce){
  .card.will-appear{ opacity:1; transform:none; }
  .card.has-appeared{ transition:none; }
  .btn:hover .arrow, .chip-btn:hover .arrow{ transform:none; }
  .skeleton{ animation:none; }
}

/* ─── Уголки-маркеры на карточке ──────────────────────────────
   В углах проступают тонкие перекрестия толщиной в пиксель —
   как на чертеже или в архивной карточке каталога. Появляются
   только при наведении, в покое карточка остаётся спокойной.

   Выбрано вместо «сканирования рамки»: там линия обегает контур
   и притягивает взгляд к движению. Уголки, наоборот, очерчивают
   границы объекта и уходят из внимания, как только он опознан. */

@media (hover: hover) and (pointer: fine){
  .card::after{
    content:"";
    position:absolute;
    inset: 7px;
    pointer-events: none;
    border-radius: 9px;
    /* Четыре уголка рисуются градиентами: границы нет, есть только
       короткие отрезки по краям. Так дешевле, чем четыре элемента. */
    background:
      linear-gradient(var(--true-gold), var(--true-gold)) top left,
      linear-gradient(var(--true-gold), var(--true-gold)) top left,
      linear-gradient(var(--true-gold), var(--true-gold)) top right,
      linear-gradient(var(--true-gold), var(--true-gold)) top right,
      linear-gradient(var(--true-gold), var(--true-gold)) bottom left,
      linear-gradient(var(--true-gold), var(--true-gold)) bottom left,
      linear-gradient(var(--true-gold), var(--true-gold)) bottom right,
      linear-gradient(var(--true-gold), var(--true-gold)) bottom right;
    background-repeat: no-repeat;
    background-size:
      1px 12px, 12px 1px,
      1px 12px, 12px 1px,
      1px 12px, 12px 1px,
      1px 12px, 12px 1px;
    opacity: 0;
    transition: opacity .3s ease, inset .3s cubic-bezier(.22,.61,.36,1);
  }
  .card:hover::after{
    opacity: .55;
    /* Уголки чуть расходятся наружу — карточка будто раскрывается. */
    inset: 4px;
  }
}

/* ─── Инверсия метки категории ────────────────────────────────
   Метка в покое — контур с прозрачным фоном. При наведении на
   карточку заливается своим же цветом, текст становится тёмным.
   Инверсия без смены палитры: цвет остаётся тем, что был. */
.cat-badge{
  display: inline-block;
  font-family: 'Cousine', monospace;
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  transition: background-color .28s ease, color .28s ease;
}
@media (hover: hover) and (pointer: fine){
  .card:hover .cat-badge{
    /* Не полная инверсия, а подложка в четырнадцать процентов
       собственного цвета. Сплошная заливка превращала метку
       в кричащую плашку, которая перетягивала внимание
       с заголовка — на академическом сайте это лишнее.
       Здесь метка «загорается», оставаясь на своём месте. */
    background-color: color-mix(in srgb, currentColor 14%, transparent);
    border-color: currentColor;
  }
}

/* ─── Подчёркивание ссылки, прорисованное от левого края ──────
   Линия не появляется целиком, а прочерчивается — как чернильная.
   Применяется к ссылкам в тексте, не к кнопкам. */
.ink-link{
  position: relative;
  text-decoration: none;
  color: var(--true-gold);
}
.ink-link::after{
  content:"";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.ink-link:hover::after,
.ink-link:focus-visible::after{ transform: scaleX(1); }

/* ─── Технические метаданные ──────────────────────────────────
   Размер файла, формат, объём — моноширинным с разрядкой.
   Отсылка к архивной описи, а не к рекламной подписи. */
.meta-tag{
  font-family: 'Cousine', monospace;
  font-size: 10.5px;
  letter-spacing: .09em;
  color: var(--ink-dim);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ─── Точка «сейчас идёт» ─────────────────────────────────────
   Мягкий пульс у того, что происходит в реальном времени:
   идущая лекция, открытый приём. Частота низкая намеренно —
   быстрый мигающий индикатор тревожит, а не сообщает. */
.live-dot{
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #5fd88a;
  position: relative;
  vertical-align: middle;
}
.live-dot::before{
  content:"";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: live-ping 2.6s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes live-ping{
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .card::after, .card:hover::after{ transition:none; }
  .ink-link::after{ transition:none; }
  .live-dot::before{ animation:none; }
}