/* Moving color lives behind the interface; content and controls stay still. */
:root {
  --scene-base: #eaf1fc;
  --scene-blue: #a7cdf4;
  --scene-lilac: #d7c8ee;
  --scene-peach: #f5d2be;
  --scene-mint: #b9ded9;
  --surface: #fffefa;
  --surface-soft: #f7faff;
  --stroke: #ffffffc7;
  --ink: #20324f;
  --secondary-ink: #61728d;
  --accent: #456bd5;
  --accent-soft: #dce8ff;
  color: var(--ink);
  background: var(--scene-base);
  font-synthesis: none;
}
.shell, .shell.mobile-detail {
  position: relative;
  isolation: isolate;
  background: transparent;
  overflow: hidden;
}
.shell::before {
  content: '';
  position: fixed;
  z-index: -1;
  inset: -22%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 29% 34% at 15% 18%, var(--scene-blue), transparent 82%),
    radial-gradient(ellipse 31% 35% at 80% 19%, var(--scene-lilac), transparent 83%),
    radial-gradient(ellipse 31% 37% at 79% 87%, var(--scene-peach), transparent 82%),
    radial-gradient(ellipse 25% 32% at 23% 79%, var(--scene-mint), transparent 82%),
    var(--scene-base);
  animation: krug-aurora 26s ease-in-out infinite alternate;
  will-change: transform;
}
.shell[data-page-snapshot]::before { display: none; }
@keyframes krug-aurora {
  0% { transform: translate3d(-2%, 0, 0) scale(1); }
  50% { transform: translate3d(3%, -2%, 0) scale(1.04); }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.02); }
}
.workspace, .feed, .list-panel, .list-head, .channel-header { background: transparent; }
.list-panel { border-right: 1px solid #ffffff6e; }
.list-head { border-bottom: 1px solid #ffffff36; }
.screen h1, .list-head h1, .head-row h1 { font-size: clamp(1.7rem, 2.1vw, 2.3rem); letter-spacing: -.052em; color: var(--ink); }
.intro, .sub, .snippet, .announcement-meta, .planner-note { color: var(--secondary-ink); }
.brand-name, .chat-list-title h1 { color: var(--ink); }
.chat-brand { color: var(--accent); }
.school-mark { background: #d89474; }

/* A more distinct dark glass rail on wide screens. Phone navigation stays light. */
@media (min-width: 761px) {
  .rail {
    background: linear-gradient(160deg, #233c6be6, #334c7cdb 55%, #4b4d7edb);
    border-color: #b9cbef5e;
    box-shadow: inset 0 1px 1px #ffffff71, inset -1px 0 1px #ffffff21,
      7px 0 26px -16px #1c335d8a;
  }
  .rail-item, .rail-bottom .icon-btn { color: #d7e4ff; }
  .rail-item:hover, .rail-bottom .icon-btn:hover { color: white; background: #ffffff1f; }
  .rail-item.active { color: white; background: #e8efff27; border-color: #ffffff4a; }
  .rail-item.active svg { color: white; }
  .rail-item.active::after { background: #ffcaab; box-shadow: 0 0 9px #ffb995aa; }
  .rail .liquid-lens { background: linear-gradient(135deg, #ffffff4d, #b6caff25 65%, #ffd7c729); box-shadow: inset 0 1px 1px #ffffffb5, 0 4px 14px #14284b49; }
}
.logo { background: linear-gradient(145deg, #789ef0, #4369d9); box-shadow: inset 0 1px 1px #ffffffa3, 0 6px 15px #2e4d9759; }
.rail-item, .filter, .planner-tabs button { font-weight: 600; }
.rail-item.active, .filter.active, .planner-tabs button.selected { font-weight: 750; }
.nav-unread, .badge, .unread-dot { background: var(--accent); }

/* Clear material hierarchy: floating tools, solid cards, soft list rows. */
.search, .filter-row, .header-actions, .composer, .planner-tabs, .back, .list-actions .icon-btn {
  background: linear-gradient(145deg, #ffffffc8, #eaf2ff82 65%, #fff5ed8a);
  border-color: #ffffffd6;
  box-shadow: 0 9px 24px -15px #45618d77, inset 0 1px 1px #fff, inset 0 -1px 1px #8394b53b;
}
.rail:not(:has(.liquid-lens)) .rail-item.active,
.filter.active, .planner-tabs button.selected {
  background: linear-gradient(135deg, #e4edff, #dce8ff9c);
  border-color: #ffffffd9;
  color: #2d55ba;
}
.conversation { border-radius: 18px; }
.conversation.active { background: #ffffffb8; border-color: #ffffffde; box-shadow: 0 7px 20px -16px #415b8c7a; }
.conversation:hover { background: #ffffff91; }
.post, .screen-card, .month-card, .announcement-card, .planner-event {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 24px;
  box-shadow: 0 14px 38px -28px #36517e70, inset 0 1px 0 #fff;
}
.screen-card, .announcement-card { padding: clamp(20px, 2.4vw, 30px); }
.post h3, .screen-card h3, .announcement-card h3 { color: var(--ink); letter-spacing: -.025em; }
.post p, .screen-card p, .planner-event, .message { color: #465a78; }
.tag { border-radius: 999px; background: #e7eeff; color: #4361b2; }
.event-card { background: #f9f3ee; border-color: #f0e5dc; border-radius: 18px; }
.date-box { background: #fde8d9; color: #ab684c; border-radius: 13px; }
.message.mine { background: #dce9ff; border-color: #cddcf7; }
.message:not(.mine) { background: var(--surface); border-color: #edf1f7; }
.primary { background: linear-gradient(150deg, #6689e8, #4166c9); border-color: #ffffff6b; border-radius: 15px; box-shadow: inset 0 1px 1px #ffffff70, 0 5px 14px -7px #3151a1a6; }
.secondary { background: #ffffffd9; border-color: #dce5f2; color: #48618a; border-radius: 14px; }
.reaction { background: #edf2fb; }
.reaction:nth-child(2) { background: #fff0e8; color: #a86b56; }
.planner-event-icon, .blank-icon { background: #e4ecff; color: #4b6ecb; }
.calendar-day.chosen { background: #dce8ff; }
.calendar-day.today { box-shadow: inset 0 0 0 1px #698bd8; }
.live-dialog { background: #fbfcfff3; border-color: #fff; }
.field input, .field textarea, .field select, .composer textarea { background: #f7f9fd; color: var(--ink); border-color: #dee7f3; }
.profile-setting { border-color: #e7ebf3; }

.appearance-toggle { width: 42px; height: 42px; border-radius: 50%; }
.appearance-toggle svg, .appearance-choice svg { width: 20px; height: 20px; }
.appearance-choice { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.appearance-moon { display: none; }
.appearance-label::after { content: 'Светлая'; }

/* Dark mode uses deep navy surfaces, with the same gentle moving palette. */
:root[data-appearance='dark'] {
  --scene-base: #111b31;
  --scene-blue: #284c82;
  --scene-lilac: #463b70;
  --scene-peach: #684654;
  --scene-mint: #1d5961;
  --surface: #1c2942;
  --surface-soft: #253650;
  --stroke: #7f9ac028;
  --ink: #f2f5fc;
  --secondary-ink: #aabbd5;
  --accent: #8eabff;
  --accent-soft: #344d79;
  --brand: #8eabff;
  --muted: #aabbd5;
  --line: #7289af38;
  --glass-ink: #e4edff;
  --glass-fill: linear-gradient(135deg, #59739a4a, #293b5966 55%, #5e587d45);
  --glass-shadow: 0 0 0 1px #b1caff26, 0 12px 26px -13px #010818ad,
    inset 0 1px 1px #d9e6ff5a, inset 0 -1px 1px #030b22a8;
}
[data-appearance='dark'] .list-panel { background: #111d3480; border-right-color: #ffffff18; }
[data-appearance='dark'] .list-head { background: transparent; border-bottom-color: #ffffff13; }
[data-appearance='dark'] .workspace { background: #101b3061; }
[data-appearance='dark'] .screen h1,
[data-appearance='dark'] .list-head h1,
[data-appearance='dark'] .head-row h1,
[data-appearance='dark'] .brand-name,
[data-appearance='dark'] .chat-list-title h1,
[data-appearance='dark'] .convo-title,
[data-appearance='dark'] .channel-identity h2,
[data-appearance='dark'] .post h3,
[data-appearance='dark'] .screen-card h3,
[data-appearance='dark'] .announcement-card h3,
[data-appearance='dark'] .planner-event strong,
[data-appearance='dark'] .month-heading h3 { color: var(--ink); }
[data-appearance='dark'] .intro,
[data-appearance='dark'] .sub,
[data-appearance='dark'] .snippet,
[data-appearance='dark'] .school-name,
[data-appearance='dark'] .list-foot,
[data-appearance='dark'] .convo-meta,
[data-appearance='dark'] .announcement-meta,
[data-appearance='dark'] .planner-note,
[data-appearance='dark'] .profile-setting span:last-child { color: var(--secondary-ink); }
[data-appearance='dark'] .rail { background: linear-gradient(155deg, #1d3157e8, #263859e8 60%, #403c62e0); border-color: #abc3fa47; }
[data-appearance='dark'] .rail-item, [data-appearance='dark'] .rail-bottom .icon-btn { color: #c5d5ef; }
[data-appearance='dark'] .rail-item.active { color: #fff; }
[data-appearance='dark'] .rail .liquid-lens { background: linear-gradient(140deg, #99b9fd4d, #5f79b242 64%, #c8919a33); }
[data-appearance='dark'] .search,
[data-appearance='dark'] .filter-row,
[data-appearance='dark'] .header-actions,
[data-appearance='dark'] .composer,
[data-appearance='dark'] .planner-tabs,
[data-appearance='dark'] .back,
[data-appearance='dark'] .list-actions .icon-btn {
  background: linear-gradient(135deg, #50698e9c, #2b3e5fbd 65%, #514a72a1);
  border-color: #a6bde04d; color: #e4edff;
  box-shadow: 0 8px 24px -13px #020818bb, inset 0 1px 1px #dce7ff5a;
}
[data-appearance='dark'] .search input,
[data-appearance='dark'] .search input::placeholder,
[data-appearance='dark'] .filter,
[data-appearance='dark'] .planner-tabs button,
[data-appearance='dark'] .header-actions .icon-btn { color: #d5e1f6; }
[data-appearance='dark'] .filter.active,
[data-appearance='dark'] .planner-tabs button.selected { background: #6b8bc956; color: #fff; border-color: #bbd0f075; }
[data-appearance='dark'] .conversation { color: #e3eaf8; }
[data-appearance='dark'] .conversation.active { background: #7698cc37; border-color: #c0d5fc3b; }
[data-appearance='dark'] .conversation:hover { background: #9ab8e025; }
[data-appearance='dark'] .post,
[data-appearance='dark'] .screen-card,
[data-appearance='dark'] .month-card,
[data-appearance='dark'] .announcement-card,
[data-appearance='dark'] .planner-event,
[data-appearance='dark'] .live-dialog { background: #1c2943f2; border-color: #9eb8dc2e; box-shadow: 0 16px 38px -25px #020715a8, inset 0 1px 0 #e3efff19; color: #e7eefb; }
[data-appearance='dark'] .post p,
[data-appearance='dark'] .screen-card p,
[data-appearance='dark'] .planner-event,
[data-appearance='dark'] .message,
[data-appearance='dark'] .details p,
[data-appearance='dark'] .event-info small { color: #c4d1e5; }
[data-appearance='dark'] .message.mine { background: #365486; border-color: #7195d350; color: #f2f6ff; }
[data-appearance='dark'] .message:not(.mine) { background: #263550; border-color: #88a1c233; color: #e7eefb; }
[data-appearance='dark'] .message small,
[data-appearance='dark'] .post-top small,
[data-appearance='dark'] .planner-event small { color: #a9bbd6; }
[data-appearance='dark'] .post-top strong,
[data-appearance='dark'] .post .post-top strong,
[data-appearance='dark'] .admin-row strong,
[data-appearance='dark'] .profile-row h2,
[data-appearance='dark'] .planner-list-heading h3,
[data-appearance='dark'] .day-heading,
[data-appearance='dark'] .empty,
[data-appearance='dark'] .blank-state h2 { color: #eaf1fc; }
[data-appearance='dark'] .channel-header,
[data-appearance='dark'] .composer-footer,
[data-appearance='dark'] .pinned,
[data-appearance='dark'] .details { background: #1b2a4494; border-color: #91a9cc2e; color: #e3ebf8; }
[data-appearance='dark'] .attachment,
[data-appearance='dark'] .feedback-banner,
[data-appearance='dark'] .blank-icon { background: #2b3c59; color: #dbe7fa; border-color: #8da6cd36; }
[data-appearance='dark'] .tag { background: #4869aa6b; color: #d7e4ff; }
[data-appearance='dark'] .secondary,
[data-appearance='dark'] .post-toolbar .content-more,
[data-appearance='dark'] .reaction { background: #30415e; border-color: #718caf40; color: #d9e5fb; }
[data-appearance='dark'] .primary { background: linear-gradient(145deg, #7497eb, #4d70ce); color: #fff; }
[data-appearance='dark'] .event-card,
[data-appearance='dark'] .pinned-notices,
[data-appearance='dark'] .prototype { background: #2d354d; border-color: #8b9cbd32; color: #d2ddec !important; }
[data-appearance='dark'] .date-box { background: #684955; color: #ffd5ae; }
[data-appearance='dark'] .calendar-day { color: #cfdbed; }
[data-appearance='dark'] .calendar-day.chosen { background: #3b5688; color: white; }
[data-appearance='dark'] .calendar-week,
[data-appearance='dark'] .calendar-legend { color: #aabbd5; }
[data-appearance='dark'] .field input,
[data-appearance='dark'] .field textarea,
[data-appearance='dark'] .field select,
[data-appearance='dark'] .composer textarea,
[data-appearance='dark'] .org-picker select { background: #25354f; border-color: #718bad66; color: #f1f5fc; }
[data-appearance='dark'] .composer textarea::placeholder,
[data-appearance='dark'] .field input::placeholder { color: #a9bbd2; }
[data-appearance='dark'] .profile-setting,
[data-appearance='dark'] .admin-row,
[data-appearance='dark'] .comments article { border-color: #899db330; }
[data-appearance='dark'] .text-button,
[data-appearance='dark'] a { color: #a9c1ff; }
[data-appearance='dark'] .month-heading .icon-btn { color: #cad9f1; }
[data-appearance='dark'] .launch-screen {
  background: radial-gradient(ellipse at 20% 25%, #344f82, transparent 60%),
    radial-gradient(ellipse at 85% 75%, #57425e, transparent 58%), #111b31;
  color: #eaf1fc;
}
[data-appearance='dark'] .launch-mark { background: #2b4168; border-color: #9db7e04d; box-shadow: inset 0 1px 1px #dce9ff50, 0 12px 34px #0309164d; }
[data-appearance='dark'] .launch-screen h1 { color: #f2f6ff; }
[data-appearance='dark'] .launch-subtitle,
[data-appearance='dark'] .appearance-moon { display: block; }
[data-appearance='dark'] .appearance-sun { display: none; }
[data-appearance='dark'] .appearance-label::after { content: 'Тёмная'; }

@media (max-width: 760px) {
  .rail { background: #f9fbffcc; border-color: #ffffffdf; }
  .rail-item.active { color: #2d56c5; }
  .list-head { background: #ffffff2d; }
  .shell.mobile-detail { background: transparent; }
  .feed { background: transparent; }
  [data-appearance='dark'] .rail { background: #273957e8; border-color: #b0c4e64d; }
  [data-appearance='dark'] .rail-item { color: #c1cfe5; }
  [data-appearance='dark'] .rail-item.active { color: #fff; }
  [data-appearance='dark'] .list-head,
  [data-appearance='dark'] .channel-header { background: #1b2a4494; }
  [data-appearance='dark'] .keyboard-open .composer { background: #202d46f5; }
}
@media (prefers-reduced-motion: reduce) {
  .shell::before { animation: none; will-change: auto; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .shell::before { animation: none; }
  .rail, .search, .filter-row, .composer, .planner-tabs { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}