/* Круг: a quieter reading layer framed by color and light. */
:root {
  --krug-ink: #253552;
  --krug-muted: #677894;
  --krug-blue: #4868d8;
  --krug-coral: #d88d70;
  --krug-line: #dfe6f1;
  --glass-ink: var(--krug-ink);
  --glass-fill: linear-gradient(120deg, #ffffff8a, #ffffff45 46%, #d9e6ff42 78%, #fff4ec70);
  --glass-shadow: 0 0 0 1px #6478a017, 0 8px 25px -12px #5467964d,
    inset 0 1px 1px #fff, inset 0 -1px 1px #8799b342;
  background: #edf2fa;
}

.shell,
.shell.mobile-detail {
  background:
    radial-gradient(ellipse 70% 62% at 4% 2%, #a8c9f5b8, transparent 70%),
    radial-gradient(ellipse 47% 56% at 96% 95%, #f7d4bbad, transparent 72%),
    radial-gradient(ellipse 47% 46% at 88% 13%, #ddd2f2a6, transparent 72%),
    #edf2fa;
  color: var(--krug-ink);
}
.workspace { background: #ffffff14; }
.list-panel { background: #ffffff1a; border-right-color: #7290b220; }
.screen h1,
.list-head h1,
.head-row h1 { color: #1f3151; letter-spacing: -.035em; }
.intro,
.sub,
.snippet,
.announcement-meta,
.planner-note { color: var(--krug-muted); }

/* The navigation is a single illuminated control, with a legible selection. */
.rail {
  background: linear-gradient(145deg, #ffffff9e, #f8fbff72 45%, #dbe9ff69 76%, #fff0e790);
  border-color: #ffffffc7;
  box-shadow: 0 0 0 1px #6883a51c, 0 11px 32px -17px #3e598e85,
    inset 0 2px 1px #fff, inset 0 -2px 2px #879dba42;
}
.rail-item { color: #546989; font-weight: 550; }
.rail-item svg { transition: color .2s ease, transform .25s cubic-bezier(.2,.8,.2,1); }
.rail-item:hover { color: var(--krug-blue); background: #ffffff4d; }
.rail-item.active { color: #2854c5; font-weight: 700; }
.rail-item.active svg { color: #315fe0; transform: translateY(-1px); }
.rail-item.active::after {
  content: ''; position: absolute; left: 50%; bottom: 2px;
  width: 16px; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, #5577ea, #7f9cf4);
  box-shadow: 0 1px 5px #5378da55; transform: translateX(-50%);
  pointer-events: none;
}
.rail .liquid-lens {
  background: radial-gradient(ellipse at 28% 0%, #fffdfde6, transparent 65%),
    linear-gradient(125deg, #eaf1ffb8, #c8dafa91 60%, #e8dff0a1);
  box-shadow: 0 0 0 1px #6584b331, 0 6px 13px -8px #4267b390,
    inset 0 2px 2px #fff, inset 0 -2px 2px #668aca57;
}
.nav-unread,
.unread-dot { background: #4770dd; }
.nav-unread { box-shadow: 0 1px 0 #ffffff9c, 0 2px 6px #4969b15c; }

/* Small controls carry the glass treatment; long text stays on solid paper. */
.header-actions,
.search,
.filter-row,
.composer,
.list-actions .icon-btn,
.back,
.planner-tabs {
  background: linear-gradient(135deg, #ffffffba, #f6f9ff77 55%, #e2edff71);
  border-color: #ffffffd1;
}
.filter.active,
.planner-tabs button.selected {
  color: #3158c6;
  background: #e1ebffca;
  border-color: #ffffffdb;
  box-shadow: inset 0 1px 1px #fff, 0 2px 8px #4865aa17;
}
.search:focus-within,
.composer:focus-within { box-shadow: var(--glass-shadow), 0 0 0 2px #7399e548; }
.primary { background: #4e6ed0; }
.primary:hover { background: #3f61c8; }
.composer .primary {
  background: linear-gradient(150deg, #86a7f3, #4e6ed0 76%);
  box-shadow: inset 0 1px 2px #ffffffcf, inset 0 -2px 2px #2b4d9a72,
    0 4px 10px #4d6eba44;
}
.secondary,
.text-button { color: #3d5eb7; }
.post,
.screen-card,
.month-card,
.announcement-card {
  background: #fffefd;
  border-color: #e4e8f1;
  box-shadow: 0 4px 18px -12px #46597932, inset 0 1px 0 #fff;
}
.post h3,
.screen-card h3,
.announcement-card h3 { color: #243652; }
.post p,
.screen-card p { color: #53647e; }
.planner-event { background: #fffefd; border-color: #e3e8f1; box-shadow: 0 4px 14px -11px #4659793c; }
.planner-event-icon { background: #e7eeff; color: #4f6dca; }
.personal .planner-event-icon { background: #fff0e7; color: #b87355; }
.calendar-day.chosen { background: #dce8ff; color: #3158c6; }
.calendar-day.today { box-shadow: inset 0 0 0 1px #7593dc; }
.message.mine { background: #e2ebff; border-color: #d7e3fb; }
.message:not(.mine) { background: #fffefd; border-color: #e2e8f1; }
.conversation.active { background: #e7efffa3; border-color: #ffffffba; }
.conversation:hover { background: #ffffff85; }
.tag { background: #eaf0ff; color: #4965b1; }
.post-toolbar .content-more { background: #f1f4fa; }
.live-dialog { background: #fafcffed; }

@media (min-width: 761px) {
  .rail-item.active::after { left: 4px; top: 50%; bottom: auto; width: 3px; height: 18px; transform: translateY(-50%); }
}
@media (max-width: 760px) {
  .rail { box-shadow: 0 0 0 1px #6f89ac24, 0 9px 24px -13px #435d8f8c, inset 0 2px 1px #fff; }
  .rail-item.active::after { bottom: 0; width: 14px; height: 2px; }
  .keyboard-open .composer { background: #f7f9fef5; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .rail, .header-actions, .search, .filter-row, .composer, .planner-tabs,
  .list-actions .icon-btn, .back { background: #f2f6ff; border-color: #95a8c5; }
  .rail .liquid-lens { background: #dce7fb; }
}
@media (prefers-reduced-motion: reduce) {
  .rail-item svg { transition: none; transform: none; }
}