SHiNE-server/shine-UI/styles/main.css

:root {
  /* Палитра по умолчанию — «Сияние» (js/services/theme-service.js, пресет aurora) */
  --background: #121419;
  --surface: #1c1f27;
  --surface-selected: #302b43;
  --surface-raised: #272a34;
  --text-primary: #f1f1f5;
  --text-secondary: #a8abb8;
  --border-subtle: #303440;
  --border-control: #454858;
  --accent: #b8aef5;
  --on-accent: #211c34;
  --action: #c6bff5;
  --bubble-out: #39324d;
  --focus-ring: #b8aef5;
  --reaction-active: #b8aef5;
  --danger: #f2a1ad;
  --success: #91d4b0;
  --warning: #edc487;
  --info: #a8c9f3;
  --scrim: #06080cb3;
  /* Производные состояния: считаются от ролей, поэтому работают с любой палитрой */
  --accent-hover: color-mix(in srgb, var(--accent) 86%, var(--text-primary));
  --accent-pressed: color-mix(in srgb, var(--accent) 88%, var(--background));
  --disabled-bg: color-mix(in srgb, var(--surface-raised) 80%, var(--background));
  --disabled-text: color-mix(in srgb, var(--text-secondary) 72%, var(--background));
  --quote-bg: color-mix(in srgb, var(--background) 70%, var(--surface));
  --quote-line: color-mix(in srgb, var(--accent) 55%, var(--text-secondary));
  --divider-soft: color-mix(in srgb, var(--border-subtle) 70%, var(--background));
  /* Язык связей: один цвет — один тип отношения во всём приложении (граф, личные, профиль). */
  --rel-contact: #8c63ff;   /* обычная связь / контакт */
  --rel-family: #f0b82e;    /* семья / близкий круг */
  --rel-shining: #68d8ff;   /* «сияющий» */
  --rel-link: #19e58a;      /* активная «Связь» */
  --rel-contact-glow: color-mix(in srgb, var(--rel-contact) 24%, transparent);
  --rel-family-glow: color-mix(in srgb, var(--rel-family) 30%, transparent);
  --rel-shining-glow: color-mix(in srgb, var(--rel-shining) 35%, transparent);
  --rel-link-glow: color-mix(in srgb, var(--rel-link) 24%, transparent);
  --bg-0: var(--background);
  --bg-1: var(--surface);
  --bg-2: var(--surface-selected);
  --card: var(--surface);
  --card-soft: var(--surface-selected);
  --line: var(--border-subtle);
  --text: var(--text-primary);
  --text-muted: var(--text-secondary);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --ok: var(--success);
  /* Устаревшее имя «синего» основного действия — теперь это акцент палитры. */
  --shine-action-blue: var(--accent);
  --shine-action-blue-hover: color-mix(in srgb, var(--accent) 88%, var(--text-primary));
  --shine-action-blue-pressed: color-mix(in srgb, var(--accent) 80%, var(--background));
  --shine-action-blue-rgb: 18, 72, 163;

  /* ===== Общая шкала: все разделы берут размеры отсюда, а не задают свои ===== */
  /* Отступы */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --page-gutter: var(--space-4);
  /* Зазор между шапкой и первым элементом экрана – один на всё приложение. */
  --page-top-gap: var(--space-3);
  /* Скругления */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  /* Текст: размер / межстрочный */
  --text-xs: .75rem;      --leading-xs: 1.125rem;   /* подписи, время */
  --text-sm: .8125rem;    --leading-sm: 1.25rem;    /* вторичный текст */
  --text-md: .9375rem;    --leading-md: 1.375rem;   /* основной текст */
  --text-lg: 1.0625rem;   --leading-lg: 1.5rem;     /* заголовок панели */
  --text-xl: 1.375rem;    --leading-xl: 1.75rem;    /* заголовок экрана */
  --weight-medium: 500;
  --weight-bold: 600;
  /* Контролы */
  --control-height: 44px;
  --icon-size: 22px;
  --avatar-sm: 32px;
  --avatar-md: 40px;
  --avatar-lg: 48px;
  /* Поверх медиа (фото/видео) — всегда тёмная подложка, в любой теме */
  --media-overlay: rgba(0, 0, 0, 0.45);
  --on-media: #ffffff;
  --duration-fast: 160ms;

  --shadow: 0 16px 42px rgba(0, 0, 0, 0.26);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.18);
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme='light'] {
  --background: #f3f2f7;
  --surface: #ffffff;
  --surface-selected: #e8e3fa;
  --surface-raised: #ecebf2;
  --text-primary: #1d1b26;
  --text-secondary: #5f5b6e;
  --border-subtle: #e0dde8;
  --border-control: #a19db2;
  --accent: #5d4fc4;
  --on-accent: #ffffff;
  --action: #5244b5;
  --bubble-out: #e6e0fb;
  --focus-ring: #5d4fc4;
  --reaction-active: #5d4fc4;
  --danger: #b3304a;
  --success: #2d7552;
  --warning: #8a5a0e;
  --info: #2f5f9e;
  --scrim: #1d1b2666;
  --shadow: 0 16px 42px rgba(30, 34, 51, 0.14);
  --shadow-sm: 0 2px 8px rgba(30, 34, 51, 0.08);
  --rel-contact: #6b3fe0;
  --rel-family: #a8740a;
  --rel-shining: #0a7fb3;
  --rel-link: #0b8a52;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-main);
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}


.channel-view-topbar { position: relative; }