/* ============================================================================
   NotNoName Team — Design System
   Тёмная «приборная» тема в стиле PRISMA-дашборда: сине-чёрный фон,
   cyan-каркас + amber/red акценты, светящиеся рамки, моно-подписи.
   Один источник правды для всех страниц (index, link, admin).
   ============================================================================ */

:root {
  /* Палитра — холодный сине-чёрный (как на референсе) */
  --bg:        #03060b;
  --bg-2:      #060b13;
  --panel:     #081019;
  --panel-2:   #0c1622;
  --line:      rgba(90, 180, 200, 0.12);
  --line-2:    rgba(90, 190, 210, 0.22);
  --text:      #c4d6e0;
  --text-soft: #7f95a4;
  --muted:     #4f6675;

  --cyan:      #2ee6df;   /* основной каркас интерфейса */
  --cyan-dim:  rgba(46, 230, 223, 0.12);
  --amber:     #ffb338;   /* акцент: кнопки, важное */
  --amber-dim: rgba(255, 179, 56, 0.14);
  --red:       #ff5757;   /* опасность / danger */
  --red-dim:   rgba(255, 87, 87, 0.13);

  --radius:    10px;
  --radius-sm: 7px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace;
  --sans: "Chakra Petch", "Segoe UI", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.16, .84, .28, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);      /* сильный ease-out для UI */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);  /* движение по экрану */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: var(--sans);
  /* глубокий «космический» градиент — основа под стеклянный UI */
  background:
    radial-gradient(135% 120% at 50% -10%, #0c1a2b 0%, #060d18 42%, #03060d 100%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---- Фон: мягкое «северное сияние» (без сетки) ---- */
.fx-grid, .fx-vignette, .fx-scan {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
/* медленно дышащие цветные пятна — то, что преломляет стекло сайдбара */
.fx-grid {
  background:
    radial-gradient(38% 50% at 16% 18%, rgba(46,230,223,.16), transparent 62%),
    radial-gradient(42% 48% at 84% 22%, rgba(122,108,255,.15), transparent 62%),
    radial-gradient(46% 52% at 62% 96%, rgba(255,179,56,.10), transparent 60%);
  animation: auroraDrift 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-3.5%, 2.5%, 0) scale(1.1); }
}
.fx-vignette {
  background: radial-gradient(ellipse 120% 95% at 50% 45%, transparent 52%, rgba(0,0,0,.72) 100%);
}
/* едва заметное зерно вместо сканлайнов */
.fx-scan {
  background-image: radial-gradient(rgba(255,255,255,.5) .5px, transparent .6px);
  background-size: 3px 3px; opacity: .035;
}
/* доп. дрейфующее пятно для глубины */
.fx-glow {
  position: fixed; z-index: 0; pointer-events: none;
  width: 55vmax; height: 55vmax; border-radius: 50%; filter: blur(130px); opacity: .14;
  background: radial-gradient(circle, var(--cyan), transparent 70%);
  top: -18%; right: -12%;
  animation: glowFloat 22s ease-in-out infinite alternate;
}
@keyframes glowFloat {
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-8vw, 6vh, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-grid, .fx-glow { animation: none; }
}

/* ---- Типографика-утилиты ---- */
.mono { font-family: var(--mono); }
.tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--cyan); opacity: .85;
}
.kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 4px;
  text-transform: uppercase; color: var(--amber);
}

/* ---- HUD-уголки (cyan, как рамки на референсе) ---- */
.hud { position: relative; }
.hud::before, .hud::after { content: ""; position: absolute; width: 13px; height: 13px; pointer-events: none; z-index: 2; }
.hud::before { top: -1px; left: -1px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
.hud::after  { bottom: -1px; right: -1px; border-bottom: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }

/* ---- Панель (тонкая светящаяся рамка) ---- */
.panel {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(46,230,223,.04), 0 0 24px -16px rgba(46,230,223,.5);
}

/* ---- Поля ввода ---- */
.field { margin-bottom: 18px; }
.field label {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-soft); margin-bottom: 8px;
}
.field .prompt { color: var(--amber); margin-right: 6px; }
.input {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 13px 14px; font-family: var(--mono); font-size: 14px; letter-spacing: .5px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.input::placeholder { color: var(--muted); }
.input:focus {
  outline: none; border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-dim); background: #08090d;
}

/* ---- Кнопки ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  padding: 13px 20px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text);
  transition: transform .16s var(--ease-out), background .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease), opacity .18s var(--ease);
  user-select: none; position: relative; overflow: hidden;
}
.btn:hover { border-color: var(--text-soft); background: #161b24; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(180deg, var(--amber), #e89a1f);
  color: #1a1205; border-color: transparent; font-weight: 700;
  box-shadow: 0 6px 20px -8px var(--amber);
}
.btn-primary:hover { background: linear-gradient(180deg, #ffc155, #f0a426); border-color: transparent; }
.btn-danger { color: var(--red); border-color: var(--red-dim); }
.btn-danger:hover { background: var(--red-dim); border-color: var(--red); }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-block { width: 100%; }

/* ---- Бейджи статуса ---- */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 5px 10px; border-radius: 6px; border: 1px solid var(--line-2);
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; }
.badge.ok    { color: var(--cyan); border-color: var(--cyan-dim); }
.badge.ok .dot { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: blink 2s infinite; }
.badge.warn  { color: var(--amber); border-color: var(--amber-dim); }
.badge.warn .dot { background: var(--amber); }
.badge.off   { color: var(--muted); }
.badge.off .dot { background: var(--muted); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---- Ошибка/статус строкой ---- */
.statusline {
  font-family: var(--mono); font-size: 12px; letter-spacing: .5px; min-height: 18px;
  color: var(--muted); transition: color .2s;
}
.statusline.err { color: var(--red); }
.statusline.ok  { color: var(--cyan); }

/* ---- Мигающий каретка-курсор ---- */
.caret::after {
  content: "▍"; color: var(--amber); animation: caret 1s steps(1) infinite; margin-left: 2px;
}
@keyframes caret { 50% { opacity: 0; } }

/* ---- Загрузочный спиннер (точечный) ---- */
.dots::after { content: ""; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} }

.hidden { display: none !important; }