/* Финашка — веб-версия (PWA для iPhone и Android). Дизайн тот же, что у Android-приложения:
   шрифты Onest и Unbounded, палитра — токены из Theme.kt. */

@font-face { font-family: Onest; font-weight: 400; font-display: swap; src: url("fonts/onest_400.ttf") format("truetype"); }
@font-face { font-family: Onest; font-weight: 500; font-display: swap; src: url("fonts/onest_500.ttf") format("truetype"); }
@font-face { font-family: Onest; font-weight: 600; font-display: swap; src: url("fonts/onest_600.ttf") format("truetype"); }
@font-face { font-family: Onest; font-weight: 700; font-display: swap; src: url("fonts/onest_700.ttf") format("truetype"); }
@font-face { font-family: Unbounded; font-weight: 600; font-display: swap; src: url("fonts/unbounded_600.ttf") format("truetype"); }
@font-face { font-family: Unbounded; font-weight: 700; font-display: swap; src: url("fonts/unbounded_700.ttf") format("truetype"); }

:root {
  --bg: #F3F1EC; --card: #FFFFFF; --card2: #E8E5DD; --seg-on: #FFFFFF;
  --text: #17181C; --text2: #34353A; --hint: #6A6964; --hint2: #5E5D58; --chev: #9C9A93;
  --sep: #E4E1D9; --row-sep: #ECE9E2;
  --accent: #3346D3; --on-accent: #FFFFFF; --accent-text: #3346D3; --accent-soft: #E8EAFB; --sel-row: #EEF0FC;
  --radio: #CFCBC2;
  --ink: #17181C; --on-ink: #FFFFFF; --ink-sub: #CFCEC8; --ink-label: #B9B8B2; --ink-btn: rgba(255,255,255,.12);
  --hero-bg: #3346D3; --hero-text: #FFFFFF; --hero-track: rgba(255,255,255,.28); --hero-bar: #FFFFFF; --hero-btn: rgba(255,255,255,.16);
  --bar: rgba(255,255,255,.92); --sw-on: #1E8A4C; --sw-off: #D6D3CB; --live: #12753A; --live-dot: #1E8A4C;
  --tile-bg: #E2F2E7; --tile-fg: #0F4F29; --stat-num: #12753A;
  --danger-bg: #FBE3E3; --danger-fg: #BE3239; --unread: #E0663A;
  --chip-on: #17181C; --on-chip-on: #FFFFFF; --track: #E4E1D9; --knob: #FFFFFF; --mix2: #7C8AF0;
  --lec-fg: #2458C6; --lec-bg: #E7EEFC; --pr-fg: #12753A; --pr-bg: #E2F2E7;
  --edit-fg: #A4500B; --edit-bg: #FAE9DA; --plain-fg: #5E5D58; --plain-bg: #EFEDE7;
  --gold-fg: #8A6200; --gold-bg: #F6EDD3; --purple-fg: #6A3FC4; --purple-bg: #EEE8FB;
  --teal-fg: #0B6B61; --teal-bg: #DFF1EE;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1012; --card: #1A1B1F; --card2: #24252A; --seg-on: #3A3B42;
    --text: #F2F1ED; --text2: #D5D4CF; --hint: #9A9994; --hint2: #A8A7A2; --chev: #6E6D69;
    --sep: #2A2B30; --row-sep: #26272C;
    --accent: #8C98FF; --on-accent: #0D0E14; --accent-text: #A9B2FF; --accent-soft: rgba(140,152,255,.16);
    --sel-row: rgba(140,152,255,.10); --radio: #4A4B52;
    --ink: #24252A; --on-ink: #F2F1ED; --ink-sub: #B4B3AE; --ink-label: #8E8D88; --ink-btn: rgba(255,255,255,.08);
    --hero-bg: #262C5E; --hero-text: #FFFFFF; --hero-track: rgba(255,255,255,.18); --hero-bar: #A9B2FF; --hero-btn: rgba(255,255,255,.10);
    --bar: rgba(26,27,31,.92); --sw-on: #2FA864; --sw-off: #3A3B41; --live: #6FD49A; --live-dot: #2FA864;
    --tile-bg: rgba(50,180,110,.14); --tile-fg: #8FE0B0; --stat-num: #6FD49A;
    --danger-bg: rgba(240,80,80,.16); --danger-fg: #FF8C8F; --unread: #F07A4F;
    --chip-on: #F2F1ED; --on-chip-on: #0F1012; --track: #2A2B30; --knob: #F2F1ED; --mix2: #4A55A8;
    --lec-fg: #94B4FF; --lec-bg: rgba(90,140,255,.16); --pr-fg: #72D39C; --pr-bg: rgba(50,180,110,.16);
    --edit-fg: #F2A765; --edit-bg: rgba(240,140,60,.16); --plain-fg: #B4B3AE; --plain-bg: rgba(255,255,255,.08);
    --gold-fg: #E8C45E; --gold-bg: rgba(220,170,40,.16); --purple-fg: #C3A8FF; --purple-bg: rgba(150,110,255,.16);
    --teal-fg: #63D0C3; --teal-bg: rgba(40,180,165,.16);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font: 15px/1.35 Onest, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none; min-height: 100vh; min-height: 100dvh;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
input, textarea { font: inherit; color: inherit; }
svg { display: block; flex-shrink: 0; }
[hidden] { display: none !important; }

#root { max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; }
.screen { padding: calc(12px + var(--safe-top)) 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.screen.with-bar { padding-bottom: calc(96px + var(--safe-bottom)); }
.screen.with-cta { padding-bottom: calc(96px + var(--safe-bottom)); }
.gap10 { gap: 10px; } .gap16 { gap: 16px; } .gap18 { gap: 18px; }
.col { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--hint); }
.center { text-align: center; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- текст */
.display { font-family: Unbounded, Onest, sans-serif; font-weight: 600; letter-spacing: -0.01em; line-height: 1.22; }
.title { font-family: Unbounded, Onest, sans-serif; font-weight: 600; font-size: 26px; letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
.subtitle { font-size: 14px; color: var(--hint); margin: 4px 0 0; }
.screen-title { padding: 0 4px; }
.section-label { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hint); padding: 4px 4px 0; }
.field-label { font-size: 13px; font-weight: 600; color: var(--hint); padding: 0 4px; }

/* -------------------------------------------------------------- карточки */
.card { background: var(--card); border-radius: 20px; padding: 16px; }
.card.soft { background: var(--card2); }
.card.danger { background: var(--danger-bg); color: var(--danger-fg); }
.group { background: var(--card); border-radius: 20px; overflow: hidden; }
.group > .sep, .sep { height: 1px; background: var(--row-sep); }
.lrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 16px; }
button.lrow:active, .tap:active { background: var(--sel-row); }
.lrow .lt { font-size: 15.5px; font-weight: 600; }
.lrow .ls { font-size: 13px; color: var(--hint); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chev { color: var(--chev); }

.sq { width: 44px; height: 44px; border-radius: 14px; background: var(--card); display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; color: var(--text); }
.sq .dot { position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--unread); box-shadow: 0 0 0 2px var(--card); }
.tbtn { min-height: 44px; padding: 0 14px; border-radius: 14px; background: var(--card); font-size: 14px; font-weight: 600; color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; }
.tbtn.hint { color: var(--hint); } .tbtn.danger { color: var(--danger-fg); }
.back-head { display: flex; align-items: center; gap: 12px; }
.back-head .t { font-family: Unbounded, sans-serif; font-weight: 600; font-size: 20px; line-height: 1.22; }
.back-head .s { font-size: 13px; color: var(--hint); margin-top: 1px; }

.primary { width: 100%; min-height: 56px; border-radius: 16px; background: var(--accent); color: var(--on-accent); font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; }
.primary:disabled { opacity: .4; }
.primary.tg { background: #2AABEE; color: #fff; }
.cta { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(16px + var(--safe-bottom)); background: linear-gradient(to top, var(--bg) 70%, transparent); max-width: 560px; margin: 0 auto; z-index: 5; }
.small-btn { min-height: 42px; padding: 0 12px; border-radius: 12px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.small-btn.accent { background: var(--accent); color: var(--on-accent); }
.small-btn.danger { background: var(--danger-bg); color: var(--danger-fg); }
.small-btn.soft { background: var(--accent-soft); color: var(--accent-text); }
.small-btn:disabled { opacity: .5; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
.chips.scroll::-webkit-scrollbar { display: none; }
.pill-chip { flex-shrink: 0; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; }
.pill-chip .sub { font-weight: 500; opacity: .7; margin-left: 5px; }
.pill-chip.on { background: var(--chip-on); color: var(--on-chip-on); }
.choice { min-height: 44px; padding: 8px 14px; border-radius: 12px; background: var(--card); font-size: 15px; font-weight: 600; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.choice.on { background: var(--accent); color: var(--on-accent); }
.choice-row { display: flex; gap: 6px; } .choice-row .choice { flex: 1; padding: 8px 4px; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--card2); }
.seg button { flex: 1; min-height: 40px; border-radius: 11px; font-size: 14px; font-weight: 500; color: var(--hint2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.seg button.on { background: var(--seg-on); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(23,24,28,.12); }

.switch { display: inline-block; vertical-align: middle; width: 50px; height: 30px; border-radius: 999px; background: var(--sw-off); position: relative; flex-shrink: 0; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--knob); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.switch.on { background: var(--sw-on); } .switch.on::after { left: 23px; }

.avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: Unbounded, sans-serif; font-weight: 600; flex-shrink: 0; }
.itile { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 7px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.tag .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 600; white-space: nowrap; }
.progress { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.banner { border-radius: 14px; background: var(--accent-soft); padding: 10px 14px; font-size: 13px; line-height: 1.38; }
.banner.danger { background: var(--danger-bg); color: var(--danger-fg); }

/* ----------------------------------------------------------- расписание */
.strip { display: flex; gap: 6px; padding-top: 4px; }
.dchip { flex: 1; height: 62px; border-radius: 16px; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dchip.today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.dchip.on { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.dchip .w { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--hint); }
.dchip.on .w { color: var(--on-accent); }
.dchip .n { font-family: Unbounded, sans-serif; font-weight: 600; font-size: 17px; }
.dchip .p { width: 5px; height: 5px; border-radius: 50%; margin-top: 2px; background: var(--hint); }
.dchip.on .p { background: var(--on-accent); } .dchip .p.none { background: transparent; }
.day-head { padding: 10px 8px 0; }
.day-head .t { font-family: Unbounded, sans-serif; font-weight: 600; font-size: 19px; line-height: 1.25; }
.day-head .m { font-size: 13px; color: var(--hint); margin-top: 3px; }
.lesson { display: flex; gap: 14px; padding: 14px 16px; border-radius: 20px; background: var(--card); }
.lesson.now { box-shadow: 0 0 0 2px var(--accent); }
.lesson.faded { opacity: .55; }
.lesson .tm { width: 46px; flex-shrink: 0; padding-top: 1px; display: flex; flex-direction: column; gap: 1px; }
.lesson .tm .s { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lesson .tm .e { font-size: 12px; color: var(--hint); font-variant-numeric: tabular-nums; }
.lesson .tm .n { font-size: 11px; color: var(--hint); margin-top: 8px; }
.lesson .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lesson .subj { font-size: 16px; font-weight: 600; line-height: 1.3; }
.lesson.cancel .subj { text-decoration: line-through; }
.metas { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--hint); }
.meta { display: inline-flex; align-items: center; gap: 4px; }
.meta.b { color: var(--text); font-weight: 600; }
.meta.link { color: var(--accent-text); }
.was { font-size: 13px; color: var(--hint); } .was s { text-decoration: line-through; }
.now-txt { font-size: 12.5px; font-weight: 600; color: var(--accent-text); margin-top: 6px; }
.gapline { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-size: 12.5px; font-weight: 500; color: var(--hint); }
.gapline.live { color: var(--accent-text); font-weight: 600; }
.gapline::before, .gapline::after { content: ""; flex: 1; height: 1px; background: var(--sep); }
.hero { border-radius: 22px; background: var(--hero-bg); color: var(--hero-text); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.hero .l { font-size: 12.5px; font-weight: 600; opacity: .85; }
.hero .t { font-family: Unbounded, sans-serif; font-weight: 600; font-size: 18px; line-height: 1.25; }
.hero .metas { color: var(--hero-text); }
.hero .progress { background: var(--hero-track); margin: 6px 0 2px; } .hero .progress > i { background: var(--hero-bar); }
.hero-btns { display: flex; gap: 8px; margin-top: 6px; }
.hero-btn { flex: 1; height: 44px; border-radius: 12px; background: var(--hero-btn); color: var(--hero-text); font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; }
.day-anim { animation: dayin .16s ease-out; }
@keyframes dayin { from { opacity: 0; transform: translateX(var(--dx, 12px)); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- поля */
.search { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 14px; background: var(--card); color: var(--hint); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--text); }
.search input::placeholder, .area::placeholder { color: var(--hint); }
.area { width: 100%; min-height: 118px; border: 0; outline: 0; resize: none; border-radius: 18px; background: var(--card); padding: 14px 16px; font-size: 16px; line-height: 1.45; color: var(--text); display: block; }
.area.one { min-height: 52px; height: 52px; }
.area:focus { box-shadow: 0 0 0 2px var(--accent); }
.counter { text-align: right; font-size: 12px; color: var(--hint); padding: 0 4px; }

/* ---------------------------------------------------------- нижняя панель */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--bar); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--sep); padding: 6px 8px calc(6px + var(--safe-bottom)); display: flex; max-width: 560px; margin: 0 auto; }
.bar.compact { padding-left: 2px; padding-right: 2px; }
.bar button { flex: 1; min-width: 0; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--hint); font-size: 11px; font-weight: 500; }
.bar.compact button { font-size: 10px; letter-spacing: -0.2px; }
.bar button span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar button.on { color: var(--accent-text); font-weight: 600; }

/* ------------------------------------------------------------ состояния */
.message { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; min-height: 300px; }
.message .e { font-size: 44px; }
.message .t { font-family: Unbounded, sans-serif; font-weight: 600; font-size: 18px; margin-top: 14px; }
.message .x { color: var(--hint); font-size: 14px; margin-top: 6px; max-width: 340px; }
.message .primary { max-width: 300px; margin-top: 22px; }
.message .link { color: var(--accent-text); font-weight: 600; margin-top: 8px; padding: 12px; }
.loading { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--accent-soft); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.spin.small { width: 20px; height: 20px; border-width: 2px; }
.primary .spin { border-color: rgba(255,255,255,.35); border-top-color: currentColor; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(96px + var(--safe-bottom)); z-index: 30; max-width: 528px; margin: 0 auto; background: var(--ink); color: var(--on-ink); border-radius: 14px; padding: 14px 16px; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.2); animation: dayin .2s; }
.ptr { height: 0; overflow: hidden; display: flex; justify-content: center; align-items: flex-end; transition: height .15s; }
.ptr.on { height: 44px; }

/* --------------------------------------------------------------- диалоги */
.dlg-bg { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; padding: 24px; animation: fade .15s; }
.dlg { width: 100%; max-width: 420px; background: var(--bg); border-radius: 26px; padding: 22px; display: flex; flex-direction: column; gap: 14px; max-height: 85vh; overflow: auto; }
.dlg .t { font-family: Unbounded, sans-serif; font-weight: 600; font-size: 18px; }
.dlg .x { font-size: 14.5px; color: var(--text2); white-space: pre-line; }
.dlg .btns { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@keyframes fade { from { opacity: 0; } }

/* ------------------------------------------------------ рамки установки */
.install-step { display: flex; gap: 12px; align-items: center; }
.install-step .n { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.install-step .ic { display: inline-flex; vertical-align: middle; margin: 0 3px; color: var(--accent-text); }
.logo { width: 64px; height: 64px; border-radius: 20px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; }
.arrow-down { position: fixed; bottom: calc(8px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); color: var(--accent); animation: bob 1.2s ease-in-out infinite; z-index: 5; }
@keyframes bob { 50% { transform: translate(-50%, 8px); } }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { background: var(--card); border-radius: 20px; padding: 14px 16px; }
.stat .v { font-family: Unbounded, sans-serif; font-weight: 600; font-size: 24px; }
.stat .l { font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.stat .s { font-size: 12px; color: var(--hint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { min-width: 24px; height: 24px; border-radius: 999px; background: var(--unread); color: #fff; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; }
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.tiles div { min-height: 52px; border-radius: 14px; background: var(--tile-bg); color: var(--tile-fg); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; overflow: hidden; }
.actions2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.atile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; border-radius: 20px; background: var(--card); text-align: left; }
.atile .itile { margin-bottom: 8px; }
.atile .a { font-size: 15.5px; font-weight: 600; } .atile .b { font-size: 12.5px; color: var(--hint); }
.atile:disabled .a { color: var(--hint); }
.ink-card { background: var(--ink); color: var(--on-ink); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.ink-btn { flex: 1; min-height: 44px; border-radius: 12px; background: var(--ink-btn); color: var(--on-ink); font-size: 14.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; }
.radio { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--radio); flex-shrink: 0; }
.radio.on { width: 24px; height: 24px; background: var(--accent); color: var(--on-accent); box-shadow: none; display: flex; align-items: center; justify-content: center; }
.grow-row { display: flex; gap: 8px; } .grow-row > * { flex: 1; }
.audience { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; display: flex; }
.w-100 { width: 100%; }

/* ----------------------------------------------------------- плашки из админки */
.promo { display: flex; align-items: center; gap: 10px; padding: 11px 8px 11px 13px; border-radius: 16px;
  background: var(--accent-soft); color: var(--text); }
.promo-green { background: var(--pr-bg); }
.promo-gold { background: var(--gold-bg); }
.promo-ico { font-size: 22px; line-height: 1; }
.promo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14.5px; line-height: 1.3; }
.promo-text small { color: var(--hint); font-size: 12.5px; }
.promo-more { border-radius: 11px; padding: 8px 12px; font-size: 13.5px; font-weight: 600; white-space: nowrap;
  background: var(--accent); color: var(--on-accent); }
.promo-green .promo-more { background: var(--pr-fg); color: #fff; }
.promo-gold .promo-more { background: var(--gold-fg); color: #fff; }
.promo-close { color: var(--hint); font-size: 15px; padding: 6px; line-height: 1; }

/* ------------------------------------------------------------ заметки к парам */
.lesson.tap { cursor: pointer; }
.lesson-note { display: flex; gap: 6px; margin-top: 8px; padding: 7px 10px; border-radius: 12px;
  background: var(--gold-bg); color: var(--text); font-size: 13.5px; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }