/* Расписание · v2 features: tasks, bells, share, now strip, subject colours, illustrations, splash.
   Uses the tokens of styles.css. Motion: transform / opacity only. */

/* ---------------------------------------------------------------- checkbox + strike */

.check {
  position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 0 0 2px var(--accent);
  transition: box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.check::before {  /* fill grows from the centre */
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent-fill);
  transform: scale(0); opacity: 0; transition: transform var(--t) var(--ease-out), opacity var(--t);
}
.check::after { content: ""; position: absolute; inset: -10px; }  /* 44 px hit area */
.check svg.i { position: relative; font-size: 15px; stroke-width: 2.6; transform: scale(.4); opacity: 0;
  transition: transform var(--t) var(--ease-out) 60ms, opacity var(--t-fast) 60ms; }
.check:active { transform: scale(.88); }
.check[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--accent-fill); }
.check[aria-checked="true"]::before { transform: scale(1); opacity: 1; }
.check[aria-checked="true"] svg.i { transform: none; opacity: 1; }
.check[aria-checked="true"] { animation: pop 320ms var(--ease-out); }

/* Strike-through: works across wrapped lines; only its colour fades in (paint, no layout). */
.strike, .task__text {
  overflow-wrap: anywhere; text-decoration-line: line-through; text-decoration-thickness: 1.5px;
  text-decoration-color: transparent; transition: text-decoration-color 320ms var(--ease), color var(--t);
}
.is-done > .strike, .is-done .task__text { color: var(--hint); text-decoration-color: currentColor; }

/* note line on a lesson card */
.lesson__note { align-items: center; }
.lesson__note .check { width: 22px; height: 22px; margin: -2px 0; }
.lesson__note .check svg.i { font-size: 13px; }
.lesson__note .strike { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lesson__note.is-done { background: var(--grey-soft); }
.lesson__note.is-done .check { box-shadow: none; }

/* the sheet's "done" line */
.note-done {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); margin-bottom: var(--s4);
  border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.note-done .strike { flex: 1; min-width: 0; white-space: pre-wrap; }
.note-done__label { flex: none; font-size: var(--fs-xs); font-weight: 700; color: var(--accent); opacity: 0;
  transform: translateX(6px); transition: opacity var(--t), transform var(--t) var(--ease-out); }
.note-box.is-done .note-done { background: var(--grey-soft); }
.note-box.is-done .note-done__label { opacity: 1; transform: none; color: var(--green-ok); }
.note-box.is-done .note-done > .strike { color: var(--hint); }
.note-box.is-done .note-done > .strike { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- tasks section */

.section-title .count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; margin-left: 8px;
  border-radius: var(--r-pill); background: var(--accent-fill); color: var(--on-accent);
  font-size: var(--fs-xs); font-weight: 700; vertical-align: 2px; letter-spacing: 0;
}
.tasks__card { padding: 4px 0; }
.tasks__date {
  padding: 12px var(--s4) 2px; font-size: var(--fs-xs); font-weight: 700; color: var(--hint);
  text-transform: uppercase; letter-spacing: .06em;
}
.task { display: flex; align-items: flex-start; gap: var(--s3); padding: 10px var(--s4); }
.task .check { margin-top: 1px; }
.task__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; border-radius: var(--r-sm); }
.task__text { font-size: var(--fs-b); font-weight: 600; line-height: 1.35; }
.task__meta { font-size: var(--fs-s); font-weight: 500; color: var(--hint); }
.task.is-done .task__body { opacity: .8; }
.tasks__done .task { opacity: .85; }
.tasks__fold {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px;
  padding: 0 var(--s4); margin-top: 4px; border-top: 1px solid var(--line);
  font-size: var(--fs-m); font-weight: 600; color: var(--hint);
}
.tasks__fold svg.i { font-size: 18px; transition: transform var(--t) var(--ease); }
.tasks__fold[aria-expanded="true"] svg.i { transform: rotate(180deg); }
.tasks__done:not([hidden]) { animation: rise var(--t) var(--ease-out) both; }
.tasks__empty { display: flex; align-items: center; gap: var(--s3); padding: 14px var(--s4); font-size: var(--fs-m);
  color: var(--hint); font-weight: 500; line-height: 1.45; }
.tasks__empty svg.i { flex: none; font-size: 20px; color: var(--accent); }
.tasks__empty.is-clear svg.i { color: var(--green-ok); }

/* a day tile with open tasks: a small dot under the date */
.tile__task {
  display: inline-block; width: 7px; height: 7px; margin-left: 3px; border-radius: 50%; vertical-align: top;
  background: var(--accent);
}
.tile.is-selected .tile__task { background: #fff; }

/* shortened day (its own, shorter bell times): a small clock by the date, a line in the day's head,
   a badge on the bells card */
.tile__short { display: inline-flex; margin-left: 3px; vertical-align: top; font-size: 13px; color: var(--amber-ink); }
.tile.is-selected .tile__short { color: #fff; }
.day__short {
  flex-basis: 100%; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-s); font-weight: 600; color: var(--amber-ink);
}
.day__short svg.i { font-size: 15px; }
.bells__titles { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; flex: none; }
.bells__badge {
  padding: 1px 8px; border-radius: var(--r-pill); background: var(--amber-soft); color: var(--amber-ink);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}

/* cards appear one after another */
.cascade > * { animation: cascade-in 340ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes cascade-in { from { opacity: 0; transform: translateY(10px); } }

@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.lesson:has(.check:active) { transform: none; }

/* ---------------------------------------------------------------- live hero */

.hero { background: #2D1F6E; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__layer { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--ease); }
.hero__layer--lesson { background: radial-gradient(120% 90% at 100% 0%, #6A50D8 0%, transparent 60%), linear-gradient(150deg, #3B2A8F, #2D1F6E); }
.hero__layer--before { background: radial-gradient(90% 80% at 100% 100%, rgba(255, 166, 107, .55) 0%, transparent 65%), linear-gradient(160deg, #3B2A8F 10%, #5B3AA6 70%, #8A4E9E); }
.hero__layer--break { background: radial-gradient(110% 90% at 100% 0%, #3CC4A8 0%, transparent 60%), linear-gradient(150deg, #13706B, #0D4F57); }
.hero__layer--after { background: radial-gradient(100% 90% at 100% 0%, #FF8FB1 0%, transparent 58%), linear-gradient(150deg, #5A2D9C, #2D1F6E); }
.hero__layer--free { background: radial-gradient(100% 90% at 100% 0%, #8C86B8 0%, transparent 60%), linear-gradient(150deg, #48426A, #2C2846); }
.hero[data-state="lesson"] .hero__layer--lesson, .hero[data-state="before"] .hero__layer--before,
.hero[data-state="break"] .hero__layer--break, .hero[data-state="after"] .hero__layer--after,
.hero[data-state="free"] .hero__layer--free { opacity: 1; }
.hero[data-state="break"] .hero__room { color: #0D5A55; }
.hero[data-state="free"] .hero__room { color: #3A3456; }
.hero__content { position: relative; }
.hero__label svg.i { font-size: 15px; }
.hero__label.is-live svg.i + span::before { content: none; }
.hero__label.is-live:has(svg.i)::before { content: none; }
.hero__half {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s3); padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12); font-size: var(--fs-s); font-weight: 600; color: rgba(255, 255, 255, .92);
}
.hero__half[hidden] { display: none; }
.hero__kicker { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-bottom: 4px; }
.hero__next { margin-top: var(--s4); }
.hero__next .hero__title { font-size: var(--fs-xl); }
.hero__title--xl { font-size: var(--fs-hero); }
.ring .ring__value { transition: stroke-dashoffset 1100ms var(--ease-out); }

.confetti { position: absolute; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; z-index: 2; }
.confetti i {
  position: absolute; left: 0; top: 0; border-radius: 2px; opacity: 0;
  animation: burst 1500ms var(--ease-out) var(--d, 0ms) both;
}
@keyframes burst {
  0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 60px)) rotate(var(--r)) scale(1); }
}

.sk-hero { height: 236px; border-radius: var(--r-xl); margin-top: var(--s5); }

/* ---------------------------------------------------------------- bells */

.bells { margin-top: var(--s4); }
.bells__head {
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 56px; padding: 0 var(--s4);
}
.bells__icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 18px; flex: none; }
.bells__title { font-size: var(--fs-b); font-weight: 700; }
.bells__sum { margin-left: auto; font-size: var(--fs-s); font-weight: 600; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bells__chev { font-size: 18px; color: var(--hint); flex: none; transition: transform var(--t) var(--ease); }
.bells__head[aria-expanded="true"] .bells__chev { transform: rotate(180deg); }
.bells__list { padding: 0 var(--s4) var(--s3); }
.bells__list:not([hidden]) { animation: rise var(--t) var(--ease-out) both; }
.bells--sheet { margin-top: var(--s4); border-radius: var(--r-md); background: var(--bg); }
.bells--sheet .bells__list { padding: var(--s2) var(--s4); }
.bell { position: relative; display: flex; align-items: center; gap: var(--s3); padding: 10px 10px; margin: 0 -10px; border-radius: var(--r-md); }
.bell__num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--bg); font-size: var(--fs-m); font-weight: 700; color: var(--hint);
}
.bells--sheet .bell__num { background: var(--surface); }
.bell__main { flex: 1; min-width: 0; }
.bell__time { font-size: var(--fs-b); font-weight: 700; letter-spacing: -.01em; }
.bell__parts { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--fs-s); font-weight: 500; color: var(--hint); }
.bell__parts .is-now { color: var(--accent); font-weight: 700; }
.bell__live { flex: none; font-size: var(--fs-xs); font-weight: 700; color: var(--on-accent); background: var(--accent-fill); padding: 3px 8px; border-radius: var(--r-pill); }
.bell.is-now { background: var(--accent-soft); }
.bell.is-now .bell__num { background: var(--accent-fill); color: var(--on-accent); }
.bell-gap {
  display: flex; align-items: center; gap: 8px; margin-left: 14px; padding: 2px 0 2px 26px; border-left: 2px dotted var(--line-strong);
  font-size: var(--fs-xs); font-weight: 600; color: var(--hint); min-height: 22px;
}
.bell-gap svg.i { font-size: 14px; }
.bell-gap.is-big { color: var(--p0-ink); }
.bell-gap.is-now { color: var(--accent); border-left-color: var(--accent); }
.bell-gap.is-now::after { content: "сейчас"; margin-left: auto; font-weight: 700; }
.row--link { width: 100%; text-align: left; transition: background-color var(--t-fast); }
.row--link:active { background: var(--accent-soft); }
.row__chev { font-size: 18px; color: var(--hint); }

/* ---------------------------------------------------------------- share */

.day__head { flex-wrap: nowrap; align-items: center; }
.day__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.icon-btn {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); font-size: 19px; transition: transform var(--t-fast) var(--ease);
}
.icon-btn::before { content: ""; position: absolute; inset: -2px; }
.icon-btn:active { transform: scale(.9); }
.share-opts { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s5); }
.share-opt {
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 64px; padding: 10px var(--s4);
  border-radius: var(--r-md); background: var(--bg); text-align: left;
  transition: transform var(--t-fast) var(--ease), opacity var(--t);
}
.share-opt:active { transform: scale(.98); }
.share-opt:disabled { opacity: .5; }
.share-opt.is-busy { opacity: .7; }
.share-opt.is-busy .share-opt__icon svg.i { animation: pulse 1s ease-in-out infinite; }
.share-opt__icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none;
  background: var(--accent-fill); color: var(--on-accent); font-size: 21px; }
.share-opt__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.share-opt__text b { font-size: var(--fs-b); font-weight: 700; }
.share-opt__text span { font-size: var(--fs-s); color: var(--hint); font-weight: 500; line-height: 1.35; }
.share-opt__chev { color: var(--hint); font-size: 18px; flex: none; }
.chip--share { margin-left: auto; width: 36px; padding: 0; justify-content: center; color: var(--accent); }
.chip--share svg.i { font-size: 17px; }
.chip--share svg.i { color: var(--accent); }
.sheet:focus-visible { outline: none; }

/* ---------------------------------------------------------------- own subject colours */

:root {
  --c-plum: #9B59B6; --c-plum-ink: #7A3E94;
  --c-indigo: #5C6BC0; --c-indigo-ink: #3F4FA8;
  --c-blue: #3D8BE0; --c-blue-ink: #1F64B0;
  --c-sky: #29A9D6; --c-sky-ink: #0F7499;
  --c-teal: #26A69A; --c-teal-ink: #0E6E65;
  --c-green: #4CAF50; --c-green-ink: #2C7A30;
  --c-olive: #9AA435; --c-olive-ink: #5A6312;
  --c-sand: #C9A24A; --c-sand-ink: #7A5E1C;
  --c-orange: #EF8A3C; --c-orange-ink: #A95412;
  --c-coral: #E86A5C; --c-coral-ink: #B03F33;
  --c-rose: #E0609E; --c-rose-ink: #A8336D;
  --c-slate: #78839A; --c-slate-ink: #4A5568;
}
:root[data-theme="dark"] {
  --c-plum: #C08AD9; --c-plum-ink: #D3A2E8;
  --c-indigo: #8C9BF0; --c-indigo-ink: #A3B0FF;
  --c-blue: #6BB0F5; --c-blue-ink: #86C0FA;
  --c-sky: #5CC8EB; --c-sky-ink: #78D4F0;
  --c-teal: #4FC9BC; --c-teal-ink: #66D6CA;
  --c-green: #72C976; --c-green-ink: #86D68A;
  --c-olive: #B9C25E; --c-olive-ink: #C8D06E;
  --c-sand: #D9B862; --c-sand-ink: #E3C676;
  --c-orange: #F5A462; --c-orange-ink: #F8B47A;
  --c-coral: #F48C80; --c-coral-ink: #F79E94;
  --c-rose: #EE88BA; --c-rose-ink: #F29CC6;
  --c-slate: #9AA5BB; --c-slate-ink: #AEB8CC;
}
.color-box { margin-top: var(--s5); }
.swatches { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; padding: var(--s3); border-radius: var(--r-md); background: var(--bg); }
.swatch {
  position: relative; aspect-ratio: 1; width: 100%; max-width: 40px; justify-self: center; border-radius: 50%;
  background: var(--sw); color: #fff; display: grid; place-items: center;
  transition: transform var(--t-fast) var(--ease);
}
.swatch::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 2px var(--sw, var(--hint));
  opacity: 0; transform: scale(.85); transition: opacity var(--t), transform var(--t) var(--ease-out); }
.swatch svg.i { font-size: 16px; stroke-width: 2.6; opacity: 0; transform: scale(.5); transition: opacity var(--t-fast), transform var(--t) var(--ease-out); }
.swatch[aria-checked="true"]::after { opacity: 1; transform: none; }
.swatch[aria-checked="true"] svg.i { opacity: 1; transform: none; }
.swatch:active { transform: scale(.88); }
.swatch--auto { background: conic-gradient(var(--p0), var(--p3), var(--p6), var(--p9), var(--p1), var(--p5), var(--p0)); }
.swatch--auto::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--bg); }
.swatch--auto::after { box-shadow: 0 0 0 2px var(--accent); }

/* ---------------------------------------------------------------- illustrations */

.state__pic { width: 168px; margin-bottom: var(--s4); }
.art { display: block; width: 100%; height: auto; overflow: visible; }
.art .a-bg { fill: var(--accent-soft); }
.art .a-sh { fill: var(--accent-soft-2); opacity: .7; }
.art .a-1 { fill: var(--accent-fill); }
.art .a-2 { fill: color-mix(in srgb, var(--accent-fill) 32%, var(--surface)); }
.art .a-3 { fill: #F2B35B; }
.art .a-4 { fill: var(--surface); }
.art .o6 { opacity: .6; }
.art .a-l { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.art .a-l--ink { stroke: var(--accent-fill); }
.art .a-l--warm { stroke: #F2B35B; }
.art .a-handle { fill: none; stroke: var(--accent-fill); stroke-width: 9; stroke-linecap: round; }
:root[data-theme="dark"] .art .a-2 { fill: color-mix(in srgb, var(--accent-fill) 45%, var(--surface)); }
:root[data-theme="dark"] .art .a-4 { fill: color-mix(in srgb, #fff 88%, var(--accent-fill)); }
:root[data-theme="dark"] .art .a-l--ink { stroke: var(--accent-fill); }
.art .fl { animation: float 4.2s ease-in-out infinite; transform-box: fill-box; }
.art .fl2 { animation: float 4.2s ease-in-out -1.6s infinite; transform-box: fill-box; }
.art .tw { animation: twinkle 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .art .fl, .art .fl2, .art .tw { animation: none; } }

/* ---------------------------------------------------------------- splash */

.splash {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--bg);
  transition: opacity 280ms var(--ease);
}
.splash.is-gone { opacity: 0; pointer-events: none; }
.splash__center { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: splash-in 520ms var(--ease-out) both; }
.splash.is-gone .splash__center { transform: scale(1.04); transition: transform 280ms var(--ease); }
.splash__mark { width: 84px; height: 84px; margin-bottom: 14px; filter: drop-shadow(0 14px 28px rgba(55, 37, 121, .35)); }
.splash__today { transform-box: fill-box; transform-origin: center; animation: today-pulse 1.4s ease-in-out infinite; }
.splash__word { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.splash__sub { font-size: var(--fs-s); font-weight: 600; color: var(--hint); letter-spacing: .04em; }
@keyframes splash-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes today-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.82); } }

/* ---------------------------------------------------------------- now strip */

.now-strip {
  position: fixed; z-index: 19; left: 50%; bottom: calc(var(--nav-h) + var(--safe-bottom) + 10px);
  width: calc(100% - 24px); max-width: 456px; min-height: 44px; padding: 0 12px 0 14px; overflow: hidden;
  display: flex; align-items: center; gap: 10px; border-radius: 16px;
  background: linear-gradient(135deg, #3B2A8F, #5440C0); color: #fff;
  font-size: var(--fs-m); font-weight: 600; box-shadow: 0 10px 26px -12px rgba(30, 18, 90, .7);
  transform: translate(-50%, 16px) scale(.98); opacity: 0; pointer-events: none;
  transition: transform 360ms var(--ease-out), opacity 240ms var(--ease);
}
.now-strip.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.now-strip:active { transform: translate(-50%, 0) scale(.98); }
.now-strip.is-break { background: linear-gradient(135deg, #13706B, #1E8F84); box-shadow: 0 10px 26px -12px rgba(10, 70, 66, .7); }
.now-strip__lead { flex: none; display: grid; place-items: center; width: 18px; font-size: 17px; }
.now-strip__dot { width: 8px; height: 8px; border-radius: 50%; background: #7CF0B0; animation: pulse 1.6s ease-in-out infinite; }
.now-strip__text { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-strip__chev { flex: none; font-size: 17px; opacity: .7; }
.now-strip__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .85);
  transform-origin: left; transform: scaleX(0); transition: transform 1200ms var(--ease-out);
}
.now-strip__bar::before { content: ""; position: absolute; inset: 0; background: inherit; }
body.has-strip .view { padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--s8) + 54px); }
body.has-strip .toast { bottom: calc(var(--nav-h) + var(--safe-bottom) + 70px); }
.view { overflow-x: clip; }
.bells.is-quiet .bells__list { animation: none; }
@media (max-width: 350px) {
  .chips { gap: 6px; flex-wrap: nowrap; }
  .chip { padding: 0 10px; gap: 5px; }
  .chip--share { padding: 0; flex: none; }
  .swatches { gap: 8px; padding: 10px; }
}

/* «Сообщить об ошибке» under the lesson details */
.report-box { margin-top: var(--s4); }
.link-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none;
  color: var(--hint); font: inherit; font-size: var(--fs-m); cursor: pointer;
}
.link-btn svg { width: 16px; height: 16px; }
.link-btn:active { opacity: .6; }

/* «Иконка на главном экране» */
.home-row__action { flex: none; }
.home-row__done { font-size: var(--fs-s); font-weight: 600; color: var(--hint); white-space: nowrap; }
.home-prompt { display: grid; grid-template-columns: 40px 1fr 32px; align-items: center; column-gap: var(--s3); row-gap: var(--s2);
  padding: 12px var(--s3) 12px var(--s4); margin-bottom: var(--s4); }
.home-prompt__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent); font-size: 22px; }
.home-prompt__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-s); line-height: 1.35; }
.home-prompt__text span { color: var(--hint); }
.home-prompt__add { grid-column: 2; justify-self: start; min-height: 36px; padding: 0 var(--s4); font-size: var(--fs-m); }
.home-prompt__close { position: relative; display: grid; place-items: center; width: 32px; height: 32px; color: var(--hint); font-size: 18px; }
.home-prompt__close::before { content: ""; position: absolute; inset: -6px; }

/* «🏁 до конца пар …» in the hero and the now strip */
.hero__left {
  display: flex; align-items: center; gap: 6px; width: fit-content; margin-top: var(--s3); padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12); font-size: var(--fs-s); font-weight: 600; color: rgba(255, 255, 255, .92);
}
.hero__left svg.i { font-size: 14px; }
.hero__left[hidden] { display: none; }
.hero__half + .hero__left, .hero__half[hidden] + .hero__left { margin-top: var(--s2); }
.now-strip__left { flex: none; font-size: var(--fs-s); font-weight: 600; opacity: .85; white-space: nowrap; }
.now-strip__left[hidden] { display: none; }
@media (max-width: 379px) { .now-strip__left { display: none; } }

/* ---------------------------------------------------------------- admin tab */

.nav__item .nav__icon { max-width: 100%; }
.adm-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s5); }
.adm-kpi { padding: 14px var(--s4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); min-width: 0; }
.adm-kpi__value { font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.adm-kpi__label { margin-top: 4px; font-size: var(--fs-s); font-weight: 600; }
.adm-kpi__sub { margin-top: 2px; font-size: var(--fs-xs); color: var(--hint); }
.adm-card { padding: 14px var(--s4); }
.adm-card__meta { margin: var(--s2) 0 4px; font-size: var(--fs-s); color: var(--hint); font-weight: 600; }
.adm-seg { overflow-x: auto; }
.adm-seg button { flex: 1 0 auto; white-space: nowrap; }
.adm-chart { display: block; width: 100%; height: auto; overflow: visible; color: var(--accent); }
.adm-chart__grid { stroke: var(--line); stroke-width: 1; }
.adm-chart__scale, .adm-chart__label { fill: var(--hint); font-size: 10px; font-weight: 600; font-family: inherit; }
.adm-chart__line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.adm-chart__area { fill: currentColor; opacity: .14; }
.adm-chart__dot { fill: currentColor; stroke: var(--surface); stroke-width: 2; }
.adm-chart__bar { fill: currentColor; }
.adm-line { display: flex; justify-content: space-between; gap: var(--s3); padding: 7px 0; font-size: var(--fs-m); }
.adm-line + .adm-line { border-top: 1px solid var(--line); }
.adm-line span { color: var(--hint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-line b { flex: none; font-variant-numeric: tabular-nums; }
.adm-bar + .adm-bar { margin-top: var(--s3); }
.adm-bar__head { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--fs-m); }
.adm-bar__head b { flex: none; font-variant-numeric: tabular-nums; }
.adm-bar__track { margin-top: 6px; height: 8px; border-radius: var(--r-pill); background: var(--bg); overflow: hidden; }
.adm-bar__fill { height: 100%; border-radius: inherit; background: var(--accent-fill); }
.adm-bar__fill--green { background: var(--green-ok); }
.adm-note, .adm-sub { margin-top: var(--s3); font-size: var(--fs-xs); color: var(--hint); line-height: 1.4; }
.adm-sub { font-weight: 600; }
.adm-empty { color: var(--hint); font-size: var(--fs-m); }
.adm-search { display: flex; gap: var(--s2); }
.adm-input {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: var(--r-md); border: 0; background: var(--bg);
  color: var(--text); font: inherit; font-size: 16px;
}
.adm-user { margin-top: var(--s3); }
.adm-user .btn { margin-top: var(--s3); width: 100%; }
.adm-change + .adm-change { border-top: 1px solid var(--line); }
.adm-change summary { padding: 10px 0; font-size: var(--fs-m); cursor: pointer; }
.adm-change__text { padding: 0 0 12px; font-size: var(--fs-s); line-height: 1.5; white-space: pre-line; color: var(--text); }

.seg--tight button { padding: 0 2px; white-space: nowrap; letter-spacing: -.01em; }