:root {
  --bg: #f3f7fb;
  --card: #ffffff;
  --text: #1f2d3d;
  --muted: #6c7a89;
  --line: #d9e4ef;
  --blue: #2f6f9f;
  --blue-dark: #244f73;
  --green: #23b26d;
  --orange: #f48b3b;
  --red: #d94b4b;
  --shadow: 0 16px 40px rgba(31, 45, 61, .08);
  --radius: 18px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: linear-gradient(180deg, #e6f1f8 0, var(--bg) 240px);
  color: var(--text);
}
button, input, select { font: inherit; }
button { cursor: pointer; }

.topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 28px;
  background: #3b4651;
  color: white;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 12px rgba(0,0,0,.14);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 250px; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #46a1dc, #28618d);
  font-weight: 900;
  letter-spacing: -1px;
}
.brand b { display: block; font-size: 17px; }
.brand span { display: block; color: #c8d4df; font-size: 12px; margin-top: 2px; }
.main-nav { display: flex; gap: 6px; overflow-x: auto; }
.nav-btn {
  border: 0;
  background: transparent;
  color: #d7e2ed;
  padding: 22px 14px 20px;
  font-weight: 700;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.nav-btn.active { color: white; border-color: #7fc7ff; background: rgba(255,255,255,.06); }

main { padding: 26px 28px 46px; }
.panel { display: none; }
.active-panel { display: block; }

.toolbar {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(217,228,239,.8);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 16px;
  backdrop-filter: blur(12px);
}
.field { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.field.grow { flex: 1; min-width: 280px; }
label { color: var(--muted); font-size: 12px; font-weight: 700; }
input, select {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  background: white;
  color: var(--text);
  outline: none;
  min-height: 42px;
}
input:focus, select:focus { border-color: #69aede; box-shadow: 0 0 0 4px rgba(105,174,222,.15); }

.primary, .ghost, .danger, .file-btn {
  border: 0;
  border-radius: 12px;
  padding: 11px 16px;
  font-weight: 800;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.primary { background: linear-gradient(145deg, #3a99d8, #2b6f9f); color: white; box-shadow: 0 6px 14px rgba(47,111,159,.22); }
.ghost { background: #ecf3f9; color: #2f5878; border: 1px solid #d6e5f1; }
.danger { background: #fff0f0; color: #c03232; border: 1px solid #ffd2d2; }
.file-btn { background: #ecf3f9; color: #2f5878; border: 1px solid #d6e5f1; cursor: pointer; }
.small { padding-inline: 14px; }
.full { width: 100%; margin-top: 12px; }

.tabs {
  display: flex;
  gap: 0;
  margin: 10px 0 0;
  overflow-x: auto;
}
.tab {
  border: 0;
  background: transparent;
  padding: 16px 22px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 900;
  color: #315d80;
  border-radius: 14px 14px 0 0;
}
.tab.active { background: white; box-shadow: 0 -8px 24px rgba(31,45,61,.06); }

.schedule-card {
  background: white;
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 22px;
}
.schedule-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
  margin-bottom: 14px;
}
.schedule-head h1 { margin: 0; text-align: center; font-size: 28px; letter-spacing: .2px; }
.schedule-head p { margin: 0 0 5px; color: var(--muted); font-size: 13px; }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.grid-wrap { width: 100%; overflow: auto; border: 1px solid #28313b; }
.schedule-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 980px;
  table-layout: fixed;
  background: white;
}
.schedule-table th, .schedule-table td { border: 1px solid #9ea8b0; }
.schedule-table th {
  background: #f9fbfd;
  color: #111;
  height: 58px;
  vertical-align: middle;
  font-weight: 900;
}
.schedule-table th small { display: block; font-weight: 600; color: #293746; margin-top: 4px; }
.day-cell { width: 54px; text-align: center; font-weight: 800; background: #fbfdff; }
.lesson-cell { height: 96px; vertical-align: top; padding: 5px; position: relative; background: #fff; }
.lesson-cell:hover { background: #f5fbff; }
.empty-hint {
  opacity: 0;
  color: #8ea0ae;
  font-size: 12px;
  text-align: center;
  padding-top: 28px;
  transition: .15s;
}
.lesson-cell:hover .empty-hint { opacity: 1; }
.lesson-card {
  border-radius: 12px;
  padding: 8px;
  min-height: 82px;
  border-left: 5px solid #3a99d8;
  background: #eaf5ff;
  box-shadow: inset 0 0 0 1px rgba(42, 106, 151, .08);
  cursor: pointer;
  overflow: hidden;
}
.lesson-card.lecture { border-left-color: #3a99d8; background: #eaf5ff; }
.lesson-card.practice { border-left-color: #27b875; background: #ebfbf3; }
.lesson-card.lab { border-left-color: #f49a3b; background: #fff4e8; }
.lesson-card.seminar { border-left-color: #8a63d2; background: #f4efff; }
.lesson-card b { display: block; font-size: 13px; margin-bottom: 4px; }
.lesson-card span { display: block; color: #34495e; font-size: 12px; line-height: 1.25; }
.lesson-card .note { color: #7a8793; margin-top: 4px; }

.legend { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 16px; color: var(--muted); font-size: 13px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.dot.lecture { background: #3a99d8; }
.dot.practice { background: #27b875; }
.dot.lab { background: #f49a3b; }
.dot.seminar { background: #8a63d2; }

.data-layout { display: grid; grid-template-columns: 230px 1fr; gap: 18px; }
.data-sidebar, .data-content, .settings-card, .help-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.data-sidebar { padding: 10px; height: fit-content; }
.data-tab {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 13px 14px;
  border-radius: 12px;
  font-weight: 800;
  color: #456277;
}
.data-tab.active { background: #eaf5ff; color: #245b82; }
.data-content { padding: 20px; }
.section-title { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; }
.section-title h2, .settings-card h2, .help-card h2 { margin: 0 0 6px; }
.section-title p, .settings-card p { margin: 0; color: var(--muted); }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.item-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  background: #fbfdff;
  cursor: pointer;
}
.item-card:hover { border-color: #90c2e6; box-shadow: 0 8px 24px rgba(31,45,61,.06); }
.item-card b { display: block; margin-bottom: 6px; }
.item-card span { color: var(--muted); font-size: 13px; }

.settings-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; align-items: start; }
.settings-card, .help-card { padding: 22px; }
.slots-editor { display: grid; gap: 10px; margin-top: 16px; }
.slot-row { display: grid; grid-template-columns: 60px 1fr 1fr 44px; gap: 8px; align-items: center; }
.slot-row input { min-width: 0; }
.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 0;
  background: #f0f4f8;
  font-size: 22px;
  color: #4b5d6b;
}
.backup-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.feature-list { color: #425466; padding-left: 20px; line-height: 1.7; }
.help-card { max-width: 850px; }
.help-card li { margin: 10px 0; }

.modal {
  border: 0;
  padding: 0;
  background: transparent;
}
.modal::backdrop { background: rgba(18, 27, 36, .45); backdrop-filter: blur(4px); }
.modal-card {
  width: min(760px, calc(100vw - 28px));
  background: white;
  border-radius: 22px;
  box-shadow: 0 26px 70px rgba(0,0,0,.24);
  padding: 20px;
}
.small-card { width: min(460px, calc(100vw - 28px)); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.modal-head h2 { margin: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.spacer { flex: 1; }
.hidden { display: none !important; }
.conflict-box {
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  background: #fff4e5;
  border: 1px solid #ffd4a3;
  color: #7a4200;
  font-size: 13px;
  line-height: 1.5;
}
.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  background: #25384a;
  color: white;
  padding: 12px 16px;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: .2s;
  z-index: 20;
}
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 920px) {
  .topbar { height: auto; padding: 12px; align-items: start; flex-direction: column; }
  .brand { min-width: auto; }
  main { padding: 16px; }
  .schedule-head, .section-title { flex-direction: column; align-items: stretch; }
  .head-actions { justify-content: stretch; }
  .head-actions button { flex: 1; }
  .data-layout, .settings-grid { grid-template-columns: 1fr; }
  .data-sidebar { display: flex; overflow-x: auto; }
  .data-tab { white-space: nowrap; }
  .form-grid { grid-template-columns: 1fr; }
}

@media print {
  body { background: white; }
  .topbar, .toolbar, .tabs, .head-actions, .legend { display: none !important; }
  main { padding: 0; }
  .schedule-card { box-shadow: none; border: 0; padding: 0; }
  .grid-wrap { overflow: visible; border: 1px solid #111; }
  .schedule-table { min-width: auto; font-size: 11px; }
  .lesson-cell { height: 82px; }
}

/* Авторизация */
.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(79, 167, 223, .25), transparent 32%),
    radial-gradient(circle at 80% 20%, rgba(35, 178, 109, .18), transparent 30%),
    linear-gradient(180deg, #e6f1f8 0%, #f3f7fb 100%);
}
body:not(.locked) .auth-screen { display: none; }
body.locked .topbar,
body.locked main { display: none; }
.auth-card {
  width: min(440px, 100%);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(217,228,239,.95);
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(31,45,61,.16);
  padding: 28px;
  backdrop-filter: blur(14px);
}
.auth-logo {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #46a1dc, #28618d);
  color: white;
  font-weight: 950;
  letter-spacing: -1px;
  margin-bottom: 16px;
}
.auth-card h1 { margin: 0 0 8px; font-size: 30px; }
.auth-card p { margin: 0 0 18px; color: var(--muted); }
.auth-form { display: grid; gap: 8px; }
.auth-hint {
  margin-top: 16px;
  padding: 12px;
  border-radius: 14px;
  background: #f4f9fd;
  color: #425466;
  font-size: 13px;
  line-height: 1.5;
}
.user-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  white-space: nowrap;
}
.user-box span {
  color: #d7e2ed;
  font-size: 13px;
  font-weight: 800;
}
.logout-btn {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: white;
  border-radius: 12px;
  padding: 9px 12px;
  font-weight: 800;
}
.logout-btn:hover { background: rgba(255,255,255,.14); }

/* Школьные типы уроков */
.lesson-card.normal { border-left-color: #3a99d8; background: #eaf5ff; }
.lesson-card.control { border-left-color: #d94b4b; background: #fff0f0; }
.lesson-card.lab { border-left-color: #f49a3b; background: #fff4e8; }
.lesson-card.classhour { border-left-color: #27b875; background: #ebfbf3; }
.dot.normal { background: #3a99d8; }
.dot.control { background: #d94b4b; }
.dot.classhour { background: #27b875; }

@media (max-width: 920px) {
  .user-box { width: 100%; justify-content: space-between; }
}

@media print {
  .auth-screen, .user-box { display: none !important; }
}


/* files + users */
.settings-grid { align-items: start; }
.settings-card.wide-card { grid-column: span 2; }
.primary.alt { background: #25a56a; }
.telegram-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.status-line {
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #f4f9fd;
  border: 1px solid #d9e4ef;
  color: #425466;
  font-size: 13px;
  line-height: 1.4;
}
.users-list { display: grid; gap: 10px; margin: 12px 0; }
.user-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f9fcff;
}
.user-row.inactive { opacity: .62; background: #f4f4f4; }
.user-row b { display: block; font-size: 14px; margin-bottom: 4px; }
.user-row span, .user-row small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.user-row code, .help-card code, .settings-card code, .auth-hint code {
  background: rgba(31,45,61,.07);
  border: 1px solid rgba(31,45,61,.08);
  padding: 2px 5px;
  border-radius: 7px;
  font-size: 12px;
}
.check-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: var(--text);
  font-weight: 800;
}
.check-line input { width: 18px; height: 18px; accent-color: var(--blue); }
button:disabled { opacity: .6; cursor: wait; }

@media (max-width: 920px) {
  .settings-card.wide-card { grid-column: span 1; }
  .telegram-grid { grid-template-columns: 1fr; }
  .user-row { align-items: stretch; flex-direction: column; }
}

.auto-layout {
  display: grid;
  gap: 18px;
}
.auto-controls {
  display: flex;
  align-items: end;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.auto-check {
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f6f9fc;
  border: 1px solid var(--line);
}
.auto-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-top: 12px;
}
.auto-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  background: white;
}
.auto-table th,
.auto-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px;
  text-align: left;
}
.auto-table th {
  background: #f4f8fb;
  font-size: 12px;
  text-transform: uppercase;
  color: #486277;
}
.auto-table select,
.auto-table input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
}
.auto-table td:last-child {
  width: 54px;
  text-align: center;
}
.auto-empty {
  text-align: center !important;
  color: var(--muted);
  padding: 22px !important;
}
.is-not-admin .admin-only {
  display: none !important;
}


/* v4: режим просмотра + отдельный вход для завуча/админа */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
}
body.public-view main,
body.view-only main,
body.can-edit main { display: block; }
body.public-view .topbar,
body.view-only .topbar,
body.can-edit .topbar { display: flex; }
body.view-only .admin-only,
body:not(.can-edit) .admin-only { display: none !important; }
body.view-only .item-card,
body:not(.can-edit) .item-card { cursor: default; }
body.view-only .item-card:hover,
body:not(.can-edit) .item-card:hover { box-shadow: none; border-color: var(--line); }
body.view-only .lesson-card,
body:not(.can-edit) .lesson-card { cursor: default; }
body.view-only .lesson-cell:hover,
body:not(.can-edit) .lesson-cell:hover { background: #fff; }
.user-box { min-width: 260px; justify-content: flex-end; }

/* Более читаемая таблица на экране */
.schedule-table { min-width: 1180px; }
.schedule-table th { height: 64px; font-size: 14px; }
.schedule-table th small { font-size: 12px; }
.day-cell { width: 68px; font-size: 15px; }
.lesson-cell { height: 118px; padding: 7px; }
.lesson-card {
  min-height: 96px;
  padding: 10px 10px 9px;
  overflow: visible;
  line-height: 1.25;
}
.lesson-card b { font-size: 14px; line-height: 1.15; margin-bottom: 6px; }
.lesson-card span { font-size: 12.5px; line-height: 1.25; }
.lesson-card .note { font-size: 12px; }

@page { size: A4 landscape; margin: 8mm; }
@media print {
  html, body { width: 297mm; min-height: 210mm; background: #fff !important; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .auth-screen, .topbar, .toolbar, .tabs, .head-actions, .legend, .toast, dialog { display: none !important; }
  main { padding: 0 !important; }
  .panel { display: none !important; }
  #schedulePanel.active-panel { display: block !important; }
  .schedule-card {
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .schedule-head {
    display: block !important;
    text-align: center !important;
    margin: 0 0 7px !important;
  }
  .schedule-head h1 { font-size: 24px !important; margin: 0 0 5px !important; }
  .schedule-head p { font-size: 11px !important; margin: 0 0 3px !important; color: #111 !important; }
  .grid-wrap { overflow: visible !important; border: 0 !important; width: 100% !important; }
  .schedule-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border: 1.4px solid #000 !important;
    font-size: 10.5px !important;
  }
  .schedule-table th,
  .schedule-table td { border: 1px solid #222 !important; }
  .schedule-table th {
    height: 42px !important;
    padding: 2px !important;
    background: #fff !important;
    font-size: 12px !important;
    color: #000 !important;
  }
  .schedule-table th small { font-size: 8.5px !important; margin-top: 2px !important; color: #000 !important; }
  .day-cell { width: 34px !important; font-size: 12px !important; background: #fff !important; }
  .lesson-cell {
    height: 82px !important;
    padding: 3px !important;
    vertical-align: top !important;
    background: #fff !important;
  }
  .lesson-card {
    min-height: 73px !important;
    border-radius: 7px !important;
    padding: 5px 5px 4px !important;
    overflow: visible !important;
    box-shadow: none !important;
    border-left-width: 4px !important;
  }
  .lesson-card b { font-size: 10.2px !important; line-height: 1.05 !important; margin-bottom: 3px !important; }
  .lesson-card span { font-size: 8.8px !important; line-height: 1.12 !important; color: #000 !important; }
  .lesson-card .note { font-size: 8.3px !important; }
}
body:not(.can-edit) #schoolName,
body:not(.can-edit) #periodName {
  background: #f8fbfe;
  color: #334155;
  cursor: default;
}

/* v5 fixes: login overlay, aSc-like timetable, no add hover in view */
body.auth-open:not(.locked) .auth-screen {
  display: grid !important;
}
body.auth-open .auth-screen.hidden {
  display: grid !important;
}
body:not(.auth-open) .auth-screen.hidden {
  display: none !important;
}

.schedule-card {
  border-radius: 14px;
  padding: 18px 22px 22px;
}
.schedule-head {
  justify-content: center;
  text-align: center;
  margin-bottom: 12px;
}
.schedule-head h1 {
  font-size: 32px;
  font-weight: 850;
  color: #111;
}
.schedule-head p {
  color: #1f2d3d;
  font-size: 13px;
}
.grid-wrap {
  border: 1.6px solid #111;
  background: white;
}
.schedule-table {
  min-width: 1220px;
  border-collapse: collapse;
  table-layout: fixed;
}
.schedule-table th,
.schedule-table td {
  border: 1px solid #8f979f;
}
.schedule-table th {
  height: 62px;
  background: #fff;
  color: #000;
  font-size: 16px;
  font-weight: 900;
}
.schedule-table th small {
  color: #000;
  font-size: 12px;
  font-weight: 600;
}
.day-cell {
  width: 54px;
  background: #fff;
  color: #000;
  font-size: 17px;
  font-weight: 800;
}
.lesson-cell {
  height: 132px;
  padding: 0;
  vertical-align: top;
  background: #fff;
}
.lesson-cell:hover {
  background: #fff;
}
.empty-hint { display: none !important; }
.lesson-card {
  width: 100%;
  height: 100%;
  min-height: 132px;
  border-radius: 0;
  border: 0;
  border-left: 0;
  padding: 0;
  overflow: hidden;
  box-shadow: none;
  display: grid;
  grid-template-rows: 28px 1fr 24px 24px;
  text-align: center;
  color: #000;
}
.lesson-card.normal,
.lesson-card.lecture,
.lesson-card.practice,
.lesson-card.seminar {
  background: #dcff9d;
}
.lesson-card.control { background: #ffd7d7; }
.lesson-card.lab { background: #ffe8b8; }
.lesson-card.classhour { background: #d9ffe9; }
.lesson-teacher {
  padding: 6px 4px 2px;
  font-size: 13px;
  line-height: 1.05;
  font-weight: 900;
  white-space: normal;
  overflow: hidden;
}
.lesson-subject {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 6px;
  font-size: 14px;
  line-height: 1.1;
  font-weight: 900;
  overflow: hidden;
}
.lesson-room {
  background: #c9c9c9;
  color: #000;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
}
.lesson-group {
  background: #d5f6ff;
  color: #000;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
}
.lesson-note {
  display: none;
}
.legend { display: none; }

@media print {
  @page { size: A4 landscape; margin: 7mm; }
  .schedule-head h1 { font-size: 24px !important; }
  .schedule-head p { font-size: 11px !important; }
  .grid-wrap { border: 0 !important; }
  .schedule-table {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 10px !important;
    border: 1.5px solid #000 !important;
  }
  .schedule-table th { height: 42px !important; font-size: 12px !important; }
  .schedule-table th small { font-size: 8.5px !important; }
  .day-cell { width: 34px !important; font-size: 12px !important; }
  .lesson-cell { height: 82px !important; padding: 0 !important; }
  .lesson-card {
    min-height: 82px !important;
    height: 82px !important;
    grid-template-rows: 18px 1fr 15px 15px !important;
    border-radius: 0 !important;
  }
  .lesson-teacher { font-size: 8.5px !important; padding: 3px 2px 0 !important; }
  .lesson-subject { font-size: 9.5px !important; padding: 2px 3px !important; }
  .lesson-room, .lesson-group { font-size: 8px !important; padding: 0 2px !important; }
}


/* v6: cell layout exactly like sample: teacher top, subject center, cabinet bottom; no class inside cell */
.lesson-card {
  display: grid !important;
  grid-template-rows: 28px 1fr 25px !important;
  grid-template-columns: 1fr !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  text-align: center !important;
}
.lesson-teacher {
  grid-row: 1 !important;
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: start !important;
  padding: 5px 6px 0 !important;
  font-size: 13px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  color: #000 !important;
  background: transparent !important;
}
.lesson-subject {
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 3px 8px !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  color: #000 !important;
  background: transparent !important;
}
.lesson-room {
  grid-row: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  text-align: right !important;
  padding: 1px 7px 1px 2px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #000 !important;
  background: linear-gradient(90deg, #b9b9b9 0 28%, #ffe4ab 28% 76%, #d9fbff 76% 100%) !important;
}
.lesson-group { display: none !important; }
.lesson-note { display: none !important; }

@media print {
  .lesson-card {
    grid-template-rows: 16px 1fr 16px !important;
  }
  .lesson-teacher {
    font-size: 8.3px !important;
    padding: 2px 3px 0 !important;
    line-height: 1.05 !important;
  }
  .lesson-subject {
    font-size: 9px !important;
    padding: 1px 3px !important;
    line-height: 1.05 !important;
  }
  .lesson-room {
    font-size: 8.5px !important;
    padding: 1px 4px 1px 1px !important;
    background: linear-gradient(90deg, #b9b9b9 0 28%, #ffe4ab 28% 76%, #d9fbff 76% 100%) !important;
  }
  .lesson-group { display: none !important; }
}


/* v7: subject colors + fixed print grid */
.lesson-card,
.lesson-card.normal,
.lesson-card.lecture,
.lesson-card.practice,
.lesson-card.seminar,
.lesson-card.control,
.lesson-card.lab,
.lesson-card.classhour {
  background: var(--subject-color, #DFFF9D) !important;
}
.schedule-table { empty-cells: show !important; }
.lesson-cell:empty::after {
  content: "";
  display: block;
  height: 100%;
  min-height: 1px;
}
@media print {
  .schedule-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1.6px solid #000 !important;
  }
  .schedule-table th,
  .schedule-table td {
    border: 0 !important;
    border-right: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
  }
  .schedule-table tr > *:last-child { border-right: 0 !important; }
  .schedule-table tbody tr:last-child > * { border-bottom: 0 !important; }
  .schedule-table thead th { border-bottom: 1px solid #000 !important; }
  .lesson-cell:empty::after {
    content: "\00a0" !important;
    visibility: hidden !important;
    display: block !important;
    min-height: 82px !important;
  }
  .lesson-card,
  .lesson-card.normal,
  .lesson-card.lecture,
  .lesson-card.practice,
  .lesson-card.seminar,
  .lesson-card.control,
  .lesson-card.lab,
  .lesson-card.classhour {
    background: var(--subject-color, #DFFF9D) !important;
  }
}


/* v10: multiple entities in one lesson */
.field select[multiple] {
  min-height: 74px;
  padding: 8px;
}
.field small {
  display: block;
  margin-top: 5px;
  color: #6b7c8f;
  font-size: 11px;
}
.lesson-teacher, .lesson-subject, .lesson-room {
  white-space: normal;
  overflow-wrap: anywhere;
}


/* v13 public/mobile clean */
.brand { min-width: 210px; }
.brand b { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-box { display:flex; align-items:center; gap:10px; }
.auth-card p { display:none; }
.auth-card input::placeholder { color: transparent; }

@media (max-width: 760px) {
  body { background: #f3f7fb; }
  .topbar {
    gap: 10px;
    padding: 10px;
    position: sticky;
  }
  .brand { min-width: 0; width: 100%; }
  .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .brand b { font-size: 15px; max-width: calc(100vw - 90px); }
  .brand span { font-size: 11px; }
  .main-nav { width: 100%; padding-bottom: 2px; }
  .nav-btn { padding: 10px 12px 9px; font-size: 13px; border-radius: 12px; border-bottom: 0; background: rgba(255,255,255,.07); }
  .nav-btn.active { background: rgba(255,255,255,.18); }
  .user-box { width: 100%; justify-content: space-between; min-width: 0; font-size: 12px; }
  .logout-btn, .user-box button { min-height: 36px; padding: 8px 10px; font-size: 12px; }
  main { padding: 10px; }
  .toolbar { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 12px; border-radius: 14px; }
  .field, .field.grow { min-width: 0; width: 100%; }
  input, select { width: 100%; min-width: 0; }
  .tabs { margin-top: 8px; }
  .tab { padding: 10px 14px; font-size: 12px; }
  .schedule-card { padding: 10px; border-radius: 12px; }
  .schedule-head h1 { font-size: 21px; }
  .schedule-head p { font-size: 11px; }
  .grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .schedule-table { min-width: 860px; }
  .schedule-table th { height: 48px; font-size: 12px; }
  .schedule-table th small { font-size: 9px; }
  .day-cell { width: 42px; font-size: 13px; }
  .lesson-cell { height: 92px; }
  .lesson-card { min-height: 92px !important; height: 92px !important; grid-template-rows: 21px 1fr 20px !important; }
  .lesson-teacher { font-size: 10px !important; padding: 3px 4px 0 !important; }
  .lesson-subject { font-size: 11px !important; padding: 2px 4px !important; }
  .lesson-room { font-size: 10px !important; padding-right: 4px !important; }
  .settings-card, .data-content, .help-card { padding: 14px; }
  .settings-grid, .data-layout { grid-template-columns: 1fr; gap: 12px; }
  .backup-actions .primary, .backup-actions .ghost, .backup-actions .danger, .backup-actions .file-btn { width: 100%; }
  .auto-table-wrap { overflow-x: auto; }
  .auto-table { min-width: 760px; }
  .modal-card { width: calc(100vw - 18px); padding: 14px; border-radius: 16px; }
}

/* v14: mobile aSc-like compact schedule + school name from DB */
.toolbar .school-field input[readonly] {
  background: #f7fbff;
  color: #1c2b39;
  cursor: default;
}
body.view-only .toolbar .school-field input {
  border-color: transparent;
  background: transparent;
  padding-left: 0;
  font-weight: 800;
}
.tab-icon { display: none !important; }
.tab-text { display: inline !important; }

@media (max-width: 760px) {
  .topbar {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    min-height: 52px !important;
  }
  .brand {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    gap: 8px !important;
  }
  .brand-mark {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 14px !important;
  }
  .brand b {
    font-size: 15px !important;
    line-height: 1 !important;
    max-width: 42vw !important;
  }
  .brand span {
    font-size: 10px !important;
    margin-top: 2px !important;
  }
  .main-nav {
    display: none !important;
  }
  .user-box {
    width: auto !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
  }
  #currentUserLabel {
    display: none !important;
  }
  #openLoginBtn,
  #logoutBtn {
    min-height: 32px !important;
    padding: 7px 9px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    border-radius: 10px !important;
  }

  main {
    padding: 0 !important;
  }
  #schedulePanel.active-panel {
    display: flex !important;
    flex-direction: column !important;
  }
  .tabs {
    order: 1 !important;
    margin: 0 !important;
    padding: 0 8px !important;
    background: #fff !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #d8e3ec !important;
    overflow-x: auto !important;
  }
  .tab {
    min-width: max-content !important;
    padding: 10px 14px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border-bottom: 3px solid transparent !important;
    color: #25384b !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  .tab.active {
    background: #eef7ff !important;
    border-bottom-color: #2b8fd2 !important;
  }
  .tab-icon {
    display: none !important;
  }
  .tab-text {
    display: inline !important;
  }

  .toolbar {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr auto !important;
    gap: 7px !important;
    padding: 8px 10px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background: #fff !important;
  }
  .toolbar .school-field,
  .toolbar .mode-field {
    display: none !important;
  }
  .toolbar .field {
    margin: 0 !important;
  }
  .toolbar label {
    display: none !important;
  }
  #targetSelect,
  #periodName {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    background: #fff !important;
  }
  #printBtn {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    font-size: 0 !important;
    border-radius: 8px !important;
  }
  #printBtn::after {
    content: "PDF";
    font-size: 12px;
  }

  .schedule-card {
    order: 3 !important;
    margin: 0 !important;
    padding: 8px 8px 12px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    background: #fff !important;
    min-height: calc(100vh - 132px) !important;
  }
  .schedule-head {
    margin: 4px 0 8px !important;
  }
  .schedule-head h1 {
    font-size: 18px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }
  .schedule-head p {
    font-size: 9px !important;
    line-height: 1.1 !important;
    margin: 0 0 2px !important;
  }
  .grid-wrap {
    overflow: hidden !important;
    border: 1px solid #111 !important;
    width: 100% !important;
  }
  .schedule-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    font-size: 7px !important;
  }
  .schedule-table th:first-child,
  .day-cell {
    width: 30px !important;
  }
  .schedule-table th {
    height: 34px !important;
    font-size: 9px !important;
    padding: 0 !important;
    line-height: 1 !important;
    background: #fff !important;
  }
  .schedule-table th small {
    font-size: 5.8px !important;
    margin-top: 2px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }
  .day-cell {
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 0 !important;
  }
  .lesson-cell {
    height: 58px !important;
    padding: 0 !important;
  }
  .lesson-card {
    min-height: 58px !important;
    height: 58px !important;
    grid-template-rows: 12px 1fr 11px !important;
  }
  .lesson-teacher {
    font-size: 5.7px !important;
    line-height: 1 !important;
    padding: 2px 2px 0 !important;
  }
  .lesson-subject {
    font-size: 6.2px !important;
    line-height: 1.05 !important;
    padding: 1px 2px !important;
  }
  .lesson-room {
    font-size: 6.2px !important;
    line-height: 1 !important;
    padding: 1px 2px 1px 1px !important;
  }
  .legend {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .schedule-table th:first-child,
  .day-cell { width: 26px !important; }
  .schedule-table th { font-size: 8px !important; }
  .schedule-table th small { font-size: 5px !important; }
  .lesson-cell { height: 54px !important; }
  .lesson-card { min-height: 54px !important; height: 54px !important; }
  .lesson-teacher { font-size: 5.2px !important; }
  .lesson-subject, .lesson-room { font-size: 5.7px !important; }
}

/* v15: final print/PDF fix. Must stay at the very end, after all mobile rules. */
@page {
  size: A4 landscape;
  margin: 6mm;
}

@media print {
  html,
  body {
    width: 297mm !important;
    min-width: 297mm !important;
    height: 210mm !important;
    min-height: 210mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .auth-screen,
  .topbar,
  .toolbar,
  .tabs,
  .head-actions,
  .legend,
  .toast,
  dialog,
  .modal,
  .data-layout,
  .settings-grid,
  #dataPanel,
  #autoPanel,
  #settingsPanel,
  .admin-only {
    display: none !important;
  }

  main,
  #schedulePanel,
  #schedulePanel.active-panel {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    overflow: visible !important;
  }

  .schedule-card {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .schedule-head {
    display: block !important;
    text-align: center !important;
    margin: 0 0 5mm 0 !important;
    padding: 0 !important;
  }

  .schedule-head p {
    display: block !important;
    margin: 0 0 1.5mm 0 !important;
    padding: 0 !important;
    color: #000 !important;
    font-size: 9pt !important;
    line-height: 1.1 !important;
  }

  .schedule-head h1 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #000 !important;
    font-size: 18pt !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
  }

  .grid-wrap {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.2pt solid #000 !important;
    background: #fff !important;
    overflow: visible !important;
  }

  .schedule-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border: 0 !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 8pt !important;
  }

  .schedule-table thead,
  .schedule-table tbody,
  .schedule-table tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .schedule-table th,
  .schedule-table td {
    border: 0.75pt solid #000 !important;
    outline: 0.01pt solid transparent !important;
    background-clip: padding-box !important;
    color: #000 !important;
  }

  .schedule-table th:first-child,
  .day-cell {
    width: 10mm !important;
    min-width: 10mm !important;
    max-width: 10mm !important;
  }

  .schedule-table th {
    height: 10mm !important;
    padding: 0.5mm !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 9pt !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    vertical-align: middle !important;
    text-align: center !important;
  }

  .schedule-table th small {
    display: block !important;
    margin-top: 1mm !important;
    color: #000 !important;
    font-size: 6pt !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  .day-cell {
    height: 22mm !important;
    padding: 0 !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 9pt !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-align: center !important;
    vertical-align: middle !important;
  }

  .lesson-cell {
    height: 22mm !important;
    min-height: 22mm !important;
    padding: 0 !important;
    vertical-align: top !important;
    background: #fff !important;
    color: #000 !important;
  }

  .lesson-cell:empty::after {
    content: "" !important;
    display: block !important;
    height: 22mm !important;
    min-height: 22mm !important;
  }

  .lesson-card,
  .lesson-card.normal,
  .lesson-card.lecture,
  .lesson-card.practice,
  .lesson-card.seminar,
  .lesson-card.control,
  .lesson-card.lab,
  .lesson-card.classhour {
    display: grid !important;
    grid-template-rows: 5mm 1fr 4mm !important;
    width: 100% !important;
    height: 22mm !important;
    min-height: 22mm !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: var(--subject-color, #DFFF9D) !important;
    color: #000 !important;
  }

  .lesson-teacher {
    padding: 1mm 1.2mm 0 !important;
    color: #000 !important;
    background: transparent !important;
    font-size: 6pt !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: hidden !important;
  }

  .lesson-subject {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5mm 1mm !important;
    color: #000 !important;
    background: transparent !important;
    font-size: 6.5pt !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
  }

  .lesson-room {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 1.2mm 0 0.5mm !important;
    color: #000 !important;
    background: linear-gradient(90deg, #b9b9b9 0 28%, #ffe4ab 28% 76%, #d9fbff 76% 100%) !important;
    font-size: 6pt !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-align: right !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
}

/* v17: show main sections on mobile too */
@media screen and (max-width: 760px) {
  .topbar {
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 8px 10px 0 !important;
  }

  .brand {
    flex: 1 1 calc(100% - 110px) !important;
    width: auto !important;
  }

  .user-box {
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
  }

  .main-nav {
    display: flex !important;
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 !important;
    margin-top: 6px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .main-nav::-webkit-scrollbar {
    display: none !important;
  }

  .nav-btn {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    background: transparent !important;
    color: #e8f1f8 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  .nav-btn.active {
    background: rgba(255,255,255,.10) !important;
    border-bottom-color: #7fc7ff !important;
    color: #fff !important;
  }

  main {
    padding-top: 0 !important;
  }
}

/* v18: compact mobile top header */
@media screen and (max-width: 760px) {
  .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 38px 34px !important;
    align-items: center !important;
    gap: 2px 8px !important;
    padding: 5px 8px 0 !important;
    min-height: 77px !important;
    height: auto !important;
    flex-wrap: unset !important;
  }

  .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: unset !important;
    gap: 7px !important;
  }

  .brand-mark {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
  }

  .brand b {
    font-size: 14px !important;
    line-height: 1.05 !important;
    max-width: 145px !important;
  }

  .brand span {
    font-size: 10px !important;
    line-height: 1 !important;
    margin-top: 1px !important;
  }

  .user-box {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    flex: unset !important;
    justify-content: end !important;
    gap: 4px !important;
  }

  #openLoginBtn,
  #logoutBtn {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    line-height: 30px !important;
    border-radius: 10px !important;
    max-width: 170px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .main-nav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .main-nav::-webkit-scrollbar { display: none !important; }

  .nav-btn {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    line-height: 34px !important;
    border-radius: 0 !important;
    border-bottom-width: 3px !important;
  }

  main { padding-top: 0 !important; }
}

@media screen and (max-width: 390px) {
  .brand b { max-width: 112px !important; }
  #openLoginBtn { max-width: 145px !important; }
  .nav-btn { padding: 0 10px !important; font-size: 11.5px !important; }
}


/* v19: Android/Chrome PDF grid fix. Keep this at the very end. */
.print-cell-fill {
  display: block;
  width: 100%;
  min-height: 1px;
  font-size: 0;
  line-height: 0;
  color: transparent;
  pointer-events: none;
}

@media print {
  .schedule-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    empty-cells: show !important;
  }

  .schedule-table th,
  .schedule-table td {
    position: relative !important;
    border: 0 !important;
    background-clip: padding-box !important;
  }

  .schedule-table th::after,
  .schedule-table td::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border: 0.75pt solid #000 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    z-index: 5 !important;
  }

  .lesson-cell .print-cell-fill {
    display: block !important;
    width: 100% !important;
    height: 22mm !important;
    min-height: 22mm !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
  }

  .lesson-card {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* v20: mobile layout and PNG export button */
@media screen and (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .topbar,
  main,
  .panel,
  .settings-card,
  .data-content,
  .schedule-card {
    max-width: 100vw !important;
  }

  main {
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  .toolbar {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
    align-items: end !important;
  }

  body.can-edit .toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
  }

  body.can-edit .toolbar .school-field {
    display: flex !important;
    grid-column: 1 / -1 !important;
  }

  body.can-edit .toolbar .school-field label {
    display: block !important;
  }

  body.can-edit .toolbar .school-field input {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    background: #fff !important;
    border-color: var(--line) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  body.view-only .toolbar .school-field,
  .toolbar .mode-field {
    display: none !important;
  }

  #printBtn {
    min-width: 76px !important;
    font-size: 0 !important;
  }

  #printBtn::after {
    content: "PNG" !important;
    font-size: 12px !important;
  }

  .schedule-card {
    min-height: 0 !important;
    padding: 10px 8px 16px !important;
    overflow: hidden !important;
  }

  .schedule-head {
    justify-content: center !important;
    text-align: center !important;
  }

  .grid-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid #111 !important;
  }

  .schedule-table {
    width: 920px !important;
    min-width: 920px !important;
    table-layout: fixed !important;
    font-size: 11px !important;
  }

  .schedule-table th:first-child,
  .day-cell {
    width: 44px !important;
    min-width: 44px !important;
  }

  .schedule-table th {
    height: 46px !important;
    padding: 3px 2px !important;
    font-size: 12px !important;
    line-height: 1.05 !important;
  }

  .schedule-table th small {
    font-size: 8px !important;
    line-height: 1.05 !important;
  }

  .day-cell {
    font-size: 14px !important;
  }

  .lesson-cell {
    height: 88px !important;
    padding: 0 !important;
  }

  .lesson-card {
    min-height: 88px !important;
    height: 88px !important;
    border-radius: 0 !important;
    grid-template-rows: 19px 1fr 18px !important;
  }

  .lesson-teacher {
    font-size: 8.5px !important;
    line-height: 1.05 !important;
    padding: 4px 4px 0 !important;
  }

  .lesson-subject {
    font-size: 10px !important;
    line-height: 1.1 !important;
    padding: 2px 4px !important;
  }

  .lesson-room {
    font-size: 10px !important;
    line-height: 1 !important;
    padding: 2px 4px !important;
  }

  .auto-layout,
  .settings-grid,
  .data-layout {
    width: 100% !important;
    max-width: 100vw !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .settings-card,
  .data-content {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    padding: 14px !important;
  }

  .section-title,
  .auto-controls,
  .head-actions,
  .backup-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .section-title h2 {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }

  .auto-check {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-items: center !important;
  }

  .auto-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .auto-table {
    min-width: 720px !important;
    width: 720px !important;
  }
}

@media screen and (max-width: 420px) {
  .schedule-table {
    width: 900px !important;
    min-width: 900px !important;
  }

  .schedule-table th:first-child,
  .day-cell {
    width: 42px !important;
    min-width: 42px !important;
  }

  .lesson-cell {
    height: 84px !important;
  }

  .lesson-card {
    min-height: 84px !important;
    height: 84px !important;
  }
}

/* v21: clearer auto schedule panel */
.auto-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.auto-summary-item {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbfe;
}

.auto-summary-item b {
  display: block;
  color: #1f2d3d;
  font-size: 18px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.auto-summary-item span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.auto-summary-item.ok {
  background: #effaf5;
  border-color: #c8efd9;
}

.auto-summary-item.warn {
  background: #fff8e8;
  border-color: #ffe2a8;
}

.auto-result {
  display: grid;
  gap: 8px;
}

.auto-result b {
  font-size: 15px;
}

.auto-result span {
  color: #425466;
}

.auto-result ul {
  margin: 0;
  padding-left: 18px;
  color: #425466;
}

.auto-result li {
  margin: 3px 0;
}

@media screen and (max-width: 760px) {
  .auto-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .auto-table-wrap {
    border: 0 !important;
    overflow: visible !important;
  }

  .auto-table,
  .auto-table tbody,
  .auto-table tr,
  .auto-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .auto-table {
    background: transparent !important;
    border-collapse: separate !important;
  }

  .auto-table thead {
    display: none !important;
  }

  .auto-table tr {
    margin: 0 0 12px !important;
    padding: 10px !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    background: #fff !important;
  }

  .auto-table td {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 0 !important;
    border: 0 !important;
  }

  .auto-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .auto-table td:last-child {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    width: 100% !important;
  }

  .auto-table td:last-child::before {
    text-transform: none;
    font-size: 12px;
    color: #2f5878;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .auto-table .auto-empty {
    display: block !important;
    text-align: center !important;
    padding: 18px !important;
  }

  .auto-table .auto-empty::before {
    content: none !important;
  }
}

/* v22: explicit admin edit/save mode */
#editModeBtn {
  background: linear-gradient(145deg, #3a99d8, #2b6f9f);
  border-color: rgba(255,255,255,.22);
}

body.can-edit #editModeBtn {
  background: linear-gradient(145deg, #25a56a, #1d7f52);
}

@media screen and (max-width: 760px) {
  #editModeBtn {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    line-height: 30px !important;
    border-radius: 10px !important;
    max-width: 112px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.is-admin .user-box {
    gap: 4px !important;
  }

  body.is-admin #logoutBtn {
    max-width: 82px !important;
  }
}