/* ============================================================================
   KUROMI.SPACE — дизайн-система
   Эстетика: ретро-аркада / CRT × космос × Twitch/YouTube стриминг.
   Тёмная фосфорная пустота, сканлайны, виньетка, орбиты, угловые скобки HUD,
   резкие акценты магента / фосфорный циан. Без неонового перегруза — контроль.
   Используется на всех страницах (лендинг, auth, панель, сервисы).
============================================================================ */

/* ---- Шрифты ----------------------------------------------------------------
   Display: "Chakra Petch" — техно-аркадный, рубленый, с японской поддержкой кана.
   Body:    "Zen Kaku Gothic New" — чистый японский гротеск, отлично читается на кириллице.
   Mono:    "JetBrains Mono" — для кодов, ссылок, чисел.
   Подключение через <link> в каждой HTML-странице. */

:root {
  /* — палитра — */
  --void:       #07070c;   /* самый тёмный фон-пустота */
  --bg:         #0a0a12;   /* основной фон */
  --bg-2:       #0e0e1a;   /* чуть светлее, для секций */
  --panel:      #12121f;   /* карточки */
  --panel-2:    #171728;   /* приподнятые карточки / hover */
  --panel-3:    #1d1d33;   /* поля ввода */
  --line:       #26263f;   /* границы */
  --line-2:     #34345a;   /* акцентные границы */

  --ink:        #ecebff;   /* основной текст */
  --ink-dim:    #9b99c4;   /* приглушённый */
  --ink-mute:   #6a6890;   /* подписи */
  --ink-ghost:  #43426a;   /* призрачный */

  /* — акценты — */
  --mag:        #ff2e88;   /* магента — главный акцент (мост к Twitch-фиолету через розовый) */
  --mag-2:      #ff5ea3;
  --violet:     #9147ff;   /* Twitch-фиолет — связующий */
  --cyan:       #2efff5;   /* фосфорный циан — вторичный (CRT) */
  --cyan-2:     #6bfff8;
  --lime:       #b6ff3c;   /* фосфорный лайм — «живой» статус */
  --amber:      #ffb627;   /* тёплый акцент / предупреждение */
  --red:        #ff3b48;   /* ошибка / danger (YouTube-красный вайб) */

  /* — свечения — */
  --gl-mag:   rgba(255,46,136,.45);
  --gl-cyan:  rgba(46,255,245,.40);
  --gl-violet:rgba(145,71,255,.40);
  --gl-lime:  rgba(182,255,60,.45);

  /* — радиусы (аркадные: малые, с фасками через clip-path там, где нужно) — */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* — тени — */
  --shadow:    0 24px 60px -30px rgba(0,0,0,.9);
  --shadow-lg: 0 50px 120px -50px rgba(0,0,0,.95);

  /* — тайминги — */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --font-display: 'Chakra Petch', 'Zen Kaku Gothic New', system-ui, sans-serif;
  --font-body: 'Zen Kaku Gothic New', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

/* box-sizing задан глобально ниже (включая псевдоэлементы), см. блок анти-shift. */
html, body { margin: 0; padding: 0; }
/* Резервируем место под вертикальный скроллбар всегда. Без этого короткие
   страницы/вкладки без скролла на ~15px шире, чем длинные со скроллом, и при
   переходе между ними весь контент дёргается по горизонтали. */
html { scrollbar-gutter: stable; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}

/* ---- Атмосфера фона: фосфорное свечение + виньетка ------------------------- */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 600px at 12% -8%, rgba(255,46,136,.10), transparent 60%),
    radial-gradient(800px 600px at 92% 8%, rgba(46,255,245,.07), transparent 60%),
    radial-gradient(1200px 800px at 50% 120%, rgba(145,71,255,.08), transparent 65%),
    var(--bg);
}

/* ---- CRT-сканлайны + зерно + виньетка (поверх всего, не мешают кликам) ----- */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background:
    /* сканлайны */
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,.20) 3px,
      rgba(0,0,0,0) 4px
    ),
    /* виньетка */
    radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(0,0,0,.55) 100%);
  mix-blend-mode: multiply;
  opacity: .55;
}

/* Тонкое зерно отдельным слоем (svg-шум) */
.grain {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Уважение к пользователям, которым плохо от движения/сканлайнов. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .08s !important; }
  body::after { opacity: .25; }
}

/* ============================================================================
   ТИПОГРАФИКА
============================================================================ */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0; line-height: 1.05; }
a { color: inherit; text-decoration: none; }

.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.5px;
}

/* Глитч-текст для заголовков — тонкое хроматическое расслоение по hover/load. */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0; pointer-events: none;
  clip-path: inset(0 0 0 0);
}
.glitch::before { color: var(--mag); transform: translate(-2px, 0); mix-blend-mode: screen; opacity: .0; }
.glitch::after  { color: var(--cyan); transform: translate(2px, 0); mix-blend-mode: screen; opacity: .0; }
.glitch:hover::before { animation: glitchA .5s steps(2) 1; }
.glitch:hover::after  { animation: glitchB .5s steps(2) 1; }
@keyframes glitchA { 0%,100%{opacity:0;transform:translate(0,0)} 30%{opacity:.7;transform:translate(-3px,-1px)} 60%{transform:translate(2px,1px)} }
@keyframes glitchB { 0%,100%{opacity:0;transform:translate(0,0)} 30%{opacity:.7;transform:translate(3px,1px)} 60%{transform:translate(-2px,-1px)} }

/* Японская вертикальная подпись-акцент (декоративная). */
.kana-vert {
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  letter-spacing: 4px;
  font-size: 12px;
  color: var(--ink-ghost);
  user-select: none;
}

/* Надпись-«эйбрау» в стиле аркадного HUD. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  color: var(--cyan);
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan));
}

/* ============================================================================
   УГЛОВЫЕ СКОБКИ — аркадный HUD-фрейм. Оборачивает карточки/секции.
============================================================================ */
.bracket { position: relative; }
.bracket::before, .bracket::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 2px solid var(--cyan); opacity: .55;
}
.bracket::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.bracket::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
/* вариант со всеми 4 углами через дополнительный span */
.bracket > .corner-tr, .bracket > .corner-bl {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 2px solid var(--cyan); opacity: .55;
}
.bracket > .corner-tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.bracket > .corner-bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }

/* ============================================================================
   КНОПКИ
============================================================================ */
.btn {
  --btn-bg: var(--panel-2);
  --btn-fg: var(--ink);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 600; font-size: 14.5px; letter-spacing: .3px;
  padding: 13px 22px;
  border: 1px solid var(--line-2);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: transform .15s var(--ease), filter .15s, box-shadow .2s, border-color .2s, background .2s;
  /* лёгкая фаска угла — аркадный чип */
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
.btn:hover { transform: translateY(-2px); border-color: var(--cyan); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* основная — магента с фосфорным свечением */
.btn-primary {
  --btn-fg: #fff;
  background: linear-gradient(135deg, var(--mag), var(--violet));
  border-color: transparent;
  box-shadow: 0 12px 30px -12px var(--gl-mag), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 18px 44px -14px var(--gl-mag); border-color: transparent; }

/* призрак — для второстепенных */
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink-dim); }
.btn-ghost:hover { color: var(--ink); border-color: var(--cyan); }

/* опасное */
.btn-danger { --btn-fg: #fff; background: linear-gradient(135deg, var(--red), #c61f2b); border-color: transparent; box-shadow: 0 12px 28px -14px rgba(255,59,72,.5); }
.btn-danger:hover { filter: brightness(1.08); border-color: transparent; }

.btn-block { width: 100%; }
.btn-sm { padding: 9px 14px; font-size: 13px; }
/* SVG-иконки внутри кнопок — единый размер, не сжимаются */
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-sm svg { width: 15px; height: 15px; }

/* ============================================================================
   ПОЛЯ ВВОДА
============================================================================ */
.field-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.field-label {
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-mute);
  display: flex; align-items: center; gap: 8px;
}
.field-label .jp { color: var(--ink-ghost); font-family: var(--font-display); letter-spacing: 2px; }

.input {
  width: 100%;
  background: var(--panel-3);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-body); font-size: 15px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.input::placeholder { color: var(--ink-ghost); }
.input:focus {
  border-color: var(--mag);
  box-shadow: 0 0 0 3px var(--gl-mag);
  background: #1a1530;
}
.input.ok { border-color: var(--lime); }
.input.err { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,59,72,.25); }

textarea.input { resize: vertical; min-height: 80px; }

.field-hint { font-size: 12.5px; color: var(--ink-mute); line-height: 1.5; }
.field-error { font-size: 12.5px; color: var(--red); min-height: 0; display: none; }
.field-group.has-error .field-error { display: block; }

/* поле с иконкой/кнопкой справа (показать пароль и т.п.) */
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 46px; }
.input-affix {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--ink-mute); cursor: pointer;
  padding: 8px; border-radius: 6px; display: grid; place-items: center;
  transition: color .15s, background .15s;
}
.input-affix:hover { color: var(--cyan); background: rgba(46,255,245,.08); }

/* кастомный селект */
.select-wrap { position: relative; }
.select {
  width: 100%; appearance: none; cursor: pointer;
  background: var(--panel-3); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--font-body); font-size: 15px;
  padding: 14px 44px 14px 16px; border-radius: var(--r-sm); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.select:focus { border-color: var(--mag); box-shadow: 0 0 0 3px var(--gl-mag); }
.select-wrap::after {
  content: ""; position: absolute; right: 18px; top: 50%; pointer-events: none;
  width: 8px; height: 8px;
  border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan);
  transform: translateY(-65%) rotate(45deg);
}

/* кастомный чекбокс */
.check { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box {
  width: 22px; height: 22px; flex: none; border-radius: 6px;
  border: 1px solid var(--line-2); background: var(--panel-3);
  display: grid; place-items: center; transition: all .15s;
}
.check .box svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 3; opacity: 0; transition: opacity .15s; }
.check input:checked + .box { background: linear-gradient(135deg, var(--mag), var(--violet)); border-color: transparent; box-shadow: 0 4px 12px -4px var(--gl-mag); }
.check input:checked + .box svg { opacity: 1; }
.check input:focus-visible + .box { outline: 2px solid var(--cyan); outline-offset: 2px; }
.check .check-text { font-size: 14px; color: var(--ink-dim); line-height: 1.4; }

/* ============================================================================
   КАРТОЧКИ / ПАНЕЛИ
============================================================================ */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.panel-pad { padding: 26px 28px; }

/* верхняя «строка развёртки» — фосфорная линия как у CRT поверх карточки */
.panel.scan::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .5;
}

.card-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.card-head .tag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--cyan);
}
.card-head h3 { font-size: 19px; }
.card-bar {
  width: 4px; height: 18px; border-radius: 2px;
  background: linear-gradient(var(--mag), var(--violet));
  box-shadow: 0 0 10px var(--gl-mag); flex: none;
}

/* ============================================================================
   БЕЙДЖИ / ЧИПЫ / СТАТУСЫ
============================================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--ink-dim);
  background: rgba(255,255,255,.02);
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-live { color: var(--lime); border-color: rgba(182,255,60,.35); background: rgba(182,255,60,.07); }
.badge-live .dot { background: var(--lime); box-shadow: 0 0 8px var(--lime); animation: pulse 1.5s ease-in-out infinite; }
.badge-off { color: var(--ink-mute); }
.badge-mag { color: var(--mag-2); border-color: rgba(255,46,136,.35); background: rgba(255,46,136,.07); }
.badge-cyan { color: var(--cyan); border-color: rgba(46,255,245,.3); background: rgba(46,255,245,.06); }
.badge-admin { color: var(--amber); border-color: rgba(255,182,39,.4); background: rgba(255,182,39,.08); }
.badge-banned { color: var(--red); border-color: rgba(255,59,72,.4); background: rgba(255,59,72,.08); }

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

/* ============================================================================
   МОДАЛКИ — полностью кастомные (никаких alert/confirm).
============================================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(5,5,12,.72);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease);
}
.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal {
  position: relative;
  width: 100%; max-width: 460px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), 0 0 60px -20px var(--gl-mag);
  padding: 28px 30px;
  transform: translateY(16px) scale(.97);
  opacity: 0;
  transition: transform .3s var(--ease-out), opacity .25s;
}
.modal-overlay.show .modal { transform: translateY(0) scale(1); opacity: 1; }
.modal::before { /* фосфорная линия сверху */
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--mag), transparent); opacity: .6;
}
.modal-icon {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  margin-bottom: 16px; color: var(--mag-2);
  background: rgba(255,46,136,.1); border: 1px solid rgba(255,46,136,.3);
}
.modal-icon svg { width: 24px; height: 24px; }
.modal-icon.danger { background: rgba(255,59,72,.1); border-color: rgba(255,59,72,.35); color: var(--red); }
.modal-icon.cyan { background: rgba(46,255,245,.08); border-color: rgba(46,255,245,.3); color: var(--cyan); }
.modal h3 { font-size: 20px; margin-bottom: 10px; }
.modal-body { color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; margin-bottom: 22px; }
.modal-body code { font-family: var(--font-mono); color: var(--cyan); background: rgba(46,255,245,.08); padding: 2px 7px; border-radius: 5px; }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; }
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel-3); color: var(--ink-mute); cursor: pointer;
  display: grid; place-items: center; transition: all .15s;
}
.modal-close svg { width: 16px; height: 16px; }
.modal-close:hover { color: var(--red); border-color: var(--red); }

/* ============================================================================
   ТОСТЫ
============================================================================ */
.toast-stack {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 1100; display: flex; flex-direction: column; gap: 10px; align-items: center;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 11px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-2);
  color: var(--ink);
  padding: 13px 20px; border-radius: var(--r);
  font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow);
  transform: translateY(20px); opacity: 0;
  transition: transform .3s var(--ease-out), opacity .25s;
  pointer-events: auto;
  border-left: 3px solid var(--cyan);
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.ok { border-left-color: var(--lime); }
.toast.err { border-left-color: var(--red); }
.toast .ic { display: inline-flex; color: var(--cyan); }
.toast .ic svg { width: 17px; height: 17px; }
.toast.ok .ic { color: var(--lime); }
.toast.err .ic { color: var(--red); }

/* ============================================================================
   УТИЛИТЫ
============================================================================ */
.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-mute); }
.dim { color: var(--ink-dim); }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 12px; }
.col { display: flex; flex-direction: column; }
.gap-sm { gap: 8px; } .gap { gap: 12px; } .gap-lg { gap: 20px; }
.spacer { flex: 1; }
.hide { display: none !important; }
.fade-in { animation: fadeIn .5s var(--ease-out) both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* стек появления — для last-of списков, задаём через style="--i:N" */
.stagger { animation: fadeIn .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }

/* код-блок / ссылка для копирования */
.copy-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-3); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 6px 6px 6px 14px;
}
.copy-box code {
  flex: 1; font-family: var(--font-mono); font-size: 13px; color: var(--cyan);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.copy-box button {
  flex: none; font-family: var(--font-display); font-weight: 600; font-size: 12.5px;
  padding: 8px 14px; border-radius: 7px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--mag), var(--violet)); color: #fff;
  transition: filter .15s;
}
.copy-box button:hover { filter: brightness(1.1); }
.copy-box button.copied { background: var(--lime); color: #07070c; }

/* тонкая прокрутка */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--mag); }

/* выделение текста */
::selection { background: var(--mag); color: #fff; }

/* ============================================================================
   ГЛОБАЛЬНАЯ СТАБИЛЬНОСТЬ LAYOUT (анти-shift)
   --------------------------------------------------------------------------
   ПРАВИЛО ПРОЕКТА: верстаем так, чтобы НИЧЕГО не дёргалось при загрузке данных,
   переключении вкладок и появлении/исчезновении скроллбара. Любой новый блок
   должен следовать этим принципам с самого начала:
     • асинхронный контент (бейджи статуса, счётчики, списки) — фиксируем место
       заранее (min-width / min-height), а не позволяем ширине/высоте скакать;
     • точечные пульсации (opacity-анимации) — только на действительно «живых»
       индикаторах, не на каждом статусе;
     • box-sizing: border-box везде, чтобы padding/border не меняли размеры;
     • картинки/иконки/медиа — с заданными размерами, без «прыжка» при дозагрузке.
============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* Медиа не растягивает контейнер и не схлопывает его до загрузки. */
img, svg, video { max-width: 100%; }
img { height: auto; }

/* Любые «живые точки» статуса не двигают соседей (анимируется только opacity). */
.dot, .sdot { flex: none; }

/* ============================================================================
   ЛОГО KUROMI.SPACE
   - .kuromi-mark  — компактный знак-планета (квадратный бейдж с орбитой/спутником)
   - .kuromi-logo  — полный стек-вордмарк: KUROMI. сверху, SPACE снизу.
   Буква O в KUROMI — планета: круг с вращающимся орбитальным кольцом и спутником.
============================================================================ */

/* — компактный знак (для шапок/сайдбара): планета в квадрате — */
.kuromi-mark {
  position: relative; flex: none;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: linear-gradient(135deg, #16101f, #0c0a14);
  border: 1px solid var(--line-2);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 28px -12px var(--gl-mag), inset 0 1px 0 rgba(255,255,255,.06);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.kuromi-mark svg { width: 100%; height: 100%; display: block; }
/* планета */
.kuromi-mark .planet { fill: url(#kmGrad); }
/* орбита вращается, спутник вместе с ней */
.kuromi-mark .orbit { transform-box: fill-box; transform-origin: center; animation: kmOrbit 7s linear infinite; }
@keyframes kmOrbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kuromi-mark .orbit { animation: none; } }

/* — полный вордмарк: KUROMI. / SPACE — */
.kuromi-logo { display: inline-flex; flex-direction: column; line-height: .9; user-select: none; }
.kuromi-logo .km-top {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--km-size, 26px); letter-spacing: 1px;
}
.kuromi-logo .km-top .km-text {
  background: linear-gradient(105deg, #fff 8%, var(--mag-2) 48%, var(--cyan) 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* планета вместо O — инлайновый знак между букв KUR•MI */
.kuromi-logo .km-o {
  position: relative; display: inline-grid; place-items: center;
  width: 0.92em; height: 0.92em; margin: 0 .01em; vertical-align: middle;
}
.kuromi-logo .km-o svg { width: 100%; height: 100%; overflow: visible; }
.kuromi-logo .km-o .planet { fill: url(#kmGradTxt); }
.kuromi-logo .km-o .orbit { transform-box: fill-box; transform-origin: center; animation: kmOrbit 7s linear infinite; }
.kuromi-logo .km-dot {
  width: .16em; height: .16em; border-radius: 50%; margin-left: .12em;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan); align-self: flex-end; margin-bottom: .14em;
}
.kuromi-logo .km-bot {
  font-family: var(--font-mono); font-weight: 600;
  font-size: calc(var(--km-size, 26px) * .42);
  letter-spacing: calc(var(--km-size, 26px) * .19);
  text-transform: uppercase; color: var(--ink-mute);
  margin-top: .3em; padding-left: .08em;
}

/* размерные модификаторы */
.kuromi-logo.km-lg { --km-size: 64px; }
.kuromi-logo.km-xl { --km-size: clamp(54px, 9vw, 120px); }
.kuromi-logo.km-sm { --km-size: 19px; }

/* строка-бренд в шапке: знак + вордмарк рядом */
.brand-row { display: inline-flex; align-items: center; gap: 13px; }