:root {
  --bg: #f7f3ed;
  --surface: #ffffff;
  --ink: #1d1b18;
  --muted: #6f685f;
  --line: #ddd5ca;
  --accent: #1faa8a;
  --accent-strong: #168570;
  --accent-2: #b94435;
  --accent-3: #2f5d9f;
  --soft: #dff5ee;
  --warn: #fff4dc;
  --danger: #fff0ed;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

.auth-screen {
  align-items: center;
  display: grid;
  min-height: 100vh;
  padding: 20px;
}

.app-shell {
  display: none;
  min-width: 0;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 0 auto;
  max-width: 460px;
  padding: 24px;
  width: 100%;
}

.auth-card h1 {
  margin: 0 0 18px;
}

.auth-tabs {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 14px;
}

.auth-tab.active {
  background: var(--soft);
  border-color: transparent;
  color: var(--accent);
  font-weight: 600;
}

.auth-hint {
  margin-top: 12px;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  min-height: 40px;
  padding: 0 14px;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

button:hover {
  background: var(--soft);
  border-color: var(--accent);
}

button:active {
  transform: scale(0.98);
}

button:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 170, 138, 0.18);
  outline: none;
}

button:disabled,
button[disabled] {
  background: var(--bg);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
  transform: none;
}

.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
}

.danger {
  background: var(--danger);
  border-color: #e5b3aa;
  color: #9b2d20;
}

.danger:hover {
  background: #ffe4e0;
  border-color: #cf887a;
  color: #7a1c12;
}

.topbar {
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 14px 28px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.topbar > div {
  min-width: 0;
}

.topbar h1,
.section-head h2 {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.compact-head h2 {
  font-size: 18px;
}

.topbar h1 {
  /* used to top out at 40px which felt huge on 4K — capped at 28 */
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.1;
}

/* The eyebrow "MVP СЕРВИСА ЗАПИСИ" above the topbar h1 was a dev-time
   tagline. It duplicates the page identity and visually competes with
   the h1 — hide it everywhere except the auth screen / inside the
   section-head where it actually labels the section below. */
.topbar .eyebrow {
  display: none;
}

.topbar__actions,
.inline-controls {
  align-items: center;
  display: flex;
  gap: 10px;
}

.inline-controls {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.icon-button {
  font-size: 20px;
  width: 42px;
}

.eyebrow {
  color: var(--muted);
  font-size: clamp(10px, 1.8vw, 12px);
  letter-spacing: 0.08em;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: calc(100vh - 79px);
  min-width: 0;
}

body.student-mode .layout {
  display: block;
}

body.student-mode .sidebar,
body.student-mode #seedBtn,
body.student-mode #telegramTextBtn {
  display: none;
}

body.student-mode .content {
  margin: 0 auto;
  max-width: 980px;
  padding-inline: clamp(12px, 4vw, 28px);
}

.sidebar {
  border-right: 1px solid var(--line);
  padding: 18px;
}

@media (min-width: 769px) {
  /* Desktop only — pin nav to the viewport so long pages (client
     detail, 1500-row tables) keep navigation reachable without
     scrolling back to the top. Mobile gets its own bottom-fixed
     pill nav further down in this file; we must NOT bleed the
     desktop sticky rule into mobile, which used to make the
     sidebar take the full viewport on phones. */
  .sidebar {
    align-self: start;
    height: calc(100vh - 79px);
    overflow-y: auto;
    position: sticky;
    top: 79px;
  }
}

.nav {
  background: transparent;
  border: 1px solid transparent;
  display: block;
  margin-bottom: 6px;
  text-align: left;
  width: 100%;
}

.nav:hover {
  background: var(--soft);
  border-color: transparent;
}

.nav.active {
  background: var(--soft);
  color: var(--accent);
  border-color: transparent;
  font-weight: 600;
}

.nav.active:hover {
  background: var(--soft);
}

.content {
  margin: 0 auto;
  /* cap content width on big monitors so tables / calendar don't
     stretch to 4K width — desktop layout used to fill the entire
     viewport which made data-tables look unreadable on wide displays */
  max-width: 1400px;
  min-width: 0;
  overflow-x: hidden;
  padding: 24px clamp(16px, 2.5vw, 32px);
  width: 100%;
}

.view {
  display: none;
  min-width: 0;
}

.view.active {
  display: block;
}

.section-head {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
  min-width: 0;
}

.section-head > div,
.section-head > * {
  min-width: 0;
}

.compact-head {
  margin-bottom: 12px;
}

input,
select,
textarea {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 40px;
  padding: 10px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 170, 138, 0.16);
  outline: none;
}

.stats {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.week-switcher {
  align-items: stretch;
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
}

.week-switcher .icon-button {
  flex: 0 0 44px;
  min-height: 64px;
}

.day-tabs {
  display: grid;
  flex: 1;
  gap: 8px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  overflow-x: auto;
}

.day-tab {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  min-height: 64px;
  min-width: 0;
  padding: 8px 6px;
  white-space: nowrap;
}

.day-tab strong {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.day-tab span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.day-tab small {
  color: var(--muted);
  font-size: 10px;
}

.day-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.day-tab.active strong,
.day-tab.active span,
.day-tab.active small {
  color: #fff;
}

.stat,
.day,
.client,
.tool-panel,
.student-status {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.stat {
  padding: 14px;
}

.stat strong {
  display: block;
  font-size: 26px;
}

.schedule {
  display: grid;
  gap: 14px;
  overflow-x: auto;
}

.schedule.daily {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: block;
  overflow-x: auto;
}

.schedule.compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.calendar-grid {
  min-width: 1040px;
}

.calendar-head {
  background: #f4eee5;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  display: grid;
  font-size: 13px;
  font-weight: 700;
  grid-template-columns: 92px repeat(var(--zone-count), minmax(280px, 1fr));
}

.calendar-date,
.calendar-zone-head {
  border-right: 1px solid var(--line);
  min-height: 58px;
  padding: 14px;
}

.calendar-body {
  display: grid;
  grid-template-columns: 92px 1fr;
}

.calendar-time-axis {
  background: #fffdf9;
  border-right: 1px solid var(--line);
  height: calc(var(--hour-count) * var(--hour-height));
  position: relative;
}

.calendar-time-label {
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  left: 0;
  padding-left: 14px;
  position: absolute;
  transform: translateY(-8px);
}

.calendar-columns {
  display: grid;
  grid-template-columns: repeat(var(--zone-count), minmax(280px, 1fr));
}

.calendar-zone {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--hour-height) - 1px),
      var(--line) calc(var(--hour-height) - 1px),
      var(--line) var(--hour-height)
    ),
    #fffdf9;
  border-right: 1px solid var(--line);
  cursor: crosshair;
  height: calc(var(--hour-count) * var(--hour-height));
  position: relative;
}

.calendar-zone:hover {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--hour-height) - 1px),
      var(--line) calc(var(--hour-height) - 1px),
      var(--line) var(--hour-height)
    ),
    #f8fcfa;
}

.calendar-add-hint {
  border: 1px dashed #cbbfb1;
  border-radius: 8px;
  color: var(--muted);
  left: 14px;
  padding: 14px;
  position: absolute;
  right: 14px;
  text-align: center;
  top: 14px;
}

.day {
  min-height: 220px;
  padding: 12px;
}

.day h3 {
  font-size: 15px;
  margin: 0 0 12px;
}

.lesson {
  background: #fbfaf7;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 10px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.lesson.calendar-event {
  cursor: pointer;
}

.lesson.calendar-event:hover {
  box-shadow: 0 6px 16px rgba(15, 17, 21, 0.1);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.lesson.masterclass {
  border-left-color: var(--accent-2);
}

.lesson.free-topic {
  border-left-color: var(--accent-3);
}

.lesson.closed {
  opacity: 0.62;
}

.lesson h4 {
  margin: 4px 0 6px;
}

.calendar-event {
  bottom: auto;
  box-shadow: 0 2px 8px rgba(29, 27, 24, 0.06);
  cursor: default;
  left: 14px;
  margin: 0;
  overflow: hidden;
  position: absolute;
  right: 14px;
  z-index: 2;
}

.meta,
.small {
  color: var(--muted);
  font-size: 13px;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.badge {
  background: var(--soft);
  border-radius: 999px;
  color: #19574f;
  font-size: clamp(11px, 2.4vw, 12px);
  padding: 4px 7px;
}

.badge.warn {
  background: var(--warn);
  color: #805a12;
}

.lesson-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.lesson-actions button {
  min-height: 32px;
  padding: 0 10px;
}


.lesson-quick-dialog {
  max-width: 1180px;
  padding: 0;
}

.lesson-quick-head {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  gap: 18px;
  padding: 22px 28px 16px;
}

.lesson-quick-head-main h3 {
  font-size: 22px;
  line-height: 1.2;
  margin: 4px 0 6px;
}

.lesson-quick-head-main .eyebrow {
  margin-bottom: 4px;
}

.lesson-quick-head-main .small {
  color: var(--muted);
  line-height: 1.45;
}

.lesson-quick-close {
  align-items: center;
  border-color: transparent;
  color: var(--muted);
  display: inline-flex;
  font-size: 28px;
  height: 40px;
  line-height: 1;
  justify-content: center;
  min-width: 40px;
  padding: 0;
}

.lesson-quick-summary-bar {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 14px 28px;
  background: #fcfbf8;
}

.lesson-quick-summary-item span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.lesson-quick-summary-item strong {
  display: block;
  font-size: 18px;
  line-height: 1.3;
}

.lesson-quick-summary-item.center {
  text-align: center;
}

.lesson-quick-summary-item.right {
  text-align: right;
}

.lesson-quick-summary-item.ok strong {
  color: #66b59a;
}

.lesson-quick-summary-item.warn strong {
  color: #c76556;
}

.lesson-quick-warning {
  background: #f8dedd;
  border-bottom: 1px solid #efc6c3;
  color: #9d5146;
  font-weight: 600;
  padding: 13px 28px;
}

.lesson-quick-tabs {
  align-items: end;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 6px;
  padding: 10px 28px 0;
  background: #fff;
}

.lesson-quick-tab {
  background: var(--bg);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  min-height: 48px;
  padding: 0 18px;
  transition: background 0.15s ease, color 0.15s ease;
}

.lesson-quick-tab:hover {
  background: var(--soft);
  color: var(--accent);
}

.lesson-quick-tab.active {
  background: var(--surface);
  border-color: var(--line);
  color: var(--accent);
  font-weight: 600;
  position: relative;
  top: 1px;
}

.lesson-quick-tab.muted {
  background: transparent;
  border-color: transparent;
  color: #c0c8dc;
}

.lesson-quick-tab-panel {
  border: 0;
  border-radius: 0;
  padding: 20px 28px 24px;
}

.lesson-quick-book-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1fr);
  margin-bottom: 20px;
}

.lesson-quick-book-grid label {
  color: var(--muted);
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.lesson-quick-checkbox {
  align-items: flex-start;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 10px;
  margin-bottom: 18px;
}

.lesson-quick-checkbox input {
  flex: 0 0 auto;
  min-height: auto;
  width: auto;
}

.lesson-quick-checkbox > * {
  min-width: 0;
}

.lesson-quick-table-head {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  font-weight: 700;
  gap: 16px;
  grid-template-columns: minmax(240px, 1.6fr) minmax(180px, 0.9fr) minmax(220px, 1.1fr) 56px;
  padding: 0 16px 12px;
}

.lesson-quick-list {
  gap: 0;
}

.lesson-quick-client-row {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  gap: 16px;
  grid-template-columns: minmax(240px, 1.6fr) minmax(180px, 0.9fr) minmax(220px, 1.1fr) 56px;
  padding: 18px 16px;
}

.lesson-quick-person {
  align-items: center;
  display: flex;
  gap: 14px;
  min-width: 0;
}

.lesson-quick-person-index {
  color: #b5bfd6;
  font-size: 34px;
  font-weight: 700;
  min-width: 34px;
  text-align: center;
}

.lesson-quick-avatar {
  align-items: center;
  background: #f4f5f7;
  border: 1px solid #e8ebf0;
  border-radius: 999px;
  color: #b0b6c4;
  display: grid;
  flex: 0 0 44px;
  font-size: 18px;
  font-weight: 700;
  height: 44px;
  width: 44px;
}

.lesson-quick-person-main strong {
  color: #5aa27e;
  display: block;
  font-size: 18px;
  margin-bottom: 4px;
}

.lesson-quick-person-main .small {
  font-size: 15px;
}

.lesson-quick-visit select {
  background-color: transparent;
  border: 0;
  border-bottom: 1px dashed #7dc6a6;
  border-radius: 0;
  font-weight: 600;
  min-height: 42px;
  padding-left: 0;
  padding-right: 28px;
}

.lesson-quick-visit-state {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  margin-top: 8px;
}

.lesson-quick-visit-state.ok {
  color: #5aa27e;
}

.lesson-quick-visit-state.warn {
  color: #d46b5f;
}

.lesson-quick-visit-state.muted {
  color: var(--muted);
}

.lesson-quick-service {
  min-width: 0;
}

.lesson-quick-service strong {
  display: block;
  margin-bottom: 6px;
}

.lesson-quick-service .badge {
  margin-bottom: 8px;
}

.danger-icon-button {
  background: transparent;
  border: 0;
  color: #eb6a63;
  font-size: 36px;
  line-height: 1;
  min-height: auto;
  min-width: auto;
  padding: 0;
}

.danger-icon-button:hover {
  color: #cf4f46;
}

.lesson-quick-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 24px;
}

.lesson-quick-footer-actions button {
  min-height: 52px;
  padding: 0 18px;
}

.danger-button {
  background: #ec6f66;
  border-color: #ec6f66;
  color: #fff;
}

.student-history-dialog {
  max-width: 1120px;
}

.student-card-head {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.student-card-identity {
  align-items: center;
  display: flex;
  gap: 18px;
}

.student-card-avatar {
  align-items: center;
  background: #f4eee5;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: grid;
  flex: 0 0 76px;
  font-size: 32px;
  height: 76px;
  width: 76px;
}

.student-card-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.student-card-badges,
.student-history-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.student-card-summary {
  margin-top: 14px;
}

.client-detail-page {
  display: grid;
  gap: 18px;
}

.student-history-tab {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
}

.student-history-tab.active {
  background: var(--soft);
  border-color: #9fcdbf;
  color: var(--ink);
}

.student-history-tab-panel {
  display: none;
}

.student-history-tab-panel.active {
  display: block;
}

.student-profile-grid {
  display: grid;
  gap: 14px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.student-profile-item {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.student-profile-item span {
  color: var(--muted);
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}

.student-profile-item strong {
  display: block;
  font-size: 18px;
  word-break: break-word;
}

.schedule-block-collapsible {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
  padding: 0;
}

.schedule-block-collapsible > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 12px 16px;
  transition: background 0.12s ease;
}

.schedule-block-collapsible > summary:hover {
  background: var(--soft);
}

.schedule-block-collapsible > summary::-webkit-details-marker {
  display: none;
}

.schedule-block-collapsible > summary::after {
  align-items: center;
  background: var(--bg);
  border-radius: 999px;
  color: var(--muted);
  content: "▾";
  display: inline-flex;
  font-size: 11px;
  font-weight: 600;
  height: 22px;
  justify-content: center;
  transition: transform 0.18s ease;
  width: 22px;
}

.schedule-block-collapsible[open] > summary::after {
  transform: rotate(180deg);
}

.schedule-block-collapsible > .schedule-filters {
  border-top: 1px solid var(--line);
  margin: 0;
  padding: 12px 16px 16px;
}

.clients {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-top: 14px;
}

.admin-panel {
  display: none;
  min-width: 0;
}

.admin-panel.active {
  display: block;
}

.admin-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.admin-tab.active {
  background: var(--soft);
  border-color: transparent;
  color: var(--accent);
  font-weight: 600;
}

.admin-tab.active:hover {
  background: var(--soft);
}

.table-toolbar {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 220px;
  margin-bottom: 14px;
}

.table-toolbar.split-toolbar {
  grid-template-columns: minmax(0, 1fr) 180px 180px 200px;
}

@media (max-width: 1024px) {
  .table-toolbar.split-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 1fr);
  }
}

.split-toolbar {
  display: flex;
  gap: 10px;
}

.split-toolbar .search {
  flex: 1;
}

.split-toolbar select {
  max-width: 220px;
}

.data-table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
}

.data-table {
  border-collapse: collapse;
  min-width: 860px;
  width: 100%;
}

.compact-table {
  min-width: 420px;
}

.directory-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.data-table th,
.data-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
}

.data-table th {
  background: #f4eee5;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row td {
  transition: background 0.12s ease;
}

.clickable-row:hover td {
  background: var(--soft);
}

.table-empty {
  color: var(--muted);
  padding: 28px;
  text-align: center;
}

.row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.row-actions button {
  min-height: 34px;
  padding: 0 10px;
}

.table-sort {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 700;
  gap: 6px;
  padding: 0;
}

.table-sort:hover {
  color: var(--accent);
}

.table-sort.active {
  color: var(--accent);
}

.table-sort-icon {
  color: var(--muted);
  display: inline-block;
  font-size: 11px;
  min-width: 12px;
}

.row-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* "← Назад к клиентам" link above the client detail header. Was a
   plain button floated to the right of the section-head, where it
   sat 800px away from the heading on a 1440px screen — easy to
   miss. Now it's a back-link above the heading, the standard place
   for "go back" affordances. */
.back-link {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 8px;
  min-height: 32px;
  padding: 6px 12px 6px 0;
  text-align: left;
  width: auto;
}

.back-link:hover {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
}

.back-link span {
  font-size: 16px;
}

.row-pills .status-pill {
  margin-top: 0;
}

.status-pill {
  border-radius: 999px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  padding: 4px 10px;
}

.status-pill.success,
.status-pill.muted {
  background: var(--bg);
  color: var(--muted);
}

.status-pill.success {
  background: var(--soft);
  color: var(--accent);
}

.status-pill.ok {
  background: var(--soft);
  color: #19574f;
}

.status-pill.warn {
  background: var(--warn);
  color: #805a12;
}

.status-pill.info {
  background: #eef4ff;
  color: #244f8f;
}

.client {
  padding: 14px;
}

.client h3 {
  margin: 0 0 4px;
}

.client-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.tools-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.tool-panel {
  padding: 18px;
}

.import-summary-panel {
  margin-bottom: 16px;
}

.import-summary-panel:empty {
  display: none;
}

.import-summary-head {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.import-summary-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 14px;
}

.import-summary-item {
  background: #f8f3eb;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.import-summary-item strong {
  display: block;
  font-size: 22px;
  margin-top: 4px;
}

.import-summary-note {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}

.meta-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  margin-top: 4px;
}

.tool-panel button {
  display: block;
  margin-top: 10px;
  width: 100%;
}

pre {
  background: #25221f;
  border-radius: 8px;
  color: #fff;
  max-height: 260px;
  overflow: auto;
  padding: 12px;
  white-space: pre-wrap;
}

dialog {
  border: 0;
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
  max-width: 520px;
  width: calc(100vw - 32px);
}

dialog::backdrop {
  background: rgba(29, 27, 24, 0.36);
}

.dialog-form {
  display: grid;
  gap: 12px;
}

.dialog-form.wide {
  max-width: 760px;
}

.dialog-form h3 {
  margin: 0 0 4px;
}

.dialog-form label {
  color: var(--muted);
  display: grid;
  gap: 5px;
  font-size: 13px;
}

.form-note {
  background: var(--soft);
  border-radius: 8px;
  color: #19574f;
  font-size: 13px;
  padding: 10px;
}

menu {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin: 8px 0 0;
  padding: 0;
}

/* Long forms (Lesson, Student) easily exceed dialog height. Cap each
   dialog at 92vh, let the form area scroll, and stick the menu to
   the bottom edge so primary action is always within reach. */
dialog[open] {
  max-height: 92vh;
}

dialog .dialog-form {
  background: var(--surface);
  max-height: 88vh;
  overflow-y: auto;
}

dialog .dialog-form > menu {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--surface) 30%);
  bottom: -24px;
  margin: 16px -24px -24px;
  padding: 16px 24px 20px;
  position: sticky;
}

.student-status {
  margin-bottom: 16px;
  padding: 14px;
}

.student-cabinet-shell {
  display: none;
  gap: 16px;
  min-width: 0;
}

.student-cabinet-hero {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.student-cabinet-banner {
  background: linear-gradient(180deg, #f8f5ef 0%, #fff 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  padding: clamp(14px, 3vw, 20px);
}

.student-cabinet-banner > * {
  min-width: 0;
}

.student-cabinet-banner h3 {
  font-size: clamp(24px, 4.4vw, 48px);
  margin: 4px 0 8px;
  line-height: 1.08;
}

.student-cabinet-subtitle {
  color: var(--muted);
  font-size: clamp(14px, 2.8vw, 18px);
  line-height: 1.3;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.student-cabinet-stats,
.student-booking-overview {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.student-hero-stat,
.student-overview-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(10px, 2.5vw, 12px);
}

.student-hero-stat span,
.student-overview-card span,
.student-overview-card small {
  color: var(--muted);
  display: block;
  font-size: clamp(12px, 2.2vw, 13px);
}

.student-hero-stat strong,
.student-overview-card strong {
  display: block;
  font-size: clamp(18px, 3.6vw, 24px);
  margin: 6px 0 4px;
}

.student-overview-card.ok {
  background: #f3faf6;
}

.student-overview-card.info {
  background: #f4f7ff;
}

.student-overview-card.warn {
  background: #fff7ec;
}

.student-cabinet-tabs {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
  min-width: 0;
}

.student-cabinet-tab {
  align-items: center;
  display: flex;
  font-size: clamp(14px, 2.5vw, 16px);
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  text-align: center;
  white-space: normal;
}

.student-cabinet-tab.active {
  background: var(--ink);
  color: #fff;
}

.student-panel {
  display: none;
}

.student-panel.active {
  display: block;
}

.toggle-row {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
}

.toggle-row input {
  min-height: auto;
  width: auto;
}

.compact-toggle {
  margin: 0;
  white-space: nowrap;
}

.student-panel-intro {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
  min-width: 0;
}

.student-panel-intro h3 {
  margin: 0 0 4px;
}

.student-panel-intro p {
  color: var(--muted);
  margin: 0;
}

.compact-toggle {
  margin: 0;
  min-height: 40px;
  padding: 8px 12px;
}

.schedule-filters {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(180px, 260px) minmax(180px, 240px) minmax(220px, 260px);
  margin-bottom: 14px;
}

.schedule-block {
  margin-bottom: 14px;
}

.schedule-block-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.schedule-block-head h3 {
  font-size: 14px;
  margin: 0;
}

.bulk-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.week-actions {
  grid-template-columns: repeat(2, minmax(180px, 240px));
}

.booking-chip {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: space-between;
  margin-top: 8px;
  padding: 7px;
}

.booking-chip button {
  min-height: 28px;
  padding: 0 8px;
}

.booking-chip strong {
  color: var(--accent);
  font-size: 12px;
}

.student-panel {
  display: none;
}

.student-panel.active {
  display: block;
}

.login-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  max-width: 520px;
  padding: 16px;
}

.login-panel label {
  color: var(--muted);
  display: grid;
  gap: 5px;
  font-size: 13px;
}

.profile-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.profile-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.profile-grid div {
  background: #fbfaf7;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  padding: 12px;
}

.profile-grid strong {
  display: block;
  margin-top: 4px;
}

.next-booking {
  background: #fbfaf7;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 10px;
  padding: 12px;
}

.next-booking strong {
  display: block;
  margin-top: 4px;
}

.student-lessons {
  display: grid;
  gap: 16px;
}

.student-booking-days {
  display: grid;
  gap: 8px;
  grid-auto-columns: minmax(88px, 1fr);
  grid-auto-flow: column;
  margin-bottom: 16px;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
}

.student-day-pill {
  display: grid;
  gap: 2px;
  min-height: 64px;
  min-width: 0;
  padding: 8px 6px;
  scroll-snap-align: start;
  text-align: center;
}

.student-day-pill strong {
  font-size: clamp(16px, 3.8vw, 20px);
}

.student-day-pill small,
.student-day-pill span {
  color: var(--muted);
  font-size: clamp(11px, 2.3vw, 13px);
}

.student-day-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.student-day-pill.active small,
.student-day-pill.active span {
  color: rgba(255, 255, 255, 0.82);
}

.student-day {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  padding: clamp(12px, 3vw, 18px);
}

.student-day-title {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.student-day-title h3 {
  font-size: clamp(20px, 4.6vw, 30px);
  margin: 0;
}

.student-day-title span {
  color: var(--muted);
}

.student-day-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.student-booking-group + .student-booking-group {
  margin-top: 18px;
}

.student-lesson {
  align-items: center;
  background: #fbfaf7;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  padding: clamp(12px, 3vw, 16px);
}

.student-lesson.blocked {
  opacity: 0.76;
}

.student-lesson.masterclass {
  border-left-color: var(--accent-2);
}

.student-lesson.free-topic {
  border-left-color: var(--accent-3);
}

.student-lesson.booked {
  background: var(--soft);
}

.student-lesson h4 {
  font-size: clamp(18px, 5.2vw, 30px);
  margin: 6px 0 6px;
  overflow-wrap: anywhere;
}

.student-lesson-time {
  color: var(--muted);
  font-size: clamp(16px, 4vw, 22px);
  font-weight: 700;
}

.student-lesson-top {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.student-lesson-meta {
  color: var(--muted);
  font-size: clamp(14px, 3vw, 16px);
  overflow-wrap: anywhere;
}

.student-places {
  background: var(--soft);
  border-radius: 999px;
  color: #19574f;
  font-weight: 700;
  padding: 6px 10px;
  white-space: nowrap;
}

.student-places.full {
  background: var(--warn);
  color: #805a12;
}

.student-block-reason {
  background: var(--warn);
  border-radius: 8px;
  color: #805a12;
  font-weight: 700;
  margin-top: 10px;
  overflow-wrap: anywhere;
  padding: 10px;
}

.student-lesson-action button {
  font-size: clamp(14px, 3vw, 16px);
  max-width: 100%;
  min-width: 118px;
  min-height: 48px;
  width: 100%;
}

.student-lesson-action button:disabled {
  background: #d8dfdd;
  border-color: #d8dfdd;
  color: #6b7280;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;
}

.empty-state {
  background: #fbfaf7;
  border: 1px dashed #cbbfb1;
  border-radius: 8px;
  color: var(--muted);
  padding: clamp(18px, 5vw, 28px);
  text-align: center;
}

.table-loadmore {
  padding: 14px;
  text-align: center;
}

.table-loadmore button {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  min-height: 38px;
  padding: 8px 14px;
}

.table-loadmore .small {
  color: var(--muted);
  display: inline-block;
  margin-left: 10px;
}

.search {
  max-width: 460px;
}

@media (max-width: 820px) {
  .topbar h1,
  .section-head h2 {
    font-size: clamp(22px, 5.6vw, 32px);
  }

  .topbar,
  .section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-right: 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 0;
  }

  .nav {
    min-width: 150px;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-cabinet-banner,
  .student-panel-intro {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .student-cabinet-stats,
  .student-booking-overview {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .student-lesson {
    grid-template-columns: 1fr;
  }

  .student-lesson-action button {
    width: 100%;
  }

  .student-booking-days {
    grid-auto-columns: minmax(104px, 1fr);
  }

  .week-switcher {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .schedule-filters {
    grid-template-columns: 1fr;
  }

  .directory-grid {
    grid-template-columns: 1fr;
  }

  .day-tabs {
    max-width: 100%;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
  }

}

@media (max-width: 680px) {
  body.student-mode .content {
    padding-inline: 12px;
  }

  .topbar {
    padding: 12px 14px;
  }

  .topbar h1 {
    font-size: 16px;
  }

  .section-head h2 {
    font-size: 16px;
  }

  .student-cabinet-banner {
    gap: 12px;
    padding: 12px;
  }

  .student-cabinet-banner h3 {
    font-size: 15px;
    line-height: 1.15;
  }

  .student-cabinet-subtitle {
    font-size: 11px;
    line-height: 1.25;
  }

  .badge {
    font-size: 10px;
    padding: 3px 6px;
  }

  .student-hero-stat,
  .student-overview-card {
    padding: 10px;
  }

  .student-hero-stat strong,
  .student-overview-card strong {
    font-size: 15px;
  }

  .student-cabinet-tab {
    font-size: 13px;
    min-height: 40px;
    padding: 8px 10px;
  }

  .student-day-title h3 {
    font-size: 16px;
  }

  .student-day-title span,
  .student-lesson-meta,
  .student-day-pill small,
  .student-day-pill span {
    font-size: 12px;
  }

  .student-day-pill strong {
    font-size: 15px;
  }

  .student-lesson-time {
    font-size: 13px;
  }

  .student-lesson h4 {
    font-size: 15px;
  }

  .student-lesson-action button {
    font-size: 13px;
    min-height: 42px;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 14px;
  }

  .topbar {
    padding: 10px 12px;
  }

  .topbar h1 {
    font-size: 15px;
    overflow-wrap: anywhere;
  }

  .topbar__actions,
  .inline-controls,
  .admin-tabs {
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .content {
    padding: 12px;
  }

  .sidebar {
    padding: 10px 14px 0;
  }

  .nav {
    min-width: 132px;
  }

  .section-head {
    gap: 10px;
    margin-bottom: 12px;
  }

  .inline-controls {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .week-switcher {
    gap: 6px;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
  }

  .week-switcher .icon-button {
    flex-basis: 38px;
    min-height: 58px;
    width: 38px;
  }

  .day-tabs {
    grid-template-columns: repeat(7, minmax(92px, 1fr));
  }

  .day-tab {
    font-size: 14px;
    min-height: 58px;
    padding: 6px;
  }

  .schedule.daily {
    margin-left: -6px;
    margin-right: -6px;
  }

  .calendar-grid {
    min-width: 860px;
  }

  .calendar-head {
    grid-template-columns: 70px repeat(var(--zone-count), minmax(240px, 1fr));
  }

  .calendar-body {
    grid-template-columns: 70px 1fr;
  }

  .calendar-time-label {
    font-size: 13px;
    padding-left: 8px;
  }

  .calendar-event {
    left: 8px;
    right: 8px;
  }

  .data-table {
    min-width: 760px;
  }

  .compact-table {
    min-width: 520px;
  }

  .split-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .split-toolbar select,
  .search {
    max-width: none;
  }

  dialog {
    border-radius: 10px 10px 0 0;
    max-height: 92vh;
    max-width: none;
    overflow: auto;
    width: 100vw;
  }

  menu {
    display: grid;
    grid-template-columns: 1fr;
  }

  menu button {
    width: 100%;
  }

  .profile-head {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }

  .student-cabinet-tabs {
    grid-template-columns: 1fr;
  }

  .student-panel-intro,
  .student-cabinet-banner {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .student-panel-intro > *,
  .student-cabinet-banner > * {
    min-width: 0;
  }

  .student-cabinet-stats,
  .student-booking-overview {
    grid-template-columns: 1fr;
  }

  .student-booking-days {
    grid-auto-columns: minmax(84px, 1fr);
  }

  .student-day {
    padding: 10px;
  }

  .student-day-title,
  .student-lesson-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .student-lesson {
    padding: 10px;
  }

  .student-lesson-action,
  .student-lesson-action button {
    width: 100%;
  }

  .student-lesson h4 {
    font-size: 14px;
  }

  .lesson-quick-grid,
  .lesson-quick-row,
  .student-profile-grid {
    grid-template-columns: 1fr;
  }

  .lesson-quick-row-actions {
    justify-content: flex-start;
  }

  .lesson-quick-summary-bar,
  .lesson-quick-book-grid,
  .lesson-quick-table-head,
  .lesson-quick-client-row,
  .lesson-quick-footer-actions {
    grid-template-columns: 1fr;
  }

  .lesson-quick-summary-item.center,
  .lesson-quick-summary-item.right {
    text-align: left;
  }

  .lesson-quick-head,
  .lesson-quick-summary-bar,
  .lesson-quick-warning,
  .lesson-quick-tabs,
  .lesson-quick-tab-panel {
    padding-left: 18px;
    padding-right: 18px;
  }

  .lesson-quick-head {
    padding-top: 18px;
    padding-bottom: 14px;
  }

  .lesson-quick-tabs {
    overflow-x: auto;
    padding-top: 8px;
  }

  .lesson-quick-tab {
    min-width: 180px;
    white-space: nowrap;
  }

  .student-card-head,
  .student-card-identity {
    align-items: stretch;
    flex-direction: column;
  }

  /* tighter avatar on phone — 76px was eating half the screen width */
  .student-card-avatar {
    flex: 0 0 56px;
    font-size: 24px;
    height: 56px;
    width: 56px;
  }

  .student-card-identity {
    flex-direction: row;
    gap: 12px;
  }

  .student-card-head-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .student-card-head-actions > button {
    flex: 1 1 calc(50% - 5px);
    min-height: 40px;
  }

  /* tabs of the client detail page (Профиль / Абонементы / Записи /
     Посещения / Заморозки) become a horizontal scroller so they
     never wrap to two rows or clip on a 375px screen */
  .student-history-tabs {
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 -12px 8px;
    overflow-x: auto;
    padding: 0 12px 4px;
    scrollbar-width: none;
  }
  .student-history-tabs::-webkit-scrollbar { display: none; }
  .student-history-tab {
    flex: 0 0 auto;
    font-size: 13px;
    min-height: 36px;
    padding: 6px 12px;
    white-space: nowrap;
  }

  .tools-grid {
    grid-template-columns: 1fr;
  }
}

body.student-mode #studentView > .section-head {
  display: none;
}

body.student-mode .topbar {
  align-items: center;
  display: block;
  padding: 10px 14px;
  position: sticky;
  text-align: center;
}

body.student-mode .topbar h1 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

body.student-mode .topbar .eyebrow {
  display: none;
}

body.student-mode .topbar__actions {
  left: 12px;
  position: absolute;
  top: 10px;
}

body.student-mode #logoutBtn {
  background: #fff;
  border-radius: 12px;
  font-size: 13px;
  min-height: 30px;
  padding: 0 10px;
}

body.student-mode .student-cabinet-shell {
  /* Reorder so that the cabinet tabs always come visually first,
     regardless of which panel is active. Without this the hero card
     (visible on Profile / My Bookings) pushed the tabs down and made
     them feel like they were jumping when switching panels. */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.student-mode .student-cabinet-tabs {
  order: -1;
}

body.student-mode .student-cabinet-shell[data-active-tab="studentBookingPanel"] .student-cabinet-hero {
  display: none;
}

body.student-mode .student-cabinet-banner {
  border-radius: 18px;
  gap: 12px;
  grid-template-columns: 1fr;
  padding: 14px;
}

body.student-mode .student-cabinet-banner h3 {
  font-size: 16px;
  line-height: 1.2;
  margin: 2px 0 6px;
}

body.student-mode .student-cabinet-subtitle {
  font-size: 12px;
  line-height: 1.35;
  margin-bottom: 8px;
}

body.student-mode .student-mobile-badges .badge,
body.student-mode .badge {
  font-size: 11px;
  padding: 4px 7px;
}

body.student-mode .student-cabinet-stats,
body.student-mode .student-booking-overview {
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.student-mode .student-hero-stat,
body.student-mode .student-overview-card {
  border-radius: 14px;
  padding: 10px;
}

body.student-mode .student-hero-stat span,
body.student-mode .student-overview-card span,
body.student-mode .student-overview-card small {
  font-size: 11px;
}

body.student-mode .student-hero-stat strong,
body.student-mode .student-overview-card strong {
  font-size: 15px;
  margin: 4px 0 2px;
}

body.student-mode .student-cabinet-tabs {
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin-bottom: 10px;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 10;
  background: rgba(247, 243, 237, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid #e6ded2;
  border-radius: 22px;
  padding: 8px;
}

body.student-mode .student-cabinet-tab {
  border-radius: 14px;
  font-size: 13px;
  min-height: 42px;
  padding: 8px 10px;
}

body.student-mode .student-panel-intro {
  gap: 10px;
  margin-bottom: 10px;
}

body.student-mode .student-cabinet-shell[data-active-tab="studentBookingPanel"] .student-panel-intro {
  align-items: stretch;
  border-bottom: 1px solid #eee5d8;
  margin-bottom: 8px;
  padding-bottom: 10px;
}

body.student-mode .student-panel-intro h3 {
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.student-mode .student-panel-intro p {
  display: none;
}

body.student-mode .compact-toggle {
  font-size: 12px;
  min-height: 38px;
  padding: 7px 10px;
}

body.student-mode .student-booking-days {
  gap: 6px;
  grid-auto-columns: minmax(62px, 1fr);
  margin-bottom: 12px;
}

body.student-mode .student-cabinet-shell[data-active-tab="studentBookingPanel"] #studentBookingOverview {
  display: none;
}

body.student-mode .student-day-pill {
  min-height: 58px;
  padding: 8px 6px;
}

body.student-mode .student-day-pill strong {
  font-size: 14px;
}

body.student-mode .student-day-pill small,
body.student-mode .student-day-pill span {
  font-size: 11px;
}

body.student-mode .student-day {
  border-radius: 18px;
  padding: 10px 12px;
}

body.student-mode .student-day-title h3 {
  font-size: 16px;
}

body.student-mode .student-day-title span {
  font-size: 12px;
}

body.student-mode .student-lesson {
  border-left-width: 3px;
  border-radius: 16px;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  padding: 12px;
}

body.student-mode .student-lesson h4 {
  font-size: 14px;
  margin: 2px 0 4px;
}

body.student-mode .student-lesson-time {
  display: grid;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
}

body.student-mode .student-lesson-time strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
}

body.student-mode .student-lesson-time span {
  color: var(--muted);
  font-size: 11px;
}

body.student-mode .student-lesson-top {
  align-items: flex-start;
}

body.student-mode .student-lesson-meta {
  font-size: 12px;
}

body.student-mode .student-places {
  font-size: 11px;
  padding: 5px 9px;
}

body.student-mode .student-block-reason {
  border-radius: 12px;
  font-size: 12px;
}

body.student-mode .student-lesson-action button {
  font-size: 13px;
  min-height: 42px;
}

@media (max-width: 560px) {
  body.student-mode .content {
    padding: 12px;
    padding-bottom: 94px;
  }

  body.student-mode .topbar {
    padding: 10px 12px;
  }

  body.student-mode .topbar h1 {
    font-size: 18px;
  }

  body.student-mode .student-cabinet-stats,
  body.student-mode .student-booking-overview {
    grid-template-columns: 1fr;
  }

  body.student-mode .student-cabinet-tab {
    min-height: 38px;
  }

  body.student-mode .student-booking-days {
    grid-auto-columns: minmax(60px, 1fr);
  }

  body.student-mode .student-cabinet-tabs {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
}

body.student-mode .student-mobile-summary {
  background: #fff;
}

body.student-mode .student-mobile-stat-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.student-mode .student-booking-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.student-mode .student-lesson-mobi {
  align-items: start;
  background: #fff;
  border: 1px solid #ece6dc;
  border-left-width: 0;
  border-radius: 20px;
  box-shadow: 0 1px 0 rgba(29, 27, 24, 0.03);
  gap: 12px;
  grid-template-columns: 58px minmax(0, 1fr);
  padding: 14px 14px 14px 12px;
  position: relative;
}

body.student-mode .student-lesson-mobi::before {
  background: #5f8fd9;
  border-radius: 999px;
  content: "";
  left: 10px;
  position: absolute;
  top: 14px;
  bottom: 14px;
  width: 4px;
}

body.student-mode .student-lesson-mobi.masterclass::before {
  background: #d76d58;
}

body.student-mode .student-lesson-mobi.free-topic::before {
  background: #4f8a73;
}

body.student-mode .student-lesson-side {
  min-width: 0;
  padding-left: 8px;
}

body.student-mode .student-lesson-main {
  min-width: 0;
}

body.student-mode .student-lesson-mobi .student-lesson-time {
  gap: 4px;
}

body.student-mode .student-lesson-mobi .student-lesson-time strong {
  font-size: 16px;
}

body.student-mode .student-lesson-mobi .student-lesson-time span {
  font-size: 11px;
}

body.student-mode .student-lesson-mobi h4 {
  font-size: 15px;
  line-height: 1.25;
  margin: 2px 0 4px;
}

body.student-mode .student-lesson-mobi .student-lesson-meta {
  color: #7d776f;
  font-size: 13px;
  margin-bottom: 8px;
}

body.student-mode .student-lesson-mobi .badges {
  gap: 6px;
  margin: 0 0 10px;
}

body.student-mode .student-lesson-mobi .badge {
  background: #f2f6f4;
  color: #5d6f68;
  font-size: 11px;
}

body.student-mode .student-lesson-mobi .student-places {
  background: #eaf7f2;
  color: #2d7d66;
}

body.student-mode .student-lesson-mobi .student-lesson-action {
  margin-top: 2px;
}

body.student-mode .student-lesson-mobi .student-lesson-action button {
  border-radius: 14px;
  min-height: 44px;
}

body.student-mode .student-booking-days .student-day-pill {
  border-radius: 16px;
}

body.student-mode .student-booking-days .student-day-pill.active {
  background: #2c8b81;
  border-color: #2c8b81;
}

body.student-mode .student-day {
  background: #fff;
}

@media (max-width: 560px) {
  body.student-mode .student-mobile-stat-strip,
  body.student-mode .student-booking-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.student-mode .student-lesson-mobi {
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 12px;
  }

  body.student-mode .student-lesson-mobi h4 {
    font-size: 14px;
  }
}

body.student-mode .student-panel-intro p {
  display: none !important;
}

body.student-mode .student-cabinet-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.student-mode .student-cabinet-tab {
  width: auto !important;
}

/* =====================================================================
   Student view — DESKTOP overrides (>= 769px).
   The student UI is mobile-first; without this block it stretches the
   phone layout edge-to-edge on a 1440px screen — bottom nav fixed at
   the bottom of a huge monitor, cards spanning the entire width, etc.
   This block constrains the student view to a centred 720px column
   on desktop and lifts the bottom nav up into a top tab strip.
   Mobile (<= 768px) keeps everything we built earlier.
   ===================================================================== */
@media (min-width: 769px) {
  /* Topbar comes back, styled like the admin one */
  body.student-mode .topbar {
    align-items: center !important;
    background: var(--surface) !important;
    border-bottom: 1px solid var(--line) !important;
    display: flex !important;
    justify-content: space-between !important;
    padding: 14px 28px !important;
    position: sticky !important;
    text-align: left !important;
    top: 0 !important;
  }
  body.student-mode .topbar h1 {
    color: var(--ink) !important;
    font-size: clamp(22px, 2.6vw, 28px) !important;
    font-weight: 600 !important;
    text-align: left !important;
  }
  body.student-mode .topbar__actions {
    display: flex !important;
    gap: 8px !important;
    left: auto !important;
    position: static !important;
    top: auto !important;
  }
  body.student-mode #logoutBtn {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    color: var(--ink) !important;
    font-size: 13px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
  }

  /* Layout: single column (sidebar still off, content centred) */
  body.student-mode .layout {
    display: block !important;
  }
  body.student-mode .content {
    margin: 0 auto !important;
    max-width: 1120px !important;
    padding: 0 clamp(16px, 2vw, 28px) 32px !important;
  }
  body.student-mode .student-cabinet-shell {
    gap: 10px !important;
  }
  body.student-mode .student-panel-intro {
    margin: 4px 2px !important;
  }

  /* Mobile bottom nav -> sticky top-tabs row, sits as a sub-header
     under the page topbar so the active "Расписание / Профиль / Записи"
     pill is always at the top no matter how far the user scrolls
     (and tabs no longer jump down when the hero card appears on the
     Profile / Bookings panels). */
  body.student-mode .student-cabinet-tabs {
    backdrop-filter: blur(10px) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    bottom: auto !important;
    box-shadow: 0 2px 10px rgba(15, 17, 21, 0.05) !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    left: auto !important;
    margin: 8px 0 12px !important;
    padding: 4px !important;
    position: sticky !important;
    right: auto !important;
    top: 56px !important;
    width: auto !important;
    z-index: 4 !important;
  }
  body.student-mode .student-cabinet-tab {
    flex-direction: row !important;
    font-size: 13px !important;
    gap: 8px !important;
    justify-content: center !important;
    min-height: 38px !important;
  }
  body.student-mode .student-cabinet-tab .tab-icon {
    height: 18px !important;
    width: 18px !important;
  }

  /* Hero / stat-strip / overview cards: normal padding, no max */
  body.student-mode .student-cabinet-shell {
    gap: 16px !important;
  }
  body.student-mode .student-mobile-summary,
  body.student-mode .student-cabinet-banner {
    padding: 18px 20px !important;
  }
  body.student-mode .student-mobile-stat-strip,
  body.student-mode .student-booking-overview {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  /* Day strip: stretch pills evenly across the full content width on
     desktop — there are exactly 7 days and they should breathe, not
     huddle in the middle. */
  body.student-mode .student-week-switcher {
    margin-bottom: 10px !important;
  }
  body.student-mode .student-booking-days {
    display: flex !important;
    gap: 6px !important;
    overflow-x: visible !important;
  }
  body.student-mode .student-week-switcher .student-booking-days {
    flex: 1 !important;
  }
  body.student-mode .student-day-pill {
    flex: 1 1 0 !important;
    min-height: 64px !important;
    min-width: 0 !important;
  }
  body.student-mode .student-day-pill strong {
    font-size: 20px !important;
  }

  /* Lesson cards stay mobile-shaped (color strip + 64px time column),
     but wrap inside a grid so multiple can sit side-by-side on a wide
     content column when the day has many classes */
  body.student-mode .student-day-list,
  body.student-mode .student-lessons {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: 1fr !important;
  }

  /* Hide pull-to-refresh (gesture not relevant on desktop) */
  body.student-mode .pull-indicator {
    display: none !important;
  }

  /* Login form already centres itself; just add a soft card around it */
  body.student-mode #studentLoginForm {
    margin: 32px auto !important;
    max-width: 380px !important;
  }
}

/* =====================================================================
   MobiFitness-style mobile redesign for the student cabinet.
   This block lives at the end of the file on purpose so the cascade
   order (and a handful of explicit !important on hot-spots) overrides
   the legacy beige palette declared earlier in this file.
   Reference: https://mobifitness.ru/.../1-raspisanie.webp
   ===================================================================== */

body.student-mode {
  --mf-bg: #f5f6f8;
  --mf-surface: #ffffff;
  --mf-line: #ececef;
  --mf-line-soft: #f1f1f3;
  --mf-text: #15161a;
  --mf-muted: #7a7e87;
  --mf-accent: #1faa8a;
  --mf-accent-soft: #dff5ee;
  --mf-strip-blue: #4f80e8;
  --mf-strip-green: #2bb673;
  --mf-strip-orange: #f0a538;
  --mf-shadow: 0 1px 2px rgba(15, 17, 21, 0.04);
}

body.student-mode {
  background: var(--mf-bg) !important;
  color: var(--mf-text);
}

body.student-mode .layout,
body.student-mode .content {
  background: var(--mf-bg) !important;
}

body.student-mode .content {
  padding: 0 12px 96px !important;
}

/* --- top header: centered title, sticky, white --------------------- */

body.student-mode .topbar {
  background: var(--mf-surface) !important;
  border-bottom: 1px solid var(--mf-line);
  padding: 12px 14px !important;
  position: sticky;
  top: 0;
  z-index: 9;
}

body.student-mode .topbar h1 {
  color: var(--mf-text);
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

body.student-mode #logoutBtn {
  background: var(--mf-bg) !important;
  border: 1px solid var(--mf-line) !important;
  border-radius: 999px;
  color: var(--mf-text) !important;
  font-size: 12px !important;
  font-weight: 500;
  min-height: 32px !important;
  padding: 0 12px !important;
}

/* --- horizontal day strip: big number on top, day caps below ------- */

body.student-mode .student-panel-intro {
  background: transparent;
  border-bottom: none !important;
  margin: 4px 2px 8px !important;
  padding: 0 !important;
}

body.student-mode .student-panel-intro h3 {
  color: var(--mf-muted);
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}

body.student-mode .compact-toggle {
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  border-radius: 999px;
  color: var(--mf-text);
  font-size: 12px;
  min-height: 32px;
  padding: 6px 12px;
}

body.student-mode .student-booking-days {
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  border-radius: 16px;
  display: flex !important;
  gap: 4px;
  margin: 0 0 10px !important;
  overflow-x: auto;
  padding: 8px;
  scrollbar-width: none;
}

body.student-mode .student-booking-days::-webkit-scrollbar {
  display: none;
}

body.student-mode .student-day-pill {
  align-items: center;
  background: transparent;
  border: 2px solid transparent !important;
  border-radius: 12px;
  color: var(--mf-text);
  cursor: pointer;
  display: flex !important;
  flex: 0 0 auto;
  flex-direction: column;
  font-weight: 600;
  gap: 2px !important;
  justify-content: center;
  min-height: 66px !important;
  min-width: 58px;
  padding: 6px 10px !important;
}

body.student-mode .student-day-pill strong {
  color: var(--mf-text);
  font-size: 18px !important;
  font-weight: 600;
  line-height: 1;
}

body.student-mode .student-day-pill span {
  color: var(--mf-muted) !important;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.student-mode .student-day-pill small {
  color: var(--mf-muted) !important;
  display: block !important;
  font-size: 9px !important;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 1px;
  white-space: nowrap;
}

body.student-mode .student-day-pill.active,
body.student-mode .student-booking-days .student-day-pill.active {
  background: transparent !important;
  border-color: var(--mf-accent) !important;
  color: var(--mf-accent) !important;
}

body.student-mode .student-day-pill.active strong,
body.student-mode .student-day-pill.active span,
body.student-mode .student-day-pill.active small {
  color: var(--mf-accent) !important;
}

/* Student week switcher: ‹ / day strip / › */
body.student-mode .student-week-switcher {
  align-items: stretch;
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  border-radius: 16px;
  /* grid (not flex) so the middle track can shrink to minmax(0, 1fr)
     and overflow only inside the inner day strip — flex was letting
     the right arrow get pushed past the viewport edge */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin: 0 0 10px;
  max-width: 100%;
  padding: 6px;
}

body.student-mode .student-week-switcher .icon-button {
  align-self: stretch;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: var(--mf-muted);
  cursor: pointer;
  font-size: 22px;
  font-weight: 500;
  min-height: 66px;
  min-width: 32px;
  padding: 0 6px;
  width: 32px;
}

body.student-mode .student-week-switcher .icon-button:hover,
body.student-mode .student-week-switcher .icon-button:active {
  background: var(--mf-bg);
  color: var(--mf-text);
}

body.student-mode .student-week-switcher .student-booking-days {
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  min-width: 0 !important;
  padding: 0 4px !important;
  width: 100%;
}

/* --- day group container (transparent, no inner card) -------------- */

body.student-mode .student-day,
body.student-mode .student-booking-group {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

body.student-mode .student-day-title {
  margin-bottom: 8px;
}

body.student-mode .student-day-title h3 {
  color: var(--mf-text);
  font-size: 13px !important;
  font-weight: 600;
}

body.student-mode .student-day-title span {
  color: var(--mf-muted);
  font-size: 11px;
}

body.student-mode .student-day-list,
body.student-mode .student-lessons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- lesson card: white, vertical color strip, dense ---------------- */

body.student-mode .student-lesson-mobi {
  background: var(--mf-surface) !important;
  border: 1px solid var(--mf-line) !important;
  border-left-width: 1px !important;
  border-radius: 14px !important;
  box-shadow: var(--mf-shadow);
  gap: 10px !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  padding: 12px 14px 12px 14px !important;
  position: relative;
}

body.student-mode .student-lesson-mobi::before {
  background: var(--mf-strip-blue) !important;
  border-radius: 999px;
  bottom: 12px;
  content: "";
  left: 8px;
  position: absolute;
  top: 12px;
  width: 3px;
}

body.student-mode .student-lesson-mobi.masterclass::before {
  background: var(--mf-strip-orange) !important;
}

body.student-mode .student-lesson-mobi.free-topic::before {
  background: var(--mf-strip-green) !important;
}

body.student-mode .student-lesson-mobi.booked {
  background: var(--mf-surface) !important;
  border-color: var(--mf-accent-soft) !important;
}

body.student-mode .student-lesson-mobi.blocked {
  opacity: 0.55;
}

body.student-mode .student-lesson-side {
  padding-left: 4px !important;
}

body.student-mode .student-lesson-mobi .student-lesson-time {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.student-mode .student-lesson-mobi .student-lesson-time strong {
  color: var(--mf-text) !important;
  font-size: 17px !important;
  font-weight: 600;
  line-height: 1;
}

body.student-mode .student-lesson-mobi .student-lesson-time span {
  color: var(--mf-muted) !important;
  font-size: 11px !important;
  font-weight: 500;
}

body.student-mode .student-lesson-mobi h4 {
  color: var(--mf-text);
  font-size: 16px !important;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0 0 2px !important;
}

body.student-mode .student-lesson-mobi .student-lesson-meta {
  color: var(--mf-muted) !important;
  font-size: 13px !important;
  font-weight: 400;
  margin-bottom: 8px !important;
}

body.student-mode .student-lesson-mobi .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px !important;
}

body.student-mode .student-lesson-mobi .badge,
body.student-mode .student-lesson-mobi .student-places {
  background: var(--mf-bg) !important;
  border-radius: 8px;
  color: var(--mf-text) !important;
  font-size: 11px !important;
  font-weight: 500;
  padding: 4px 8px !important;
}

body.student-mode .student-lesson-mobi .student-places.full {
  background: #fdecec !important;
  color: #b3261e !important;
}

body.student-mode .student-block-reason {
  background: #fff7ec !important;
  border-radius: 10px;
  color: #8a5b13 !important;
  font-size: 11px !important;
  font-weight: 500;
  margin-top: 0;
  padding: 8px 10px !important;
}

body.student-mode .student-lesson-mobi .student-lesson-action {
  margin-top: 8px;
}

body.student-mode .student-lesson-mobi .student-lesson-action button {
  background: var(--mf-accent) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600;
  min-height: 38px !important;
  width: 100%;
}

body.student-mode .student-lesson-mobi .student-lesson-action button:disabled {
  background: var(--mf-line) !important;
  color: var(--mf-muted) !important;
}

body.student-mode .student-lesson-mobi.booked .student-lesson-action button {
  background: var(--mf-bg) !important;
  border: 1px solid var(--mf-line) !important;
  color: var(--mf-text) !important;
}

/* --- empty state ---------------------------------------------------- */

body.student-mode .empty-state {
  background: var(--mf-surface);
  border: 1px dashed var(--mf-line);
  border-radius: 14px;
  color: var(--mf-muted);
  font-size: 13px;
  padding: 18px;
}

/* --- bottom navigation: pill shape, teal active, with icons -------- */

body.student-mode .student-cabinet-tabs {
  background: var(--mf-surface) !important;
  backdrop-filter: none !important;
  border: 1px solid var(--mf-line) !important;
  border-radius: 18px !important;
  bottom: 12px !important;
  box-shadow: 0 6px 24px rgba(15, 17, 21, 0.08);
  gap: 4px !important;
  left: 12px !important;
  padding: 6px !important;
  right: 12px !important;
}

body.student-mode .student-cabinet-tab {
  align-items: center;
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  color: var(--mf-muted) !important;
  display: flex !important;
  flex-direction: column;
  font-size: 11px !important;
  font-weight: 500;
  gap: 3px !important;
  justify-content: center;
  min-height: 50px !important;
  padding: 6px !important;
}

body.student-mode .student-cabinet-tab .tab-icon {
  /* SVG dimensions are governed by the global .tab-icon rule above */
  flex: 0 0 auto;
}

body.student-mode .student-cabinet-tab.active {
  background: var(--mf-accent-soft) !important;
  color: var(--mf-accent) !important;
}

/* --- profile / hero: white card with soft border -------------------- */

body.student-mode .student-mobile-summary,
body.student-mode .student-cabinet-banner {
  background: var(--mf-surface) !important;
  border: 1px solid var(--mf-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--mf-shadow);
  padding: 16px !important;
}

body.student-mode .student-cabinet-banner .eyebrow {
  color: var(--mf-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.student-mode .student-cabinet-banner h3 {
  color: var(--mf-text);
  font-size: 18px !important;
  font-weight: 600;
}

body.student-mode .student-cabinet-subtitle {
  color: var(--mf-muted);
  font-size: 12px;
}

body.student-mode .student-mobile-stat-strip,
body.student-mode .student-booking-overview {
  gap: 8px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.student-mode .student-hero-stat,
body.student-mode .student-overview-card {
  background: var(--mf-bg) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}

body.student-mode .student-hero-stat strong,
body.student-mode .student-overview-card strong {
  color: var(--mf-text);
  font-size: 16px !important;
}

body.student-mode .student-hero-stat span,
body.student-mode .student-overview-card span {
  color: var(--mf-muted);
  font-size: 11px;
}

/* --- login form when not authenticated ----------------------------- */

body.student-mode #studentLoginForm {
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  border-radius: 16px;
  margin: 24px auto;
  max-width: 380px;
  padding: 20px;
}

@media (max-width: 560px) {
  body.student-mode .content {
    padding: 0 10px 92px !important;
  }

  body.student-mode .student-lesson-mobi {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    padding: 11px 12px !important;
  }

  body.student-mode .student-lesson-mobi h4 {
    font-size: 15px !important;
  }
}

/* =====================================================================
   Safari iOS: fix unwanted zoom on page open / input focus.

   Two parts:
   1. Force input/select/textarea to >= 16px on small viewports —
      Safari auto-zooms to "rescue" a focused control whose computed
      font-size is below 16px. The `font: inherit` rule we set globally
      lets the size cascade down to whatever the parent uses, which
      can be 13–14px in compact mobile UI. Pinning 16px here keeps
      the visual size unchanged for desktop and stops the zoom
      everywhere it actually matters (phones / small tablets).

   2. Belt-and-suspenders against horizontal overflow that would make
      Safari render the whole page scaled down to fit width. We
      already have overflow-x:hidden on html/body, but a stray
      element with a hard min-width inside a hidden view can still
      push the document. `max-width: 100vw` clamps the document
      itself; `overflow-x: clip` on body is the modern equivalent
      that doesn't create a scroll context.
   ===================================================================== */

@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

html,
body {
  max-width: 100vw;
}

body {
  overflow-x: clip;
}

/* =====================================================================
   Loading overlay shown during the first /api/state fetch — page
   was blank for 1-2s on mobile, users assumed it was hung.
   ===================================================================== */
.app-loading-overlay {
  align-items: center;
  background: rgba(247, 243, 237, 0.96);
  backdrop-filter: blur(6px);
  bottom: 0;
  display: none;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
}

body.app-loading .app-loading-overlay {
  display: flex;
}

.app-loading-spinner {
  animation: app-loading-spin 0.7s linear infinite;
  border: 3px solid #d8d2c5;
  border-radius: 50%;
  border-top-color: var(--accent);
  height: 38px;
  width: 38px;
}

.app-loading-text {
  color: var(--muted);
  font-size: 13px;
}

@keyframes app-loading-spin {
  to { transform: rotate(360deg); }
}

/* =====================================================================
   Toast notifications — replaces silent console.warn for network /
   sync errors so users know something happened.
   ===================================================================== */
.toast-host {
  bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  left: 50%;
  pointer-events: none;
  position: fixed;
  transform: translateX(-50%);
  z-index: 200;
}

.toast {
  align-items: center;
  background: rgba(15, 17, 21, 0.92);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(15, 17, 21, 0.18);
  color: #fff;
  display: flex;
  font-size: 13px;
  gap: 14px;
  max-width: 92vw;
  opacity: 1;
  padding: 10px 16px;
  pointer-events: auto;
  transition: opacity 0.4s, transform 0.4s;
  white-space: pre-line;
}

.toast-text {
  flex: 1;
  min-width: 0;
}

.toast-action {
  background: rgba(255, 255, 255, 0.16);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-height: 28px;
  padding: 4px 10px;
}

.toast-action:hover {
  background: rgba(255, 255, 255, 0.28);
}

.toast-out {
  opacity: 0;
  transform: translateY(8px);
}

.toast-success {
  background: #1faa8a;
}

.toast-error {
  background: #b3261e;
}

@media (max-width: 768px) {
  .toast-host {
    bottom: 88px;
  }
}

/* =====================================================================
   FAB "+" — floating action button for "add lesson" on mobile only,
   visible only while the schedule view is active.
   ===================================================================== */
.fab-add {
  align-items: center;
  background: var(--accent);
  border: none;
  border-radius: 50%;
  bottom: 84px;
  box-shadow: 0 6px 20px rgba(15, 122, 111, 0.32);
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 30px;
  font-weight: 300;
  height: 56px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: fixed;
  right: 16px;
  width: 56px;
  z-index: 11;
}

.fab-add:active {
  transform: scale(0.96);
}

@media (max-width: 768px) {
  body:not(.student-mode)[data-view="schedule"] .fab-add {
    display: flex;
  }
}

/* =====================================================================
   Inline SVG icons used in bottom nav (admin sidebar / student tabs)
   and in any future control. Drawn as 1.6px stroked outlines so they
   stay sharp on retina at 18-22px.
   ===================================================================== */
.nav-icon,
.tab-icon {
  fill: none;
  flex: 0 0 auto;
  height: 22px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  width: 22px;
}

.tab-icon {
  height: 20px;
  width: 20px;
}

body.student-mode .student-cabinet-tab .tab-icon {
  height: 22px;
  width: 22px;
}

/* Sidebar nav buttons: align icon + label and animate the active
   teal-tinted background. */
.sidebar .nav {
  align-items: center;
  display: flex;
  gap: 10px;
  text-align: left;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.sidebar .nav span {
  flex: 1;
  min-width: 0;
}

@media (max-width: 768px) {
  body:not(.student-mode) .sidebar .nav {
    align-items: center;
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }
  body:not(.student-mode) .sidebar .nav-icon {
    height: 20px;
    width: 20px;
  }
  body:not(.student-mode) .sidebar .nav span {
    flex: none;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
  }
}

/* =====================================================================
   Empty states get a soft icon and a centred two-line layout.
   ===================================================================== */
.empty-state {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  gap: 6px;
  line-height: 1.4;
}

.student-no-membership-banner {
  background: #fff7ec;
  border: 1px solid #f3d8a7;
  border-radius: 12px;
  color: #8a5b13;
  font-size: 13px;
  margin-bottom: 10px;
  padding: 10px 14px;
}

.empty-state::before {
  align-items: center;
  background: var(--soft);
  border-radius: 50%;
  color: var(--accent);
  /* fallback chain: most fonts have at least one of these calendar
     glyphs. The bare "🗓" used to render as "1️⃣" on phones with
     font fallback chains that didn't include U+1F5D3; using the more
     common 📅 is broadly supported. */
  content: "📅";
  display: flex;
  font-size: 22px;
  height: 48px;
  justify-content: center;
  line-height: 1;
  text-align: center;
  width: 48px;
}

body.student-mode .empty-state {
  background: var(--mf-surface);
  border: 1px dashed var(--mf-line);
  color: var(--mf-muted);
}

body.student-mode .empty-state::before {
  background: var(--mf-accent-soft);
  color: var(--mf-accent);
}

/* =====================================================================
   Smooth tab/dialog transitions — 180ms is just enough to register as
   intentional without feeling slow.
   ===================================================================== */
.admin-tab,
.student-cabinet-tab,
.day-tab,
.student-day-pill,
.auth-tab,
.student-history-tab {
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.view {
  transition: opacity 0.2s ease;
}

dialog[open] {
  animation: dialog-enter 0.22s ease-out;
}

@keyframes dialog-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  dialog[open] {
    animation: dialog-sheet-enter 0.22s ease-out;
  }
}

@keyframes dialog-sheet-enter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.toast {
  animation: toast-enter 0.22s ease-out;
}

@keyframes toast-enter {
  from { opacity: 0; transform: translate(0, 6px); }
  to   { opacity: 1; transform: translate(0, 0); }
}

/* =====================================================================
   Pull-to-refresh — pulls down at the top of the page on mobile
   to refresh /api/state. Hidden on desktop (where the gesture is
   meaningless and can collide with Chrome's own pull-to-refresh).
   ===================================================================== */
.pull-indicator {
  align-items: center;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid transparent;
  color: var(--muted);
  display: none;
  flex-direction: column;
  font-size: 12px;
  gap: 4px;
  height: 0;
  justify-content: center;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transition: none;
  z-index: 50;
}

.pull-indicator-spinner {
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  height: 22px;
  width: 22px;
}

.pull-indicator.ready .pull-indicator-text::after {
  content: " — отпустите";
}

.pull-indicator.refreshing {
  border-bottom-color: var(--line);
  height: 56px !important;
  pointer-events: auto;
  transition: height 0.2s ease;
}

.pull-indicator.refreshing .pull-indicator-spinner {
  animation: app-loading-spin 0.7s linear infinite;
  border-top-color: var(--accent);
}

.pull-indicator.collapsing {
  transition: height 0.2s ease;
}

@media (max-width: 768px) {
  .pull-indicator {
    display: flex;
  }
}

/* =====================================================================
   Searchable picker — replaces native <select> for the lesson-quick
   "выбрать ученика" control. Native iOS picker is unusable with 1500+
   options; this is a search input + filtered popover list.
   ===================================================================== */
.searchable-picker {
  display: grid;
  gap: 6px;
  /* position: relative on the wrapper anchors the absolute clear-button
     and the popover list. Without this the × clear button drifts up
     into the dialog header (nearest positioned ancestor is the dialog)
     and the dropdown popover doesn't align under the input. */
  position: relative;
}

.searchable-picker-label {
  color: var(--muted);
  font-size: 13px;
}

.searchable-picker-input {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
  min-height: 44px;
  padding: 10px 38px 10px 14px;
  width: 100%;
}

.searchable-picker-input:focus {
  border-color: var(--accent);
  outline: none;
}

.searchable-picker-clear {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font-size: 18px;
  height: 28px;
  justify-content: center;
  line-height: 1;
  min-height: 28px;
  padding: 0;
  position: absolute;
  /* the input sits below a label that is ~26px tall (gap + 13px label
     line). centring the button inside the input means top:34px is the
     top of the input, and we offset by (input height - button height)/2
     ≈ 8px so the button sits middle-right of the input itself */
  right: 8px;
  top: calc(100% - 36px);
  width: 28px;
}

.searchable-picker-clear:hover {
  background: var(--bg);
  color: var(--ink);
}

.searchable-picker-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 17, 21, 0.08);
  list-style: none;
  margin: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
}

.searchable-picker-option {
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  padding: 8px 10px;
}

.searchable-picker-option:hover,
.searchable-picker-option.active {
  background: var(--soft);
  color: var(--ink);
}

.searchable-picker-empty,
.searchable-picker-more {
  color: var(--muted);
  font-size: 12px;
  padding: 8px 10px;
  text-align: center;
}

/* =====================================================================
   Lesson-quick dialog footer — primary full width, secondary buttons
   wrap below as equal-width chips so the layout doesn't go ragged.
   ===================================================================== */
.lesson-quick-footer-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.lesson-quick-footer-primary {
  width: 100%;
}

.lesson-quick-footer-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lesson-quick-footer-secondary > button {
  flex: 1 1 calc(33.333% - 4px);
  font-size: 13px;
  min-height: 42px;
  min-width: 100px;
  padding: 8px 10px;
}

@media (max-width: 560px) {
  .lesson-quick-footer-secondary > button {
    flex: 1 1 calc(50% - 3px);
  }
}

/* Lock the lesson-quick dialog tab panel height so switching tabs
   doesn't make the surrounding content jump up and down. */
.lesson-quick-tab-panel {
  min-height: 320px;
}

@media (max-width: 768px) {
  /* Compact tabs in the lesson-quick dialog so "Записанные клиенты"
     fits on a phone screen — text is shorter, padding is tighter,
     and the strip scrolls horizontally if it still overflows. */
  .lesson-quick-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .lesson-quick-tabs::-webkit-scrollbar { display: none; }
  .lesson-quick-tab {
    flex: 0 0 auto;
    font-size: 13px;
    min-height: 42px;
    min-width: auto;
    padding: 0 14px;
    white-space: nowrap;
  }
  .lesson-quick-book-grid {
    grid-template-columns: 1fr !important;
    margin-bottom: 14px !important;
  }
  .searchable-picker-list {
    max-height: 220px;
  }

  /* Make the form dialogs (Lesson, Student, Booking, etc.) feel like
     a real native sheet on phone:
     - tighter padding (sheet padding instead of desktop dialog)
     - sticky <menu> row so primary/cancel are always reachable while
       scrolling a long form
     - primary action moves to the top (visual order) of the action row
       since it's most important */
  dialog .dialog-form {
    padding: 18px 16px 16px;
  }
  dialog .dialog-form > h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px;
  }
  dialog .dialog-form > menu {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--surface) 30%);
    bottom: 0;
    margin: 12px -16px -16px;
    padding: 14px 16px 18px;
    position: sticky;
    z-index: 2;
  }
  dialog .dialog-form > menu .primary {
    order: -1;
  }
}

/* =====================================================================
   Mobile admin layout (everything that is NOT student mode).
   Strategy: keep the existing desktop UI intact above 768px; below, we
   collapse the sidebar into a fixed bottom nav, switch the schedule
   from the 2D calendar grid to a linear day-list, scroll narrow
   tables horizontally, and stack toolbars/section heads.
   ===================================================================== */

.schedule-mobile-list {
  display: none;
  flex-direction: column;
  gap: 8px;
}

.admin-lesson-card {
  background: #ffffff;
  border: 1px solid #ececef;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.04);
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: 64px minmax(0, 1fr);
  padding: 12px 14px 12px 14px;
  position: relative;
}

.admin-lesson-card::before {
  background: #4f80e8;
  border-radius: 999px;
  bottom: 12px;
  content: "";
  left: 8px;
  position: absolute;
  top: 12px;
  width: 3px;
}

.admin-lesson-card.masterclass::before {
  background: #f0a538;
}

.admin-lesson-card.free-topic::before {
  background: #2bb673;
}

.admin-lesson-card.canceled,
.admin-lesson-card.closed {
  opacity: 0.6;
}

.admin-lesson-card-time {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 4px;
}

.admin-lesson-card-time strong {
  color: #15161a;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}

.admin-lesson-card-time span {
  color: #7a7e87;
  font-size: 11px;
  font-weight: 500;
}

.admin-lesson-card-main {
  min-width: 0;
}

.admin-lesson-card-main h4 {
  color: #15161a;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0 0 2px;
}

.admin-lesson-card-meta {
  color: #7a7e87;
  font-size: 13px;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}

.admin-lesson-card-stats {
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  gap: 6px;
}

.admin-lesson-card-stats .stat-pill {
  background: #f5f6f8;
  border-radius: 8px;
  color: #15161a;
  font-weight: 500;
  padding: 4px 8px;
}

.admin-lesson-card-stats .stat-pill.ok {
  background: #dff5ee;
  color: #1a7259;
}

.admin-lesson-card-stats .stat-pill.warn {
  background: #fdecec;
  color: #b3261e;
}

.admin-lesson-card-stats .stat-pill.danger {
  background: #fdecec;
  color: #b3261e;
}

@media (max-width: 768px) {
  /* --- topbar: compact ------------------------------------------- */
  body:not(.student-mode) .topbar {
    background: var(--surface);
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
  }
  body:not(.student-mode) .topbar h1 {
    font-size: 18px;
    font-weight: 600;
  }
  body:not(.student-mode) .topbar .eyebrow {
    display: none;
  }
  body:not(.student-mode) .topbar__actions {
    display: flex;
    flex-shrink: 0;
    gap: 6px;
  }
  body:not(.student-mode) #seedBtn,
  body:not(.student-mode) #logoutBtn {
    border-radius: 999px;
    font-size: 12px;
    min-height: 32px;
    padding: 0 12px;
  }
  body:not(.student-mode) #telegramTextBtn {
    display: none; /* rarely used on mobile */
  }

  /* --- layout: stack, sidebar -> bottom nav --------------------- */
  body:not(.student-mode) .layout {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  body:not(.student-mode) .sidebar {
    background: var(--surface);
    border-right: none;
    border-top: 1px solid var(--line);
    bottom: 0;
    box-shadow: 0 -4px 20px rgba(15, 17, 21, 0.06);
    display: grid !important;
    gap: 4px;
    grid-template-columns: repeat(4, 1fr);
    left: 0;
    padding: 6px 8px;
    position: fixed;
    right: 0;
    z-index: 10;
  }
  body:not(.student-mode) .sidebar .nav {
    background: transparent;
    border: none;
    border-radius: 12px;
    color: var(--muted);
    font-size: 11px;
    min-height: 50px;
    padding: 8px 6px;
    text-align: center;
    white-space: nowrap;
  }
  body:not(.student-mode) .sidebar .nav.active {
    background: var(--soft);
    color: var(--accent);
  }
  body:not(.student-mode) .content {
    padding: 12px 12px 86px;
  }

  /* --- section heads stack vertically --------------------------- */
  body:not(.student-mode) .section-head,
  body:not(.student-mode) .section-head.compact-head {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
  }
  body:not(.student-mode) .section-head h2 {
    font-size: 18px;
    font-weight: 600;
  }
  body:not(.student-mode) .inline-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  body:not(.student-mode) .inline-controls > * {
    flex: 1 1 auto;
    min-width: 110px;
  }

  /* --- admin tabs: horizontal scroll ---------------------------- */
  body:not(.student-mode) .admin-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 -12px 14px;
    overflow-x: auto;
    padding: 0 12px 4px;
    scrollbar-width: none;
  }
  body:not(.student-mode) .admin-tabs::-webkit-scrollbar {
    display: none;
  }
  body:not(.student-mode) .admin-tab {
    flex: 0 0 auto;
    font-size: 13px;
    min-height: 40px;
    padding: 8px 14px;
    white-space: nowrap;
  }

  /* --- week switcher (day tabs) --------------------------------- */
  body:not(.student-mode) .week-switcher {
    align-items: center;
    gap: 4px;
  }
  body:not(.student-mode) .day-tabs {
    display: flex !important;
    flex: 1;
    flex-wrap: nowrap;
    gap: 6px;
    grid-template-columns: none !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body:not(.student-mode) .day-tabs::-webkit-scrollbar {
    display: none;
  }
  body:not(.student-mode) .day-tab {
    flex: 0 0 auto;
    min-height: 64px;
    min-width: 56px;
  }
  body:not(.student-mode) .day-tab small {
    font-size: 9px;
  }

  /* --- filters / bulk actions: stack vertically ----------------- */
  body:not(.student-mode) .schedule-filters,
  body:not(.student-mode) .schedule-filters.bulk-actions,
  body:not(.student-mode) .schedule-filters.week-actions {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  /* Bulk operations (Операции дня / Операции недели) on phone:
     keep them available but compact — user opens the <details>
     summary like an accordion. Closed: just a single chip-style
     row taking almost no space. Open: buttons stack vertically,
     full-width, easy thumb taps. Power-user actions like changing
     the teacher for the whole day or cancelling everything stay
     reachable without occupying the schedule. */
  body:not(.student-mode) details.schedule-block-collapsible {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 8px;
    padding: 0;
  }
  body:not(.student-mode) details.schedule-block-collapsible > .schedule-block-head {
    cursor: pointer;
    margin: 0;
    padding: 12px 14px;
  }
  body:not(.student-mode) details.schedule-block-collapsible > .schedule-block-head h3 {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
  }
  body:not(.student-mode) details.schedule-block-collapsible > .schedule-block-head::after {
    color: var(--muted);
    content: "▾";
    float: right;
    font-size: 12px;
    transition: transform 0.18s ease;
  }
  body:not(.student-mode) details.schedule-block-collapsible[open] > .schedule-block-head::after {
    transform: rotate(180deg);
  }
  body:not(.student-mode) details.schedule-block-collapsible > .schedule-filters {
    border-top: 1px solid var(--line);
    padding: 10px 14px 14px;
  }
  body:not(.student-mode) details.schedule-block-collapsible > .schedule-filters button {
    min-height: 40px;
  }

  /* --- table toolbars stack ------------------------------------- */
  body:not(.student-mode) .table-toolbar,
  body:not(.student-mode) .table-toolbar.split-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  body:not(.student-mode) .table-toolbar > * {
    width: 100%;
  }

  /* --- tables: row -> card on phone ----------------------------- */
  body:not(.student-mode) .data-table-wrap {
    margin: 0;
    overflow-x: visible;
  }
  body:not(.student-mode) .data-table {
    border-collapse: separate;
    border-spacing: 0;
    display: block;
    font-size: 13px;
    min-width: 0;
    width: 100%;
  }
  body:not(.student-mode) .data-table thead {
    /* visually hidden, kept for screen readers / sortable buttons */
    height: 0;
    overflow: hidden;
    position: absolute;
    visibility: hidden;
    width: 0;
  }
  body:not(.student-mode) .data-table tbody,
  body:not(.student-mode) .data-table tr {
    display: block;
    width: 100%;
  }
  body:not(.student-mode) .data-table tr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
    padding: 12px 14px;
  }
  body:not(.student-mode) .data-table tr.clickable-row {
    cursor: pointer;
  }
  body:not(.student-mode) .data-table tr.clickable-row:active {
    background: var(--soft);
  }
  body:not(.student-mode) .data-table td {
    border: none;
    display: block;
    padding: 4px 0;
    white-space: normal;
  }
  body:not(.student-mode) .data-table td[data-label]::before {
    color: var(--muted);
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
    text-transform: uppercase;
  }
  /* first cell is the row title (Name / Title) — no label needed,
     and it gets a slightly larger weight */
  body:not(.student-mode) .data-table td:first-child[data-label]::before {
    display: none;
  }
  body:not(.student-mode) .data-table td:first-child {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    padding-top: 0;
  }
  body:not(.student-mode) .data-table td:first-child strong {
    font-size: inherit;
    font-weight: inherit;
  }
  body:not(.student-mode) .data-table td .row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }
  body:not(.student-mode) .data-table td .row-actions button {
    flex: 1 1 auto;
    font-size: 12px;
    min-height: 36px;
    padding: 6px 10px;
    white-space: nowrap;
  }
  body:not(.student-mode) .data-table tr td.table-empty {
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
    text-align: center;
  }
  body:not(.student-mode) .data-table tr td.table-empty::before {
    display: none;
  }
  body:not(.student-mode) .data-table tr td.table-loadmore::before {
    display: none;
  }
  body:not(.student-mode) .data-table tr td.table-loadmore {
    font-size: 13px;
    text-align: center;
  }
  body:not(.student-mode) .data-table tr td.table-loadmore button {
    width: 100%;
  }
  body:not(.student-mode) .data-table tr td.table-loadmore .small {
    color: var(--muted);
    display: block;
    font-size: 11px;
    margin-top: 6px;
  }
  /* hide dev-only ↻ seed button on mobile (kept on desktop for QA) */
  body:not(.student-mode) #seedBtn {
    display: none;
  }

  /* --- schedule: hide 2D grid, show mobile list ----------------- */
  body:not(.student-mode) .calendar-grid {
    display: none !important;
  }
  body:not(.student-mode) .schedule-mobile-list {
    display: flex !important;
  }

  /* --- directory grid: single column ---------------------------- */
  body:not(.student-mode) .directory-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* --- dialogs: bottom sheet ----------------------------------- */
  dialog[open] {
    border-radius: 14px 14px 0 0;
    bottom: 0;
    left: 0;
    margin: 0;
    max-height: 92vh;
    max-width: 100vw;
    overflow: auto;
    position: fixed;
    right: 0;
    top: auto;
    width: 100vw;
  }
}