/* ============================================================
   «Тихая ночная гавань» — ЛК и админка.
   Тёмное озеро, медленные волны (20с), ВСЁ — dark glassmorphism.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');body.night * { box-sizing: border-box; margin: 0; padding: 0; }html { scroll-behavior: smooth; }body.night {
  min-height: 100vh;
  background: linear-gradient(160deg, #0B1120 0%, #0C1B2E 38%, #0E3340 72%, #134E4A 100%);
  background-attachment: fixed;
  color: #E6EEF5;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}body.night ::selection { background: rgba(45,212,191,.35); }body.night /* ---------- Вода: медленные волны, body.night цикл 20с ---------- */
.lake { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }body.night .lake-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 55% at 80% -10%, rgba(45,212,191,.10), transparent 60%),
    radial-gradient(70% 50% at 10% 110%, rgba(19,78,74,.5), transparent 65%);
}body.night .waves { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(180px, 30vh, 340px); }body.night .wave {
  position: absolute; left: 0; bottom: 0; width: 200%; height: 100%;
  background-repeat: repeat-x; background-size: 50% 100%;
  animation: waveDrift 20s linear infinite;
}body.night .wave.w1 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path d='M0 130 C200 70 400 190 720 130 C1040 70 1240 190 1440 130 L1440 320 L0 320 Z' fill='%232dd4bf' fill-opacity='0.10'/></svg>");
}body.night .wave.w2 {
  height: 82%; opacity: .8;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path d='M0 170 C240 110 480 230 720 170 C960 110 1200 230 1440 170 L1440 320 L0 320 Z' fill='%2314b8a6' fill-opacity='0.13'/></svg>");
  animation-duration: 20s; animation-direction: reverse;
}body.night .wave.w3 {
  height: 64%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path d='M0 210 C260 160 520 260 720 210 C920 160 1180 260 1440 210 L1440 320 L0 320 Z' fill='%230f766e' fill-opacity='0.22'/></svg>");
  animation-duration: 20s; animation-delay: -7s;
}
@keyframes waveDrift{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }body.night /* ---------- Базовое стекло — применяется ко ВСЕМ элементам ---------- */
.glass {
  background: rgba(11,17,32,.6);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
}body.night .nwrap { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 clamp(14px, 3.5vw, 44px); }body.night /* ---------- Шапка ---------- */
.nbar {
  position: sticky; top: 12px; z-index: 50;
  margin: 12px clamp(10px, 2vw, 24px) 0;
  border-radius: 22px;
}body.night .nbar-in { display: flex; align-items: center; gap: 14px; padding: 12px clamp(14px, 2vw, 22px); flex-wrap: wrap; }body.night .nbrand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; margin-right: auto; }body.night .nbrand svg { width: 34px; height: 34px; color: #2DD4BF; }body.night .nbrand b { font-size: 17px; font-weight: 800; letter-spacing: .02em; }body.night .nbrand small { display: block; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(230,238,245,.5); }body.night .nchip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px; font-size: 13px; font-weight: 700; color: #E6EEF5;
  text-decoration: none; border-radius: 999px;
  background: rgba(11,17,32,.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  transition: border-color .3s, background .3s;
}body.night .nchip:hover { border-color: rgba(45,212,191,.4); }body.night .nchip svg { width: 15px; height: 15px; color: #2DD4BF; }body.night .navatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(45,212,191,.15); border: 1px solid rgba(45,212,191,.3); color: #2DD4BF; font-size: 12px; font-weight: 800; }body.night /* ---------- Секции ---------- */
.nsection { padding: clamp(26px, 4vw, 48px) 0 8px; }body.night .nsection h2 { font-size: clamp(19px, 2vw, 24px); font-weight: 800; letter-spacing: .01em; display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }body.night .nsection h2 svg { width: 20px; height: 20px; color: #2DD4BF; }body.night .nsub { color: rgba(230,238,245,.55); font-size: 14px; margin-bottom: 18px; }body.night .page-head { padding: clamp(30px, 5vw, 54px) 0 6px; }body.night .page-head h1 { font-size: clamp(26px, 3.6vw, 42px); font-weight: 800; letter-spacing: .01em; }body.night .page-head p { color: rgba(230,238,245,.55); margin-top: 6px; max-width: 60ch; font-size: 15px; }body.night /* ---------- Сетка 2×2 ---------- */
.grid-2x2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 22px); }
@media (max-width: 380px){body.night .grid-2x2 { gap: 10px; } }body.night /* ---------- Карточки-кнопки (протоколы, body.night клиенты) ---------- */
.tile {
  position: relative; cursor: pointer; text-align: left; width: 100%;
  padding: clamp(16px, 2.4vw, 26px);
  display: flex; align-items: center; gap: clamp(12px, 1.8vw, 20px);
  color: #E6EEF5; font: inherit;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, box-shadow .35s;
}body.night .tile:hover { transform: translateY(-4px); border-color: rgba(45,212,191,.35); box-shadow: 0 18px 44px rgba(0,0,0,.35); }body.night .tile:active { transform: translateY(-1px) scale(.99); }body.night .tile-icon {
  flex: none; width: clamp(48px, 6vw, 62px); height: clamp(48px, 6vw, 62px);
  border-radius: 16px; display: grid; place-items: center;
  background: rgba(11,17,32,.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  color: #B9C8D4;
}body.night .tile-icon svg { width: 55%; height: 55%; }body.night .tile b { display: block; font-size: clamp(15px, 1.7vw, 18px); font-weight: 800; }body.night .tile span { display: block; font-size: clamp(11.5px, 1.3vw, 13px); color: rgba(230,238,245,.5); margin-top: 3px; }body.night .tile .tile-go { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: rgba(230,238,245,.4);
  background: rgba(11,17,32,.6); border: 1px solid rgba(255,255,255,.08); }body.night .tile .tile-go svg { width: 14px; height: 14px; }body.night /* ---------- Панель графика ---------- */
.panel { padding: clamp(16px, 2.4vw, 26px); }body.night .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }body.night .panel-head b { font-size: 16px; font-weight: 800; }body.night .panel-head .legend { display: flex; gap: 14px; font-size: 12px; color: rgba(230,238,245,.55); }body.night .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }body.night .chart-wrap { position: relative; }body.night .chart-wrap svg { display: block; width: 100%; height: auto; }body.night .chart-total { display: flex; gap: clamp(14px, 3vw, 34px); margin-top: 14px; flex-wrap: wrap; }body.night .chart-total .ct b { font-size: clamp(18px, 2vw, 22px); font-weight: 800; color: #2DD4BF; display: block; }body.night .chart-total .ct span { font-size: 12px; color: rgba(230,238,245,.5); }body.night /* ---------- Модалки (стеклянные) ---------- */
.gmodal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(4,8,16,.55);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}body.night .gmodal-backdrop.open { opacity: 1; pointer-events: auto; }body.night .gmodal {
  width: min(480px, 100%); max-height: min(86vh, 900px); overflow: auto;
  padding: clamp(20px, 3vw, 30px);
  transform: translateY(16px) scale(.97); transition: transform .35s cubic-bezier(.2,.7,.3,1);
  border-radius: 24px;
}body.night .gmodal-backdrop.open .gmodal { transform: none; }body.night .gmodal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }body.night .gmodal-head .tile-icon { width: 46px; height: 46px; }body.night .gmodal-head b { font-size: 18px; font-weight: 800; }body.night .gmodal-head span { display: block; font-size: 12.5px; color: rgba(230,238,245,.5); }body.night .gmodal-close {
  margin-left: auto; flex: none; cursor: pointer; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; color: rgba(230,238,245,.6);
  background: rgba(11,17,32,.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08); transition: color .3s, border-color .3s;
}body.night .gmodal-close:hover { color: #fff; border-color: rgba(45,212,191,.4); }body.night .gmodal-close svg { width: 15px; height: 15px; }body.night /* QR */
.qr-box {
  margin: 18px auto 6px; width: fit-content; padding: 14px; border-radius: 20px; cursor: zoom-in;
  background: rgba(11,17,32,.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .3s, border-color .3s;
}body.night .qr-box:hover { transform: scale(1.03); border-color: rgba(45,212,191,.4); }body.night .qr-box canvas, body.night .qr-box img { display: block; border-radius: 10px; }body.night .qr-hint { text-align: center; font-size: 12px; color: rgba(230,238,245,.45); margin-top: 10px; }body.night .qr-overlay {
  position: fixed; inset: 0; z-index: 200; cursor: zoom-out;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px;
  background: rgba(4,8,16,.88);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}body.night .qr-overlay.open { opacity: 1; pointer-events: auto; }body.night .qr-overlay .qr-big {
  padding: clamp(14px, 2.5vw, 26px); border-radius: 26px;
  background: rgba(11,17,32,.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
}body.night .qr-overlay canvas { display: block; border-radius: 14px; width: min(78vw, 60vh, 480px); height: auto; }body.night .qr-overlay p { color: rgba(230,238,245,.5); font-size: 13px; }body.night /* Списки приложений */
.app-list { display: grid; gap: 12px; margin-top: 16px; }body.night .app-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px;
  background: rgba(11,17,32,.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
}body.night .app-row .ai { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  color: #B9C8D4; background: rgba(11,17,32,.6); border: 1px solid rgba(255,255,255,.08); }body.night .app-row .ai svg { width: 19px; height: 19px; }body.night .app-row b { font-size: 14.5px; font-weight: 700; display: block; }body.night .app-row span { font-size: 12px; color: rgba(230,238,245,.5); }body.night .app-row > div { min-width: 0; }body.night /* Кнопки — стеклянные */
.gbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer;
  padding: 11px 20px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; color: #E6EEF5;
  background: rgba(11,17,32,.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  text-decoration: none; transition: border-color .3s, transform .3s, background .3s, color .3s;
}body.night .gbtn:hover { border-color: rgba(45,212,191,.45); transform: translateY(-1px); color: #fff; }body.night .gbtn svg { width: 15px; height: 15px; }body.night .gbtn.primary { border-color: rgba(45,212,191,.5); color: #2DD4BF; background: rgba(19,78,74,.45); }body.night .gbtn.primary:hover { background: rgba(19,78,74,.65); color: #7FF5E4; }body.night .gbtn.sm { padding: 8px 14px; font-size: 12.5px; }body.night /* ---------- Таблица (стеклянная) ---------- */
.gtable-wrap { overflow-x: auto; border-radius: 20px; }body.night table.gtable { width: 100%; border-collapse: collapse; min-width: 640px; }body.night .gtable th, body.night .gtable td { padding: 13px 16px; text-align: left; font-size: 13.5px; white-space: nowrap; }body.night .gtable thead th {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(230,238,245,.45);
  background: rgba(11,17,32,.6); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}body.night .gtable tbody tr { border-bottom: 1px solid rgba(255,255,255,.05); transition: background .25s; }body.night .gtable tbody tr:hover { background: rgba(255,255,255,.03); }body.night .gtable tbody tr:last-child { border-bottom: none; }body.night .badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  background: rgba(11,17,32,.6); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08); color: rgba(230,238,245,.75);
}body.night .badge i { width: 7px; height: 7px; border-radius: 50%; }body.night .badge.ok i { background: #2DD4BF; box-shadow: 0 0 8px rgba(45,212,191,.8); }body.night .badge.warn i { background: #F2B441; box-shadow: 0 0 8px rgba(242,180,65,.7); }body.night .badge.off i { background: #64748B; }body.night /* ---------- Формы (стеклянные) ---------- */
.gfield { margin-bottom: 16px; }body.night .gfield label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(230,238,245,.45); margin-bottom: 8px; }body.night .ginput, body.night .gselect, body.night .gtextarea {
  width: 100%; padding: 13px 15px; font: inherit; font-size: 14.5px; color: #E6EEF5;
  background: rgba(11,17,32,.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px; outline: none;
  transition: border-color .3s, box-shadow .3s;
}body.night .ginput:focus, body.night .gselect:focus, body.night .gtextarea:focus { border-color: rgba(45,212,191,.5); box-shadow: 0 0 0 4px rgba(45,212,191,.08); }body.night .gselect option { background: #0B1120; color: #E6EEF5; }body.night .gtextarea { resize: vertical; min-height: 130px; }body.night .ginput::placeholder, body.night .gtextarea::placeholder { color: rgba(230,238,245,.3); }body.night /* Переключатель — стеклянный */
.gswitch { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 16px;
  background: rgba(11,17,32,.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08); margin-bottom: 12px; }body.night .gswitch b { font-size: 14px; font-weight: 700; display: block; }body.night .gswitch span { font-size: 12px; color: rgba(230,238,245,.5); }body.night .gswitch .sw { position: relative; flex: none; width: 50px; height: 28px; border-radius: 999px; cursor: pointer;
  background: rgba(11,17,32,.8); border: 1px solid rgba(255,255,255,.1); transition: background .3s, border-color .3s; }body.night .gswitch .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(230,238,245,.75); transition: transform .3s, background .3s; }body.night .gswitch .sw.on { background: rgba(19,78,74,.8); border-color: rgba(45,212,191,.5); }body.night .gswitch .sw.on::after { transform: translateX(22px); background: #2DD4BF; }body.night /* ---------- Админка: каркас ---------- */
.admin-shell { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: clamp(14px, 2vw, 26px); align-items: start; }
@media (max-width: 860px){body.night .admin-shell { grid-template-columns: 1fr; } }body.night .aside { padding: 16px; position: sticky; top: 96px; }
@media (max-width: 860px){body.night .aside { position: static; } }body.night .aside-nav { display: grid; gap: 8px; }body.night .aside-nav button {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 14px; border-radius: 14px; font: inherit; font-size: 14px; font-weight: 700; color: rgba(230,238,245,.7);
  background: transparent; border: 1px solid transparent;
  transition: background .3s, color .3s, border-color .3s;
}body.night .aside-nav button svg { width: 18px; height: 18px; color: rgba(230,238,245,.5); transition: color .3s; }body.night .aside-nav button:hover { background: rgba(255,255,255,.04); color: #fff; }body.night .aside-nav button.active {
  background: rgba(11,17,32,.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08); color: #2DD4BF;
}body.night .aside-nav button.active svg { color: #2DD4BF; }
@media (max-width: 860px){body.night .aside-nav { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } }body.night .aview { display: none; }body.night .aview.active { display: block; animation: viewIn .4s ease; }
@keyframes viewIn{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }body.night /* Виджеты */
.widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px,100%), 1fr)); gap: clamp(12px, 1.8vw, 20px); }body.night .widget { padding: clamp(16px, 2.2vw, 24px); }body.night .widget .w-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }body.night .widget .w-top .tile-icon { width: 42px; height: 42px; border-radius: 13px; }body.night .widget .w-top span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(230,238,245,.45); font-weight: 700; }body.night .widget b.w-num { font-size: clamp(24px, 2.8vw, 32px); font-weight: 800; display: block; letter-spacing: .01em; }body.night .widget .w-delta { font-size: 12px; margin-top: 4px; color: #2DD4BF; font-weight: 700; }body.night .widget .w-delta.down { color: #F2B441; }body.night /* Список статей в админке */
.article-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; margin-bottom: 10px;
  background: rgba(11,17,32,.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08); transition: border-color .3s; }body.night .article-row:hover { border-color: rgba(45,212,191,.3); }body.night .article-row b { font-size: 14.5px; font-weight: 700; display: block; }body.night .article-row span { font-size: 12px; color: rgba(230,238,245,.5); }body.night .article-row .grow { min-width: 0; flex: 1; }body.night .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }body.night .toolbar p { color: rgba(230,238,245,.5); font-size: 13.5px; }body.night /* Подвал ночных страниц */
.nfoot { position: relative; z-index: 2; margin: 48px 0 26px; text-align: center; color: rgba(230,238,245,.35); font-size: 12.5px; }

@media (min-width: 2200px){body.night .nwrap { max-width: 1600px; } }
@media (max-width: 480px){body.night .tile { flex-wrap: wrap; }body.night .tile .tile-go { display: none; }
}

/* SPA: кросс-фейд контента между страницами */
body.night main.spa-out { opacity: 0; transform: translateY(10px); transition: opacity .16s ease, transform .16s ease; }
body.night main.spa-in { animation: spaIn .3s ease both; }
@keyframes spaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body.night main.spa-out { transition: none; }
  body.night main.spa-in { animation: none; }
}