@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&display=swap');:root {
  --bg: #1a1d24;
  --surface: #242730;
  --surface-2: #2d3240;
  --card: #242730;
  --card-border: rgba(255, 255, 255, 0.12);
  --line: rgba(255, 255, 255, 0.08);
  --text: #e6e7eb;
  --text-muted: #a9acb8;
  --primary: #7c5cff; /* фиолетовый как архетипический/мистический акцент */
  --primary-600: #6a49f0;
  --accent: #19e0ff; /* сине-циан для науки/исследований */
  --success: #3ddc97;
  --warning: #ffcc66;
  --danger: #ff6b6b;
  --navbar-edge: rgba(255, 255, 255, 0.08);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 28px rgba(0, 0, 0, 0.28);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.25), 0 14px 34px rgba(0, 0, 0, 0.35);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 6px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.45);

  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

html, body, #root { 
  height: 100%; 
  min-height: 100%;
}

#root {
  background: transparent;
}

body {
  margin: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  min-height: 100vh;
}

.container { width: min(1440px, 96%); margin: 0 auto; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #f8fafc;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
.button:active { transform: translateY(1px); }
.button.secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--navbar-edge);
  text-shadow: none;
}
.button.danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.button.danger:active { transform: translateY(1px); }

.card {
  background: var(--card, var(--surface));
  border: 1px solid var(--card-border, var(--navbar-edge));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card, var(--shadow-sm));
  backdrop-filter: none;
  padding: 12px; /* ensure inner spacing on small screens */
  min-height: 64px; /* prevent collapsing */
  overflow-wrap: anywhere; /* wrap long words */
}

.kicker { color: var(--accent); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; font-size: 12px; }
.h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; font-weight: 800; }
.h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.15; font-weight: 800; }
.p { font-size: 16px; color: var(--text-muted); }
.small { font-size: 13px; color: var(--text-muted); }

.card-hover-shimmer {
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}

.card-hover-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(124, 92, 255, 0.2),
    rgba(25, 224, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
  pointer-events: none;
  z-index: 1;
}

.card-hover-shimmer:hover::before {
  left: 100%;
}

.card-hover-shimmer:hover {
  border-color: rgba(124, 92, 255, 0.4);
  box-shadow: 0 4px 16px rgba(124, 92, 255, 0.2), 0 0 24px rgba(25, 224, 255, 0.15);
  transform: translateY(-2px);
}

.card-hover-shimmer > * {
  position: relative;
  z-index: 2;
}

/* ===== Responsive tweaks ===== */

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  .container {
    width: 100%;
    padding-inline: 16px;
  }

  .button {
    padding: 10px 14px;
    font-size: 14px;
  }

  .card {
    padding: 12px !important;
  }

  .h1 {
    font-size: clamp(28px, 8vw, 40px);
  }

  .h2 {
    font-size: clamp(22px, 6vw, 32px);
  }
}
/* Тема, фон и масштаб текста (см. AppearanceContext, GlobalAppearance) */

html {
  font-size: calc(100% * var(--appearance-text-mul, 1));
  background: radial-gradient(1200px 800px at 80% -10%, rgba(124, 92, 255, 0.12), transparent),
    radial-gradient(1000px 600px at -10% 20%, rgba(25, 224, 255, 0.1), transparent),
    var(--bg);
  background-attachment: fixed;
  min-height: 100%;
}

html[data-theme='light'] {
  color-scheme: light;
  --bg: #f5f3fb;
  --surface: #ffffff;
  --surface-2: #f3f1fa;
  --paper: #f5f3fb;
  --paper-soft: #ece9f8;
  --card: #ffffff;
  --card-border: #d8d2ee;
  --line: #e2dff0;
  --ink: #211e2b;
  --ink-soft: #57536e;
  --ink-muted: #8a8496;
  --brand: #6c5bd4;
  --brand-deep: #5546b8;
  --brand-soft: #efebfc;
  --peach: #f2a65a;
  --sage: #3e8a6e;
  --shadow-mock: 0 24px 60px rgba(38, 33, 66, 0.12);
  --shadow-card: 0 1px 2px rgba(38, 33, 66, 0.05), 0 10px 28px rgba(38, 33, 66, 0.1);
  --shadow-card-hover: 0 2px 4px rgba(38, 33, 66, 0.06), 0 14px 34px rgba(38, 33, 66, 0.13);
  /* Тёмный текст для читаемости */
  --text: #211e2b;
  --text-muted: #57536e;
  --primary: #6c5bd4;
  --primary-600: #5546b8;
  --accent: #3e8a6e;
  --navbar-edge: #e2dff0;
  --shadow-sm: 0 1px 2px rgba(38, 33, 66, 0.05);
  --shadow-md: 0 10px 28px rgba(38, 33, 66, 0.1);
  --shadow-lg: 0 14px 34px rgba(38, 33, 66, 0.13);

  background: var(--bg);
  background-attachment: fixed;
}

html[data-theme='light'] body,
html[data-theme='light'] #root {
  color: var(--text);
}

html[data-theme='light'] .button.secondary {
  border-color: var(--navbar-edge);
}

html[data-theme='light'] .small,
html[data-theme='light'] .p {
  color: var(--text-muted);
}

/* Обычные ссылки — не трогаем <a class="button"> (React Router Link), иначе текст сливается с градиентом */
html[data-theme='light'] a:not(.button) {
  color: var(--primary);
}

html[data-theme='light'] a:not(.button):hover {
  color: var(--primary-600);
}

html[data-theme='light'] a.button {
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
}

html[data-theme='light'] a.button:hover {
  color: #ffffff;
}

html[data-theme='light'] a.button.secondary {
  color: var(--text);
  text-shadow: none;
}

html[data-theme='light'] a.button.secondary:hover {
  color: var(--text);
}

html[data-theme='light'] a.button.danger {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

html[data-theme='light'] a.button.danger:hover {
  color: #ffffff;
}

/* Светлая тема: карточки §4.1 — --card-border + слоёная тень */
html[data-theme='light'] .card,
html[data-theme='light'][data-light-card='soft'] .card,
html[data-theme='light'][data-light-card='crisp'] .card {
  background: var(--card, #ffffff);
  border: 1px solid var(--card-border, #d8d2ee);
  box-shadow: var(--shadow-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-theme='light'] a.card:hover,
html[data-theme='light'] button.card:hover,
html[data-theme='light'] .card.card--interactive:hover,
html[data-theme='light'] .card.is-interactive:hover {
  box-shadow: var(--shadow-card-hover);
}

html[data-theme='light'] .card-hover-shimmer::before {
  display: none;
}

html[data-theme='light'] .card-hover-shimmer:hover {
  border-color: var(--card-border, #d8d2ee);
  box-shadow: var(--shadow-card-hover);
  transform: none;
}
:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: dark light;
  color: var(--text, rgba(255, 255, 255, 0.87));
  /* background-color удален - используется из tokens.css */

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* , *::before, *::after { box-sizing: border-box; }

html, body, #root { 
  height: 100%; 
  width: 100%; 
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  display: block;
  overflow-x: hidden;
  background: transparent;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}
.msg {
  --msg-radius: 16px;
  color: var(--ink, var(--text));
  font-family: inherit;
}

.msg--full {
  display: flex;
  height: 100%;
  min-height: 0;
  background: var(--bg, var(--surface));
}

.msg--drawer {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.msg__shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--card, var(--surface));
}

.msg--full .msg__shell {
  grid-template-columns: minmax(240px, 320px) 1fr;
  border: 1px solid var(--card-border, var(--line));
  box-shadow: var(--shadow-card, var(--shadow-md));
  border-radius: 16px;
  overflow: hidden;
  margin: 12px;
  max-width: 1200px;
  width: calc(100% - 24px);
}

.msg__sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--line, var(--navbar-edge));
  background: var(--card, var(--surface));
}

.msg__sidebar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line, var(--navbar-edge));
  background: var(--card, var(--surface));
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 5;
}

.msg__sidebar-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  flex: 1;
}

.msg__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--brand, #6c5bd4);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
  opacity: 1;
}

.msg__icon-btn svg {
  display: block;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  flex-shrink: 0;
}

.msg__icon-btn:hover {
  background: var(--brand-deep, #5546b8);
  color: #fff;
}

.msg__icon-btn--ghost {
  background: var(--surface-2, #f3f1fa);
  border-color: var(--line, #e2dff0);
  color: var(--ink, #211e2b);
}

.msg__icon-btn--ghost:hover {
  background: var(--brand-soft, #efebfc);
  border-color: var(--card-border, #d8d2ee);
  color: var(--ink, #211e2b);
}

.msg__search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line, var(--navbar-edge));
}

.msg__search input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line, var(--navbar-edge));
  background: var(--surface-2, #f3f1fa);
  color: var(--ink, var(--text));
  font-size: 14px;
  outline: none;
}

.msg__search input:focus {
  border-color: var(--brand, var(--primary));
}

.msg__list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  min-height: 0;
}

.msg__row {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  margin-bottom: 2px;
}

.msg__row:hover {
  background: var(--brand-soft, rgba(108, 91, 212, 0.08));
}

.msg__row.is-active {
  background: var(--brand-soft, rgba(108, 91, 212, 0.14));
}

.msg__avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--brand-soft, #efebfc);
  color: var(--brand, #6c5bd4);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
}

.msg__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.msg__online {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--sage, #3e8a6e);
  border: 2px solid var(--card, #fff);
}

.msg__row-meta {
  min-width: 0;
  flex: 1;
}

.msg__row-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.msg__row-name {
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.msg__row-time {
  font-size: 12px;
  color: var(--ink-muted, var(--text-muted));
  flex-shrink: 0;
}

.msg__row-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.msg__row-preview {
  flex: 1;
  font-size: 13px;
  color: var(--ink-muted, var(--text-muted));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg__badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--peach, #f2a65a);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.msg__empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--ink-muted, var(--text-muted));
  font-size: 14px;
}

.msg__thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  background: var(--bg, var(--surface));
}

.msg__chrome {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line, var(--navbar-edge));
  background: var(--card, #ffffff);
  color: var(--ink, var(--text));
  z-index: 6;
  box-shadow: 0 1px 0 var(--line, rgba(0, 0, 0, 0.04));
}

.msg__back-chats {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: none;
  background: transparent;
  color: var(--brand, var(--primary));
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 8px 6px 2px;
  border-radius: 8px;
  line-height: 1;
  flex-shrink: 0;
}

.msg__back-chats:hover {
  background: var(--brand-soft, rgba(108, 91, 212, 0.12));
}

.msg__chrome .msg__thread-name {
  flex: 1;
  min-width: 0;
}

.msg__thread-name {
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg__online-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--sage, #3e8a6e);
  flex-shrink: 0;
}

.msg__messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

.msg__bubble-row {
  display: flex;
}

.msg__bubble-row.is-mine {
  justify-content: flex-end;
}

.msg__bubble-row.is-theirs {
  justify-content: flex-start;
}

.msg__bubble {
  max-width: min(78%, 420px);
  padding: 10px 12px 6px;
  border-radius: var(--msg-radius);
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.msg__bubble.is-mine {
  background: var(--brand, #6c5bd4);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.msg__bubble.is-theirs {
  background: var(--surface-2, #f3f1fa);
  color: var(--ink, var(--text));
  border: 1px solid var(--line, var(--navbar-edge));
  border-bottom-left-radius: 4px;
}

.msg__bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1;
}

.msg__bubble.is-mine .msg__bubble-meta {
  color: rgba(255, 255, 255, 0.82);
}

.msg__bubble.is-theirs .msg__bubble-meta {
  color: var(--ink-muted, var(--text-muted));
}

.msg__ticks {
  display: inline-flex;
  align-items: center;
  color: inherit;
  opacity: 0.9;
}

.msg__ticks.is-read {
  color: var(--sage, #3e8a6e);
  opacity: 1;
}

.msg__bubble.is-mine .msg__ticks.is-read {
  color: var(--sage, #3e8a6e);
}

.msg__composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px;
  border-top: 1px solid var(--line, var(--navbar-edge));
  background: var(--card, var(--surface));
  flex-shrink: 0;
}

.msg__composer textarea {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  resize: none;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line, var(--navbar-edge));
  background: var(--surface-2, #f3f1fa);
  color: var(--ink, var(--text));
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.msg__composer textarea:focus {
  border-color: var(--brand, var(--primary));
}

.msg__send {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: var(--brand, #6c5bd4);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.msg__send-icon {
  display: block;
  /* Lucide Send (paper plane) is optically left/low — center in the square */
  transform: translate(1px, 0.5px);
}

.msg__send:disabled {
  opacity: 0.45;
  cursor: default;
}

.msg__placeholder {
  flex: 1;
  display: grid;
  place-items: center;
  color: var(--ink-muted, var(--text-muted));
  padding: 24px;
  text-align: center;
}

.msg__modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(33, 30, 43, 0.4);
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 16px;
}

.msg__modal {
  width: min(420px, 100%);
  max-height: min(70vh, 560px);
  background: var(--card, #fff);
  border: 1px solid var(--card-border, var(--line));
  border-radius: 16px;
  box-shadow: var(--shadow-mock, var(--shadow-lg));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.msg__modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}

.msg__modal-body {
  overflow-y: auto;
  padding: 8px;
}

/* Bubble launcher */
:root {
  --bubble-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* Sticky save bars lift the launcher above «Сохранить изменения» */
html:has(.psy-profile-savebar),
html:has(.profile-savebar),
html:has([data-sticky-save]) {
  --bubble-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

/* Work area status bar — выше «Сохранено» и кнопки инфо */
html:has(.wa-statusbar) {
  --bubble-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

.msg-bubble {
  position: fixed;
  right: 20px;
  bottom: var(--bubble-bottom, 20px);
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: var(--brand, #6c5bd4);
  color: #fff;
  box-shadow: var(--shadow-mock, 0 12px 28px rgba(38, 33, 66, 0.22));
  cursor: pointer;
  /* Above sticky navbar (10000), below rare full-screen locks */
  z-index: 11050;
  display: grid;
  place-items: center;
  line-height: 0;
}

.msg-bubble svg {
  display: block;
  stroke: currentColor;
}

.msg-bubble__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--peach, #f2a65a);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg, #fff);
}

/* Drawer */
.msg-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(33, 30, 43, 0.28);
  z-index: 11040;
}

.msg-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(460px, 100vw);
  height: 100%;
  background: var(--card, #fff);
  border-left: 1px solid var(--line, var(--navbar-edge));
  box-shadow: var(--shadow-mock, 0 24px 60px rgba(38, 33, 66, 0.12));
  z-index: 11050;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.msg-drawer > .msg {
  flex: 1;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.msg-drawer .msg__shell {
  flex: 1;
  min-height: 0;
  height: 100%;
}

.msg-drawer__resize {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: ew-resize;
  z-index: 3;
  touch-action: none;
}

.msg-drawer__resize:hover,
.msg-drawer__resize:active {
  background: color-mix(in srgb, var(--brand, #6c5bd4) 28%, transparent);
}

.msg-drawer__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

@media (max-width: 768px) {
  .msg--full .msg__shell {
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr;
  }

  .msg--full .msg__sidebar.is-hidden-mobile,
  .msg--full .msg__thread.is-hidden-mobile {
    display: none;
  }

  .msg-drawer {
    width: 100vw !important;
  }

  .msg-drawer__resize {
    display: none;
  }

  .msg-bubble {
    right: 16px;
    bottom: var(--bubble-bottom, 16px);
  }
}
/* Публичная авторизация — всегда светлая mist-палитра (§23) */

.auth-page {
  --paper: #f5f3fb;
  --paper-soft: #ece9f8;
  --card: #ffffff;
  --ink: #211e2b;
  --ink-soft: #57536e;
  --ink-muted: #8a8496;
  --line: #e2dff0;
  --brand: #6c5bd4;
  --brand-deep: #5546b8;
  --brand-soft: #efebfc;
  --sage: #3e8a6e;
  --sage-soft: #e3f1ea;
  --danger: #b42318;
  --danger-soft: #fef3f2;
  --card-border: #d8d2ee;
  --shadow-card: 0 1px 2px rgba(38, 33, 66, 0.05), 0 10px 28px rgba(38, 33, 66, 0.1);
  --radius-card: 20px;
  --radius-input: 12px;
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-ui: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;

  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  box-sizing: border-box;
}

.auth-page *,
.auth-page *::before,
.auth-page *::after {
  box-sizing: border-box;
}

.auth-page__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.auth-page__top-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.auth-page__top-link span {
  color: var(--brand);
  font-weight: 700;
}

.auth-page__top-link:hover span {
  color: var(--brand-deep);
}

.auth-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
  gap: 24px;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
  min-height: calc(100vh - 64px);
  padding: 20px clamp(16px, 3vw, 32px) 32px;
}

.auth-page__layout--centered {
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  max-width: 680px;
  padding-top: 24px;
  padding-bottom: 40px;
}

.auth-page--centered .auth-page__main {
  width: 100%;
  justify-content: center;
}

.auth-page__brand {
  display: flex;
  align-items: stretch;
}

.auth-page__brand-inner {
  position: sticky;
  top: 16px;
  align-self: flex-start;
  width: 100%;
  padding: 22px 20px;
  border-radius: var(--radius-card);
  background: var(--paper-soft);
  border: 1px solid var(--line);
}

.auth-page__brand-title {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.auth-page__brand-lead {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.auth-page__bullets {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.auth-page__bullets li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.auth-page__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--brand);
}

.auth-page__trust {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-muted);
}

.auth-page__main {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

.auth-page__card {
  width: 100%;
  max-width: 520px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius-card);
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card);
}

/* Компактная регистрация: «квадрат» без скролла на ~1366×768 */
.auth-page--compact .auth-page__top {
  padding: 10px clamp(16px, 3vw, 28px);
}

.auth-page--compact .auth-page__layout {
  gap: 20px;
  padding: 16px clamp(16px, 3vw, 28px) 20px;
  min-height: calc(100vh - 56px);
}

.auth-page--compact .auth-page__card {
  max-width: 640px;
  width: 100%;
  padding: 16px 18px 14px;
  border-radius: 16px;
}

.auth-page--centered.auth-page--compact .auth-page__layout {
  max-width: 640px;
}

.auth-page--compact .auth-page__h1 {
  font-size: clamp(24px, 2.2vw, 28px);
  margin: 0 0 2px;
}

.auth-page--compact .auth-page__error {
  margin-top: 10px;
  margin-bottom: 0;
  padding: 8px 10px;
  font-size: 13px;
}

.auth-page--compact .auth-page__section {
  margin-top: 12px;
}

.auth-page--compact .auth-page__section-title {
  margin: 0 0 8px;
  font-size: 12px;
}

.auth-page--compact .auth-page__field {
  margin-bottom: 10px;
}

.auth-page--compact .auth-page__label {
  margin-bottom: 4px;
  font-size: 12px;
}

.auth-page--compact .auth-page__hint {
  margin-top: 4px;
  font-size: 11px;
}

.auth-page--compact .auth-page__input,
.auth-page--compact .auth-page__input-wrap input {
  padding: 9px 12px;
  font-size: 14px;
}

.auth-page--compact .auth-page__eye {
  width: 32px;
  height: 32px;
}

.auth-page--compact .auth-page__role-seg-btn {
  min-height: 38px;
  padding: 7px 6px;
}

.auth-page--compact .auth-page__role-seg-hint {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
}

.auth-page--compact .auth-page__row-2 {
  gap: 10px;
}

.auth-page--compact .auth-page__consent {
  gap: 8px;
}

.auth-page--compact .auth-page__consent label {
  font-size: 13px;
  line-height: 1.45;
  gap: 8px;
}

.auth-page--compact .auth-page__cta {
  margin-top: 12px;
  padding: 11px 16px;
  font-size: 15px;
}

.auth-page--compact .auth-page__footer-link {
  margin-top: 10px;
  font-size: 13px;
}

.auth-page--compact .auth-page__verify-lead {
  margin: 8px 0 0;
  font-size: 14px;
}

/* 1366×768 и ниже по высоте: доп. уплотнение, чтобы CTA было в первом экране */
@media (min-width: 901px) and (max-height: 820px) {
  .auth-page--compact .auth-page__top {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .auth-page--compact .auth-page__layout {
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 16px;
    min-height: calc(100vh - 48px);
  }

  .auth-page--compact .auth-page__card {
    padding: 14px 16px 12px;
  }

  .auth-page--compact .auth-page__section {
    margin-top: 10px;
  }

  .auth-page--compact .auth-page__consent label {
    font-size: 12.5px;
    line-height: 1.4;
  }

  .auth-page--compact .auth-page__hint {
    display: none;
  }

  .auth-page--compact .auth-page__cta {
    margin-top: 10px;
    padding: 10px 14px;
  }

  .auth-page--compact .auth-page__footer-link {
    margin-top: 8px;
  }
}

.auth-page__h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}

.auth-page__sub {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.auth-page__error {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  color: var(--danger);
  font-size: 14px;
  line-height: 1.45;
}

.auth-page__section {
  margin-top: 22px;
}

.auth-page__section-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.auth-page__field {
  margin-bottom: 12px;
}

.auth-page__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.auth-page__hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.4;
}

.auth-page__input,
.auth-page__input-wrap input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-input);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.15s ease;
}

.auth-page__input:focus,
.auth-page__input-wrap input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.auth-page__input-wrap {
  position: relative;
}

.auth-page__input-wrap input {
  padding-right: 48px;
}

.auth-page__eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0;
}

.auth-page__eye:hover {
  color: var(--ink);
  background: var(--paper-soft);
}

/* Autofill → белый */
.auth-page input:-webkit-autofill,
.auth-page input:-webkit-autofill:hover,
.auth-page input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 99999s ease-out;
}

.auth-page__roles {
  display: grid;
  gap: 10px;
}

/* Горизонтальный сегмент ролей (регистрация) */
.auth-page__role-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 3px;
  border-radius: 12px;
  background: var(--paper-soft);
  border: 1px solid var(--line);
}

.auth-page__role-seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 6px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
}

.auth-page__role-seg-btn svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.auth-page__role-seg-btn:hover {
  color: var(--ink);
}

.auth-page__role-seg-btn.is-selected {
  background: var(--brand-soft);
  color: var(--brand-deep);
  box-shadow: none;
  outline: 1.5px solid var(--brand);
  outline-offset: -1px;
}

.auth-page__role-seg-hint {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
  min-height: 1.4em;
}

.auth-page__row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.auth-page__row-2 .auth-page__field {
  margin-bottom: 0;
}

.auth-page__role {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.auth-page__role:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
}

.auth-page__role.is-selected {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.auth-page__role-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--paper-soft);
  color: var(--brand);
  flex-shrink: 0;
}

.auth-page__role.is-selected .auth-page__role-icon {
  background: #fff;
}

.auth-page__role-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.auth-page__role-desc {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
  font-weight: 400;
}

.auth-page__consent {
  display: grid;
  gap: 12px;
}

.auth-page__consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.auth-page__consent input[type='checkbox'] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}

.auth-page__consent a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

.auth-page__consent a:hover {
  color: var(--brand-deep);
  text-decoration: underline;
}

.auth-page__cta {
  display: block;
  width: 100%;
  margin-top: 22px;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

.auth-page__cta:hover:not(:disabled) {
  background: var(--brand-deep);
  color: #fff;
}

.auth-page__cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.auth-page__cta--secondary {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  margin-top: 10px;
}

.auth-page__cta--secondary:hover:not(:disabled) {
  background: var(--paper-soft);
  color: var(--ink);
}

.auth-page__footer-link {
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
}

.auth-page__footer-link a {
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
}

.auth-page__footer-link a:hover {
  color: var(--brand-deep);
}

.auth-page__text-btn {
  display: inline;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
  text-decoration: none;
}

.auth-page__text-btn:hover:not(:disabled) {
  color: var(--brand-deep);
  text-decoration: underline;
}

.auth-page__text-btn:disabled {
  color: var(--ink-muted);
  cursor: not-allowed;
  text-decoration: none;
}

.auth-page__link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  justify-content: center;
  margin-top: 14px;
}

.auth-page__verify-lead {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.auth-page__verify-lead strong {
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 900px) {
  .auth-page__layout {
    grid-template-columns: 1fr;
    align-items: start;
    padding-top: 16px;
    gap: 16px;
  }

  .auth-page__layout--centered {
    max-width: none;
    align-items: start;
  }

  /* Mobile: форма первая */
  .auth-page:not(.auth-page--centered) .auth-page__brand {
    order: 2;
  }

  .auth-page:not(.auth-page--centered) .auth-page__main {
    order: 1;
  }

  .auth-page__brand {
    margin-bottom: 0;
  }

  .auth-page__brand-inner {
    position: static;
  }

  .auth-page__main {
    justify-content: stretch;
  }

  .auth-page__card,
  .auth-page--compact .auth-page__card {
    max-width: none;
  }

  .auth-page__row-2 {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .auth-page__row-2 .auth-page__field {
    margin-bottom: 10px;
  }

  .auth-page__role-seg {
    gap: 4px;
    padding: 4px;
  }

  .auth-page__role-seg-btn {
    flex-direction: column;
    gap: 6px;
    min-height: 56px;
    padding: 10px 6px;
    font-size: 11px;
    line-height: 1.2;
  }

  .auth-page__role-seg-btn svg {
    width: 18px;
    height: 18px;
  }

  .auth-page__role-seg-btn span.auth-page__role-seg-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  .auth-page__top-link {
    font-size: 13px;
  }

  .auth-page__brand-inner {
    padding: 16px 14px;
  }

  .auth-page__role-seg-btn {
    gap: 8px;
    min-height: 60px;
    padding: 12px 4px;
    font-size: 12px;
  }
}
.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in .2s}.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}
/**
 * Тур подстраивается под тему через переменные из tokens.css и appearance.css
 * (на html[data-theme='light'] переопределены --surface, --text и т.д.).
 */

.driver-overlay {
  z-index: 100100 !important;
}

.driver-popover.psychologist-platform-tour-popover {
  z-index: 100300 !important;
  position: fixed !important;
  box-sizing: border-box !important;
  font-family: var(--font-sans) !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  min-width: min(320px, calc(100vw - 28px)) !important;
  max-width: min(460px, calc(100vw - 24px)) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text) !important;
  backdrop-filter: blur(14px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
}

/* База: только переменные темы (светлая / тёмная из GlobalAppearance) */
.driver-popover.psychologist-platform-tour-popover {
  background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%) !important;
  border: 1px solid var(--navbar-edge) !important;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(124, 92, 255, 0.14) !important;
}

html[data-theme='light'] .driver-popover.psychologist-platform-tour-popover {
  background: linear-gradient(165deg, #ffffff 0%, #eef0fb 52%, #f8f7ff 100%) !important;
  border: 1px solid rgba(99, 71, 216, 0.22) !important;
  box-shadow:
    0 10px 36px rgba(79, 54, 216, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    var(--shadow-lg) !important;
}

html[data-theme='dark'] .driver-popover.psychologist-platform-tour-popover {
  background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%) !important;
  border: 1px solid rgba(124, 92, 255, 0.32) !important;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(25, 224, 255, 0.08),
    0 18px 48px rgba(0, 0, 0, 0.5) !important;
}

.driver-popover.psychologist-platform-tour-popover .driver-popover-title {
  font-family: var(--font-sans) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.02em !important;
  color: var(--text) !important;
  padding-right: 28px !important;
}

.driver-popover.psychologist-platform-tour-popover .driver-popover-description {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-weight: 450 !important;
  color: var(--text-muted) !important;
  margin-top: 8px !important;
  max-height: min(42vh, 280px) !important;
  overflow-y: auto !important;
}

.driver-popover.psychologist-platform-tour-popover .driver-popover-progress-text {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
}

.driver-popover.psychologist-platform-tour-popover .driver-popover-footer {
  margin-top: 16px !important;
  gap: 10px !important;
}

.driver-popover.psychologist-platform-tour-popover .driver-popover-footer button {
  all: unset !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--navbar-edge) !important;
  background: var(--surface-2) !important;
  color: var(--text) !important;
  text-shadow: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease !important;
}

html[data-theme='light']
  .driver-popover.psychologist-platform-tour-popover
  .driver-popover-footer
  button.driver-popover-prev-btn:hover,
html[data-theme='light']
  .driver-popover.psychologist-platform-tour-popover
  .driver-popover-close-btn:hover {
  background: #dbe4f5 !important;
  border-color: rgba(79, 54, 216, 0.35) !important;
}

html[data-theme='dark']
  .driver-popover.psychologist-platform-tour-popover
  .driver-popover-footer
  button.driver-popover-prev-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(124, 92, 255, 0.45) !important;
}

.driver-popover.psychologist-platform-tour-popover .driver-popover-next-btn {
  background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
  border: none !important;
  color: #f8fafc !important;
  box-shadow: var(--shadow-sm) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22) !important;
}

.driver-popover.psychologist-platform-tour-popover .driver-popover-next-btn:hover {
  filter: brightness(1.06) !important;
}

.driver-popover.psychologist-platform-tour-popover .driver-popover-close-btn {
  color: var(--text-muted) !important;
  opacity: 0.9 !important;
}

.driver-popover.psychologist-platform-tour-popover .driver-popover-close-btn:hover {
  color: var(--text) !important;
  opacity: 1 !important;
}

.driver-popover.psychologist-platform-tour-popover .driver-popover-arrow {
  border-color: var(--surface) !important;
}

html[data-theme='light'] .driver-popover.psychologist-platform-tour-popover .driver-popover-arrow {
  border-color: #ffffff !important;
}

html[data-theme='dark'] .driver-popover.psychologist-platform-tour-popover .driver-popover-arrow {
  border-color: var(--surface) !important;
}

.psychologist-tour-help-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--navbar-edge);
  background: var(--surface-2);
  color: var(--primary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease, background 0.15s ease;
}

.psychologist-tour-help-btn:hover {
  border-color: rgba(124, 92, 255, 0.45);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

html[data-theme='light'] .psychologist-tour-help-btn:hover {
  border-color: rgba(79, 54, 216, 0.35);
  background: #eef2fb;
}

.psychologist-tour-help-btn:active {
  transform: translateY(0);
}
/* Список клиентов — §17 DESIGN_BRIEF (mist tokens) */
.clients-page {
  --paper: #f5f3fb;
  --paper-soft: #ece9f8;
  --card: #ffffff;
  --card-border: #d8d2ee;
  --line: #e2dff0;
  --ink: #1f1a33;
  --ink-soft: #5c5678;
  --ink-muted: #8a8496;
  --brand: #6c5bd4;
  --brand-deep: #5546b8;
  --brand-soft: #efebfc;
  --surface-2: #f3f1fa;
  --shadow-card: 0 1px 2px rgba(38, 33, 66, 0.05), 0 10px 28px rgba(38, 33, 66, 0.1);
  --shadow-card-hover: 0 2px 4px rgba(38, 33, 66, 0.06), 0 14px 34px rgba(38, 33, 66, 0.13);
  --danger: #d4574e;
  --danger-soft: #fbeae8;
  --warning: #b97f2e;
  --warning-soft: #fbefdd;
  --sage: #3a9b7a;
  --sage-soft: #e6f4ef;
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-ui: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
}

.clients-page__main {
  flex: 1;
  padding: 32px clamp(16px, 5vw, 48px);
  max-width: 100%;
  overflow-x: hidden;
}

.clients-page__main--mobile {
  padding: 16px 16px 20px;
}

.clients-page__main--narrow {
  padding: 12px 12px 16px;
}

.clients-page__header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.clients-page__header--mobile {
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.clients-page__h1 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.clients-page__search {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  max-width: 600px;
}

.clients-page__search-input {
  width: 100%;
  padding: 10px 12px 10px 34px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
}

.clients-page__search-input:focus {
  outline: 2px solid var(--brand-soft);
  border-color: var(--brand);
}

.clients-page__header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.clients-page__header-actions--mobile {
  justify-content: stretch;
}

.clients-page__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.clients-page__btn:hover:not(:disabled) {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
}

.clients-page__btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.clients-page__btn--secondary {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}

.clients-page__btn--secondary:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--ink-muted);
  color: var(--ink);
}

.clients-page .button {
  background: var(--brand);
  border: 1px solid var(--brand);
  color: #fff;
  background-image: none;
}

.clients-page .button:hover:not(:disabled) {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
}

.clients-page .button.secondary {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}

.clients-page .button.secondary:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--ink-muted);
}

.clients-page__views {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.clients-page__views-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.clients-page__count {
  font-size: 13px;
  color: var(--ink-muted);
}

.clients-page-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.clients-page-grid--mobile {
  grid-template-columns: 1fr;
  gap: 12px;
}

.client-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: var(--card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow 0.18s ease;
}

.client-card:hover {
  box-shadow: var(--shadow-card-hover);
}

.client-card--archived {
  opacity: 0.96;
  border-style: dashed;
}

.client-card__body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
  min-height: 0;
}

.client-card__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}

.client-card__avatar-wrap {
  flex-shrink: 0;
}

.client-card__avatar,
.client-card__avatar-fallback {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--line);
}

.client-card__avatar-fallback {
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 20px;
  color: var(--brand);
  background: var(--brand-soft);
}

.client-card__identity {
  min-width: 0;
  padding-top: 2px;
}

.client-card__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.client-card__name {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.client-card__subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-soft);
}

.client-card__badge {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.client-card__badge--registered {
  background: var(--sage-soft);
  color: var(--sage);
}

.client-card__badge--pending {
  background: var(--warning-soft);
  color: var(--warning);
}

.client-card__badge--expired {
  background: var(--surface-2);
  color: var(--ink-muted);
}

.client-card__badge--archived {
  background: var(--surface-2);
  color: var(--ink-muted);
}

.client-card__meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.client-card__meta-sep {
  opacity: 0.45;
}

.client-card__contact {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
}

.client-card__contact-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.client-card__contact-icon {
  flex-shrink: 0;
  color: var(--ink-muted);
}

.client-card__contact-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-card__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.client-card__tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
}

.client-card__reg-box {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.client-card__reg-title {
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 8px;
  color: var(--ink-soft);
}

.client-card__reg-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.client-card__reg-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 11px;
  font-family: var(--font-ui);
}

.client-card__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.client-card__icon-btn:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--brand);
  color: var(--brand);
}

.client-card__icon-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.client-card__icon-btn--spin svg {
  animation: client-card-spin 0.8s linear infinite;
}

@keyframes client-card-spin {
  to { transform: rotate(360deg); }
}

.client-card__reg-expiry {
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-muted);
}

.client-card__archive-date {
  font-size: 12px;
  color: var(--ink-muted);
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px dashed var(--line);
}

.client-card__crm {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.client-card__crm-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  font-size: 12px;
}

.client-card__crm-label {
  color: var(--ink-muted);
  flex-shrink: 0;
}

.client-card__crm-value {
  text-align: right;
  font-weight: 600;
  color: var(--ink);
}

.client-card__extra {
  min-height: 0;
  display: grid;
  gap: 8px;
}

.client-card__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.client-card__menu-wrap {
  position: relative;
  margin-left: auto;
}

.client-card__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.client-card__menu-btn:hover {
  color: var(--ink);
  background: var(--card);
  border-color: var(--brand);
}

.client-card__menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 20;
  min-width: 180px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: var(--card);
  box-shadow: var(--shadow-card-hover);
}

.client-card__menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.client-card__menu-item:hover:not(:disabled) {
  background: var(--brand-soft);
  color: var(--brand-deep);
}

.client-card__menu-item:disabled {
  opacity: 0.55;
  cursor: wait;
}

.clients-crm-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.clients-crm-filters__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.clients-tag-filters-panel {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  display: grid;
  gap: 12px;
}

.clients-tag-filters-panel__tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.clients-tag-filters-panel__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.clients-crm-filters__chip {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
}

.clients-crm-filters__chip.is-active {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-deep);
}

.clients-empty-card {
  padding: 24px;
  text-align: center;
  border-radius: 14px;
  border: 1px dashed var(--line);
  background: var(--surface-2);
}

.clients-empty-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
}

.clients-empty-card__hint {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

.clients-color-palette {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.clients-color-palette__dot {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.clients-color-palette__dot.is-selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--card);
}

.clients-page__error {
  color: var(--danger);
  margin-top: 10px;
  font-size: 14px;
}

.clients-page__modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 26, 51, 0.45);
  display: grid;
  place-items: center;
  z-index: 1000;
  padding: 16px;
}

.clients-page__modal {
  width: min(720px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-card-hover);
}

.clients-page__modal--narrow {
  width: min(600px, 94vw);
  padding: 24px;
}

.clients-page__modal-title {
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}

.clients-page__modal-sub {
  font-size: 13px;
  color: var(--ink-muted);
}

.clients-page__field {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
}

.clients-page__field:focus {
  outline: 2px solid var(--brand-soft);
  border-color: var(--brand);
}

.clients-page__info-box {
  padding: 12px;
  background: var(--brand-soft);
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}
/* Профиль клиента — §17 DESIGN_BRIEF (mist tokens) */
.client-profile {
  --paper: #f5f3fb;
  --paper-soft: #ece9f8;
  --card: #ffffff;
  --card-border: #d8d2ee;
  --line: #e2dff0;
  --ink: #1f1a33;
  --ink-soft: #5c5678;
  --ink-muted: #8a8496;
  --brand: #6c5bd4;
  --brand-deep: #5546b8;
  --brand-soft: #efebfc;
  --surface-2: #f3f1fa;
  --shadow-card: 0 1px 2px rgba(38, 33, 66, 0.05), 0 10px 28px rgba(38, 33, 66, 0.1);
  --shadow-card-hover: 0 2px 4px rgba(38, 33, 66, 0.06), 0 14px 34px rgba(38, 33, 66, 0.13);
  --danger: #d4574e;
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-ui: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
}

.client-profile__main {
  flex: 1;
  padding: 24px clamp(16px, 5vw, 48px);
  max-width: 100%;
  overflow-x: hidden;
}

.client-profile__h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
}

.client-profile__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  background: var(--brand);
  color: #fff;
}

.client-profile__btn:hover {
  background: var(--brand-deep);
  color: #fff;
}

.client-profile__btn--secondary {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}

.client-profile__btn--secondary:hover {
  background: var(--surface-2);
}

.client-profile__btn--ghost {
  background: transparent;
  color: var(--brand);
  border-color: transparent;
  padding-inline: 8px;
}

.client-profile__head {
  margin-bottom: 24px;
}

.client-profile__head-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.client-profile__identity {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.client-profile__avatar,
.client-profile__avatar-fallback {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--line);
  flex-shrink: 0;
}

.client-profile__avatar-fallback {
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 24px;
  background: var(--brand-soft);
  color: var(--brand);
}

.client-profile__name {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--ink);
}

.client-profile__meta {
  font-size: 14px;
  color: var(--ink-soft);
}

.client-profile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.client-profile__tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--brand-soft);
  color: var(--brand-deep);
  border: 1px solid var(--line);
}

.client-profile-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 4px;
}

.client-profile-tabs__btn {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.client-profile-tabs__btn.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.client-profile__panel {
  padding: 24px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card);
}

.client-profile__panel h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

.client-profile-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.client-profile-stat {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.client-profile-stat__label {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.client-profile-stat__value {
  font-weight: 700;
  color: var(--ink);
}

.client-profile-stat__muted {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 4px;
}

.client-profile-block {
  margin-top: 20px;
}

.client-profile-block__title {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 8px;
  font-weight: 600;
}

.client-profile-empty {
  color: var(--ink-muted);
  text-align: center;
  padding: 40px 16px;
  font-size: 14px;
}

.client-profile-form {
  display: grid;
  gap: 10px;
  margin-bottom: 8px;
}

.client-profile-form textarea,
.client-profile-form input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

.client-profile-list-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.client-profile-list-item--stack {
  flex-direction: column;
}

.client-profile-timeline {
  display: grid;
  gap: 10px;
}

.client-profile-timeline__item {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.client-profile-timeline__meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.client-profile-timeline__type {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.client-profile__error {
  margin-bottom: 16px;
  padding: 12px;
  background: #fbeae8;
  border: 1px solid var(--danger);
  border-radius: 10px;
  color: var(--danger);
  font-size: 14px;
}

.client-profile__loading {
  text-align: center;
  padding: 48px;
  color: var(--ink-soft);
  font-size: 14px;
}

@media (max-width: 700px) {
  .client-profile-tabs {
    flex-wrap: nowrap;
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
  }
}
/* Сессии и встречи — §17/§18 DESIGN_BRIEF (mist tokens) */
.events-page {
  --paper: #f5f3fb;
  --paper-soft: #ece9f8;
  --card: #ffffff;
  --card-border: #d8d2ee;
  --line: #e2dff0;
  --ink: #1f1a33;
  --ink-soft: #5c5678;
  --ink-muted: #8a8496;
  --brand: #6c5bd4;
  --brand-deep: #5546b8;
  --brand-soft: #efebfc;
  --surface-2: #f3f1fa;
  --shadow-card: 0 1px 2px rgba(38, 33, 66, 0.05), 0 10px 28px rgba(38, 33, 66, 0.1);
  --shadow-card-hover: 0 2px 4px rgba(38, 33, 66, 0.06), 0 14px 34px rgba(38, 33, 66, 0.13);
  --danger: #d4574e;
  --danger-soft: #fbeae8;
  --warning: #b97f2e;
  --warning-soft: #fbefdd;
  --sage: #3a9b7a;
  --sage-soft: #e6f4ef;
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-ui: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
}

.events-page__main {
  flex: 1;
  padding: 32px clamp(16px, 5vw, 48px);
  max-width: 100%;
  overflow-x: hidden;
}

.events-page__main--narrow {
  padding: 16px 16px 20px;
}

.events-page .button {
  background: var(--brand);
  border: 1px solid var(--brand);
  color: #fff;
  background-image: none;
  font-family: var(--font-ui);
}

.events-page .button:hover:not(:disabled) {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
}

.events-page .button.secondary {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}

.events-page .button.secondary:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--ink-muted);
}

.events-page .button.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.events-page .button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Header */
.events-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.events-page__h1 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.events-page__sub {
  font-size: 14px;
  color: var(--ink-soft);
}

.events-page__header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.events-page__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
  line-height: 1.2;
}

.events-page__btn svg {
  display: block;
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  stroke: currentColor;
  fill: none;
  color: inherit;
}

.events-page__btn:hover:not(:disabled) {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: #fff;
}

.events-page__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.events-page__btn--secondary {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}

.events-page__btn--secondary svg {
  color: var(--ink);
  stroke: currentColor;
}

.events-page__btn--secondary:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--ink-muted);
  color: var(--ink);
}

.events-page__btn--secondary:hover:not(:disabled) svg {
  color: var(--ink);
}

.events-page__btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: transparent;
}

.events-page__btn--ghost:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--ink);
}

/* Primary as <a>: appearance.css красит a:not(.button) в --primary → тёмный текст на brand */
.events-page a.events-page__btn:not(.events-page__btn--secondary):not(.events-page__btn--ghost),
.events-page a.events-page__btn:not(.events-page__btn--secondary):not(.events-page__btn--ghost):hover,
.events-page a.events-page__btn:not(.events-page__btn--secondary):not(.events-page__btn--ghost):visited,
html[data-theme='light'] .events-page a.events-page__btn:not(.events-page__btn--secondary):not(.events-page__btn--ghost),
html[data-theme='light'] .events-page a.events-page__btn:not(.events-page__btn--secondary):not(.events-page__btn--ghost):hover,
html[data-theme='light'] .events-page a.events-page__btn:not(.events-page__btn--secondary):not(.events-page__btn--ghost):visited {
  color: #ffffff;
}

html[data-theme='light'] .events-page a.events-page__btn--secondary,
html[data-theme='light'] .events-page a.events-page__btn--secondary:hover,
html[data-theme='light'] .events-page a.events-page__btn--secondary:visited {
  color: var(--ink);
}

html[data-theme='light'] .events-page a.events-page__btn--ghost,
html[data-theme='light'] .events-page a.events-page__btn--ghost:hover {
  color: var(--ink-soft);
}

.events-page__btn--sm {
  padding: 6px 10px;
  font-size: 12px;
  gap: 5px;
  border-radius: 9px;
}

.events-page__btn--icon {
  width: 36px;
  height: 36px;
  padding: 0;
  gap: 0;
  line-height: 0;
}

.events-page__btn--icon svg {
  width: 18px;
  height: 18px;
}

.events-page__btn--block {
  width: 100%;
}

/* Toolbar: tabs + chips */
.events-page__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.events-page__tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: 12px;
  border: 1px solid var(--line);
}

.events-page__tab {
  padding: 8px 16px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.events-page__tab.is-active {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}

.events-page__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.events-page__chip {
  padding: 5px 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
}

.events-page__chip.is-active {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-deep);
}

.events-page__chip--reset {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-soft);
}

/* Grid 2/3 + 1/3 */
.events-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 960px) {
  .events-page__grid {
    grid-template-columns: 1fr;
  }
}

.events-page__col-left,
.events-page__col-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Cards */
.events-page__card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 16px;
}

.events-page__card-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.events-page__card-micro {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.45;
}

.events-page__empty {
  padding: 20px 16px;
  text-align: left;
}

.events-page__empty-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
}

.events-page__empty-sub {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}

/* Nearest */
.events-page__nearest-dt {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.events-page__nearest-countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
}

.events-page__nearest-countdown.is-now {
  color: var(--sage);
  background: var(--sage-soft);
  border-radius: 999px;
  padding: 2px 10px;
}

.events-page__nearest-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.events-page__nearest-client {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 8px;
}

.events-page__nearest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* Badges */
.events-page__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.events-page__badge--type {
  background: var(--brand-soft);
  color: var(--brand-deep);
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
}

.events-page__badge--sage {
  background: var(--sage-soft);
  color: var(--sage);
}

.events-page__badge--warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.events-page__badge--danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.events-page__badge--muted {
  background: var(--surface-2);
  color: var(--ink-muted);
}

/* Event list */
.events-page__day-block {
  margin-bottom: 4px;
}

.events-page__day-label {
  padding: 8px 4px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: capitalize;
}

.events-page__event {
  position: relative;
  padding: 14px;
  margin-bottom: 10px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}

.events-page__event--history {
  opacity: 0.88;
  box-shadow: none;
  background: var(--surface-2);
}

.events-page__event-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.events-page__event-time {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}

.events-page__event-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}

.events-page__event-client {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-soft);
}

.events-page__event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.events-page__menu-wrap {
  position: relative;
  margin-left: auto;
}

.events-page__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}

.events-page__menu-btn svg {
  display: block;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

.events-page__menu-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--ink-muted);
}

.events-page__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 160px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: var(--shadow-card-hover);
}

.events-page__menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.events-page__menu-item:hover {
  background: var(--surface-2);
}

.events-page__menu-item--danger {
  color: var(--danger);
}

/* Right column bits */
.events-page__status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--sage-soft);
  color: var(--sage);
  margin-bottom: 12px;
}

.events-page__share-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 10px;
}

.events-page__share-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 12px;
  font-family: var(--font-ui);
}

.events-page__stack-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.events-page__attention-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.events-page__attention-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.events-page__attention-name {
  font-size: 14px;
  font-weight: 600;
}

.events-page__badge--peach {
  background: var(--peach-soft, #fdebdd);
  color: color-mix(in srgb, var(--peach, #f2a65a) 80%, #211e2b);
  border-color: color-mix(in srgb, var(--peach, #f2a65a) 40%, var(--line));
}

.events-page__requests-lead {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-muted);
}

.events-page__request-item {
  align-items: stretch;
}

.events-page__request-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.events-page__request-date {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-muted);
}

.events-page__request-contact {
  margin-bottom: 8px;
}

.events-page__request-name {
  font-weight: 700;
  font-size: 15px;
}

.events-page__request-meta {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 2px;
}

.events-page__request-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
}

.events-page__request-comment {
  grid-column: 1 / -1;
}

.events-page__request-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.events-page__request-value {
  font-size: 14px;
  color: var(--ink);
}

.events-page__request-value--bold {
  font-weight: 700;
}

.events-page__request-muted {
  font-size: 13px;
  color: var(--ink-muted);
}

.events-page__request-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.events-page__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--brand-soft);
  color: var(--brand-deep);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
}

.events-page__request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}

.events-page__first-meet-banner {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line));
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.events-page__textarea {
  /* legacy alias — prefer .events-page__field--area */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

@media (max-width: 640px) {
  .events-page__request-grid {
    grid-template-columns: 1fr;
  }
}

/* Booking requests */
.events-page__booking-list {
  display: grid;
  gap: 12px;
}

.events-page__booking-item {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

/* Toast / error */
.events-page__toast {
  position: fixed;
  top: 88px;
  right: 20px;
  z-index: 3000;
  max-width: 380px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  box-shadow: var(--shadow-card-hover);
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.45;
}

.events-page__toast--success {
  border-color: color-mix(in srgb, var(--sage) 45%, var(--card-border));
  background: var(--sage-soft);
  color: var(--sage);
}

.events-page__toast--error {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--card-border));
  background: var(--danger-soft);
  color: var(--danger);
}

.events-page__error {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--danger);
}

/* Modals */
.events-page__modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 26, 51, 0.45);
  display: grid;
  place-items: center;
  z-index: 1000;
  padding: 16px;
}

.events-page__modal-overlay--stretch {
  display: flex;
  align-items: center;
  justify-content: center;
}

.events-page__modal-overlay--stretch.events-page__modal-overlay--narrow {
  padding: 0;
  align-items: stretch;
}

.events-page__modal {
  width: min(680px, 94vw);
  max-height: min(760px, 92vh);
  overflow-y: auto;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-card-hover);
}

.events-page__modal--narrow-dlg {
  width: min(440px, 94vw);
  max-width: 100%;
  padding: 22px 24px 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.events-page__dlg-head {
  margin-bottom: 16px;
}

.events-page__dlg-head .events-page__modal-title {
  margin: 0;
  font-family: var(--font-display, Georgia, 'Times New Roman', serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.events-page__dlg-head .events-page__modal-sub {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.events-page__dlg-label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.events-page__dlg-form {
  display: grid;
  gap: 0;
}

.events-page__dlg-form .events-page__field {
  margin-bottom: 12px;
}

.events-page__dlg-form .events-page__dlg-label:not(:first-child) {
  margin-top: 4px;
}

.events-page__dlg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.events-page__btn--danger {
  background: var(--danger, #b42318);
  border-color: var(--danger, #b42318);
  color: #fff;
}

.events-page__btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger, #b42318) 88%, #000);
  border-color: color-mix(in srgb, var(--danger, #b42318) 88%, #000);
  color: #fff;
}

.events-page__modal--calendar {
  width: min(780px, 96vw);
  max-height: min(90vh, 880px);
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.events-page__modal--calendar.is-narrow {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100dvh;
  border-radius: 0;
}

.events-page__modal-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.events-page__modal-title {
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}

.events-page__modal-sub {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 4px;
  line-height: 1.45;
}

.events-page__modal-body {
  padding: 20px;
  display: grid;
  gap: 16px;
}

.events-page__modal-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  background: var(--card);
}

.events-page__field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.events-page__field {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-ui, inherit);
  font-size: 14px;
  line-height: 1.45;
}

.events-page__field--area {
  min-height: 112px;
  resize: vertical;
  margin: 0;
}

.events-page__field:focus {
  outline: 2px solid var(--brand-soft);
  border-color: var(--brand);
}

.events-page__textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 0 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  line-height: 1.45;
  resize: vertical;
}

.events-page__field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  align-items: end;
}

.events-page__summary {
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--brand-soft);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.45;
}

.events-page__quick-times {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.events-page__time-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.events-page__time-chip {
  padding: 8px 0;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  font-family: var(--font-ui);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.events-page__time-chip.is-active {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-deep);
}

/* Calendar modal internals */
.events-page__cal-toolbar {
  padding: 12px 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.events-page__cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.events-page__cal-month {
  font-weight: 800;
  font-size: 16px;
  text-transform: capitalize;
  min-width: 160px;
  text-align: center;
}

.events-page__cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.events-page__cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-muted);
}

.events-page__cal-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.events-page__cal-dot--sage {
  background: var(--sage);
}

.events-page__cal-dot--warning {
  background: var(--warning);
}

.events-page__cal-dot--brand {
  background: var(--brand);
}

.events-page__cal-scroll {
  padding: 0 20px 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.events-page__cal-weekdays,
.events-page__cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.events-page__cal-weekday {
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  color: var(--ink-muted);
  padding: 6px 0;
}

.events-page__cal-cell {
  min-height: 76px;
  border-radius: 12px;
  padding: 8px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--sage-soft);
  color: var(--ink);
  font-family: var(--font-ui);
}

.events-page__cal-cell.is-out {
  opacity: 0.45;
  background: var(--surface-2);
}

.events-page__cal-cell.is-past {
  background: var(--surface-2);
}

.events-page__cal-cell.is-weekend {
  background: color-mix(in srgb, var(--ink-muted) 12%, var(--surface-2));
}

.events-page__cal-cell.is-busy {
  background: var(--brand-soft);
}

.events-page__cal-cell.is-partial {
  background: var(--warning-soft);
}

.events-page__cal-cell.is-selected {
  border: 2px solid var(--brand);
}

.events-page__cal-cell.is-today:not(.is-selected) {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
}

.events-page__cal-cell-day {
  font-weight: 800;
  font-size: 14px;
}

.events-page__cal-cell-sub {
  font-weight: 700;
  font-size: 10px;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
  color: var(--sage);
}

.events-page__cal-cell.is-busy .events-page__cal-cell-sub {
  color: var(--brand);
}

.events-page__cal-cell.is-partial .events-page__cal-cell-sub {
  color: var(--warning);
}

.events-page__cal-cell.is-past .events-page__cal-cell-sub,
.events-page__cal-cell.is-weekend .events-page__cal-cell-sub {
  color: var(--ink-muted);
}

.events-page__cal-day-detail {
  margin-top: 16px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.events-page__cal-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.events-page__cal-slot {
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  background: var(--sage-soft);
  color: var(--sage);
}

.events-page__cal-ev {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  background: var(--brand-soft);
}

.events-page__info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.events-page__info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-muted);
  cursor: pointer;
}

.events-page__info-btn:hover,
.events-page__info-btn:focus {
  color: var(--brand);
  border-color: var(--brand);
}

.events-page__info-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: min(320px, 70vw);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: var(--card);
  box-shadow: var(--shadow-card-hover);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 500;
}

.events-page__settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  align-items: end;
}

.events-page__check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
}

.events-page__dayoff-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.events-page__dayoff-chip button {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-weight: 900;
  color: var(--ink-muted);
}

@media (max-width: 720px) {
  .events-page__header-actions {
    width: 100%;
  }

  .events-page__btn {
    flex: 1;
  }

  .events-page__cal-toolbar,
  .events-page__cal-scroll {
    padding-left: 12px;
    padding-right: 12px;
  }

  .events-page__cal-cell {
    min-height: 56px;
    padding: 5px;
    border-radius: 10px;
  }

  .events-page__cal-month {
    font-size: 14px;
    min-width: 120px;
  }
}
/* Публичные лендинги JungAI — только внутри .landing (не смешивать с кабинетными токенами) */

.landing {
  /* фоны — §4.1 финал, палитра «mist» */
  --paper: #f5f3fb;
  --paper-soft: #ece9f8;
  --card: #ffffff;

  /* текст */
  --ink: #211e2b;
  --ink-soft: #57536e;
  --ink-muted: #8a8496;
  --line: #e2dff0;

  /* бренд и акценты */
  --brand: #6c5bd4;
  --brand-deep: #5546b8;
  --brand-soft: #efebfc;
  --peach: #f2a65a;
  --peach-soft: #fdebdd;
  --sage: #3e8a6e;
  --sage-soft: #e3f1ea;
  --data-cyan: #19e0ff;

  /* геометрия */
  --radius-card: 20px;
  --radius-input: 12px;
  --radius-btn: 999px;
  /* контур карточек — темнее внутренних hairline */
  --card-border: #d8d2ee;
  /* слоёная тень: резкий край + мягкий подъём */
  --shadow-card: 0 1px 2px rgba(38, 33, 66, 0.05), 0 10px 28px rgba(38, 33, 66, 0.1);
  --shadow-card-hover: 0 2px 4px rgba(38, 33, 66, 0.06), 0 14px 34px rgba(38, 33, 66, 0.13);
  --shadow-mock: 0 24px 60px rgba(38, 33, 66, 0.12);
  /* внутренние панели */
  --surface-2: #f3f1fa;
  --container: 1160px;
  --section-y: 96px;

  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-ui: 'Golos Text', system-ui, -apple-system, Segoe UI, sans-serif;

  color: var(--ink);
  /* solid paper на корневом враппере: без opacity и без градиента к белому */
  background-color: var(--paper);
  background-image: none;
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* appearance.css иначе подставляет холодный --bg / radial под лендингом */
html:has(.landing),
html[data-theme='light']:has(.landing) {
  background-color: #f5f3fb !important;
  background-image: none !important;
}

html:has(.landing) body,
html:has(.landing) #root,
html[data-theme='light']:has(.landing) body,
html[data-theme='light']:has(.landing) #root {
  background-color: transparent !important;
  background-image: none !important;
}

@media (max-width: 720px) {
  .landing {
    --section-y: 56px;
  }
}

.landing *,
.landing *::before,
.landing *::after {
  box-sizing: border-box;
}

.landing a {
  color: inherit;
}

.landing .landing-container {
  width: min(var(--container), calc(100% - 32px));
  margin-inline: auto;
}

.landing .landing-eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}

.landing .landing-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 5.2vw, 60px);
  font-weight: 600;
  line-height: 1.08;
  color: var(--ink);
}

.landing .landing-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}

.landing .landing-h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.landing .landing-lead {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
}

.landing .landing-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.landing .landing-small {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.landing .landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-btn);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.landing .landing-btn:focus-visible {
  outline: 3px solid var(--brand-soft);
  outline-offset: 2px;
}

.landing .landing-btn--primary {
  background: var(--brand);
  color: #fff;
}

/* Link (react-router) не .button — светлая тема иначе красит a в --primary и текст сливается */
.landing a.landing-btn--primary,
.landing a.landing-btn--primary:hover,
.landing a.landing-btn--primary:visited {
  color: #fff;
}

.landing .landing-btn--primary:hover {
  background: var(--brand-deep);
  color: #fff;
}

.landing .landing-btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.landing .landing-btn--secondary:hover {
  background: var(--paper-soft);
}

.landing .landing-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
}

.landing .landing-btn--ghost:hover {
  background: var(--brand-soft);
}

.landing .landing-btn--tertiary {
  background: transparent;
  color: var(--brand);
  border: none;
  padding-inline: 4px;
}

.landing .landing-btn--tertiary:hover {
  color: var(--brand-deep);
}

.landing .landing-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.landing a.landing-card,
.landing button.landing-card,
.landing .landing-card--interactive,
.landing .landing-card.is-interactive,
.landing .cli-faq__item,
.landing .res-faq__item,
.landing .psy-faq__item {
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.landing a.landing-card:hover,
.landing button.landing-card:hover,
.landing .landing-card--interactive:hover,
.landing .landing-card.is-interactive:hover,
.landing .landing-card.is-open,
.landing .cli-faq__item:hover,
.landing .res-faq__item:hover,
.landing .psy-faq__item:hover {
  box-shadow: var(--shadow-card-hover);
}

/* Скрины продукта: приглушить и подогнать под тёплую бумагу лендинга */
.landing .landing-mock-shot {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  isolation: isolate;
}

.landing .landing-mock-shot__img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.55) contrast(0.9) brightness(1.06);
}

.landing .landing-mock-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(245, 243, 251, 0.22) 0%, rgba(236, 233, 248, 0.35) 100%),
    linear-gradient(135deg, rgba(108, 91, 212, 0.12) 0%, rgba(242, 166, 90, 0.1) 55%, rgba(62, 138, 110, 0.08) 100%);
  mix-blend-mode: soft-light;
}

.landing .landing-mock-shot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(226, 223, 240, 0.85);
  z-index: 1;
}

/* Перебить appearance.css: html[data-theme=light] a:not(.button) { color: var(--primary) } */
html[data-theme='light'] .landing a.landing-btn--primary,
html[data-theme='light'] .landing a.landing-btn--primary:hover,
html[data-theme='light'] .landing a.landing-btn--primary:visited {
  color: #ffffff;
}

html[data-theme='light'] .landing a.landing-btn--secondary,
html[data-theme='light'] .landing a.landing-btn--secondary:hover {
  color: var(--ink);
}

html[data-theme='light'] .landing a.landing-btn--ghost,
html[data-theme='light'] .landing a.landing-btn--ghost:hover {
  color: var(--ink);
}

html[data-theme='light'] .landing a.landing-btn--tertiary {
  color: var(--brand);
}

html[data-theme='light'] .landing a.landing-btn--tertiary:hover {
  color: var(--brand-deep);
}
/* Публичная запись по календарю — DESIGN_BRIEF §20 */

.pub-book {
  /* календарная легенда (нет в landing-tokens) */
  --warning: #b97f2e;
  --warning-soft: #fbefdd;

  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  color: var(--ink);
}

.pub-book__top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px clamp(16px, 4vw, 28px);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.pub-book__top-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  min-width: 0;
}

.pub-book__main {
  flex: 1;
  width: min(560px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 48px;
}

.pub-book__h1 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}

.pub-book__lead {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.pub-book__host {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin-bottom: 18px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.pub-book__avatar,
.pub-book__avatar-fallback {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.pub-book__avatar-fallback {
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand);
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 700;
}

.pub-book__host-meta {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.pub-book__host-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pub-book__host-name {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}

.pub-book__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--sage);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.pub-book__host-method {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.pub-book__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.pub-book__step {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: default;
}

.pub-book__step.is-done {
  background: var(--sage-soft);
  color: var(--sage);
  border-color: transparent;
  cursor: pointer;
}

.pub-book__step.is-active {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: transparent;
}

.pub-book__step:disabled {
  opacity: 1;
  cursor: default;
}

.pub-book__card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.pub-book__card-pad {
  padding: 16px;
}

.pub-book__month-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.pub-book__month-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pub-book__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}

.pub-book__icon-btn:hover {
  background: var(--paper-soft);
}

.pub-book__month-title {
  font-weight: 700;
  font-size: 14px;
  text-transform: capitalize;
  min-width: 120px;
  text-align: center;
  color: var(--ink);
}

.pub-book__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.pub-book__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-muted);
}

.pub-book__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.pub-book__dot--sage {
  background: var(--sage);
}

.pub-book__dot--warning {
  background: var(--warning);
}

.pub-book__dot--brand {
  background: var(--brand);
}

.pub-book__weekdays,
.pub-book__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.pub-book__weekdays {
  margin-bottom: 8px;
}

.pub-book__weekday {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--ink-muted);
  padding: 6px 0;
}

.pub-book__cell {
  min-height: 68px;
  border-radius: 12px;
  padding: 6px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--sage-soft);
  color: var(--ink);
  font-family: var(--font-ui);
}

.pub-book__cell.is-out {
  opacity: 0.45;
  background: var(--surface-2);
}

.pub-book__cell.is-past {
  background: var(--surface-2);
}

.pub-book__cell.is-weekend {
  background: color-mix(in srgb, var(--ink-muted) 12%, var(--surface-2));
}

.pub-book__cell.is-busy {
  background: var(--brand-soft);
}

.pub-book__cell.is-partial {
  background: var(--warning-soft);
}

.pub-book__cell.is-selected {
  border: 2px solid var(--brand);
}

.pub-book__cell-day {
  font-weight: 800;
  font-size: 13px;
}

.pub-book__cell-sub {
  font-weight: 700;
  font-size: 9px;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
  color: var(--sage);
}

.pub-book__cell.is-busy .pub-book__cell-sub {
  color: var(--brand);
}

.pub-book__cell.is-partial .pub-book__cell-sub {
  color: var(--warning);
}

.pub-book__cell.is-past .pub-book__cell-sub,
.pub-book__cell.is-weekend .pub-book__cell-sub {
  color: var(--ink-muted);
}

.pub-book__step-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-muted);
  margin-bottom: 10px;
}

.pub-book__day-title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 12px;
  color: var(--ink);
  text-transform: capitalize;
}

.pub-book__slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pub-book__slot {
  padding: 10px 14px;
  border-radius: 12px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
}

.pub-book__slot:hover {
  border-color: var(--ink-muted);
}

.pub-book__slot.is-selected {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.pub-book__actions {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.pub-book__actions--end {
  justify-content: flex-end;
}

.pub-book .landing-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pub-book__form {
  display: grid;
  gap: 14px;
}

.pub-book__field {
  display: grid;
  gap: 6px;
}

.pub-book__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
}

.pub-book__input,
.pub-book__textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-input);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
}

.pub-book__input:focus,
.pub-book__textarea:focus {
  outline: 3px solid var(--brand-soft);
  outline-offset: 1px;
  border-color: var(--brand);
}

.pub-book__textarea {
  resize: vertical;
  min-height: 88px;
  line-height: 1.45;
}

.pub-book__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.pub-book__consent input {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--brand);
}

.pub-book__consent a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pub-book__hint {
  margin: 0;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.45;
}

.pub-book__error {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  background: #fbeae8;
  border: 1px solid color-mix(in srgb, #d4574e 35%, transparent);
  color: #b91c1c;
}

.pub-book__success {
  padding: 28px 20px;
  text-align: center;
}

.pub-book__success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--sage);
  display: grid;
  place-items: center;
}

.pub-book__success h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}

.pub-book__success p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-muted);
}

.pub-book__footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: var(--paper-soft);
  padding: 20px clamp(16px, 4vw, 28px) 24px;
}

.pub-book__footer-inner {
  width: min(560px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.pub-book__footer-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.pub-book__footer-docs a {
  font-size: 13px;
  color: var(--ink-muted);
  text-decoration: none;
}

.pub-book__footer-docs a:hover {
  color: var(--brand);
}

.pub-book__footer-meta {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
}

@media (max-width: 420px) {
  .pub-book__cell {
    min-height: 56px;
    padding: 4px;
  }

  .pub-book__cell-day {
    font-size: 12px;
  }

  .pub-book__cell-sub {
    font-size: 8px;
  }
}
/* Рабочий стол психолога — §17 DESIGN_BRIEF (mist tokens) */
.psy-desk {
  --paper: #f5f3fb;
  --paper-soft: #ece9f8;
  --card: #ffffff;
  --card-border: #d8d2ee;
  --line: #e2dff0;
  --ink: #1f1a33;
  --ink-soft: #5c5678;
  --ink-muted: #8a8496;
  --brand: #6c5bd4;
  --brand-deep: #5546b8;
  --brand-soft: #efebfc;
  --surface-2: #f3f1fa;
  --shadow-card: 0 1px 2px rgba(38, 33, 66, 0.05), 0 10px 28px rgba(38, 33, 66, 0.1);
  --shadow-card-hover: 0 2px 4px rgba(38, 33, 66, 0.06), 0 14px 34px rgba(38, 33, 66, 0.13);
  --danger: #d4574e;
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-ui: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
}

.psy-desk__main {
  flex: 1;
  padding: 24px clamp(16px, 5vw, 48px);
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
}

.psy-desk__header {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.psy-desk__h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}

.psy-desk__h1-icon {
  color: var(--brand);
  display: inline-flex;
}

.psy-desk__card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  backdrop-filter: none;
}

.psy-desk__welcome {
  margin-bottom: 16px;
  padding: 20px;
  border-radius: 14px;
  background: var(--brand-soft);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card);
}

.psy-desk__welcome-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.psy-desk__date {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.psy-desk__greeting {
  font-size: 22px;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
}

.psy-desk__welcome-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.psy-desk__note-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  position: relative;
}

.psy-desk__note-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 20;
}

.psy-desk__note-btn:hover::after,
.psy-desk__note-btn:focus-visible::after {
  opacity: 1;
}

.psy-desk__note-btn--open {
  border-color: var(--brand);
  background: var(--card);
  color: var(--brand);
}

.psy-desk__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}

.psy-desk__btn--primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.psy-desk__btn--primary:hover {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: #fff;
}

.psy-desk__btn--ghost {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}

.psy-desk__btn--ghost:hover {
  background: var(--paper-soft);
}

.psy-desk__session {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.psy-desk__session-label {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.psy-desk__session-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.psy-desk__session-meta {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 2px;
}

.psy-desk__session-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.psy-desk__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}

.psy-desk__chip:hover {
  filter: brightness(0.97);
}

.psy-desk__chip--accent {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-deep);
  font-weight: 600;
}

.psy-desk__notebook {
  margin-bottom: 16px;
  padding: 14px;
  overflow-x: hidden;
}

.psy-desk__quick {
  margin-bottom: 16px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.psy-desk__quick-btn {
  text-align: left;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: box-shadow 0.18s ease, background 0.15s ease, border-color 0.15s ease;
}

.psy-desk__quick-btn:hover {
  background: var(--surface-2);
  border-color: var(--brand);
  box-shadow: var(--shadow-card-hover);
}

.psy-desk__nav {
  margin-bottom: 16px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.psy-desk__nav-card {
  text-align: left;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font-family: var(--font-ui);
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: box-shadow 0.18s ease, background 0.15s ease, border-color 0.15s ease;
}

.psy-desk__nav-card:hover {
  border-color: var(--brand);
  background: var(--surface-2);
  box-shadow: var(--shadow-card-hover);
}

.psy-desk__nav-main {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

.psy-desk__nav-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
  color: var(--ink);
}

.psy-desk__nav-note {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.psy-desk__nav-live {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.psy-desk__nav-live--empty {
  color: var(--ink-muted);
  cursor: default;
  pointer-events: none;
  user-select: none;
}

.psy-desk__nav-live--active {
  color: var(--brand);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
}

.psy-desk__nav-live--active:hover {
  color: var(--brand-deep);
  text-decoration: underline;
}

.psy-desk__widgets-grid .card.psy-desk-widget {
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card);
  backdrop-filter: none;
  transition: box-shadow 0.18s ease, background 0.15s ease, border-color 0.15s ease;
}

.psy-desk__widgets-grid .card.psy-desk-widget--clickable {
  cursor: pointer;
}

.psy-desk__widgets-grid .card.psy-desk-widget--clickable:hover {
  background: var(--surface-2);
  border-color: var(--brand);
  box-shadow: var(--shadow-card-hover);
}

.psy-desk__widgets-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 10px;
  flex-wrap: wrap;
}

.psy-desk__widgets-title {
  font-weight: 700;
  font-size: 16px;
}

.psy-desk__widgets-hint {
  font-size: 13px;
  color: var(--ink-soft);
}

.psy-desk__widgets-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 0;
  padding-bottom: 12px;
}

.psy-desk__widgets-grid .card {
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card);
  backdrop-filter: none;
}

.psy-desk__error {
  margin-bottom: 16px;
  padding: 12px;
  background: #fbeae8;
  border: 1px solid var(--danger);
  border-radius: 10px;
  color: var(--danger);
  font-size: 14px;
}

.psy-desk__loading {
  text-align: center;
  padding: 48px;
  color: var(--ink-soft);
  font-size: 14px;
}

@media (max-width: 900px) {
  .psy-desk__widgets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .psy-desk__quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .psy-desk__quick-btn {
    min-height: 88px;
    align-items: flex-start;
    flex-direction: column;
  }
}
/* Work Area §24 — editor chrome + toolbar + layout */

.wa-root {
  --wa-peach: #fde8d8;
  --wa-sage-hl: #e3f1ea;
  --wa-lavender: #efebfc;
  --wa-yellow: #fef6d0;
}

.wa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  background: var(--card, #fff);
  flex-shrink: 0;
}

.wa-header--slim {
  padding: 6px 14px;
  min-height: 44px;
}

.wa-header__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.wa-header__h1 {
  margin: 0;
  font-family: var(--font-display, 'Lora', Georgia, 'Times New Roman', serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink, var(--text));
}

.wa-header__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.wa-save-status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 132px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sage, #3e8a6e);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wa-save-status.is-saving {
  color: var(--ink-muted, var(--text-muted));
}

.wa-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--brand-soft, #efebfc);
  border: 2px solid color-mix(in srgb, var(--brand, #6c5bd4) 22%, transparent);
}

.wa-avatar--sm {
  width: 24px;
  height: 24px;
}

.wa-avatar-fallback {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--brand-soft, #efebfc);
  color: var(--brand, #6c5bd4);
  font-weight: 700;
  font-size: 16px;
}

.wa-avatar-fallback--sm {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.wa-client-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  background: var(--surface-2, #f1f5f9);
  color: var(--text);
  cursor: pointer;
  min-width: 200px;
  font: inherit;
}

.wa-client-chip--sidebar {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  gap: 8px;
  border-radius: 10px;
}

.wa-client-chip:hover {
  background: var(--surface, #fff);
}

.wa-add-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--brand, #6c5bd4) 40%, transparent);
  background: transparent;
  color: var(--brand, #6c5bd4);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.wa-add-tab-btn:hover:not(:disabled) {
  background: var(--brand-soft, #efebfc);
}

.wa-add-tab-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Sidebar tabs */
.wa-tab {
  position: relative;
}

.wa-tab__close {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.wa-tab:hover .wa-tab__close,
.wa-tab:focus-within .wa-tab__close {
  opacity: 1;
  pointer-events: auto;
}

.wa-add-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 200px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
  background: var(--card, #fff);
  box-shadow: 0 10px 28px rgba(38, 33, 66, 0.12);
}

.wa-add-menu__label {
  padding: 6px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wa-add-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.wa-add-menu button:hover {
  background: var(--brand-soft, #efebfc);
}

.wa-tab-rename {
  width: 100%;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--brand, #6c5bd4);
  background: var(--card, #fff);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

/* Flat toolbar */
.wa-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  flex-shrink: 0;
  padding: 4px 10px;
  background: var(--surface-2, #f1f5f9);
  border-bottom: 1px solid var(--line, rgba(15, 23, 42, 0.1));
  overflow-x: auto;
  position: relative;
  z-index: 5;
}

.wa-mobile-back {
  flex-shrink: 0;
  align-self: flex-start;
  margin: 6px 8px 0;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: var(--surface-2, #f1f5f9);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.wa-toolbar__sep {
  width: 1px;
  height: 22px;
  margin: 0 4px;
  background: var(--line, rgba(15, 23, 42, 0.14));
  flex-shrink: 0;
}

.wa-toolbar__spacer {
  flex: 1;
  min-width: 8px;
}

.wa-tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}

.wa-tb-btn:hover {
  background: color-mix(in srgb, var(--brand, #6c5bd4) 10%, transparent);
}

.wa-tb-btn.is-active {
  background: var(--brand-soft, #efebfc);
  color: var(--brand, #6c5bd4);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand, #6c5bd4) 35%, transparent);
}

.wa-tb-select {
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  outline: none;
}

.wa-tb-select:hover,
.wa-tb-select:focus {
  background: color-mix(in srgb, var(--brand, #6c5bd4) 8%, transparent);
  border-color: color-mix(in srgb, var(--brand, #6c5bd4) 25%, transparent);
}

.wa-hl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}

.wa-hl__swatch {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  cursor: pointer;
  padding: 0;
}

.wa-hl__swatch:hover,
.wa-hl__swatch.is-active {
  outline: 2px solid var(--brand, #6c5bd4);
  outline-offset: 1px;
}

.wa-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--brand, #6c5bd4) 40%, transparent);
  background: transparent;
  color: var(--brand, #6c5bd4);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.wa-ai-btn:hover:not(:disabled) {
  background: var(--brand-soft, #efebfc);
}

.wa-ai-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Стол: серый фон + один непрерывный лист A4-ширины (без визуальных разрывов) */
.wa-editor-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px 24px;
  background: #e4e4e7;
  position: relative;
}

.wa-paper {
  position: relative;
  width: 210mm;
  max-width: 100%;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #c4bdd9;
  border-radius: 2px;
  box-shadow:
    0 1px 3px rgba(38, 33, 66, 0.08),
    0 14px 32px rgba(38, 33, 66, 0.14);
  min-height: 297mm;
  overflow-x: hidden;
}

.workarea-editor {
  position: relative;
  width: 100%;
  min-height: 297mm;
  box-sizing: border-box;
  padding: 18mm;
  line-height: 1.7;
  font-size: 15px;
  color: var(--ink, var(--text));
  font-family: var(--font-ui, var(--font-sans), system-ui, sans-serif);
  outline: none;
  overflow: visible;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  background: transparent;
}

.workarea-editor.is-empty:before {
  content: attr(data-placeholder);
  color: var(--ink-muted, var(--text-muted));
  pointer-events: none;
  float: left;
  height: 0;
}

.workarea-editor blockquote {
  margin: 12px 0;
  padding: 8px 14px;
  border-left: 3px solid var(--brand, #6c5bd4);
  background: var(--brand-soft, #efebfc);
  color: var(--ink-soft, var(--text-muted));
}

.workarea-editor ul[data-wa-checklist] {
  list-style: none;
  padding-left: 4px;
}

.workarea-editor ul[data-wa-checklist] li {
  position: relative;
  padding-left: 28px;
  margin: 6px 0;
}

.workarea-editor ul[data-wa-checklist] li::before {
  content: '☐';
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--brand, #6c5bd4);
}

.wa-statusbar {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--line, rgba(15, 23, 42, 0.1));
  background: var(--card, #fff);
  font-size: 12px;
  color: var(--text-muted);
}

.wa-statusbar strong {
  color: var(--text);
  font-weight: 600;
}

.wa-print-btn,
.wa-statusbar__print {
  margin-left: 4px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--brand, #6c5bd4) 35%, transparent);
  background: transparent;
  color: var(--brand, #6c5bd4);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  height: 32px;
  display: inline-flex;
  align-items: center;
}

.wa-print-btn:hover,
.wa-statusbar__print:hover {
  background: var(--brand-soft, #efebfc);
}

.wa-statusbar__right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wa-statusbar .wa-save-status {
  min-width: 0;
  font-size: 12px;
}

/* Table — всегда внутри листа (10 колонок без выхода в серую зону) */
.workarea-editor :where(.wa-table-wrap) {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  margin: 10px 0;
}

.workarea-editor :where(.wa-table-wrap table) {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  border: 1px solid rgba(100, 116, 139, 0.55);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.06);
  font-size: 13px;
}

.workarea-editor :where(th, td) {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(100, 116, 139, 0.38);
  border-right: 1px solid rgba(100, 116, 139, 0.3);
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.workarea-editor :where(th:last-child, td:last-child) {
  border-right: none;
}

.workarea-editor :where(tr:last-child td) {
  border-bottom: none;
}

.workarea-editor :where(th) {
  font-weight: 800;
  background: rgba(148, 163, 184, 0.26);
  white-space: normal;
  position: relative;
}

.workarea-editor :where(tbody tr:nth-child(odd) td) {
  background: rgba(148, 163, 184, 0.16);
}

.workarea-editor :where(.wa-col-resizer) {
  position: absolute;
  top: 0;
  right: -6px;
  width: 12px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}

.workarea-editor :where(.wa-col-resizer::after) {
  content: '';
  position: absolute;
  top: 16%;
  right: 5px;
  width: 2px;
  height: 68%;
  border-radius: 2px;
  background: rgba(100, 116, 139, 0.55);
  opacity: 0;
  transition: opacity 120ms ease;
}

.workarea-editor :where(th:hover .wa-col-resizer::after) {
  opacity: 1;
}

@media (max-width: 720px) {
  .wa-paper {
    width: 100%;
  }

  .workarea-editor {
    padding: 14mm 12mm 18mm;
    min-height: 80vh;
  }

  .wa-header__h1 {
    font-size: 18px;
  }

  .wa-save-status {
    min-width: 0;
    font-size: 12px;
  }
}
.mood-tracker__head {
  margin-bottom: 14px;
}

.mood-tracker__title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text);
}

.mood-tracker__sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

.mood-tracker__faces {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.mood-tracker__face {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 12px 6px;
  border-radius: 14px;
  border: 1px solid var(--navbar-edge);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.mood-tracker__face:hover:not(:disabled) {
  transform: translateY(-2px);
}

.mood-tracker__face:disabled {
  opacity: 0.55;
  cursor: default;
}

.mood-tracker__icon {
  display: block;
  width: 28px;
  height: 28px;
}

.mood-tracker__n {
  font-size: 11px;
  font-weight: 800;
}

.mood-tracker__face--bad {
  color: #c48b8b;
}

.mood-tracker__face--low {
  color: #c9a08a;
}

.mood-tracker__face--mid {
  color: #b8ae8e;
}

.mood-tracker__face--ok {
  color: #9bb89a;
}

.mood-tracker__face--great {
  color: #7fad8f;
}

.mood-tracker__face--bad.is-active,
.mood-tracker__face--bad:hover:not(:disabled) {
  border-color: rgba(196, 139, 139, 0.55);
  background: rgba(196, 139, 139, 0.14);
  box-shadow: 0 6px 16px rgba(196, 139, 139, 0.1);
}

.mood-tracker__face--low.is-active,
.mood-tracker__face--low:hover:not(:disabled) {
  border-color: rgba(201, 160, 138, 0.55);
  background: rgba(201, 160, 138, 0.14);
}

.mood-tracker__face--mid.is-active,
.mood-tracker__face--mid:hover:not(:disabled) {
  border-color: rgba(184, 174, 142, 0.55);
  background: rgba(184, 174, 142, 0.14);
}

.mood-tracker__face--ok.is-active,
.mood-tracker__face--ok:hover:not(:disabled) {
  border-color: rgba(155, 184, 154, 0.55);
  background: rgba(155, 184, 154, 0.14);
}

.mood-tracker__face--great.is-active,
.mood-tracker__face--great:hover:not(:disabled) {
  border-color: rgba(127, 173, 143, 0.55);
  background: rgba(127, 173, 143, 0.16);
  box-shadow: 0 6px 16px rgba(127, 173, 143, 0.1);
}

.mood-tracker__face.is-active .mood-tracker__icon {
  transform: scale(1.08);
}

.mood-tracker__status {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: var(--surface-2);
  border: 1px solid var(--navbar-edge);
}

.mood-tracker__status .mood-tracker__icon {
  width: 20px;
  height: 20px;
}

.mood-tracker__sliders {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.mood-tracker__slider {
  display: grid;
  gap: 6px;
}

.mood-tracker__slider-label {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}

.mood-tracker__slider-label strong {
  color: var(--text);
}

.mood-tracker__slider input[type='range'] {
  width: 100%;
  accent-color: var(--accent);
}

.mood-tracker--compact .mood-tracker__face {
  padding: 10px 4px;
  border-radius: 12px;
}

.mood-tracker--compact .mood-tracker__icon {
  width: 24px;
  height: 24px;
}

.mood-tracker--compact .mood-tracker__head {
  margin-bottom: 10px;
}

.mood-tracker__save {
  margin-top: 14px;
  width: 100%;
  justify-content: center;
  font-weight: 700;
}

.mood-tracker--locked .mood-tracker__face {
  cursor: default;
}

.mood-tracker--locked .mood-tracker__sliders input {
  opacity: 0.7;
}

.mood-chart {
  display: block;
  width: 100%;
}

.mood-chart-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mood-chart__axis {
  fill: var(--text-muted);
  font-size: 11px;
  font-family: inherit;
}

.mood-chart__hint,
.mood-chart__legend {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.mood-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.mood-chart__legend-sep {
  opacity: 0.5;
}

.mood-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mood-chart__swatch {
  width: 14px;
  height: 3px;
  border-radius: 2px;
}

.mood-chart__swatch--mood {
  background: linear-gradient(90deg, #c48b8b, #b8ae8e, #7fad8f);
}

.mood-chart__swatch--energy {
  background: rgba(127, 173, 143, 0.9);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(127, 173, 143, 0.9) 0 5px,
    transparent 5px 9px
  );
}

.mood-chart__swatch--anxiety {
  background: rgba(201, 160, 138, 0.95);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(201, 160, 138, 0.95) 0 2px,
    transparent 2px 7px
  );
}

.mood-chart__legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.mood-chart--empty {
  display: grid;
  place-items: center;
  border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(124, 92, 255, 0.08), transparent 50%),
    var(--surface-2);
  border: 1px dashed var(--navbar-edge);
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 16px;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .mood-tracker__faces {
    gap: 6px;
  }

  .mood-tracker__face {
    padding: 10px 4px;
  }

  .mood-tracker__icon {
    width: 24px;
    height: 24px;
  }
}
.ind-hex__uroboros {
  stroke: rgba(212, 175, 55, 0.18);
  stroke-width: 1;
  stroke-dasharray: 4 6;
  pointer-events: none;
}

.ind-hex__stage-group--dim {
  opacity: 0.28;
  transition: opacity 0.2s ease;
}

.ind-hex__ray--breathe {
  animation: ind-breathe 3.5s ease-in-out infinite;
}

.ind-hex__center--balanced {
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.45));
}

.ind-hex__center--dispersed {
  filter: none;
}

@keyframes ind-breathe {
  0%, 100% { stroke-opacity: 0.75; }
  50% { stroke-opacity: 1; }
}

.ind-hex__ray--deficit {
  animation: ind-flicker 2.8s ease-in-out infinite;
}

@keyframes ind-flicker {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.85; }
}

.ind-hex {
  display: block;
  max-width: 100%;
}

.ind-hex--animated .ind-hex__ray--ccw-in {
  animation: ind-ray-ccw 0.65s ease-out backwards;
}

.ind-hex--animated .ind-hex__stage-group {
  animation: ind-stage-fade 0.5s ease-out backwards;
}

@keyframes ind-ray-ccw {
  from {
    stroke-dashoffset: 90;
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes ind-stage-fade {
  from {
    opacity: 0;
    transform: scale(0.92);
    transform-origin: center;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.ind-hex__ccw-arc {
  stroke: rgba(212, 175, 55, 0.55);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  pointer-events: none;
}

.ind-hex__ccw-label {
  fill: rgba(212, 175, 55, 0.8);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.ind-hex__triangle-label {
  fill: var(--text-muted);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}

.ind-hex__triangle-label--will {
  fill: rgba(231, 76, 60, 0.75);
}

.ind-hex__triangle-label--meaning {
  fill: rgba(52, 152, 219, 0.75);
}

.ind-hex__vertex-target {
  fill: none;
  stroke-width: 1.5;
  stroke-opacity: 0.4;
  stroke-dasharray: 3 3;
  pointer-events: none;
}

.ind-hex__node-metrics {
  fill: var(--text);
  font-size: 6.5px;
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  pointer-events: none;
}

.ind-hex__node-sd {
  fill: var(--text-muted);
  font-size: 6.5px;
  font-weight: 600;
  pointer-events: none;
}

.ind-hex__center-sublabel {
  fill: rgba(212, 175, 55, 0.55);
  font-size: 6px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

.ind-hex--result .ind-hex__spoke {
  stroke-opacity: 0.18;
}

.ind-hex__spoke {
  stroke-width: 3;
  stroke-opacity: 0.28;
  stroke-linecap: round;
  pointer-events: none;
}

.ind-hex__ray--active {
  filter: drop-shadow(0 0 8px rgba(124, 92, 255, 0.5));
}

.ind-hex__ray--deficit {
  stroke-opacity: 0.5;
}

.ind-hex__outline {
  fill: rgba(124, 92, 255, 0.03);
  stroke: rgba(148, 163, 184, 0.32);
  stroke-width: 1.5;
}

.ind-hex__triangle {
  fill: none;
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
}

.ind-hex__triangle--will {
  stroke: rgba(231, 76, 60, 0.42);
  fill: rgba(231, 76, 60, 0.04);
}

.ind-hex__triangle--meaning {
  stroke: rgba(52, 152, 219, 0.42);
  fill: rgba(52, 152, 219, 0.04);
}

.ind-hex__axis {
  stroke: var(--accent);
  stroke-width: 1.5;
}

.ind-hex__axis--active {
  stroke-width: 2.5;
}

.ind-hex__center {
  stroke: rgba(212, 175, 55, 0.5);
  stroke-width: 1.5;
}

.ind-hex__center-label {
  fill: rgba(212, 175, 55, 0.9);
  font-size: 16px;
  font-weight: 700;
  pointer-events: none;
}

.ind-hex__ray--fixation {
  animation: ind-pulse 2s ease-in-out infinite;
}

.ind-hex__node--fixation {
  animation: ind-pulse 2s ease-in-out infinite;
}

@keyframes ind-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; filter: brightness(1.18); }
}

.ind-hex__node-label {
  fill: var(--text);
  font-size: 9px;
  font-weight: 800;
  pointer-events: none;
}

.ind-hex-progress__spoke {
  stroke: rgba(148, 163, 184, 0.4);
  stroke-width: 4;
  stroke-linecap: round;
}

.ind-hex-progress__spoke.lit {
  stroke: var(--primary);
  stroke-width: 5;
}
.ind-dash__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 900px) {
  .ind-dash__top {
    grid-template-columns: 1fr;
  }
}

.ind-dash__viz {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 12px;
  min-height: 480px;
}

.ind-dash__metrics {
  font-size: 13px;
}

.ind-dash__viz-hint {
  margin: 8px 0 0;
  color: var(--text-muted);
  text-align: center;
  max-width: 420px;
  line-height: 1.5;
}

.ind-dash__modes {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.ind-dash__mode {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.ind-dash__mode.active {
  border-color: var(--primary);
  color: var(--text);
  background: rgba(124, 92, 255, 0.12);
}

.ind-dash__metrics h3 {
  margin-top: 0;
}

.ind-dash__metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.ind-dash__metric-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}

.ind-dash__interp {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 16px 0 0;
}

.ind-dash__bars {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.ind-dash__bars > div {
  display: grid;
  grid-template-columns: 100px 1fr 40px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.ind-dash__bars .bar {
  height: 8px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}

.ind-dash__bars .bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.ind-dash__accordion {
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}

.ind-dash__accordion-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  border: none;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.ind-dash__accordion-body {
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.6;
}

.ind-dash__accordion-body p {
  margin: 0 0 8px;
}
.ind-test {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}

.ind-test.onboard {
  text-align: center;
  padding: 32px 16px;
}

.ind-test__astrolabe {
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  animation: ind-spin-ccw 48s linear infinite;
}

@keyframes ind-spin-ccw {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.ind-test.onboard h2 {
  margin: 0 0 12px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
}

.ind-test.onboard p {
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 24px;
}

.ind-test__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.ind-test__progress-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.ind-test__progress-title {
  font-weight: 800;
  font-size: 16px;
}

.ind-test__progress-meta {
  font-size: 13px;
  color: var(--text-muted);
}

.ind-test__question {
  padding: 20px;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 600;
  margin-bottom: 16px;
}

.ind-test__options {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.ind-test__option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.55;
  transition: border-color 0.15s, background 0.15s;
}

.ind-test__option:hover {
  border-color: rgba(124, 92, 255, 0.4);
}

.ind-test__option.selected {
  border-color: var(--primary);
  background: rgba(124, 92, 255, 0.12);
}

.ind-test__option-key {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--surface);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
}

.ind-test__nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.ind-test__mini-hex {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0.35;
  pointer-events: none;
}

@media (max-width: 640px) {
  .ind-test__mini-hex {
    display: none;
  }
}
.client-care-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.client-care-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.client-care-stage__glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(124, 92, 255, 0.22), transparent 55%),
    radial-gradient(ellipse 60% 40% at 95% 20%, rgba(25, 224, 255, 0.12), transparent 50%),
    radial-gradient(ellipse 50% 35% at 50% 100%, rgba(61, 220, 151, 0.06), transparent 55%);
}

.client-care-inner {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 36px) clamp(16px, 4vw, 32px) clamp(32px, 6vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
  box-sizing: border-box;
}

.client-care-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: clamp(20px, 3vw, 28px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 40%),
    var(--surface);
  box-shadow: var(--shadow-md);
}

.client-care-hero__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.client-care-hero h1 {
  margin: 0;
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  font-weight: 800;
  line-height: 1.15;
}

.client-care-hero__lead {
  margin: 10px 0 0;
  max-width: 48ch;
  color: var(--text-muted);
  line-height: 1.5;
  font-size: 15px;
}

.client-care-hero__link {
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

.client-care-error {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 107, 107, 0.35);
  background: rgba(255, 107, 107, 0.1);
  color: #ffb4b4;
}

.client-care-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--navbar-edge);
  width: fit-content;
  max-width: 100%;
}

.client-care-tab {
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.client-care-tab.is-active {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.35), rgba(25, 224, 255, 0.18));
  color: var(--text);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.client-care-body {
  flex: 1;
  min-height: 0;
}

.client-care-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 16px;
  align-items: stretch;
  min-height: min(420px, 55vh);
}

.client-care-panel {
  padding: clamp(18px, 3vw, 24px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.client-care-panel__title {
  font-weight: 800;
  margin-bottom: 12px;
  font-size: 15px;
}

.client-care-saving {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.client-care-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}

.client-care-wip {
  padding: clamp(28px, 5vw, 48px);
  border-radius: 20px;
  border: 1px solid rgba(124, 92, 255, 0.28);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(124, 92, 255, 0.2), transparent 50%),
    var(--surface);
  max-width: 640px;
}

.client-care-wip--soft {
  border-color: var(--navbar-edge);
  background: var(--surface);
}

.client-care-wip__badge {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(25, 224, 255, 0.12);
  border: 1px solid rgba(25, 224, 255, 0.28);
  margin-bottom: 14px;
}

.client-care-wip h2 {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 3vw, 1.55rem);
}

.client-care-wip p {
  margin: 0 0 18px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 46ch;
}

.client-care-wip__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.client-care-wip__ghost {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.client-care-hw {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.client-care-hw-item {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--navbar-edge);
  background: var(--surface);
}

.client-care-hw-item__date {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.client-care-hw-item p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.55;
}

.client-care-hw-item__focus {
  margin-top: 10px;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 860px) {
  .client-care-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .client-care-tabs {
    width: 100%;
    justify-content: stretch;
  }

  .client-care-tab {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
  }
}

@media (max-width: 480px) {
  .client-care-hero {
    padding: 18px;
  }

  .client-care-inner {
    padding-top: 16px;
  }
}

html[data-theme='light'] .client-care-stage__glow {
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(124, 92, 255, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 40% at 95% 20%, rgba(25, 160, 200, 0.08), transparent 50%);
}

html[data-theme='light'] .client-care-tabs {
  background: rgba(15, 23, 42, 0.04);
}
.client-progress {
  width: min(960px, 94vw);
  margin: 0 auto;
  padding: 24px 0 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.client-progress__hero {
  padding: 20px 22px;
}

.client-progress__hero h1 {
  margin: 0 0 8px;
  font-size: 1.6rem;
  font-weight: 800;
}

.client-progress__hero p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 56ch;
}

.client-progress__error {
  padding: 12px 14px;
  color: #ffb4b4;
  border: 1px solid rgba(255, 107, 107, 0.35);
}

.client-progress__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.client-progress__stat {
  padding: 16px;
  text-align: center;
}

.client-progress__stat-n {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent);
}

.client-progress__stat-l {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.client-progress__two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.client-progress__panel {
  padding: 18px;
}

.client-progress__panel h2 {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

.client-progress__muted {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.client-progress__link {
  display: inline-block;
  margin-top: 12px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}

.client-progress__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.client-progress__list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: 13px;
}

.client-progress__list a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.client-progress__list span:last-child {
  color: var(--text-muted);
  white-space: nowrap;
}

.client-progress__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.client-progress__timeline li {
  padding: 10px 12px;
  border-left: 3px solid var(--primary);
  background: var(--surface-2);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.client-progress__tl-title {
  font-weight: 700;
  font-size: 14px;
}

.client-progress__tl-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
}

@media (max-width: 800px) {
  .client-progress__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .client-progress__two {
    grid-template-columns: 1fr;
  }
}
.psy-mini {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 18px;
  background: var(--card, #ffffff);
  border: 1px solid var(--card-border, #d8d2ee);
  border-radius: var(--radius-card, 20px);
  box-shadow: var(--shadow-card);
  color: var(--ink, #211e2b);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.psy-mini:hover {
  border-color: var(--brand, #6c5bd4);
  box-shadow: var(--shadow-card-hover);
}

.psy-mini__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.psy-mini__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.psy-mini__top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.psy-mini__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--brand-soft, #efebfc);
  color: var(--brand-deep, #5546b8);
  display: grid;
  place-items: center;
  font-family: var(--font-display, Georgia, serif);
  font-weight: 600;
  font-size: 28px;
}

.psy-mini__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.psy-mini__head {
  min-width: 0;
  flex: 1;
}

.psy-mini__name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

.psy-mini__name {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.psy-mini__badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--sage, #3e8a6e);
  background: var(--sage-soft, #e3f1ea);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}

.psy-mini__sub {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ink-soft, #565165);
  line-height: 1.4;
}

.psy-mini__rating {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-muted, #8a8496);
}

.psy-mini__bio {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.psy-mini__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.psy-mini__tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--paper-soft, #ece9f8);
  border: 1px solid var(--line);
  color: var(--ink);
}

.psy-mini__tag.is-match {
  background: var(--sage-soft, #e3f1ea);
  border-color: transparent;
  color: var(--sage, #3e8a6e);
  font-weight: 600;
}

.psy-mini__tag--more {
  color: var(--ink-muted);
}

.psy-mini__meta {
  display: grid;
  gap: 6px;
  margin-top: auto;
}

.psy-mini__price {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.psy-mini__slot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
}

.psy-mini__slot-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage, #3e8a6e);
  flex-shrink: 0;
}

.psy-mini__match {
  margin: 0;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.4;
}

.psy-mini__actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.psy-mini__cta,
.psy-mini__write {
  padding: 8px 14px !important;
  font-size: 13px !important;
}

.psy-mini--compact .psy-mini__avatar {
  width: 64px;
  height: 64px;
  font-size: 24px;
}
.client-match-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  background-image: none;
}

.client-match {
  flex: 1;
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 64px;
}

.client-match__hero {
  margin-bottom: 28px;
}

.client-match__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.client-match__step {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.client-match__step:disabled {
  cursor: default;
  opacity: 1;
}

.client-match__step.is-done {
  background: var(--sage-soft);
  color: var(--sage);
  border-color: transparent;
  cursor: pointer;
}

.client-match__step.is-active {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: transparent;
}

.client-match__panel {
  padding: 24px;
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
}

.client-match__options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.client-match__options--2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 720px) {
  .client-match__options,
  .client-match__options--2 {
    grid-template-columns: 1fr;
  }
}

.client-match__option {
  text-align: left;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  display: grid;
  gap: 4px;
  font-family: var(--font-ui);
  transition: box-shadow 0.18s ease, border-color 0.15s ease, background 0.15s ease;
}

.client-match__option:hover {
  box-shadow: var(--shadow-card-hover);
}

.client-match__option strong {
  font-size: 15px;
}

.client-match__option span {
  font-size: 13px;
  color: var(--ink-muted);
}

.client-match__option.is-on {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.client-match__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.client-match__chip {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  color: var(--ink);
  font-size: 13px;
  font-family: var(--font-ui);
  cursor: pointer;
}

.client-match__chip.is-on {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--brand);
  font-weight: 600;
}

.client-match__chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.client-match__input,
.client-match__notes textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
}

.client-match__input:focus,
.client-match__notes textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-soft);
  border-color: var(--brand);
}

.client-match__notes {
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}

.client-match__notes textarea {
  font-weight: 400;
  resize: vertical;
}

.client-match__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.client-match__error {
  padding: 12px 14px;
  border-radius: 12px;
  background: #fde8e8;
  color: #b42318;
  margin-bottom: 16px;
  font-size: 14px;
}

.client-match__relax {
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--peach-soft);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}

.client-match__results-head {
  margin-bottom: 18px;
}

.client-match__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 800px) {
  .client-match__grid {
    grid-template-columns: 1fr;
  }
}

.client-match__empty {
  text-align: left;
}
.client-cert-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.client-cert-stage {
  position: relative;
  flex: 1;
  overflow: auto;
}

.client-cert-stage__glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 15% 0%, rgba(124, 92, 255, 0.28), transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgba(25, 224, 255, 0.14), transparent 50%);
}

.client-cert-layout {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 28px) 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(20px, 4vw, 36px);
  align-items: center;
  box-sizing: border-box;
}

.client-cert-visual {
  display: grid;
  place-items: center;
}

.client-cert-card {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 5 / 6.2;
  padding: 28px 24px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.1), transparent 35%),
    linear-gradient(145deg, #2a2440 0%, #1a1d28 55%, #152028 100%);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.4);
  color: #f5f5f7;
}

.client-cert-card__seal {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(25, 224, 255, 0.16);
  border: 1px solid rgba(25, 224, 255, 0.35);
  color: #9aecff;
}

.client-cert-card__label {
  margin-top: 28px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 600;
}

.client-cert-card__title {
  margin-top: 8px;
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
}

.client-cert-card__text {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  max-width: 28ch;
}

.client-cert-card__foil {
  position: absolute;
  right: -40px;
  bottom: -30px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.55), transparent 65%);
  filter: blur(2px);
}

.client-cert-form-wrap h1 {
  margin: 0 0 8px;
  font-size: clamp(1.55rem, 3vw, 2rem);
  font-weight: 800;
}

.client-cert-lead {
  margin: 0 0 22px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 42ch;
}

.client-cert-gift {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(25, 224, 255, 0.22);
  background:
    linear-gradient(145deg, rgba(25, 224, 255, 0.1), transparent 60%),
    var(--surface-2);
}

.client-cert-gift__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.client-cert-gift p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  font-weight: 600;
}

.client-cert-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.client-cert-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.client-cert-form input,
.client-cert-form textarea {
  border-radius: 12px;
  border: 1px solid var(--navbar-edge);
  background: var(--bg);
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
  font-weight: 400;
}

.client-cert-form input:focus,
.client-cert-form textarea:focus {
  outline: none;
  border-color: rgba(25, 224, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(25, 224, 255, 0.12);
}

.client-cert-submit {
  margin-top: 4px;
  width: 100%;
  justify-content: center;
  padding: 12px 18px;
  font-weight: 700;
}

.client-cert-error {
  color: #ffb4b4;
  font-size: 13px;
}

.client-cert-ok {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 2px;
}

.client-cert-ok strong {
  font-size: 1.1rem;
  color: var(--success);
}

.client-cert-ok span {
  color: var(--text-muted);
  line-height: 1.45;
  font-size: 14px;
}

@media (max-width: 860px) {
  .client-cert-layout {
    grid-template-columns: 1fr;
    max-width: 520px;
  }

  .client-cert-card {
    aspect-ratio: auto;
    min-height: 240px;
  }
}
[data-lk-theme]{font-size:var(--lk-font-size);font-family:var(--lk-font-family);color:var(--lk-fg)}[data-lk-theme] .lk-list{list-style:none;margin:0;padding:0}[data-lk-theme] .lk-form-control{font-family:var(--lk-font-family);padding:.625rem 1rem;background-color:var(--lk-control-bg);border:1px solid var(--lk-border-color);border-radius:var(--lk-border-radius)}[data-lk-theme=default]{color-scheme:dark;--lk-bg: #111;--lk-bg2: rgb(29.75, 29.75, 29.75);--lk-bg3: rgb(42.5, 42.5, 42.5);--lk-bg4: rgb(55.25, 55.25, 55.25);--lk-bg5: #444444;--lk-fg: #fff;--lk-fg2: rgb(244.8, 244.8, 244.8);--lk-fg3: rgb(234.6, 234.6, 234.6);--lk-fg4: rgb(224.4, 224.4, 224.4);--lk-fg5: rgb(214.2, 214.2, 214.2);--lk-border-color: rgba(255, 255, 255, 0.1);--lk-accent-fg: #fff;--lk-accent-bg: #1f8cf9;--lk-accent2: rgb(50.867826087, 150.2, 249.532173913);--lk-accent3: rgb(70.7356521739, 160.4, 250.0643478261);--lk-accent4: rgb(90.6034782609, 170.6, 250.5965217391);--lk-danger-fg: #fff;--lk-danger: #f91f31;--lk-danger2: rgb(249.532173913, 50.867826087, 67.2713043478);--lk-danger3: rgb(250.0643478261, 70.7356521739, 85.5426086957);--lk-danger4: rgb(250.5965217391, 90.6034782609, 103.8139130435);--lk-success-fg: #fff;--lk-success: #1ff968;--lk-success2: rgb(50.867826087, 249.532173913, 117.3930434783);--lk-success3: rgb(70.7356521739, 250.0643478261, 130.7860869565);--lk-success4: rgb(90.6034782609, 250.5965217391, 144.1791304348);--lk-control-fg: var(--lk-fg);--lk-control-bg: var(--lk-bg2);--lk-control-hover-bg: var(--lk-bg3);--lk-control-active-bg: var(--lk-bg4);--lk-control-active-hover-bg: var(--lk-bg5);--lk-connection-excellent: #06db4d;--lk-connection-good: #f9b11f;--lk-connection-poor: #f91f31;--lk-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--lk-font-size: 16px;--lk-line-height: 1.5;--lk-border-radius: 0.5rem;--lk-box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);--lk-drop-shadow: rgba(255, 255, 255, 0.2) 0px 0px 24px;--lk-grid-gap: 0.5rem;--lk-control-bar-height: 69px;--lk-chat-header-height: 69px}.lk-button,.lk-start-audio-button,.lk-chat-toggle,.lk-disconnect-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1rem;color:var(--lk-control-fg);background-image:none;background-color:var(--lk-control-bg);border:0;border-radius:var(--lk-border-radius);cursor:pointer;white-space:nowrap;font-size:inherit;line-height:inherit;user-select:none}.lk-button:not(:disabled):hover,.lk-start-audio-button:not(:disabled):hover,.lk-chat-toggle:not(:disabled):hover,.lk-disconnect-button:not(:disabled):hover{background-color:var(--lk-control-hover-bg)}.lk-button>svg,.lk-start-audio-button>svg,.lk-chat-toggle>svg,.lk-disconnect-button>svg{overflow:visible}.lk-button[aria-pressed=true],[aria-pressed=true].lk-start-audio-button,[aria-pressed=true].lk-chat-toggle,[aria-pressed=true].lk-disconnect-button{background-color:var(--lk-control-active-bg)}.lk-button[aria-pressed=true]:hover,[aria-pressed=true].lk-start-audio-button:hover,[aria-pressed=true].lk-chat-toggle:hover,[aria-pressed=true].lk-disconnect-button:hover{background-color:var(--lk-control-active-hover-bg)}.lk-button[data-lk-source=screen_share][data-lk-enabled=true],[data-lk-source=screen_share][data-lk-enabled=true].lk-start-audio-button,[data-lk-source=screen_share][data-lk-enabled=true].lk-chat-toggle,[data-lk-source=screen_share][data-lk-enabled=true].lk-disconnect-button{background-color:var(--lk-accent-bg)}.lk-button[data-lk-source=screen_share][data-lk-enabled=true]:hover,[data-lk-source=screen_share][data-lk-enabled=true].lk-start-audio-button:hover,[data-lk-source=screen_share][data-lk-enabled=true].lk-chat-toggle:hover,[data-lk-source=screen_share][data-lk-enabled=true].lk-disconnect-button:hover{background-color:var(--lk-accent2)}.lk-button:disabled,.lk-start-audio-button:disabled,.lk-chat-toggle:disabled,.lk-disconnect-button:disabled{opacity:.5}.lk-button-group{display:inline-flex;align-items:stretch;height:100%}.lk-button-group>.lk-button:first-child,.lk-button-group>.lk-start-audio-button:first-child,.lk-button-group>.lk-chat-toggle:first-child,.lk-button-group>.lk-disconnect-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.lk-button-group-menu{position:relative;flex-shrink:0}.lk-button-group-menu>.lk-button,.lk-button-group-menu>.lk-start-audio-button,.lk-button-group-menu>.lk-chat-toggle,.lk-button-group-menu>.lk-disconnect-button{height:100%;border-top-left-radius:0;border-bottom-left-radius:0}.lk-button-group-menu>.lk-button::after,.lk-button-group-menu>.lk-start-audio-button::after,.lk-button-group-menu>.lk-chat-toggle::after,.lk-button-group-menu>.lk-disconnect-button::after{margin-left:0}.lk-button-menu::after{display:inline-block;content:"";width:.5em;height:.5em;margin-top:-0.25rem;margin-left:.5rem;border-left:.125em solid;border-bottom:.125em solid;transform:rotate(-45deg);transform-origin:center center}.lk-disconnect-button{font-weight:600;color:var(--lk-danger);border:1px solid var(--lk-danger)}.lk-disconnect-button:not(:disabled):hover{--lk-control-hover-bg: var(--lk-danger2);color:var(--lk-danger-fg)}.lk-disconnect-button:not(:disabled):active{--lk-control-hover-bg: var(--lk-danger3);color:var(--lk-danger-fg)}.lk-chat-toggle{position:relative}.lk-chat-toggle[data-lk-unread-msgs]:not([data-lk-unread-msgs="0"]):after{content:attr(data-lk-unread-msgs);position:absolute;top:0;left:0;padding:.25rem;margin-left:.25rem;margin-top:.25rem;border-radius:50%;font-size:.5rem;line-height:.75;background:var(--lk-accent-bg)}.lk-media-device-select:not(:last-child){padding-bottom:.5rem;margin-bottom:.75rem;border-bottom:1px solid var(--lk-border-color)}.lk-media-device-select li:not(:last-child){margin-bottom:.25rem}.lk-media-device-select li>.lk-button{width:100%;justify-content:start;padding-block:.5rem}.lk-media-device-select li:not([data-lk-active=true])>.lk-button:not(:disabled):hover{background-color:var(--lk-bg3)}.lk-media-device-select [data-lk-active=false]>.lk-button:hover{cursor:pointer;background-color:rgba(0,0,0,.05)}.lk-media-device-select [data-lk-active=true]>.lk-button{color:var(--lk-accent-fg);background-color:var(--lk-accent-bg)}.lk-device-menu{width:max-content;position:absolute;top:0;left:0;z-index:5;min-width:10rem;padding:.5rem;margin-bottom:.25rem;white-space:nowrap;background-color:var(--lk-bg2);border:1px solid var(--lk-border-color);border-radius:.75rem;box-shadow:var(--lk-box-shadow)}.lk-device-menu-heading{padding:.25rem .5rem;font-weight:bold;opacity:.65}.lk-start-audio-button{color:var(--lk-accent-fg);background-color:var(--lk-accent-bg)}@media screen and (max-width: 600px){.lk-start-audio-button{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%)}}.lk-pagination-control{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;align-items:stretch;background-color:var(--lk-control-bg);border-radius:var(--lk-border-radius);transition:opacity ease-in-out .15s;opacity:0}.lk-pagination-control:hover{opacity:1}.lk-pagination-control>.lk-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.lk-pagination-control>.lk-button:first-child>svg{transform:rotate(180deg)}.lk-pagination-control>.lk-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.lk-pagination-count{padding:.5rem .875rem;border-inline:1px solid var(--lk-bg)}[data-lk-user-interaction=true].lk-pagination-control{opacity:1}.lk-pagination-indicator{position:absolute;height:var(--lk-grid-gap);background-color:var(--lk-bg2);width:fit-content;padding:.2rem .5rem;bottom:calc(var(--lk-grid-gap)/2);left:50%;transform:translateX(-50%);border-radius:2rem;opacity:1;display:flex;gap:.2rem;align-items:center}.lk-pagination-indicator span{display:inline-block;width:.4rem;height:.4rem;border-radius:9999999px;background-color:var(--lk-fg);opacity:.35;transition:opacity linear .2s}.lk-pagination-indicator span[data-lk-active]{opacity:.9}.lk-grid-layout{--lk-col-count: 1;--lk-row-count: 1;display:grid;grid-template-columns:repeat(var(--lk-col-count), minmax(0, 1fr));grid-auto-rows:minmax(0, 1fr);grid-gap:var(--lk-grid-gap);width:100%;height:100%;max-width:100%;max-height:100%;padding:var(--lk-grid-gap)}.lk-grid-layout[data-lk-pagination=true]{padding-bottom:calc(var(--lk-grid-gap)*2)}.lk-focus-layout{display:grid;grid-template-columns:1fr 5fr;gap:var(--lk-grid-gap);width:100%;max-height:100%;padding:var(--lk-grid-gap)}.lk-focused-participant{position:relative}.lk-focused-participant .lk-pip-track{position:absolute;top:10px;right:10px;width:20%;height:auto}@media(max-width: 600px){.lk-focus-layout{grid-template-columns:1fr;grid-template-rows:5fr 1fr}.lk-carousel{order:1}}.lk-carousel{max-height:100%;display:flex;gap:var(--lk-grid-gap)}.lk-carousel>*{flex-shrink:0;aspect-ratio:16/10;scroll-snap-align:start}.lk-carousel[data-lk-orientation=vertical]{flex-direction:column;scroll-snap-type:y mandatory;overflow-y:auto;overflow-x:hidden}.lk-carousel[data-lk-orientation=vertical]>*{--lk-height-minus-gaps: calc(100% - calc(var(--lk-grid-gap) * calc(var(--lk-max-visible-tiles) - 1)));height:calc(var(--lk-height-minus-gaps)/var(--lk-max-visible-tiles))}.lk-carousel[data-lk-orientation=horizontal]{scroll-snap-type:x mandatory;overflow-y:hidden;overflow-x:auto}.lk-carousel[data-lk-orientation=horizontal]>*{--lk-width-minus-gaps: calc(100% - var(--lk-grid-gap) * (var(--lk-max-visible-tiles) - 1));width:calc(var(--lk-width-minus-gaps)/var(--lk-max-visible-tiles))}.lk-connection-quality{width:1.5rem;height:1.5rem}.lk-track-muted-indicator-camera,.lk-track-muted-indicator-microphone{position:relative;width:var(--lk-indicator-size, 1rem);height:var(--lk-indicator-size, 1rem);margin-inline-end:.25rem;transition:opacity .25s ease-in-out}.lk-track-muted-indicator-camera[data-lk-muted=true]{opacity:.5}.lk-track-muted-indicator-microphone{--lk-bg: var(--lk-icon-mic)}.lk-track-muted-indicator-microphone[data-lk-muted=true]{opacity:.5}.lk-participant-name{font-size:.875rem}.lk-participant-media-video{width:100%;height:100%;object-fit:cover;object-position:center;background-color:#000}.lk-participant-media-video[data-lk-orientation=landscape]{object-fit:cover}.lk-participant-media-video[data-lk-orientation=portrait],.lk-participant-media-video[data-lk-source=screen_share]{object-fit:contain;background-color:var(--lk-bg2)}.lk-participant-media-audio{width:auto}[data-lk-facing-mode=user] .lk-participant-media-video[data-lk-local-participant=true][data-lk-source=camera]{transform:rotateY(180deg)}.lk-audio-visualizer{width:100%;height:100%;min-height:160px;background:var(--lk-bg-control);aspect-ratio:16/9;border-radius:.5rem;display:flex;justify-content:space-around;align-items:center}.lk-audio-visualizer>rect{fill:var(--lk-accent-bg);transition:transform 100ms cubic-bezier(0.19, 0.02, 0.09, 1)}.lk-audio-visualizer>path{stroke:var(--lk-accent-bg);transition:100ms cubic-bezier(0.19, 0.02, 0.09, 1)}.lk-audio-bar-visualizer{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--lk-bg);gap:var(--lk-va-bar-gap, 24px)}.lk-audio-bar-visualizer>.lk-audio-bar{transform-origin:"center";height:100%;width:var(--lk-va-bar-width, 12px);border-radius:var(--lk-va-bar-border-radius, 32px);background-color:var(--lk-va-bar-bg, rgba(136, 136, 136, 0.2));transition:background-color .25s ease-out}.lk-audio-bar-visualizer[data-lk-va-state=speaking]>.lk-audio-bar,.lk-audio-bar-visualizer>.lk-audio-bar.lk-highlighted,.lk-audio-bar-visualizer>[data-lk-highlighted=true]{background-color:var(--lk-fg, rgb(136, 136, 136));transition:none}.lk-audio-bar-visualizer[data-lk-va-state=thinking]{transition:background-color .15s ease-out}.lk-participant-tile{--lk-speaking-indicator-width: 2.5px;position:relative;display:flex;flex-direction:column;gap:.375rem;overflow:hidden;border-radius:var(--lk-border-radius)}.lk-participant-tile::after{content:"";position:absolute;top:0;bottom:0;left:0;right:0;border-radius:var(--lk-border-radius);border:0px solid var(--lk-accent-bg);transition-property:border opacity;transition-delay:.5s;transition-duration:.4s;pointer-events:none}.lk-participant-tile[data-lk-speaking=true]:not([data-lk-source=screen_share])::after{transition-delay:0s;transition-duration:.2s;border-width:var(--lk-speaking-indicator-width)}.lk-participant-tile .lk-focus-toggle-button{position:absolute;top:.25rem;right:.25rem;padding:.25rem;background-color:rgba(0,0,0,.5);border-radius:calc(var(--lk-border-radius)/2);opacity:0;transition:opacity .2s ease-in-out;transition-delay:.2s}.lk-participant-tile:hover .lk-focus-toggle-button,.lk-participant-tile:focus .lk-focus-toggle-button{opacity:1;transition-delay:0}.lk-participant-tile .lk-connection-quality{opacity:0;transition:opacity .2s ease-in-out;transition-delay:.2s}.lk-participant-tile .lk-connection-quality[data-lk-quality=poor]{opacity:1;transition-delay:0}.lk-participant-tile:hover .lk-connection-quality,.lk-participant-tile:focus .lk-connection-quality{opacity:1;transition-delay:0}.lk-participant-tile .lk-participant-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--lk-bg2);opacity:0;transition:opacity .2s ease-in-out;pointer-events:none;border-radius:var(--lk-border-radius)}.lk-participant-tile .lk-participant-placeholder svg{height:100%;width:auto;padding:10%}.lk-participant-tile[data-lk-video-muted=true][data-lk-source=camera] .lk-participant-placeholder{opacity:1}.lk-participant-metadata{position:absolute;right:.25rem;bottom:.25rem;left:.25rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;line-height:1}.lk-participant-metadata-item{display:flex;align-items:center;padding:.25rem;background-color:rgba(0,0,0,.5);border-radius:calc(var(--lk-border-radius)/2)}.lk-toast{position:fixed;top:.75rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background-color:var(--lk-bg);border:1px solid var(--lk-border-color);border-radius:var(--lk-border-radius);box-shadow:var(--lk-box-shadow)}.lk-spinner{animation:lk-rotate 2s infinite linear}@keyframes lk-rotate{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.lk-room-container{background-color:var(--lk-bg);line-height:var(--lk-line-height)}[data-lk-theme]{font-size:var(--lk-font-size);font-family:var(--lk-font-family);color:var(--lk-fg)}[data-lk-theme] .lk-list{list-style:none;margin:0;padding:0}[data-lk-theme] .lk-form-control{font-family:var(--lk-font-family);padding:.625rem 1rem;background-color:var(--lk-control-bg);border:1px solid var(--lk-border-color);border-radius:var(--lk-border-radius)}.lk-room-container{position:relative;width:100%;height:100%;--lk-has-imported-styles: "true"}.lk-room-container *[class^=lk-],.lk-room-container *[class*=" lk-"]{box-sizing:border-box}.lk-audio-conference{position:relative;width:100%;height:100%}.lk-audio-conference-stage{width:100%;height:100%;display:grid;grid-template-columns:repeat(3, 1fr);gap:10px}.lk-chat{display:grid;grid-template-rows:var(--lk-chat-header-height) 1fr var(--lk-control-bar-height);width:clamp(200px,55ch,60ch);background-color:var(--lk-bg2);border-left:1px solid var(--lk-border-color);align-items:end}.lk-chat-header{height:var(--lk-chat-header-height);padding:.75rem;position:relative;display:flex;align-items:center;justify-content:center}.lk-chat-header .lk-close-button{position:absolute;right:0;transform:translateX(-50%);background-color:rgba(0,0,0,0)}.lk-chat-header .lk-close-button:hover{background-color:var(--lk-control-active-hover-bg)}.lk-chat-messages{display:flex;width:100%;max-height:100%;flex-direction:column;gap:.25rem;overflow:auto}.lk-chat-entry{display:flex;flex-direction:column;gap:.25rem;margin:0 .25rem}.lk-chat-entry .lk-meta-data{font-size:.75rem;color:var(--lk-fg5);white-space:nowrap;padding:0 .3rem;display:flex}.lk-chat-entry .lk-meta-data .lk-participant-name{margin-top:1rem}.lk-chat-entry .lk-meta-data .lk-timestamp{margin-left:auto;align-self:flex-end}.lk-chat-entry .lk-edit-button{background:none;float:right;margin:0;padding:0 .25rem;border-radius:0;font-size:12px}.lk-chat-entry .lk-message-body{display:inline-block;border-radius:15px;padding:.25rem .75rem;word-break:break-word;width:fit-content;max-width:calc(100% - 32px)}.lk-chat-entry[data-lk-message-origin=local] .lk-message-body{background-color:var(--lk-bg5)}.lk-chat-entry[data-lk-message-origin=remote] .lk-message-body{background-color:var(--lk-accent4)}.lk-chat-entry a{text-decoration:underline;color:inherit}.lk-chat-entry *{margin-block-start:.25em;margin-block-end:.25em}.lk-chat-entry:last-child{margin-bottom:.25rem}.lk-chat-form{display:flex;gap:.75rem;padding:.75rem;border-top:1px solid var(--lk-border-color);max-height:var(--lk-control-bar-height)}.lk-chat-form-input{font-size:inherit;line-height:inherit;width:100%}@media(max-width: 600px){.lk-chat{position:fixed;top:0;right:0;max-width:100%;bottom:var(--lk-control-bar-height)}}.lk-control-bar,.lk-agent-control-bar{display:flex;gap:.5rem;align-items:center;justify-content:center;padding:.75rem;border-top:1px solid var(--lk-border-color);max-height:var(--lk-control-bar-height)}.lk-agent-control-bar{height:var(--lk-control-bar-height);--lk-bg: transparent;--lk-va-bar-width: 2px;--lk-va-bar-gap: 4px;--lk-va-bar-border-radius: 1px}.lk-agent-control-bar .lk-audio-bar-visualizer .lk-audio-bar.lk-highlighted{filter:none}.lk-prejoin{background-color:var(--lk-bg);line-height:var(--lk-line-height)}[data-lk-theme]{font-size:var(--lk-font-size);font-family:var(--lk-font-family);color:var(--lk-fg)}[data-lk-theme] .lk-list{list-style:none;margin:0;padding:0}[data-lk-theme] .lk-form-control{font-family:var(--lk-font-family);padding:.625rem 1rem;background-color:var(--lk-control-bg);border:1px solid var(--lk-border-color);border-radius:var(--lk-border-radius)}.lk-prejoin{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;padding:1rem;gap:1rem;margin-inline:auto;background-color:var(--lk-bg);width:min(100%,480px);align-items:stretch}.lk-prejoin .lk-video-container{position:relative;width:100%;height:auto;aspect-ratio:16/10;background-color:#000;border-radius:var(--lk-border-radius);overflow:hidden}.lk-prejoin .lk-video-container video,.lk-prejoin .lk-video-container .lk-camera-off-note{display:block;width:100%;height:100%;object-fit:cover}.lk-prejoin .lk-video-container video[data-lk-facing-mode=user]{transform:rotateY(180deg)}.lk-prejoin .lk-video-container .lk-camera-off-note{position:absolute;top:0px;left:0px;width:100%;aspect-ratio:16/10;background-color:#000;display:grid;place-items:center}.lk-prejoin .lk-video-container .lk-camera-off-note>*{height:70%;max-width:100%}.lk-prejoin .lk-audio-container{display:none}.lk-prejoin .lk-audio-container audio{width:100%;height:auto}.lk-prejoin .lk-button-group-container{display:flex;flex-wrap:nowrap;gap:1rem}.lk-prejoin .lk-button-group-container>.lk-button-group{width:50%}.lk-prejoin .lk-button-group-container>.lk-button-group>.lk-button{justify-content:left}.lk-prejoin .lk-button-group-container>.lk-button-group>.lk-button:first-child{width:100%}@media(max-width: 400px){.lk-prejoin .lk-button-group-container{flex-wrap:wrap}.lk-prejoin .lk-button-group-container>.lk-button-group{width:100%}}.lk-prejoin .lk-username-container{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:100%}.lk-prejoin .lk-join-button{--lk-control-fg: var(--lk-accent-fg);--lk-control-bg: var(--lk-accent-bg);--lk-control-hover-bg: var(--lk-accent2);--lk-control-active-bg: var(--lk-accent3);--lk-control-active-hover-bg: var(--lk-accent4);background-color:var(--lk-control-bg)}.lk-prejoin .lk-join-button:hover{background-color:var(--lk-control-hover-bg)}.lk-focus-layout-wrapper,.lk-grid-layout-wrapper{position:relative;display:flex;justify-content:center;width:100%;height:calc(100% - var(--lk-control-bar-height))}.lk-grid-layout-wrapper{flex-direction:column;align-items:center}.lk-focus-layout-wrapper{align-items:stretch}.lk-video-conference{position:relative;display:flex;align-items:stretch;height:100%}.lk-video-conference-inner{display:flex;flex-direction:column;align-items:stretch;width:100%}.lk-settings-menu-modal{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background:var(--lk-bg);padding:1rem;border-radius:var(--lk-border-radius);display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background-color:var(--lk-bg);border:1px solid var(--lk-border-color);border-radius:var(--lk-border-radius);box-shadow:var(--lk-box-shadow);min-width:50vw;min-height:50vh;max-width:100%;max-height:100%;overflow-y:auto}

/*# sourceMappingURL=index.css.map *//* ParticipantTile подставляет имя и metadata; поверх рисуем свой бейдж */
.voice-room-tile-host .lk-participant-name,
.voice-room-tile-host .lk-participant-metadata {
  display: none !important;
}

.voice-room-device-select--light {
  color-scheme: light;
}
.voice-room-device-select--dark {
  color-scheme: dark;
}
.voice-room-device-select--light option {
  background-color: #ffffff;
  color: #0f172a;
}
.voice-room-device-select--dark option {
  background-color: #1e293b;
  color: #f1f5f9;
}

/* ── In-call layout (Telemost-style dark UI) ── */
.voice-room-call {
  position: relative;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: #121212;
  color: #f5f5f5;
  overflow: hidden;
}

.voice-room-call--with-sidebar {
  grid-template-columns: minmax(0, 1fr) 320px;
}

.voice-room-call--mobile {
  max-width: 100vw;
  overflow-x: hidden;
}

.voice-room-stage-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-bottom: 96px;
  box-sizing: border-box;
}

.voice-room-stage {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #121212;
  overflow: hidden;
}

.voice-room-stage--grid {
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  padding: 16px 20px 12px;
  box-sizing: border-box;
}

.voice-room-stage--screenshare {
  align-items: center;
  justify-content: center;
}

.voice-room-grid {
  flex: 1;
  width: 100%;
  height: 100%;
  max-width: min(1280px, 100%);
  max-height: 100%;
  margin: 0 auto;
  display: grid;
  gap: 12px;
  padding: 0;
  box-sizing: border-box;
  place-content: stretch;
  place-items: stretch;
  min-height: 0;
  min-width: 0;
}

.voice-room-grid--count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

.voice-room-grid--count-3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.voice-room-grid--count-3 > .voice-room-tile:nth-child(3) {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, calc(50% - 6px));
}

.voice-room-grid--count-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* 5: два сверху, три снизу — без пустой ячейки */
.voice-room-grid--count-5 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.voice-room-grid--count-5 > .voice-room-tile:nth-child(1) { grid-column: 1 / 4; }
.voice-room-grid--count-5 > .voice-room-tile:nth-child(2) { grid-column: 4 / 7; }
.voice-room-grid--count-5 > .voice-room-tile:nth-child(3) { grid-column: 1 / 3; }
.voice-room-grid--count-5 > .voice-room-tile:nth-child(4) { grid-column: 3 / 5; }
.voice-room-grid--count-5 > .voice-room-tile:nth-child(5) { grid-column: 5 / 7; }

.voice-room-grid--count-6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* 7: три + три + один по центру */
.voice-room-grid--count-7 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.voice-room-grid--count-7 > .voice-room-tile:nth-child(7) {
  grid-column: 2 / 3;
  grid-row: 3;
}

.voice-room-grid--count-8 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.voice-room-grid--count-9 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  max-width: min(1400px, 100%);
}

.voice-room-tile {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  container-type: size;
  background: linear-gradient(135deg, #1a1a1a, #252525);
}

.voice-room-tile--speaking {
  box-shadow: inset 0 0 0 2px rgba(74, 222, 128, 0.82), inset 0 0 18px rgba(34, 197, 94, 0.22);
}

.voice-room-tile__video {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a, #252525);
}

.voice-room-tile__video--contain,
.voice-room-tile__video--contain video,
.voice-room-screenshare video {
  object-fit: contain !important;
}

.voice-room-tile__avatar-full {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 12px;
  box-sizing: border-box;
}

.voice-room-tile__avatar-full img {
  width: min(180px, 55cqmin);
  height: min(180px, 55cqmin);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  background: #121212;
  user-select: none;
  pointer-events: none;
  flex-shrink: 0;
}

.voice-room-tile__avatar-fallback {
  width: min(180px, 55cqmin);
  height: min(180px, 55cqmin);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, #2d2d2d, #404040);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.voice-room-tile__avatar-fallback svg {
  width: min(56px, 38cqmin);
  height: min(56px, 38cqmin);
}

.voice-room-tile__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  bottom: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  max-width: calc(100% - 20px);
  z-index: 2;
}

.voice-room-solo__name span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-room-mic-status {
  flex-shrink: 0;
  color: #e5e7eb;
  opacity: 0.95;
}

.voice-room-mic-status--off {
  color: #f87171;
}

.voice-room-ctrl-btn--round .voice-room-mic-status {
  color: inherit;
  opacity: 1;
}

.voice-room-tile__badge-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  background: #334155;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.voice-room-tile__badge-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice-room-tile__badge-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Solo participant — large centered avatar like Telemost */
.voice-room-solo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: 100%;
  padding: 24px;
}

.voice-room-solo__circle {
  width: min(220px, 42vw);
  height: min(220px, 42vw);
  border-radius: 50%;
  background: #ffffff;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

.voice-room-solo__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice-room-solo__circle--placeholder {
  background: linear-gradient(135deg, #2d2d2d, #404040);
}

.voice-room-solo__silhouette {
  color: #9ca3af;
  display: grid;
  place-items: center;
}

.voice-room-solo__name {
  position: absolute;
  bottom: 108px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  max-width: calc(100% - 48px);
  z-index: 2;
}

/* Screen share */
.voice-room-screenshare {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 16px 20px 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-room-screenshare__frame {
  width: 100%;
  height: 100%;
  max-height: 100%;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0a0a0a;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.voice-room-screenshare .voice-room-tile-host {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Bottom floating toolbar — три «островка»: слева / центр / справа */
.voice-room-toolbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  padding: 0 clamp(16px, 3vw, 32px);
  pointer-events: none;
}

.voice-room-toolbar__group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(40, 40, 40, 0.94);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  min-height: 48px;
  box-sizing: border-box;
}

.voice-room-toolbar__group--left {
  grid-column: 1;
  justify-self: start;
}

.voice-room-toolbar__group--center {
  grid-column: 2;
  justify-self: center;
}

.voice-room-toolbar__group--right {
  grid-column: 3;
  justify-self: end;
}

.voice-room-ctrl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}

.voice-room-ctrl-btn--round {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #f5f5f5;
  padding: 0;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
}

.voice-room-ctrl-btn--round svg {
  width: 22px;
  height: 22px;
  display: block;
}

.voice-room-ctrl-btn--round:hover {
  background: rgba(255, 255, 255, 0.18);
}

.voice-room-ctrl-btn--round.voice-room-ctrl-btn--muted {
  background: rgba(239, 68, 68, 0.22);
  color: #fecaca;
}

.voice-room-ctrl-btn--round.voice-room-ctrl-btn--muted:hover {
  background: rgba(239, 68, 68, 0.32);
}

.voice-room-ctrl-btn--round.lk-button[data-lk-enabled="false"],
.voice-room-ctrl-btn--round.lk-button[data-lk-source="microphone"][aria-pressed="false"],
.voice-room-ctrl-btn--round.lk-button[data-lk-source="camera"][aria-pressed="false"] {
  background: rgba(255, 255, 255, 0.1);
  color: #f5f5f5;
}

.voice-room-ctrl-btn--pill {
  height: 48px;
  border-radius: 999px;
  padding: 0 16px;
  background: transparent;
  color: #e5e5e5;
  font-size: 14px;
  font-weight: 600;
}

.voice-room-ctrl-btn--pill svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.voice-room-ctrl-btn--pill:hover,
.voice-room-ctrl-btn--pill.voice-room-ctrl-btn--active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.voice-room-ctrl-btn--hangup {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  padding: 0;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.5);
  flex-shrink: 0;
}

.voice-room-ctrl-btn--hangup:hover {
  background: #dc2626;
}

.voice-room-ctrl-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.voice-room-ctrl-btn--copied {
  background: rgba(34, 197, 94, 0.25) !important;
}

/* LiveKit TrackToggle inside toolbar buttons */
.voice-room-toolbar .lk-button {
  border: none;
  background: transparent;
  color: inherit;
  padding: 0;
  min-height: unset;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0;
  gap: 6px;
}

.voice-room-toolbar .lk-button svg {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0;
  display: block;
}

.voice-room-toolbar .voice-room-ctrl-btn--round.lk-button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  padding: 0 !important;
}

.voice-room-toolbar .voice-room-ctrl-btn--round.lk-button:hover {
  background: rgba(255, 255, 255, 0.18);
}

.voice-room-toolbar .voice-room-ctrl-btn--pill.lk-button {
  height: 48px;
  padding: 0 14px;
}

.voice-room-toolbar .voice-room-ctrl-btn--round.lk-button .lk-button-icon,
.voice-room-toolbar .voice-room-ctrl-btn--round.lk-button .lk-button-icon svg {
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  display: block;
}

/* Демонстрация: только наша иконка, без дубля от LiveKit */
.voice-room-toolbar .voice-room-ctrl-btn--screenshare.lk-button .lk-button-icon {
  display: none !important;
}

/* Sidebar panels */
.voice-room-sidebar {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 0;
  display: grid;
  background: rgba(24, 24, 24, 0.98);
}

.voice-room-sidebar--overlay {
  position: absolute;
  inset: 6px;
  border-left: none;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 25;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

.voice-room-sidebar__head {
  padding: 14px 16px;
  font-weight: 700;
  font-size: 15px;
  color: #f5f5f5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.voice-room-sidebar__body {
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.voice-room-sidebar__chat-form {
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 8px;
}

.voice-room-sidebar__chat-input {
  width: 100%;
  min-height: 40px;
  max-height: 180px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
  color: #f5f5f5;
  resize: none;
  font-family: inherit;
  font-size: 14px;
}

.voice-room-participant-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.voice-room-participant-row__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: #334155;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.voice-room-participant-row__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice-room-participant-row__name {
  font-size: 13px;
  font-weight: 600;
  color: #f5f5f5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-room-chat-msg__from {
  font-size: 12px;
  color: #93c5fd;
  margin-bottom: 2px;
}

.voice-room-chat-msg__text {
  line-height: 1.5;
  color: #e5e5e5;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

.voice-room-device-menu-anchor {
  position: relative;
  flex-shrink: 0;
}

.voice-room-device-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  z-index: 60;
  padding: 14px;
  min-width: 288px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(30, 30, 30, 0.98);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.voice-room-device-menu--mobile {
  position: fixed;
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  min-width: unset;
  width: auto;
  transform: none;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.voice-room-device-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 75;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.voice-room-device-menu__action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #f5f5f5;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.voice-room-device-menu__action--active {
  background: rgba(59, 130, 246, 0.22);
  border-color: rgba(59, 130, 246, 0.35);
}

.voice-room-audio-hint {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(40, 40, 40, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e5e5e5;
  font-size: 13px;
}

.voice-room-extra-hint {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 15;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #94a3b8;
  font-size: 12px;
}

@media (max-width: 900px) {
  .voice-room-toolbar {
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    padding: 0 max(8px, env(safe-area-inset-left, 0px)) 0 max(8px, env(safe-area-inset-right, 0px));
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    gap: 6px;
    align-items: end;
  }

  .voice-room-toolbar__group {
    gap: 4px;
    padding: 5px 6px;
    min-height: 44px;
  }

  .voice-room-toolbar__group--left {
    justify-self: start;
    max-width: 42vw;
  }

  .voice-room-toolbar__group--center {
    justify-self: stretch;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }

  .voice-room-toolbar__group--center.voice-room-toolbar__group--menu-open {
    overflow: visible;
  }

  .voice-room-toolbar__group--center::-webkit-scrollbar {
    display: none;
  }

  .voice-room-toolbar__group--right {
    justify-self: end;
    flex-shrink: 0;
  }

  .voice-room-toolbar__group--center .voice-room-ctrl-btn--pill span.voice-room-ctrl-label {
    display: none;
  }

  .voice-room-ctrl-btn--round {
    width: 40px;
    height: 40px;
  }

  .voice-room-ctrl-btn--round svg {
    width: 20px;
    height: 20px;
  }

  .voice-room-toolbar .voice-room-ctrl-btn--round.lk-button {
    width: 40px;
    height: 40px;
  }

  .voice-room-ctrl-btn--pill {
    height: 40px;
    min-width: 40px;
    padding: 0 10px;
  }

  .voice-room-ctrl-btn--pill svg {
    width: 18px;
    height: 18px;
  }

  .voice-room-ctrl-btn--hangup {
    width: 40px;
    height: 40px;
  }

  .voice-room-stage-wrap {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  .voice-room-stage--grid {
    padding: 10px 10px 6px;
  }

  .voice-room-grid {
    gap: 8px;
    max-width: 100%;
  }

  .voice-room-grid--count-3 > .voice-room-tile:nth-child(3) {
    width: min(100%, calc(66% - 6px));
  }

  .voice-room-grid--count-5,
  .voice-room-grid--count-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .voice-room-grid--count-5 > .voice-room-tile:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    width: auto;
    justify-self: stretch;
  }

  .voice-room-grid--count-5 > .voice-room-tile:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, calc(50% - 4px));
  }

  .voice-room-grid--count-6 > .voice-room-tile:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }

  .voice-room-grid--count-7,
  .voice-room-grid--count-8 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .voice-room-grid--count-7 > .voice-room-tile:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    width: auto;
    justify-self: stretch;
  }

  .voice-room-grid--count-7 > .voice-room-tile:nth-child(7) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, calc(50% - 4px));
  }

  .voice-room-grid--count-8 > .voice-room-tile:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }

  .voice-room-grid--count-9 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }

  .voice-room-grid--count-9 > .voice-room-tile:nth-child(9) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, calc(50% - 4px));
  }

  .voice-room-tile__badge {
    top: 6px;
    right: 6px;
    left: auto;
    padding: 3px 8px;
    font-size: 11px;
    gap: 4px;
    max-width: calc(100% - 12px);
  }

  .voice-room-tile__badge-avatar {
    width: 18px;
    height: 18px;
  }

  .voice-room-solo {
    padding: 16px 12px;
  }

  .voice-room-solo__circle {
    width: min(180px, 52vw);
    height: min(180px, 52vw);
  }

  .voice-room-solo__name {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    font-size: 13px;
    padding: 5px 12px;
    max-width: calc(100% - 24px);
  }

  .voice-room-screenshare {
    padding: 10px 10px 4px;
  }

  .voice-room-screenshare__frame {
    border-radius: 10px;
  }

  .voice-room-audio-hint {
    top: max(12px, env(safe-area-inset-top, 0px));
    max-width: calc(100% - 24px);
    font-size: 12px;
    text-align: center;
  }

  .voice-room-extra-hint {
    top: max(10px, env(safe-area-inset-top, 0px));
    right: 10px;
    font-size: 11px;
  }

  .voice-room-sidebar--overlay {
    inset: max(8px, env(safe-area-inset-top, 0px)) 8px max(72px, calc(68px + env(safe-area-inset-bottom, 0px))) 8px;
  }
}

@media (max-width: 480px) {
  .voice-room-toolbar__group--left {
    max-width: 38vw;
  }

  .voice-room-ctrl-btn--round {
    width: 38px;
    height: 38px;
  }

  .voice-room-toolbar .voice-room-ctrl-btn--round.lk-button {
    width: 38px;
    height: 38px;
  }

  .voice-room-ctrl-btn--pill {
    height: 38px;
    min-width: 38px;
    padding: 0 8px;
  }

  .voice-room-ctrl-btn--hangup {
    width: 38px;
    height: 38px;
  }

  .voice-room-toolbar__group {
    min-height: 42px;
    padding: 4px 5px;
    gap: 3px;
  }

  .voice-room-stage-wrap {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }

  /* На узком экране — участники друг под другом */
  .voice-room-grid--count-2 {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .voice-room-grid--count-3 > .voice-room-tile:nth-child(3) {
    width: 100%;
    justify-self: stretch;
  }

  .voice-room-solo__circle {
    width: min(160px, 58vw);
    height: min(160px, 58vw);
  }

  .voice-room-solo__name {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Pre-join (§19) — always dark, room continuity ── */
.voice-room-prejoin {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #121212;
  color: #f5f5f5;
}

.voice-room-prejoin__top {
  padding: 18px 24px 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: rgba(245, 245, 245, 0.78);
  letter-spacing: 0.01em;
}

.voice-room-prejoin__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px 32px;
}

.voice-room-prejoin__card {
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.voice-room-prejoin__self {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.voice-room-prejoin__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  background: #000;
}

.voice-room-prejoin__avatar {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, #2a2a2a, #141414 70%);
}

.voice-room-prejoin__avatar-img,
.voice-room-prejoin__avatar-fallback {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

.voice-room-prejoin__avatar-fallback {
  display: grid;
  place-items: center;
  background: #3d348b;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
}

.voice-room-prejoin__toggles {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 2;
}

.voice-room-prejoin__toggle {
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  line-height: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.voice-room-prejoin__toggle svg {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  margin: 0;
}

.voice-room-prejoin__toggle:hover {
  background: rgba(255, 255, 255, 0.22);
}

.voice-room-prejoin__toggle.is-off {
  background: #d4574e;
  color: #fff;
}

.voice-room-prejoin__devices {
  display: grid;
  gap: 10px;
}

.voice-room-prejoin__device-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: center;
}

.voice-room-prejoin__device-row > svg {
  display: block;
  width: 18px;
  height: 18px;
  justify-self: center;
  opacity: 0.7;
  stroke: currentColor;
  fill: none;
}

.voice-room-prejoin__device-row select {
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #1e1e1e;
  color: #f5f5f5;
  font-size: 14px;
  line-height: 1.2;
}

.voice-room-prejoin__field label {
  display: block;
  font-size: 13px;
  color: rgba(245, 245, 245, 0.65);
  margin-bottom: 6px;
}

.voice-room-prejoin__field input {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #1e1e1e;
  color: #f5f5f5;
  font-size: 15px;
  line-height: 1.2;
}

.voice-room-prejoin__trust {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(245, 245, 245, 0.55);
  text-align: center;
  margin: 0;
}

.voice-room-prejoin__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.voice-room-prejoin__join {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 14px 22px;
  border-radius: 14px;
  border: none;
  background: #6c5bd4;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.2;
}

.voice-room-prejoin__join svg {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}

.voice-room-prejoin__join:hover {
  background: #5546b8;
}

.voice-room-prejoin__join:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.voice-room-prejoin__no-cam {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: #f5f5f5;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

.voice-room-prejoin__no-cam:hover {
  background: rgba(255, 255, 255, 0.06);
}

.voice-room-prejoin__hint {
  margin-top: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(234, 179, 8, 0.35);
  background: rgba(66, 32, 6, 0.55);
  color: #fde68a;
  font-size: 14px;
  line-height: 1.45;
}

.voice-room-prejoin__error {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(212, 87, 78, 0.45);
  background: rgba(127, 29, 29, 0.35);
  color: #fecaca;
  font-size: 14px;
}
.researcher-home {
  --rh-max: 1280px;
}

.researcher-home__hero {
  margin-bottom: 32px;
}

.researcher-home__title {
  margin: 0 0 8px;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
}

.researcher-home__lead {
  margin: 0;
  max-width: 720px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.researcher-home__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.researcher-home__stat {
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--surface);
}

.researcher-home__stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.researcher-home__stat-label {
  font-size: 12px;
  color: var(--text-muted);
}

.researcher-home__section-title {
  margin: 0 0 14px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
}

.researcher-home__quick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 36px;
}

.researcher-home__quick-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--surface-2);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.researcher-home__quick-card:hover {
  border-color: rgba(124, 92, 255, 0.35);
  transform: translateY(-2px);
}

.researcher-home__quick-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(124, 92, 255, 0.12);
  color: var(--primary);
}

.researcher-home__quick-title {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.researcher-home__quick-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.researcher-home__widgets-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.researcher-home__widgets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-bottom: 16px;
}

@media (max-width: 1100px) {
  .researcher-home__widgets-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .researcher-home__widgets-grid {
    grid-template-columns: 1fr;
  }
}
.project-space-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  overflow: hidden;
  --ps-border: rgba(148, 163, 184, 0.28);
  --ps-border-strong: rgba(148, 163, 184, 0.42);
  --ps-panel-bg: var(--surface);
  --ps-canvas-bg: var(--surface);
  --ps-ai-accent: rgba(34, 211, 238, 0.55);
}

.project-space-page--intro-pending {
  visibility: hidden;
  pointer-events: none;
  height: 0;
  min-height: 0;
  overflow: hidden;
}

.project-space-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 32px);
  border-bottom: 1px solid var(--ps-border-strong);
  background: var(--surface);
  flex-wrap: wrap;
  flex-shrink: 0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  z-index: 2;
}

.project-space-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--ps-border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.15s, background 0.15s;
}

.project-space-back:hover {
  border-color: rgba(124, 92, 255, 0.4);
  background: rgba(124, 92, 255, 0.08);
}

.project-space-header__title {
  flex: 1;
  min-width: 0;
}

.project-space-header__title h1 {
  margin: 0;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-space-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}

.project-space-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--ps-border);
  background: var(--surface-2);
}

.project-space-tools__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

.project-space-tools__btn:hover {
  background: rgba(124, 92, 255, 0.1);
  color: var(--text);
}

.project-space-tools__btn.active {
  background: rgba(124, 92, 255, 0.22);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.3);
}

.project-space-tools__btn.toggle.active {
  background: rgba(34, 211, 238, 0.18);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.45);
}

@media (max-width: 900px) {
  .project-space-tools__btn span {
    display: none;
  }

  .project-space-tools__btn {
    padding: 8px 10px;
  }
}

.project-space-header__meta {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--ps-border);
  background: var(--surface-2);
}

.project-space-body {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
}

@media (max-width: 960px) {
  .project-space-page {
    height: auto;
    min-height: 100vh;
    overflow: auto;
  }

  .project-space-body {
    flex-direction: column;
    overflow: visible;
  }

  .project-space-resizer {
    display: none;
  }

  .project-space-ai-panel {
    width: auto !important;
    max-height: 460px;
    margin: 0 12px 12px !important;
    border-left: 1px solid rgba(34, 211, 238, 0.28) !important;
    border-top: 3px solid var(--ps-ai-accent) !important;
  }
}

/* ——— Workspace (document) ——— */
.project-space-workspace {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 12px 0 12px 12px;
  border: 1px solid var(--ps-border-strong);
  border-radius: 16px;
  background: var(--ps-panel-bg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.project-space-workspace__chrome {
  flex-shrink: 0;
  z-index: 2;
  background: var(--surface);
  border-bottom: 1px solid var(--ps-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.project-space-workspace__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ps-border);
  background: rgba(124, 92, 255, 0.04);
}

.project-space-workspace__label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
}

.project-space-workspace__tab-hint {
  font-size: 11px;
  color: var(--text-muted);
}

.project-space-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ps-border);
  background: var(--surface);
  align-items: center;
}

.project-space-tab-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 2px;
}

.project-space-tab-wrap:has(.project-space-tab.active) {
  border-color: rgba(124, 92, 255, 0.35);
  background: rgba(124, 92, 255, 0.08);
}

.project-space-tab {
  padding: 7px 14px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.project-space-tab.active {
  background: rgba(124, 92, 255, 0.22);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.25);
}

.project-space-tab-remove {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.project-space-tab-remove:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.project-space-tab-add {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px dashed var(--ps-border-strong);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.project-space-tab-add:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.project-space-new-tab {
  display: flex;
  gap: 6px;
  align-items: center;
}

.project-space-new-tab input {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--ps-border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  width: 120px;
}

/* Toolbar */
.project-space-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
}

.project-space-toolbar__group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px;
  border-radius: 10px;
  border: 1px solid var(--ps-border);
  background: var(--surface-2);
}

.project-space-toolbar__select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--ps-border);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  outline: none;
  max-width: 130px;
}

.project-space-toolbar__btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s;
}

.project-space-toolbar__btn:hover {
  background: rgba(124, 92, 255, 0.15);
}

.project-space-toolbar__sep {
  width: 1px;
  height: 22px;
  background: var(--ps-border);
  margin: 0 2px;
}

.project-space-toolbar__color {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 0 4px;
}

.project-space-toolbar__color-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.project-space-toolbar__color input[type='color'] {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--ps-border);
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
}

.project-space-editor-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  position: relative;
  padding: 16px;
  background: var(--surface-2);
}

.project-space-editor-placeholder {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  padding: 36px clamp(24px, 4vw, 56px);
  color: var(--text-muted);
  opacity: 0.55;
  font-size: 15px;
  line-height: 1.8;
  pointer-events: none;
  user-select: none;
}

.project-space-editor {
  min-height: calc(100% - 32px);
  padding: 36px clamp(24px, 4vw, 56px);
  line-height: 1.8;
  font-size: 15px;
  color: var(--text);
  background: var(--ps-canvas-bg);
  outline: none;
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  direction: ltr;
  unicode-bidi: plaintext;
  text-align: left;
}

.project-space-editor:focus {
  border-color: rgba(124, 92, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.12);
}

/* ——— Resizer ——— */
.project-space-resizer {
  flex-shrink: 0;
  width: 6px;
  margin: 12px 0;
  cursor: col-resize;
  border-radius: 4px;
  background: transparent;
  transition: background 0.15s;
  position: relative;
}

.project-space-resizer::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 48px;
  border-radius: 3px;
  background: var(--ps-border);
  transition: background 0.15s, height 0.15s;
}

.project-space-resizer:hover::after,
.project-space-resizer:active::after {
  background: var(--ps-ai-accent);
  height: 72px;
}

/* ——— AI panel ——— */
.project-space-ai-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 12px 12px 12px 0;
  border: 1px solid rgba(34, 211, 238, 0.32);
  border-left: 3px solid var(--ps-ai-accent);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 8px 32px rgba(34, 211, 238, 0.06);
  overflow: hidden;
}

.project-space-ai-panel--tasks {
  border-color: rgba(34, 197, 94, 0.32);
  border-left-color: #22c55e;
  box-shadow: 0 8px 32px rgba(34, 197, 94, 0.06);
}

.project-space-side-panel__tabs {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--ps-border);
  background: var(--surface-2);
  flex-shrink: 0;
}

.project-space-side-panel__tabs button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.project-space-side-panel__tabs button.active {
  background: var(--surface);
  border-color: var(--ps-border);
  color: var(--text);
}

.project-space-ai-panel__head--tasks {
  border-bottom-color: rgba(34, 197, 94, 0.22);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 211, 238, 0.04) 100%);
}

.project-space-ai-panel__icon-wrap--tasks {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 211, 238, 0.12));
  border-color: rgba(34, 197, 94, 0.35);
  color: #22c55e;
}

.project-space-ai-panel__badge--tasks {
  color: #16a34a;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.4);
}

.project-space-side-tool__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-space-ai-panel__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(34, 211, 238, 0.22);
  background: linear-gradient(
    135deg,
    rgba(34, 211, 238, 0.08) 0%,
    rgba(124, 92, 255, 0.06) 100%
  );
  flex-shrink: 0;
}

.project-space-ai-panel__icon-wrap {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(124, 92, 255, 0.2));
  border: 1px solid rgba(34, 211, 238, 0.35);
  color: var(--accent);
}

.project-space-ai-panel__title-row {
  flex: 1;
  min-width: 0;
}

.project-space-ai-panel__title {
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 4px;
}

.project-space-ai-panel__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0891b2;
  background: rgba(34, 211, 238, 0.14);
  border: 1px solid rgba(34, 211, 238, 0.4);
  margin-bottom: 6px;
}

html[data-theme='dark'] .project-space-ai-panel__badge {
  color: #67e8f9;
}

.project-space-ai-panel__hint {
  font-size: 12px;
  color: var(--text);
  opacity: 0.72;
  line-height: 1.45;
}

.project-space-ai-clear {
  flex-shrink: 0;
  padding: 8px;
  border: 1px solid var(--ps-border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.project-space-ai-clear:hover {
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
  background: rgba(239, 68, 68, 0.08);
}

.project-space-ai-panel__tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.project-space-ai-changes {
  padding: 8px;
  border: 1px solid var(--ps-border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
}

.project-space-ai-changes.active,
.project-space-ai-changes:hover {
  border-color: rgba(34, 211, 238, 0.45);
  color: var(--accent);
  background: rgba(34, 211, 238, 0.1);
}

.project-space-ai-changes-panel {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ps-border);
  background: var(--surface);
  max-height: 180px;
  overflow-y: auto;
  flex-shrink: 0;
}

.project-space-ai-changes-panel__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.project-space-ai-change {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  font-size: 12px;
}

.project-space-ai-change.reverted {
  opacity: 0.5;
}

.project-space-ai-change__label {
  flex: 1;
  min-width: 120px;
  font-weight: 600;
}

.project-space-ai-change__meta {
  font-size: 11px;
  color: var(--text-muted);
}

.project-space-ai-change__revert {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.project-space-ai-change__reverted {
  font-size: 11px;
  color: var(--text-muted);
}

.project-space-ai-dreams {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.project-space-ai-dreams__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.project-space-ai-dreams__select,
.project-space-ai-dreams__input {
  flex: 1;
  min-width: 100px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--ps-border);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
}

.project-space-ai-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--ps-border);
}

.project-space-ai-empty {
  font-size: 13px;
  color: var(--text);
  opacity: 0.7;
  line-height: 1.65;
  padding: 16px;
  border-radius: 12px;
  border: 1px dashed rgba(34, 211, 238, 0.35);
  background: var(--surface);
}

.project-space-ai-msg {
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.65;
  max-width: 95%;
  border: 1px solid transparent;
}

.project-space-ai-msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.9), rgba(34, 211, 238, 0.75));
  color: #0b0f1a;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 16px rgba(124, 92, 255, 0.2);
}

.project-space-ai-msg.assistant {
  align-self: flex-start;
  background: var(--surface);
  color: var(--text);
  border-color: var(--ps-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.project-space-ai-msg.assistant.loading {
  color: var(--text-muted);
  font-style: italic;
  border-style: dashed;
}

.project-space-ai-md {
  font-size: 14px;
}

.project-space-ai-input {
  padding: 14px 16px;
  border-top: 1px solid rgba(34, 211, 238, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  flex-shrink: 0;
}

.project-space-ai-input label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.project-space-ai-input textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--ps-border);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  min-height: 72px;
  box-sizing: border-box;
}

.project-space-ai-input textarea:focus {
  outline: none;
  border-color: rgba(34, 211, 238, 0.5);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
}

.project-space-ai-input .button {
  align-self: flex-end;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.85), rgba(124, 92, 255, 0.9));
  border: none;
  color: #0b0f1a;
}

.project-space-ai-input .button:disabled {
  opacity: 0.5;
}

/* ——— Tool panels ——— */
.project-space-tool {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.project-space-tool__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--ps-border);
  background: rgba(124, 92, 255, 0.04);
  flex-shrink: 0;
}

.project-space-tool__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(124, 92, 255, 0.12);
  border: 1px solid rgba(124, 92, 255, 0.28);
  color: var(--primary);
  flex-shrink: 0;
}

.project-space-tool__title {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 800;
}

.project-space-tool__hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.project-space-tool__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  background: var(--surface-2);
}

.project-space-tool__materials-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.project-space-tool__upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.project-space-tool__file-input {
  display: none;
}

.project-space-tool__upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.project-space-tool__add {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.project-space-tool__add input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--ps-border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}

.project-space-tool__add .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.project-space-tool__toolbar-row {
  margin-bottom: 16px;
}

.project-space-tool__toolbar-row .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.project-space-tool__form-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--ps-border);
  background: var(--surface);
}

.project-space-tool__form-grid input,
.project-space-tool__form-grid textarea {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--ps-border);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}

.project-space-tool__empty {
  margin: 0;
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  border: 1px dashed var(--ps-border);
  border-radius: 12px;
  background: var(--surface);
}

.project-space-tool__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.project-space-tool__card {
  position: relative;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--ps-border);
  background: var(--surface);
}

.project-space-tool__card-text {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.55;
}

.project-space-tool__card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-space-tool__card-actions select {
  flex: 1;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--ps-border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}

.project-space-tool__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  margin: 0;
  line-height: 0;
  border: 1px solid var(--ps-border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
}

.project-space-tool__icon-btn svg {
  display: block;
  flex-shrink: 0;
}

.project-space-tool__icon-btn:hover {
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.project-space-tool__icon-btn--end {
  position: absolute;
  top: 12px;
  right: 12px;
}

.project-space-tool__source-title {
  font-weight: 700;
  font-size: 15px;
  padding-right: 36px;
}

.project-space-tool__source-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.project-space-tool__link {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--primary);
  word-break: break-all;
}

.project-space-tool__card-notes {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.project-space-tool__progress {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.project-space-tool__progress-bar {
  margin-top: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
  overflow: hidden;
}

.project-space-tool__progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(124, 92, 255, 0.85), rgba(34, 211, 238, 0.85));
  transition: width 0.25s ease;
}

.project-space-tool__task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--ps-border);
  background: var(--surface);
}

.project-space-tool__task.done .project-space-tool__task-text {
  text-decoration: line-through;
  opacity: 0.55;
}

.project-space-tool__check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 2px solid var(--ps-border-strong);
  background: var(--surface-2);
  color: var(--primary);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.project-space-tool__task.done .project-space-tool__check {
  border-color: rgba(34, 197, 94, 0.6);
  background: rgba(34, 197, 94, 0.15);
}

.project-space-tool__task-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.45;
}

.project-space-tool__error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  font-size: 13px;
}

.project-space-tool__analysis {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.22);
  font-size: 13px;
  line-height: 1.55;
}

.project-space-tool__analysis strong {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.project-space-tool__analysis-date {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.project-space-tool__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.project-space-tool__material-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding-right: 36px;
}

.project-space-tool__material-source {
  font-size: 12px;
  color: var(--text-muted);
}

.project-space-tool__material-body {
  margin-top: 10px;
  font-size: 14px;
}

.project-space-agent-actions {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--ps-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-space-agent-actions__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.project-space-agent-actions__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(34, 211, 238, 0.25);
  background: rgba(34, 211, 238, 0.05);
}

.project-space-agent-actions__row.applied {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.08);
}

.project-space-agent-actions__row.rejected {
  opacity: 0.55;
  border-color: rgba(148, 163, 184, 0.3);
  background: rgba(148, 163, 184, 0.06);
}

.project-space-agent-actions__desc {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.project-space-agent-actions__buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.project-space-agent-actions__btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.project-space-agent-actions__btn--apply {
  border-color: rgba(34, 211, 238, 0.45);
  background: rgba(34, 211, 238, 0.14);
  color: var(--text);
}

.project-space-agent-actions__btn--apply:hover {
  background: rgba(34, 211, 238, 0.22);
}

.project-space-agent-actions__btn--reject {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
  color: var(--text);
}

.project-space-agent-actions__btn--reject:hover {
  background: rgba(248, 113, 113, 0.16);
}

.project-space-agent-actions__status {
  font-size: 11px;
  font-weight: 700;
  color: rgba(34, 197, 94, 0.95);
}

.project-space-agent-actions__status.rejected {
  color: var(--text-muted);
}

.project-material-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: grid;
  place-items: center;
  z-index: 4000;
  padding: 16px;
}

.project-material-modal {
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--ps-border-strong, rgba(148, 163, 184, 0.35));
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.project-material-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.project-material-modal__head h3 {
  margin: 0;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-material-modal__close {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}

.project-material-modal__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-material-modal__form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.project-material-modal__form select,
.project-material-modal__form input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--ps-border, rgba(148, 163, 184, 0.28));
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}

.project-material-modal__preview-hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.project-material-modal__error {
  margin: 0;
  color: #f87171;
  font-size: 13px;
}

.project-material-modal__empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.save-to-project-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(124, 92, 255, 0.35);
  background: rgba(124, 92, 255, 0.1);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.save-to-project-btn:hover {
  background: rgba(124, 92, 255, 0.18);
}

.save-to-project-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 5000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid rgba(34, 197, 94, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  font-weight: 600;
}

.save-to-project-toast button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

.project-material-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.researcher-dreams-card {
  cursor: pointer;
}

.researcher-dreams-card__content {
  color: var(--text-muted);
  line-height: 1.75;
  font-size: 15px;
  max-height: 8.5em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.researcher-dreams-card__more {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}

.researcher-dreams-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(5, 8, 16, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.researcher-dreams-modal {
  width: min(720px, 100%);
  max-height: min(85vh, 900px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow-lg);
}

.researcher-dreams-modal__title {
  margin: 0 0 12px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  padding-right: 36px;
}

.researcher-dreams-modal__body {
  color: var(--text);
  line-height: 1.8;
  font-size: 15px;
  white-space: pre-wrap;
}

.researcher-dreams-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-size: 20px;
}

.researcher-dreams-pii-note {
  margin-bottom: 20px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(124, 92, 255, 0.25);
  background: rgba(124, 92, 255, 0.08);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.ai-md {
  line-height: 1.55;
  font-size: 0.98em;
  overflow-wrap: anywhere;
  word-break: normal;
}

.ai-md :where(p) {
  margin: 0 0 10px;
}
.ai-md :where(p:last-child) {
  margin-bottom: 0;
}

.ai-md :where(ul, ol) {
  margin: 6px 0 10px;
  padding-left: 18px;
}
.ai-md :where(li) {
  margin: 2px 0;
}

.ai-md :where(blockquote) {
  margin: 10px 0;
  padding: 8px 12px;
  border-left: 3px solid rgba(91, 124, 250, 0.65);
  background: rgba(148, 163, 184, 0.10);
  border-radius: 10px;
}

.ai-md :where(hr) {
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  margin: 12px 0;
}

.ai-md :where(code) {
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.18);
  font-size: 0.92em;
}
.ai-md :where(pre) {
  margin: 10px 0;
  padding: 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.58);
  overflow-x: auto;
}
.ai-md :where(pre code) {
  background: transparent;
  padding: 0;
}

.ai-md :where(table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  min-width: 620px;
  border: none;
  border-radius: 0;
  overflow: hidden;
}
.ai-md :where(th, td) {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  border-right: 1px solid rgba(148, 163, 184, 0.18);
  vertical-align: top;
  word-break: normal;
  overflow-wrap: break-word;
}
.ai-md :where(th:last-child, td:last-child) {
  border-right: none;
}
.ai-md :where(tr:last-child td) {
  border-bottom: none;
}
.ai-md :where(th) {
  font-weight: 700;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  white-space: nowrap;
}

.ai-md :where(tbody tr:nth-child(odd) td) {
  background: rgba(148, 163, 184, 0.06);
}

.ai-md :where(a) {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ai-md :where(h1, h2, h3) {
  margin: 12px 0 8px;
  line-height: 1.25;
}
.ai-md :where(h1) {
  font-size: 1.25em;
}
.ai-md :where(h2) {
  font-size: 1.15em;
}
.ai-md :where(h3) {
  font-size: 1.06em;
}

.ai-md-table {
  margin: 10px 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.18);
}

.ai-md-table__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(148, 163, 184, 0.08);
}

.ai-md-table__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.ai-md-table__actions {
  display: flex;
  gap: 6px;
}

.ai-md-table__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
}

.ai-md-table__btn:hover {
  border-color: rgba(91, 124, 250, 0.45);
  background: rgba(91, 124, 250, 0.1);
}

.ai-md-table__scroll {
  overflow-x: auto;
}

/* Строка ввода: скрепка, textarea, кольцо контекста, отправить */
.ai-chat-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.ai-chat-input-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.ai-chat-input-textarea {
  width: 100%;
  margin: 0;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  resize: none;
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
  max-height: 200px;
  line-height: 26px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.ai-chat-input-textarea--focused {
  border-color: rgba(91, 124, 250, 0.4);
}

/* Кнопка прикрепления: сброс глобального padding у button из index.css */
.ai-chat-attach-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--surface-2);
  color: var(--text);
  line-height: 0;
  font-weight: 500;
  font-size: inherit;
  cursor: pointer;
  align-self: flex-start;
  vertical-align: top;
}

.ai-chat-attach-btn svg {
  display: block;
}

.ai-chat-attach-btn__loading {
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
}

.ai-chat-attach-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ai-chat-attach-btn:hover:not(:disabled) {
  border-color: rgba(91, 124, 250, 0.45) !important;
  background: rgba(91, 124, 250, 0.08);
}

.ai-chat-attach-btn:focus-visible {
  outline: 2px solid rgba(91, 124, 250, 0.5);
  outline-offset: 2px;
}

.ai-chat-input-row > .button {
  align-self: flex-start;
  flex-shrink: 0;
}

.ai-header-icon-btn {
  padding: 0;
  margin: 0;
  font-family: inherit;
  line-height: 1;
}

.ai-transcription-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 12px 16px 16px;
  gap: 12px;
}

.ai-transcription-hint {
  margin: 0;
  flex-shrink: 0;
  color: var(--text-muted);
}

.ai-transcription-dropzone {
  flex-shrink: 0;
  border: 2px dashed rgba(91, 124, 250, 0.35);
  border-radius: 16px;
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  background: rgba(91, 124, 250, 0.06);
  transition: border-color 0.2s, background 0.2s;
}

.ai-transcription-dropzone--active {
  border-color: rgba(91, 124, 250, 0.7);
  background: rgba(91, 124, 250, 0.12);
}

.ai-transcription-dropzone--busy {
  cursor: wait;
  opacity: 0.9;
}

.ai-transcription-dropzone--failed {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.06);
  cursor: default;
}

.ai-transcription-dropzone-error {
  margin-top: 10px;
  font-size: 13px;
  color: #f87171;
  line-height: 1.45;
}

.ai-transcription-dismiss-btn {
  margin-top: 12px;
}

.ai-transcription-dropzone-icon {
  color: var(--primary);
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
}

.ai-transcription-spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid rgba(91, 124, 250, 0.25);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: ai-transcription-spin 0.8s linear infinite;
}

@keyframes ai-transcription-spin {
  to {
    transform: rotate(360deg);
  }
}

.ai-transcription-progress-wrap {
  margin-top: 14px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.ai-transcription-progress-wrap--modal {
  max-width: none;
}

.ai-transcription-progress-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.ai-transcription-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--primary), #7c9aff);
  transition: width 0.4s ease;
}

.ai-transcription-progress-label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.ai-transcription-error {
  flex-shrink: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
  font-size: 13px;
}

.ai-transcription-list-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}

.ai-transcription-list {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}

.ai-transcription-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

.ai-transcription-card {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  gap: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--surface-2);
}

.ai-transcription-card--busy {
  border-color: rgba(91, 124, 250, 0.35);
}

.ai-transcription-card--failed {
  border-color: rgba(248, 113, 113, 0.35);
}

.ai-transcription-card-head {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.ai-transcription-card-head:hover {
  background: rgba(255, 255, 255, 0.03);
}

.ai-transcription-card-head-text {
  flex: 1;
  min-width: 0;
}

.ai-transcription-open-icon {
  flex-shrink: 0;
  opacity: 0.45;
  margin-top: 2px;
}

.ai-transcription-card-tools {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 6px 6px 6px 0;
}

.ai-transcription-rename-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(91, 124, 250, 0.45);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
}

.ai-transcription-icon-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}

.ai-transcription-icon-btn--danger:hover {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.4);
}

.ai-transcription-icon-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: rgba(91, 124, 250, 0.4);
}

.ai-transcription-icon-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.ai-transcription-card-title {
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-transcription-card-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.ai-transcription-card-preview {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ai-transcription-card-preview.muted {
  font-style: italic;
}

.ai-transcription-card-preview--error {
  color: #f87171;
}

.ai-transcription-text {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}

.ai-transcription-text--modal {
  padding: 0;
  max-height: none;
  overflow: visible;
}

.ai-transcription-speaker-line {
  margin: 0 0 12px;
  padding-left: 12px;
  border-left: 3px solid rgba(91, 124, 250, 0.45);
}

.ai-transcription-timestamp {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(91, 124, 250, 0.1);
  border-radius: 6px;
  padding: 2px 6px;
  margin-right: 8px;
  vertical-align: baseline;
  letter-spacing: 0.02em;
}

.ai-transcription-text-para--timestamped {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.ai-transcription-text-para--timestamped .ai-transcription-timestamp {
  flex-shrink: 0;
  margin-right: 0;
  margin-top: 2px;
}

.ai-transcription-speaker-line .ai-transcription-timestamp {
  display: block;
  margin-bottom: 4px;
  width: fit-content;
}

.ai-transcription-speaker-label {
  display: block;
  font-weight: 700;
  font-size: 12px;
  color: var(--primary);
  margin-bottom: 4px;
}

.ai-transcription-text-para {
  margin: 0 0 8px;
}

.ai-transcription-text-gap {
  height: 8px;
}

.ai-transcription-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100500;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top, 0px));
  box-sizing: border-box;
}

.ai-transcription-modal {
  width: min(960px, 100%);
  height: min(calc(100vh - 96px), 900px);
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--surface);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.ai-transcription-modal-header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-transcription-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-transcription-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
  -webkit-overflow-scrolling: touch;
}

.ai-transcription-modal-footer {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.researcher-ai-root {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.researcher-ai-shell {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.researcher-ai-sidebar {
  flex-shrink: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: width 0.3s ease;
}

.researcher-ai-sidebar__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.researcher-ai-sidebar__header {
  flex-shrink: 0;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.researcher-ai-sidebar__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
}

.researcher-ai-sidebar-toggle {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 40px;
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: none;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: left 0.3s ease;
}

.researcher-ai-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  position: relative;
}

.researcher-ai-main__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--surface);
}

.researcher-ai-main__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.researcher-ai-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px clamp(16px, 4vw, 48px);
}

.researcher-ai-messages__inner {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.researcher-ai-input-bar {
  flex-shrink: 0;
  padding: 16px clamp(16px, 4vw, 48px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--surface);
}

.researcher-ai-input-bar__inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.researcher-ai-transcription-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.researcher-ai-empty {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 48px;
  overflow-y: auto;
}

.researcher-ai-scope-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(124, 92, 255, 0.15);
  color: var(--primary);
  border: 1px solid rgba(124, 92, 255, 0.25);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.researcher-ai-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.researcher-ai-save-material-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(124, 92, 255, 0.35);
  background: rgba(124, 92, 255, 0.1);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.researcher-ai-save-material-btn:hover {
  background: rgba(124, 92, 255, 0.18);
}

.researcher-ai-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 5000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid rgba(34, 197, 94, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  font-weight: 600;
}

.researcher-ai-toast button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.individuation-page {
  flex: 1;
  padding: 24px clamp(16px, 4vw, 40px);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.individuation-page-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.individuation-tabs {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.individuation-tabs button {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: var(--surface-2);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.individuation-tabs button.active {
  border-color: var(--primary);
  background: rgba(124, 92, 255, 0.12);
  color: var(--text);
}

.ind-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 6px;
}

.ind-test-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.ind-test-picker__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: var(--surface-2);
  cursor: pointer;
  text-align: left;
  color: var(--text);
}

.ind-test-picker__card:hover {
  border-color: var(--primary);
}

.ind-test-picker__emoji {
  font-size: 28px;
}

.ind-participants-table {
  margin-top: 16px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  overflow: hidden;
}

.ind-participants-table__head,
.ind-participants-table__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr 2fr;
  gap: 12px;
  padding: 12px 14px;
  font-size: 13px;
}

.ind-participants-table__head {
  background: var(--surface-2);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.ind-participants-table__row {
  border-top: 1px solid rgba(148, 163, 184, 0.15);
}

.individuation-detail__color {
  width: 48px;
  height: 8px;
  border-radius: 4px;
  margin: 12px 0;
}

.individuation-page__header h1 {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 4vw, 2rem);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 12px;
}

.individuation-page__icon {
  color: var(--primary);
  display: inline-flex;
}

.individuation-page__lead {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 720px;
}

.individuation-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.62fr);
  gap: 20px;
  margin-top: 32px;
}

@media (max-width: 900px) {
  .individuation-page__grid {
    grid-template-columns: 1fr;
  }
}

.individuation-hex-wrap {
  padding: 24px 16px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 560px;
}

.individuation-hex-wrap__modes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 4px;
}

.individuation-hex-wrap__mode {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
}

.individuation-hex-wrap__mode.active {
  border-color: var(--primary);
  color: var(--text);
  background: rgba(124, 92, 255, 0.12);
}

.individuation-hex-wrap__hint {
  margin: 0;
  color: var(--text-muted);
  text-align: center;
  max-width: 460px;
  line-height: 1.55;
}

.individuation-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.individuation-detail__sd {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.03);
}

.individuation-detail__meta {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.individuation-detail__dfi {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.individuation-detail__dfi > div {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.individuation-detail__dfi > div span {
  color: var(--text-muted);
}

.individuation-detail__dfi > div i {
  display: block;
  height: 7px;
  border-radius: 999px;
  max-width: 100%;
}

.individuation-detail__interp {
  margin: 12px 0 6px;
  color: var(--text-muted);
  line-height: 1.6;
}

.individuation-detail__dominant {
  margin: 0 0 8px;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}

.individuation-detail {
  padding: 18px 16px;
  font-size: 14px;
}

.individuation-detail h2 {
  font-size: 1.15rem;
}

.individuation-hex {
  width: min(320px, 100%);
  height: auto;
}

.individuation-hex__outline {
  fill: rgba(124, 92, 255, 0.06);
  stroke: rgba(124, 92, 255, 0.35);
  stroke-width: 2;
}

.individuation-hex__spoke {
  stroke: rgba(148, 163, 184, 0.2);
  stroke-width: 1;
}

.individuation-hex__center {
  fill: rgba(34, 211, 238, 0.15);
  stroke: var(--accent);
  stroke-width: 2;
}

.individuation-hex__center-label {
  fill: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.individuation-hex__node {
  fill: var(--surface-2);
  stroke: rgba(124, 92, 255, 0.5);
  stroke-width: 2;
  transition: r 0.2s, fill 0.2s;
}

.individuation-hex__node.active {
  fill: rgba(124, 92, 255, 0.35);
  stroke: var(--primary);
}

.individuation-hex__node-label {
  fill: var(--text);
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}

.individuation-hex-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.individuation-hex-legend__item {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.individuation-hex-legend__item.active {
  background: rgba(124, 92, 255, 0.2);
  border-color: rgba(124, 92, 255, 0.4);
  color: var(--text);
  font-weight: 600;
}

.individuation-detail {
  padding: 28px;
}

.individuation-detail__axis {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(34, 211, 238, 0.12);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}

.individuation-detail h2 {
  margin: 0 0 8px;
  font-size: 1.5rem;
}

.individuation-detail__short {
  margin: 0 0 16px;
  font-weight: 600;
  color: var(--text);
}

.individuation-detail__body {
  margin: 0 0 24px;
  color: var(--text-muted);
  line-height: 1.75;
}

.individuation-detail__integrations h3 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.individuation-detail__integrations ul {
  margin: 0;
  padding-left: 20px;
  color: var(--text-muted);
  line-height: 1.7;
}

.individuation-axes {
  margin-top: 24px;
  padding: 28px;
}

.individuation-axes h2 {
  margin: 0 0 20px;
}

.individuation-axes__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 640px) {
  .individuation-axes__grid {
    grid-template-columns: 1fr;
  }
}

.individuation-axes__grid h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.individuation-axes__grid p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.7;
}
.research-projects {
  flex: 1;
  padding: 24px clamp(16px, 5vw, 48px);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.research-projects__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.research-projects__header h1 {
  margin: 0 0 8px;
  font-size: clamp(1.75rem, 4vw, 2rem);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 12px;
}

.research-projects__icon {
  color: var(--primary);
  display: inline-flex;
}

.research-projects__header p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.research-projects__error {
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  margin-bottom: 20px;
}

.research-projects__stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.research-projects__stat {
  padding: 20px;
  text-align: center;
}

.research-projects__stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
}

.research-projects__stat-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.research-projects__loading {
  text-align: center;
  padding: 32px;
  color: var(--text-muted);
  margin-top: 24px;
}

.research-projects__list-section {
  padding: 24px;
  margin-bottom: 28px;
}

.research-projects__list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.research-projects__list-header h2 {
  margin: 0;
  font-size: 1.15rem;
}

.research-projects__form {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--surface-2);
  border-radius: 12px;
}

.research-projects__form input,
.research-projects__form textarea {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
}

.research-projects__empty {
  color: var(--text-muted);
  margin: 0;
}

/* Square widget cards */
.research-projects__widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 16px;
}

.research-projects__widget {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 18px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: var(--surface-2);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.research-projects__widget:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 92, 255, 0.35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.research-projects__widget-icon {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(124, 92, 255, 0.14);
  color: var(--primary);
}

.research-projects__widget-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
  padding-top: 52px;
}

.research-projects__widget-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

.research-projects__widget-date {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.85;
}

.research-projects__widget-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  z-index: 2;
}

.research-projects__widget-delete:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* Matrix — below projects */
.research-projects__matrix {
  padding: 24px;
  margin-bottom: 32px;
}

.research-projects__matrix h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
}

.research-projects__matrix-lead {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--text-muted);
}

.research-projects__matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.research-projects__matrix-card {
  padding: 16px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.research-projects__matrix-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.research-projects__matrix-card-head strong {
  font-size: 15px;
  color: var(--primary);
}

.research-projects__matrix-card-head span {
  font-size: 11px;
  color: var(--text-muted);
}

.research-projects__matrix-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.research-projects__matrix-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1fr auto;
  gap: 8px;
  align-items: center;
}

.research-projects__matrix-row-label {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.research-projects__matrix-row-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.research-projects__matrix-row-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  min-width: 4px;
}

.research-projects__matrix-row-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 1.5em;
  text-align: right;
}


.project-space-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.55s ease;
}

.project-space-intro--out {
  opacity: 0;
}

.project-space-intro__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.project-space-intro__glow {
  position: absolute;
  width: min(520px, 80vw);
  height: min(520px, 80vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.22) 0%, transparent 68%);
  filter: blur(8px);
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 1s ease, transform 1.4s ease;
}

.project-space-intro__glow--on {
  opacity: 1;
  transform: scale(1);
}

.project-space-intro__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
}

.project-space-intro__title {
  margin: 0;
  font-family: 'Orbitron', 'Segoe UI', sans-serif;
  font-size: clamp(3rem, 12vw, 6.5rem);
  font-weight: 900;
  letter-spacing: 0.18em;
  display: flex;
  gap: 0.12em;
  filter: drop-shadow(0 0 28px rgba(124, 92, 255, 0.45));
}

.project-space-intro__letter {
  display: inline-block;
  color: transparent;
  background: linear-gradient(135deg, #f8fafc 0%, #c4b5fd 45%, #7c5cff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  opacity: 0;
  transform: translateY(18px) scale(0.88);
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-space-intro__letter--on {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.project-space-intro__steps {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.project-space-intro__step {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(203, 213, 225, 0.35);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    color 0.4s ease;
}

.project-space-intro__step--on {
  opacity: 1;
  transform: translateY(0);
  color: rgba(226, 232, 240, 0.92);
}

.project-space-intro__step--on:not(:last-child) {
  color: rgba(148, 163, 184, 0.65);
  font-size: 0.92em;
}

.project-space-intro__subtitle {
  margin: 20px 0 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.85);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.project-space-intro__subtitle--on {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .project-space-intro,
  .project-space-intro__letter,
  .project-space-intro__step,
  .project-space-intro__subtitle,
  .project-space-intro__glow {
    transition: none;
  }

  .project-space-intro__letter:not(.project-space-intro__letter--on),
  .project-space-intro__step:not(.project-space-intro__step--on),
  .project-space-intro__subtitle:not(.project-space-intro__subtitle--on) {
    opacity: 1;
    transform: none;
  }
}
/* Публичная шапка профиля — токены .landing (§4 / §12). Кабинетные tokens.css не использовать. */

.landing .psy-public-card,
.psy-public-card {
  --psy-accent: #3d6b5a;
  border-radius: var(--radius-card, 20px);
  overflow: hidden;
  background: var(--card, #ffffff);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--card-border, #d8d2ee);
  color: var(--ink, #211e2b);
  transition: box-shadow 0.18s ease;
}

.landing a.psy-public-card:hover,
a.psy-public-card:hover {
  box-shadow: var(--shadow-card-hover);
}

.psy-public-card__cover {
  position: relative;
  height: 180px;
  background: linear-gradient(135deg, var(--peach-soft, #fdebdd), var(--brand-soft, #efebfc));
}

.psy-public-card--compact .psy-public-card__cover {
  height: 120px;
}

@media (max-width: 700px) {
  .psy-public-card__cover {
    height: 120px;
  }
}

.psy-public-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.psy-public-card__body {
  padding: 0 32px 28px;
  position: relative;
}

@media (max-width: 700px) {
  .psy-public-card__body {
    padding: 0 20px 24px;
  }
}

.psy-public-card__top {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.psy-public-card__avatar {
  width: 96px;
  height: 96px;
  margin-top: -48px;
  margin-left: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--card, #ffffff);
  background: var(--paper-soft, #ece9f8);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display, Georgia, serif);
  font-weight: 600;
  font-size: 36px;
  color: var(--brand-deep, #5546b8);
  box-shadow: 0 4px 16px rgba(38, 33, 66, 0.1);
}

.psy-public-card--compact .psy-public-card__avatar {
  width: 80px;
  height: 80px;
  margin-top: -40px;
  font-size: 28px;
}

.psy-public-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.psy-public-card__meta {
  flex: 1;
  min-width: 180px;
  padding-top: 12px;
}

.psy-public-card__name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.psy-public-card__name {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 32px);
  line-height: 1.2;
  color: var(--ink, #23202b);
}

.psy-public-card__badge {
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--sage, #3e8a6e);
  background: var(--sage-soft, #e3f1ea);
  border-radius: 999px;
  padding: 4px 10px;
}

.psy-public-card__sub {
  margin: 8px 0 0;
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 15px;
  color: var(--ink-soft, #565165);
}

.psy-public-card__price {
  margin: 10px 0 0;
  font-family: var(--font-ui, system-ui, sans-serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--psy-accent);
}

.psy-public-card__nearest {
  margin: 6px 0 0;
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 13px;
  color: var(--ink-soft, #565165);
}

.psy-public-card__cta-wrap {
  padding-top: 12px;
  margin-left: auto;
  align-self: center;
}

.psy-public-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: var(--radius-btn, 999px);
  background: var(--psy-accent);
  color: #fff !important;
  font-family: var(--font-ui, system-ui, sans-serif);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.psy-public-card__cta:hover {
  filter: brightness(0.94);
  color: #fff !important;
}

.psy-public-card__cta:focus-visible {
  outline: 3px solid var(--brand-soft, #efebfc);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .psy-public-card__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .psy-public-card__cta-wrap {
    margin-left: 0;
    width: 100%;
  }

  .psy-public-card__cta {
    width: 100%;
  }

  /* CTA в шапке на mobile скрыт — sticky-бар на странице */
  .psy-public-card__cta-wrap--desktop-only {
    display: none;
  }
}
.psy-public-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  background-image: none;
}

.psy-public-page__main {
  flex: 1;
  padding: 32px 0 96px;
}

.psy-public-page__inner {
  max-width: 900px;
}

.psy-public-page__back {
  margin-bottom: 16px;
}

.psy-public-page__own-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 14px;
  font-weight: 600;
}

.psy-public-page__own-link {
  color: var(--brand-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.psy-public-section {
  margin-top: 36px;
}

.psy-public-body--compact .psy-public-section {
  margin-top: 20px;
}

.psy-public-body--compact .landing-h3 {
  font-size: 16px;
}

.psy-public-body--compact .psy-public-about {
  font-size: 14px;
}

.landing .psy-public-section .landing-h3 {
  margin: 0 0 14px;
}

.psy-public-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.psy-public-chips span {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.psy-public-about {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.6;
  font-size: 16px;
}

.psy-public-format {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--ink-muted);
}

.psy-public-edu-list {
  display: grid;
  gap: 12px;
}

.psy-public-edu {
  padding: 16px 18px;
}

.psy-public-edu__title {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.psy-public-edu__title span {
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-muted);
}

.psy-public-edu__meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-soft);
}

.psy-public-schedule__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 800px) {
  .psy-public-schedule__grid {
    grid-template-columns: 1fr;
  }
}

.psy-public-schedule__form {
  padding: 20px;
  position: sticky;
  top: 88px;
}

@media (max-width: 800px) {
  .psy-public-schedule__form {
    position: static;
  }
}

.psy-public-day {
  margin-bottom: 18px;
}

.psy-public-day__title {
  margin: 0 0 10px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  text-transform: capitalize;
}

.psy-public-day__slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.psy-public-slot {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.psy-public-slot:hover {
  border-color: var(--ink-muted);
}

.psy-public-slot.is-selected {
  background: var(--psy-accent, #3d6b5a);
  border-color: var(--psy-accent, #3d6b5a);
  color: #fff;
}

.psy-public-slot:focus-visible {
  outline: 3px solid var(--brand-soft);
  outline-offset: 2px;
}

.psy-public-form {
  display: grid;
  gap: 10px;
}

.psy-public-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  resize: vertical;
}

.psy-public-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-soft);
  border-color: var(--brand);
}

.psy-public-input::placeholder {
  color: var(--ink-muted);
}

.psy-public-submit {
  margin-top: 14px;
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  background: var(--psy-accent, #3d6b5a);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.psy-public-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.psy-public-submit:not(:disabled):hover {
  filter: brightness(0.94);
}

.psy-public-submit:focus-visible {
  outline: 3px solid var(--brand-soft);
  outline-offset: 2px;
}

.psy-public-form-note {
  margin: 12px 0 0;
  text-align: center;
  color: var(--ink-muted);
}

.psy-public-msg {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

.psy-public-msg--err {
  color: #b42318;
}

.psy-public-msg--ok {
  color: var(--sage);
}

.psy-public-reviews {
  display: grid;
  gap: 12px;
}

.psy-public-review {
  padding: 16px 18px;
}

.psy-public-review__head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
}

.psy-public-review p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
  font-size: 14px;
}

/* Mobile sticky bar */
.psy-public-sticky {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(38, 33, 66, 0.08);
  align-items: center;
  gap: 12px;
}

.psy-public-sticky__price {
  flex: 1;
  font-weight: 600;
  font-size: 15px;
  color: var(--psy-accent, #3d6b5a);
}

.psy-public-sticky__cta {
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  background: var(--psy-accent, #3d6b5a);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

@media (max-width: 700px) {
  .psy-public-page__main {
    padding-bottom: 120px;
  }

  .psy-public-sticky {
    display: flex;
  }

  /* На mobile CTA в шапке дублирует sticky — скрываем */
  .psy-public-page .psy-public-card__cta-wrap {
    display: none;
  }
}
/* Редактор профиля психолога — landing-токены (§13). Кабинетный Navbar снаружи. */

.psy-profile-editor {
  flex: 1;
  min-height: 0;
  padding: 28px clamp(16px, 4vw, 40px) 120px;
  background: var(--paper);
  color: var(--ink);
}

.psy-profile-editor.is-dirty {
  padding-bottom: 160px;
}

.psy-profile-editor__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 34px);
  color: var(--ink);
}

.psy-profile-editor__lead {
  margin: 0 0 24px;
  color: var(--ink-muted);
  font-size: 15px;
}

.psy-profile-editor__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(360px, 1fr);
  gap: 28px;
  align-items: start;
}

@media (max-width: 1100px) {
  .psy-profile-editor__layout {
    grid-template-columns: 1fr;
  }

  .psy-profile-editor__preview {
    display: none;
  }
}

.psy-profile-editor__form-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.psy-profile-editor__preview {
  position: sticky;
  top: 88px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow: auto;
  padding-bottom: 16px;
}

.psy-profile-live-preview {
  min-width: 0;
}

.psy-profile-editor__preview-label {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.psy-profile-editor__preview-link {
  display: inline-flex;
  margin-top: 12px;
}

/* Зоны */
.psy-profile-zone {
  background: var(--card);
  border: 1px solid var(--card-border, var(--line));
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px clamp(16px, 3vw, 28px);
}

.psy-profile-zone--account {
  padding: 20px clamp(16px, 3vw, 24px);
}

.psy-profile-zone__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.psy-profile-zone__eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
}

.psy-profile-zone__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
}

.psy-profile-zone__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--ink-muted);
}

/* Полнота §13.5 */
.psy-profile-complete {
  min-width: min(100%, 260px);
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2, #f3f1fa);
  border: 1px solid var(--line);
}

.psy-profile-complete__progress {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.psy-profile-complete__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin-bottom: 10px;
}

.psy-profile-complete__bar > span {
  display: block;
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
  transition: width 0.2s ease;
}

.psy-profile-complete__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.psy-profile-complete__list li {
  font-size: 12px;
  color: var(--ink-muted);
  display: flex;
  gap: 6px;
  align-items: center;
}

.psy-profile-complete__list li.is-done {
  color: var(--sage);
}

.psy-profile-complete__hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.4;
}

/* Секции формы */
.psy-profile-section {
  margin-top: 28px;
}

.psy-profile-section:first-of-type {
  margin-top: 0;
}

.psy-profile-section__title {
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}

.psy-profile-section__help {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.psy-profile-fields {
  display: grid;
  gap: 14px;
}

.psy-profile-fields--2 {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
  .psy-profile-fields--2 {
    grid-template-columns: 1fr;
  }
}

.psy-profile-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.psy-profile-input,
.psy-profile-textarea,
.psy-profile-select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
}

.psy-profile-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.55;
}

.psy-profile-input:focus,
.psy-profile-textarea:focus,
.psy-profile-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-soft);
  border-color: var(--brand);
}

.psy-profile-input::placeholder,
.psy-profile-textarea::placeholder {
  color: var(--ink-muted);
}

.psy-profile-counter {
  margin-top: 6px;
  text-align: right;
  font-size: 12px;
  color: var(--ink-muted);
}

.psy-profile-counter.is-warn {
  color: #b42318;
}

/* Аватар + верификация в каталоге */
.psy-profile-avatar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.psy-profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--card);
  background: var(--paper-soft);
  box-shadow: 0 4px 16px rgba(35, 32, 43, 0.1);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  color: var(--brand-deep);
}

.psy-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.psy-profile-avatar-meta {
  flex: 1;
  min-width: 180px;
}

.psy-profile-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.psy-profile-badge--ok {
  background: var(--sage-soft);
  color: var(--sage);
}

.psy-profile-badge--pending {
  background: var(--peach-soft);
  color: #9a6b2f;
}

.psy-profile-badge--rej {
  background: #fde8e8;
  color: #b42318;
}

.psy-profile-badge--none {
  background: var(--paper-soft);
  color: var(--ink-muted);
}

/* Теги §13.3 */
.psy-profile-tag-search {
  margin-bottom: 10px;
}

.psy-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.psy-profile-tags--selected {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.psy-profile-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.psy-profile-tag:hover {
  border-color: var(--ink-muted);
}

.psy-profile-tag.is-on {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--brand);
  font-weight: 600;
}

.psy-profile-tag__x {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  opacity: 0.75;
}

.psy-profile-tag.is-on .psy-profile-tag__x:hover {
  opacity: 1;
}

.psy-profile-audience {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.psy-profile-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-ui);
}

.psy-profile-chip.is-on {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--brand);
  font-weight: 600;
}

/* Образование */
.psy-profile-edu {
  display: grid;
  gap: 12px;
}

.psy-profile-edu-card {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2, #f3f1fa);
  display: grid;
  gap: 10px;
}

.psy-profile-edu-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* Оформление */
.psy-profile-cover-preview {
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--peach-soft), var(--brand-soft));
}

.psy-profile-cover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.psy-profile-accents {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.psy-profile-accent {
  box-sizing: border-box;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 2px solid rgba(35, 32, 43, 0.12) !important;
  cursor: pointer;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  background-image: none !important;
  background-color: var(--swatch, #3d6b5a) !important;
  box-shadow: none;
  transition: box-shadow 0.15s ease, transform 0.12s ease;
}

.psy-profile-accent:hover {
  border-color: rgba(35, 32, 43, 0.35) !important;
  transform: scale(1.06);
}

.psy-profile-accent:focus,
.psy-profile-accent:focus-visible {
  outline: 3px solid var(--brand-soft) !important;
  outline-offset: 2px;
}

.psy-profile-accent.is-on {
  box-shadow: 0 0 0 2px var(--ink);
  border-color: #fff !important;
}

/* Аккаунт */
.psy-profile-account-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.psy-profile-account-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.psy-profile-account-row:first-child {
  padding-top: 0;
}

.psy-profile-account-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.psy-profile-account-value {
  font-size: 15px;
  color: var(--ink);
  font-weight: 600;
}

.psy-profile-account-note {
  margin: 0;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.45;
}

/* Верификация баннер */
.psy-profile-verify {
  padding: 18px 20px;
  border-radius: var(--radius-card);
  border: 1px solid #e8d4a8;
  background: var(--peach-soft);
  margin-bottom: 20px;
}

.psy-profile-verify h2 {
  margin: 0 0 8px;
  font-size: 18px;
  font-family: var(--font-display);
  font-weight: 600;
}

.psy-profile-verify p {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.psy-profile-alert {
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 14px;
}

.psy-profile-alert--ok {
  background: var(--sage-soft);
  color: var(--sage);
  border: 1px solid #b7d9c8;
}

.psy-profile-alert--err {
  background: #fde8e8;
  color: #b42318;
  border: 1px solid #f5c2c0;
}

/* Sticky save §13.6 */
.psy-profile-savebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px clamp(16px, 4vw, 40px) calc(14px + env(safe-area-inset-bottom));
  background: var(--card, #ffffff);
  color: var(--ink, #23202b);
  border-top: 1px solid var(--line, #e8e2d9);
  box-shadow: 0 -8px 24px rgba(35, 32, 43, 0.08);
  /* Не наследовать layout .landing (min-height: 100vh) — иначе белый экран поверх формы */
  min-height: 0;
}

.psy-profile-savebar__msg {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.psy-profile-savebar__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Mobile preview FAB + sheet */
.psy-profile-fab {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 88px;
  z-index: 45;
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(108, 91, 212, 0.35);
  cursor: pointer;
}

.psy-profile-fab--raised {
  bottom: 150px;
}

@media (max-width: 1100px) {
  .psy-profile-fab {
    display: inline-flex;
  }
}

.psy-profile-sheet {
  position: fixed;
  inset: 0;
  z-index: 2600;
  background: rgba(35, 32, 43, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
}

.psy-profile-sheet__panel {
  width: min(720px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: var(--paper);
  border-radius: 20px 20px 0 0;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
}

.psy-profile-sheet__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.psy-profile-file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.psy-profile-file-btn:hover {
  background: var(--paper-soft);
}

.psy-profile-file-btn.is-busy {
  opacity: 0.6;
  cursor: wait;
}

.psy-profile-phone {
  display: grid;
  grid-template-columns: minmax(96px, 110px) 1fr;
  gap: 10px;
}

.psy-profile-phone__national {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
}

.psy-profile-phone__national input {
  flex: 1;
  padding: 12px 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  outline: none;
  min-width: 0;
  font-family: var(--font-ui);
}

.psy-profile-phone__dial {
  color: var(--ink-muted);
  font-weight: 600;
  white-space: nowrap;
}
.handbook-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.handbook-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  min-height: 0;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.handbook-nav {
  border-right: 1px solid var(--navbar-edge);
  background:
    linear-gradient(180deg, rgba(124, 92, 255, 0.06), transparent 40%),
    var(--surface);
  padding: 20px 16px 28px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.handbook-nav__eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.handbook-nav__title {
  margin: 6px 0 0;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text);
}

.handbook-nav__lead {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}

.handbook-search {
  margin-top: 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--navbar-edge);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}

.handbook-search:focus {
  outline: none;
  border-color: rgba(124, 92, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.12);
}

.handbook-sections {
  display: grid;
  gap: 6px;
}

.handbook-section {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.handbook-section:hover {
  background: var(--surface-2);
}

.handbook-section.is-active {
  background: rgba(124, 92, 255, 0.12);
  border-color: rgba(124, 92, 255, 0.28);
}

.handbook-section__icon {
  display: inline-flex;
  color: var(--primary);
  flex-shrink: 0;
}

.handbook-section__text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.handbook-section__name {
  font-size: 14px;
  font-weight: 650;
}

.handbook-section__count {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.handbook-articles {
  display: grid;
  gap: 4px;
}

.handbook-articles__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
  padding: 0 4px;
}

.handbook-article-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}

.handbook-article-link:hover {
  background: var(--surface-2);
}

.handbook-article-link.is-active {
  background: rgba(25, 224, 255, 0.1);
}

.handbook-article-link__title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.handbook-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--navbar-edge);
  color: var(--text-muted);
  background: var(--surface-2);
}

.handbook-badge--guide {
  color: #9bb8ff;
  border-color: rgba(91, 124, 250, 0.35);
  background: rgba(91, 124, 250, 0.12);
}

.handbook-badge--video {
  color: #9aecff;
  border-color: rgba(25, 224, 255, 0.35);
  background: rgba(25, 224, 255, 0.1);
}

.handbook-badge--training {
  color: #c4b0ff;
  border-color: rgba(124, 92, 255, 0.35);
  background: rgba(124, 92, 255, 0.12);
}

.handbook-badge--material {
  color: #b8f0d0;
  border-color: rgba(61, 220, 151, 0.35);
  background: rgba(61, 220, 151, 0.1);
}

.handbook-empty {
  padding: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

.handbook-main {
  padding: 20px clamp(16px, 3vw, 28px) 40px;
  overflow: auto;
  min-width: 0;
}

.handbook-main__toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.handbook-mobile-toggle {
  display: none;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--navbar-edge);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.handbook-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--text-muted);
}

.handbook-breadcrumb span:last-child {
  color: var(--text);
  font-weight: 600;
}

.handbook-content {
  padding: clamp(18px, 3vw, 28px);
  border-radius: 18px;
  margin-bottom: 20px;
}

.handbook-content__head h2 {
  margin: 10px 0 0;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 800;
  line-height: 1.25;
}

.handbook-content__head p {
  margin: 10px 0 0;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 62ch;
}

.handbook-content__body {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.handbook-content__body p {
  margin: 0;
  line-height: 1.65;
  color: var(--text);
  font-size: 15px;
}

.handbook-content__body h3 {
  margin: 10px 0 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}

.handbook-content__body ul {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 6px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

.handbook-content__path {
  margin-top: 4px;
}

.handbook-content__footer {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--navbar-edge);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.handbook-content__hint {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 48ch;
}

.handbook-content__links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.handbook-content--empty {
  text-align: center;
  padding: 40px 24px;
}

.handbook-backdrop {
  display: none;
}

@media (max-width: 900px) {
  .handbook-layout {
    grid-template-columns: 1fr;
  }

  .handbook-nav {
    position: fixed;
    z-index: 1200;
    inset: 64px auto 0 0;
    width: min(320px, 88vw);
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-lg);
  }

  .handbook-nav.is-open {
    transform: translateX(0);
  }

  .handbook-mobile-toggle {
    display: inline-flex;
  }

  .handbook-backdrop {
    display: block;
    position: fixed;
    inset: 64px 0 0;
    z-index: 1100;
    border: none;
    background: rgba(5, 8, 16, 0.55);
    cursor: pointer;
  }
}
/* Психолог AI chat — shell (§25.7 / §25.8), без градиентов */

.ai-context-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.ai-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line, var(--border, rgba(255, 255, 255, 0.14)));
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  text-align: left;
}

.ai-context-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ai-context-chip:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  background: var(--brand-soft, rgba(108, 91, 212, 0.12));
}

.ai-context-chip--static {
  cursor: default;
  background: var(--brand-soft, rgba(108, 91, 212, 0.12));
  color: var(--brand, var(--primary));
  border-color: color-mix(in srgb, var(--brand, var(--primary)) 28%, transparent);
}

.ai-context-chip--static:hover {
  background: var(--brand-soft, rgba(108, 91, 212, 0.12));
}

.ai-context-chip__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-context-chip__action {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: lowercase;
}

/* ——— Composer §25.7 ——— */
.ai-chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 6px 6px 6px 8px;
  border-radius: 16px;
  border: 1px solid var(--line, var(--border, rgba(255, 255, 255, 0.14)));
  background: var(--surface);
  box-sizing: border-box;
}

.ai-chat-composer__attach {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  align-self: flex-end;
}

.ai-chat-composer__attach:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
}

.ai-chat-composer__attach:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ai-chat-composer__input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 10px 8px;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  resize: none;
  outline: none;
  box-sizing: border-box;
  min-height: 40px;
  max-height: 200px;
  overflow-y: auto;
}

.ai-chat-composer__input::placeholder {
  color: var(--text-muted);
}

.ai-chat-composer__input:disabled {
  opacity: 0.7;
}

.ai-chat-composer__send {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  border: none;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  align-self: flex-end;
}

.ai-chat-composer__send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ai-chat-composer__send:hover:not(:disabled) {
  filter: brightness(1.05);
}

.ai-chat-quota {
  margin-top: 8px;
  text-align: right;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ——— Bubbles §21 / §25.7 ——— */
.ai-chat-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}

.ai-chat-bubble-row.is-mine {
  justify-content: flex-end;
}

.ai-chat-bubble-row.is-theirs {
  justify-content: flex-start;
}

.ai-chat-bot-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--brand-soft, rgba(108, 91, 212, 0.16));
  color: var(--primary);
  margin-bottom: 2px;
}

.ai-chat-bubble {
  max-width: min(88%, 640px);
  padding: 10px 14px 8px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.ai-chat-bubble.is-mine {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
  white-space: pre-wrap;
}

.ai-chat-bubble.is-theirs {
  max-width: min(98%, 1080px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line, var(--border, rgba(255, 255, 255, 0.14)));
  border-bottom-left-radius: 4px;
}

.ai-chat-bubble.is-error {
  max-width: min(98%, 1080px);
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.ai-chat-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1;
  opacity: 0.85;
}

.ai-chat-bubble.is-mine .ai-chat-bubble-meta {
  color: rgba(255, 255, 255, 0.85);
}

.ai-chat-bubble-ticks {
  font-size: 12px;
  letter-spacing: -1px;
}

/* ——— Empty tip chips ——— */
.ai-chat-tip-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 720px;
  margin: 0 auto;
}

.ai-chat-tip-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line, var(--border, rgba(255, 255, 255, 0.18)));
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
}

.ai-chat-tip-chip:hover {
  background: var(--surface);
}

/* ——— Sidebar chat / folder rows §25.8 ——— */
.ai-sidebar-actions {
  display: flex;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}

.ai-sidebar-new-chat {
  flex: 1;
  padding: 10px 12px !important;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  background: var(--primary) !important;
  color: #fff !important;
  cursor: pointer;
}

.ai-sidebar-new-folder {
  flex: 1;
  padding: 10px 12px !important;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
}

.ai-sidebar-inline-folder {
  display: flex;
  gap: 6px;
  padding: 8px 12px 4px;
}

.ai-sidebar-inline-folder input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.14));
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}

.ai-chat-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  margin-bottom: 4px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

.ai-chat-row:hover {
  background: var(--surface);
}

.ai-chat-row.is-active {
  background: var(--brand-soft, rgba(108, 91, 212, 0.16));
}

.ai-chat-row__icon {
  flex-shrink: 0;
  color: var(--text-muted);
  display: grid;
  place-items: center;
}

.ai-chat-row__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
}

.ai-chat-row.is-active .ai-chat-row__title {
  font-weight: 600;
  color: var(--primary);
}

.ai-chat-row__actions {
  display: none;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.ai-chat-row:hover .ai-chat-row__actions,
.ai-chat-row.is-menu-open .ai-chat-row__actions {
  display: inline-flex;
}

.ai-chat-row__icon-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
}

.ai-chat-row__icon-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.ai-chat-row__icon-btn.is-danger:hover {
  color: #ef4444;
}

.ai-folder-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 8px;
  border-radius: 10px;
  margin-bottom: 2px;
  cursor: pointer;
  user-select: none;
}

.ai-folder-row:hover {
  background: var(--surface);
}

.ai-folder-row__chevron {
  color: var(--text-muted);
  display: grid;
  place-items: center;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.ai-folder-row__chevron.is-open {
  transform: rotate(90deg);
}

.ai-folder-row__icon {
  color: var(--text-muted);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.ai-folder-row__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.ai-folder-row__count {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.ai-folder-row__actions {
  display: none;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.ai-folder-row:hover .ai-folder-row__actions,
.ai-folder-row.is-menu-open .ai-folder-row__actions {
  display: inline-flex;
}

.ai-folder-children {
  padding-left: 16px;
  margin-bottom: 8px;
}

.ai-folder-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.ai-sidebar-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% - 4px);
  right: 8px;
  min-width: 160px;
  max-width: 220px;
  padding: 6px;
  margin: 0;
  list-style: none;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.14));
  background: var(--surface);
  box-shadow: var(--shadow-mock, 0 8px 24px rgba(0, 0, 0, 0.25));
}

.ai-sidebar-menu button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.ai-sidebar-menu button:hover {
  background: var(--surface-2);
}

.ai-sidebar-menu button.is-danger {
  color: #ef4444;
}

/* ——— Client picker modal (messenger-like) ——— */
.ai-client-picker-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

@media (min-width: 720px) {
  .ai-client-picker-backdrop {
    align-items: center;
  }
}

.ai-client-picker {
  background: var(--surface);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 440px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-mock, 0 8px 32px rgba(0, 0, 0, 0.3));
}

@media (min-width: 720px) {
  .ai-client-picker {
    border-radius: 16px;
  }
}

.ai-client-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 8px;
}

.ai-client-picker__head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.ai-client-picker__search {
  padding: 0 16px 12px;
}

.ai-client-picker__search input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.14));
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}

.ai-client-picker__search input:focus {
  outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
  outline-offset: 1px;
}

.ai-client-picker__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 12px;
}

.ai-client-picker__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  margin-bottom: 2px;
}

.ai-client-picker__row:hover {
  background: var(--surface-2);
}

.ai-client-picker__row.is-active {
  background: var(--brand-soft, rgba(108, 91, 212, 0.16));
}

.ai-client-picker__avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  flex-shrink: 0;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: var(--brand-soft, rgba(108, 91, 212, 0.22));
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
}

.ai-client-picker__meta {
  flex: 1;
  min-width: 0;
}

.ai-client-picker__name {
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-client-picker__sub {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-client-picker__empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.mail-html-editor {
  display: grid;
  gap: 0;
  border: 1px solid var(--navbar-edge);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}

.mail-html-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--navbar-edge);
}

.mail-html-editor__toolbar button {
  border: 1px solid var(--navbar-edge);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.mail-html-editor__toolbar button:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--navbar-edge));
}

.mail-html-editor__sep {
  width: 1px;
  align-self: stretch;
  background: var(--navbar-edge);
  margin: 0 4px;
}

.mail-html-editor__surface {
  padding: 12px 14px;
  outline: none;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: #fff;
  min-height: 200px;
}

.mail-html-editor__surface:focus {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}

.mail-html-editor__hint {
  font-size: 11px;
  color: var(--text-muted);
  padding: 8px 12px;
  background: var(--surface-2);
  border-top: 1px solid var(--navbar-edge);
}
.admin-mailings {
  flex: 1;
  padding: 24px clamp(16px, 4vw, 40px);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.admin-mailings h1 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 800;
}

.admin-mailings h2 {
  margin: 0 0 14px;
  font-size: 18px;
}

.admin-mailings h3 {
  margin: 12px 0 8px;
  font-size: 14px;
  font-weight: 700;
}

.admin-mailings__hint {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.admin-mailings__warn {
  padding: 10px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, #f59e0b 18%, var(--surface-2));
  border: 1px solid color-mix(in srgb, #f59e0b 40%, var(--navbar-edge));
  margin-bottom: 12px;
  font-size: 14px;
}

.admin-mailings__error {
  padding: 10px 14px;
  border-radius: 10px;
  color: #ff7b7b;
  background: var(--surface-2);
  margin-bottom: 12px;
}

.admin-mailings__ok {
  padding: 10px 14px;
  border-radius: 10px;
  color: #22c55e;
  background: var(--surface-2);
  margin-bottom: 12px;
}

.admin-mailings__test-box {
  margin: 8px 0 4px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed var(--navbar-edge);
  background: var(--surface-2);
  display: grid;
  gap: 8px;
}

.admin-mailings__checklist {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--navbar-edge);
  background: var(--surface-2);
  margin-bottom: 16px;
  font-size: 13px;
}

.admin-mailings__checklist-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.admin-mailings__checklist ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.admin-mailings__tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.admin-mailings__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.admin-mailings__panel {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-mailings__panel input,
.admin-mailings__panel textarea,
.admin-mailings__panel select {
  width: 100%;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--navbar-edge);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}

.admin-mailings__row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.admin-mailings__row > * {
  flex: 1;
  min-width: 120px;
}

.admin-mailings__list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.admin-mailings__list-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--navbar-edge);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}

.admin-mailings__list-item.is-active {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--navbar-edge));
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-2));
}

.admin-mailings__members {
  display: grid;
  gap: 6px;
  max-height: 280px;
  overflow: auto;
}

.admin-mailings__member {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 13px;
}

.admin-mailings__platform-list {
  max-height: 180px;
  overflow: auto;
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--navbar-edge);
}

.admin-mailings__platform-item {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

.admin-mailings__iframe {
  width: 100%;
  height: 360px;
  border: 1px solid var(--navbar-edge);
  border-radius: 10px;
  background: #f4f6fb;
  margin-top: 4px;
}

.admin-mailings__preview-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

.admin-mailings__campaign {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--navbar-edge);
  background: var(--surface-2);
}
.admin-analytics {
  flex: 1;
  padding: 24px clamp(16px, 4vw, 40px);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.admin-analytics__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 20px;
}

.admin-analytics h1 {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 800;
}

.admin-analytics__head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.admin-analytics__periods {
  display: flex;
  gap: 8px;
}

.admin-analytics__error {
  color: #ff7b7b;
  margin-bottom: 12px;
}

.admin-analytics__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.admin-analytics__card {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--navbar-edge);
  background: var(--surface-2);
}

.admin-analytics__value {
  font-size: 28px;
  font-weight: 800;
  margin: 4px 0;
}

.admin-analytics__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.admin-analytics__panel {
  padding: 16px;
}

.admin-analytics__panel h2 {
  margin: 0 0 12px;
  font-size: 16px;
}

.admin-analytics__chart {
  width: 100%;
}

.admin-analytics__chart-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.admin-analytics__bar-row {
  margin-bottom: 10px;
}

.admin-analytics__bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 4px;
}

.admin-analytics__bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--navbar-edge);
  overflow: hidden;
}

.admin-analytics__bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
}
.psy-catalog-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  background-image: none;
}

.psy-catalog {
  flex: 1;
  padding: 32px 0 72px;
}

.psy-catalog__head {
  margin-bottom: 28px;
}

.psy-catalog__head .landing-h1 {
  margin: 0;
}

.psy-catalog__head .landing-lead {
  margin: 8px 0 0;
  font-size: 17px;
}

.psy-catalog__toolbar {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 12px;
  margin-bottom: 14px;
}

@media (max-width: 800px) {
  .psy-catalog__toolbar {
    grid-template-columns: 1fr;
  }
}

.psy-catalog__search,
.psy-catalog__select,
.psy-catalog__tag-search {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
}

.psy-catalog__search:focus,
.psy-catalog__select:focus,
.psy-catalog__tag-search:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-soft);
  border-color: var(--brand);
}

.psy-catalog__selects {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.psy-catalog__select {
  min-width: 160px;
}

.psy-catalog__tags-wrap {
  margin-bottom: 12px;
}

.psy-catalog__tag-search {
  margin-bottom: 10px;
  max-width: 280px;
}

.psy-catalog__tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.psy-catalog__tag {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  color: var(--ink);
  font-size: 13px;
  font-family: var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
}

.psy-catalog__tag.is-on {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--brand);
  font-weight: 600;
}

.psy-catalog__reset {
  margin-bottom: 16px;
}

.psy-catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 1000px) {
  .psy-catalog__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .psy-catalog__grid {
    grid-template-columns: 1fr;
  }
}
.cta-band {
  padding: var(--section-y) 0;
  background: var(--peach-soft);
}

.cta-band__inner {
  max-width: 720px;
  text-align: center;
}

.landing .cta-band .cta-band__title {
  margin: 0 0 16px;
}

.landing .cta-band .cta-band__sub {
  margin: 0 0 32px;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  justify-content: center;
  align-items: center;
}

.landing .cta-band a.landing-btn--primary,
.landing .cta-band a.landing-btn--primary:hover,
.landing .cta-band a.landing-btn--primary:visited {
  color: #ffffff;
}
.psy-hero {
  position: relative;
  padding: var(--section-y) 0;
  overflow: hidden;
  background: var(--paper);
}

.psy-hero__blob {
  position: absolute;
  pointer-events: none;
}

.psy-hero__blob--brand {
  right: -8%;
  top: 10%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: var(--brand-soft);
  opacity: 0.55;
}

.psy-hero__blob--peach {
  left: -4%;
  bottom: 5%;
  width: 280px;
  height: 200px;
  border-radius: 50% 50% 40% 60%;
  background: var(--peach-soft);
  opacity: 0.7;
}

.psy-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}

.psy-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.psy-hero__stat {
  flex: 1 1 140px;
  min-width: 120px;
}

.psy-hero__stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}

.psy-hero__trust-rkn {
  flex: 1 1 180px;
  min-width: 160px;
}

.psy-hero__mock-wrap {
  position: relative;
  min-height: 400px;
}

.psy-hero__mock {
  padding: 10px;
  transform: rotate(1.5deg);
  box-shadow: var(--shadow-mock);
  overflow: hidden;
  background: var(--card);
}

.psy-hero__mock-img {
  max-height: min(560px, 70vh);
  object-fit: contain;
  object-position: top center;
  background: var(--paper-soft);
  border-radius: 12px;
}

.psy-hero__chip {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
  max-width: 90%;
}

.psy-hero__chip--1 {
  top: 12px;
  left: -8px;
}

.psy-hero__chip--2 {
  top: 42%;
  right: -12px;
}

.psy-hero__chip--3 {
  bottom: 28px;
  left: 24px;
}

@media (max-width: 900px) {
  .psy-hero__grid {
    grid-template-columns: 1fr;
  }

  .psy-hero__chip--1 {
    left: 8px;
  }

  .psy-hero__chip--2 {
    right: 8px;
  }
}
.psy-zoo {
  padding: var(--section-y) 0;
  background: var(--paper-soft);
}

.psy-zoo__title {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}

.psy-zoo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}

.psy-zoo__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.psy-zoo__sub {
  margin-bottom: 4px;
}

.psy-zoo__chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  min-height: 140px;
  padding: 8px 4px 12px;
  align-content: flex-start;
}

.psy-zoo__chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--card-border);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.psy-zoo__chip--brand {
  background: var(--brand-soft);
  border-color: transparent;
}

.psy-zoo__chip--peach {
  background: var(--peach-soft);
  border-color: transparent;
}

.psy-zoo__chip--sage {
  background: var(--sage-soft);
  border-color: transparent;
}

/* Лёгкий «разброс» без хаоса */
.psy-zoo__chip--scatter-0 {
  transform: rotate(-3deg) translateY(4px);
}
.psy-zoo__chip--scatter-1 {
  transform: rotate(2deg) translateY(-6px);
}
.psy-zoo__chip--scatter-2 {
  transform: rotate(-1deg) translateY(10px);
}
.psy-zoo__chip--scatter-3 {
  transform: rotate(4deg) translateY(-2px);
}
.psy-zoo__chip--scatter-4 {
  transform: rotate(-2deg) translateY(8px);
}
.psy-zoo__chip--scatter-5 {
  transform: rotate(1deg) translateY(-8px);
}
.psy-zoo__chip--scatter-6 {
  transform: rotate(-4deg) translateY(2px);
}

.psy-zoo__caption {
  margin: 0;
  max-width: 420px;
}

.psy-zoo__jung {
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.psy-zoo__unified {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}

.psy-zoo__unified-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.psy-zoo__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--sage);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.psy-zoo__bridge {
  margin-top: 36px;
  text-align: center;
}

@media (max-width: 800px) {
  .psy-zoo__grid {
    grid-template-columns: 1fr;
  }

  .psy-zoo__chips {
    min-height: 0;
  }

  .psy-zoo__chip--scatter-0,
  .psy-zoo__chip--scatter-1,
  .psy-zoo__chip--scatter-2,
  .psy-zoo__chip--scatter-3,
  .psy-zoo__chip--scatter-4,
  .psy-zoo__chip--scatter-5,
  .psy-zoo__chip--scatter-6 {
    transform: none;
  }
}
.psy-tour {
  scroll-margin-top: 80px;
}

.psy-tour__intro {
  padding: calc(var(--section-y) * 0.65) 0 8px;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

.psy-tour__intro .landing-h2 {
  margin-top: 8px;
}

.psy-tour__block {
  padding: 56px 0;
  background: var(--paper);
}

.psy-tour__block--soft {
  background: var(--paper-soft);
}

.psy-tour__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.psy-tour__row--flip .psy-tour__text {
  order: 2;
}

.psy-tour__row--flip .psy-tour__mock {
  order: 1;
}

.psy-tour__bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.psy-tour__bullets li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.psy-tour__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}

.psy-tour__micro {
  margin-top: 20px;
  padding-inline: 0;
}

.psy-tour__mock {
  padding: 10px;
  box-shadow: var(--shadow-mock);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.psy-tour__mock-chrome {
  display: flex;
  gap: 6px;
  padding: 2px 4px 0;
}

.psy-tour__mock-chrome span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}

.psy-tour__mock-img {
  max-height: min(520px, 65vh);
  object-fit: contain;
  object-position: top center;
  background: var(--paper-soft);
  border-radius: 12px;
}

.psy-tour__mock-body {
  display: none;
}

@media (max-width: 800px) {
  .psy-tour__row,
  .psy-tour__row--flip {
    grid-template-columns: 1fr;
  }

  .psy-tour__row--flip .psy-tour__text,
  .psy-tour__row--flip .psy-tour__mock {
    order: unset;
  }

  .psy-tour__block {
    padding: 40px 0;
  }
}
.psy-research {
  padding: var(--section-y) 0;
  background: var(--paper);
  scroll-margin-top: 80px;
}

.psy-research__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}

.psy-research__bullets {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.psy-research__bullets li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.psy-research__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage);
}

.psy-research__diff {
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--sage-soft);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.psy-research__viz {
  padding: 28px;
  box-shadow: var(--shadow-card);
}

.psy-research__viz-title {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 20px;
}

.psy-research__chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.psy-research__chart-row {
  display: grid;
  grid-template-columns: minmax(64px, 0.32fr) 1fr minmax(28px, auto);
  gap: 12px;
  align-items: center;
}

.psy-research__chart-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.psy-research__bar-track {
  height: 12px;
  border-radius: 8px;
  background: var(--paper-soft);
  overflow: hidden;
}

.psy-research__bar-fill {
  height: 100%;
  border-radius: 8px;
  min-width: 4px;
  transition: width 0.35s ease;
}

.psy-research__chart-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 800px) {
  .psy-research__grid {
    grid-template-columns: 1fr;
  }
}
.psy-steps {
  padding: var(--section-y) 0;
  background: var(--paper-soft);
}

/* Специфичность выше, чем .landing .landing-h2 { margin: 0 } */
.landing .psy-steps .psy-steps__title {
  text-align: center;
  margin: 0 auto 88px;
  max-width: 640px;
}

.psy-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.psy-steps__card {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}

.psy-steps__num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 600;
  line-height: 1;
  color: var(--brand);
}

.landing .psy-steps .psy-steps__card-title {
  margin: 0 0 16px;
}

.landing .psy-steps .psy-steps__card-body {
  margin: 0;
}

@media (max-width: 800px) {
  .landing .psy-steps .psy-steps__title {
    margin-bottom: 56px;
  }

  .psy-steps__list {
    grid-template-columns: 1fr;
  }
}
.psy-pricing {
  padding: var(--section-y) 0;
  background: var(--paper);
  scroll-margin-top: 80px;
}

.psy-pricing__inner {
  max-width: 720px;
  text-align: center;
}

/* Перебиваем .landing .landing-h2 / .landing-lead { margin: 0 } */
.landing .psy-pricing .psy-pricing__title {
  margin: 0 0 28px;
}

.landing .psy-pricing .psy-pricing__lead {
  margin: 0 0 40px;
}

.landing .psy-pricing .psy-pricing__banner {
  padding: 22px 26px;
  margin: 0 0 40px;
  background: var(--peach-soft);
  border-color: transparent;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  box-shadow: none;
}

.psy-pricing__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  justify-content: center;
  align-items: center;
}

.landing .psy-pricing .psy-pricing__cta .landing-btn--primary {
  color: #ffffff;
}
.psy-verify {
  padding: var(--section-y) 0;
  background: var(--paper-soft);
}

.psy-verify__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 40px;
  align-items: start;
}

.landing .psy-verify .psy-verify__title {
  margin: 0 0 28px;
}

.psy-verify__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.psy-verify__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.psy-verify__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--sage);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.landing .psy-verify .psy-verify__data {
  padding: 28px;
  background: var(--sage-soft);
  border-color: transparent;
  box-shadow: none;
}

.landing .psy-verify .psy-verify__data-text {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 800px) {
  .psy-verify__grid {
    grid-template-columns: 1fr;
  }
}
.psy-faq {
  padding: var(--section-y) 0;
  background: var(--paper);
  scroll-margin-top: 80px;
}

.psy-faq__inner {
  max-width: 800px;
}

.landing .psy-faq .psy-faq__title {
  margin: 0 0 36px;
  text-align: center;
}

.psy-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.psy-faq__item {
  padding: 0;
  overflow: hidden;
}

.psy-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.psy-faq__q:focus-visible {
  outline: 3px solid var(--brand-soft);
  outline-offset: -3px;
}

.psy-faq__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}

.landing .psy-faq .psy-faq__a {
  padding: 0 22px 20px;
}

.landing .psy-faq .psy-faq__a .landing-body {
  margin: 0;
}
.cli-hero {
  padding: var(--section-y) 0 calc(var(--section-y) * 0.7);
  background: var(--paper);
}

.cli-hero__inner {
  max-width: 780px;
  text-align: center;
}

.landing .cli-hero .cli-hero__title {
  margin: 0 0 20px;
}

.landing .cli-hero .cli-hero__lead {
  margin: 0 auto 28px;
  max-width: 640px;
}

.cli-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 36px;
}

.cli-hero__trust {
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: center;
}

.cli-hero__trust li {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 280px;
}
.cli-requests {
  padding: calc(var(--section-y) * 0.55) 0;
  background: var(--paper-soft);
}

.cli-requests__inner {
  text-align: center;
}

.landing .cli-requests .cli-requests__title {
  margin: 0 0 28px;
}

.cli-requests__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
}

.cli-requests__chip {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.cli-requests__chip:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: var(--shadow-card-hover);
}

.cli-requests__chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.cli-requests__chip:focus-visible {
  outline: 3px solid var(--brand-soft);
  outline-offset: 2px;
}

.landing .cli-requests .cli-requests__hint {
  margin: 0;
  color: var(--ink-muted);
}
.cli-steps {
  padding: var(--section-y) 0;
  background: var(--paper);
  scroll-margin-top: 80px;
}

.landing .cli-steps .cli-steps__title {
  text-align: center;
  margin: 0 auto 48px;
  max-width: 640px;
}

.cli-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.cli-steps__card {
  padding: 28px 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cli-steps__num {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 600;
  line-height: 1;
  color: var(--brand);
}

.landing .cli-steps .cli-steps__card-title {
  margin: 0;
}

.landing .cli-steps .cli-steps__card-body {
  margin: 0;
}

@media (max-width: 800px) {
  .cli-steps__list {
    grid-template-columns: 1fr;
  }
}
.cli-catalog {
  padding: var(--section-y) 0;
  background: var(--paper-soft);
  scroll-margin-top: 80px;
}

.landing .cli-catalog .cli-catalog__title {
  text-align: center;
  margin: 0 auto 16px;
  max-width: 720px;
}

.landing .cli-catalog .cli-catalog__sub {
  text-align: center;
  margin: 0 auto 24px;
  max-width: 640px;
}

.cli-catalog__match-cta {
  display: flex;
  justify-content: center;
  margin: 0 0 40px;
}

.landing .cli-catalog a.landing-btn--primary,
.landing .cli-catalog a.landing-btn--primary:hover,
.landing .cli-catalog a.landing-btn--primary:visited {
  color: #fff;
}

.cli-catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.cli-catalog__card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cli-catalog__avatar-wrap {
  margin-bottom: 8px;
}

.cli-catalog__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--brand-soft);
}

.cli-catalog__avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--brand-deep);
}

.landing .cli-catalog .cli-catalog__name {
  margin: 0;
  font-size: 18px;
}

.cli-catalog__method {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
}

.landing .cli-catalog .cli-catalog__approach {
  margin: 0;
  flex: 1;
}

.landing .cli-catalog .cli-catalog__price {
  margin: 4px 0 8px;
  color: var(--ink-muted);
}

.cli-catalog__cta {
  align-self: flex-start;
  margin-top: auto;
}

.landing .cli-catalog a.cli-catalog__cta,
.landing .cli-catalog a.cli-catalog__cta:hover,
.landing .cli-catalog a.cli-catalog__cta:visited {
  color: #fff;
}

.cli-catalog__footer {
  margin-top: 32px;
  text-align: center;
}
.cli-between {
  padding: var(--section-y) 0;
  background: var(--paper);
  scroll-margin-top: 80px;
}

.cli-between__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 40px;
  align-items: center;
}

.landing .cli-between .cli-between__title {
  margin: 0 0 24px;
}

.cli-between__list {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cli-between__list li {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.cli-between__list strong {
  color: var(--ink);
  font-weight: 600;
}

.cli-between__note {
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--sage-soft);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}

.cli-between__viz {
  padding: 28px;
}

.cli-between__viz-title {
  font-weight: 600;
  margin-bottom: 18px;
  color: var(--ink);
}

.cli-between__chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cli-between__row {
  display: grid;
  grid-template-columns: minmax(56px, 0.3fr) 1fr auto;
  gap: 12px;
  align-items: center;
}

.cli-between__label {
  font-size: 14px;
  font-weight: 600;
}

.cli-between__track {
  height: 12px;
  border-radius: 8px;
  background: var(--paper-soft);
  overflow: hidden;
}

.cli-between__fill {
  height: 100%;
  border-radius: 8px;
  min-width: 4px;
}

.cli-between__count {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 800px) {
  .cli-between__grid {
    grid-template-columns: 1fr;
  }
}
.cli-trust {
  padding: var(--section-y) 0;
  background: var(--paper-soft);
}

.landing .cli-trust .cli-trust__title {
  text-align: center;
  margin: 0 auto 40px;
  max-width: 640px;
}

.cli-trust__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.cli-trust__card {
  padding: 24px;
  margin: 0;
}

.landing .cli-trust .cli-trust__card-title {
  margin: 0 0 10px;
  font-size: 18px;
}

.landing .cli-trust .cli-trust__card-body {
  margin: 0;
}

@media (max-width: 700px) {
  .cli-trust__grid {
    grid-template-columns: 1fr;
  }
}
.cli-faq {
  padding: var(--section-y) 0;
  background: var(--paper);
  scroll-margin-top: 80px;
}

.cli-faq__inner {
  max-width: 800px;
}

.landing .cli-faq .cli-faq__title {
  margin: 0 0 36px;
  text-align: center;
}

.cli-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cli-faq__item {
  padding: 0;
  overflow: hidden;
}

.cli-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.cli-faq__q:focus-visible {
  outline: 3px solid var(--brand-soft);
  outline-offset: -3px;
}

.cli-faq__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}

.landing .cli-faq .cli-faq__a {
  padding: 0 22px 20px;
}

.landing .cli-faq .cli-faq__a .landing-body {
  margin: 0;
}
.res-hero {
  position: relative;
  padding: calc(var(--section-y) + 8px) 0;
  overflow: hidden;
  background: var(--paper);
}

.res-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}

.res-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

.res-hero__stat {
  flex: 1 1 140px;
  min-width: 120px;
}

.res-hero__stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 6px;
}

.res-hero__trust-rkn {
  flex: 1 1 180px;
  min-width: 160px;
  align-self: center;
}

.res-hero__visual {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.res-hero__hex-card {
  padding: 20px;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-mock);
}

.res-hero__hex-card .ind-hex {
  max-width: 100%;
  height: auto;
}

.res-hero__chart-card {
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.res-hero__chart-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 18px;
}

.res-hero__chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.res-hero__chart-row {
  display: grid;
  grid-template-columns: minmax(52px, 0.28fr) 1fr minmax(24px, auto);
  gap: 10px;
  align-items: center;
}

.res-hero__chart-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.res-hero__bar-track {
  height: 10px;
  border-radius: 8px;
  background: var(--paper-soft);
  overflow: hidden;
}

.res-hero__bar-fill {
  height: 100%;
  border-radius: 8px;
  min-width: 4px;
}

.res-hero__chart-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .res-hero__grid {
    grid-template-columns: 1fr;
  }
}
.res-eyebrow--accent {
  color: var(--brand) !important;
}

.res-tour {
  scroll-margin-top: 80px;
}

.res-tour__block {
  padding: calc(var(--section-y) * 0.85) 0;
  background: var(--paper);
}

.res-tour__block--soft {
  background: var(--paper-soft);
}

.res-tour__row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: center;
}

.res-tour__row--flip .res-tour__text {
  order: 2;
}

.res-tour__row--flip .res-tour__panel {
  order: 1;
}

.res-tour__bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.res-tour__bullets li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.res-tour__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}

.res-tour__panel {
  padding: 32px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-card);
}

.res-tour__panel-mark {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
}

.res-tour__panel-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.res-tour__panel-lines span {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--paper-soft);
}

.res-tour__panel-lines span:nth-child(1) {
  width: 92%;
  background: var(--brand-soft);
}

.res-tour__panel-lines span:nth-child(2) {
  width: 72%;
}

.res-tour__panel-lines span:nth-child(3) {
  width: 54%;
}

@media (max-width: 800px) {
  .res-tour__row,
  .res-tour__row--flip {
    grid-template-columns: 1fr;
  }

  .res-tour__row--flip .res-tour__text,
  .res-tour__row--flip .res-tour__panel {
    order: unset;
  }

  .res-tour__block {
    padding: calc(var(--section-y) * 0.7) 0;
  }
}
.res-bridge {
  padding: calc(var(--section-y) + 16px) 0;
  background: var(--paper-soft);
  scroll-margin-top: 80px;
}

.res-bridge__inner {
  max-width: 720px;
}

.landing .res-bridge .res-bridge__title {
  margin: 0 0 36px;
}

.res-bridge__bullets {
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.res-bridge__bullets li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.res-bridge__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}
.res-ethics {
  padding: calc(var(--section-y) + 24px) 0;
  background: var(--paper);
  scroll-margin-top: 80px;
}

/* Специфичность выше, чем .landing .landing-h2 { margin: 0 } */
.landing .res-ethics .res-ethics__title {
  margin: 0 0 48px;
  max-width: 720px;
}

.res-ethics__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.res-ethics__card {
  padding: 28px;
}

.res-ethics__card-title {
  margin: 0 0 12px;
  font-size: 18px;
}

@media (max-width: 700px) {
  .res-ethics__grid {
    grid-template-columns: 1fr;
  }
}
.res-steps {
  padding: calc(var(--section-y) + 16px) 0;
  background: var(--paper-soft);
}

/* Специфичность выше, чем .landing .landing-h2 { margin: 0 } */
.landing .res-steps .res-steps__title {
  margin: 0 0 40px;
}

.res-steps__list {
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.res-steps__card {
  padding: 26px 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.res-steps__num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  color: var(--brand);
  flex-shrink: 0;
}

.res-steps__card-title {
  margin: 4px 0 0;
  font-size: 18px;
}

.res-steps__banner {
  margin: 0;
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--peach-soft);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

@media (max-width: 800px) {
  .res-steps__list {
    grid-template-columns: 1fr;
  }
}
.res-faq {
  padding: calc(var(--section-y) + 16px) 0;
  background: var(--paper);
  scroll-margin-top: 80px;
}

.res-faq__inner {
  max-width: 760px;
}

.landing .res-faq .res-faq__title {
  margin: 0 0 40px;
}

.res-faq__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.res-faq__item {
  overflow: hidden;
}

.res-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  line-height: 1.4;
}

.res-faq__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-soft);
  color: var(--brand);
  font-size: 18px;
  font-weight: 700;
}

.res-faq__a {
  padding: 0 22px 20px;
}

.res-faq__a .landing-body {
  margin: 0;
}
/* Отображение текста обновлений (Markdown → HTML) */
.platform-update-md {
  line-height: 1.65;
  color: var(--text);
  font-size: 15px;
}

.platform-update-md p {
  margin: 0 0 0.75em;
}

.platform-update-md p:last-child {
  margin-bottom: 0;
}

.platform-update-md ul,
.platform-update-md ol {
  margin: 0.4em 0 0.75em;
  padding-left: 1.35em;
}

.platform-update-md li {
  margin: 0.25em 0;
}

.platform-update-md li > p {
  margin: 0.15em 0;
}

.platform-update-md strong {
  font-weight: 700;
}

.platform-update-md a {
  color: #5b7cfa;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.platform-update-md a:hover {
  opacity: 0.9;
}

.platform-update-md h1,
.platform-update-md h2,
.platform-update-md h3 {
  font-size: 1.1em;
  font-weight: 700;
  margin: 0.9em 0 0.45em;
}

.platform-update-md h1:first-child,
.platform-update-md h2:first-child,
.platform-update-md h3:first-child {
  margin-top: 0;
}

.platform-update-md blockquote {
  margin: 0.6em 0;
  padding: 0.4em 0 0.4em 0.9em;
  border-left: 3px solid rgba(91, 124, 250, 0.45);
  color: var(--text-muted, rgba(255, 255, 255, 0.75));
}

.platform-update-md code {
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: var(--surface-2, rgba(255, 255, 255, 0.06));
}

.platform-update-md pre {
  margin: 0.6em 0;
  padding: 0.75em 1em;
  border-radius: 10px;
  overflow: auto;
  background: var(--surface-2, rgba(0, 0, 0, 0.25));
}

.platform-update-md pre code {
  padding: 0;
  background: none;
}
@media (prefers-color-scheme: dark) {
  .wmde-markdown,
  .wmde-markdown-var {
    color-scheme: dark;
    --color-prettylights-syntax-comment: #8b949e;
    --color-prettylights-syntax-constant: #79c0ff;
    --color-prettylights-syntax-entity: #d2a8ff;
    --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
    --color-prettylights-syntax-entity-tag: #7ee787;
    --color-prettylights-syntax-keyword: #ff7b72;
    --color-prettylights-syntax-string: #a5d6ff;
    --color-prettylights-syntax-variable: #ffa657;
    --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
    --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
    --color-prettylights-syntax-carriage-return-text: #f0f6fc;
    --color-prettylights-syntax-carriage-return-bg: #b62324;
    --color-prettylights-syntax-string-regexp: #7ee787;
    --color-prettylights-syntax-markup-list: #f2cc60;
    --color-prettylights-syntax-markup-heading: #1f6feb;
    --color-prettylights-syntax-markup-italic: #c9d1d9;
    --color-prettylights-syntax-markup-bold: #c9d1d9;
    --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
    --color-prettylights-syntax-markup-deleted-bg: #67060c;
    --color-prettylights-syntax-markup-inserted-text: #aff5b4;
    --color-prettylights-syntax-markup-inserted-bg: #033a16;
    --color-prettylights-syntax-markup-changed-text: #ffdfb6;
    --color-prettylights-syntax-markup-changed-bg: #5a1e02;
    --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
    --color-prettylights-syntax-markup-ignored-bg: #1158c7;
    --color-prettylights-syntax-meta-diff-range: #d2a8ff;
    --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
    --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
    --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
    --color-fg-default: #c9d1d9;
    --color-fg-muted: #8b949e;
    --color-fg-subtle: #484f58;
    --color-canvas-default: #0d1117;
    --color-canvas-subtle: #161b22;
    --color-border-default: #30363d;
    --color-border-muted: #21262d;
    --color-neutral-muted: rgba(110, 118, 129, 0.4);
    --color-accent-fg: #58a6ff;
    --color-accent-emphasis: #1f6feb;
    --color-attention-subtle: rgba(187, 128, 9, 0.15);
    --color-danger-fg: #f85149;
    --color-danger-emphasis: #da3633;
    --color-attention-fg: #d29922;
    --color-attention-emphasis: #9e6a03;
    --color-done-fg: #a371f7;
    --color-done-emphasis: #8957e5;
    --color-success-fg: #3fb950;
    --color-success-emphasis: #238636;
    --color-copied-active-bg: #2e9b33;
  }
}
@media (prefers-color-scheme: light) {
  .wmde-markdown,
  .wmde-markdown-var {
    color-scheme: light;
    --color-prettylights-syntax-comment: #6e7781;
    --color-prettylights-syntax-constant: #0550ae;
    --color-prettylights-syntax-entity: #8250df;
    --color-prettylights-syntax-storage-modifier-import: #24292f;
    --color-prettylights-syntax-entity-tag: #116329;
    --color-prettylights-syntax-keyword: #cf222e;
    --color-prettylights-syntax-string: #0a3069;
    --color-prettylights-syntax-variable: #953800;
    --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
    --color-prettylights-syntax-invalid-illegal-bg: #82071e;
    --color-prettylights-syntax-carriage-return-text: #f6f8fa;
    --color-prettylights-syntax-carriage-return-bg: #cf222e;
    --color-prettylights-syntax-string-regexp: #116329;
    --color-prettylights-syntax-markup-list: #3b2300;
    --color-prettylights-syntax-markup-heading: #0550ae;
    --color-prettylights-syntax-markup-italic: #24292f;
    --color-prettylights-syntax-markup-bold: #24292f;
    --color-prettylights-syntax-markup-deleted-text: #82071e;
    --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
    --color-prettylights-syntax-markup-inserted-text: #116329;
    --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
    --color-prettylights-syntax-markup-changed-text: #953800;
    --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
    --color-prettylights-syntax-markup-ignored-text: #eaeef2;
    --color-prettylights-syntax-markup-ignored-bg: #0550ae;
    --color-prettylights-syntax-meta-diff-range: #8250df;
    --color-prettylights-syntax-brackethighlighter-angle: #57606a;
    --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
    --color-prettylights-syntax-constant-other-reference-link: #0a3069;
    --color-fg-default: #24292f;
    --color-fg-muted: #57606a;
    --color-fg-subtle: #6e7781;
    --color-canvas-default: #ffffff;
    --color-canvas-subtle: #f6f8fa;
    --color-border-default: #d0d7de;
    --color-border-muted: hsl(210, 18%, 87%);
    --color-neutral-muted: rgba(175, 184, 193, 0.2);
    --color-accent-fg: #0969da;
    --color-accent-emphasis: #0969da;
    --color-attention-subtle: #fff8c5;
    --color-danger-fg: #d1242f;
    --color-danger-emphasis: #cf222e;
    --color-attention-fg: #9a6700;
    --color-attention-emphasis: #9a6700;
    --color-done-fg: #8250df;
    --color-done-emphasis: #8250df;
    --color-success-fg: #1a7f37;
    --color-success-emphasis: #1f883d;
    --color-copied-active-bg: #2e9b33;
  }
}
[data-color-mode*='dark'] .wmde-markdown,
[data-color-mode*='dark'] .wmde-markdown-var,
.wmde-markdown-var[data-color-mode*='dark'],
.wmde-markdown[data-color-mode*='dark'],
body[data-color-mode*='dark'] {
  color-scheme: dark;
  --color-prettylights-syntax-comment: #8b949e;
  --color-prettylights-syntax-constant: #79c0ff;
  --color-prettylights-syntax-entity: #d2a8ff;
  --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
  --color-prettylights-syntax-entity-tag: #7ee787;
  --color-prettylights-syntax-keyword: #ff7b72;
  --color-prettylights-syntax-string: #a5d6ff;
  --color-prettylights-syntax-variable: #ffa657;
  --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
  --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
  --color-prettylights-syntax-carriage-return-text: #f0f6fc;
  --color-prettylights-syntax-carriage-return-bg: #b62324;
  --color-prettylights-syntax-string-regexp: #7ee787;
  --color-prettylights-syntax-markup-list: #f2cc60;
  --color-prettylights-syntax-markup-heading: #1f6feb;
  --color-prettylights-syntax-markup-italic: #c9d1d9;
  --color-prettylights-syntax-markup-bold: #c9d1d9;
  --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
  --color-prettylights-syntax-markup-deleted-bg: #67060c;
  --color-prettylights-syntax-markup-inserted-text: #aff5b4;
  --color-prettylights-syntax-markup-inserted-bg: #033a16;
  --color-prettylights-syntax-markup-changed-text: #ffdfb6;
  --color-prettylights-syntax-markup-changed-bg: #5a1e02;
  --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
  --color-prettylights-syntax-markup-ignored-bg: #1158c7;
  --color-prettylights-syntax-meta-diff-range: #d2a8ff;
  --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
  --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
  --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
  --color-fg-default: #c9d1d9;
  --color-fg-muted: #8b949e;
  --color-fg-subtle: #484f58;
  --color-canvas-default: #0d1117;
  --color-canvas-subtle: #161b22;
  --color-border-default: #30363d;
  --color-border-muted: #21262d;
  --color-neutral-muted: rgba(110, 118, 129, 0.4);
  --color-accent-fg: #58a6ff;
  --color-accent-emphasis: #1f6feb;
  --color-attention-subtle: rgba(187, 128, 9, 0.15);
  --color-danger-fg: #f85149;
}
[data-color-mode*='light'] .wmde-markdown,
[data-color-mode*='light'] .wmde-markdown-var,
.wmde-markdown-var[data-color-mode*='light'],
.wmde-markdown[data-color-mode*='light'],
body[data-color-mode*='light'] {
  color-scheme: light;
  --color-prettylights-syntax-comment: #6e7781;
  --color-prettylights-syntax-constant: #0550ae;
  --color-prettylights-syntax-entity: #8250df;
  --color-prettylights-syntax-storage-modifier-import: #24292f;
  --color-prettylights-syntax-entity-tag: #116329;
  --color-prettylights-syntax-keyword: #cf222e;
  --color-prettylights-syntax-string: #0a3069;
  --color-prettylights-syntax-variable: #953800;
  --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
  --color-prettylights-syntax-invalid-illegal-bg: #82071e;
  --color-prettylights-syntax-carriage-return-text: #f6f8fa;
  --color-prettylights-syntax-carriage-return-bg: #cf222e;
  --color-prettylights-syntax-string-regexp: #116329;
  --color-prettylights-syntax-markup-list: #3b2300;
  --color-prettylights-syntax-markup-heading: #0550ae;
  --color-prettylights-syntax-markup-italic: #24292f;
  --color-prettylights-syntax-markup-bold: #24292f;
  --color-prettylights-syntax-markup-deleted-text: #82071e;
  --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
  --color-prettylights-syntax-markup-inserted-text: #116329;
  --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
  --color-prettylights-syntax-markup-changed-text: #953800;
  --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
  --color-prettylights-syntax-markup-ignored-text: #eaeef2;
  --color-prettylights-syntax-markup-ignored-bg: #0550ae;
  --color-prettylights-syntax-meta-diff-range: #8250df;
  --color-prettylights-syntax-brackethighlighter-angle: #57606a;
  --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
  --color-fg-default: #24292f;
  --color-fg-muted: #57606a;
  --color-fg-subtle: #6e7781;
  --color-canvas-default: #ffffff;
  --color-canvas-subtle: #f6f8fa;
  --color-border-default: #d0d7de;
  --color-border-muted: hsl(210, 18%, 87%);
  --color-neutral-muted: rgba(175, 184, 193, 0.2);
  --color-accent-fg: #0969da;
  --color-accent-emphasis: #0969da;
  --color-attention-subtle: #fff8c5;
  --color-danger-fg: #cf222e;
}
.wmde-markdown {
  -webkit-text-size-adjust: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
  color: var(--color-fg-default);
  background-color: var(--color-canvas-default);
}
.wmde-markdown details,
.wmde-markdown figcaption,
.wmde-markdown figure {
  display: block;
}
.wmde-markdown summary {
  display: list-item;
}
.wmde-markdown [hidden] {
  display: none !important;
}
.wmde-markdown a {
  background-color: transparent;
  color: var(--color-accent-fg);
  text-decoration: none;
}
.wmde-markdown a:active,
.wmde-markdown a:hover {
  outline-width: 0;
}
.wmde-markdown abbr[title] {
  border-bottom: none;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
.wmde-markdown b,
.wmde-markdown strong {
  font-weight: 600;
}
.wmde-markdown dfn {
  font-style: italic;
}
.wmde-markdown h1 {
  margin: 0.67em 0;
  font-weight: 600;
  padding-bottom: 0.3em;
  font-size: 2em;
  border-bottom: 1px solid var(--color-border-muted);
}
.wmde-markdown mark {
  background-color: var(--color-attention-subtle);
  color: var(--color-text-primary);
}
.wmde-markdown small {
  font-size: 90%;
}
.wmde-markdown sub,
.wmde-markdown sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.wmde-markdown sub {
  bottom: -0.25em;
}
.wmde-markdown sup {
  top: -0.5em;
}
.wmde-markdown img {
  display: inline-block;
  border-style: none;
  max-width: 100%;
  box-sizing: content-box;
  background-color: var(--color-canvas-default);
}
.wmde-markdown code,
.wmde-markdown kbd,
.wmde-markdown pre,
.wmde-markdown samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
.wmde-markdown figure {
  margin: 1em 40px;
}
.wmde-markdown hr {
  box-sizing: content-box;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border-muted);
  height: 0.25em;
  padding: 0;
  margin: 24px 0;
  background-color: var(--color-border-default);
}
.wmde-markdown input {
  font: inherit;
  margin: 0;
  overflow: visible;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.wmde-markdown [type='button'],
.wmde-markdown [type='reset'],
.wmde-markdown [type='submit'] {
  -webkit-appearance: button;
}
.wmde-markdown [type='button']::-moz-focus-inner,
.wmde-markdown [type='reset']::-moz-focus-inner,
.wmde-markdown [type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
.wmde-markdown [type='button']:-moz-focusring,
.wmde-markdown [type='reset']:-moz-focusring,
.wmde-markdown [type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}
.wmde-markdown [type='checkbox'],
.wmde-markdown [type='radio'] {
  box-sizing: border-box;
  padding: 0;
}
.wmde-markdown [type='number']::-webkit-inner-spin-button,
.wmde-markdown [type='number']::-webkit-outer-spin-button {
  height: auto;
}
.wmde-markdown [type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
.wmde-markdown [type='search']::-webkit-search-cancel-button,
.wmde-markdown [type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
.wmde-markdown ::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}
.wmde-markdown ::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
.wmde-markdown a:hover {
  text-decoration: underline;
}
.wmde-markdown hr::before {
  display: table;
  content: '';
}
.wmde-markdown hr::after {
  display: table;
  clear: both;
  content: '';
}
.wmde-markdown table {
  border-spacing: 0;
  border-collapse: collapse;
  display: block;
  width: max-content;
  max-width: 100%;
}
.wmde-markdown td,
.wmde-markdown th {
  padding: 0;
}
.wmde-markdown details summary {
  cursor: pointer;
}
.wmde-markdown details:not([open]) > *:not(summary) {
  display: none !important;
}
.wmde-markdown kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  line-height: 10px;
  color: var(--color-fg-default);
  vertical-align: middle;
  background-color: var(--color-canvas-subtle);
  border: solid 1px var(--color-neutral-muted);
  border-bottom-color: var(--color-neutral-muted);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
}
.wmde-markdown h1,
.wmde-markdown h2,
.wmde-markdown h3,
.wmde-markdown h4,
.wmde-markdown h5,
.wmde-markdown h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}
.wmde-markdown td,
.wmde-markdown th {
  padding: 0;
}
.wmde-markdown details summary {
  cursor: pointer;
}
.wmde-markdown details:not([open]) > *:not(summary) {
  display: none !important;
}
.wmde-markdown kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  line-height: 10px;
  color: var(--color-fg-default);
  vertical-align: middle;
  background-color: var(--color-canvas-subtle);
  border: solid 1px var(--color-neutral-muted);
  border-bottom-color: var(--color-neutral-muted);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
}
.wmde-markdown h1,
.wmde-markdown h2,
.wmde-markdown h3,
.wmde-markdown h4,
.wmde-markdown h5,
.wmde-markdown h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}
.wmde-markdown h2 {
  font-weight: 600;
  padding-bottom: 0.3em;
  font-size: 1.5em;
  border-bottom: 1px solid var(--color-border-muted);
}
.wmde-markdown h3 {
  font-weight: 600;
  font-size: 1.25em;
}
.wmde-markdown h4 {
  font-weight: 600;
  font-size: 1em;
}
.wmde-markdown h5 {
  font-weight: 600;
  font-size: 0.875em;
}
.wmde-markdown h6 {
  font-weight: 600;
  font-size: 0.85em;
  color: var(--color-fg-muted);
}
.wmde-markdown p {
  margin-top: 0;
  margin-bottom: 10px;
}
.wmde-markdown blockquote {
  margin: 0;
  padding: 0 1em;
  color: var(--color-fg-muted);
  border-left: 0.25em solid var(--color-border-default);
}
.wmde-markdown ul,
.wmde-markdown ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 2em;
}
.wmde-markdown ol ol,
.wmde-markdown ul ol {
  list-style-type: lower-roman;
}
.wmde-markdown ul ul ol,
.wmde-markdown ul ol ol,
.wmde-markdown ol ul ol,
.wmde-markdown ol ol ol {
  list-style-type: lower-alpha;
}
.wmde-markdown dd {
  margin-left: 0;
}
.wmde-markdown tt,
.wmde-markdown code {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-size: 12px;
}
.wmde-markdown pre {
  margin-top: 0;
  margin-bottom: 0;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-size: 12px;
  word-wrap: normal;
}
.wmde-markdown .octicon {
  display: inline-block;
  overflow: visible !important;
  vertical-align: text-bottom;
  fill: currentColor;
}
.wmde-markdown ::placeholder {
  color: var(--color-fg-subtle);
  opacity: 1;
}
.wmde-markdown input::-webkit-outer-spin-button,
.wmde-markdown input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}
.wmde-markdown [data-catalyst] {
  display: block;
}
.wmde-markdown::before {
  display: table;
  content: '';
}
.wmde-markdown::after {
  display: table;
  clear: both;
  content: '';
}
.wmde-markdown > *:first-child {
  margin-top: 0 !important;
}
.wmde-markdown > *:last-child {
  margin-bottom: 0 !important;
}
.wmde-markdown a:not([href]) {
  color: inherit;
  text-decoration: none;
}
.wmde-markdown .absent {
  color: var(--color-danger-fg);
}
.wmde-markdown a.anchor {
  float: left;
  padding-right: 4px;
  margin-left: -20px;
  line-height: 1;
}
.wmde-markdown .anchor:focus {
  outline: none;
}
.wmde-markdown p,
.wmde-markdown blockquote,
.wmde-markdown ul,
.wmde-markdown ol,
.wmde-markdown dl,
.wmde-markdown table,
.wmde-markdown pre,
.wmde-markdown details {
  margin-top: 0;
  margin-bottom: 16px;
}
.wmde-markdown blockquote > :first-child {
  margin-top: 0;
}
.wmde-markdown blockquote > :last-child {
  margin-bottom: 0;
}
.wmde-markdown sup > a::before {
  content: '[';
}
.wmde-markdown sup > a::after {
  content: ']';
}
.wmde-markdown h1 .octicon-link,
.wmde-markdown h2 .octicon-link,
.wmde-markdown h3 .octicon-link,
.wmde-markdown h4 .octicon-link,
.wmde-markdown h5 .octicon-link,
.wmde-markdown h6 .octicon-link {
  color: var(--color-fg-default);
  vertical-align: middle;
  visibility: hidden;
}
.wmde-markdown h1:hover .anchor,
.wmde-markdown h2:hover .anchor,
.wmde-markdown h3:hover .anchor,
.wmde-markdown h4:hover .anchor,
.wmde-markdown h5:hover .anchor,
.wmde-markdown h6:hover .anchor {
  text-decoration: none;
}
.wmde-markdown h1:hover .anchor .octicon-link,
.wmde-markdown h2:hover .anchor .octicon-link,
.wmde-markdown h3:hover .anchor .octicon-link,
.wmde-markdown h4:hover .anchor .octicon-link,
.wmde-markdown h5:hover .anchor .octicon-link,
.wmde-markdown h6:hover .anchor .octicon-link {
  visibility: visible;
}
.wmde-markdown h1 tt,
.wmde-markdown h1 code,
.wmde-markdown h2 tt,
.wmde-markdown h2 code,
.wmde-markdown h3 tt,
.wmde-markdown h3 code,
.wmde-markdown h4 tt,
.wmde-markdown h4 code,
.wmde-markdown h5 tt,
.wmde-markdown h5 code,
.wmde-markdown h6 tt,
.wmde-markdown h6 code {
  padding: 0 0.2em;
  font-size: inherit;
}
.wmde-markdown ul.no-list,
.wmde-markdown ol.no-list {
  padding: 0;
  list-style-type: none;
}
.wmde-markdown ol[type='1'] {
  list-style-type: decimal;
}
.wmde-markdown ol[type='a'] {
  list-style-type: lower-alpha;
}
.wmde-markdown ol[type='i'] {
  list-style-type: lower-roman;
}
.wmde-markdown div > ol:not([type]) {
  list-style-type: decimal;
}
.wmde-markdown ul ul,
.wmde-markdown ul ol,
.wmde-markdown ol ol,
.wmde-markdown ol ul {
  margin-top: 0;
  margin-bottom: 0;
}
.wmde-markdown li > p {
  margin-top: 16px;
}
.wmde-markdown li + li {
  margin-top: 0.25em;
}
.wmde-markdown dl {
  padding: 0;
}
.wmde-markdown dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: 600;
}
.wmde-markdown dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}
.wmde-markdown table th {
  font-weight: 600;
}
.wmde-markdown table th,
.wmde-markdown table td {
  padding: 6px 13px;
  border: 1px solid var(--color-border-default);
}
.wmde-markdown table tr {
  background-color: var(--color-canvas-default);
  border-top: 1px solid var(--color-border-muted);
}
.wmde-markdown table tr:nth-child(2n) {
  background-color: var(--color-canvas-subtle);
}
.wmde-markdown table img {
  background-color: transparent;
}
.wmde-markdown img[align='right'] {
  padding-left: 20px;
}
.wmde-markdown img[align='left'] {
  padding-right: 20px;
}
.wmde-markdown .emoji {
  max-width: none;
  vertical-align: text-top;
  background-color: transparent;
}
.wmde-markdown span.frame {
  display: block;
  overflow: hidden;
}
.wmde-markdown span.frame > span {
  display: block;
  float: left;
  width: auto;
  padding: 7px;
  margin: 13px 0 0;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
}
.wmde-markdown span.frame span img {
  display: block;
  float: left;
}
.wmde-markdown span.frame span span {
  display: block;
  padding: 5px 0 0;
  clear: both;
  color: var(--color-fg-default);
}
.wmde-markdown span.align-center {
  display: block;
  overflow: hidden;
  clear: both;
}
.wmde-markdown span.align-center > span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: center;
}
.wmde-markdown span.align-center span img {
  margin: 0 auto;
  text-align: center;
}
.wmde-markdown span.align-right {
  display: block;
  overflow: hidden;
  clear: both;
}
.wmde-markdown span.align-right > span {
  display: block;
  margin: 13px 0 0;
  overflow: hidden;
  text-align: right;
}
.wmde-markdown span.align-right span img {
  margin: 0;
  text-align: right;
}
.wmde-markdown span.float-left {
  display: block;
  float: left;
  margin-right: 13px;
  overflow: hidden;
}
.wmde-markdown span.float-left span {
  margin: 13px 0 0;
}
.wmde-markdown span.float-right {
  display: block;
  float: right;
  margin-left: 13px;
  overflow: hidden;
}
.wmde-markdown span.float-right > span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: right;
}
.wmde-markdown code,
.wmde-markdown tt {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: var(--color-neutral-muted);
  border-radius: 6px;
}
.wmde-markdown code br,
.wmde-markdown tt br {
  display: none;
}
.wmde-markdown del code {
  text-decoration: inherit;
}
.wmde-markdown pre code {
  font-size: 100%;
}
.wmde-markdown pre > code {
  padding: 0;
  margin: 0;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}
.wmde-markdown pre {
  font-size: 85%;
  line-height: 1.45;
  background-color: var(--color-canvas-subtle);
  border-radius: 6px;
}
.wmde-markdown pre code,
.wmde-markdown pre tt {
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}
.wmde-markdown pre > code {
  padding: 16px;
  overflow: auto;
  display: block;
}
.wmde-markdown pre > code::-webkit-scrollbar {
  background: transparent;
  width: 8px;
  height: 8px;
}
.wmde-markdown pre > code::-webkit-scrollbar-thumb {
  background: var(--color-fg-muted);
  border-radius: 10px;
}
.wmde-markdown .csv-data td,
.wmde-markdown .csv-data th {
  padding: 5px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}
.wmde-markdown .csv-data .blob-num {
  padding: 10px 8px 9px;
  text-align: right;
  background: var(--color-canvas-default);
  border: 0;
}
.wmde-markdown .csv-data tr {
  border-top: 0;
}
.wmde-markdown .csv-data th {
  font-weight: 600;
  background: var(--color-canvas-subtle);
  border-top: 0;
}
.wmde-markdown .footnotes {
  font-size: 12px;
  color: var(--color-fg-muted);
  border-top: 1px solid var(--color-border-default);
}
.wmde-markdown .footnotes ol {
  padding-left: 16px;
}
.wmde-markdown .footnotes li {
  position: relative;
}
.wmde-markdown .footnotes li:target::before {
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -24px;
  pointer-events: none;
  content: '';
  border: 2px solid var(--color-accent-emphasis);
  border-radius: 6px;
}
.wmde-markdown .footnotes li:target {
  color: var(--color-fg-default);
}
.wmde-markdown .footnotes .data-footnote-backref g-emoji {
  font-family: monospace;
}
.wmde-markdown .task-list-item {
  list-style-type: none;
}
.wmde-markdown .task-list-item label {
  font-weight: 400;
}
.wmde-markdown .task-list-item.enabled label {
  cursor: pointer;
}
.wmde-markdown .task-list-item + .wmde-markdown .task-list-item {
  margin-top: 3px;
}
.wmde-markdown .task-list-item .handle {
  display: none;
}
.wmde-markdown .task-list-item-checkbox,
.wmde-markdown .contains-task-list input[type='checkbox'] {
  margin: 0 0.2em 0.25em -1.6em;
  vertical-align: middle;
}
.wmde-markdown .contains-task-list:dir(rtl) .task-list-item-checkbox,
.wmde-markdown .contains-task-list:dir(rtl) input[type='checkbox'] {
  margin: 0 -1.6em 0.25em 0.2em;
}
.wmde-markdown ::-webkit-calendar-picker-indicator {
  filter: invert(50%);
}
.wmde-markdown pre {
  position: relative;
}
.wmde-markdown pre .copied {
  visibility: hidden;
  display: flex;
  position: absolute;
  cursor: pointer;
  color: var(--color-fg-default);
  top: 6px;
  right: 6px;
  border-radius: 5px;
  background: var(--color-border-default);
  padding: 6px;
  font-size: 12px;
  transition: all 0.3s;
}
.wmde-markdown pre .copied .octicon-copy {
  display: block;
}
.wmde-markdown pre .copied .octicon-check {
  display: none;
}
.wmde-markdown pre:hover .copied {
  visibility: visible;
}
.wmde-markdown pre:hover .copied:hover {
  background: var(--color-prettylights-syntax-entity-tag);
  color: var(--color-canvas-default);
}
.wmde-markdown pre:hover .copied:active,
.wmde-markdown pre .copied.active {
  background: var(--color-copied-active-bg);
  color: var(--color-canvas-default);
}
.wmde-markdown pre .active .octicon-copy {
  display: none;
}
.wmde-markdown pre .active .octicon-check {
  display: block;
}
.wmde-markdown .markdown-alert {
  padding: 0.5rem 1em;
  color: inherit;
  margin-bottom: 16px;
  border-left: 0.25em solid var(--borderColor-default, var(--color-border-default));
}
.wmde-markdown .markdown-alert > :last-child {
  margin-bottom: 0 !important;
}
.wmde-markdown .markdown-alert .markdown-alert-title {
  display: flex;
  align-items: center;
  line-height: 1;
  font-weight: 500;
  font-size: 14px;
}
.wmde-markdown .markdown-alert .markdown-alert-title svg.octicon {
  margin-right: var(--base-size-8, 8px) !important;
}
.wmde-markdown .markdown-alert.markdown-alert-note {
  border-left-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
}
.wmde-markdown .markdown-alert.markdown-alert-note .markdown-alert-title {
  color: var(--fgColor-accent, var(--color-accent-fg));
}
.wmde-markdown .markdown-alert.markdown-alert-tip {
  border-left-color: var(--borderColor-success-emphasis, var(--color-success-emphasis));
}
.wmde-markdown .markdown-alert.markdown-alert-tip .markdown-alert-title {
  color: var(--fgColor-success, var(--color-success-fg));
}
.wmde-markdown .markdown-alert.markdown-alert-important {
  border-left-color: var(--borderColor-done-emphasis, var(--color-done-emphasis));
}
.wmde-markdown .markdown-alert.markdown-alert-important .markdown-alert-title {
  color: var(--fgColor-done, var(--color-done-fg));
}
.wmde-markdown .markdown-alert.markdown-alert-warning {
  border-left-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
}
.wmde-markdown .markdown-alert.markdown-alert-warning .markdown-alert-title {
  color: var(--fgColor-attention, var(--color-attention-fg));
}
.wmde-markdown .markdown-alert.markdown-alert-caution {
  border-left-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis));
}
.wmde-markdown .markdown-alert.markdown-alert-caution .markdown-alert-title {
  color: var(--fgColor-danger, var(--color-danger-fg));
}
.wmde-markdown .highlight-line {
  background-color: var(--color-neutral-muted);
}
.wmde-markdown .code-line.line-number::before {
  display: inline-block;
  width: 1rem;
  text-align: right;
  margin-right: 16px;
  color: var(--color-fg-subtle);
  content: attr(line);
  white-space: nowrap;
}
.wmde-markdown .token.comment,
.wmde-markdown .token.prolog,
.wmde-markdown .token.doctype,
.wmde-markdown .token.cdata {
  color: var(--color-prettylights-syntax-comment);
}
.wmde-markdown .token.namespace {
  opacity: 0.7;
}
.wmde-markdown .token.property,
.wmde-markdown .token.tag,
.wmde-markdown .token.selector,
.wmde-markdown .token.constant,
.wmde-markdown .token.symbol,
.wmde-markdown .token.deleted {
  color: var(--color-prettylights-syntax-entity-tag);
}
.wmde-markdown .token.maybe-class-name {
  color: var(--color-prettylights-syntax-variable);
}
.wmde-markdown .token.property-access,
.wmde-markdown .token.operator,
.wmde-markdown .token.boolean,
.wmde-markdown .token.number,
.wmde-markdown .token.selector .token.class,
.wmde-markdown .token.attr-name,
.wmde-markdown .token.string,
.wmde-markdown .token.char,
.wmde-markdown .token.builtin {
  color: var(--color-prettylights-syntax-constant);
}
.wmde-markdown .token.deleted {
  color: var(--color-prettylights-syntax-markup-deleted-text);
}
.wmde-markdown .code-line .token.deleted {
  background-color: var(--color-prettylights-syntax-markup-deleted-bg);
}
.wmde-markdown .token.inserted {
  color: var(--color-prettylights-syntax-markup-inserted-text);
}
.wmde-markdown .code-line .token.inserted {
  background-color: var(--color-prettylights-syntax-markup-inserted-bg);
}
.wmde-markdown .token.variable {
  color: var(--color-prettylights-syntax-constant);
}
.wmde-markdown .token.entity,
.wmde-markdown .token.url,
.wmde-markdown .language-css .token.string,
.wmde-markdown .style .token.string {
  color: var(--color-prettylights-syntax-string);
}
.wmde-markdown .token.color,
.wmde-markdown .token.atrule,
.wmde-markdown .token.attr-value,
.wmde-markdown .token.function,
.wmde-markdown .token.class-name {
  color: var(--color-prettylights-syntax-string);
}
.wmde-markdown .token.rule,
.wmde-markdown .token.regex,
.wmde-markdown .token.important,
.wmde-markdown .token.keyword {
  color: var(--color-prettylights-syntax-keyword);
}
.wmde-markdown .token.coord {
  color: var(--color-prettylights-syntax-meta-diff-range);
}
.wmde-markdown .token.important,
.wmde-markdown .token.bold {
  font-weight: bold;
}
.wmde-markdown .token.italic {
  font-style: italic;
}
.wmde-markdown .token.entity {
  cursor: help;
}
.w-md-editor-area {
  overflow: auto;
  border-radius: 5px;
}
.w-md-editor-text {
  min-height: 100%;
  position: relative;
  text-align: left;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: break-word;
  box-sizing: border-box;
  padding: 10px;
  margin: 0;
  font-size: 14px !important;
  line-height: 18px !important;
  font-variant-ligatures: common-ligatures;
}
.w-md-editor-text-pre,
.w-md-editor-text-input,
.w-md-editor-text > .w-md-editor-text-pre {
  margin: 0;
  border: 0;
  background: none;
  box-sizing: inherit;
  display: inherit;
  font-family: inherit;
  font-family: var(--md-editor-font-family) !important;
  font-size: inherit;
  font-style: inherit;
  font-variant-ligatures: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  tab-size: inherit;
  text-indent: inherit;
  text-rendering: inherit;
  text-transform: inherit;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
  word-break: normal;
  padding: 0;
}
.w-md-editor-text-pre {
  position: relative;
  margin: 0px !important;
  pointer-events: none;
  background-color: transparent !important;
}
.w-md-editor-text-pre > code {
  padding: 0 !important;
  font-family: var(--md-editor-font-family) !important;
  font-size: 14px !important;
  line-height: 18px !important;
}
.w-md-editor-text-input {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  resize: none;
  color: inherit;
  overflow: hidden;
  outline: 0;
  padding: inherit;
  -webkit-font-smoothing: antialiased;
  -webkit-text-fill-color: transparent;
}
.w-md-editor-text-input:empty {
  -webkit-text-fill-color: inherit !important;
}
.w-md-editor-text-pre,
.w-md-editor-text-input {
  word-wrap: pre;
  word-break: break-word;
  white-space: pre-wrap;
}
/**
 * Hack to apply on some CSS on IE10 and IE11
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /**
    * IE doesn't support '-webkit-text-fill-color'
    * So we use 'color: transparent' to make the text transparent on IE
    * Unlike other browsers, it doesn't affect caret color in IE
    */
  .w-md-editor-text-input {
    color: transparent !important;
  }
  .w-md-editor-text-input::selection {
    background-color: #accef7 !important;
    color: transparent !important;
  }
}
.w-md-editor-text-pre .punctuation {
  color: var(--color-prettylights-syntax-comment, #8b949e) !important;
}
.w-md-editor-text-pre .token.url,
.w-md-editor-text-pre .token.content {
  color: var(--color-prettylights-syntax-constant, #0550ae) !important;
}
.w-md-editor-text-pre .token.title.important {
  color: var(--color-prettylights-syntax-markup-bold, #24292f);
}
.w-md-editor-text-pre .token.code-block .function {
  color: var(--color-prettylights-syntax-entity, #8250df);
}
.w-md-editor-text-pre .token.bold {
  font-weight: unset !important;
}
.w-md-editor-text-pre .token.title {
  line-height: unset !important;
  font-size: unset !important;
  font-weight: unset !important;
}
.w-md-editor-text-pre .token.code.keyword {
  color: var(--color-prettylights-syntax-constant, #0550ae) !important;
}
.w-md-editor-text-pre .token.strike,
.w-md-editor-text-pre .token.strike .content {
  color: var(--color-prettylights-syntax-markup-deleted-text, #82071e) !important;
}
.w-md-editor-toolbar-child {
  position: absolute;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
  background-color: var(--md-editor-background-color);
  z-index: 1;
  display: none;
}
.w-md-editor-toolbar-child.active {
  display: block;
}
.w-md-editor-toolbar-child .w-md-editor-toolbar {
  border-bottom: 0;
  padding: 3px;
  border-radius: 3px;
}
.w-md-editor-toolbar-child .w-md-editor-toolbar ul > li {
  display: block;
}
.w-md-editor-toolbar-child .w-md-editor-toolbar ul > li button {
  width: -webkit-fill-available;
  height: initial;
  box-sizing: border-box;
  padding: 3px 4px 2px 4px;
  margin: 0;
}
.w-md-editor-toolbar {
  border-bottom: 1px solid var(--md-editor-box-shadow-color);
  background-color: var(--md-editor-background-color);
  padding: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 3px 3px 0 0;
  -webkit-user-select: none;
          user-select: none;
  flex-wrap: wrap;
}
.w-md-editor-toolbar.bottom {
  border-bottom: 0px;
  border-top: 1px solid var(--md-editor-box-shadow-color);
  border-radius: 0 0 3px 3px;
}
.w-md-editor-toolbar ul,
.w-md-editor-toolbar li {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: initial;
}
.w-md-editor-toolbar li {
  display: inline-block;
  font-size: 14px;
}
.w-md-editor-toolbar li + li {
  margin: 0;
}
.w-md-editor-toolbar li > button {
  border: none;
  height: 20px;
  line-height: 14px;
  background: none;
  padding: 4px;
  margin: 0 1px;
  border-radius: 2px;
  text-transform: none;
  font-weight: normal;
  overflow: visible;
  outline: none;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
  color: var(--color-fg-default);
}
.w-md-editor-toolbar li > button:hover,
.w-md-editor-toolbar li > button:focus {
  background-color: var(--color-neutral-muted);
  color: var(--color-accent-fg);
}
.w-md-editor-toolbar li > button:active {
  background-color: var(--color-neutral-muted);
  color: var(--color-danger-fg);
}
.w-md-editor-toolbar li > button:disabled {
  color: var(--md-editor-box-shadow-color);
  cursor: not-allowed;
}
.w-md-editor-toolbar li > button:disabled:hover {
  background-color: transparent;
  color: var(--md-editor-box-shadow-color);
}
.w-md-editor-toolbar li.active > button {
  color: var(--color-accent-fg);
  background-color: var(--color-neutral-muted);
}
.w-md-editor-toolbar-divider {
  height: 14px;
  width: 1px;
  margin: -3px 3px 0 3px !important;
  vertical-align: middle;
  background-color: var(--md-editor-box-shadow-color);
}
.w-md-editor-bar {
  position: absolute;
  cursor: s-resize;
  right: 0;
  bottom: 0;
  margin-top: -11px;
  margin-right: 0;
  width: 14px;
  z-index: 3;
  height: 10px;
  border-radius: 0 0 3px 0;
  -webkit-user-select: none;
          user-select: none;
}
.w-md-editor-bar svg {
  display: block;
  margin: 0 auto;
}
.w-md-editor {
  text-align: left;
  border-radius: 3px;
  padding-bottom: 1px;
  position: relative;
  color: var(--color-fg-default);
  --md-editor-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --md-editor-background-color: var(--color-canvas-default, #ffffff);
  --md-editor-box-shadow-color: var(--color-border-default, #d0d7de);
  box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
  background-color: var(--md-editor-background-color);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
}
.w-md-editor.w-md-editor-rtl {
  direction: rtl !important;
  text-align: right !important;
}
.w-md-editor.w-md-editor-rtl .w-md-editor-preview {
  right: unset !important;
  left: 0;
  text-align: right !important;
  box-shadow: inset -1px 0 0 0 var(--md-editor-box-shadow-color);
}
.w-md-editor.w-md-editor-rtl .w-md-editor-text {
  text-align: right !important;
}
.w-md-editor-toolbar {
  height: fit-content;
}
.w-md-editor-content {
  height: 100%;
  overflow: auto;
  position: relative;
  border-radius: 0 0 3px 0;
}
.w-md-editor .copied {
  display: none !important;
}
.w-md-editor-input {
  width: 50%;
  height: 100%;
}
.w-md-editor-text-pre > code {
  word-break: break-word !important;
  white-space: pre-wrap !important;
}
.w-md-editor-preview {
  width: 50%;
  box-sizing: border-box;
  box-shadow: inset 1px 0 0 0 var(--md-editor-box-shadow-color);
  position: absolute;
  padding: 10px 20px;
  overflow: auto;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 0 0 5px 0;
  display: flex;
  flex-direction: column;
}
.w-md-editor-preview .anchor {
  display: none;
}
.w-md-editor-preview .contains-task-list li.task-list-item {
  list-style: none;
}
.w-md-editor-show-preview .w-md-editor-input {
  width: 0%;
  overflow: hidden;
  background-color: var(--md-editor-background-color);
}
.w-md-editor-show-preview .w-md-editor-preview {
  width: 100%;
  box-shadow: inset 0 0 0 0;
}
.w-md-editor-show-edit .w-md-editor-input {
  width: 100%;
}
.w-md-editor-show-edit .w-md-editor-preview {
  width: 0%;
  padding: 0;
}
.w-md-editor-fullscreen {
  overflow: hidden;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100% !important;
}
.w-md-editor-fullscreen .w-md-editor-content {
  height: 100%;
}
.w-md-editor-bar {
  position: absolute;
  cursor: s-resize;
  right: 0;
  bottom: 0;
  margin-top: -11px;
  margin-right: 0;
  width: 14px;
  z-index: 3;
  height: 10px;
  border-radius: 0 0 3px 0;
  -webkit-user-select: none;
          user-select: none;
}
.w-md-editor-bar svg {
  display: block;
  margin: 0 auto;
}
.w-md-editor-area {
  overflow: auto;
  border-radius: 5px;
}
.w-md-editor-text {
  min-height: 100%;
  position: relative;
  text-align: left;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: break-word;
  box-sizing: border-box;
  padding: 10px;
  margin: 0;
  font-size: 14px !important;
  line-height: 18px !important;
  font-variant-ligatures: common-ligatures;
}
.w-md-editor-text-pre,
.w-md-editor-text-input,
.w-md-editor-text > .w-md-editor-text-pre {
  margin: 0;
  border: 0;
  background: none;
  box-sizing: inherit;
  display: inherit;
  font-family: inherit;
  font-family: var(--md-editor-font-family) !important;
  font-size: inherit;
  font-style: inherit;
  font-variant-ligatures: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  tab-size: inherit;
  text-indent: inherit;
  text-rendering: inherit;
  text-transform: inherit;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
  word-break: normal;
  padding: 0;
}
.w-md-editor-text-pre {
  position: relative;
  margin: 0px !important;
  pointer-events: none;
  background-color: transparent !important;
}
.w-md-editor-text-pre > code {
  padding: 0 !important;
  font-family: var(--md-editor-font-family) !important;
  font-size: 14px !important;
  line-height: 18px !important;
}
.w-md-editor-text-input {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  resize: none;
  color: inherit;
  overflow: hidden;
  outline: 0;
  padding: inherit;
  -webkit-font-smoothing: antialiased;
  -webkit-text-fill-color: transparent;
}
.w-md-editor-text-input:empty {
  -webkit-text-fill-color: inherit !important;
}
.w-md-editor-text-pre,
.w-md-editor-text-input {
  word-wrap: pre;
  word-break: break-word;
  white-space: pre-wrap;
}
/**
 * Hack to apply on some CSS on IE10 and IE11
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /**
    * IE doesn't support '-webkit-text-fill-color'
    * So we use 'color: transparent' to make the text transparent on IE
    * Unlike other browsers, it doesn't affect caret color in IE
    */
  .w-md-editor-text-input {
    color: transparent !important;
  }
  .w-md-editor-text-input::selection {
    background-color: #accef7 !important;
    color: transparent !important;
  }
}
.w-md-editor-text-pre .punctuation {
  color: var(--color-prettylights-syntax-comment, #8b949e) !important;
}
.w-md-editor-text-pre .token.url,
.w-md-editor-text-pre .token.content {
  color: var(--color-prettylights-syntax-constant, #0550ae) !important;
}
.w-md-editor-text-pre .token.title.important {
  color: var(--color-prettylights-syntax-markup-bold, #24292f);
}
.w-md-editor-text-pre .token.code-block .function {
  color: var(--color-prettylights-syntax-entity, #8250df);
}
.w-md-editor-text-pre .token.bold {
  font-weight: unset !important;
}
.w-md-editor-text-pre .token.title {
  line-height: unset !important;
  font-size: unset !important;
  font-weight: unset !important;
}
.w-md-editor-text-pre .token.code.keyword {
  color: var(--color-prettylights-syntax-constant, #0550ae) !important;
}
.w-md-editor-text-pre .token.strike,
.w-md-editor-text-pre .token.strike .content {
  color: var(--color-prettylights-syntax-markup-deleted-text, #82071e) !important;
}
.w-md-editor-toolbar-child {
  position: absolute;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
  background-color: var(--md-editor-background-color);
  z-index: 1;
  display: none;
}
.w-md-editor-toolbar-child.active {
  display: block;
}
.w-md-editor-toolbar-child .w-md-editor-toolbar {
  border-bottom: 0;
  padding: 3px;
  border-radius: 3px;
}
.w-md-editor-toolbar-child .w-md-editor-toolbar ul > li {
  display: block;
}
.w-md-editor-toolbar-child .w-md-editor-toolbar ul > li button {
  width: -webkit-fill-available;
  height: initial;
  box-sizing: border-box;
  padding: 3px 4px 2px 4px;
  margin: 0;
}
.w-md-editor-toolbar {
  border-bottom: 1px solid var(--md-editor-box-shadow-color);
  background-color: var(--md-editor-background-color);
  padding: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 3px 3px 0 0;
  -webkit-user-select: none;
          user-select: none;
  flex-wrap: wrap;
}
.w-md-editor-toolbar.bottom {
  border-bottom: 0px;
  border-top: 1px solid var(--md-editor-box-shadow-color);
  border-radius: 0 0 3px 3px;
}
.w-md-editor-toolbar ul,
.w-md-editor-toolbar li {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: initial;
}
.w-md-editor-toolbar li {
  display: inline-block;
  font-size: 14px;
}
.w-md-editor-toolbar li + li {
  margin: 0;
}
.w-md-editor-toolbar li > button {
  border: none;
  height: 20px;
  line-height: 14px;
  background: none;
  padding: 4px;
  margin: 0 1px;
  border-radius: 2px;
  text-transform: none;
  font-weight: normal;
  overflow: visible;
  outline: none;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
  color: var(--color-fg-default);
}
.w-md-editor-toolbar li > button:hover,
.w-md-editor-toolbar li > button:focus {
  background-color: var(--color-neutral-muted);
  color: var(--color-accent-fg);
}
.w-md-editor-toolbar li > button:active {
  background-color: var(--color-neutral-muted);
  color: var(--color-danger-fg);
}
.w-md-editor-toolbar li > button:disabled {
  color: var(--md-editor-box-shadow-color);
  cursor: not-allowed;
}
.w-md-editor-toolbar li > button:disabled:hover {
  background-color: transparent;
  color: var(--md-editor-box-shadow-color);
}
.w-md-editor-toolbar li.active > button {
  color: var(--color-accent-fg);
  background-color: var(--color-neutral-muted);
}
.w-md-editor-toolbar-divider {
  height: 14px;
  width: 1px;
  margin: -3px 3px 0 3px !important;
  vertical-align: middle;
  background-color: var(--md-editor-box-shadow-color);
}
.w-md-editor {
  text-align: left;
  border-radius: 3px;
  padding-bottom: 1px;
  position: relative;
  color: var(--color-fg-default);
  --md-editor-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --md-editor-background-color: var(--color-canvas-default, #ffffff);
  --md-editor-box-shadow-color: var(--color-border-default, #d0d7de);
  box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
  background-color: var(--md-editor-background-color);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
}
.w-md-editor.w-md-editor-rtl {
  direction: rtl !important;
  text-align: right !important;
}
.w-md-editor.w-md-editor-rtl .w-md-editor-preview {
  right: unset !important;
  left: 0;
  text-align: right !important;
  box-shadow: inset -1px 0 0 0 var(--md-editor-box-shadow-color);
}
.w-md-editor.w-md-editor-rtl .w-md-editor-text {
  text-align: right !important;
}
.w-md-editor-toolbar {
  height: fit-content;
}
.w-md-editor-content {
  height: 100%;
  overflow: auto;
  position: relative;
  border-radius: 0 0 3px 0;
}
.w-md-editor .copied {
  display: none !important;
}
.w-md-editor-input {
  width: 50%;
  height: 100%;
}
.w-md-editor-text-pre > code {
  word-break: break-word !important;
  white-space: pre-wrap !important;
}
.w-md-editor-preview {
  width: 50%;
  box-sizing: border-box;
  box-shadow: inset 1px 0 0 0 var(--md-editor-box-shadow-color);
  position: absolute;
  padding: 10px 20px;
  overflow: auto;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 0 0 5px 0;
  display: flex;
  flex-direction: column;
}
.w-md-editor-preview .anchor {
  display: none;
}
.w-md-editor-preview .contains-task-list li.task-list-item {
  list-style: none;
}
.w-md-editor-show-preview .w-md-editor-input {
  width: 0%;
  overflow: hidden;
  background-color: var(--md-editor-background-color);
}
.w-md-editor-show-preview .w-md-editor-preview {
  width: 100%;
  box-shadow: inset 0 0 0 0;
}
.w-md-editor-show-edit .w-md-editor-input {
  width: 100%;
}
.w-md-editor-show-edit .w-md-editor-preview {
  width: 0%;
  padding: 0;
}
.w-md-editor-fullscreen {
  overflow: hidden;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100% !important;
}
.w-md-editor-fullscreen .w-md-editor-content {
  height: 100%;
}
.legal-doc-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.legal-doc-main {
  flex: 1;
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 40px) 48px;
}

.legal-doc-card {
  padding: clamp(20px, 4vw, 36px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--surface);
}

.legal-doc-loading,
.legal-doc-error {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
}

.legal-doc-body {
  color: var(--text);
  line-height: 1.65;
  font-size: 15px;
}

.legal-doc-body h1 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin: 0 0 1rem;
  line-height: 1.25;
}

.legal-doc-body h2 {
  font-size: 1.2rem;
  margin: 2rem 0 0.75rem;
}

.legal-doc-body h3 {
  font-size: 1.05rem;
  margin: 1.25rem 0 0.5rem;
}

.legal-doc-body p,
.legal-doc-body li {
  margin: 0.5rem 0;
}

.legal-doc-body ul,
.legal-doc-body ol {
  padding-left: 1.25rem;
}

.legal-doc-body a {
  color: var(--primary);
}

.legal-doc-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 14px;
}

.legal-doc-body th,
.legal-doc-body td {
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 10px;
  vertical-align: top;
  text-align: left;
}

.legal-doc-body blockquote {
  margin: 1rem 0;
  padding: 12px 14px;
  border-left: 3px solid var(--primary);
  background: var(--surface-2);
  border-radius: 0 10px 10px 0;
}

.legal-doc-body hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 1.5rem 0;
}

.legal-doc-body em {
  color: var(--text-muted);
  font-size: 14px;
}