@font-face {
  font-family: "SB Sans Display";
  src: url("./sb-sans-display-light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "SB Sans Display";
  src: url("./sb-sans-display-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "SB Sans Display";
  src: url("./sb-sans-display-semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "SB Sans Display";
  src: url("./sb-sans-display-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

@font-face {
  font-family: "SB Sans Text";
  src: url("./sb-sans-text-medium.otf") format("opentype");
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
}

/* ============================================================
   Moscow Startup Summit — interactive stand
   Shared design system.
   Брендбук «Школа 21»: глубокая чернота + фиолетовое свечение,
   SB Sans Display для акцентов, SB Sans Text для интерфейса.
   Крупные скругления, мягкий свет.
   ============================================================ */

:root {
  --black: #06060a;
  --white: #ffffff;
  --bg-dark: #0e0e14;
  --surface-dark: #1a1b23;
  --surface-raised: #232430;
  --bg-light: #f2f3f7;
  --surface-light: #fafbfd;
  --muted-dark: #9a9dab;
  --muted-light: #555963;
  --violet-deep: #5f2e8a;
  --violet: #a95be6;
  --violet-bright: #d791f6;
  --lavender: #efe1f8;

  --glow-violet: 0 0 32px rgba(169, 91, 230, 0.35);
  --glow-violet-soft: 0 0 22px rgba(169, 91, 230, 0.22);

  /* Layered card depth: lit top edge + contact shadow + ambient shadow.
     «Дорогой» вид = глубина вместо рамок (visual phase v3.5). */
  --shadow-card-dark: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 44px rgba(0, 0, 0, 0.30);
  --shadow-card-light: 0 1px 2px rgba(38, 31, 45, 0.05), 0 16px 40px rgba(122, 82, 170, 0.13);

  --font-display: "SB Sans Display", sans-serif;
  --font-text: "SB Sans Text", sans-serif;
  --font-mono: "SB Sans Text", sans-serif;

  --brand-logo-size: 64px;
  --brand-logo-size-compact: 48px;

  --radius-card: 28px;
  --radius-small: 16px;
  --radius-pill: 999px;

  /* Global theme tokens. The server-selected theme only changes this layer. */
  color-scheme: dark;
  --theme-bg: var(--bg-dark);
  --theme-text: var(--white);
  --theme-muted: var(--muted-dark);
  --theme-surface: var(--surface-dark);
  --theme-card-surface: rgba(26, 27, 35, 0.84);
  --theme-surface-raised: var(--surface-raised);
  --theme-control-bg: var(--bg-dark);
  --theme-border: rgba(255, 255, 255, 0.08);
  --theme-border-strong: rgba(255, 255, 255, 0.18);
  --theme-sheen: rgba(255, 255, 255, 0.04);
  --theme-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  --theme-shadow-card: var(--shadow-card-dark);
  --theme-accent-text: var(--violet-bright);
  --theme-inverse-surface: rgba(248, 247, 251, 0.92);
  --theme-inverse-text: #111118;
  --theme-inverse-muted: #65616d;
  --theme-art-image: none;
  --theme-art-overlay: linear-gradient(180deg, rgba(14, 14, 20, 0.76) 0%, rgba(14, 14, 20, 0.48) 56%, rgba(14, 14, 20, 0.16) 100%);
  --theme-stars-opacity: 0.24;
  --theme-modal-backdrop: rgba(5, 5, 6, 0.62);
  --theme-grain-opacity: 0.045;
  --theme-vortex-opacity: 0.28;
  --theme-vortex-glow: rgba(190, 91, 244, 0.24);
  --theme-vortex-glint: rgba(222, 160, 255, 0.18);
  --theme-vortex-blend: screen;
  --theme-logo-on-dark-display: block;
  --theme-logo-on-light-display: none;
}

:root[data-theme="dark"] {
  --theme-art-image: url("/summit/assets/school21-particle-flow-dark-v1.png");
}

:root[data-theme="light"] {
  color-scheme: light;
  --theme-bg: var(--bg-light);
  --theme-text: var(--black);
  --theme-muted: var(--muted-light);
  --theme-surface: rgba(255, 255, 255, 0.94);
  --theme-card-surface: rgba(255, 255, 255, 0.82);
  --theme-surface-raised: var(--white);
  --theme-control-bg: rgba(255, 255, 255, 0.82);
  --theme-border: rgba(5, 5, 6, 0.08);
  --theme-border-strong: rgba(5, 5, 6, 0.18);
  --theme-sheen: rgba(255, 255, 255, 0.62);
  --theme-shadow: 0 18px 48px rgba(38, 31, 45, 0.12);
  --theme-shadow-card: var(--shadow-card-light);
  --theme-accent-text: var(--violet-deep);
  --theme-inverse-surface: rgba(17, 17, 24, 0.92);
  --theme-inverse-text: #ffffff;
  --theme-inverse-muted: #b5b1bd;
  --theme-art-image: url("/summit/assets/school21-particle-flow-light-v1.png");
  --theme-art-overlay: linear-gradient(180deg, rgba(242, 243, 247, 0.18) 0%, rgba(242, 243, 247, 0.06) 56%, transparent 100%);
  --theme-stars-opacity: 0.07;
  --theme-modal-backdrop: rgba(35, 30, 42, 0.3);
  --theme-grain-opacity: 0.05;
  --theme-vortex-opacity: 0.19;
  --theme-vortex-glow: rgba(123, 50, 173, 0.17);
  --theme-vortex-glint: rgba(172, 88, 218, 0.12);
  --theme-vortex-blend: multiply;
  --theme-logo-on-dark-display: none;
  --theme-logo-on-light-display: block;
}

/* Клиентская схема v6 (PO 2026-09-11): та же тёмная композиция, но палитра
   мягче — лавандовый акцент вместо насыщенного фиолета и мятная вторая
   краска для «технических» маркеров. Только токены, без layout-правил. */
:root[data-theme="lavender"] {
  --theme-art-image: url("/summit/assets/school21-particle-flow-dark-v1.png");
  --bg-dark: #0d0d1a;
  --surface-dark: #191927;
  --surface-raised: #232336;
  --violet: #a78bfa;
  --violet-bright: #c4b0fd;
  --violet-deep: #6d51b8;
  --glow-violet: 0 0 32px rgba(167, 139, 250, 0.35);
  --glow-violet-soft: 0 0 22px rgba(167, 139, 250, 0.22);
  --theme-bg: #0d0d1a;
  --theme-vortex-glow: rgba(167, 139, 250, 0.22);
  --theme-vortex-glint: rgba(196, 176, 253, 0.16);
  /* Мятная вторая краска (схема v6: 🔧-категории). */
  --theme-accent-secondary: #34d399;
}

/* Мятная краска применяется только в теме lavender: «технические» плитки и
   подписи получают второй цвет бренда, остальные темы не меняются. */
:root[data-theme="lavender"] .icon-tile:not(.icon-tile--accent) { color: var(--theme-accent-secondary); }
:root[data-theme="lavender"] .chip-tag.tech { color: var(--theme-accent-secondary); }

/* ---------- Эмодзи-иконки (миграция 010) ---------- */
.emoji-icon {
  display: inline-block;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  text-rendering: auto;
}

/* ---------- Скрытие вордмарка (переключатель блоков экрана) ---------- */
:root[data-wordmark="hidden"] .wordmark,
:root[data-wordmark="hidden"] .wordmark-dot { display: none; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: var(--font-text);
  background: var(--theme-bg);
  color: var(--theme-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* ---------- Фирменный lockup ---------- */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.school21-logo {
  display: block;
  width: var(--brand-logo-size);
  height: var(--brand-logo-size);
  object-fit: contain;
  flex: 0 0 auto;
}

.theme-logo--on-dark { display: var(--theme-logo-on-dark-display); }

.theme-logo--on-light { display: var(--theme-logo-on-light-display); }

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.05;
  white-space: nowrap;
}

.brand-lockup--stacked {
  flex-direction: column;
  gap: 14px;
  text-align: center;
}

.brand-lockup--stacked .school21-logo {
  width: 76px;
  height: 76px;
}

/* ---------- Маркеры категорий ---------- */
.category-mark {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  color: currentColor;
  flex: 0 0 auto;
}

.category-mark::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1.5px solid currentColor;
}

.category-mark--large {
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  color: var(--violet);
}

.category-mark--large::before {
  inset: 3px;
  border-width: 2px;
}

.mark-insight::before { border-radius: 50%; }

.mark-fix::before { border-radius: 2px; }

.mark-pitch::before {
  border: 0;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.mark-guide::before {
  transform: rotate(45deg);
  border-radius: 1px;
}

@media (max-width: 639px) {
  .brand-lockup { gap: 12px; }

  .school21-logo {
    width: var(--brand-logo-size-compact);
    height: var(--brand-logo-size-compact);
  }

  .brand-lockup--stacked .school21-logo {
    width: 68px;
    height: 68px;
  }
}

/* ---------- Чипы ---------- */
.chips-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip-mono-dark {
  background: var(--theme-surface-raised);
  color: var(--theme-text);
}

.chip-cat {
  background: rgba(169, 91, 230, 0.14);
  color: var(--theme-accent-text);
  border: 1px solid rgba(169, 91, 230, 0.35);
}

.chip-cat-fix {
  background: var(--theme-sheen);
  color: var(--theme-muted);
  border: 1px solid var(--theme-border-strong);
}

.chip-cat-light {
  background: var(--lavender);
  color: var(--violet-deep);
  border: 1px solid rgba(95, 46, 138, 0.18);
}

.chip-cat-fix-light {
  background: #e9ebf0;
  color: var(--muted-light);
  border: 1px solid rgba(5, 5, 6, 0.08);
}

.chip-status-new {
  background: rgba(169, 91, 230, 0.16);
  color: var(--theme-accent-text);
}

.chip-status-published {
  background: var(--theme-sheen);
  color: var(--theme-text);
}

.chip-status-rejected {
  background: var(--theme-sheen);
  color: var(--theme-muted);
  border: 1px solid var(--theme-border);
}

.chip-pin {
  background: var(--violet-deep);
  color: var(--white);
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.15s ease, background 0.15s ease, box-shadow 0.2s ease, color 0.15s ease;
  white-space: nowrap;
}

.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }

.btn-primary {
  background: var(--violet);
  color: var(--white);
}

.btn-primary:hover:not(:disabled) {
  background: var(--violet-bright);
  color: var(--black);
  box-shadow: 0 8px 32px rgba(169, 91, 230, 0.4);
}

.btn-ghost {
  background: transparent;
  color: var(--theme-text);
  border: 1px solid var(--theme-border-strong);
  height: 36px;
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}

.btn-ghost:hover:not(:disabled) { border-color: rgba(215, 145, 246, 0.6); color: var(--violet-bright); }

.btn-small {
  height: 34px;
  padding: 0 14px;
  font-size: 10px;
}

/* ---------- Поля ввода ---------- */
.field-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--theme-muted);
}

.input,
.textarea,
.select {
  width: 100%;
  background: var(--theme-control-bg);
  border: 1px solid var(--theme-border-strong);
  border-radius: var(--radius-small);
  color: var(--theme-text);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.5;
  padding: 12px 16px;
  outline: none;
  transition: border-color 0.15s ease;
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: rgba(169, 91, 230, 0.7);
  box-shadow: 0 0 0 3px rgba(169, 91, 230, 0.12);
}

.input::placeholder,
.textarea::placeholder { color: var(--theme-muted); }

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

.select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23989ba8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

.select option { background: var(--theme-surface-raised); color: var(--theme-text); }

/* ---------- Toast ---------- */
#toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  max-width: 380px;
  padding: 14px 20px;
  border-radius: var(--radius-small);
  background: var(--theme-surface-raised);
  color: var(--theme-text);
  border: 1px solid var(--theme-border-strong);
  font-size: 14px;
  line-height: 1.45;
  z-index: 1000;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

#toast.show { opacity: 1; transform: translateY(0); }

/* ---------- Точки статуса ---------- */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--violet);
  display: inline-block;
}

.status-dot.stale { background: var(--theme-muted); }

.status-dot.pulse { animation: dot-pulse 2.4s ease-in-out infinite; }

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--violet-bright);
  box-shadow: 0 0 10px rgba(215, 145, 246, 0.9);
  display: inline-block;
}

.live-dot.stale { background: var(--theme-muted); box-shadow: none; }

.live-dot.pulse { animation: dot-pulse 2.4s ease-in-out infinite; }

@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---------- Анимации ---------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.rise-in { animation: rise-in 0.5s ease both; }

@keyframes num-shimmer {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}

/* ---------- Живое звёздное небо (canvas) ---------- */
.summit-stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: block;
  opacity: var(--theme-stars-opacity);
  transition: opacity 0.25s ease;
}

/* ---------- Фирменное зерно (брендбук: grain поверх всего) ---------- */
.summit-grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: var(--theme-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 280px 280px;
}

/* ---------- Лёгкие искры (CSS, светлая тема) ---------- */
.sparkle {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  animation: sparkle-float 16s ease-in-out infinite, sparkle-twinkle 6s ease-in-out infinite;
}

.sparkle svg { display: block; }

@keyframes sparkle-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(7px, -16px) rotate(9deg); }
  50% { transform: translate(-5px, -26px) rotate(-7deg); }
  75% { transform: translate(-9px, -9px) rotate(5deg); }
}

@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.3; }
}

/* ---------- Тонкая линия-разделитель ---------- */
.hairline {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(169, 91, 230, 0.5) 18%, rgba(169, 91, 230, 0.12) 55%, transparent 100%);
}

/* ---------- Служебный моно-текст ---------- */
.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

/* ---------- Простое модальное окно ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--theme-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  padding: 24px;
}

.modal-backdrop[hidden] { display: none; }

.modal {
  width: 100%;
  max-width: 680px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-card);
  padding: 32px;
}

/* ---------- Доступность: меньше движения ---------- */
@media (prefers-reduced-motion: reduce) {
  .sparkle,
  .rise-in,
  .live-dot.pulse,
  .status-dot.pulse,
  .counter-num,
  .wordmark-dot,
  .label-dot {
    animation: none !important;
  }
}