/* ═══════════════════════════════════════════════════════════════════
   NOVELLA UI — общий слой для всех страниц novella-networking.ru
   Создан 02.09.2026.

   Зачем. До этого каждая страница (лендинг, cabinet.html, university.html,
   su.html) несла свою копию :root с одними и теми же токенами. Поправить
   цвет в одном месте было нельзя — приходилось искать по четырём файлам,
   и они успели разъехаться: где-то бирюза #4ecdc4, где-то #2abfb0.
   Теперь токены и примитивы живут здесь, страницы только подключают файл
   и добавляют свою специфику.

   Подключение — первым в <head>, до собственного <style> страницы:
     <link rel="stylesheet" href="/novella-ui.css">

   Про контраст. У каждого акцента две версии: насыщенная (--gold) для
   заливок, рамок и плашек и «чернильная» (--gold-ink) для текста.
   Причина простая: золото #D4AF37 на белом даёт контраст 2:1 и как текст
   нечитаемо; #8A6D1F даёт 5.4:1. Правило — текст всегда берёт -ink.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Поверхности: тёплая бумага, не стерильный белый */
  --bg:#FBFAF7;
  --bg2:#F4F2EC;
  --surface:#FFFFFF;

  /* Текст */
  --ink:#0E1626;
  --ink-2:#4B5567;
  --ink-3:#8A93A6;
  --line:rgba(14,22,38,.10);
  --line-hi:rgba(14,22,38,.20);

  /* Акценты: заливка + чернильная версия для текста + фоновая подсветка */
  --gold:#D4AF37;   --gold-ink:#8A6D1F;   --gold-lo:rgba(212,175,55,.14);
  --teal:#12A594;   --teal-ink:#0B7A6E;   --teal-lo:rgba(18,165,148,.12);
  --coral:#FF6B4A;  --coral-ink:#C4401F;  --coral-lo:rgba(255,107,74,.12);
  --violet:#6C5CE7; --violet-ink:#4F44BE; --violet-lo:rgba(108,92,231,.12);

  /* Служебные состояния */
  --danger:#E0453B; --danger-ink:#B32A21; --danger-lo:rgba(224,69,59,.10);
  --ok:var(--teal);  --ok-ink:var(--teal-ink);  --ok-lo:var(--teal-lo);

  /* Прозрачные ступени золота — остались от прежней системы, ими
     пользуются рамки и разделители на нескольких страницах */
  --gold-md:rgba(212,175,55,.45);
  --gold-hi:rgba(212,175,55,.85);

  /* Акцент по умолчанию. Блок или секция переопределяет их у себя,
     и вся механика (рамки, точки, подсветка) красится сама. */
  --accent:var(--gold); --accent-ink:var(--gold-ink); --accent-lo:var(--gold-lo);

  --font-display:'HSESans',sans-serif;
  --font-body:var(--font-display);
  --font-mono:ui-monospace,'SF Mono','JetBrains Mono','Cascadia Mono',Consolas,monospace;

  /* Шкала радиусов — четыре ступени, больше не нужно */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px;

  /* Шкала отступов */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:40px; --sp-5:64px; --sp-6:96px;

  /* Тени: одна мягкая, одна подъёмная */
  --sh-1:0 1px 2px rgba(14,22,38,.05);
  --sh-2:0 18px 40px -24px rgba(14,22,38,.42);

  --ease:cubic-bezier(.22,.61,.36,1);
  --bounce:cubic-bezier(.34,1.56,.64,1);
}

/* ── БАЗА ────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font-family:var(--font-body);}
a{color:inherit;text-decoration:none;}

/* Фокус виден всегда и одинаково. Раньше на кабинетах он терялся:
   :focus гасили ради вида, и с клавиатуры было не понять, где ты. */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* ── ТИПОГРАФИКА ─────────────────────────────────────────────────── */
.nv-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-ink);font-weight:600;
}
.nv-eyebrow::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px var(--accent-lo);
}
.nv-h1{font-size:clamp(26px,3vw,38px);font-weight:900;letter-spacing:-.03em;line-height:1.1;}
.nv-h2{font-size:clamp(20px,2.2vw,26px);font-weight:800;letter-spacing:-.02em;line-height:1.2;}
.nv-meta{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}

/* ── КНОПКИ ──────────────────────────────────────────────────────── */
.nv-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border:none;border-radius:var(--r-md);
  background:var(--gold);color:var(--ink);
  font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;
  transition:background .2s var(--ease),transform .2s var(--bounce),box-shadow .2s var(--ease);
}
.nv-btn:hover{background:#E3C24C;transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(212,175,55,.85);}
.nv-btn:active{transform:translateY(0);}
.nv-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}

.nv-btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border:1px solid var(--line-hi);border-radius:var(--r-md);
  background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease),transform .2s var(--bounce);
}
.nv-btn-outline:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-lo);transform:translateY(-2px);}

.nv-btn-ghost{
  padding:8px 14px;border:1px solid transparent;border-radius:var(--r-md);
  background:transparent;color:var(--ink-2);
  font-family:inherit;font-size:14px;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.nv-btn-ghost:hover{background:var(--bg2);color:var(--ink);}

.nv-btn-danger{
  background:var(--danger);color:#fff;
}
.nv-btn-danger:hover{background:#C93A31;box-shadow:0 12px 26px -10px rgba(224,69,59,.7);}

/* ── ПОЛЯ ────────────────────────────────────────────────────────── */
.nv-input,.nv-select,.nv-textarea{
  width:100%;padding:10px 14px;
  background:var(--surface);border:1px solid var(--line-hi);
  border-radius:var(--r-md);color:var(--ink);
  font-family:inherit;font-size:15px;outline:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.nv-textarea{resize:vertical;min-height:96px;line-height:1.6;}
.nv-input::placeholder,.nv-textarea::placeholder{color:var(--ink-3);}
.nv-input:focus,.nv-select:focus,.nv-textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-lo);
}
.nv-input.invalid,.nv-textarea.invalid{
  border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-lo);
}
.nv-err{font-size:12px;color:var(--danger-ink);margin-top:4px;display:none;}
.nv-err.show{display:block;}
.nv-field{display:flex;flex-direction:column;gap:6px;}
.nv-field > label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}

/* ── КАРТОЧКА ────────────────────────────────────────────────────── */
.nv-card{
  position:relative;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-3);box-shadow:var(--sh-1);overflow:hidden;
  transition:border-color .3s var(--ease),transform .35s var(--bounce),box-shadow .3s var(--ease);
}
/* Цветной «корешок» сверху, растёт при наведении */
.nv-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:var(--accent);transform-origin:top;
  transition:transform .3s var(--ease);
}
.nv-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--sh-2);}
.nv-card:hover::after{transform:scaleY(2);}
.nv-card > *{position:relative;z-index:1;}
/* Статичный вариант: карточка-контейнер, которая не должна прыгать */
.nv-card.is-static:hover{transform:none;box-shadow:var(--sh-1);border-color:var(--line);}
.nv-card.is-static:hover::after{transform:scaleY(1);}

/* ── ПЛАШКИ СТАТУСА ──────────────────────────────────────────────── */
.nv-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 12px;border-radius:999px;
  border:1px solid var(--accent);background:var(--accent-lo);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;color:var(--accent-ink);
  white-space:nowrap;
}
.nv-badge::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);
}
.nv-badge.is-live::before{animation:nvPulse 2.4s var(--ease) infinite;}
/* Смысловые варианты — задают только акцент, остальное наследуется */
.nv-badge.is-ok{--accent:var(--teal);--accent-ink:var(--teal-ink);--accent-lo:var(--teal-lo);}
.nv-badge.is-wait{--accent:var(--gold);--accent-ink:var(--gold-ink);--accent-lo:var(--gold-lo);}
.nv-badge.is-work{--accent:var(--violet);--accent-ink:var(--violet-ink);--accent-lo:var(--violet-lo);}
.nv-badge.is-stop{--accent:var(--danger);--accent-ink:var(--danger-ink);--accent-lo:var(--danger-lo);}

@keyframes nvPulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ── МОДАЛЬНОЕ ОКНО ──────────────────────────────────────────────── */
.nv-overlay{
  position:fixed;inset:0;z-index:550;
  background:rgba(14,22,38,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.nv-overlay.open{opacity:1;pointer-events:auto;}
.nv-modal{
  position:fixed;top:50%;left:50%;z-index:600;
  width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 80px);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:0 40px 90px -40px rgba(14,22,38,.55),0 2px 8px rgba(14,22,38,.06);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;pointer-events:none;
  transform:translate(-50%,-46%) scale(.97);
  transition:opacity .24s var(--ease),transform .3s var(--bounce);
}
.nv-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
.nv-modal-head{
  padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.nv-modal-body{padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);overflow-y:auto;}
.nv-modal-close{
  margin-left:auto;background:none;border:none;color:var(--ink-3);
  font-size:22px;line-height:1;cursor:pointer;padding:4px 8px;
  border-radius:var(--r-sm);transition:background .18s,color .18s;
}
.nv-modal-close:hover{background:var(--bg2);color:var(--ink);}

/* ── ПЕРЕКЛЮЧАТЕЛЬ ВКЛАДОК ───────────────────────────────────────── */
.nv-tabs{
  display:flex;padding:3px;gap:3px;
  background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r-md);
}
.nv-tab{
  flex:1;padding:8px 12px;border:none;border-radius:var(--r-sm);
  background:transparent;color:var(--ink-2);
  font-family:inherit;font-size:14px;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);
}
.nv-tab:hover{color:var(--ink);}
.nv-tab.active{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:var(--sh-1);}

/* ── ТАБЛИЦА ─────────────────────────────────────────────────────── */
.nv-table{width:100%;border-collapse:collapse;font-size:14px;}
.nv-table th{
  text-align:left;padding:10px 14px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;
  border-bottom:1px solid var(--line);
}
.nv-table td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--ink-2);}
.nv-table tr:last-child td{border-bottom:none;}
.nv-table tbody tr{transition:background .18s var(--ease);}
.nv-table tbody tr:hover{background:var(--bg2);}

/* ── ПУСТОЕ СОСТОЯНИЕ ────────────────────────────────────────────── */
.nv-empty{
  text-align:center;padding:var(--sp-5) var(--sp-3);
  color:var(--ink-3);
}
.nv-empty-icon{
  width:56px;height:56px;margin:0 auto var(--sp-2);border-radius:var(--r-lg);
  background:var(--accent-lo);border:1px solid var(--accent);
  display:flex;align-items:center;justify-content:center;color:var(--accent-ink);
}

/* ── ДОСТУПНОСТЬ ─────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .nv-card:hover{transform:none;}
}