/*
 * Magatron — Cyber Brutalism design system.
 *
 * Принципы:
 *   - Минимум скруглений (0-2px), толстые жёсткие рамки 1px solid.
 *   - Высокий контраст: почти чёрный фон + одна кислотная акцентная.
 *   - Monospace в заголовках/данных, sans-serif в теле.
 *   - Glass-surfaces через backdrop-filter (НЕ колхозный градиент-фон,
 *     а полупрозрачный почти чёрный с blur+saturate).
 *   - Голографический градиент только на КЛЮЧЕВЫХ акцентах
 *     (focus rings, кнопка primary, статус-чипы) — не в фоне.
 *   - Анимация ТОЛЬКО subtle: hover-glow, fade-in на mount,
 *     медленный holographic shift (15-20s loop).
 *
 * Подключается на любую страницу через <link rel="stylesheet" href="/static/css/cyber.css">.
 * Глобально не ломает существующий UI — все классы префиксированы .cb-.
 * Глобальные переменные :root доступны через var(--cb-*).
 */

/* ─── @property для интерполируемого angle (нужно для conic-gradient анимации) ─── */
@property --cb-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ─── Шрифты: Geist Mono (моно) + Inter (sans), оба через Google Fonts ─── */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ─── Tokens ─── */
:root {
  /* Surface */
  --cb-bg:           #08080c;
  --cb-bg-elev:      #0d0d12;
  --cb-surface:      #16161c;
  --cb-surface-2:    #1c1c24;
  --cb-glass:        rgba(22, 22, 28, 0.55);
  --cb-glass-strong: rgba(22, 22, 28, 0.75);
  /* ── Материал «цветное стекло» (палитра-driven) ──────────────────────────
     Тень МЯГКАЯ и ПО ФОРМЕ: filter:drop-shadow трассирует силуэт (со срезом
     bevel), в отличие от box-shadow-«пятна». Оттенок из --cb-aurora-1 (главный
     акцент пользователя из Settings) → перекрашивается автоматически при смене
     палитры. holo-вариант (--cb-aurora-1..4) — для «герой»-поверхностей. */
  --cb-shadow-glass:
     drop-shadow(0 2px 4px rgba(0,0,0,.32))
     drop-shadow(0 3px 7px rgba(var(--cb-aurora-1, 163, 230, 53), .15));
  --cb-shadow-glass-holo:
     drop-shadow(0 2px 4px rgba(0,0,0,.32))
     drop-shadow(0 6px 12px rgba(var(--cb-aurora-2, 56, 189, 248), .10))
     drop-shadow(0 10px 16px rgba(var(--cb-aurora-1, 163, 230, 53), .07));
  --cb-shadow-glass-box: 0 8px 26px -6px rgba(var(--cb-aurora-1, 163, 230, 53), .40), 0 2px 6px rgba(0,0,0,.34);
  --cb-shadow-glass-sm: 0 4px 14px -3px rgba(var(--cb-aurora-1, 163, 230, 53), .30), 0 1px 3px rgba(0,0,0,.28);
  /* ── Трёхуровневая модель глубины (утв. пользователем 17.06) ───────────────
     Снимает развилку «тень на чёрном не видна»: вводим РЕАЛЬНЫЙ светлый план.
     • Ур.1 — стеклянная прослойка-поверхность (--cb-glass-substrate): светлее
       сцены #08080c → отбрасывает НЕЙТРАЛЬНУЮ тень вниз (--cb-shadow-substrate).
     • Ур.2 — сущности на прослойке: тень ЦВЕТНАЯ, НАПРАВЛЕННАЯ ВНИЗ, расходится
       в спектр (magenta→blue→accent) по нижней кромке. НЕ 3-сторонняя подсветка,
       НЕ на элементе, НЕ эмбосс. Стоп-accent = --cb-aurora-1 → едет за палитрой. */
  --cb-glass-substrate:
     linear-gradient(155deg, rgba(34,35,46,.42) 0%, rgba(22,22,30,.34) 52%, rgba(16,16,22,.30) 100%);
  --cb-shadow-substrate:
     0 30px 64px -32px rgba(0,0,0,.90),
     0 12px 30px -20px rgba(0,0,0,.66);
  /* СТРОГО ВНИЗ: y-смещение ≥ радиуса размытия + сильный отрицательный spread →
     тень не лезет вверх/в стороны (не ореол). Спектр уходит вниз-наружу слоями. */
  --cb-shadow-glass-disp:
     0 4px 5px -2px rgba(0,0,0,.55),
     0 10px 9px -6px rgba(236,72,153,.30),
     0 16px 13px -9px rgba(56,189,248,.24),
     0 23px 18px -12px rgba(var(--cb-aurora-1, 163, 230, 53), .19);
  --cb-shadow-glass-disp-hover:
     0 5px 7px -2px rgba(0,0,0,.58),
     0 13px 12px -6px rgba(236,72,153,.36),
     0 21px 17px -9px rgba(56,189,248,.29),
     0 30px 23px -12px rgba(var(--cb-aurora-1, 163, 230, 53), .23);
  /* Обычная (нейтральная) тень карточек — без цвета: пользователь отверг неоновую
     дисперсию на карточках дел. Строго вниз, мягкая, по слоям. */
  --cb-shadow-card:
     0 2px 4px rgba(0,0,0,.40),
     0 8px 16px -4px rgba(0,0,0,.46),
     0 18px 26px -10px rgba(0,0,0,.40);
  --cb-shadow-card-hover:
     0 3px 6px rgba(0,0,0,.44),
     0 12px 22px -4px rgba(0,0,0,.52),
     0 22px 32px -10px rgba(0,0,0,.46);

  /* Border */
  --cb-border:       rgba(255, 255, 255, 0.08);
  --cb-border-strong: rgba(255, 255, 255, 0.18);
  --cb-border-accent: rgba(var(--cb-aurora-1, 163, 230, 53), 0.40);

  /* Text */
  --cb-text:         #f5f5f7;
  --cb-text-muted:   #9a9aa8;   /* было #7d7d8a (~5:1) → ~7.3:1 на #08080c: вторичка читается комфортнее, иерархия strong>muted>dim сохранена */
  --cb-text-dim:     #7c7c88;   /* было #51515c (~3:1, проваливался) → ~4.6:1: WCAG AA для мета/лейблов/breadcrumbs */

  /* ═══ СЕМАНТИЧЕСКИЙ СЛОЙ — единый словарь (источник истины для UI) ═══════════
     Правило: интерфейс пользуется --accent / --danger / --warning / --ok / --info,
     а НЕ хардкод-цветами и не сырым --cb-aurora-*.
     • --accent ходит за палитрой (слот-1) — пользователь крутит его в настройках,
       идентичность держит ФОРМА (фаска/моно/стекло/моушн), а не оттенок.
     • --danger / --warning / --ok / --info ФИКСИРОВАНЫ и развязаны от палитры —
       смысловые цвета стабильны при любом акценте («красный = опасно» не уплывает).
       Это и есть корень фикса коллизии accent↔danger. */
  --accent:          rgb(var(--cb-aurora-1, 163, 230, 53));   /* единственный акцент; дефолт lime */
  --accent-strong:   color-mix(in srgb, rgb(var(--cb-aurora-1, 163, 230, 53)), #000 16%);
  --accent-weak:     color-mix(in srgb, rgb(var(--cb-aurora-1, 163, 230, 53)), transparent 60%);
  --danger:          #ef4444;   /* опасность / удаление / ошибка — фикс, вне палитры */
  --warning:         #fbbf24;   /* предупреждение — фикс */
  --ok:              #22c55e;   /* успех — фикс (раньше жил только в фоллбэках var(--cb-ok,…)) */
  --info:            #38bdf8;   /* данные / нейтральный сигнал — фикс */

  /* Accent/семантика как алиасы: --cb-* остаются для обратной совместимости,
     но теперь ходят через единый словарь выше (значения идентичны прежним). */
  --cb-acid:         var(--accent);                       /* было rgb(var(--cb-aurora-1)) */
  --cb-acid-dim:     var(--accent-strong);                /* было color-mix(...) */
  --cb-electric:     var(--info);   /* electric blue — данные */
  --cb-magenta:      #ec4899;   /* magenta — destructive-альт */
  --cb-amber:        var(--warning);
  --cb-danger:       var(--danger);
  --cb-ok:           var(--ok);   /* централизован (был только в фоллбэках) */

  /* Holographic gradient stops (lime → blue → magenta → lime) */
  --cb-holo-1: rgb(var(--cb-aurora-1, 163, 230, 53));   /* было #a3e635 — стоп-1 голо идёт за акцентом */
  --cb-holo-2: #38bdf8;
  --cb-holo-3: #ec4899;
  --cb-holo-4: #fbbf24;

  /* Type */
  --cb-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cb-font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Spacing scale (4px base) */
  --cb-s-1: 4px;
  --cb-s-2: 8px;
  --cb-s-3: 12px;
  --cb-s-4: 16px;
  --cb-s-5: 24px;
  --cb-s-6: 32px;
  --cb-s-7: 48px;

  /* Radius (минимальный — только для тач-зон) */
  --cb-r-0: 0;
  --cb-r-1: 2px;
  --cb-r-2: 4px;

  /* Motion */
  --cb-ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --cb-snap:    cubic-bezier(0.16, 1, 0.3, 1);
  --cb-dur-fast: 120ms;
  --cb-dur:      220ms;
  --cb-dur-slow: 440ms;

  /* Glass */
  --cb-blur: 20px;
  --cb-blur-strong: 32px;
}

/* ─── Body baseline (только когда хотим брутализм — добавляем класс .cb на body) ─── */
body.cb,
.cb-page {
  background: var(--cb-bg);
  color: var(--cb-text);
  font-family: var(--cb-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  min-height: 100vh;
}

/* Декоративный grain + ambient backdrop. Лёгкий, не отвлекает.
   z-index: -1 ставит ::before ПОД контент без необходимости трогать z-index
   у каждого ребёнка body. Не ломает legacy layouts с absolutely-positioned
   элементами (видео-фоны, sidebar overlay'и).
   isolation: isolate обеспечивает локальный stacking context, чтобы
   negative z-index не "проваливался" сквозь body. */
body.cb,
.cb-page {
  isolation: isolate;
}

body.cb::before,
.cb-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--cb-aurora-1, 163, 230, 53), 0.07), transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(236, 72, 153, 0.05), transparent 70%),
    radial-gradient(ellipse 60% 40% at 0% 80%, rgba(56, 189, 248, 0.05), transparent 70%);
}

/* ─── Typography ─── */
.cb-h-mono { font-family: var(--cb-font-mono); font-weight: 600; letter-spacing: -0.01em; }
.cb-display {
  font-family: var(--cb-font-mono);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.cb-mono { font-family: var(--cb-font-mono); }
.cb-muted { color: var(--cb-text-muted); }
.cb-dim   { color: var(--cb-text-dim); }

/* ─── Glass surface ─── */
.cb-glass {
  background: var(--cb-glass);
  backdrop-filter: blur(var(--cb-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--cb-blur)) saturate(180%);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-r-1);
}
.cb-glass-strong {
  background: var(--cb-glass-strong);
  backdrop-filter: blur(var(--cb-blur-strong)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--cb-blur-strong)) saturate(180%);
  border: 1px solid var(--cb-border-strong);
  border-radius: var(--cb-r-1);
  box-shadow: var(--cb-shadow-glass-box);
}

/* Контентный план вкладки (Ур.1): тот же стеклянный план, что у секции дел на
   Work — для Direction/Members и пр. Карточки-сущности лежат на нём. Срез низ-лево. */
.mg-mode-plane {
  background: var(--cb-glass-substrate);
  border: 1px solid var(--cb-border);
  border-top-color: var(--cb-border-strong);
  box-shadow: var(--cb-shadow-substrate);
  padding: 18px 20px 20px;
}
@supports (corner-shape: bevel) {
  .mg-mode-plane { corner-shape: bevel; border-radius: 0 0 0 22px; }
}

/* ─── Card (брутальная карточка без скруглений) ─── */
.cb-card {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-r-1);
  padding: var(--cb-s-5);
  box-shadow: var(--cb-shadow-glass-box);
}
.cb-card--glass {
  background: var(--cb-glass);
  backdrop-filter: blur(var(--cb-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--cb-blur)) saturate(180%);
}

/* ─── Holographic accent (тонкая «жидкая» рамка с прокруткой цвета) ─── */
.cb-holo {
  position: relative;
  isolation: isolate;
}
.cb-holo::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--cb-angle),
    var(--cb-holo-1),
    var(--cb-holo-2),
    var(--cb-holo-3),
    var(--cb-holo-4),
    var(--cb-holo-1)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: cb-holo-spin 18s linear infinite;
}
@keyframes cb-holo-spin {
  to { --cb-angle: 360deg; }
}
/* Подсветка усиливается на hover/focus */
.cb-holo:hover::before,
.cb-holo:focus-within::before {
  animation-duration: 6s;
}

/* ─── Кнопки ─── */
.cb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--cb-font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  color: var(--cb-text);
  border: 1px solid var(--cb-border-strong);
  border-radius: var(--cb-r-1);
  cursor: pointer;
  transition:
    background var(--cb-dur) var(--cb-ease),
    color var(--cb-dur) var(--cb-ease),
    border-color var(--cb-dur) var(--cb-ease),
    transform var(--cb-dur-fast) var(--cb-ease),
    box-shadow var(--cb-dur) var(--cb-ease);
  box-shadow: var(--cb-shadow-glass-sm);
}
.cb-btn:hover:not(:disabled) {
  background: var(--cb-text);
  color: var(--cb-bg);
  border-color: var(--cb-text);
}
.cb-btn:active:not(:disabled) { transform: translateY(1px); }
.cb-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.cb-btn--primary {
  background: var(--cb-acid);
  color: var(--cb-bg);
  border-color: var(--cb-acid);
}
.cb-btn--primary:hover:not(:disabled) {
  background: var(--cb-acid-dim);
  border-color: var(--cb-acid-dim);
  box-shadow: 0 0 28px rgba(var(--cb-aurora-1, 163, 230, 53), 0.25);
}

.cb-btn--ghost {
  border-color: var(--cb-border);
  color: var(--cb-text-muted);
}
.cb-btn--ghost:hover:not(:disabled) {
  background: transparent;
  color: var(--cb-text);
  border-color: var(--cb-border-strong);
}

.cb-btn--danger {
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--cb-danger);
}
.cb-btn--danger:hover:not(:disabled) {
  background: var(--cb-danger);
  color: var(--cb-bg);
  border-color: var(--cb-danger);
}

.cb-btn--block { width: 100%; }

/* ─── Inputs ─── */
.cb-input,
.cb-textarea,
.cb-select,
.cb-btn {
  /* box-sizing: иначе width:100% + padding раздувает поле за рамку
     карточки. Видно было на login (поля вылазят за голо-рамку). */
  box-sizing: border-box;
}
.cb-input,
.cb-textarea,
.cb-select {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--cb-font-sans);
  font-size: 14px;
  background: var(--cb-bg-elev);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-r-1);
  color: var(--cb-text);
  outline: none;
  transition: border-color var(--cb-dur) var(--cb-ease), background var(--cb-dur) var(--cb-ease);
  box-shadow: var(--cb-shadow-glass-sm);
}
.cb-input::placeholder,
.cb-textarea::placeholder { color: var(--cb-text-dim); }
.cb-input:focus,
.cb-textarea:focus,
.cb-select:focus {
  border-color: var(--cb-acid);
  background: var(--cb-bg);
}
.cb-input--mono { font-family: var(--cb-font-mono); }
.cb-input--center {
  text-align: center;
  font-family: var(--cb-font-mono);
  letter-spacing: 0.08em;
  padding: 13px 14px;
}
.cb-input--center::placeholder,
.cb-input--center::-webkit-input-placeholder,
.cb-input--center::-moz-placeholder,
.cb-input--center:-ms-input-placeholder {
  text-align: center;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
}

.cb-label {
  display: block;
  font-family: var(--cb-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cb-text-muted);
  margin-bottom: 6px;
}

/* ─── Chip / Badge ─── */
.cb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-family: var(--cb-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--cb-surface-2);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-r-0);
  color: var(--cb-text-muted);
  box-shadow: var(--cb-shadow-glass-sm);
}
.cb-chip--ok    { color: var(--cb-acid);     border-color: rgba(var(--cb-aurora-1, 163, 230, 53), 0.3); }
.cb-chip--info  { color: var(--cb-electric); border-color: rgba(56, 189, 248, 0.3); }
.cb-chip--warn  { color: var(--cb-amber);    border-color: rgba(251, 191, 36, 0.3); }
.cb-chip--err   { color: var(--cb-danger);   border-color: rgba(239, 68, 68, 0.3); }

/* ════════════════════════════════════════════════════════════
   УТИЛИТЫ МАТЕРИАЛА «ЦВЕТНОЕ СТЕКЛО» (палитра-driven, opt-in)
   — .mg-glass-shadow[--holo]: мягкая тень ПО ФОРМЕ (drop-shadow), оттенок из палитры;
   — .mg-facet: ассиметричная стеклянная ПРОЗРАЧНОСТЬ (одна диагональная секция
     прозрачнее — виден фон сквозь blur, НЕ белый блик), угол --fa разный по nth-child.
   ════════════════════════════════════════════════════════════ */
.mg-glass-shadow       { filter: var(--cb-shadow-glass); }
.mg-glass-shadow--holo { filter: var(--cb-shadow-glass-holo); }
.mg-facet{
  background: linear-gradient(var(--fa, 122deg),
    var(--cb-glass-strong, rgba(22,22,28,.82)) 0%,
    var(--cb-glass-strong, rgba(22,22,28,.82)) 53%,
    color-mix(in srgb, var(--cb-glass-strong, rgba(22,22,28,.82)), transparent 52%) 60%,
    color-mix(in srgb, var(--cb-glass-strong, rgba(22,22,28,.82)), transparent 68%) 100%);
}
.mg-facet:nth-child(3n+1){ --fa: 122deg; }
.mg-facet:nth-child(3n+2){ --fa: 300deg; }
.mg-facet:nth-child(3n+3){ --fa: 58deg;  }

/* ─── Status indicators (терминальная точка) ─── */
.cb-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cb-text-dim);
  vertical-align: middle;
  margin-right: 6px;
}
.cb-dot--live {
  background: var(--cb-acid);
  box-shadow: 0 0 8px var(--cb-acid);
  animation: cb-pulse 1.6s ease-in-out infinite;
}
@keyframes cb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

/* ─── Divider ─── */
.cb-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--cb-text-dim);
  font-family: var(--cb-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 18px 0;
}
.cb-divider::before,
.cb-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cb-border);
}

/* ─── Mount-in анимация (минимальная) ─── */
@keyframes cb-mount {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.cb-mount { animation: cb-mount var(--cb-dur-slow) var(--cb-snap) both; }

/* ─── Сообщения формы ─── */
.cb-msg {
  font-family: var(--cb-font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  min-height: 18px;
  line-height: 1.4;
  margin-top: 6px;
  color: var(--cb-text-muted);
}
.cb-msg--err { color: var(--cb-danger); }
.cb-msg--ok  { color: var(--cb-acid); }

/* ─── Centered layout helper ─── */
.cb-center-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 24px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
}

/* Утилиты */
.cb-stack    { display: flex; flex-direction: column; gap: var(--cb-s-3); }
.cb-stack-2  { gap: var(--cb-s-2); }
.cb-stack-4  { gap: var(--cb-s-4); }
.cb-row      { display: flex; align-items: center; gap: var(--cb-s-3); }
.cb-grow     { flex: 1; min-width: 0; }
.cb-spacer   { flex: 1; }
.cb-tar      { text-align: right; }
.cb-tac      { text-align: center; }

/* «> CODE BLOCK» — большой моно-блок (для линк-кода привязки TG) */
.cb-code-block {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cb-font-mono);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.25em;
  padding: 22px;
  color: var(--cb-acid);
  background: var(--cb-bg-elev);
  border: 1px dashed var(--cb-acid);
  border-radius: var(--cb-r-1);
  text-shadow: 0 0 18px rgba(var(--cb-aurora-1, 163, 230, 53), 0.4);
}