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

:root {
  --background: #12141f;
  --surface: #1c2031;
  --surface-selected: #272c45;
  --text-primary: #eceefa;
  --text-secondary: #a0a6c2;
  --border-subtle: #343a55;
  --border-control: #6d7396;
  --accent: #a9b4ff;
  --on-accent: #151a3d;
  --focus-ring: #a9b4ff;
  --reaction-active: #ff9bb3;
  --danger: #ffa7a3;
  --success: #8fdab4;
  --warning: #e8c585;
  --scrim: #00000099;
  /* Язык связей: один цвет — один тип отношения во всём приложении (граф, личные, профиль). */
  --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);
  /* Скругления */
  --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: #eef0f5;
  --surface: #ffffff;
  --surface-selected: #dde3f5;
  --text-primary: #1e2233;
  --text-secondary: #5c6279;
  --border-subtle: #d5d9e5;
  --border-control: #8a90a8;
  --accent: #4c5caa;
  --on-accent: #ffffff;
  --focus-ring: #4c5caa;
  --reaction-active: #c02a55;
  --danger: #b3261e;
  --success: #2c6b4a;
  --warning: #7d5a10;
  --scrim: #302c2566;
  --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;
}

.notification-card--new { background: var(--accent-soft); border-color: var(--accent); }
.notification-card--new::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; position: absolute; right: 12px; top: 12px; opacity: .9; }
.notification-card { position: relative; }
.notification-new-divider { text-align: center; font-size: 11px; letter-spacing: .12em; opacity: .72; padding: 6px 0; }

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