@font-face { font-family: "Golos Text"; src: url("/fonts/GolosText-VariableFont_wght.ttf") format("truetype"); font-style: normal; font-weight: 400 900; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #0c0a09;
  --surface: rgba(30, 29, 28, .68);
  --surface-solid: #1b1a19;
  --surface-muted: rgba(94, 89, 82, .24);
  --ink: #f0ede8;
  --ink-soft: #d4cfc8;
  --muted: #b5b0a8;
  --dim: #8a847c;
  --line: rgba(214, 207, 196, .19);
  --line-strong: rgba(214, 207, 196, .3);
  --blue: #4d7ec9;
  --blue-soft: rgba(91, 126, 179, .2);
  --green: #3ddfb0;
  --status-blue: rgba(112, 137, 173, .36);
  --shadow: 0 22px 58px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 250, 240, .045);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
 }


* { box-sizing: border-box; }
html { width: 100%; min-width: 320px; overflow-x: hidden; scroll-behavior: smooth; font-family: "Golos Text", sans-serif; }
body {
  margin: 0;
  min-width: 320px;
  width: 100%;
  overflow-x: hidden;
  color: var(--ink);
  background: radial-gradient(ellipse at 8% 4%, rgba(104, 132, 150, .18) 0%, transparent 46%), radial-gradient(ellipse at 94% 18%, rgba(105, 72, 49, .2) 0%, transparent 45%), radial-gradient(ellipse at 56% 88%, rgba(112, 105, 96, .1) 0%, transparent 54%), var(--bg);
  background-attachment: fixed;
  font: 400 14px/1.6 "Golos Text", sans-serif;
  letter-spacing: .01em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}
button, input, select, textarea { font-family: inherit; }
button, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
button:active, a:active { transform: scale(.97); transition: transform 120ms var(--ease-out); }
.icon-sprite { width: 0; height: 0; position: absolute; overflow: hidden; }
.ui-icon { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-shell { min-height: 100vh; display: block; }
.sidebar {
  width: min(300px, 86vw); height: 100dvh; padding: 26px 15px 20px;
  position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; flex-direction: column;
  border-right: 1px solid var(--line); background: rgba(11, 16, 29, .82);
  backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px);
  box-shadow: none; transform: translateX(-105%); transition: transform 260ms var(--ease-drawer);
}
.sidebar.open { transform: none; }
.brand { padding: 0 10px; display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14px; font-weight: 700; }
.brand b { color: var(--muted); font-weight: 400; }
.brand-mark { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--radius-surface); color: var(--bg); background: var(--ink); }
.brand-mark svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.side-nav { margin-top: 44px; display: grid; gap: 4px; }
.side-nav a { min-height: 48px; padding: 6px 11px; position: relative; display: flex; align-items: center; gap: 11px; border-radius: var(--radius-surface); color: var(--muted); font-size: 14px; font-weight: 500; transition: background .18s ease, color .18s ease, transform .18s ease; }
.side-nav a span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-surface); color: var(--muted); background: transparent; }
.side-nav a span .ui-icon { width: 18px; height: 18px; }
.side-nav a:hover { color: var(--ink); background: rgba(255, 255, 255, .06); transform: translateX(2px); }
.side-nav a.active { color: var(--blue); background: var(--blue-soft); font-weight: 600; }
.side-nav a.active:after { content: ""; width: 3px; height: 18px; position: absolute; right: 5px; border-radius: var(--radius-surface); background: var(--blue); animation: indicator-in 180ms var(--ease-out) both; }
.side-nav a.active span { color: var(--blue); background: rgba(0, 113, 227, .1); }
.sidebar-bottom { margin-top: auto; padding: 10px; color: var(--dim); font-size: 11px; line-height: 1.5; }
.install-button { width: 100%; margin-bottom: 18px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-surface); color: var(--blue); background: var(--blue-soft); font-size: 12px; cursor: pointer; }
.site-meta { display: grid; gap: 6px; }
.site-meta small { color: var(--dim); font-size: 11px; }
.site-meta .font-credit { color: rgba(161, 161, 166, .58); font-size: 10px; }
.site-links { display: flex; flex-wrap: wrap; gap: 7px 12px; }
.site-links a { color: var(--muted); font-size: 11px; text-decoration: underline; text-decoration-color: rgba(110, 110, 115, .35); text-underline-offset: 2px; }

.app-main { width: min(100%, 1160px); margin: 0 auto; padding: 0 42px 56px; isolation: isolate; }
.beta-notice { margin: 28px auto 0; padding: 12px 16px; width: fit-content; max-width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; color: var(--dim); font-size: 12px; text-align: center; }
.beta-notice-label { padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.beta-notice a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .beta-notice { margin-bottom: 82px; padding-inline: 8px; font-size: 11px; } }
.app-header { min-height: 62px; position: sticky; top: 12px; z-index: 12; margin-top: 12px; padding: 0 13px 0 16px; display: flex; align-items: center; border: 1px solid rgba(178, 199, 255, .2); border-radius: var(--radius-surface); background: var(--surface); backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); box-shadow: none; }
.header-note { position: absolute; top: 50%; left: 50%; padding: 6px 12px; display: flex; align-items: center; min-height: 28px; border-radius: var(--radius-pill); color: var(--muted); background: rgba(128, 128, 128, .1); transform: translate(-50%, -50%); }
.header-note time { display: block; font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; }
.mobile-menu { width: 38px; height: 38px; margin-right: 10px; display: grid; place-items: center; border: 0; border-radius: var(--radius-surface); color: var(--ink); background: var(--surface-muted); }
.mobile-menu .ui-icon { width: 18px; height: 18px; }
.settings-button { width: 38px; height: 38px; margin-left: auto; display: grid; place-items: center; border: 0; border-radius: var(--radius-surface); color: var(--muted); background: transparent; transition: color .18s ease, background .18s ease, transform .18s ease; }
.settings-button:hover { color: var(--ink); background: rgba(255, 255, 255, .07); }
.settings-button .ui-icon { width: 18px; height: 18px; }
.screen { display: none; padding-top: 48px; scroll-margin-top: 88px; animation: screen-in 220ms var(--ease-out) both; }
.screen.active { display: block; }
#intro { --blue: #9bb6c7; --blue-soft: rgba(155, 182, 199, .16); }
#schedule { --blue: #60a88a; --blue-soft: rgba(96, 168, 138, .18); }
#bells { --blue: #ffb76a; --blue-soft: rgba(255, 183, 106, .17); }
@keyframes screen-in { from { opacity: 0; transform: translateY(8px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes indicator-in { from { opacity: 0; transform: scaleY(.35); } to { opacity: 1; transform: scaleY(1); } }
.eyebrow { margin-bottom: 10px; color: var(--blue); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.screen h2 { margin: 0; color: var(--ink); font-size: clamp(36px, 4vw, 52px); line-height: 1.03; letter-spacing: -.025em; font-weight: 700; }
.latest-change h3, .showcase-content b, .feature-copy b, .quick-grid b { letter-spacing: -.025em; font-weight: 650; }
.change-main b, .lesson-content b, .bell-content > header time { font-weight: 550; letter-spacing: -.01em; }
.screen-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.screen-description { max-width: 62ch; margin: 16px 0 30px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.count-pill { min-width: 36px; height: 30px; padding: 0 10px; display: grid; place-items: center; border-radius: var(--radius-pill); color: var(--blue); background: var(--blue-soft); font-size: 12px; font-weight: 600; }

.welcome-card { min-height: 326px; padding: 42px; position: relative; overflow: hidden; display: flex; align-items: center; border-radius: var(--radius-surface); color: #fff; background: linear-gradient(135deg, #15171b 0%, #20232b 100%); box-shadow: none; contain: layout paint; }
.welcome-card > div:first-child { position: relative; z-index: 1; }
.intro-eyebrow { display: block; margin-bottom: 20px; color: #9bb6c7; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.welcome-card h2 { max-width: 650px; margin: 0; color: #fff; font-size: clamp(44px, 6vw, 72px); line-height: .98; letter-spacing: -.045em; font-weight: 700; }
.welcome-card h2 em { color: #a9b9ff; font-style: normal; }
.welcome-card p { max-width: 430px; margin: 22px 0 0; color: rgba(255, 255, 255, .7); line-height: 1.55; }
.screen#intro > .screen-heading { margin-bottom: 32px; }
.screen#intro > .screen-heading .screen-description { margin-bottom: 0; }
.screen#intro > .screen-heading h2 { color: var(--ink); font-size: clamp(32px, 5vw, 44px); line-height: 1.12; }
.intro-action { width: fit-content; min-height: 40px; margin-top: 22px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius-pill); color: #fff; background: rgba(255, 255, 255, .1); font-size: 12px; font-weight: 600; transition: background .18s ease, transform .18s ease; }
.intro-action:hover { background: rgba(255, 255, 255, .17); transform: translateY(-1px); }
.intro-action .ui-icon { width: 16px; height: 16px; }
/* Legacy intro cards replaced by the showcase below. */
/* .quick-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.quick-grid article { min-height: 326px; padding: 34px; position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-surface); background: var(--surface-solid); box-shadow: none; contain: layout paint; }
.screen.active .quick-grid article { animation: card-in 280ms var(--ease-out) both; }
.screen.active .quick-grid article:nth-child(2) { animation-delay: .045s; }
.screen.active .quick-grid article:nth-child(3) { animation-delay: .09s; }
@keyframes card-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.quick-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius-surface); color: var(--blue); background: var(--blue-soft); }
.quick-icon .ui-icon { width: 23px; height: 23px; }
.quick-grid b { margin-top: auto; max-width: 90%; color: var(--ink); font-size: clamp(25px, 2.5vw, 34px); line-height: 1; letter-spacing: -.035em; font-weight: 700; }
.quick-grid small { max-width: 28ch; margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.screen#intro .quick-grid { grid-template-columns: 1fr; gap: 0; margin-top: 34px; }
.intro-capabilities { margin-top: 86px; }
.intro-capabilities h3 { max-width: 680px; margin: 0; color: var(--ink); font-size: clamp(34px, 5vw, 62px); line-height: 1.02; letter-spacing: -.045em; font-weight: 700; }
.intro-capabilities h3 em { color: var(--muted); font-style: normal; }
.screen#intro .quick-grid article { min-height: 360px; padding: 64px 8px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr); align-items: center; gap: clamp(28px, 6vw, 96px); border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.screen#intro .quick-grid article { min-height: 390px; padding: 58px 46px; border: 1px solid rgba(178, 199, 255, .2); border-radius: var(--radius-surface); background: linear-gradient(135deg, rgba(39, 63, 105, .92), rgba(20, 28, 46, .98)); box-shadow: none; animation: feature-crossfade 240ms var(--ease-out) both; }
.screen#intro .quick-grid article#feature-schedule { background: linear-gradient(135deg, rgba(83, 72, 48, .94), rgba(30, 28, 24, .98)); }
.screen#intro .quick-grid article#feature-bells { background: linear-gradient(135deg, rgba(91, 61, 27, .94), rgba(31, 28, 27, .98)); }
@keyframes feature-crossfade { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.screen#intro .quick-grid article:last-child { border-bottom: 1px solid var(--line); }
.screen#intro .quick-grid article:nth-child(1) { --blue: #83adff; --blue-soft: rgba(83, 137, 255, .2); }
.screen#intro .quick-grid article:nth-child(2) { --blue: #b0986a; --blue-soft: rgba(176, 152, 106, .17); }
.screen#intro .quick-grid article:nth-child(3) { --blue: #ffb76a; --blue-soft: rgba(255, 183, 106, .17); }
.feature-index { align-self: start; position: absolute; margin-top: 4px; color: var(--blue); font-size: 42px; line-height: 1; letter-spacing: -.04em; font-weight: 700; opacity: .72; }
.feature-copy { min-width: 0; padding-left: 72px; }
.feature-copy .quick-icon { margin-bottom: 24px; }
.feature-copy b { display: block; margin: 0; color: var(--ink); font-size: clamp(34px, 4.5vw, 64px); line-height: .98; letter-spacing: -.045em; font-weight: 700; }
.feature-copy small { display: block; max-width: 42ch; margin-top: 18px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.feature-preview { min-width: 0; min-height: 230px; padding: 26px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; border: 1px solid rgba(178, 199, 255, .18); border-radius: var(--radius-surface); background: linear-gradient(145deg, rgba(35, 52, 84, .9), rgba(17, 24, 40, .96)); box-shadow: none; }
.feature-preview strong, .feature-preview b { color: var(--ink); font-size: 16px; line-height: 1.3; }
.preview-caption { display: block; margin-bottom: 12px; color: var(--blue); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.preview-line { min-width: 0; margin-top: 14px; padding-top: 13px; display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 11px; }
.preview-line i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--blue); }
.preview-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-line b { margin-left: auto; color: var(--muted); font-size: 10px; font-weight: 500; }
.preview-tabs { margin-bottom: 22px; display: flex; gap: 8px; }
.preview-tabs > * { padding: 7px 11px; border-radius: var(--radius-pill); color: var(--muted); background: rgba(255, 255, 255, .06); font-size: 11px; font-weight: 500; }
.preview-tabs b { color: #101116; background: #65d49b; }
.preview-lesson { padding: 13px 0; display: flex; gap: 16px; border-top: 1px solid var(--line); }
.preview-lesson time { color: #65d49b; font-size: 12px; font-variant-numeric: tabular-nums; }
.preview-lesson div { display: grid; gap: 3px; }
.preview-lesson strong { font-size: 13px; }
.preview-lesson small { color: var(--muted); font-size: 10px; }
.preview-lesson.muted { opacity: .55; }
.bells-preview { background: linear-gradient(145deg, rgba(75, 55, 30, .94), rgba(22, 25, 35, .96)); }
.preview-big { display: block; margin: 4px 0 3px; color: #ffb76a !important; font-size: 48px !important; letter-spacing: -.04em; }
.preview-big small { color: var(--muted); font-size: 13px; letter-spacing: 0; }
.preview-time { color: var(--ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.preview-progress { height: 5px; margin: 20px 0 11px; overflow: hidden; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .12); }
.preview-progress i { width: 58%; height: 100%; display: block; border-radius: inherit; background: #ffb76a; }
.preview-next { color: var(--muted); font-size: 11px; }
.screen#intro .quick-grid b { max-width: 80%; font-size: clamp(34px, 6vw, 68px); }
.screen#intro .quick-grid small { max-width: 38ch; font-size: 14px; }
.home-telegram-grid { margin-top: 16px; display: grid; grid-template-columns: 1fr; gap: 8px; align-items: stretch; }
.channel-panel, .bot-card { min-width: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-surface); background: linear-gradient(145deg, #1b2945 0%, var(--surface-solid) 72%); }
.channel-panel { min-height: 0; padding: 17px; }
.tg-profile-header { margin-bottom: 14px; padding-bottom: 0; display: flex; align-items: center; gap: 11px; }
.tg-profile-header img, .tg-profile-fallback { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: var(--radius-surface); object-fit: cover; color: #fff; background: #2d4e86; font-size: 12px; font-weight: 700; }
.tg-profile-header h3 { margin: 0; color: var(--ink); font-size: 16px; font-weight: 600; }
.tg-profile-header p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.intro-section-kicker { display: block; margin-bottom: 16px; color: var(--blue); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.bot-card { min-height: 0; padding: 1px 5px 0; align-items: center; flex-direction: row; justify-content: flex-end; gap: 9px; border: 0; border-radius: 0; background: transparent; }
.bot-kicker { margin: 0; color: var(--dim); font-size: 10px; font-weight: 400; }
.bot-profile { width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 11px; align-items: center; }
.bot-avatar, .bot-profile img { width: 42px; height: 42px; grid-row: 1 / span 2; margin: 0; display: grid; place-items: center; border-radius: var(--radius-surface); object-fit: cover; color: #fff; background: #2d4e86; font-size: 15px; font-weight: 700; }
.bot-profile h3 { min-width: 0; margin: 0; overflow: hidden; color: var(--ink); font-size: 14px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bot-profile > span:not(.bot-avatar) { min-width: 0; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.bot-profile p { grid-column: 1 / -1; max-width: 260px; margin: 13px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; white-space: pre-line; }
.bot-card .bot-profile { display: none; }
.tg-open-button { width: 100%; min-height: 42px; margin-top: 15px; padding: 0 15px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--radius-surface); color: #fff; background: var(--blue); font-size: 12px; font-weight: 600; transition: filter .18s ease, transform .18s ease; }
.tg-open-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.tg-open-button .ui-icon { width: 17px; height: 17px; }
.bot-card > .tg-open-button { width: fit-content; min-height: 25px; margin: 0; padding: 0; justify-content: flex-start; color: var(--dim); background: transparent; font-size: 10px; font-weight: 500; }
.screen#intro .home-telegram-grid { margin-top: 42px; gap: 0; }
.screen#intro .channel-panel,
.screen#intro .bot-card { padding: 30px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.screen#intro .channel-panel { min-height: 0; }
.screen#intro .channel-panel > .tg-open-button { min-height: 42px; margin-top: 18px; padding: 0 17px; border-radius: var(--radius-pill); color: #fff; background: var(--blue); font-size: 12px; }
.screen#intro .bot-card { align-items: flex-start; flex-direction: column; justify-content: flex-start; gap: 0; }
.screen#intro .bot-card .bot-profile { display: grid; }
.screen#intro .bot-card .bot-kicker { margin-bottom: 15px; color: var(--blue); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.screen#intro .bot-card .bot-profile p { max-width: 42ch; }
.screen#intro .bot-card > .tg-open-button { min-height: 42px; margin-top: 18px; padding: 0 17px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink); background: var(--surface-muted); font-size: 12px; }
.channel-panel > .tg-open-button { width: fit-content; min-height: 34px; margin-top: 13px; padding: 0; justify-content: flex-start; color: var(--blue); background: transparent; } */

.changes-list { padding: 8px; border: 0; border-radius: var(--radius-surface); background: transparent; overflow: hidden; box-shadow: none; }
.change-row { width: 100%; min-height: 88px; padding: 14px 18px; display: grid; grid-template-columns: 48px minmax(0, 1fr) 30px; gap: 16px; align-items: center; border: 0; border-radius: var(--radius-surface); color: inherit; background: transparent; text-align: left; transition: background 160ms ease; content-visibility: auto; contain-intrinsic-size: auto 88px; animation: row-in 180ms var(--ease-out) both; }
.change-row:nth-child(2) { animation-delay: .035s; }
.change-row:nth-child(3) { animation-delay: .07s; }
.change-row:nth-child(4) { animation-delay: .105s; }
.change-row:nth-child(5) { animation-delay: .14s; }
.change-row + .change-row { border-top: 1px solid var(--line); }
.change-row:hover { background: rgba(0, 113, 227, .055); }
@keyframes row-in { from { opacity: 0; transform: translate3d(0, 7px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
.change-main b { display: block; color: var(--ink); font-size: 15px; line-height: 1.35; font-weight: 600; }
.change-main small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.change-arrow { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: var(--blue-soft); font-size: 20px; line-height: 1; }
.show-more-button { margin: 16px auto 0; padding: 9px 15px; display: flex; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--blue); background: transparent; font-size: 12px; cursor: pointer; }
.show-more-button[hidden] { display: none; }
.skeleton-row, .post-skeleton { background: linear-gradient(90deg, var(--surface-muted), rgba(255,255,255,.7), var(--surface-muted)); background-size: 200% 100%; animation: loading 1.5s infinite; }
.skeleton-row { height: 78px; border-radius: var(--radius-surface); }
@keyframes loading { to { background-position: -200% 0; } }

.schedule-toolbar { margin: 26px 0 16px; display: grid; grid-template-columns: 180px 1fr; gap: 11px; }
.schedule-toolbar label { display: grid; gap: 6px; position: relative; color: var(--muted); font-size: 11px; }
.schedule-toolbar select { height: 50px; padding: 0 42px 0 18px; appearance: none; border: 1px solid var(--line); border-radius: var(--radius-surface); outline: 0; color: var(--ink); background: linear-gradient(145deg, #223453 0%, var(--surface-solid) 100%); cursor: pointer; }
.select-chevron { width: 16px; height: 16px; position: absolute; right: 15px; bottom: 17px; color: var(--muted); pointer-events: none; transform: rotate(90deg); }
.week-control { width: fit-content; margin: 17px 0 6px; padding: 3px; position: relative; display: flex; gap: 3px; border-radius: var(--radius-pill); background: var(--surface-muted); }
.week-control button { min-height: 35px; padding: 0 24px 0 7px; position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: var(--radius-pill); color: var(--muted); background: transparent; font-size: 12px; font-weight: 500; transition: color 240ms var(--ease-out); }
.week-control button.active { color: #fff; background: transparent; }
.week-slider { height: calc(100% - 6px); position: absolute; left: 0; top: 3px; z-index: 1; border-radius: var(--radius-pill); background: var(--ink); opacity: 0; pointer-events: none; transition: width 289ms var(--ease-drawer), transform 289ms var(--ease-drawer), opacity 160ms ease; }
.week-slider.is-ready { opacity: 1; }
.week-mark { width: 25px; height: 25px; position: relative; display: grid; place-items: center; border: 1px solid rgba(199, 206, 216, .18); border-radius: var(--radius-pill); color: transparent; background: rgba(199, 206, 216, .08); font-size: 0; }
.week-mark::before { content: ""; width: 2px; height: 11px; display: block; border-radius: var(--radius-pill); background: currentColor; transform: translateY(2px) rotate(28deg); }
[data-week="denominator"] .week-mark::before { transform: translateY(2px) rotate(-28deg); }
.day-tabs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 9px; scrollbar-width: none; }
.day-tabs::-webkit-scrollbar { display: none; }
.day-tab { flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--muted); background: linear-gradient(145deg, #223453 0%, var(--surface-solid) 100%); font-size: 12px; }
.day-tab.active { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.lessons { margin-top: 15px; display: grid; gap: 8px; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
.schedule-day-transition .day-tabs { animation: none; }
.lessons.is-exiting { opacity: 0; transform: translateY(8px) scale(.98); }
.lessons.is-entering { animation: schedule-enter 220ms var(--ease-out) both; }
.week-indicator { width: 9px; height: 9px; position: absolute; top: 50%; right: 6px; z-index: 3; border: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #cbbbe3, #aa91d2 62%, #7d659d); box-shadow: none; transform: translateY(-50%); }
.week-indicator[hidden] { display: none; }
.week-indicator::after { content: attr(data-tooltip); width: max-content; max-width: min(250px, calc(100vw - 32px)); padding: 8px 10px; position: absolute; top: calc(100% + 10px); right: auto; left: 50%; z-index: 8; border: 1px solid rgba(199, 206, 216, .2); border-radius: var(--radius-surface); color: var(--ink-soft); background: rgba(25, 29, 35, .96); box-shadow: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 10px; font-weight: 500; line-height: 1.4; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-4px) scale(.98); transform-origin: top center; transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); }
.week-indicator:hover::after, .week-control button:focus-visible .week-indicator::after { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
@keyframes schedule-enter { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.lesson { min-height: 96px; padding: 18px 20px; display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 18px; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-surface); background: linear-gradient(145deg, #223453 0%, var(--surface-solid) 100%); content-visibility: auto; contain-intrinsic-size: auto 96px; animation: row-in 180ms var(--ease-out) both; }
.lesson:nth-child(2) { animation-delay: .035s; }
.lesson:nth-child(3) { animation-delay: .07s; }
.lesson:nth-child(4) { animation-delay: .105s; }
.lesson:nth-child(5) { animation-delay: .14s; }
.lesson-side { min-width: 0; padding-right: 15px; display: flex; align-items: center; gap: 7px; border-right: 1px solid var(--line); }
.lesson-number { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--radius-surface); color: var(--blue); background: var(--blue-soft); font-size: 13px; font-weight: 600; }
.lesson-side time { min-width: 0; color: var(--ink-soft); font-size: 12px; font-weight: 600; white-space: nowrap; }
.lesson-details { display: grid; gap: 8px; align-content: center; }
.lesson-content { position: relative; padding-right: 85px; }
.lesson-content + .lesson-content { padding-top: 9px; border-top: 1px solid var(--line); }
.lesson-content b { display: block; color: var(--ink); font-size: 15px; line-height: 1.35; font-weight: 600; }
.lesson-content small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.lesson-content em { position: absolute; right: 0; top: 0; padding: 4px 7px; border-radius: var(--radius-surface); color: var(--blue); background: var(--blue-soft); font-size: 9px; font-style: normal; }
.lesson-content.is-empty b { color: var(--muted); font-weight: 500; }
.time-note { color: var(--dim) !important; font-size: 10px !important; }
.loading-line, .empty-state { padding: 34px; color: var(--muted); text-align: center; }

.bells-overview { position: relative; min-height: 82px; margin-top: 28px; padding: 20px 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; border: 1px solid var(--line); border-radius: var(--radius-surface); background: linear-gradient(145deg, #3a3024 0%, var(--surface-solid) 100%); }
.bells-live-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--dim); }
.bells-overview-icon { width: 18px; height: 18px; color: var(--blue); flex: 0 0 auto; }
.bells-overview.is-live .bells-live-dot { background: var(--green); box-shadow: none; animation: live-pulse 2.2s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { opacity: .65; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }
.bells-progress-bar { position: absolute; top: -1px; left: 22px; right: 22px; height: 2px; border-radius: var(--radius-pill); background: rgba(184, 133, 95, .1); overflow: hidden; pointer-events: none; }
.bells-progress-bar::after { content: ""; display: block; height: 100%; width: var(--progress, 0%); border-radius: inherit; background: linear-gradient(90deg, rgba(184, 133, 95, .72), #d4a17a 72%, rgba(255, 239, 224, .88)); box-shadow: none; transition: width 30s linear; }
@keyframes bells-update { 0% { opacity: .5; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.02); } 100% { opacity: 1; transform: none; } }
.bells-update { animation: bells-update 400ms var(--ease-out); }
.bells-overview > div { min-width: 0; display: grid; gap: 3px; }
.bells-overview small { color: var(--muted); font-size: 10px; }
.bells-overview b { overflow: hidden; color: var(--ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bells-overview > time { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.bells-list { margin-top: 12px; display: grid; gap: 9px; }
.bells-note { margin-top: 26px; border: 1px solid rgba(184, 133, 95, .14); background: radial-gradient(circle at 0 0, rgba(184, 133, 95, .08), transparent 50%), rgba(28, 23, 23, .56); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius-surface); padding: 16px 18px; display: flex; align-items: flex-start; gap: 12px; color: var(--dim); font-size: 12px; line-height: 1.5; }
.bells-note-mark { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: rgba(184, 133, 95, .15); color: #b8855f; font-size: 12px; font-weight: 700; }
.bells-note p { margin: 0; }
.bells-note a { color: var(--muted); text-decoration: underline; text-decoration-color: rgba(161, 161, 166, .42); text-underline-offset: 2px; }
.bells-note a:hover { color: var(--ink-soft); }
.bell-card { min-height: 122px; display: grid; grid-template-columns: 76px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-surface); background: linear-gradient(145deg, #3a3024 0%, var(--surface-solid) 100%); animation: row-in 180ms var(--ease-out) both; }
.bell-card:nth-child(2) { animation-delay: .035s; }
.bell-card:nth-child(3) { animation-delay: .07s; }
.bell-card:nth-child(4) { animation-delay: .105s; }
.bell-card:nth-child(5) { animation-delay: .14s; }
.bell-card.is-current { border-color: rgba(22, 131, 75, .35); background: rgba(22, 131, 75, .055); }
.bell-card.is-next { border-color: rgba(255, 183, 106, .4); background: var(--blue-soft); }
.bell-order { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); }
.bell-order b { color: var(--ink); font-size: 22px; font-weight: 600; }
.bell-order small { color: var(--dim); font-size: 9px; text-transform: uppercase; }
.bell-content { min-width: 0; padding: 20px; }
.bell-content > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.bell-content > header > div { display: flex; align-items: center; gap: 8px; }
.bell-content > header em { padding: 3px 6px; border-radius: var(--radius-surface); color: var(--blue); background: var(--blue-soft); font-size: 8px; font-style: normal; font-weight: 600; text-transform: uppercase; }
.bell-content > header > time { margin-left: auto; color: var(--ink); font-size: 16px; font-weight: 600; white-space: nowrap; }
.bell-variants { margin-top: 11px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 7px; }
.bell-variant { min-width: 0; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-surface); background: rgba(128, 128, 128, .045); }
.bell-variant > small { display: block; margin-bottom: 7px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.bell-variant > div { display: flex; flex-wrap: wrap; gap: 7px 14px; }
.bell-variant span { display: flex; align-items: center; gap: 6px; }
.bell-variant span em { width: 17px; height: 17px; display: grid; place-items: center; border-radius: var(--radius-surface); color: var(--blue); background: var(--blue-soft); font-size: 8px; font-style: normal; }
.bell-variant span time { color: var(--ink); font-size: 17px; font-weight: 600; white-space: nowrap; }

.telegram-posts { min-height: 0; max-height: 220px; position: relative; flex: 1; display: grid; align-content: start; gap: 11px; overflow: hidden; }
.telegram-posts:after { content: ""; height: 42px; position: absolute; inset: auto 0 0; z-index: 1; background: linear-gradient(transparent, var(--surface-solid)); pointer-events: none; }
.tg-message { min-width: 0; display: flex; align-items: flex-start; gap: 8px; content-visibility: auto; contain-intrinsic-size: auto 190px; animation: row-in .36s cubic-bezier(.2, .8, .2, 1) both; }
.tg-message:nth-child(2) { animation-delay: .06s; }
.tg-avatar { width: 30px; height: 30px; margin-top: 5px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 50%; object-fit: cover; color: #fff; background: #5365a8; font-size: 11px; font-weight: 700; }
.tg-bubble { width: min(100%, 620px); min-width: 0; max-width: calc(100% - 38px); padding: 16px 18px; border: 1px solid rgba(131, 173, 255, .16); border-radius: var(--radius-surface); background: rgba(11, 17, 31, .42); }
.tg-author { display: block; margin-bottom: 6px; overflow: hidden; color: var(--blue); font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tg-media { width: calc(100% + 22px); max-height: 220px; margin: 0 -11px 9px; display: block; border-radius: var(--radius-surface); object-fit: cover; }
.tg-body { color: var(--ink-soft); font-size: 13px; line-height: 1.58; overflow-wrap: anywhere; }
.tg-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.tg-body .tg-custom-emoji { width: 1.15em; height: 1.15em; margin: 0 .04em; vertical-align: -.18em; object-fit: contain; }
.tg-body pre, .tg-body blockquote { margin: 9px 0 0; padding: 9px 10px; border-left: 2px solid var(--blue); border-radius: 0 var(--radius-surface) var(--radius-surface) 0; color: var(--ink-soft); background: rgba(128, 128, 128, .08); }
.tg-body pre { overflow-x: auto; font: inherit; white-space: pre-wrap; }
.tg-bubble footer { min-height: 16px; margin-top: 9px; display: flex; align-items: end; justify-content: flex-end; gap: 5px; color: var(--dim); font-size: 9px; }
.tg-bubble footer span { min-width: 0; margin-right: auto; overflow-wrap: anywhere; }
.tg-bubble footer time { flex: 0 0 auto; white-space: nowrap; }
.tg-reactions { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px; }
.tg-reactions span { min-height: 22px; padding: 3px 7px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink-soft); background: var(--surface-solid); font-size: 12px; line-height: 1; }
.tg-reactions b { color: var(--muted); font-size: 10px; font-weight: 600; }
.tg-reactions img { width: 18px; height: 18px; object-fit: contain; }
.post-skeleton { height: 170px; border-radius: var(--radius-surface); }

.sidebar-scrim { position: fixed; inset: 0; z-index: 29; display: block; border: 0; background: rgba(3, 6, 13, .58); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.sidebar-scrim.open { opacity: 1; pointer-events: auto; }
.mobile-nav { width: min(520px, calc(100vw - 18px)); position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 25; padding: 7px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-strong); border-radius: var(--radius-surface); background: var(--surface); box-shadow: none; backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); transform: translateX(-50%); transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out); }
.mobile-nav.nav-hidden { transform: translate(-50%, calc(100% + 24px)); opacity: 0; pointer-events: none; }
.mobile-nav a { height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-surface); color: var(--dim); font-size: 11px; font-weight: 500; transition: color .18s ease, background .18s ease, transform .18s ease; }
.mobile-nav a span .ui-icon { width: 19px; height: 19px; }
.mobile-nav a.active { color: var(--blue); background: var(--blue-soft); }
.mobile-nav a[data-screen="schedule"].active { color: #111318; background: linear-gradient(135deg, #f1f3f5, #9da5b0); }
.mobile-nav a[data-screen="bells"].active { color: #ffb76a; background: rgba(255, 183, 106, .17); }
dialog { color: var(--ink); }
.document-dialog { width: min(1200px, calc(100vw - 20px)); height: min(900px, calc(100vh - 20px)); max-height: none; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-surface); background: var(--surface-solid); display: flex; flex-direction: column; animation: document-open 260ms var(--ease-out) both; }
.document-dialog.is-closing { animation: document-close 140ms var(--ease-out) both; }
.document-dialog:not([open]) { display: none; }
.document-dialog::backdrop { background: rgba(0, 0, 0, .46); backdrop-filter: blur(8px); }
.settings-dialog {
  width: min(430px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid rgba(214, 207, 196, .2);
  border-radius: var(--radius-surface);
  background: radial-gradient(circle at 10% 0, rgba(103, 86, 101, .14), transparent 50%), rgba(26, 25, 24, .96);
  box-shadow: none;
  backdrop-filter: blur(30px);
}
.settings-dialog::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(10px); }
.settings-panel { padding: 28px 26px; }
.settings-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 4px; }
.settings-panel h2 { margin: 2px 0 0; color: #e8e6e3; font-size: 24px; line-height: 1.15; letter-spacing: -.03em; font-weight: 650; }
.settings-close {
  width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid rgba(214, 207, 196, .15); border-radius: 50%;
  color: #a09e9a; background: radial-gradient(circle at 25% 0, rgba(119, 111, 105, .18), transparent 70%), rgba(94, 89, 82, .2);
  box-shadow: none;
  transition: all .18s ease;
}
.settings-close:hover { color: #e8e6e3; background: rgba(119, 111, 105, .3); }
.settings-close .ui-icon { width: 16px; height: 16px; }
.settings-toggle {
  min-height: 68px; margin-top: 24px; padding: 16px 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 16px; align-items: center;
  border-top: 1px solid rgba(214, 207, 196, .1); border-bottom: 1px solid rgba(214, 207, 196, .1);
  cursor: pointer;
}
.settings-toggle span { min-width: 0; display: grid; gap: 4px; }
.settings-toggle b { color: #e8e6e3; font-size: 14px; letter-spacing: -.01em; font-weight: 550; }
.settings-toggle small { color: #a09e9a; font-size: 11px; line-height: 1.5; }
.settings-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.settings-toggle i { width: 48px; height: 28px; position: relative; display: block; border-radius: var(--radius-pill); background: rgba(94, 89, 82, .4); transition: background-color 200ms ease; }
.settings-toggle i::after { content: ""; width: 22px; height: 22px; position: absolute; top: 3px; left: 3px; border-radius: 50%; background: #a09e9a; box-shadow: none; transition: transform 200ms ease, background-color 200ms ease; }
.settings-toggle input:checked + i { background: rgba(74, 140, 116, .6); }
.settings-toggle input:checked + i::after { background: #c4dfd2; transform: translateX(20px); }
.settings-toggle input:focus-visible + i { outline: 2px solid rgba(91, 126, 179, .6); outline-offset: 3px; }
.settings-note { margin: 16px 0 0; color: #74716c; font-size: 11px; line-height: 1.5; }
.viewer-header { min-height: 60px; padding: 9px 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 0; background: var(--surface); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); box-shadow: none; }
.viewer-header > button, .zoom-controls button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: var(--radius-surface); color: var(--ink); background: var(--surface-muted); font-size: 20px; cursor: pointer; }
.viewer-header > div:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.viewer-title { flex: 1 1 150px; }
.viewer-header b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.viewer-header span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.viewer-modes { display: flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-surface); background: var(--surface-muted); }
.viewer-modes button, .viewer-action { min-height: 30px; padding: 0 10px; border: 0; border-radius: var(--radius-surface); color: var(--muted); background: transparent; font: inherit; font-size: 11px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.viewer-modes button.active, .viewer-action:hover { color: var(--ink); background: var(--surface-solid); }
.viewer-actions { display: flex; align-items: center; gap: 6px; }
.viewer-action { color: var(--blue); }
.viewer-download, .viewer-share { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.viewer-download .ui-icon, .viewer-share .ui-icon { width: 15px; height: 15px; flex: 0 0 auto; }
.zoom-controls { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.zoom-controls output { min-width: 48px; color: var(--muted); text-align: center; font-size: 11px; }
.zoom-controls[hidden] { display: none; }
.document-viewport { flex: 1 1 auto; min-height: 0; height: auto; overflow: auto; }
.document-pages { width: 100%; min-width: 100%; padding: 16px; display: grid; gap: 15px; }
.document-pages figure { width: 100%; position: relative; margin: 0; }
.document-pages img { width: 100%; height: auto; display: block; background: #fff; box-shadow: none; }
.document-pages figcaption { width: max-content; position: sticky; top: 8px; z-index: 2; margin: 0 0 -31px 12px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-surface); color: var(--ink); background: var(--surface); box-shadow: none; font-size: 10px; backdrop-filter: blur(10px); }
.document-pages.is-styled { max-width: 920px; margin: 0 auto; }
.document-pdf { width: 100%; height: 100%; min-height: 700px; display: block; border: 0; background: #fff; }
.styled-table-section { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-surface); background: linear-gradient(145deg, #223453 0%, var(--surface-solid) 100%); box-shadow: none; }
.styled-table-scroll { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-surface); background: #fff; }
.styled-table { width: 100%; min-width: 620px; border-collapse: collapse; table-layout: fixed; }
.styled-table td { padding: 0; border: 1px solid #c8d2dc; background: #fff; vertical-align: middle; }
.styled-table td img { width: 100%; height: auto; display: block; }
.styled-page { position: relative; padding: 24px clamp(18px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--radius-surface); background: linear-gradient(145deg, #223453 0%, var(--surface-solid) 100%); box-shadow: none; }
.styled-page-number { display: block; margin-bottom: 20px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.styled-line { margin: 0; padding: 8px 0; color: var(--ink-soft); border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.styled-line.is-heading { padding-top: 18px; color: var(--ink); font-size: 15px; font-weight: 600; }
.styled-line.is-heading:first-of-type { padding-top: 0; }
.styled-line.is-row { color: var(--ink); }
.viewer-loading { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: var(--muted); }
.viewer-loading[hidden] { display: none; }
.viewer-loading i { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--blue); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.viewer-error { margin: 60px; color: var(--muted); text-align: center; }

@media (max-width: 1100px) { .app-main { padding-inline: 28px; } }
@media (max-width: 900px) and (min-width: 761px) { .app-main { padding-inline: 24px; } }
@media (max-width: 760px) {
  select { font-size: 16px; }
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom)); overflow-x: hidden; }
  .sidebar { width: min(280px, 82vw); height: 100dvh; padding: 25px 15px 18px; position: fixed; inset: 0 auto 0 0; z-index: 30; transform: translateX(-105%); transition: transform .22s ease; box-shadow: none; }
  .sidebar.open { transform: none; }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 29; border: 0; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .16s ease; }
  .sidebar-scrim.open { display: block; opacity: 1; pointer-events: auto; }
  .app-main { width: 100%; padding: 0 14px 42px; }
  .app-header { min-height: 62px; margin-top: 10px; padding-top: env(safe-area-inset-top); top: 10px; border-radius: var(--radius-surface); }
  .mobile-menu { width: 38px; height: 38px; margin: 0 10px 0 0; display: grid; place-items: center; order: 0; border: 0; border-radius: var(--radius-surface); color: var(--ink); background: var(--surface-muted); }
  .settings-button { order: 2; color: var(--ink); background: var(--surface-muted); }
  .mobile-menu .ui-icon { width: 18px; height: 18px; }
  .screen { padding-top: 30px; scroll-margin-top: 76px; }
  .screen h2 { font-size: 36px; }
  .welcome-card { min-height: 286px; padding: 26px; border-radius: var(--radius-surface); }
  .welcome-card h2 { font-size: clamp(42px, 12vw, 58px); }
  .schedule-toolbar { grid-template-columns: 1fr 1fr; }
  .week-control { width: 100%; }
  .week-control button { flex: 1; padding-inline: 8px; }
  .lesson { padding: 17px 18px; grid-template-columns: 1fr; border-radius: var(--radius-surface); }
  .lesson-side { padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .lesson-content { padding-right: 0; }
  .lesson-content em { width: max-content; max-width: 100%; position: static; display: block; margin-top: 6px; overflow-wrap: anywhere; }
  .bells-overview { padding: 18px; }
  .bells-overview > div { flex: 1 1 0; }
  .bells-overview b { white-space: normal; }
  .bells-overview > time { max-width: 100%; margin-left: 20px; white-space: normal; }
  .bell-card { grid-template-columns: 60px minmax(0, 1fr); border-radius: var(--radius-surface); }
  .bell-content { padding: 18px; }
  .bell-content > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 7px; }
  .bell-content > header > time { grid-column: 2; }
  .bell-content > header > div { min-width: 0; flex-wrap: wrap; }
  .bell-content > header b { overflow-wrap: anywhere; }
  .bell-variants { grid-template-columns: 1fr; }
  .tg-bubble { max-width: calc(100% - 34px); padding: 15px; }
  .tg-media { max-height: 180px; margin-inline: -9px; width: calc(100% + 18px); }
  .mobile-nav { width: auto; position: fixed; left: 9px; right: 9px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 25; padding: 6px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-strong); border-radius: var(--radius-surface); background: var(--surface); box-shadow: none; backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px); transform: none; }
  .mobile-nav.nav-hidden { transform: translateY(calc(100% + 24px)); }
  .mobile-nav a { height: 50px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; border-radius: var(--radius-surface); color: var(--dim); font-size: 9px; font-weight: 500; }
  .mobile-nav a span .ui-icon { width: 18px; height: 18px; }
  .mobile-nav a.active { color: var(--blue); background: var(--blue-soft); }
  .document-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; }
  .viewer-header { gap: 7px; padding: 8px; }
  .viewer-title { flex-basis: calc(100% - 52px); }
  .viewer-actions { width: 100%; order: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .viewer-action { width: 100%; min-height: 42px; padding: 0 10px; border: 1px solid var(--line); background: var(--surface-muted); }
  .document-pages { padding: 7px; gap: 7px; }
  .document-pages.is-styled { padding: 7px; }
  .styled-page { padding: 18px 14px; border-radius: var(--radius-surface); }
}

/* Overview: compact facts from the real sections, with one restrained surface system. */
:root { --bg: #0B0C0D; --surface-solid: #171A1C; --nav-surface: #111315; --ink: #F2F0EA; --muted: #A7AAA7; --dim: #666B69; --violet: #AA91D2; --violet-light: #CBBBE3; --emerald: #3FAF7A; --radius-xl: 32px; --radius-lg: 32px; --radius-md: 32px; --radius-sm: 32px; }
html, body, button, input, select, textarea { font-family: "Golos Text", sans-serif; letter-spacing: 0; font-weight: 400; }
body { background: var(--bg); color: var(--ink); font-size: 13px; line-height: 1.6; }
.screen h2, .welcome-card h2, .capabilities-section h3, .social-section h3, .overview-card strong { letter-spacing: 0; font-weight: 700; }
.screen-description { color: var(--muted); font-size: 12px; line-height: 1.6; }
.app-header, .sidebar, .mobile-nav { border: 0; background: var(--nav-surface) !important; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.app-header, .mobile-nav, .welcome-card, .overview-card, .showcase-card, .social-card, .lesson, .bell-card, .bells-overview, .bells-note, .latest-change, .feature-preview { border-radius: var(--radius-surface); border: 0; }
.welcome-card { min-height: 250px; padding: 28px; background: radial-gradient(circle at 8% 0, rgba(170,145,210,.18), transparent 52%), #171A1C; box-shadow: none; }
.welcome-card h2 { font-size: clamp(34px, 5vw, 54px); line-height: 1.12; }
.welcome-card h2 em { color: var(--violet-light); }
.welcome-card p { display: none; }
.intro-action { margin-top: 24px; border: 0; border-radius: var(--radius-surface); background: rgba(255,255,255,.06); color: var(--ink); font-size: 11px; }
.overview-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.overview-card { min-width: 0; min-height: 250px; padding: 26px; display: flex; flex-direction: column; background: #171A1C; box-shadow: none; transition: transform .18s ease, background .18s ease; }
.overview-card:hover { transform: translateY(-2px); }
.overview-card .ui-icon { width: 22px; height: 22px; margin-bottom: 26px; background: transparent; }
.overview-card-label { color: var(--dim); font-size: 10px; text-transform: uppercase; }
.overview-card strong { min-width: 0; margin-top: 8px; color: var(--ink); font-size: 18px; line-height: 1.16; }
.overview-card p { max-width: 28ch; margin: 10px 0 auto; color: var(--muted); font-size: 12px; line-height: 1.5; }
.overview-card small { margin-top: 7px; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.overview-changes { background: radial-gradient(circle at 8% 0, rgba(170,145,210,.2), transparent 52%), #171A1C; }.overview-changes .ui-icon { color: var(--violet); }
.overview-schedule { background: radial-gradient(circle at 8% 0, rgba(63,175,122,.16), transparent 52%), #171A1C; }.overview-schedule .ui-icon { color: var(--emerald); }
.overview-bells { background: radial-gradient(circle at 8% 0, rgba(214,145,74,.16), transparent 52%), #171A1C; }.overview-bells .ui-icon { color: #D6914A; }
.screen#intro > .capabilities-section, .screen#intro > .social-section, .screen#intro > .intro-capabilities, .screen#intro > .quick-grid, .screen#intro > .home-telegram-grid { display: none; }
.screen#intro > .screen-heading { margin-bottom: 28px; }
.side-nav a.active { color: var(--violet-light); background: transparent; }
.side-nav a.active span { color: var(--violet-light); background: transparent; }
.side-nav a.active:after { display: none; }
.mobile-nav a.active { color: var(--violet-light) !important; background: transparent !important; }
.mobile-nav-indicator { border-radius: var(--radius-surface); background: radial-gradient(circle at 50% 0, rgba(191,169,224,.34), transparent 72%), rgba(170,145,210,.16) !important; box-shadow: none; }
.change-row, .status-capsule, .notification-toggle, .schedule-toolbar select, .day-tab, .week-control, .bell-card { border: 0; border-radius: var(--radius-surface); }
@media (max-width: 760px) { .overview-grid { grid-template-columns: 1fr; gap: 12px; } .overview-card { min-height: 212px; padding: 20px; } .overview-card .ui-icon { margin-bottom: 18px; } }

/* Final visual tuning for the changes surface and document viewer. */
.changes-status { min-height: 36px; gap: 10px; }
.notification-toggle { min-height: 36px; gap: 8px; font-size: 11px; }
.latest-change { border-color: rgba(158, 194, 255, .45); background: linear-gradient(118deg, #174d74 0%, #344f96 45%, #73466f 100%); }
.latest-change::after { width: 310px; height: 230px; right: -72px; bottom: -88px; border-radius: 0; background: linear-gradient(135deg, rgba(255, 190, 118, .2), rgba(255, 255, 255, .04)); clip-path: polygon(28% 0, 100% 18%, 82% 100%, 0 74%); }
.latest-change::before { width: 48%; left: -18%; background: linear-gradient(100deg, transparent, rgba(137, 224, 255, .15), transparent); clip-path: polygon(42% 0, 100% 0, 58% 100%, 0 100%); transform: rotate(17deg); }
.document-dialog.is-closing { animation: document-close 140ms var(--ease-out) both; }
@keyframes document-close { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(.99); } }

@media (hover: hover) and (pointer: fine) {
  .side-nav a:hover { color: var(--ink); background: rgba(255, 255, 255, .06); transform: translateX(2px); }
  .settings-button:hover { color: var(--ink); background: rgba(255, 255, 255, .07); }
  .intro-action:hover { transform: translateY(-1px); }
  .change-row:hover { background: rgba(0, 113, 227, .055); }
  .viewer-action:hover { color: var(--ink); background: var(--surface-solid); }
}

button:focus-visible, a:focus-visible, select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.viewer-header > button, .viewer-action { transition: background 160ms ease, color 160ms ease, transform 120ms var(--ease-out); }
.viewer-header > button:active, .viewer-action:active { transform: scale(.97); }
.document-pages figcaption { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  button:active, a:active, .viewer-header > button:active, .viewer-action:active { transform: none; }
}
@media (max-width: 430px) { .app-main { padding-inline: 11px; } .screen { padding-top: 24px; } .screen h2 { font-size: 34px; } .screen#intro > .screen-heading { margin-bottom: 24px; } .welcome-card { min-height: 270px; padding: 24px; } .welcome-card h2 { font-size: clamp(38px, 12vw, 52px); } .welcome-card p { max-width: 270px; font-size: 13px; } .schedule-toolbar { grid-template-columns: 1fr; } .week-control button { font-size: 11px; } .change-row { min-height: 84px; padding: 12px 14px; grid-template-columns: 45px minmax(0, 1fr) 28px; gap: 11px; } .lesson { padding: 16px; } .zoom-controls output { display: none; } .bells-overview { align-items: flex-start; gap: 10px; } .bells-overview > div { flex: 1 1 calc(100% - 30px); } .bells-overview > time { flex-basis: 100%; margin-left: 20px; } .bell-card { grid-template-columns: 52px minmax(0, 1fr); } .bell-order b { font-size: 18px; } .bell-content > header { display: grid; gap: 7px; } .bell-content > header > time { font-size: 15px; } }

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) { .sidebar, .app-header, .mobile-nav { background: var(--surface-solid); } }
@media (hover: none) {
  .side-nav a:hover { color: var(--muted); background: transparent; transform: none; }
  .side-nav a.active:hover { color: var(--blue); background: var(--blue-soft); }
  .settings-button:hover { color: var(--muted); background: transparent; transform: none; }
  .intro-action:hover { transform: none; }
  .change-row:hover { background: transparent; }
  .viewer-action:hover { color: var(--blue); background: var(--surface-muted); }
}
@media (prefers-reduced-transparency: reduce) { .sidebar, .app-header, .mobile-nav, .viewer-header { background: var(--surface-solid); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-contrast: more) { :root { --line: rgba(29, 29, 31, .35); --line-strong: rgba(29, 29, 31, .55); } .side-nav a.active, .day-tab.active { border: 1px solid currentColor; } }
@media (prefers-contrast: more) { html { --line: rgba(255, 255, 255, .35); --line-strong: rgba(255, 255, 255, .55); } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .screen, .bells-overview.is-live .bells-live-dot { animation: none !important; } }

/* Neutral Apple-style materials for the working sections. */
#schedule { --green: #c7ced8; --green-soft: rgba(199, 206, 216, .14); --green-dark: #111318; }
#schedule .schedule-toolbar select { height: 52px; border-radius: var(--radius-pill); border-color: rgba(199, 206, 216, .18); background: linear-gradient(135deg, #090b0e 0%, #2b3039 58%, #111318 100%); box-shadow: none; color: var(--ink); }
#schedule .week-control { margin-top: 25px; margin-bottom: 13px; padding: 4px; border: 1px solid rgba(199, 206, 216, .16); background: linear-gradient(135deg, #20242b 0%, #08090b 100%); box-shadow: none; }
#schedule .week-control button { min-height: 38px; border-radius: var(--radius-pill); color: var(--muted); }
#schedule .week-control button.active { color: #111318; background: transparent; font-weight: 600; }
#schedule .week-slider { height: calc(100% - 8px); top: 4px; background: linear-gradient(135deg, #f1f3f5, #9da5b0); }
#schedule .week-control button .week-mark { color: #c7ced8; }
#schedule .week-control button.active .week-mark { border-color: rgba(17, 19, 24, .2); color: #111318; background: rgba(17, 19, 24, .1); }
#schedule .day-tab { border-radius: var(--radius-pill); border-color: rgba(199, 206, 216, .13); background: linear-gradient(135deg, #090b0e 0%, #2b3039 58%, #111318 100%); color: var(--muted); box-shadow: none; transition: all .18s var(--ease-out); }
#schedule .day-tab.active { border-color: rgba(235, 238, 242, .48); color: #111318; background: linear-gradient(135deg, #f1f3f5, #9da5b0); font-weight: 600; }
#schedule .lesson { border-color: rgba(199, 206, 216, .14); background: linear-gradient(135deg, #090b0e 0%, #2b3039 58%, #111318 100%); border-radius: var(--radius-surface); box-shadow: none; }
#schedule .lesson-number { border-radius: var(--radius-pill); color: #111318; background: linear-gradient(135deg, #eef1f4, #929ba7); font-size: 13px; font-weight: 700; }
#schedule .lesson-side time { color: var(--green); }
#schedule .lesson-content em { border-radius: var(--radius-pill); color: #111318; background: linear-gradient(135deg, rgba(235, 238, 242, .86), rgba(137, 146, 158, .7)); font-size: 9px; font-weight: 600; }
#schedule .lesson-side { border-color: rgba(199, 206, 216, .12); }
#schedule .lesson-content b { color: var(--ink); }
#schedule .lesson-content small { color: var(--muted); }
#schedule .lesson-content.is-empty b { color: var(--dim); }
.mobile-nav a[data-screen="schedule"].active { color: #8fc8af; background: radial-gradient(circle at 50% 0, rgba(96, 168, 138, .3), transparent 72%), rgba(96, 168, 138, .15); box-shadow: none; }

@media (hover: hover) and (pointer: fine) {
  #schedule .day-tab:hover { border-color: rgba(199, 206, 216, .32); background: rgba(199, 206, 216, .08); }
  #schedule .schedule-toolbar select:hover { border-color: rgba(199, 206, 216, .38); }
}

/* Legacy overview flow replaced by capabilities/social presentation. */
/*
.screen#intro .quick-grid { grid-template-columns: 1fr; gap: 0; margin-top: 42px; }
.screen#intro .quick-grid article { min-height: 430px; padding: 72px 8px; display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(300px, .82fr); align-items: center; gap: clamp(24px, 5vw, 72px); border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; animation: feature-crossfade 240ms var(--ease-out) both; }
.screen#intro .quick-grid article:last-child { border-bottom: 1px solid var(--line); }
.screen#intro .quick-grid article .feature-index { position: static; align-self: start; margin: 7px 0 0; color: var(--blue); font-size: 13px; line-height: 1; letter-spacing: 0; opacity: 1; }
.screen#intro .quick-grid article .feature-copy { min-width: 0; padding-left: 0; }
.screen#intro .quick-grid article .feature-copy .quick-icon { width: 30px; height: 30px; margin-bottom: 26px; border-radius: 0; background: transparent; }
.screen#intro .quick-grid article .feature-copy .quick-icon .ui-icon { width: 27px; height: 27px; }
.screen#intro .quick-grid article .feature-copy b { max-width: 13ch; margin: 0; font-size: clamp(38px, 4.4vw, 62px); line-height: 1; letter-spacing: -.04em; }
.screen#intro .quick-grid article .feature-copy small { max-width: 42ch; margin-top: 20px; font-size: 14px; line-height: 1.65; }
.screen#intro .quick-grid article .feature-preview { min-width: 0; min-height: 240px; padding: 28px 0 28px clamp(24px, 4vw, 48px); border: 0; border-left: 1px solid var(--line-strong); border-radius: 0; background: transparent; box-shadow: none; }
.screen#intro #feature-schedule .feature-copy { grid-column: 3; }
.screen#intro #feature-schedule .feature-preview { grid-column: 2; grid-row: 1; padding: 28px clamp(24px, 4vw, 48px) 28px 0; border-right: 1px solid var(--line-strong); border-left: 0; }
.screen#intro .home-telegram-grid { grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); gap: 0; margin-top: 88px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.screen#intro .channel-panel, .screen#intro .bot-card { min-height: 0; padding: 48px clamp(32px, 5vw, 64px) 48px 8px; border: 0; border-radius: 0; background: transparent; }
.screen#intro .bot-card { padding-left: clamp(32px, 5vw, 56px); border-left: 1px solid var(--line); align-items: flex-start; }
.screen#intro .bot-card .bot-profile { display: grid; }
.screen#intro .bot-card > .tg-open-button { min-height: 42px; margin-top: 20px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-surface); color: var(--ink); background: transparent; font-size: 12px; }
.screen#intro .tg-bubble { border: 0; border-left: 2px solid var(--blue); border-radius: 0; background: transparent; }

@media (max-width: 760px) {
  .screen#intro .quick-grid article,
  .screen#intro #feature-schedule .feature-preview { min-height: 0; display: block; padding: 48px 4px; border: 0; border-top: 1px solid var(--line); }
  .screen#intro .quick-grid article:last-child { border-bottom: 1px solid var(--line); }
  .screen#intro .quick-grid article .feature-index { display: block; margin: 0 0 30px; font-size: 12px; }
  .screen#intro .quick-grid article .feature-copy b { max-width: 15ch; font-size: 34px; }
  .screen#intro .quick-grid article .feature-preview { min-height: 190px; margin-top: 34px; padding: 24px 0 0; border: 0; border-top: 1px solid var(--line-strong); }
  .screen#intro .home-telegram-grid { grid-template-columns: 1fr; margin-top: 64px; }
  .screen#intro .channel-panel, .screen#intro .bot-card { padding: 40px 4px; border: 0; }
  .screen#intro .bot-card { border-top: 1px solid var(--line); }
}

*/
/* Document viewer: stable chrome above the scrollable image layer. */
.capabilities-section { margin-top: 86px; }
.screen#intro > .intro-capabilities, .screen#intro > .quick-grid, .screen#intro > .home-telegram-grid { display: none; }
.capabilities-section h3, .social-section h3 { color: var(--ink); font-weight: 700; line-height: 1.02; letter-spacing: -.04em; }
.capabilities-section h3 { max-width: 680px; margin: 0 0 48px; font-size: clamp(34px, 5vw, 62px); letter-spacing: -.045em; }
.capabilities-section h3 em, .social-section h3 em { color: var(--muted); font-style: normal; }
.feature-showcase { display: grid; gap: 20px; }
.showcase-card { --accent: #83adff; --accent-soft: rgba(83, 137, 255, .2); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; min-height: 420px; padding: 56px 48px; position: relative; overflow: hidden; border: 1px solid rgba(178, 199, 255, .18); border-radius: var(--radius-surface); animation: feature-crossfade 240ms var(--ease-out) both; }
.showcase-card:nth-child(2) { --accent: #65d49b; --accent-soft: rgba(101, 212, 155, .17); animation-delay: .06s; }
.showcase-card:nth-child(3) { --accent: #ffb76a; --accent-soft: rgba(255, 183, 106, .17); animation-delay: .12s; }
.showcase-changes { background: linear-gradient(145deg, rgba(30, 50, 90, .9), rgba(18, 24, 40, .97)); }
.showcase-schedule { background: linear-gradient(145deg, rgba(70, 64, 48, .9), rgba(30, 28, 24, .97)); }
.showcase-bells { background: linear-gradient(145deg, rgba(75, 55, 27, .9), rgba(28, 25, 28, .97)); }
.showcase-content, .showcase-visual { position: relative; z-index: 1; }
.showcase-number { display: block; margin-bottom: 20px; color: var(--accent); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.showcase-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 28px; border-radius: var(--radius-surface); color: var(--accent); background: var(--accent-soft); }
.showcase-icon .ui-icon { width: 24px; height: 24px; }
.showcase-content b { display: block; max-width: 14ch; color: var(--ink); font-size: clamp(30px, 4vw, 52px); line-height: 1; letter-spacing: -.04em; font-weight: 700; }
.showcase-content small { display: block; max-width: 36ch; margin-top: 18px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.showcase-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 10px 18px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-pill); color: #fff; background: rgba(255, 255, 255, .08); font-size: 12px; font-weight: 600; text-decoration: none; transition: background .18s ease, transform .18s ease; }
.showcase-link:hover { background: rgba(255, 255, 255, .15); transform: translateY(-1px); }
.showcase-link .ui-icon { width: 14px; height: 14px; }
.showcase-mockup { padding: 20px; border: 1px solid rgba(178, 199, 255, .15); border-radius: var(--radius-surface); background: rgba(12, 16, 28, .6); backdrop-filter: blur(8px); box-shadow: none; }
.mockup-status { display: flex; align-items: center; gap: 8px; width: fit-content; margin-bottom: 16px; padding: 6px 12px; border-radius: var(--radius-pill); color: #65d49b; background: rgba(101, 212, 155, .12); font-size: 11px; font-weight: 600; animation: subtle-float 4s ease-in-out infinite; }
.mockup-dot { width: 7px; height: 7px; border-radius: 50%; }.mockup-dot-green { background: #65d49b; }
.mockup-card { padding: 18px; border: 1px solid rgba(178, 199, 255, .1); border-radius: var(--radius-surface); background: rgba(255, 255, 255, .04); }
.mockup-card-header { margin-bottom: 10px; color: #83adff; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }.mockup-card-title { margin-bottom: 14px; color: var(--ink); font-size: 15px; font-weight: 600; }.mockup-card-line { display: flex; gap: 8px; }.mockup-card-line span { height: 6px; flex: 1; border-radius: var(--radius-surface); background: rgba(255, 255, 255, .08); }.mockup-card-line span:first-child { flex: 2; }
.mockup-tabs { display: flex; gap: 6px; margin-bottom: 18px; }.mockup-tab { padding: 6px 12px; border-radius: var(--radius-pill); color: var(--muted); background: rgba(255, 255, 255, .05); font-size: 11px; font-weight: 500; }.mockup-tab.active { color: #101116; background: #65d49b; }
.mockup-lesson { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(178, 199, 255, .08); }.mockup-lesson:first-of-type { border-top: 0; }.mockup-time { min-width: 36px; color: #65d49b; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }.mockup-lesson-info { display: grid; gap: 3px; }.mockup-lesson-info b { color: var(--ink); font-size: 13px; font-weight: 600; }.mockup-lesson-info small { margin: 0; color: var(--muted); font-size: 10px; }.mockup-lesson.dim { opacity: .45; }
.mockup-bell-now { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }.mockup-bell-dot { width: 9px; height: 9px; border-radius: 50%; background: #65d49b; box-shadow: none; animation: live-pulse 2.2s ease-in-out infinite; }.mockup-bell-now small { color: var(--muted); font-size: 10px; }.mockup-bell-now b { color: var(--ink); font-size: 18px; font-weight: 600; }.mockup-bell-now b small { color: var(--muted); font-size: 12px; font-weight: 400; }.mockup-bell-time { margin-left: auto; color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }.mockup-bell-progress { height: 4px; margin-bottom: 14px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .1); }.mockup-bell-progress span { display: block; height: 100%; border-radius: inherit; background: #ffb76a; }.mockup-bell-next { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; }.mockup-bell-label { padding: 3px 8px; border-radius: var(--radius-surface); color: #ffb76a; background: rgba(255, 183, 106, .12); font-size: 9px; font-weight: 700; text-transform: uppercase; }
@keyframes subtle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.social-section { margin-top: 88px; }.social-section h3 { max-width: 520px; margin: 0 0 16px; font-size: clamp(34px, 5vw, 56px); }.social-description { max-width: 480px; margin: 0 0 42px; color: var(--muted); font-size: 14px; line-height: 1.6; }.social-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }.social-card { display: flex; flex-direction: column; padding: 28px; border: 1px solid rgba(178, 199, 255, .16); border-radius: var(--radius-surface); background: linear-gradient(155deg, rgba(22, 30, 48, .9), rgba(16, 22, 36, .97)); box-shadow: none; animation: feature-crossfade 280ms var(--ease-out) both; }.social-bot { animation-delay: .08s; }
.social-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }.social-avatar { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-surface); }.social-avatar img { width: 100%; height: 100%; object-fit: cover; }.social-avatar-fallback, .social-bot-avatar { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #2d4e86, #1a3060); font-size: 13px; font-weight: 700; }.social-card-header h4 { margin: 0; color: var(--ink); font-size: 15px; font-weight: 600; }.social-card-header span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.telegram-posts { flex: 1; min-height: 0; max-height: 240px; position: relative; display: grid; align-content: start; gap: 10px; overflow: hidden; }.telegram-posts:after { content: ""; height: 48px; position: absolute; inset: auto 0 0; z-index: 1; background: linear-gradient(transparent, rgba(16, 22, 36, .97)); pointer-events: none; }.social-bot-desc { margin-bottom: 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }.social-bot-features { display: grid; gap: 10px; margin-bottom: 22px; }.social-feature { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid rgba(178, 199, 255, .08); border-radius: var(--radius-surface); color: var(--ink-soft); background: rgba(255, 255, 255, .04); font-size: 12px; }.social-feature .ui-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--blue); }
.social-cta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: auto; padding: 0 18px; border-radius: var(--radius-surface); color: #fff; background: var(--blue); font-size: 12px; font-weight: 600; text-decoration: none; transition: filter .18s ease, transform .18s ease; }.social-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }.social-cta .ui-icon { width: 16px; height: 16px; }.social-cta-arrow { width: 12px !important; height: 12px !important; opacity: .6; }.social-cta-outline { border: 1px solid rgba(178, 199, 255, .24); color: var(--ink); background: transparent; }.social-cta-outline:hover { background: rgba(255, 255, 255, .06); filter: none; }
@media (max-width: 760px) { .capabilities-section, .social-section { margin-top: 64px; }.showcase-card { grid-template-columns: 1fr; min-height: 0; padding: 40px 24px; }.showcase-visual { margin-top: 24px; }.social-grid { grid-template-columns: 1fr; }.social-card { padding: 24px; } }
.viewer-panel { width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: inherit; background: var(--surface-solid); }
.viewer-header { position: relative; z-index: 10; isolation: isolate; flex: 0 0 auto; flex-wrap: nowrap; padding: 10px 12px; }
.viewer-header > div:nth-child(2) { display: flex; flex-direction: row; }
.viewer-title { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.viewer-title span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.viewer-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.viewer-action { min-width: 0; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink); background: var(--surface-muted); font-size: 12px; font-weight: 600; }
.viewer-action span { margin: 0; color: inherit; font-size: inherit; }
.viewer-close { width: 38px !important; height: 38px !important; margin-left: 2px; flex: 0 0 38px; border-radius: 50% !important; }
.viewer-close .ui-icon { width: 17px; height: 17px; }
.document-viewport { position: relative; z-index: 0; min-height: 0; overflow: auto; background: var(--bg); }

.screen#changes { width: min(100%, 720px); margin-inline: auto; }
.screen#changes .screen-heading { margin-bottom: 32px; }
.screen#changes .screen-heading h2 { display: inline-flex; align-items: center; gap: 9px; }
.changes-count { min-width: 25px; height: 25px; padding: 0 7px; display: inline-grid; place-items: center; border: 1px solid rgba(131, 173, 255, .28); border-radius: var(--radius-pill); color: var(--blue); background: rgba(83, 137, 255, .13); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.changes-status { min-height: 36px; margin: -17px 8px 24px; position: relative; z-index: 40; overflow: visible; display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: 11px; }
.status-capsule { min-height: 36px; padding: 4px 10px 4px 5px; position: relative; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--status-blue); border-radius: var(--radius-pill); color: #dce8ff; background: var(--status-idle); box-shadow: none; }
.status-capsule::after { display: none; }
.status-label, .status-time { position: relative; }
.status-label::after, .status-time::after { content: attr(data-detail); width: max-content; max-width: min(330px, calc(100vw - 32px)); padding: 9px 11px; position: absolute; left: var(--tooltip-left, 0px); top: var(--tooltip-top, calc(100% + 9px)); z-index: 1000; border: 1px solid var(--line-strong); border-radius: var(--radius-surface); color: var(--ink-soft); background: rgba(24, 21, 19, .97); box-shadow: none; backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); font-size: 11px; line-height: 1.4; opacity: 0; pointer-events: none; transform: translateY(-3px); transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .status-label:hover::after, .status-time:hover::after { opacity: 1; transform: none; } }
.status-label.is-tooltip-open::after, .status-time.is-tooltip-open::after { opacity: 1; transform: none; }
.status-capsule time { min-height: 24px; margin: 0; padding: 0 8px; display: inline-flex; align-items: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--radius-pill); color: #e8eeff; background: rgba(255, 255, 255, .12); font-size: 10px; font-variant-numeric: tabular-nums; }
.status-capsule time:empty { display: none; }
.notification-toggle { min-height: 36px; margin-left: auto; padding: 0 10px 0 11px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255, 183, 106, .32); border-radius: var(--radius-pill); color: #ffd39a; background: linear-gradient(135deg, rgba(100, 60, 42, .94), rgba(48, 39, 65, .96)); box-shadow: none; font-size: 11px; font-weight: 600; transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), background 160ms var(--ease-out), transform 120ms var(--ease-out); }
.notification-toggle .ui-icon { width: 14px; height: 14px; }
.notification-toggle > i { width: 25px; height: 15px; position: relative; display: block; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .16); }
.notification-toggle > i::after { content: ""; width: 11px; height: 11px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: var(--muted); transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out); }
.notification-toggle.is-enabled { border-color: rgba(111, 225, 181, .62); color: #effff7; background: linear-gradient(135deg, #187c68, #2564a8); box-shadow: none; }
.notification-toggle.is-enabled > i { background: rgba(255, 255, 255, .3); }
.notification-toggle.is-enabled > i::after { background: #fff; transform: translateX(10px); }
.notification-toggle.is-disabled > i::after { background: #ffb76a; }
.status-icon { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; color: #fff; background: var(--status-icon-idle); box-shadow: none; }
.status-icon .ui-icon { width: 14px; height: 14px; transform-origin: center; }
.changes-status.is-running .status-icon { color: #fff; }
.status-capsule.is-running { border-color: rgba(131, 173, 255, .5); background: linear-gradient(110deg, rgba(40, 53, 91, .94), rgba(55, 76, 128, .94)); }
.status-capsule:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.status-capsule.is-running .status-icon .ui-icon { animation: status-icon-spin 1.1s linear infinite; }
@keyframes status-icon-spin { to { transform: rotate(360deg); } }
.status-capsule.is-running { border-color: rgba(131, 173, 255, .64); background: linear-gradient(110deg, rgba(38, 48, 82, .98), rgba(58, 83, 143, .98)); }
.changes-status.is-running .status-icon { box-shadow: none; }
.changes-status.is-error .status-icon, .changes-status.is-unavailable .status-icon { color: #ff9d9d; }
.status-capsule:not(.is-idle):not(.is-running):not(.is-error):not(.is-unavailable) { border-color: rgba(101, 212, 155, .44); background: linear-gradient(135deg, rgba(25, 111, 91, .95), rgba(31, 67, 104, .95)); }
.status-capsule:not(.is-idle):not(.is-running):not(.is-error):not(.is-unavailable) .status-icon { background: linear-gradient(135deg, #55d99c, #2588a7); }
.status-capsule.is-error, .status-capsule.is-unavailable { border-color: rgba(180, 160, 230, .38); background: linear-gradient(135deg, rgba(72, 57, 104, .96), rgba(48, 49, 88, .96)); }
.status-capsule.is-error .status-icon, .status-capsule.is-unavailable .status-icon { color: #e5d9ff; background: linear-gradient(135deg, #8064bc, #5367a9); }
.latest-change { min-width: 0; min-height: 210px; margin: 0 8px 40px; padding: 26px; position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(158, 194, 255, .45); border-radius: var(--radius-surface); color: var(--ink); background: linear-gradient(118deg, #174d74 0%, #344f96 45%, #73466f 100%); box-shadow: none; }
.latest-change[hidden] { display: none; }
.latest-change::after, .latest-change::before { display: none; }
.latest-change-decor { width: 118px; height: 118px; position: absolute; right: 24px; top: 28px; display: grid; place-items: center; border: 1px solid rgba(178, 199, 255, .16); border-radius: var(--radius-surface); color: rgba(178, 199, 255, .2); background: rgba(255, 255, 255, .035); transform: rotate(12deg); }
.latest-change-decor .ui-icon { width: 54px; height: 54px; opacity: .62; filter: blur(.7px); transform: rotate(-12deg); stroke-width: 1.2; }
.latest-change.is-new { border-color: rgba(158, 194, 255, .32); background: linear-gradient(132deg, #202a3a 0%, #263246 52%, #1a2232 100%); animation: notice-in 240ms var(--ease-out) both; }
.latest-change > header, .latest-change > footer { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.latest-change > header span { color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.latest-change.is-new > header span { color: #8ff0c4; }
.latest-change > header time { margin-left: auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.latest-change h3 { max-width: 24ch; margin: 24px 0 28px; position: relative; z-index: 1; color: var(--ink); font-size: clamp(22px, 4vw, 30px); line-height: 1.08; letter-spacing: -.025em; }
.latest-change > footer { margin-top: auto; }
.latest-change > footer > span { color: var(--muted); font-size: 11px; }
.latest-change > footer > span:empty { display: none; }
.latest-week { padding: 5px 8px; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius-pill); color: #e9efff !important; background: rgba(255, 255, 255, .11); font-size: 10px !important; font-weight: 600; }
.latest-week-current { background: rgba(111, 225, 181, .14); border-color: rgba(111, 225, 181, .3); }
.latest-week[hidden] { display: none; }
.latest-change > footer button { min-height: 46px; margin-left: auto; padding: 0 18px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255, 255, 255, .24); border-radius: var(--radius-pill); color: #fff; background: rgba(255, 255, 255, .15); font-size: 12px; font-weight: 600; box-shadow: none; transition: background 160ms var(--ease-out), transform 160ms var(--ease-out); }
.latest-change > footer button:hover { background: rgba(255, 255, 255, .24); transform: translateY(-2px); }
.latest-change > footer button .ui-icon { width: 14px; height: 14px; }
@keyframes notice-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes document-open { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes document-close { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(.99); } }
.changes-history > header { margin: 0 8px 16px; }
.changes-history > header h3 { margin: 0; color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.changes-history[hidden] { display: none; }
.changes-list { display: grid; min-height: 0; align-items: start; align-content: start; gap: 28px; overflow-anchor: none; }
.change-group { display: grid; align-items: start; align-content: start; gap: 9px; }
.change-group > header { min-height: 22px; padding: 7px 8px; position: sticky; top: 78px; z-index: 2; display: flex; align-items: center; color: var(--muted); background: rgba(11, 14, 23, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; font-weight: 600; text-transform: capitalize; }
.change-row { width: calc(100% - 16px); min-height: 68px; margin-inline: 8px; padding: 16px 17px; grid-template-columns: minmax(0, 1fr) auto 24px; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius-surface); background: rgba(24, 31, 49, .76); box-shadow: none; transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), background-color 160ms var(--ease-out), transform 120ms var(--ease-out); animation: none; }
.change-row.is-appearing { animation: change-slide-down 320ms var(--ease-out) both; animation-delay: var(--appear-delay, 0ms); }
.change-row.is-disappearing { pointer-events: none; animation: change-slide-up 280ms var(--ease-out) both; animation-delay: var(--disappear-delay, 0ms); }
@keyframes change-slide-down { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes change-slide-up { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-14px); } }
.change-row + .change-row { border-top: 1px solid var(--line); }
.change-row:active { background: var(--blue-soft); }
.change-row .change-main { min-width: 0; }
.change-time { grid-column: 2; color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.change-arrow { width: 24px; height: 24px; grid-column: 3; color: var(--muted); background: transparent; }
.change-arrow .ui-icon { width: 17px; height: 17px; }
.changes-list > .skeleton-row { width: calc(100% - 16px); margin-inline: 8px; }

@media (hover: hover) and (pointer: fine) {
  .change-row:hover { color: var(--blue); border-color: var(--line-strong); background: rgba(131, 173, 255, .06); }
  .viewer-action:hover, .viewer-close:hover { color: var(--ink); background: #313d58; }
}

@media (max-width: 760px) {
  .viewer-panel { height: 100dvh; border-radius: 0; }
  .viewer-header { width: 100%; max-width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 10px 9px; overflow: hidden; }
  .viewer-title { min-width: 0; width: 100%; grid-column: 1; grid-row: 1; align-self: center; }
  .viewer-close { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; border-radius: var(--radius-pill) !important; }
  .viewer-actions { width: 100%; max-width: 100%; min-width: 0; grid-column: 1 / -1; grid-row: 2; margin: 0; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .viewer-action { width: 100%; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: var(--radius-pill); }
  .document-pages { padding-top: 10px; }
  .screen#changes .screen-heading { margin-bottom: 26px; }
  .changes-status { margin: -12px 4px 22px; }
  .latest-change { min-height: 176px; margin: 0 4px 34px; padding: 20px; border-radius: var(--radius-surface); }
  .latest-change h3 { margin-block: 21px 25px; font-size: 24px; }
  .latest-change > footer { align-items: flex-end; }
   .latest-change > footer button { min-height: 44px; padding-inline: 15px; }
  .changes-history > header { margin-inline: 4px; }
  .changes-list { gap: 24px; }
  .change-group { gap: 8px; }
  .change-group > header { padding-inline: 4px; }
   .change-row { width: calc(100% - 8px); min-height: 64px; margin-inline: 4px; padding: 15px 14px; border-radius: var(--radius-surface); }
 }

.empty-state { display: grid; justify-items: center; gap: 8px; }
.empty-state-icon { width: 30px; height: 30px; color: var(--muted); }



/* Premium warm charcoal palette. */
#intro { --blue: #7a5ab5; --blue-soft: rgba(122, 90, 181, .22); }
#changes { --blue: #9a7bd1; --blue-soft: rgba(132, 99, 190, .27); }
#schedule { --blue: #46b285; --blue-soft: rgba(70, 178, 133, .2); --green: #46b285; --green-soft: rgba(70, 178, 133, .2); --green-dark: #14241e; }
#bells { --blue: #c07a4a; --blue-soft: rgba(192, 122, 74, .2); }
.sidebar { border-right-color: rgba(214, 207, 196, .12); background: radial-gradient(circle at 0 0, rgba(93, 72, 81, .17), transparent 48%), rgba(15, 14, 14, .72); backdrop-filter: saturate(125%) blur(28px); -webkit-backdrop-filter: saturate(125%) blur(28px); box-shadow: none; }
.app-header { border-color: rgba(214, 207, 196, .16); background: radial-gradient(circle at 18% 0, rgba(103, 86, 101, .14), transparent 52%), rgba(25, 24, 23, .66); backdrop-filter: saturate(125%) blur(24px); -webkit-backdrop-filter: saturate(125%) blur(24px); box-shadow: none; }
.mobile-nav { border-color: rgba(214, 207, 196, .18); background: radial-gradient(circle at 18% 0, rgba(103, 86, 101, .16), transparent 48%), rgba(22, 21, 20, .74); backdrop-filter: saturate(125%) blur(26px); -webkit-backdrop-filter: saturate(125%) blur(26px); box-shadow: none; }
.mobile-nav a.active { color: #c7b9d8; background: radial-gradient(circle at 50% 0, rgba(124, 108, 160, .28), transparent 72%), rgba(124, 108, 160, .16); box-shadow: none; }
.mobile-nav a[data-screen="schedule"].active { color: #8fc8af; background: radial-gradient(circle at 50% 0, rgba(96, 168, 138, .3), transparent 72%), rgba(96, 168, 138, .15); box-shadow: none; }
.mobile-nav a[data-screen="bells"].active { color: #d6ad8c; background: radial-gradient(circle at 50% 0, rgba(184, 133, 95, .3), transparent 72%), rgba(184, 133, 95, .16); box-shadow: none; }
.welcome-card { border-color: rgba(164, 143, 177, .2); background: radial-gradient(circle at 14% 16%, rgba(93, 72, 116, .46), transparent 48%), radial-gradient(circle at 90% 88%, rgba(50, 69, 94, .36), transparent 55%), rgba(24, 22, 24, .82); backdrop-filter: blur(22px) saturate(120%); -webkit-backdrop-filter: blur(22px) saturate(120%); box-shadow: none; }
.lesson, .bell-card, .showcase-card, .social-card, .feature-preview { border-color: var(--line); backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px) saturate(120%); box-shadow: none; }
.latest-change { border-color: rgba(164, 143, 193, .38); background: radial-gradient(ellipse at 14% 0, rgba(124, 108, 160, .34), transparent 52%), radial-gradient(ellipse at 100% 100%, rgba(79, 66, 108, .25), transparent 58%), linear-gradient(135deg, #292435 0%, #1c1826 100%); box-shadow: none; backdrop-filter: blur(28px) saturate(105%); -webkit-backdrop-filter: blur(28px) saturate(105%); }
.latest-change.is-new { border-color: rgba(82, 181, 132, .42); background: radial-gradient(ellipse at 12% 0, rgba(40, 118, 83, .45), transparent 50%), radial-gradient(ellipse at 100% 100%, rgba(24, 85, 53, .36), transparent 56%), linear-gradient(135deg, #1a3a2e 0%, #0d2818 100%); box-shadow: none; }
.latest-change > header span { color: #d2c1e5; }
.latest-change.is-new > header span { color: #8ff0c4; }
.latest-change-decor { display: none; }
.latest-change > header time, .latest-change > footer > span { color: #9e9389; }
.latest-change h3 { color: #eee8df; }
.latest-change > footer button { border-color: rgba(190, 169, 220, .3); color: #eee7f6; background: rgba(143, 119, 178, .14); box-shadow: none; }
.changes-list { border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#changes .changes-history > header h3 { color: #ddd3e8; }
#changes .change-group > header { color: #b9a8cc; background: rgba(23, 19, 29, .86); }
.change-row { border-color: rgba(155, 127, 191, .25); background: radial-gradient(circle at 0 0, rgba(101, 70, 143, .17), transparent 48%), radial-gradient(circle at 100% 100%, rgba(48, 61, 105, .11), transparent 54%), rgba(22, 19, 28, .9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: none; }
#changes .change-main b { color: #f2edf6; }
#changes .change-time { color: #a9a0b5; }
#changes .change-arrow { color: #a98bd5; }
#changes .show-more-button { border-color: rgba(154, 123, 209, .38); color: #cbb7e8; background: rgba(111, 78, 160, .12); }
#changes .show-more-button:disabled { cursor: default; opacity: .68; }
#schedule .schedule-toolbar select, #schedule .day-tab, #schedule .lesson { border-color: rgba(96, 168, 138, .2); background: radial-gradient(circle at 8% 0, rgba(96, 168, 138, .15), transparent 46%), radial-gradient(circle at 100% 100%, rgba(41, 91, 72, .13), transparent 52%), rgba(20, 28, 25, .84); }
#schedule .schedule-toolbar select, #schedule .day-tab { box-shadow: none; }
#schedule .week-control { border-color: rgba(96, 168, 138, .18); background: radial-gradient(circle at 10% 0, rgba(96, 168, 138, .13), transparent 52%), rgba(16, 24, 21, .86); box-shadow: none; }
#schedule .week-slider { background: radial-gradient(circle at 25% 15%, #9acdb7, #60a88a 58%, #3f7e67); box-shadow: none; }
#schedule .week-control button.active { color: #14241e; }
#schedule .week-control button.active .week-mark { border-color: rgba(20, 36, 30, .2); color: #14241e; background: rgba(20, 36, 30, .1); }
#schedule .day-tab.active { border-color: rgba(142, 202, 176, .5); color: #14241e; background: radial-gradient(circle at 30% 10%, #a2d3bd, #60a88a 72%); box-shadow: none; }
#schedule .lesson { box-shadow: none; }
#schedule .lesson-number, #schedule .lesson-content em { color: #14241e; background: radial-gradient(circle at 30% 18%, #9acdb7, #60a88a 72%); }
#bells .bells-overview { border-color: rgba(184, 133, 95, .18); background: radial-gradient(circle at 8% 0, rgba(184, 133, 95, .17), transparent 46%), radial-gradient(circle at 100% 100%, rgba(89, 68, 85, .14), transparent 54%), rgba(31, 25, 24, .78); backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px) saturate(120%); box-shadow: none; border-radius: var(--radius-surface); }
#bells .bell-card { border-color: rgba(184, 133, 95, .18); background: radial-gradient(circle at 8% 0, rgba(184, 133, 95, .17), transparent 46%), radial-gradient(circle at 100% 100%, rgba(89, 68, 85, .14), transparent 54%), rgba(31, 25, 24, .78); backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px) saturate(120%); box-shadow: none; border-radius: var(--radius-surface); }
#bells .bell-card.is-current { border-color: rgba(91, 160, 132, .32); background: radial-gradient(circle at 8% 0, rgba(74, 140, 116, .2), transparent 48%), rgba(22, 43, 37, .76); }
#bells .bell-card.is-next { border-color: rgba(184, 133, 95, .34); background: radial-gradient(circle at 8% 0, rgba(184, 133, 95, .23), transparent 50%), radial-gradient(circle at 100% 100%, rgba(93, 70, 88, .16), transparent 52%), rgba(43, 30, 26, .8); }
#bells .bell-content > header em, #bells .bell-variant span em { color: #2d1d14; background: radial-gradient(circle at 30% 18%, #d3ad8d, #b8855f 72%); }
.showcase-card { border-color: rgba(214, 207, 196, .16); }
.showcase-card:nth-child(1) { --accent: #5b7eb3; --accent-soft: rgba(91, 126, 179, .2); }
.showcase-card:nth-child(2) { --accent: #b0986a; --accent-soft: rgba(176, 152, 106, .18); }
.showcase-card:nth-child(3) { --accent: #b8855f; --accent-soft: rgba(184, 133, 95, .18); }
.showcase-changes { background: radial-gradient(circle at 8% 6%, rgba(72, 98, 133, .3), transparent 50%), radial-gradient(circle at 92% 92%, rgba(88, 67, 95, .2), transparent 56%), rgba(24, 24, 25, .84); }
.showcase-schedule { background: radial-gradient(circle at 8% 6%, rgba(176, 152, 106, .22), transparent 50%), radial-gradient(circle at 92% 92%, rgba(96, 85, 66, .16), transparent 56%), rgba(25, 24, 22, .86); }
.showcase-bells { background: radial-gradient(circle at 8% 6%, rgba(184, 133, 95, .25), transparent 50%), radial-gradient(circle at 92% 92%, rgba(88, 65, 80, .18), transparent 56%), rgba(32, 25, 25, .86); }
.showcase-mockup { border-color: rgba(214, 207, 196, .14); background: radial-gradient(circle at 10% 0, rgba(91, 93, 108, .11), transparent 48%), rgba(14, 14, 15, .62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: none; }
.social-card { background: radial-gradient(circle at 8% 0, rgba(72, 98, 133, .17), transparent 46%), radial-gradient(circle at 100% 100%, rgba(88, 67, 95, .13), transparent 54%), rgba(24, 23, 23, .78); }
.feature-preview { background: radial-gradient(circle at 8% 0, rgba(72, 98, 133, .2), transparent 46%), radial-gradient(circle at 100% 100%, rgba(88, 67, 95, .13), transparent 54%), rgba(20, 20, 20, .76); }
.bells-preview { background: radial-gradient(circle at 8% 0, rgba(184, 133, 95, .2), transparent 48%), radial-gradient(circle at 100% 100%, rgba(88, 67, 82, .14), transparent 54%), rgba(30, 24, 24, .8); }
.notification-toggle { border-color: rgba(222, 139, 68, .52); color: #ffd8ab; background: radial-gradient(circle at 15% 10%, rgba(218, 123, 48, .48), transparent 58%), radial-gradient(circle at 90% 90%, rgba(123, 66, 82, .3), transparent 62%), rgba(61, 35, 25, .96); box-shadow: none; }
.notification-toggle.is-disabled > i { background: rgba(255, 190, 118, .22); }
.notification-toggle.is-enabled { border-color: rgba(63, 210, 145, .58); color: #e6fff3; background: radial-gradient(circle at 15% 10%, rgba(38, 181, 120, .48), transparent 58%), radial-gradient(circle at 90% 90%, rgba(35, 99, 119, .32), transparent 62%), rgba(13, 66, 47, .96); box-shadow: none; }
.skeleton-row, .post-skeleton { background: linear-gradient(105deg, rgba(70, 66, 63, .34) 18%, rgba(137, 128, 119, .4) 42%, rgba(170, 143, 126, .3) 50%, rgba(70, 66, 63, .34) 72%); background-size: 240% 100%; }
.loading-line { color: transparent; background: linear-gradient(105deg, var(--dim) 20%, #c5b8aa 42%, #9eaeae 50%, var(--dim) 72%); background-size: 240% 100%; background-clip: text; -webkit-background-clip: text; }
.install-button, .mobile-menu, .viewer-header > button, .viewer-action { border-color: var(--line); background: radial-gradient(circle at 25% 0, rgba(119, 111, 105, .18), transparent 70%), var(--surface-muted); box-shadow: none; }
.tg-open-button, .social-cta { background: radial-gradient(circle at 20% 0, #8b7da8, #6f638b 58%, #5f5871); box-shadow: none; }
.brand-mark { color: #f1ede6; background: radial-gradient(circle at 25% 18%, #a494b2, #786b83 58%, #5e5660); box-shadow: none; }
.document-dialog, .viewer-panel { border-color: var(--line-strong); background: radial-gradient(circle at 8% 0, rgba(93, 72, 81, .12), transparent 44%), var(--surface-solid); box-shadow: none; }
.viewer-header { border-color: var(--line); background: radial-gradient(circle at 15% 0, rgba(103, 86, 101, .12), transparent 52%), rgba(25, 24, 23, .76); backdrop-filter: saturate(125%) blur(24px); -webkit-backdrop-filter: saturate(125%) blur(24px); }
.document-viewport { background: radial-gradient(circle at 20% 0, rgba(84, 69, 83, .1), transparent 44%), var(--bg); }
.styled-table-section, .styled-page { border-color: var(--line); background: radial-gradient(circle at 8% 0, rgba(72, 98, 133, .13), transparent 48%), rgba(25, 24, 23, .82); box-shadow: none; }
.tg-bubble { border-color: rgba(91, 126, 179, .17); background: radial-gradient(circle at 0 0, rgba(72, 98, 133, .12), transparent 48%), rgba(19, 19, 19, .66); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
@media (hover: hover) and (pointer: fine) { .side-nav a:hover, .settings-button:hover { background: rgba(214, 207, 196, .07); box-shadow: none; } #changes .change-row:hover { border-color: rgba(174, 139, 219, .46); background: radial-gradient(circle at 0 0, rgba(117, 77, 169, .24), transparent 48%), rgba(29, 23, 37, .94); box-shadow: none; } #schedule .day-tab:hover { border-color: rgba(96, 168, 138, .34); background: rgba(96, 168, 138, .1); } #schedule .day-tab.active:hover { color: #14241e; background: radial-gradient(circle at 30% 10%, #a2d3bd, #60a88a 72%); } .showcase-link:hover, .latest-change > footer button:hover, .social-cta-outline:hover { background: rgba(214, 207, 196, .11); box-shadow: none; } }

.side-nav a, .eyebrow, .preview-caption, .mockup-card-header, .social-card-header h4 { letter-spacing: .06em; text-transform: uppercase; font-weight: 600; font-size: 10px; }
.screen h2, .welcome-card h2, .intro-capabilities h3, .capabilities-section h3, .social-section h3 { letter-spacing: -.03em; font-weight: 650; }
.latest-change h3, .showcase-content b, .feature-copy b, .quick-grid b { letter-spacing: -.025em; font-weight: 650; }
.change-main b, .lesson-content b, .bell-content > header time { font-weight: 550; letter-spacing: -.01em; }
.status-capsule { border-color: rgba(112, 137, 173, .42); background: radial-gradient(circle at 18% 12%, rgba(78, 107, 148, .35), transparent 58%), rgba(27, 33, 42, .98); box-shadow: none; backdrop-filter: blur(14px); color: #c8d1dc; }
.status-capsule.is-running { border-color: rgba(222, 151, 65, .62); background: radial-gradient(circle at 18% 12%, rgba(219, 137, 44, .52), transparent 58%), radial-gradient(circle at 88% 88%, rgba(139, 70, 24, .38), transparent 60%), rgba(65, 37, 18, .98); color: #f1d0a5; }
.status-capsule:not(.is-idle):not(.is-running):not(.is-error):not(.is-unavailable) { border-color: rgba(55, 202, 137, .58); background: radial-gradient(circle at 18% 12%, rgba(36, 177, 112, .5), transparent 58%), radial-gradient(circle at 88% 88%, rgba(14, 112, 67, .4), transparent 60%), rgba(10, 61, 39, .98); color: #dcf8e9; }
.status-capsule.is-error, .status-capsule.is-unavailable { border-color: rgba(184, 78, 111, .52); background: radial-gradient(circle at 18% 12%, rgba(151, 48, 82, .46), transparent 58%), radial-gradient(circle at 88% 88%, rgba(105, 31, 55, .3), transparent 60%), rgba(62, 23, 37, .98); color: #f3c8d4; }
.status-icon { background: radial-gradient(circle at 30% 20%, #8297b1, #566575 78%); }
.status-capsule.is-running .status-icon { color: #fff8ed; background: radial-gradient(circle at 30% 20%, #e4ad68, #a7612f 78%); box-shadow: none; }
.status-capsule:not(.is-idle):not(.is-running):not(.is-error):not(.is-unavailable) .status-icon { color: #f2fff8; background: radial-gradient(circle at 30% 20%, #65dca6, #237451 78%); box-shadow: none; }
.status-capsule.is-error .status-icon, .status-capsule.is-unavailable .status-icon { color: #ffe8ef; background: radial-gradient(circle at 30% 20%, #c56b89, #792f4a 78%); box-shadow: none; }

/* Keep the active visual theme neutral and avoid the legacy violet overrides above. */
#intro, #changes { --blue: #9bb6c7; --blue-soft: rgba(155, 182, 199, .16); }
.welcome-card { border-color: rgba(155, 182, 199, .2); background: radial-gradient(circle at 14% 16%, rgba(104, 132, 150, .34), transparent 48%), radial-gradient(circle at 90% 88%, rgba(50, 69, 94, .3), transparent 55%), rgba(24, 25, 27, .88); }
.latest-change { border-color: rgba(155, 182, 199, .38); background: linear-gradient(135deg, #25343d 0%, #293a46 52%, #202b34 100%); }
#changes .change-group > header { color: #b7c8d1; background: rgba(22, 28, 32, .86); }
.change-row { border-color: rgba(155, 182, 199, .24); background: radial-gradient(circle at 0 0, rgba(86, 119, 137, .17), transparent 48%), rgba(22, 27, 30, .9); }
#changes .changes-history > header h3, #changes .change-main b { color: #e4edf0; }
#changes .change-time { color: #a9bbc3; }
#changes .change-arrow { color: #9bb6c7; }
#changes .show-more-button { border-color: rgba(155, 182, 199, .38); color: #c4d7df; background: rgba(86, 119, 137, .14); }
.tg-open-button, .social-cta { background: linear-gradient(135deg, #6f8997, #506875); }
.mobile-nav a.active { color: #b7c8d1; background: rgba(86, 119, 137, .18); box-shadow: none; }
.status-capsule { border-color: rgba(155, 182, 199, .42); background: radial-gradient(circle at 18% 12%, rgba(78, 107, 125, .35), transparent 58%), rgba(27, 33, 42, .98); color: #c8d1dc; }
.status-capsule.is-running { border-color: rgba(155, 182, 199, .62); background: radial-gradient(circle at 18% 12%, rgba(104, 132, 150, .45), transparent 58%), rgba(35, 54, 65, .98); color: #d9e7ec; }
.status-capsule.is-error, .status-capsule.is-unavailable { border-color: rgba(197, 107, 137, .52); background: radial-gradient(circle at 18% 12%, rgba(151, 48, 82, .36), transparent 58%), rgba(62, 23, 37, .98); }
.notification-toggle { border-color: rgba(155, 182, 199, .42); color: #c8d7de; background: radial-gradient(circle at 15% 10%, rgba(104, 132, 150, .34), transparent 58%), rgba(35, 45, 51, .96); }
.notification-toggle.is-disabled > i { background: rgba(155, 182, 199, .22); }
.notification-toggle.is-enabled { border-color: rgba(101, 212, 155, .58); color: #e6fff3; background: radial-gradient(circle at 15% 10%, rgba(38, 181, 120, .42), transparent 58%), rgba(13, 66, 47, .96); }
.brand-mark { background: radial-gradient(circle at 25% 18%, #9bb6c7, #647b87 58%, #4c5960); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  #changes .change-row:hover { border-color: rgba(180, 211, 222, .46); background: rgba(86, 119, 137, .22); box-shadow: none; }
}

/* Unified premium graphite and emerald visual system. */
:root {
  --bg: #0b0c0d;
  --surface: rgba(17, 19, 21, .84);
  --surface-solid: #111315;
  --surface-muted: rgba(255, 255, 255, .055);
  --ink: #f2f0ea;
  --ink-soft: #d7d7d1;
  --muted: #a7aaa7;
  --dim: #666b69;
  --line: rgba(242, 240, 234, .11);
  --line-strong: rgba(242, 240, 234, .19);
  --emerald: #3faf7a;
  --emerald-light: #8ad8ae;
  --emerald-dark: #2d805c;
  --blue: var(--emerald);
  --blue-soft: rgba(63, 175, 122, .14);
  --shadow: 0 16px 42px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .035);
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 9px;
}

body {
  background: radial-gradient(ellipse at 18% -10%, rgba(63, 175, 122, .075), transparent 42%), radial-gradient(ellipse at 92% 42%, rgba(93, 105, 99, .045), transparent 45%), var(--bg);
  letter-spacing: 0;
}
#intro, #changes, #schedule, #bells { --blue: var(--emerald); --blue-soft: rgba(63, 175, 122, .13); }

.sidebar { border-right-color: var(--line); background: rgba(11, 12, 13, .86); box-shadow: none; backdrop-filter: blur(16px) saturate(110%); -webkit-backdrop-filter: blur(16px) saturate(110%); }
.brand { font-weight: 650; }.brand b { color: var(--dim); }
.brand-mark { border: 1px solid rgba(138, 216, 174, .24); border-radius: var(--radius-surface); color: #eaf8ef; background: linear-gradient(145deg, #24513d, #173527); box-shadow: none; }
.side-nav { margin-top: 38px; }.side-nav a { border-radius: var(--radius-surface); color: var(--muted); }.side-nav a span { border-radius: var(--radius-surface); }.side-nav a.active { color: var(--emerald-light); background: rgba(63, 175, 122, .105); }.side-nav a.active span { color: var(--emerald-light); background: rgba(63, 175, 122, .12); }.side-nav a.active:after { right: 7px; background: var(--emerald); box-shadow: none; }.install-button { border-color: rgba(63, 175, 122, .28); border-radius: var(--radius-surface); color: var(--emerald-light); background: rgba(63, 175, 122, .08); }

.app-header, .mobile-nav { border-color: var(--line-strong); background: rgba(17, 19, 21, .78); box-shadow: none; backdrop-filter: blur(16px) saturate(110%); -webkit-backdrop-filter: blur(16px) saturate(110%); }.app-header { border-radius: var(--radius-surface); }.header-note { color: var(--muted); background: rgba(255, 255, 255, .035); }.mobile-menu, .settings-button { border: 1px solid var(--line); border-radius: var(--radius-surface); color: var(--ink-soft); background: rgba(255, 255, 255, .04); }.mobile-nav { border-radius: var(--radius-surface); }.mobile-nav a { border-radius: var(--radius-surface); }.mobile-nav a.active, .mobile-nav a[data-screen="schedule"].active, .mobile-nav a[data-screen="bells"].active { color: var(--emerald-light); background: rgba(63, 175, 122, .13); box-shadow: none; }

.screen h2, .welcome-card h2, .capabilities-section h3, .social-section h3 { letter-spacing: -.02em; font-weight: 700; }.eyebrow { color: var(--emerald-light); }
.welcome-card { border: 1px solid var(--line); border-radius: var(--radius-surface); color: var(--ink); background: linear-gradient(140deg, rgba(27, 31, 30, .94), rgba(17, 19, 21, .97)); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }.welcome-card h2, .welcome-card h2 em { color: var(--ink); }.welcome-card h2 em { color: var(--emerald-light); }.welcome-card p { color: var(--muted); }.intro-action, .showcase-link { border-color: rgba(242, 240, 234, .16); border-radius: var(--radius-surface); color: var(--ink); background: rgba(255, 255, 255, .055); }

.showcase-card, .social-card, .lesson, .bell-card, .bells-overview, .feature-preview { border-color: var(--line); border-radius: var(--radius-surface); background: linear-gradient(145deg, rgba(23, 26, 28, .94), rgba(17, 19, 21, .98)); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Softer, larger radii across every interactive surface. */
:root { --radius-xl: 28px; --radius-lg: 22px; --radius-md: 16px; --radius-sm: 12px; }
.app-header, .mobile-nav { border-radius: var(--radius-surface); }
.mobile-menu, .settings-button, .side-nav a, .side-nav a span { border-radius: var(--radius-surface); }
.brand-mark, .showcase-icon { border-radius: var(--radius-surface); }
.intro-action, .showcase-link, .social-cta, .tg-open-button, .social-cta-outline, .install-button, .notification-toggle, .latest-change > footer button, #changes .show-more-button, .viewer-header > button, .viewer-action { border-radius: var(--radius-surface); }
.showcase-mockup { border-radius: var(--radius-surface); }
.social-feature, .schedule-toolbar select, #schedule .schedule-toolbar select, .day-tab, #schedule .day-tab, .week-control, #schedule .week-control, .week-control button, #schedule .week-control button { border-radius: var(--radius-surface); }
.week-slider, #schedule .week-slider { border-radius: var(--radius-surface); }
.change-row { border-radius: var(--radius-surface); }
.tg-bubble { border-radius: var(--radius-surface); }
.status-capsule, .status-capsule time, .latest-week { border-radius: var(--radius-pill); }
.settings-close, .status-icon { border-radius: 50%; }
.sidebar-bottom { margin-top: 42px; padding: 22px 10px 2px; border-top: 1px solid var(--line); }
.side-nav { gap: 6px; }
.side-nav a { margin-inline: 4px; }
.mobile-nav { --nav-pad: 9px; --nav-gap: 6px; padding: var(--nav-pad); column-gap: var(--nav-gap); border-color: transparent; box-shadow: none; }
.mobile-nav a { margin-inline: 0; border-radius: var(--radius-surface); }
.mobile-nav-indicator { width: 0; height: 0; position: absolute; top: 0; left: 0; z-index: 0; border-radius: var(--radius-surface); background: rgba(63, 175, 122, .13); box-shadow: none; opacity: 0; pointer-events: none; transform: translateX(0); transition: left 320ms cubic-bezier(.2, .8, .2, 1), top 320ms cubic-bezier(.2, .8, .2, 1), width 320ms cubic-bezier(.2, .8, .2, 1), height 320ms cubic-bezier(.2, .8, .2, 1), opacity 120ms ease; }
.mobile-nav-indicator.is-ready { opacity: 1; }
.mobile-nav a { position: relative; z-index: 1; background: transparent !important; }
.mobile-nav a.active, .mobile-nav a[data-screen="schedule"].active, .mobile-nav a[data-screen="bells"].active { box-shadow: none; }

@media (max-width: 760px) {
  .app-header, .mobile-nav { border-radius: var(--radius-surface); }
  .welcome-card { border-radius: var(--radius-surface); }
  .latest-change { border-radius: var(--radius-surface); }
  .change-row { border-radius: var(--radius-surface); }
  .mobile-menu, .settings-button { border-radius: var(--radius-surface); }
  .mobile-nav { --nav-pad: 8px; --nav-gap: 4px; padding: var(--nav-pad); column-gap: var(--nav-gap); border-color: transparent; box-shadow: none; }
  .mobile-nav a { margin-inline: 0; border-radius: var(--radius-surface); }
  .mobile-nav-indicator { border-radius: var(--radius-surface); }
}

/* One surface language: rounded fill, no visible outline, restrained depth. */
.welcome-card, .showcase-card, .social-card, .lesson, .bell-card, .bells-overview, .feature-preview, .latest-change, .change-row, .bells-note, .settings-dialog, .document-dialog, .viewer-panel, .styled-table-section, .styled-page {
  border-color: transparent;
  box-shadow: none;
}
.showcase-mockup, .social-feature, .schedule-toolbar select, #schedule .schedule-toolbar select, .week-control, #schedule .week-control, .day-tab, #schedule .day-tab, .status-capsule, .notification-toggle, .intro-action, .showcase-link, .social-cta, .social-cta-outline, .tg-open-button, .install-button, .latest-change > footer button, #changes .show-more-button, .viewer-header > button, .viewer-action, .mobile-menu, .settings-button, .settings-close {
  border-color: transparent;
  box-shadow: none;
}
.showcase-mockup, .social-feature, .schedule-toolbar select, #schedule .schedule-toolbar select, .week-control, #schedule .week-control, .day-tab, #schedule .day-tab, .status-capsule, .notification-toggle, .intro-action, .showcase-link, .social-cta-outline, .install-button, #changes .show-more-button, .viewer-header > button, .viewer-action, .mobile-menu, .settings-button, .settings-close { background: rgba(255, 255, 255, .045); }
.social-cta, .tg-open-button, .latest-change > footer button { box-shadow: none; }
.latest-change, .latest-change.is-new, #bells .bell-card.is-current, .status-capsule.is-running, .status-capsule:not(.is-idle):not(.is-running):not(.is-error):not(.is-unavailable), .notification-toggle.is-enabled, .day-tab.active, #schedule .day-tab.active { border-color: transparent; }

/* Surfaces are separated by fill and depth only, never by visible strokes. */
*, *::before, *::after { border-color: transparent !important; }

/* Changes uses quiet graphite surfaces with a single local emerald accent. */
#changes .changes-count,
#changes .status-capsule,
#changes .notification-toggle,
#changes .latest-change,
#changes .change-row,
#changes .latest-week,
#changes .show-more-button {
  border: 0;
  box-shadow: none;
}

#changes .changes-count {
  color: var(--emerald-light);
  background: radial-gradient(circle at 20% 0, rgba(63, 175, 122, .18), transparent 62%), #171a1c;
}

#changes .status-capsule {
  color: var(--muted);
  background: radial-gradient(circle at 8% 0, rgba(63, 175, 122, .14), transparent 54%), #171a1c;
}

#changes .status-icon,
#changes .notification-toggle .ui-icon {
  border: 0;
  color: var(--emerald-light);
  background: transparent;
  box-shadow: none;
}

#changes .status-icon { width: 26px; height: 26px; }
#changes .status-capsule.is-running .status-icon { color: var(--emerald-light); }
#changes .status-capsule.is-running,
#changes .status-capsule.is-error,
#changes .status-capsule.is-unavailable {
  color: var(--muted);
  background: radial-gradient(circle at 8% 0, rgba(63, 175, 122, .16), transparent 54%), #171a1c;
}
#changes .status-capsule.is-error .status-icon,
#changes .status-capsule.is-unavailable .status-icon { color: #c2aaa9; }
#changes .status-capsule:not(.is-idle):not(.is-running):not(.is-error):not(.is-unavailable) {
  color: var(--emerald-light);
  background: radial-gradient(circle at 8% 0, rgba(63, 175, 122, .2), transparent 54%), #171a1c;
}
#changes .status-capsule time {
  border: 0;
  color: var(--dim);
  background: rgba(255, 255, 255, .045);
}

#changes .notification-toggle {
  color: var(--muted);
  background: radial-gradient(circle at 12% 0, rgba(63, 175, 122, .12), transparent 58%), #171a1c;
}
#changes .notification-toggle.is-enabled {
  color: var(--emerald-light);
  background: radial-gradient(circle at 12% 0, rgba(63, 175, 122, .2), transparent 58%), #171a1c;
}
#changes .notification-toggle > i { background: rgba(255, 255, 255, .1); }
#changes .notification-toggle > i::after { background: var(--dim); }
#changes .notification-toggle.is-enabled > i { background: rgba(63, 175, 122, .25); }
#changes .notification-toggle.is-enabled > i::after { background: var(--emerald-light); }
#changes .notification-toggle.is-disabled > i::after { background: var(--dim); }

#changes .latest-change,
#changes .latest-change.is-new {
  color: var(--ink);
  background: radial-gradient(circle at 8% 0, rgba(63, 175, 122, .2), transparent 46%), #171a1c;
  box-shadow: none;
}
#changes .latest-change > header span,
#changes .latest-change.is-new > header span { color: var(--emerald-light); }
#changes .latest-change > header time,
#changes .latest-change > footer > span { color: var(--muted); }
#changes .latest-week,
#changes .latest-week-current {
  border: 0;
  color: var(--emerald-light) !important;
  background: rgba(63, 175, 122, .11);
}
#changes .latest-week-day {
  color: #b7d9ff !important;
  background: rgba(104, 160, 221, .14);
}
#changes .latest-change > footer {
  align-items: center;
  flex-wrap: wrap;
}
#changes .latest-change > footer button {
  border: 0;
  color: var(--ink);
  background: rgba(255, 255, 255, .07);
  box-shadow: none;
}

#changes .change-group > header {
  color: var(--dim);
  background: rgba(11, 12, 13, .82);
}
#changes .change-row {
  color: var(--ink-soft);
  background: radial-gradient(circle at 0 0, rgba(63, 175, 122, .1), transparent 48%), #171a1c;
  box-shadow: none;
}
#changes .change-row + .change-row { border-top: 0; }
#changes .change-main b { color: var(--ink); }
#changes .change-time { color: var(--muted); }
#changes .change-arrow { color: var(--emerald-light); }
#changes .show-more-button {
  color: var(--emerald-light);
  background: radial-gradient(circle at 12% 0, rgba(63, 175, 122, .13), transparent 60%), #171a1c;
}

@media (hover: hover) and (pointer: fine) {
  #changes .change-row:hover,
  #changes .latest-change > footer button:hover,
  #changes .notification-toggle:hover {
    background: radial-gradient(circle at 0 0, rgba(63, 175, 122, .15), transparent 52%), #1d2123;
    box-shadow: none;
  }
}

/* Changes states follow the same flat surface treatment as the navigation. */
.latest-change, .latest-change.is-new, .status-capsule, .status-capsule.is-running, .status-capsule:not(.is-idle):not(.is-running):not(.is-error):not(.is-unavailable), .status-capsule.is-error, .status-capsule.is-unavailable, .notification-toggle, .notification-toggle.is-enabled {
  box-shadow: none !important;
}
.latest-change, .latest-change.is-new { background: #171a1c; }
.status-capsule, .notification-toggle { background: #171a1c; }
.status-capsule.is-running, .status-capsule:not(.is-idle):not(.is-running):not(.is-error):not(.is-unavailable), .notification-toggle.is-enabled { background: rgba(45, 128, 92, .22); }
.status-capsule.is-error, .status-capsule.is-unavailable { background: rgba(92, 49, 49, .22); }

/* Every mobile section uses the same selected state. */
.mobile-nav a.active,
.mobile-nav a[data-screen="changes"].active,
.mobile-nav a[data-screen="schedule"].active,
.mobile-nav a[data-screen="bells"].active {
  color: var(--emerald-light) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.mobile-nav-indicator {
  background: rgba(63, 175, 122, .13) !important;
  box-shadow: none !important;
}

/* Keep the changes accents local instead of recoloring entire surfaces. */
#changes .status-capsule {
  background: radial-gradient(circle at 8% 0, rgba(63, 175, 122, .14), transparent 54%), #171a1c;
}
#changes .status-capsule.is-running,
#changes .status-capsule.is-error,
#changes .status-capsule.is-unavailable {
  background: radial-gradient(circle at 8% 0, rgba(63, 175, 122, .16), transparent 54%), #171a1c;
}
#changes .status-capsule:not(.is-idle):not(.is-running):not(.is-error):not(.is-unavailable) {
  background: radial-gradient(circle at 8% 0, rgba(63, 175, 122, .2), transparent 54%), #171a1c;
}
#changes .notification-toggle {
  background: radial-gradient(circle at 12% 0, rgba(63, 175, 122, .12), transparent 58%), #171a1c;
}
#changes .notification-toggle.is-enabled {
  background: radial-gradient(circle at 12% 0, rgba(63, 175, 122, .2), transparent 58%), #171a1c;
}
#changes .latest-change,
#changes .latest-change.is-new {
  background: radial-gradient(circle at 8% 0, rgba(63, 175, 122, .2), transparent 46%), #171a1c;
}

/* The bottom navigation uses one shared moving selection surface. */
.mobile-nav-indicator {
  background: radial-gradient(circle at 50% 0, rgba(191, 169, 224, .34), transparent 72%), rgba(170, 145, 210, .16) !important;
  box-shadow: none !important;
}
.mobile-nav a.active,
.mobile-nav a[data-screen="changes"].active,
.mobile-nav a[data-screen="schedule"].active,
.mobile-nav a[data-screen="bells"].active {
  color: #cbbbe3 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 600;
}

body, button, input, select, textarea { font-weight: 400; }
.screen h2, .welcome-card h2, .intro-capabilities h3, .capabilities-section h3, .social-section h3 { font-weight: 700; }
.latest-change h3, .showcase-content b, .feature-copy b, .quick-grid b { font-weight: 700; }
.side-nav a, .eyebrow, .preview-caption, .mockup-card-header, .social-card-header h4 { font-weight: 600; }
.change-main b, .lesson-content b, .bell-content > header time { font-weight: 500; }

/* One radius scale for all filled interface surfaces. */
:root { --radius-xl: 32px; --radius-lg: 32px; --radius-md: 32px; --radius-sm: 32px; }
.app-header, .mobile-nav, .sidebar, .welcome-card, .showcase-card, .showcase-mockup,
.social-card, .social-feature, .lesson, .bell-card, .bells-overview, .bells-note,
.feature-preview, .latest-change, .change-row, .changes-list, .status-capsule,
.notification-toggle, .latest-week, .count-pill, .changes-count, .show-more-button,
.side-nav a, .side-nav a span, .mobile-nav a, .mobile-nav-indicator, .header-note,
.brand-mark, .quick-icon, .showcase-icon, .lesson-number, .lesson-content em,
.schedule-toolbar select, .week-control, .week-control button, .day-tab, .install-button,
.intro-action, .showcase-link, .social-cta, .social-cta-outline, .tg-open-button,
.viewer-header > button, .viewer-action, .mobile-menu, .settings-button, .settings-close,
.viewer-modes, .viewer-modes button, .styled-table-section, .styled-page, .styled-table-scroll,
.tg-bubble, .tg-media, .tg-reactions span, .document-pages figcaption, .bell-variant {
  border-radius: var(--radius-surface) !important;
}

/* Status accents use a small color point rather than a full color fill. */
#changes .status-capsule.is-error,
#changes .status-capsule.is-unavailable {
  color: #e6b7b5;
  background: radial-gradient(circle at 8% 0, rgba(205, 91, 88, .28), transparent 54%), #171a1c;
}
#changes .status-capsule.is-error .status-icon,
#changes .status-capsule.is-unavailable .status-icon { color: #e49a96; }
#changes .notification-toggle.is-disabled {
  color: #e5ba86;
  background: radial-gradient(circle at 12% 0, rgba(214, 145, 74, .25), transparent 58%), #171a1c;
}
#changes .notification-toggle.is-disabled .ui-icon { color: #e5ba86; }
#changes .notification-toggle.is-disabled > i { background: rgba(214, 145, 74, .18); }
#changes .notification-toggle.is-disabled > i::after { background: #e5ba86; }
#changes .latest-change,
#changes .latest-change.is-new,
#changes .change-row,
#changes .show-more-button {
  background: radial-gradient(circle at 8% 0, rgba(170, 145, 210, .2), transparent 52%), #171a1c;
}
#changes .latest-change > header span,
#changes .latest-change.is-new > header span,
#changes .change-arrow,
#changes .show-more-button { color: #cbbbe3; }
@media (hover: hover) and (pointer: fine) {
  #changes .change-row:hover,
  #changes .latest-change > footer button:hover,
  #changes .notification-toggle:hover {
    background: radial-gradient(circle at 8% 0, rgba(170, 145, 210, .24), transparent 52%), #1d2123;
  }
}

/* Keep the compact scale while letting Golos Text carry the interface hierarchy. */
html, body, button, input, select, textarea { font-family: "Golos Text", sans-serif; letter-spacing: 0; font-weight: 400; }
body { font-size: 13px; line-height: 1.62; }
button, input, select, textarea { font-size: 12px; }

.brand { font-size: 13px; }
.side-nav a { font-size: 12px; }
.sidebar-bottom, .site-meta small, .site-links a { font-size: 10px; }
.header-note time { font-size: 10px; }

.screen h2 { font-size: clamp(28px, 3.5vw, 42px); line-height: 1.12; letter-spacing: 0; }
.screen-description { font-size: 13px; line-height: 1.62; }
.eyebrow, .intro-eyebrow, .intro-section-kicker, .preview-caption, .mockup-card-header { font-size: 10px; letter-spacing: .04em; }

.welcome-card h2 { font-size: clamp(34px, 5vw, 54px); line-height: 1.08; letter-spacing: 0; }
.welcome-card p, .feature-copy small, .social-description { font-size: 13px; line-height: 1.62; }
.quick-grid b, .feature-copy b { font-size: clamp(25px, 3.5vw, 40px); line-height: 1.12; letter-spacing: 0; }
.intro-capabilities h3, .capabilities-section h3, .social-section h3 { font-size: clamp(27px, 4vw, 40px); line-height: 1.12; letter-spacing: 0; }

.change-main b, .lesson-content b { font-size: 13px; line-height: 1.45; }
.change-main small, .lesson-content small { font-size: 11px; }
.change-time, .lesson-side time, .bells-overview > time { font-size: 11px; }
.change-arrow { font-size: 18px; }
.show-more-button, .notification-toggle, .latest-change > footer button, .viewer-action { font-size: 11px; }
.status-capsule { font-size: 11px; }
.status-capsule time { font-size: 10px; }
.latest-change > header span, .latest-change > header time, .latest-change > footer > span { font-size: 10px; }
.latest-change h3 { font-size: clamp(19px, 2.7vw, 26px); line-height: 1.18; letter-spacing: 0; }
.latest-week { font-size: 10px !important; }

#changes .latest-change > footer button {
  min-height: 54px;
  padding-inline: 24px;
  border-radius: var(--radius-surface) !important;
}

.schedule-toolbar label, .day-tab, .week-control button { font-size: 11px; }
.lesson-side time, .lesson-content em { font-size: 10px; }
.bells-overview small, .bell-order small, .bell-variant > small { font-size: 9px; }
.bells-overview b { font-size: 13px; }
.bell-order b { font-size: 18px; }
.bell-content > header > time, .bell-variant span time { font-size: 14px; }
.bell-content > header em, .bell-variant span em { font-size: 8px; }
.bells-note, .tg-body { font-size: 12px; line-height: 1.62; }

.mobile-nav a { font-size: 10px; }
.settings-panel h2 { font-size: 21px; letter-spacing: 0; }
.settings-toggle b { font-size: 13px; letter-spacing: 0; }
.settings-toggle small, .settings-note { font-size: 11px; line-height: 1.55; }
.viewer-title b { font-size: 13px; }
.viewer-title span, .viewer-loading span { font-size: 10px; }

/* Schedule keeps the same quiet graphite surface at every control state. */
#schedule .schedule-toolbar select,
#schedule .week-control,
#schedule .day-tab,
#schedule .lesson {
  color: var(--ink);
  background: #171a1c;
  box-shadow: none;
}
#schedule .schedule-toolbar select,
#schedule .week-control,
#schedule .day-tab {
  min-height: 52px;
}
#schedule .week-control {
  padding: 4px;
  background: #111315;
  border-radius: var(--radius-pill) !important;
}
#schedule .week-control button {
  color: var(--muted);
  background: transparent;
  border-radius: var(--radius-pill) !important;
}
#schedule .week-slider {
  background: radial-gradient(circle at 50% 0, rgba(191, 169, 224, .28), transparent 72%), rgba(170, 145, 210, .13);
  border-radius: var(--radius-pill) !important;
  box-shadow: none;
}
#schedule .week-control button.active,
#schedule .week-control button.active .week-mark,
#schedule .day-tab.active {
  color: #cbbbe3;
}

/* Bells: one calm graphite surface language, including the holiday notice. */
html, body, button, select, input, textarea { font-family: "Golos Text", sans-serif; }
body { background: #0B0C0D; font-size: 13px; line-height: 1.6; }
#bells { --blue: #AA91D2; --blue-soft: rgba(170, 145, 210, .14); }
#bells .screen-heading { margin-bottom: 28px; text-align: left; }
#bells .screen-heading h2 { color: #F2F0EA; font-size: clamp(32px, 5vw, 44px); line-height: 1.12; }
#bells .bells-overview, #bells .bell-card {
  border: 0;
  border-radius: var(--radius-surface);
  background: radial-gradient(circle at 8% 0, rgba(170, 145, 210, .16), transparent 48%), #171A1C;
  box-shadow: none;
}
#bells .bells-overview { margin-top: 0; padding: 22px 26px; }
#bells .bells-overview-icon { color: #CBBBE3; }
#bells .bells-overview b { font-size: 14px; }
#bells .bells-overview > time { color: #A7AAA7; }
#bells .bell-card { min-height: 124px; }
#bells .bell-card.is-current { background: radial-gradient(circle at 8% 0, rgba(63, 175, 122, .2), transparent 50%), #171A1C; }
#bells .bell-card.is-next { background: radial-gradient(circle at 8% 0, rgba(170, 145, 210, .2), transparent 50%), #171A1C; }
#bells .bell-order { border-right: 0; background: radial-gradient(circle at 50% 0, rgba(170, 145, 210, .12), transparent 72%), #171A1C; border-radius: var(--radius-surface) 0 0 var(--radius-surface); }
#bells .bell-order b { color: #F2F0EA; }
#bells .bell-content { padding: 22px 24px; }
#bells .bell-content > header > time, #bells .bell-variant span time { color: #F2F0EA; }
#bells .bell-content > header em, #bells .bell-variant span em { color: #CBBBE3; background: rgba(170, 145, 210, .16); }
#bells .bell-card.is-current .bell-content > header em { color: #8AD8AE; background: rgba(63, 175, 122, .16); }
#bells .bell-variant { border: 0; border-radius: var(--radius-surface); background: #111315; padding: 14px 16px; }
#bells .bells-note {
  margin-top: 20px;
  padding: 20px 24px;
  align-items: flex-start;
  gap: 14px;
  border: 0;
  border-radius: var(--radius-surface);
  color: #A7AAA7;
  background: radial-gradient(circle at 8% 0, rgba(170, 145, 210, .12), transparent 52%), #171A1C;
  box-shadow: none;
  font-size: 12px;
  line-height: 1.6;
}
#bells .bells-note-mark { width: 20px; height: 20px; margin-top: 1px; display: grid; place-items: center; flex: 0 0 auto; color: #CBBBE3; background: transparent; font-size: 18px; font-weight: 700; line-height: 1; }
#bells .bells-note a { color: #CBBBE3; text-decoration: underline; text-underline-offset: 3px; }
#bells .bells-note a:hover, #bells .bells-note a:focus-visible { color: #F2F0EA; }

/* Keep the live lesson progress inside the card instead of on its edge. */
#bells .bells-progress-bar {
  top: auto;
  right: 26px;
  bottom: 12px;
  left: 26px;
  height: 9px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle at 8% 0, rgba(170, 145, 210, .16), transparent 72%), #111315;
  box-shadow: none;
}
#bells .bells-progress-bar::after {
  height: 5px;
  margin: 2px 0;
  background: linear-gradient(90deg, rgba(170, 145, 210, .5), #AA91D2 68%, #CBBBE3);
  box-shadow: none;
  border-radius: var(--radius-pill);
}
#bells .bells-overview.is-live .bells-progress-bar::after {
  background: linear-gradient(90deg, rgba(63, 175, 122, .5), #3FAF7A 68%, #8AD8AE);
}

@media (max-width: 760px) {
  #bells .screen-heading { margin-bottom: 22px; }
  #bells .bells-overview { padding: 20px; gap: 11px; }
  #bells .bells-progress-bar { right: 20px; bottom: 10px; left: 20px; }
  #bells .bell-card { grid-template-columns: 58px minmax(0, 1fr); border-radius: var(--radius-surface); }
  #bells .bell-order { border-radius: var(--radius-surface) 0 0 var(--radius-surface); }
  #bells .bell-content { padding: 18px 16px; }
  #bells .bell-variants { grid-template-columns: 1fr; }
  #bells .bells-note { padding: 18px 20px; }
}
#schedule .week-control button.active .week-mark {
  background: transparent;
}
#schedule .day-tab.active {
  background: radial-gradient(circle at 8% 0, rgba(170, 145, 210, .2), transparent 52%), #171a1c;
  box-shadow: none;
}
#schedule .lesson {
  padding: 20px;
  background: radial-gradient(circle at 8% 0, rgba(170, 145, 210, .1), transparent 52%), #171a1c;
}
#schedule .lesson-number,
#schedule .lesson-content em {
  color: var(--ink);
  background: rgba(242, 240, 234, .08);
}
#schedule .lesson-side time { color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  #schedule .day-tab:hover,
  #schedule .day-tab.active:hover {
    color: var(--ink);
    background: radial-gradient(circle at 8% 0, rgba(170, 145, 210, .16), transparent 52%), #1d2123;
  }
}

/* Day tabs stay flat to avoid light artifacts along their lower and right edges. */
#schedule .day-tab,
#schedule .day-tab.active,
#schedule .day-tab:hover,
#schedule .day-tab.active:hover {
  border: 0;
  box-shadow: none;
}
#schedule .day-tab {
  background: #171a1c;
}
#schedule .day-tab.active {
  background: radial-gradient(circle at 8% 0, rgba(170, 145, 210, .2), transparent 52%), #171a1c;
}

@media (max-width: 760px) {
  .screen h2 { font-size: 28px; }
  .welcome-card h2 { font-size: clamp(31px, 9vw, 44px); }
  .quick-grid b, .feature-copy b { font-size: 26px; }
  .intro-capabilities h3, .capabilities-section h3, .social-section h3 { font-size: 28px; }
}

/* Make the user's saved schedule easy to scan at a glance. */
#schedule .schedule-toolbar label.is-selected select {
  color: #d9cbed;
  background: radial-gradient(circle at 10% 0, rgba(170, 145, 210, .3), transparent 58%), #1d2022;
}
#schedule .day-tab.active {
  color: #e1d5ef;
  background: radial-gradient(circle at 10% 0, rgba(170, 145, 210, .34), transparent 62%), #202326;
  box-shadow: none;
  font-weight: 700;
}

.profile-summary {
  margin-top: 22px;
  display: grid;
  gap: 8px;
}
.profile-item {
  min-width: 0;
  min-height: 66px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: var(--radius-surface);
  color: #cbbbe3;
  background: radial-gradient(circle at 8% 0, rgba(170, 145, 210, .24), transparent 58%), #171a1c;
}
.profile-item span {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.profile-item small {
  color: var(--muted);
  font-size: 10px;
}
.profile-item b {
  overflow: hidden;
  color: #e4d9f0;
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-item b.is-empty {
  color: var(--dim);
}
.profile-item > .ui-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: #cbbbe3;
}
.profile-divider {
  height: 1px;
  margin: 24px 0 18px;
  background: rgba(242, 240, 234, .08);
}
.profile-section-label {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

/* Final layout calibration: one spacing rhythm and predictable text boxes. */
:root {
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
}

h1, h2, h3, h4, p, figure { margin-block-start: 0; }
p { overflow-wrap: anywhere; }

.screen-heading {
  align-items: center;
  min-height: 44px;
  margin-bottom: var(--space-4);
}
.screen-heading h2 { margin: 0; }
.screen-description { margin: var(--space-2) 0 var(--space-5); }

.welcome-card,
.showcase-card,
.social-card,
.lesson,
.bell-card,
.bells-overview,
.bells-note,
.latest-change,
.change-row,
.settings-panel,
.styled-table-section,
.styled-page {
  min-width: 0;
}

.welcome-card,
.showcase-card,
.social-card,
.lesson,
.bell-card,
.bells-overview,
.latest-change {
  text-align: left;
}

.showcase-content,
.social-card,
.lesson-details,
.bell-content,
.bell-details,
.settings-panel,
.profile-item span {
  min-width: 0;
}

.showcase-content b,
.showcase-content small,
.social-bot-desc,
.social-feature,
.feature-preview,
.latest-change h3,
.change-main b,
.lesson-content b,
.lesson-content small,
.bell-content,
.bells-note p {
  overflow-wrap: anywhere;
}

.intro-action,
.showcase-link,
.social-cta,
.tg-open-button,
.install-button,
.notification-toggle,
.show-more-button,
.latest-change > footer button,
.viewer-action,
.viewer-header > button,
.mobile-menu,
.settings-button,
.settings-close,
.day-tab,
.week-control button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}

.intro-action .ui-icon,
.showcase-link .ui-icon,
.social-cta .ui-icon,
.tg-open-button .ui-icon,
.latest-change > footer button .ui-icon,
.viewer-action .ui-icon {
  flex: 0 0 auto;
}

.schedule-toolbar {
  align-items: end;
  margin-top: var(--space-4);
  margin-bottom: var(--space-3);
}
.schedule-toolbar label { line-height: 1.2; }
.schedule-toolbar select { width: 100%; }
.day-tabs { align-items: center; }
.day-tab { min-height: 44px; }
.week-control { align-items: center; }

.lesson-side,
.bell-order,
.bells-overview,
.status-capsule,
.notification-toggle {
  line-height: 1.25;
}
.lesson-side { align-self: stretch; }
.lesson-details { align-content: center; }
.bell-content > header { min-height: 24px; }
.bell-content > header > div { min-width: 0; }
.bell-content > header > div b { overflow-wrap: anywhere; }

.latest-change > header,
.latest-change > footer {
  min-width: 0;
}
.latest-change > header span,
.latest-change > footer > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.latest-change > footer button { flex: 0 0 auto; }

.changes-status { align-items: center; }
.notification-toggle { min-width: 0; }
.notification-toggle > span { min-width: 0; }

.social-card-header { min-width: 0; }
.social-card-header > div:last-child { min-width: 0; }
.social-card-header h4,
.social-card-header span { overflow-wrap: anywhere; }
.social-cta { width: 100%; }
.social-feature { min-height: 42px; }

.profile-item { min-width: 0; }
.profile-item > .ui-icon { flex: 0 0 auto; }
.settings-toggle { align-items: center; }

@media (max-width: 760px) {
  .screen-heading { min-height: 38px; margin-bottom: var(--space-3); }
  .screen-description { margin-bottom: var(--space-4); }
  .showcase-card { gap: var(--space-4); padding: var(--space-5) var(--space-4); }
  .showcase-icon { margin-bottom: var(--space-3); }
  .showcase-content small { margin-top: var(--space-2); }
  .showcase-link { margin-top: var(--space-3); min-height: 42px; }
  .social-card { gap: 0; padding: var(--space-4); }
  .social-card-header { margin-bottom: var(--space-3); }
  .social-bot-desc { margin-bottom: var(--space-3); }
  .social-cta { min-height: 44px; }
  .latest-change > footer { gap: var(--space-2); }
  .latest-change > footer button { width: 100%; margin-left: 0; }
  .changes-status { flex-wrap: wrap; }
  .notification-toggle { margin-left: 0; }
  .bells-note { gap: var(--space-2); }
}

@media (max-width: 430px) {
  .welcome-card { padding: var(--space-4); }
  .schedule-toolbar { gap: var(--space-2); }
  .week-control button { min-width: 0; }
  .lesson { gap: var(--space-3); padding: var(--space-3); }
  .bell-content { padding: var(--space-3); }
  .bells-overview { padding: var(--space-3); }
  .social-feature { padding-inline: var(--space-2); }
}

/* Keep the notification control pinned to the right of the status row. */
#changes .changes-status {
  justify-content: flex-start;
}
#changes .notification-toggle {
  flex: 0 0 auto;
  margin-left: auto !important;
}

/* Schedule alignment: labels, controls and lesson content share one grid. */
#schedule .screen-heading {
  margin-bottom: var(--space-4);
}
#schedule .schedule-toolbar {
  grid-template-columns: minmax(140px, .38fr) minmax(0, 1fr);
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
#schedule .schedule-toolbar label {
  min-width: 0;
  gap: var(--space-1);
}
#schedule .schedule-toolbar select {
  min-width: 0;
  height: 52px;
  padding: 0 42px 0 var(--space-3);
  text-align: left;
  line-height: 1.2;
}
#schedule .week-control {
  width: 100%;
  margin: 0 0 var(--space-2);
  padding: 4px;
  gap: 4px;
}
#schedule .week-control button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--space-2);
  gap: var(--space-1);
}
#schedule .day-tabs {
  gap: var(--space-1);
  padding: 0 0 var(--space-1);
}
#schedule .day-tab {
  min-height: 44px;
  padding: 0 var(--space-3);
}
#schedule .lessons {
  margin-top: var(--space-2);
  gap: var(--space-2);
}
#schedule .lesson {
  min-height: 104px;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-4);
}
#schedule .lesson-side {
  align-items: center;
  padding-right: var(--space-3);
}
#schedule .lesson-details {
  gap: var(--space-2);
}
#schedule .lesson-content {
  padding-right: 92px;
}
#schedule .lesson-content + .lesson-content {
  padding-top: var(--space-2);
}

@media (max-width: 760px) {
  #schedule .schedule-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #schedule .lesson {
    min-height: 0;
    padding: var(--space-3);
    gap: var(--space-2);
  }
  #schedule .lesson-side {
    padding: 0 0 var(--space-2);
  }
  #schedule .lesson-content {
    padding-right: 0;
  }
}

@media (max-width: 430px) {
  #schedule .schedule-toolbar {
    grid-template-columns: 1fr;
  }
  #schedule .week-control button {
    padding-inline: var(--space-1);
    font-size: 10px;
  }
  #schedule .day-tab {
    padding-inline: var(--space-2);
  }
}

/* Make the week selector read as a clear two-state segmented control. */
#schedule .week-control {
  width: min(100%, 360px);
  min-height: 52px;
  padding: 4px;
  gap: 4px;
  border-radius: var(--radius-pill) !important;
  background: #111315;
}
#schedule .week-control button {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 0;
  padding: 0 12px;
  gap: 8px;
  color: var(--muted);
  background: transparent;
  border-radius: var(--radius-pill) !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
#schedule .week-control button.active {
  color: #b9adca;
}
#schedule .week-slider {
  height: calc(100% - 8px);
  top: 4px;
  border-radius: var(--radius-pill) !important;
  background: rgba(170, 145, 210, .16);
  box-shadow: none;
  opacity: 1;
}
#schedule .week-mark {
  width: 12px;
  height: 18px;
  flex: 0 0 12px;
  position: relative;
  display: block;
  border: 0;
  border-radius: 0;
  color: var(--dim);
  background: transparent;
  line-height: 1;
}
#schedule .week-mark::before {
  content: "";
  width: 2px;
  height: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  border-radius: var(--radius-surface);
  background: currentColor;
  transform: translate(-50%, -50%) rotate(28deg);
}
#schedule [data-week="denominator"] .week-mark::before {
  transform: translate(-50%, -50%) rotate(-28deg);
}
#schedule .week-control button.active .week-mark {
  color: #b9adca;
  background: transparent;
}
#schedule .week-indicator {
  top: 50%;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e5d6f5 0%, #b99cdd 45%, #6cba91 100%);
  box-shadow: none;
  transform: translateY(-50%);
}

@media (max-width: 430px) {
  #schedule .week-control {
    width: 100%;
  }
  #schedule .week-control button {
    padding-inline: 8px;
    gap: 6px;
    font-size: 10px;
  }
}

/* Purple mobile controls and a clean edge-to-edge drawer. */
.mobile-menu {
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .045);
}
.sidebar {
  background: radial-gradient(circle at 0 0, rgba(170, 145, 210, .045), transparent 48%), var(--surface);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  box-shadow: none;
}
.install-button { color: #fff; }
.side-nav a.active,
.side-nav a.active span {
  color: #cbbbe3;
  background: rgba(170, 145, 210, .13);
}
.side-nav a.active:after { display: none; }
.mobile-nav-indicator {
  background: radial-gradient(circle at 50% 0, rgba(205, 180, 238, .38), transparent 72%), rgba(170, 145, 210, .2) !important;
}
.mobile-nav {
  background: radial-gradient(circle at 50% 0, rgba(170, 145, 210, .1), transparent 64%), rgba(17, 16, 21, .94);
}
.mobile-nav a.active,
.mobile-nav a[data-screen="changes"].active,
.mobile-nav a[data-screen="schedule"].active,
.mobile-nav a[data-screen="bells"].active {
  color: #cbbbe3 !important;
}
.sidebar-bottom { border-top: 0; }
.site-meta { gap: 12px; }
.site-links { gap: 8px 14px; }
.site-links a { color: #b9adca; text-decoration: none; }

/* Course and group selectors should stay flat instead of catching a light reflection. */
#schedule .schedule-toolbar select {
  border-color: rgba(199, 206, 216, .14);
  background: rgba(17, 19, 21, .9);
  box-shadow: none;
}

/* Keep shared navigation surfaces neutral; color belongs to content accents only. */
body {
  background: var(--bg);
}
.app-header,
.sidebar,
.mobile-nav {
  background: rgba(24, 24, 24, .88) !important;
}
.mobile-nav-indicator {
  background: rgba(255, 255, 255, .08) !important;
  box-shadow: none;
}
.mobile-nav a.active,
.mobile-nav a[data-screen="changes"].active,
.mobile-nav a[data-screen="schedule"].active,
.mobile-nav a[data-screen="bells"].active {
  color: var(--ink-soft) !important;
}

/* Keep every header control centered inside the pill, including text with a custom line-height. */
.app-header > button {
  flex: 0 0 38px;
  line-height: 0;
}
.app-header > button .ui-icon {
  margin: 0;
}
.header-note {
  align-items: center;
  justify-content: center;
}
.back-to-top {
  width: 44px;
  height: 44px;
  position: fixed;
  right: 24px;
  bottom: 38px;
  z-index: 24;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  color: var(--ink-soft);
  background: rgba(24, 24, 24, .9);
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), background 180ms ease;
}
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.back-to-top:hover { background: rgba(48, 48, 48, .96); }
.back-to-top .ui-icon { width: 19px; height: 19px; transform: rotate(-90deg); }

@media (max-width: 760px) {
  .back-to-top {
    right: 16px;
    bottom: calc(92px + env(safe-area-inset-bottom));
  }
}

/* Use one restrained violet surface for selected navigation and profile controls. */
.mobile-nav-indicator {
  background: radial-gradient(circle at 18% 0, rgba(170, 145, 210, .24), transparent 62%), rgba(43, 40, 48, .94) !important;
  box-shadow: none;
}
.mobile-nav a.active,
.mobile-nav a[data-screen="changes"].active,
.mobile-nav a[data-screen="schedule"].active,
.mobile-nav a[data-screen="bells"].active {
  color: #d8cbe5 !important;
}
.profile-item {
  border: 1px solid rgba(170, 145, 210, .2);
  border-radius: var(--radius-surface);
  background: radial-gradient(circle at 18% 0, rgba(170, 145, 210, .24), transparent 62%), rgba(43, 40, 48, .94);
  box-shadow: none;
}
.settings-toggle {
  min-height: 68px;
  padding: 14px 16px;
  border: 1px solid rgba(170, 145, 210, .2);
  border-radius: var(--radius-surface);
  background: radial-gradient(circle at 18% 0, rgba(170, 145, 210, .2), transparent 62%), rgba(43, 40, 48, .94);
  box-shadow: none;
}
.settings-toggle i {
  flex: 0 0 auto;
}
#changes .notification-toggle {
  min-height: 36px;
  padding: 4px 10px 4px 5px;
  border: 1px solid rgba(255, 183, 106, .32);
  border-radius: var(--radius-pill);
  color: #ffd39a;
  background: linear-gradient(135deg, rgba(100, 60, 42, .94), rgba(48, 39, 65, .96));
  box-shadow: none;
}
#changes .notification-toggle.is-enabled {
  border-color: rgba(138, 216, 174, .62);
  color: #e6fff3;
  background: radial-gradient(circle at 12% 0, rgba(63, 175, 122, .2), transparent 58%), #171a1c;
  box-shadow: none;
}
#changes .notification-toggle.is-enabled .ui-icon { color: #8ad8ae; }

@media (max-width: 760px) {
  .sidebar {
    border-radius: 0 var(--radius-surface) var(--radius-surface) 0 !important;
  }
}

/* Shared glass dock: notice and navigation have identical outer dimensions. */
:root { --dock-height: 64px; --dock-gap: 10px; --dock-bottom: 12px; }
body { padding-bottom: calc(164px + env(safe-area-inset-bottom)); }
.mobile-nav, .beta-notice {
  width: min(520px, calc(100vw - 18px));
  height: var(--dock-height);
  min-height: var(--dock-height);
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-surface);
  background: rgba(24, 24, 24, .78) !important;
  backdrop-filter: blur(12px) saturate(110%);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
  box-shadow: none;
}
.mobile-nav { bottom: calc(var(--dock-bottom) + env(safe-area-inset-bottom)); }
.beta-notice {
  margin: 0;
  padding: 10px 14px;
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock-bottom) + var(--dock-height) + var(--dock-gap) + env(safe-area-inset-bottom));
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  transform: translateX(-50%);
  transition: transform 180ms var(--ease-out);
}
.beta-notice.beta-dock-active { transform: translate(-50%, calc(var(--dock-height) + var(--dock-gap))); }
#changes .change-row { content-visibility: visible; }
#changes .changes-list { overflow: hidden; }
#changes .show-more-button { display: flex; margin-inline: auto; }
#changes .show-more-button[hidden] { display: none; }
@media (max-width: 760px) {
  :root { --dock-bottom: 8px; }
  .mobile-nav, .beta-notice { width: calc(100% - 18px); left: 9px; right: 9px; transform: none; }
  .beta-notice.beta-dock-active { transform: translateY(calc(var(--dock-height) + var(--dock-gap))); }
  .back-to-top { bottom: calc(156px + env(safe-area-inset-bottom)); }
}
/* Glass stays on the floating controls; opaque scrolling cards need no blur. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  html { scroll-behavior: auto; }
  body { background-attachment: scroll; }
  #bells .bell-card, #bells .bells-overview, #bells .bells-note,
  #schedule .lesson, #changes .change-row, #changes .latest-change,
  .welcome-card, .showcase-card, .social-card, .feature-preview,
  .showcase-mockup, .tg-bubble, .change-group > header,
  .status-label::after, .status-time::after, .status-capsule {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .app-header, .sidebar, .viewer-header {
    backdrop-filter: blur(10px) saturate(110%);
    -webkit-backdrop-filter: blur(10px) saturate(110%);
  }
  #bells .bell-card, #schedule .lesson, #changes .change-row { box-shadow: none; }
  #schedule .lesson { content-visibility: visible; }
  .screen, .bell-card, .lesson { animation-fill-mode: backwards; }
}
@media (prefers-reduced-transparency: reduce) {
  .app-header, .sidebar, .mobile-nav, .beta-notice, .viewer-header {
    background: var(--surface-solid) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Keep the shared moving navigation indicator consistent with the overview style. */
.mobile-nav-indicator {
  border-radius: var(--radius-surface) !important;
  background: radial-gradient(circle at 50% 0, rgba(203, 187, 227, .28), transparent 72%), rgba(170, 145, 210, .14) !important;
  box-shadow: none !important;
}
.mobile-nav a.active,
.mobile-nav a[data-screen="changes"].active,
.mobile-nav a[data-screen="schedule"].active,
.mobile-nav a[data-screen="bells"].active {
  color: #cbbbe3 !important;
  background: transparent !important;
}

/* Keep dock selection inside the same padding on every side. */
.mobile-nav { grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.mobile-nav a { height: auto; min-height: 0; }
.mobile-nav-indicator { transition: transform 280ms var(--ease-out), width 180ms var(--ease-out), opacity 120ms ease; }

/* The page has its own stacking context; the drawer and scrim sit above it. */
html { scrollbar-gutter: stable; }
html.menu-open { overflow: hidden; }
.sidebar {
  visibility: hidden;
  transform: translate3d(-105%, 0, 0);
  transition: transform 240ms var(--ease-out), visibility 0s 240ms;
}
.sidebar.open { visibility: visible; transform: translate3d(0, 0, 0); transition-delay: 0s; }
.sidebar.is-moving { will-change: transform; }
.sidebar-scrim { touch-action: none; }



/* One rounded surface language, taken from the bottom dock. */
:root { --radius-surface: 32px; --radius-pill: 999px; --radius-xl: var(--radius-surface); --radius-lg: var(--radius-surface); --radius-md: var(--radius-surface); --radius-sm: var(--radius-surface); }
#intro { animation: none; }
.dashboard-heading { padding: 12px 0 32px; }
.dashboard-heading .eyebrow, .community-heading .eyebrow { color: #b8a6ce; font-size: 10px; letter-spacing: .12em; }
#intro .dashboard-heading h2 { margin-top: 14px; font-size: clamp(38px, 5vw, 64px); line-height: 1.07; letter-spacing: -.035em; }
.dashboard-heading h2 em { color: #cbbbe3; font-style: normal; }
.dashboard-heading p, .community-heading p { margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.dashboard-card { --card-accent: #cbbbe3; min-width: 0; padding: 32px; display: flex; flex-direction: column; gap: 26px; border-radius: var(--radius-surface); background: linear-gradient(135deg,#24222c,#17191c 70%); color: var(--ink); border: 1px solid rgba(255,255,255,.045); }
.dashboard-changes { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; min-height: 340px; background: linear-gradient(115deg,#30283d,#1b1c22 68%); }
.dashboard-schedule { --card-accent: #a7d6c0; background: linear-gradient(145deg,#20312d,#181c1d 68%); }
.dashboard-bells { --card-accent: #e2c5a0; background: linear-gradient(145deg,#322c25,#1c1b1d 68%); }
.dashboard-copy { min-width: 0; }
.dashboard-kicker { display: flex; align-items: center; gap: 10px; color: var(--card-accent); font-size: 11px; }
.dashboard-kicker .ui-icon { width: 20px; height: 20px; }
.dashboard-copy h3 { margin: 22px 0 14px; font-size: clamp(26px,3vw,36px); line-height: 1.16; letter-spacing: -.025em; }
.dashboard-copy p { margin: 0; max-width: 34ch; color: #b2b2b9; font-size: 13px; line-height: 1.6; }
.dashboard-action { display: flex; align-items: center; gap: 16px; margin-top: auto; color: var(--card-accent); font-size: 12px; font-weight: 600; }
.dashboard-copy .dashboard-action { margin-top: 28px; }
.dashboard-action .ui-icon { width: 28px; height: 28px; padding: 6px; border-radius: var(--radius-pill); background: rgba(255,255,255,.07); }
.section-preview { min-width: 0; padding: 24px; border-radius: var(--radius-surface); background: #111416; border: 1px solid rgba(255,255,255,.045); }
.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--card-accent); font-size: 11px; margin-bottom: 18px; }
.preview-heading .ui-icon { width: 17px; height: 17px; }
.preview-heading strong { font-size: 14px; }
.preview-dot { width: 7px; height: 7px; border-radius: 50%; background: #9fcab2; }
.section-preview > strong { display: block; color: var(--ink); font-size: 18px; line-height: 1.35; overflow-wrap: anywhere; }
.section-preview > small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; }
.mini-rows { display: grid; gap: 0; margin-top: 20px; }
.mini-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.07); color: #bbbcc2; font-size: 11px; line-height: 1.5; }
.mini-row span { min-width: 0; overflow-wrap: anywhere; }
.mini-row time { flex: 0 0 auto; color: var(--card-accent); font-variant-numeric: tabular-nums; }
.preview-empty { color: var(--muted); font-size: 12px; line-height: 1.6; padding: 12px 0; }
.preview-document { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; color: var(--card-accent); font-size: 10px; }
.preview-document .ui-icon { width: 16px; height: 16px; }
.community-section { margin-top: 64px; }
.community-heading { margin-bottom: 26px; }
.community-heading h3 { margin: 12px 0 0; font-size: clamp(26px,3vw,36px); line-height: 1.2; }
.community-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: stretch; }
.community-card { min-width: 0; padding: 28px; border-radius: var(--radius-surface); border: 1px solid rgba(255,255,255,.05); background: #171a1c; }
.community-profile { display: flex; align-items: center; gap: 12px; min-width: 0; }
.community-profile > div { min-width: 0; }
.community-avatar { width: 48px; height: 48px; flex: 0 0 48px; border-radius: var(--radius-pill); object-fit: cover; display: grid; place-items: center; background: #35303f; color: #d5c7e5; }
.community-profile h4 { margin: 0; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.community-profile span:not(.community-avatar) { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.community-post-label { margin: 26px 0 16px; display: flex; justify-content: space-between; gap: 10px; color: #b9a8ce; font-size: 10px; }
.community-loading { color: var(--muted); font-size: 13px; }
.community-post { min-width: 0; }
.community-post .tg-body { color: #d7d6dc; font-size: 13px; line-height: 1.75; }
.community-post .tg-body a { color: #cbbbe3; }
.post-photos { display: grid; gap: 8px; margin-bottom: 20px; }
.post-photos.is-album { grid-template-columns: repeat(2,minmax(0,1fr)); }
.post-photo { display: block; aspect-ratio: 4/3; background: #0e1012; border-radius: var(--radius-surface); overflow: hidden; }
.post-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.community-post .tg-reactions { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 14px; }
.community-post .tg-reactions span { padding: 6px 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill); background: #25232c; color: #d1c3e0; font-size: 12px; }
.community-post .tg-reactions img { width: 18px; height: 18px; object-fit: contain; }
.community-post footer { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.community-post footer a { color: #cbbbe3; }
.community-link { display: flex; align-items: center; gap: 9px; min-height: 48px; margin-top: 26px; padding: 12px 16px; border-radius: var(--radius-pill); background: #2d2936; color: #ddceec; font-size: 12px; font-weight: 600; }
.community-link .ui-icon { width: 18px; height: 18px; }
.community-link .ui-icon:last-child { margin-left: auto; }
.community-bot { background: linear-gradient(155deg,#232130,#171a1c 65%); }
.community-bot .bot-kicker { display: block; margin-top: 36px; color: #b9a8ce; font-size: 10px; }
.community-bot h3 { margin: 14px 0 20px; font-size: 30px; line-height: 1.2; }
#botDescription { font-size: 13px; line-height: 1.7; color: #b9b8c0; white-space: pre-line; overflow-wrap: anywhere; }
.bot-message { display: flex; gap: 12px; align-items: center; margin-top: 26px; padding: 20px; border-radius: var(--radius-surface); background: #111416; color: #b9b8c0; font-size: 12px; line-height: 1.6; }
.bot-message .ui-icon { width: 26px; height: 26px; flex: 0 0 auto; color: #cbbbe3; }
#intro .dashboard-card, #intro .section-preview, #intro .community-card { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
 .dashboard-card:hover { border-color: rgba(203,187,227,.24); }
 .community-link:hover { background: #393142; }
}
@media (max-width: 760px) {
 .dashboard-grid, .community-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
 .dashboard-changes { grid-column: auto; grid-template-columns: minmax(0,1fr); gap: 26px; }
 .dashboard-card { padding: 24px; }
 .dashboard-copy h3 { font-size: 28px; }
 .section-preview { padding: 20px; }
 .community-section { margin-top: 44px; }
 .community-card { padding: 22px; }
 .dashboard-heading { padding-bottom: 28px; }
 .community-grid { grid-auto-rows: 1fr; }
}

/* Telegram-style incoming channel message, with metadata inside the bubble. */
.community-card { display: flex; flex-direction: column; }
.community-card > .community-link { margin-top: auto; }
#telegramPosts { margin: 0 0 26px; padding-left: 7px; }
.community-post { position: relative; padding: 20px; background: #282532; border-radius: var(--radius-surface); }
.community-post::before { content: ""; position: absolute; left: -7px; bottom: 0; width: 28px; height: 26px; background: #282532; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.telegram-message-author { color: #cbbbe3; font-size: 13px; font-weight: 600; line-height: 1.4; margin: 0 0 12px; }
.community-post .tg-body { font-size: 13px; line-height: 1.65; }
.community-post .tg-reactions { gap: 6px; margin: 16px 0 10px; }
.community-post .tg-reactions span { padding: 5px 9px; background: #393246; color: #e0d4ef; }
.community-post footer { justify-content: flex-end; column-gap: 12px; margin-top: 10px; color: #aaa0b9; font-size: 10px; }
.community-post footer time { order: 2; }
.community-post .post-photos { margin-bottom: 14px; }
.community-bot { background: linear-gradient(155deg,#252130,#171a1c 72%); }
.community-bot .bot-kicker { margin-top: 30px; }
.community-bot h3 { margin-bottom: 16px; }
.bot-message { display: block; padding: 22px 0 0; margin: 24px 0 28px; border-top: 1px solid rgba(203,187,227,.12); border-radius: 0; background: transparent; }
.bot-start-label { display: block; color: #cbbbe3; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.bot-message p { margin: 10px 0 0; color: #aaa6b2; font-size: 13px; line-height: 1.75; }
.bot-message strong { color: #e1d6ed; font-weight: 600; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
@media (max-width: 430px) {
 .community-card { padding: 20px; }
 .community-post { padding: 17px; }
}

/* Quiet surfaces: no offset shadows or reflective borders. */
.dashboard-heading { padding: 32px; margin-bottom: 20px; border-radius: var(--radius-surface); background: #1c1b23; }
#intro .dashboard-heading h2 { margin: 0; font-size: clamp(34px,4.6vw,54px); }
.dashboard-changes { min-height: 280px; }
.dashboard-copy h3 { margin: 16px 0 0; }
.dashboard-copy .dashboard-action { margin-top: 24px; }
.dashboard-card, .section-preview, .community-card { border: 0; }
.community-bot h3 { margin-bottom: 20px; }
#botDescription { margin-bottom: 30px; }
.community-post { border-bottom-left-radius: 0; }
.community-post::before { left: -10px; bottom: 0; width: 12px; height: 20px; clip-path: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M12 0C12 9 10 15 1 18C0 19 0 20 2 20H12Z'/%3E%3C/svg%3E") center/100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M12 0C12 9 10 15 1 18C0 19 0 20 2 20H12Z'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
#changes .status-capsule, #changes .notification-toggle { background: #1e2223 !important; border: 0; }
#changes .notification-toggle.is-enabled { background: #1c2b24 !important; }
#changes .notification-toggle.is-disabled { background: #2a241f !important; }
.lesson, #bells .bell-card, #bells .bells-overview, #bells .bells-note, .change-row, .latest-change, .status-capsule, .notification-toggle { backdrop-filter: none; -webkit-backdrop-filter: none; }
.beta-notice { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; padding: 10px 14px; text-align: left; }
.beta-notice-label { display: grid; place-items: center; min-height: 26px; padding: 4px 9px; border: 0; background: #cbbbe3; color: #241e2f; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.beta-notice-question { color: #d8d5df; font-size: 14px; line-height: 1.3; }
.beta-notice a { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 13px; border-radius: var(--radius-pill); background: #37303f; color: #e8ddf4; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.beta-notice a:hover { background: #44394f; }
@media (max-width: 760px) {
 .dashboard-heading { padding: 26px 24px; }
 .beta-notice { gap: 7px; padding-inline: 10px; }
 .beta-notice-question { font-size: 13px; }
 .beta-notice a { padding-inline: 11px; font-size: 11px; }
}
@media (max-width: 360px) {
 .beta-notice-label { padding-inline: 7px; }
 .beta-notice-question { font-size: 12px; }
 .beta-notice a { padding-inline: 9px; }
}

/* Stable glass on floating controls, with the same treatment at every width. */
.app-header, .sidebar, .mobile-nav, .beta-notice, .viewer-header {
  background: rgba(24, 24, 27, .78) !important;
  backdrop-filter: blur(12px) saturate(110%);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
}
.dashboard-card { background: linear-gradient(135deg, #28242f 0%, #1c1d22 100%); }
.dashboard-schedule { background: linear-gradient(135deg, #222d29 0%, #1c1d22 100%); }
.dashboard-bells { background: linear-gradient(135deg, #2e2923 0%, #1c1d22 100%); }
.community-card { background: linear-gradient(135deg, #25232c 0%, #1b1c21 100%); }
.beta-notice-label { background: #332e3c; color: #b9accb; }
.beta-notice-question { color: var(--muted); }
.beta-notice a { background: #302c37; color: #bfb2ce; }
.beta-notice a:hover { background: #3b3445; }
#bells .bells-overview { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 16px; align-items: center; }
#bells .bells-live-dot { display: none; }
#bells .bells-overview > div:not(.bells-progress-bar) { display: grid; gap: 7px; }
#bells .bells-progress-bar[hidden] { display: none; }
#bells .bells-overview small { font-size: 11px; line-height: 1.4; }
#bells .bells-overview b { font-size: 18px; line-height: 1.3; white-space: normal; }
#bells .bells-overview > time { margin: 0; font-size: 12px; }
html.profile-open { overflow: hidden; }
.settings-dialog { max-height: calc(100dvh - 32px); border: 0; background: #1c1c22; backdrop-filter: none; -webkit-backdrop-filter: none; }
.settings-dialog[open] { animation: profile-in 220ms var(--ease-out) both; }
.settings-dialog[open]::backdrop { background: rgba(8,9,12,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: profile-dim-in 220ms ease both; }
.settings-dialog.is-closing { animation: profile-out 180ms ease both; pointer-events: none; }
.settings-dialog.is-closing::backdrop { animation: profile-dim-out 180ms ease both; }
.settings-panel { padding: 28px; }
.settings-panel h2 { font-size: 25px; }
.profile-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 26px; }
.profile-item { min-height: 106px; padding: 18px; flex-direction: column-reverse; align-items: flex-start; gap: 16px; background: #282630; }
.profile-item span { gap: 7px; width: 100%; }
.profile-item b { font-size: 15px; }
.settings-toggle { margin-top: 12px; padding: 18px; border: 0; border-radius: var(--radius-surface); background: #24242b; }
.settings-note { line-height: 1.6; color: var(--dim); }
@keyframes profile-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes profile-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes profile-dim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes profile-dim-out { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 430px) {
  .settings-panel { padding: 24px 20px; }
  #bells .bells-overview { column-gap: 12px; row-gap: 8px; }
  #bells .bells-overview > time { grid-column: 2 / -1; }
}
@media (prefers-reduced-transparency: reduce) {
  .app-header, .sidebar, .mobile-nav, .beta-notice, .viewer-header { background: var(--surface-solid) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .settings-dialog::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.sidebar { overflow-y: auto; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.sidebar > .brand, .sidebar > .side-nav, .sidebar-bottom { flex-shrink: 0; }
.sidebar-bottom { margin-top: auto; padding-top: 36px; }
#changes .latest-change.is-new { background: linear-gradient(135deg, #254536 0%, #1a2823 100%); }
#changes .latest-change.is-new > header { color: #b3dbc0; }
.bot-steps { display: grid; gap: 0; padding: 8px 0 28px; margin-top: auto; }
.bot-steps span { display: flex; align-items: center; gap: 14px; padding: 15px 0; color: #b7b0c2; font-size: 12px; border-top: 1px solid #ffffff0a; }
.bot-steps b { color: #cbbbe3; font-size: 11px; font-weight: 500; }
.community-bot > .community-link { margin-top: 0; }
.notification-test, .share-panel button, .share-panel select, .share-buttons a { border: 0; border-radius: 999px; padding: 11px 16px; background: #342c40; color: #d7cae5; font: inherit; cursor: pointer; }
.notification-test { margin-top: 18px; font-size: 12px; }
.share-panel { position: absolute; z-index: 5; top: 78px; right: 16px; width: min(360px,calc(100% - 32px)); max-height: calc(100% - 96px); overflow: auto; padding: 22px; border-radius: 32px; background: #24232b; border: 1px solid #45404e; }
.share-panel[hidden] { display: none; }
.viewer-panel { position: relative; }
.share-panel-heading, .share-buttons { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.share-panel-heading { margin-bottom: 14px; font-size: 14px; }
.share-panel-heading button { padding: 6px 12px; font-size: 22px; }
.share-panel select { width: 100%; }
.share-panel img { display: block; max-height: 220px; max-width: 100%; margin: 16px auto; object-fit: contain; }
.share-panel p { color: #b7b0c2; font-size: 12px; line-height: 1.6; }
.share-buttons { justify-content: flex-start; flex-wrap: wrap; font-size: 12px; }
.share-panel button:disabled { opacity: .45; cursor: default; }

/* Neutral surfaces share the page's charcoal palette. */
:root { --panel-background: linear-gradient(135deg, #1b1e20 0%, #111416 100%); --control-background: #25292b; }
.settings-dialog, .share-panel, .dashboard-heading, .community-card { background: var(--panel-background); }
.share-panel { border-color: #34383a; }
.profile-item, .settings-toggle { background: linear-gradient(135deg, #24282a, #1c2022); }
.settings-close, .notification-test, .share-panel button, .share-panel select, .share-buttons a { background: var(--control-background); color: #d3d6d5; }
.settings-close:hover, .notification-test:hover, .share-panel button:not(:disabled):hover, .share-buttons a:hover { background: #303638; }
.share-panel p, .bot-features li { color: #b4b9b7; }
.community-post, .community-post::before { background: #24282a; }
.community-post .tg-reactions span { background: #303537; color: #d1d5d3; }
.community-post footer { color: #9da5a1; }
#changes .latest-change.is-new { background: radial-gradient(circle at 8% 0, rgba(88, 151, 113, .25), transparent 52%), #171a1c; }
#changes .latest-change.is-new > header span { color: #b3dbc0; }
.bot-features { list-style: none; display: grid; gap: 0; padding: 0 0 24px; margin: auto 0 0; }
.bot-features li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid #ffffff0a; font-size: 12px; line-height: 1.5; }
.bot-features li span { font-size: 17px; flex: 0 0 22px; }