/* ── MUI theme tokens ── */

:root {
  --mui-primary: #1976d2;
  --mui-primary-dark: #1565c0;
  --mui-primary-light: #42a5f5;
  --mui-primary-container: #e3f2fd;

  --mui-error: #d32f2f;
  --mui-error-container: #ffebee;
  --mui-success: #2e7d32;
  --mui-success-container: #e8f5e9;

  --mui-bg: #fafafa;
  --mui-surface: #ffffff;
  --mui-surface-dim: #f5f5f5;
  --mui-on-surface: rgba(0, 0, 0, 0.87);
  --mui-on-surface-variant: rgba(0, 0, 0, 0.6);
  --mui-outline: rgba(0, 0, 0, 0.23);

  --mui-elevation-1: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
  --mui-elevation-2: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);

  --mui-shape: 4px;
  --mui-font: "Jost", "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  --mui-app-bar: 56px;

  --md-primary: #1976d2;
  --md-primary-dark: #1565c0;
  --md-primary-light: #42a5f5;
  --md-primary-container: #e3f2fd;
  --md-success: #2e7d32;
  --md-error: #d32f2f;
  --md-warning: #ed6c02;
  --md-info: #0288d1;
  --md-bg: #fafafa;
  --md-surface: #ffffff;
  --md-surface-variant: #f5f5f5;
  --md-outline: rgba(0, 0, 0, 0.12);
  --md-outline-variant: rgba(0, 0, 0, 0.08);
  --md-text-primary: rgba(0, 0, 0, 0.87);
  --md-text-secondary: rgba(0, 0, 0, 0.6);
  --md-text-disabled: rgba(0, 0, 0, 0.38);
  --md-elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --md-elevation-2: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);
  --md-elevation-3: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.1);
  --md-shape-sm: 4px;
  --md-shape-md: 8px;
  --md-shape-lg: 12px;
  --md-shape-xl: 16px;
  --md-shape-full: 9999px;
  --md-font: "Jost", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --md-header-offset: 56px;
  --md-toolbar-offset: 52px;
  --md-bottom-nav-height: 72px;
  --md-content-max: 680px;
  --md-gutter: 16px;
  --app-safe-top: 0px;
  --app-safe-bottom: 0px;
  /* Sheet/modal footers: extra inset below Close/Done. Zeroed in RN WebView. */
  --md-sheet-footer-safe: calc(env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px));
}

/* RN WebView already clears the system nav — don't double-pad sheet/modal footers */
html.is-webview,
body.is-webview {
  --md-sheet-footer-safe: 0px;
}

html.is-webview #timelineReadSheet .md-timeline-read-sheet__footer,
html.is-webview .md-timeline-read-sheet__footer,
html.is-webview .md-timeline-sheet__footer,
html.is-webview .md-timeline-filter-sheet__footer,
html.is-webview .al-sheet__footer,
html.is-webview .md-sl-sheet__footer,
html.is-webview .md-sheet-footer,
html.is-webview .menu.menu-box-modal .modal-footer,
html.is-webview #empty_modal .modal-footer,
html.is-webview #fullEmptyModal .modal-footer,
html.is-webview #fullEmptyModal > #footer-bar,
html.is-webview .alert-page #fullEmptyModal > .modal-footer,
html.is-webview .alert-page #fullEmptyModal > #footer-bar,
html.is-webview #ecr-score-footer-dock .md-ecr-score__footer,
html.is-webview .md-ecr-score-footer-dock .md-ecr-score__footer,
body.is-webview #ecr-score-footer-dock .md-ecr-score__footer,
body.is-webview .md-ecr-score-footer-dock .md-ecr-score__footer {
  padding-bottom: 12px !important;
}

/* ── Layout ── */

.md-page {
  font-family: var(--mui-font);
  color: var(--mui-on-surface);
  background: var(--mui-bg);
  min-height: 100vh;
}

.md-feed {
  max-width: var(--md-content-max, 680px);
  margin: 0 auto;
  padding: 0 var(--md-gutter, 16px) calc(var(--md-bottom-nav-height, 72px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 24px);
  box-sizing: border-box;
}

.md-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Shared DataTables pagination chips ──
   DT CSS loads after zapapp on many pages — use !important so chips stay tappable. */
.dataTables_wrapper .dataTables_paginate {
  float: none !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 12px !important;
  padding: 4px 0 0;
  text-align: center;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button.default-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 36px !important;
  min-height: 36px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #202124 !important;
  font-family: var(--md-font, "Jost", sans-serif) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button.default-link:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.default-link:focus {
  background: #f1f3f4 !important;
  color: #202124 !important;
  outline: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current.default-link {
  background: #e8f0fe !important;
  color: #1557b0 !important;
  font-weight: 700 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled.default-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled.default-link:hover {
  color: #9aa0a6 !important;
  background: transparent !important;
  cursor: default;
  opacity: 1;
}

.dataTables_wrapper .dataTables_paginate span {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* ── Buttons ── */

.md-btn-contained {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 16px;
  border: none;
  border-radius: var(--mui-shape);
  background: var(--mui-primary);
  color: #fff;
  font-family: var(--mui-font);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02857em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--mui-elevation-2);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.md-btn-contained:hover,
.md-btn-contained:focus-visible {
  background: var(--mui-primary-dark);
  color: #fff;
}

.md-btn-contained:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.md-btn-contained--success {
  background: #0f766e;
  box-shadow: none;
}

.md-btn-contained--success:hover,
.md-btn-contained--success:focus-visible {
  background: #0d5e58;
}

.md-btn-contained--tonal {
  background: var(--md-primary-container);
  color: var(--md-primary-dark);
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0.01em;
}

.md-btn-contained--tonal:hover,
.md-btn-contained--tonal:focus-visible {
  background: #bbdefb;
  color: var(--md-primary-dark);
}

.md-btn-contained--filter,
.md-btn-contained--class {
  justify-content: flex-start;
  background: var(--md-surface-variant);
  color: var(--md-text-primary);
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  min-height: 44px;
  padding: 8px 14px;
  cursor: default;
  pointer-events: none;
}

.md-btn-contained--filter:hover,
.md-btn-contained--class:hover {
  background: var(--md-surface-variant);
  color: var(--md-text-primary);
}

.md-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--md-shape-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--md-surface-variant);
  color: var(--md-text-secondary);
}

.md-chip--success { background: #e8f5e9; color: var(--md-success); }
.md-chip--error { background: #ffebee; color: var(--md-error); }
.md-chip--warning { background: #fff3e0; color: var(--md-warning); }
.md-chip--info { background: #e3f2fd; color: var(--md-info); }
.md-chip--neutral { background: #f1f3f4; color: #5f6368; }

.md-card {
  background: var(--md-surface);
  border-radius: var(--md-shape-xl);
  box-shadow: var(--md-elevation-1);
}

.md-toolbar .content {
  padding: 10px 12px 12px;
}

.md-toolbar__row {
  display: grid;
  gap: 8px;
}

.md-btn-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--mui-outline);
  border-radius: var(--mui-shape);
  background: transparent;
  color: var(--mui-primary);
  font-family: var(--mui-font);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.md-btn-outlined:hover {
  background: rgba(25, 118, 210, 0.04);
}

.md-btn-text {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 8px;
  border: none;
  border-radius: var(--mui-shape);
  background: transparent;
  color: var(--mui-primary);
  font-family: var(--mui-font);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.md-btn-text:hover {
  background: rgba(25, 118, 210, 0.08);
}

.md-btn-text--error {
  color: var(--mui-error);
}

.md-btn-text--error:hover {
  background: var(--mui-error-container);
}

/* ── MUI Filled TextField ── */

.mui-field {
  margin-bottom: 16px;
}

.mui-field__label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--mui-on-surface-variant);
}

.mui-field__input,
.mui-field__select {
  width: 100%;
  min-height: 48px;
  padding: 16px 12px 8px;
  border: none;
  border-bottom: 1px solid var(--mui-outline);
  border-radius: var(--mui-shape) var(--mui-shape) 0 0;
  background: var(--mui-surface-dim);
  color: var(--mui-on-surface);
  font-family: var(--mui-font);
  font-size: 1rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.mui-field__input:hover,
.mui-field__select:hover {
  background: #eeeeee;
}

.mui-field__input:focus,
.mui-field__select:focus {
  outline: none;
  background: #eceff1;
  border-bottom-width: 2px;
  border-bottom-color: var(--mui-primary);
  padding-bottom: 7px;
}

.mui-field__input::placeholder {
  color: var(--mui-on-surface-variant);
}

.mui-field--password {
  position: relative;
}

.mui-field--password .mui-field__input {
  padding-right: 44px;
}

.mui-field__toggle {
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--mui-shape);
  background: transparent;
  color: var(--mui-on-surface-variant);
  font-size: 1.125rem;
  cursor: pointer;
}

.mui-field__toggle:hover {
  color: var(--mui-primary);
}

/* ── Motion & ripple ── */

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

.md-animate-in {
  animation: mui-rise 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: calc(var(--md-delay, 0) * 50ms);
}

.md-ripple { position: relative; overflow: hidden; }

.md-ripple::after {
  content: "";
  position: absolute;
  left: var(--ripple-x, 50%);
  top: var(--ripple-y, 50%);
  width: 120%;
  padding-bottom: 120%;
  margin-left: -60%;
  margin-top: -60%;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transform: scale(0);
}

.md-ripple:active::after {
  opacity: 0.16;
  transform: scale(1);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

/* Active search reminder — soft ripple while a query is present */
@keyframes md-search-active-ripple {
  0% {
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.06),
      0 0 0 0 rgba(26, 115, 232, 0.42);
  }
  70% {
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.06),
      0 0 0 12px rgba(26, 115, 232, 0);
  }
  100% {
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.06),
      0 0 0 0 rgba(26, 115, 232, 0);
  }
}

.md-search-field.is-searching {
  border-color: rgba(21, 101, 192, 0.5) !important;
  background-color: #eef5ff !important;
  animation: md-search-active-ripple 1.6s ease-out infinite;
}

.md-search-field.is-searching .md-search-field__icon {
  color: #1565c0 !important;
}

.md-search-field.is-searching .md-search-field__input {
  color: #0d47a1 !important;
  font-weight: 600;
}

.md-search-field.is-searching:focus-within {
  border-color: #1565c0 !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 0 0 3px rgba(21, 101, 192, 0.18) !important;
  animation: md-search-active-ripple 1.6s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .md-search-field.is-searching,
  .md-search-field.is-searching:focus-within {
    animation: none;
    box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.22) !important;
  }
}

.md-loading {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.md-loading__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--mui-primary-container);
  border-top-color: var(--mui-primary);
  border-radius: 50%;
  animation: mui-spin 0.7s linear infinite;
}

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

/* ── Account page — brand-first MUI auth + saved accounts ── */

html.account-app .header.header-fixed,
body.account-app .header.header-fixed,
.is-webview.account-app .header.header-fixed,
.is-webview body.account-app .header.header-fixed {
  display: none !important;
}

.account-page {
  --acc-primary: #1565c0;
  --acc-primary-dark: #0d47a1;
  --acc-soft: #e3f2fd;
  --acc-bg: #f3f5f8;
  --acc-ink: #0d47a1;
  --acc-surface: #ffffff;
  --acc-radius: 16px;
  --acc-cover: linear-gradient(135deg, #0d47a1 0%, #1565c0 48%, #42a5f5 100%);
  --acc-border: rgba(15, 23, 42, 0.08);
  --md-account-toolbar-offset: 88px;
  --mui-primary: var(--acc-primary);
  --mui-primary-dark: var(--acc-primary-dark);
  --mui-primary-container: var(--acc-soft);
  background: var(--acc-bg);
  font-family: "Jost", var(--mui-font);
}

body.account-app,
body.account-app .md-page.account-page {
  background: var(--acc-bg, #f3f5f8);
}

.account-page .page-content {
  margin-top: 0 !important;
}

.account-page .page-title-clear {
  display: none;
}

.account-page .account-feed {
  padding-top: calc(var(--md-account-toolbar-offset, 88px) + 12px) !important;
  padding-bottom: 120px;
}

.account-page .md-acc-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--acc-border) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
  background: #fff !important;
  background-image: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none !important;
  overflow: visible !important;
}

.account-page .md-acc-toolbar .content,
.account-page .md-acc-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 8px 12px 10px !important;
  box-sizing: border-box;
}

.account-page .md-acc-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.account-page .md-acc-toolbar__back,
.account-page .md-acc-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--acc-soft);
  color: var(--acc-ink);
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.account-page .md-acc-toolbar__back:hover,
.account-page .md-acc-toolbar__back:focus-visible,
.account-page .md-acc-toolbar__reload:hover,
.account-page .md-acc-toolbar__reload:focus-visible {
  background: #bbdefb;
  color: var(--acc-primary-dark);
}

.account-page .md-acc-toolbar__back:focus-visible,
.account-page .md-acc-toolbar__reload:focus-visible {
  outline: 2px solid var(--acc-primary);
  outline-offset: 2px;
}

.account-page .md-acc-toolbar__reload {
  margin-left: auto;
}

.account-page .md-acc-toolbar__title {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-page .md-acc-toolbar__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(21, 101, 192, 0.14);
  background: linear-gradient(135deg, #e3f2fd 0%, #f8fbff 100%);
}

.account-page .md-acc-toolbar__chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff;
  color: var(--acc-primary);
  font-size: 1rem;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.12);
}

.account-page .md-acc-toolbar__chip-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.account-page .md-acc-toolbar__chip-overline {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(13, 71, 161, 0.72);
  line-height: 1.2;
}

.account-page .md-acc-toolbar__chip-name {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--acc-ink);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-page .valid {
  position: unset !important;
  margin: unset !important;
}

.account-page label.error {
  color: var(--mui-error) !important;
  font-size: 0.75rem;
  display: block;
  margin-top: 4px;
}

.account-page .mui-field__input.error,
.account-page .mui-field__select.error {
  border-color: var(--mui-error);
}

.account-page .account-auth__form .mui-field {
  margin-bottom: 18px;
}

.account-page .account-field__control {
  position: relative;
  display: block;
  min-height: 64px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 16px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.account-page .account-field__control:hover {
  border-color: rgba(21, 101, 192, 0.38);
  background: #fafcff;
}

.account-page .account-field__control:focus-within {
  border-color: #1565c0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16);
}

.account-page .account-field__icon {
  position: absolute;
  left: 8px;
  top: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e8f0fe;
  color: #1565c0;
  font-size: 0.9375rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.account-page .account-field__chevron {
  position: absolute;
  right: 16px;
  top: 50%;
  z-index: 1;
  color: #5f6368;
  font-size: 0.75rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.account-page .mui-auth .mui-field__label {
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5f6368;
}

.account-page .mui-auth .mui-field__input,
.account-page .mui-auth .mui-field__select {
  display: block;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 12px 44px 12px 58px;
  border: none;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  color: #202124;
  -webkit-appearance: none;
  appearance: none;
}

.account-page .mui-auth .mui-field__input:hover,
.account-page .mui-auth .mui-field__select:hover,
.account-page .mui-auth .mui-field__input:focus,
.account-page .mui-auth .mui-field__select:focus {
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  padding-bottom: 12px;
}

.account-page .mui-auth .mui-field__select.select_branch,
.account-page .mui-auth .mui-field__select#school {
  position: relative;
  z-index: 2;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #202124;
  text-overflow: ellipsis;
}

.account-page .serial_number,
.account-page #serial_number {
  text-transform: uppercase;
  font-size: 1.25rem !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}

.account-page .account-field--password .mui-field__input,
.account-page .account-field--password #password {
  padding-right: 52px;
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.account-page .mui-auth .mui-field__input::placeholder {
  font-size: inherit;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #9aa0a6;
}

.account-page .mui-auth .mui-field__toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.125rem;
  color: #5f6368;
}

.account-page .mui-auth .mui-field__toggle:hover,
.account-page .mui-auth .mui-field__toggle:focus-visible {
  background: #e8f0fe;
  color: #1565c0;
}

/* Auth panel — MUI outlined card + blue hero band */
.mui-auth,
.account-page .account-auth {
  position: relative;
  overflow: hidden;
  background: var(--acc-surface, var(--mui-surface));
  border-radius: var(--acc-radius, 16px);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: none;
}

.account-page .account-auth__hero {
  padding: 22px 20px 18px;
  background: var(--acc-cover);
  color: #fff;
}

.account-page .account-auth__overline {
  margin: 0 0 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.account-page .account-auth__title {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #fff;
}

.account-page .account-auth__subtitle {
  margin: 0;
  max-width: 28em;
  font-size: 0.875rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}

.mui-auth__form,
.account-page .account-auth__form {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mui-auth__actions,
.account-page .account-auth__actions {
  display: flex;
  justify-content: stretch;
  padding-top: 14px;
}

.mui-auth__actions .md-btn-contained,
.account-page .account-auth__actions .md-btn-contained {
  width: 100%;
  min-height: 48px;
  gap: 8px;
  text-transform: none;
  box-shadow: none;
  background: var(--acc-primary, var(--mui-primary));
  font-size: 0.9375rem;
  font-weight: 600;
}

.mui-auth__actions .md-btn-contained:disabled {
  opacity: 0.72;
}

/* Loading */
.account-page .account-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 28px 0 8px;
  padding: 16px;
}

.account-page .account-loading.d-none {
  display: none !important;
}

.account-page .account-loading__label {
  margin: 0;
  font-size: 0.8125rem;
  color: #5f6368;
}

/* Saved accounts — MUI card stack */
.account-page .account-saved-section {
  margin-top: 28px;
}

.account-page .account-saved-section__head {
  margin: 0 0 14px;
  padding: 0 2px;
}

.account-page .account-saved-section__overline {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acc-primary);
}

.account-page .account-saved-section__title {
  margin: 0 0 4px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #202124;
  text-transform: none;
}

.account-page .account-saved-section__lead {
  margin: 0;
  font-size: 0.8125rem;
  color: #5f6368;
  line-height: 1.4;
}

.account-page .account-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.account-page .account-card {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}

.account-page .account-card--active {
  border-color: rgba(21, 101, 192, 0.28);
  background: linear-gradient(180deg, #e3f2fd 0%, #fff 56%);
}

.account-page .account-card__body {
  padding: 14px;
}

.account-page .account-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.account-page .account-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.42) 0%, transparent 42%),
    linear-gradient(160deg, #42a5f5 0%, var(--acc-primary) 48%, #0d47a1 100%);
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 -2px 4px rgba(13, 71, 161, 0.28) inset,
    0 4px 10px rgba(13, 71, 161, 0.28),
    0 1px 2px rgba(15, 23, 42, 0.12);
  text-shadow: 0 1px 1px rgba(13, 71, 161, 0.35);
}

.account-page .account-card__avatar--muted {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.38) 0%, transparent 42%),
    linear-gradient(160deg, #cfd8dc 0%, #90a4ae 48%, #607d8b 100%);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 -2px 4px rgba(69, 90, 100, 0.28) inset,
    0 4px 10px rgba(69, 90, 100, 0.22),
    0 1px 2px rgba(15, 23, 42, 0.1);
  text-shadow: 0 1px 1px rgba(55, 71, 79, 0.3);
}

.account-page .account-card__heading {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-page .account-card__name {
  margin: 0;
  max-width: 100%;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #202124;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-page .account-card__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  max-width: 100%;
}

.account-page .account-card__caption-school,
.account-page .account-card__caption-role,
.account-page .account-card__caption-serial,
.account-page .account-card__secondary {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-page .account-card__caption-school,
.account-page .account-card__secondary {
  background: #e3f2fd;
  color: #0d47a1;
  text-transform: none;
  letter-spacing: 0.01em;
}

.account-page .account-card__caption-role {
  background: #e8f0fe;
  color: #1565c0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.account-page .account-card__caption-serial {
  background: #eceff1;
  color: #546e7a;
  text-transform: none;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.account-page .account-card__caption-dot {
  display: none;
}

.account-page .account-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.account-page .account-card--active .account-card__actions {
  grid-template-columns: 1fr;
}

.account-page .account-card__actions .md-btn-contained {
  width: 100%;
  min-height: 40px;
  gap: 6px;
  text-transform: none;
  box-shadow: none;
  font-size: 0.8125rem;
  background: var(--acc-primary);
  color: #fff;
}

.account-page .account-card__actions .md-btn-contained--tonal {
  background: var(--acc-soft);
  color: var(--acc-ink);
}

.account-page .account-card__actions .md-btn-contained--tonal:hover,
.account-page .account-card__actions .md-btn-contained--tonal:focus-visible {
  background: #bbdefb;
  color: var(--acc-ink);
}

.account-page .account-card__active-chip.md-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 36px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 700;
}

.account-page .account-saved-section__footer {
  margin-top: 14px;
  text-align: center;
}

.account-page .account-empty {
  margin: 0;
  padding: 28px 20px;
  text-align: center;
  border-radius: var(--acc-radius, 16px);
  border: 1px dashed rgba(21, 101, 192, 0.22);
  background: linear-gradient(180deg, #e3f2fd 0%, #fff 72%);
}

.account-page .account-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: #fff;
  color: var(--acc-primary);
  font-size: 1.5rem;
  box-shadow: 0 2px 6px rgba(13, 71, 161, 0.16);
}

.account-page .account-empty__title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
  color: #202124;
}

.account-page .account-empty__text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #5f6368;
}

@media (prefers-reduced-motion: reduce) {
  .account-page .md-animate-in {
    animation: none !important;
  }
}

/* Footer overrides */

.account-page #footer-bar a { font-size: 16px; color: #000; }
.account-page #footer-bar .btn-m { font-size: 14px !important; }
.account-page .footer-bar-6 .circle-nav span,
.account-page .footer-bar-6 span { font-size: 13px !important; }

/* ── MUI components (shared) ── */

.mui-paper {
  background: var(--mui-surface);
  color: var(--mui-on-surface);
}

.mui-appbar {
  background: var(--mui-surface);
  color: var(--mui-on-surface);
  box-shadow: var(--mui-elevation-2);
}

.mui-field--compact {
  min-height: 36px;
  padding: 4px 10px 2px;
  margin-bottom: 0;
}

.mui-field--filled.mui-field--compact {
  min-height: 36px;
  padding: 4px 10px 2px;
}

.mui-field--compact .mui-field__label {
  margin-bottom: 0;
  font-size: 0.6875rem;
  line-height: 1.2;
}

.mui-field--compact .mui-field__value {
  font-size: 0.875rem;
  line-height: 1.35;
}

.mui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 22px;
  border: none;
  border-radius: var(--mui-shape);
  font-family: var(--mui-font);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02857em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.mui-button--contained {
  background: var(--mui-primary);
  color: #fff;
  box-shadow: var(--mui-elevation-2);
}

.mui-button--contained:hover,
.mui-button--contained:focus-visible {
  background: var(--mui-primary-dark);
  color: #fff;
  box-shadow: var(--mui-elevation-2);
}

.mui-button--tonal {
  background: var(--mui-primary-container);
  color: var(--mui-primary-dark);
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 600;
}

.mui-button--tonal:hover,
.mui-button--tonal:focus-visible {
  background: #bbdefb;
  color: var(--mui-primary-dark);
}

.mui-button--filter {
  background: #e0f2f1;
  color: #00695c;
}

.mui-button--filter:hover,
.mui-button--filter:focus-visible {
  background: #b2dfdb;
  color: #004d40;
}

.mui-field--filled {
  margin-bottom: 0;
  min-height: 56px;
  padding: 8px 12px 6px;
  border-radius: 4px 4px 0 0;
  background: var(--mui-surface-dim);
  border-bottom: 1px solid var(--mui-outline);
}

.mui-field--filled .mui-field__label {
  margin-bottom: 2px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--mui-on-surface-variant);
}

.mui-field__value {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--mui-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mui-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  border-radius: var(--mui-shape);
  font-size: 0.875rem;
  line-height: 1.43;
  text-decoration: none;
  transition: background 0.2s ease;
}

.mui-alert--error {
  background: var(--mui-error-container);
  color: #5f2120;
}

.mui-alert--error:hover {
  background: #ffcdd2;
}

.mui-alert__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: var(--mui-error);
}

.mui-alert__message {
  flex: 1;
  padding: 8px 0;
  font-weight: 400;
}

.mui-alert__message strong {
  font-weight: 600;
}

.mui-alert__arrow {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--mui-on-surface-variant);
}

.mui-card {
  background: var(--mui-surface);
  border-radius: 12px;
  overflow: hidden;
}

.mui-card--elevated {
  box-shadow: var(--mui-elevation-1);
}

.mui-card__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 0;
}

.mui-card__content {
  padding: 12px 16px 16px;
}

.mui-card__actions {
  display: flex;
  align-items: stretch;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.mui-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--mui-primary-container);
}

.mui-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.mui-chip--error {
  background: var(--mui-error-container);
  color: var(--mui-error);
}

.mui-chip--success {
  background: var(--mui-success-container);
  color: var(--mui-success);
}

.mui-chip--warning {
  background: #fff3e0;
  color: #ed6c02;
}

.mui-button-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  min-height: 48px;
  padding: 8px 11px;
  border: none;
  border-radius: var(--mui-shape);
  background: transparent;
  color: var(--mui-on-surface-variant);
  font-family: var(--mui-font);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02857em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.mui-button-text:hover,
.mui-button-text:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  color: var(--mui-on-surface);
}

.mui-button-text--active {
  color: var(--mui-primary);
}

.mui-button-text--active i {
  color: var(--mui-primary);
}

.mui-button-text + .mui-button-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: rgba(0, 0, 0, 0.08);
}

.mui-button-text--disabled {
  pointer-events: none;
  visibility: hidden;
}

.mui-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0 0;
  color: var(--mui-on-surface-variant);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mui-divider::before,
.mui-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
}

.mui-list-panel {
  margin: 0 16px 12px;
  border-radius: var(--mui-shape);
  background: var(--mui-surface-dim);
  overflow: hidden;
}

.mui-list-item-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px;
  color: var(--mui-on-surface);
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: none;
  transition: background 0.2s ease;
}

.mui-list-item-link + .mui-list-item-link {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.mui-list-item-link:hover {
  background: rgba(0, 0, 0, 0.04);
}

.mui-list-item-link__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mui-shape);
  background: var(--mui-primary-container);
  color: var(--mui-primary);
  font-size: 0.875rem;
}

.mui-list-item-link__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mui-list-item-link__arrow {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--mui-on-surface-variant);
}

/* ── zap-app: timeline (MUI) ── */

.timeline-page {
  --md-header-offset: 0px;
  --md-timeline-toolbar-height: 148px;
  --md-timeline-toolbar-offset: var(--md-timeline-toolbar-height);
  --tl-google-blue: #1a73e8;
  --tl-google-blue-dark: #1557b0;
  --tl-google-blue-light: #4285f4;
  --tl-google-blue-container: #e8f0fe;
  --tl-google-blue-hover: #f6f9fe;
  --tl-google-on-surface-variant: #5f6368;
  --tl-toolbar-teal: #0f766e;
  --tl-toolbar-teal-dark: #0d5e58;
  --tl-feed-bg: #eef1f4;
  --tl-card-radius: 12px;
  --tl-card-border: #c0c4c8;
  --tl-card-shadow: none;
  --tl-content-max: 680px;
  --tl-gutter: 10px;
  --md-soft-pill-bg: var(--tl-google-blue-container);
  --md-soft-pill-border: rgba(26, 115, 232, 0.18);
  --md-soft-pill-primary: var(--tl-google-blue);
  --md-soft-pill-overline: rgba(21, 87, 176, 0.72);
  --md-soft-pill-ink: #0d47a1;
  --mui-primary: var(--tl-google-blue);
  --mui-primary-dark: var(--tl-google-blue-dark);
  --mui-primary-light: var(--tl-google-blue-light);
  --mui-primary-container: var(--tl-google-blue-container);
  --mui-font: "Jost", sans-serif;
  --md-font: "Jost", sans-serif;
  font-family: "Jost", sans-serif !important;
  background: var(--tl-feed-bg);
}

/* Timeline scrolling: document is the only scroller (web + RN WebView).
   Key off body.timeline-app — custom.js replaces <html class> with "isPWA". */
body.timeline-app {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  min-height: 100% !important;
  overflow: visible !important;
  -webkit-overflow-scrolling: touch;
}

body.timeline-app #page,
body.timeline-app .md-page.timeline-page,
body.timeline-app .md-page.timeline-page .timeline-feed.page-content,
body.timeline-app .md-page.timeline-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.md-page.timeline-page a,
.md-page.timeline-page button,
.md-page.timeline-page .mui-btn,
.md-page.timeline-page .md-btn-contained,
.md-page.timeline-page .md-ripple {
  touch-action: manipulation;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.timeline-page h1,
.timeline-page h2,
.timeline-page h3,
.timeline-page h4,
.timeline-page h5,
.timeline-page h6,
.timeline-page p,
.timeline-page a,
.timeline-page span {
  font-family: var(--md-font) !important;
}

.timeline-page .page-title-clear {
  display: none;
}

.timeline-page .timeline-feed.page-content,
.timeline-page .page-content,
.timeline-page .timeline-feed.md-feed {
  max-width: none !important;
  width: 100%;
  margin: 0 !important;
  padding-top: var(--md-timeline-toolbar-offset) !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 61px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 8px) !important;
  background: var(--tl-feed-bg) !important;
  overflow: visible !important;
  transition: none !important;
}

/* Timeline feed stays block (page JS forces display:block); week sits above sort in markup. */
.timeline-page .timeline-feed.md-feed > .md-tl-week {
  flex-shrink: 0;
}
.timeline-page .timeline-feed.md-feed > .md-timeline-sort {
  flex-shrink: 0;
}

.timeline-page .md-timeline-toolbar.card-filter {
  position: fixed !important;
  max-width: none;
  width: 100%;
  left: 0;
  right: 0;
  transform: none;
  margin: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--mui-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)) !important;
  background: #fff !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  top: 0 !important;
  z-index: 100;
}

.header.header-fixed.header--timeline,
.header.header-fixed:has(+ .md-page.timeline-page) {
  display: none !important;
}

.timeline-page .md-timeline-toolbar .content,
.timeline-page .md-timeline-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 10px 12px 12px !important;
  box-sizing: border-box;
}

.timeline-page .md-timeline-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.timeline-page .md-timeline-toolbar__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #202124;
  text-transform: none;
}

.timeline-page .md-timeline-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0 0 0 auto;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #202124;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.timeline-page .md-timeline-toolbar__reload:hover,
.timeline-page .md-timeline-toolbar__reload:focus-visible {
  background: #e8eaed;
  color: #202124;
  outline: none;
}

.timeline-page .md-timeline-toolbar__context {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.timeline-page .md-timeline-toolbar__context .md-timeline-toolbar__chip {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.timeline-page .md-timeline-toolbar__filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--tl-toolbar-teal, #0f766e);
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;
}

.timeline-page .md-timeline-toolbar__filter:hover,
.timeline-page .md-timeline-toolbar__filter:focus-visible {
  background: var(--tl-toolbar-teal-dark, #0d5e58);
  color: #fff;
  outline: none;
}

.timeline-page .md-timeline-toolbar .md-toolbar__row {
  gap: 8px;
}

.timeline-page .md-timeline-toolbar__actions,
.timeline-page .mui-toolbar__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}

.timeline-page .md-timeline-toolbar__actions--solo,
.timeline-page .mui-toolbar__actions--solo {
  grid-template-columns: 1fr;
}

/* MUI Button — timeline toolbar & cards */
.timeline-page .mui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  border: none;
  font-family: var(--mui-font);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.02857em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

.timeline-page .mui-btn--small {
  min-height: 32px;
  padding: 4px 11px;
  font-size: 0.8125rem;
  border-radius: 8px;
}

.timeline-page .md-timeline-toolbar__actions .mui-btn,
.timeline-page .md-timeline-toolbar__actions .md-btn-contained,
.timeline-page .md-timeline-toolbar__actions .md-btn-outlined {
  width: 100%;
  min-height: 40px;
  padding: 8px 14px;
  gap: 8px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  box-shadow: none;
}

.timeline-page .md-timeline-toolbar__actions .md-btn-contained:not(.md-btn-contained--tonal):not(.md-btn-contained--success) {
  background: var(--tl-google-blue);
  color: #fff;
}

.timeline-page .md-timeline-toolbar__actions .md-btn-contained:not(.md-btn-contained--tonal):not(.md-btn-contained--success):hover,
.timeline-page .md-timeline-toolbar__actions .md-btn-contained:not(.md-btn-contained--tonal):not(.md-btn-contained--success):focus-visible {
  background: var(--tl-google-blue-dark);
  color: #fff;
}

.timeline-page .md-timeline-toolbar__actions .md-btn-contained--tonal {
  background: var(--tl-google-blue-container);
  color: var(--tl-google-blue-dark);
}

.timeline-page .md-timeline-toolbar__actions .md-btn-contained--tonal:hover,
.timeline-page .md-timeline-toolbar__actions .md-btn-contained--tonal:focus-visible {
  background: #d2e3fc;
  color: #0d47a1;
}

.timeline-page .md-timeline-toolbar__actions .md-btn-outlined {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.23);
  color: var(--tl-google-blue-dark);
}

.timeline-page .md-timeline-toolbar__actions .md-btn-outlined:hover,
.timeline-page .md-timeline-toolbar__actions .md-btn-outlined:focus-visible {
  background: rgba(26, 115, 232, 0.04);
  border-color: var(--tl-google-blue);
  color: var(--tl-google-blue-dark);
}

.timeline-page .md-timeline-toolbar__actions .md-btn-contained--success {
  background: var(--tl-toolbar-teal);
  color: #fff;
}

.timeline-page .md-timeline-toolbar__actions .md-btn-contained--success:hover,
.timeline-page .md-timeline-toolbar__actions .md-btn-contained--success:focus-visible {
  background: var(--tl-toolbar-teal-dark);
  color: #fff;
}

.timeline-page .md-timeline-toolbar__actions .mui-btn i,
.timeline-page .md-timeline-toolbar__actions .md-btn-contained i,
.timeline-page .md-timeline-toolbar__actions .md-btn-outlined i {
  font-size: 0.9375rem;
}

.is-webview .timeline-page .md-timeline-toolbar__actions .mui-btn,
.is-webview .timeline-page .md-timeline-toolbar__actions .md-btn-contained,
.is-webview .timeline-page .md-timeline-toolbar__actions .md-btn-outlined {
  min-height: 48px;
  padding: 12px 16px;
  font-size: 0.9375rem;
}

.timeline-page .mui-btn-outlined {
  border: 1px solid #dadce0;
  background: transparent;
  color: var(--tl-google-blue);
}

.timeline-page .mui-btn-outlined:hover,
.timeline-page .mui-btn-outlined:focus-visible {
  background: var(--tl-google-blue-hover);
  border-color: var(--tl-google-blue);
  color: var(--tl-google-blue-dark);
}

.timeline-page .mui-btn-contained {
  background: var(--tl-google-blue);
  color: #fff;
}

.timeline-page .mui-btn-contained:hover,
.timeline-page .mui-btn-contained:focus-visible {
  background: var(--tl-google-blue-dark);
  color: #fff;
}

.timeline-page .mui-btn-contained--teal {
  background: var(--tl-google-blue);
}

.timeline-page .mui-btn-contained--teal:hover,
.timeline-page .mui-btn-contained--teal:focus-visible {
  background: var(--tl-google-blue-dark);
  color: #fff;
}

.timeline-page .nav_exit_schools,
.timeline-page .nav_exit_schools .mui-btn,
.timeline-page .nav_exit_schools .md-btn-contained {
  width: 100%;
}

.timeline-page .mui-alert,
.timeline-page .md-timeline-notice {
  margin: 10px auto 0;
  max-width: var(--tl-content-max, 680px);
  width: calc(100% - (var(--tl-gutter, 10px) * 2));
  border-radius: 12px;
  box-sizing: border-box;
}

.timeline-page .md-timeline-sort {
  margin: 0 auto 8px;
  max-width: var(--tl-content-max, 680px);
  width: calc(100% - (var(--tl-gutter, 10px) * 2));
  box-sizing: border-box;
  flex-shrink: 0;
  opacity: 1;
}

.timeline-page .md-tl-week + .md-timeline-sort {
  margin-top: 0;
}

.timeline-page .md-timeline-sort__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 2px 4px;
}

.timeline-page .md-timeline-sort__title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #202124;
}

.timeline-page .md-timeline-sort__hint {
  font-size: 0.625rem;
  font-weight: 500;
  color: #5f6368;
  white-space: nowrap;
}

.timeline-page .md-timeline-sort-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 5px;
  border-radius: 10px;
  border: 1px solid rgba(25, 118, 210, 0.16);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.timeline-page .md-timeline-sort-stat {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 0;
  margin: 0;
  padding: 6px 4px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f8fafc;
  color: #3c4043;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.timeline-page .md-timeline-sort-stat:hover {
  background: #eef3f9;
}

.timeline-page .md-timeline-sort-stat:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

.timeline-page .md-timeline-sort-stat.is-active {
  background: #e8f0fe;
  border-color: #90caf9;
  color: #174ea6;
}

.timeline-page .md-timeline-sort-stat.is-alert .md-timeline-sort-stat__value {
  color: #c5221f;
}

.timeline-page .md-timeline-sort-stat.is-alert.is-active {
  background: #fce8e6;
  border-color: #f6aea9;
  color: #a50e0e;
}

.timeline-page .md-timeline-sort-stat__value {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: #202124;
}

.timeline-page .md-timeline-sort-stat.is-active .md-timeline-sort-stat__value {
  color: inherit;
}

.timeline-page .md-timeline-sort-stat__label {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* ── Timeline feed (stream, dates, cards, media, empty) ── */

.timeline-page .md-timeline-stream {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px var(--tl-gutter, 10px) 8px;
  width: 100%;
  max-width: var(--tl-content-max, 680px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  overflow-anchor: auto;
}

.timeline-page .enter-timeline {
  width: 100%;
  overflow-anchor: auto;
}

/* Timeline: “New posts” cue after session restore (below measured toolbar) */
.md-timeline-new-posts,
.timeline-page .md-timeline-new-posts {
  position: fixed;
  top: calc(var(--md-timeline-toolbar-offset, 148px) + 10px);
  left: 50%;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.55rem 1rem 0.55rem 0.85rem;
  border: none;
  border-radius: 999px;
  font-family: var(--md-font, inherit);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(circle at 28% 30%, rgba(255, 255, 255, 0.35) 0%, transparent 45%),
    linear-gradient(160deg, #42a5f5 0%, #1976d2 48%, #1565c0 100%);
  box-shadow:
    0 2px 10px rgba(15, 23, 42, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(-50%, -6px, 0);
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease,
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.16s ease;
}

.md-timeline-new-posts.is-visible,
.timeline-page .md-timeline-new-posts.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0);
}

.md-timeline-new-posts i,
.timeline-page .md-timeline-new-posts i {
  font-size: 0.75rem;
  line-height: 1;
}

.md-timeline-new-posts:hover,
.timeline-page .md-timeline-new-posts:hover {
  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.md-timeline-new-posts:active,
.timeline-page .md-timeline-new-posts:active {
  transform: translate3d(-50%, 1px, 0);
}

.md-timeline-new-posts:focus-visible,
.timeline-page .md-timeline-new-posts:focus-visible {
  outline: 2px solid #90caf9;
  outline-offset: 3px;
}

html:has(#menu_nav.menu-active) .md-timeline-new-posts,
html:has(.menu-box-modal.menu-active) .md-timeline-new-posts,
html:has(.menu-box-bottom.menu-active) .md-timeline-new-posts,
html:has(.md-timeline-read-sheet.is-open) .md-timeline-new-posts,
html:has(#menu_nav.menu-active) .timeline-page .md-timeline-new-posts,
html:has(.menu-box-modal.menu-active) .timeline-page .md-timeline-new-posts,
html:has(.menu-box-bottom.menu-active) .timeline-page .md-timeline-new-posts,
html:has(.md-timeline-read-sheet.is-open) .timeline-page .md-timeline-new-posts {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .md-timeline-new-posts,
  .timeline-page .md-timeline-new-posts {
    transition: opacity 0.01ms, visibility 0.01ms;
  }
}

/* Timeline: floating back-to-top (left) — mirrors .md-fab-back on the right */
.md-fab-top,
.timeline-page .md-fab-top {
  --fab-size: 52px;
  position: fixed;
  left: 16px;
  bottom: 74px;
  z-index: 99;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fab-size);
  height: var(--fab-size);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.4) 0%, transparent 42%),
    linear-gradient(160deg, #42a5f5 0%, #1976d2 45%, #1565c0 100%);
  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 2px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.md-fab-top.is-visible,
.timeline-page .md-fab-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.md-fab-top::before,
.timeline-page .md-fab-top::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 55%);
  pointer-events: none;
}

.md-fab-top i,
.timeline-page .md-fab-top i {
  position: relative;
  z-index: 1;
  font-size: 1.125rem;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.md-fab-top:hover,
.timeline-page .md-fab-top:hover {
  color: #fff;
  transform: translate3d(0, -1px, 0);
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

.md-fab-top:active,
.md-fab-top.is-pressed,
.timeline-page .md-fab-top:active,
.timeline-page .md-fab-top.is-pressed {
  color: #fff;
  transform: translate3d(0, 1px, 0);
  box-shadow:
    0 1px 4px rgba(15, 23, 42, 0.16),
    inset 0 2px 4px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.md-fab-top:focus-visible,
.timeline-page .md-fab-top:focus-visible {
  outline: 2px solid #90caf9;
  outline-offset: 3px;
}

html:has(#menu_nav.menu-active) .md-fab-top,
html:has(.menu-box-modal.menu-active) .md-fab-top,
html:has(.menu-box-bottom.menu-active) .md-fab-top,
html:has(.md-timeline-read-sheet.is-open) .md-fab-top,
html:has(#menu_nav.menu-active) .timeline-page .md-fab-top,
html:has(.menu-box-modal.menu-active) .timeline-page .md-fab-top,
html:has(.menu-box-bottom.menu-active) .timeline-page .md-fab-top,
html:has(.md-timeline-read-sheet.is-open) .timeline-page .md-fab-top {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .md-fab-top,
  .timeline-page .md-fab-top {
    transition: none;
  }
}

/* Sticky chronological day chips — feed signature */
.timeline-page .md-timeline-date,
.timeline-page .mui-divider.md-timeline-date {
  position: sticky;
  top: calc(var(--md-timeline-toolbar-offset, 148px) + var(--md-timeline-login-offset, 0px) + 4px);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 2px 0 0;
  padding: 6px 0;
  background: linear-gradient(
    180deg,
    var(--tl-feed-bg, #eef1f4) 0%,
    rgba(238, 241, 244, 0.94) 70%,
    rgba(238, 241, 244, 0.72) 100%
  );
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  pointer-events: none;
}

.timeline-page .md-timeline-date::before,
.timeline-page .md-timeline-date::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  display: block;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(15, 23, 42, 0.14) 18%,
    rgba(15, 23, 42, 0.14) 82%,
    transparent 100%
  );
}

.timeline-page .md-timeline-date::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(15, 23, 42, 0.14) 100%
  );
}

.timeline-page .md-timeline-date::after {
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.14) 0%,
    transparent 100%
  );
}

.timeline-page .md-timeline-date__chip,
.timeline-page .md-timeline-date > span.md-timeline-date__chip {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 14px;
  border: 1px solid rgba(95, 99, 104, 0.22);
  border-radius: 999px;
  background: #f1f3f4;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5f6368;
  white-space: nowrap;
}

.timeline-page .md-timeline-card,
.timeline-page article.md-timeline-card.card,
.timeline-page .md-timeline-card.each_post {
  --tl-card-head-bg: #f7f9fc;
  --tl-card-avatar-bg: #e8f0fe;
  --tl-card-avatar-fg: #1a73e8;
  position: relative;
  margin: 0;
  border: 1px solid var(--tl-card-border, #c0c4c8) !important;
  border-radius: var(--tl-card-radius, 12px) !important;
  background: #fff;
  box-shadow: none !important;
  overflow: hidden;
}

.timeline-page .md-timeline-card::before {
  display: none;
}

.timeline-page .md-timeline-card--class {
  --tl-card-head-bg: #f3faf8;
}

.timeline-page .md-timeline-card--school {
  --tl-card-head-bg: #f5f8fd;
}

.timeline-page .md-timeline-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 10px;
  background: var(--tl-card-head-bg);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.timeline-page .md-timeline-card__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.timeline-page .md-timeline-card__head-aside {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.timeline-page .md-timeline-card__head-aside:empty {
  display: none;
}

.timeline-page .md-timeline-card__avatar {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(145deg, #3d8bfd 0%, #1a73e8 46%, #0b3d91 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.35) inset,
    0 -2px 5px rgba(11, 61, 145, 0.4) inset,
    0 3px 6px rgba(13, 71, 161, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.12);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.25),
    0 1px 2px rgba(11, 61, 145, 0.55);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.timeline-page .md-timeline-card__avatar::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto 16% 8% auto;
  width: 36%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.timeline-page .md-timeline-card--class .md-timeline-card__avatar,
.timeline-page .md-timeline-card--school .md-timeline-card__avatar {
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(145deg, #3d8bfd 0%, #1a73e8 46%, #0b3d91 100%);
  color: #fff;
}

.timeline-page .md-timeline-card__who {
  flex: 1;
  min-width: 0;
}

.timeline-page .md-timeline-card__topline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.timeline-page .md-timeline-card__author {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #202124;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-page .md-timeline-card__meta {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #80868b;
}

.timeline-page .md-timeline-card__branch.md-chip {
  display: inline;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin-top: 2px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #9aa0a6;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-page .md-timeline-card__branch--group {
  color: var(--md-primary, #1a73e8);
  font-weight: 600;
}

.timeline-page .md-timeline-card__branch--tap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--md-primary, #1a73e8);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.timeline-page .md-timeline-card__branch--tap:hover,
.timeline-page .md-timeline-card__branch--tap:focus-visible {
  text-decoration: underline;
  outline: none;
}

.timeline-page .md-timeline-card__branch-chevron {
  font-size: 0.5625rem;
  opacity: 0.8;
}

.timeline-page .md-timeline-card--grouped {
  /* Marker for Same-post multi-branch cards; no extra chrome. */
}

/* Same-post school list sheet (universal admin) */
.md-timeline-group-sheet {
  display: none !important;
}

#timelineGroupSchoolsSheet.md-timeline-group-sheet.is-open,
#timelineGroupSchoolsSheet.md-timeline-group-sheet.is-open[hidden] {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: min(70vh, 520px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 20px 20px 0 0 !important;
  background: #fff !important;
  box-shadow:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden !important;
  z-index: 1400 !important;
  animation: md-timeline-read-sheet-rise 0.28s cubic-bezier(0.2, 0, 0, 1) both;
  font-family: "Jost", sans-serif;
}

#timelineGroupSchoolsSheet .md-timeline-group-sheet__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: inherit;
}

#timelineGroupSchoolsSheet .md-timeline-group-sheet__handle {
  flex-shrink: 0;
  width: 36px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: #dadce0;
}

#timelineGroupSchoolsSheet .md-timeline-group-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 10px 8px 10px 16px;
}

#timelineGroupSchoolsSheet .md-timeline-group-sheet__heading {
  min-width: 0;
  flex: 1;
  padding-top: 4px;
}

#timelineGroupSchoolsSheet .md-timeline-group-sheet__overline {
  margin: 0 0 2px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5f6368;
}

#timelineGroupSchoolsSheet .md-timeline-group-sheet__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  color: #1a1c1e;
}

#timelineGroupSchoolsSheet .md-timeline-group-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #5f6368;
  cursor: pointer;
  flex-shrink: 0;
}

#timelineGroupSchoolsSheet .md-timeline-group-sheet__close:hover,
#timelineGroupSchoolsSheet .md-timeline-group-sheet__close:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  outline: none;
}

#timelineGroupSchoolsSheet .md-timeline-group-sheet__body {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px calc(12px + var(--md-sheet-footer-safe, 0px));
}

#timelineGroupSchoolsSheet .md-timeline-group-sheet__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  overflow: hidden;
  background: #f8f9fa;
}

#timelineGroupSchoolsSheet .md-timeline-group-sheet__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: #1a1c1e;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  background: #fff;
}

#timelineGroupSchoolsSheet .md-timeline-group-sheet__item + .md-timeline-group-sheet__item {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

#timelineGroupSchoolsSheet .md-timeline-group-sheet__item--empty {
  color: #5f6368;
  font-weight: 400;
}

#timelineGroupSchoolsSheet .md-timeline-group-sheet__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--md-primary-container, #e8f0fe);
  color: var(--md-primary, #1a73e8);
  font-size: 0.6875rem;
  font-weight: 700;
  flex-shrink: 0;
}

#timelineGroupSchoolsSheet .md-timeline-group-sheet__name {
  min-width: 0;
  flex: 1;
}

html.is-webview #timelineGroupSchoolsSheet .md-timeline-group-sheet__body,
body.is-webview #timelineGroupSchoolsSheet .md-timeline-group-sheet__body {
  padding-bottom: 12px !important;
}

.timeline-page .md-timeline-status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.timeline-page .md-timeline-status--pending,
.timeline-page .mui-chip--pending {
  background: #fce8e6;
  color: #d93025;
}

.timeline-page .md-timeline-status--published,
.timeline-page .mui-chip--published {
  background: #e6f4ea;
  color: #188038;
}

.timeline-page .md-timeline-status--saved,
.timeline-page .mui-chip--saved {
  background: #fef7e0;
  color: #ea8600;
}

.timeline-page .md-timeline-card__menu {
  flex-shrink: 0;
  margin-left: 0;
}

.timeline-page .md-timeline-card__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #5f6368;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.timeline-page .md-timeline-card__menu-btn:hover,
.timeline-page .md-timeline-card__menu-btn:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  color: #202124;
  outline: none;
}

.timeline-page .md-timeline-menu {
  min-width: 200px;
  padding: 8px 0;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  background: #fff;
}

.timeline-page .md-timeline-menu a,
.timeline-page .md-timeline-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: #202124;
  font-size: 0.875rem;
  text-decoration: none;
}

.timeline-page .md-timeline-menu a:hover {
  background: #f1f3f4;
}

.timeline-page .md-timeline-menu a i {
  width: 20px;
  color: #5f6368;
}

.timeline-page .md-timeline-menu .delete_post {
  color: #d93025;
}

.timeline-page .md-timeline-menu .delete_post i {
  color: #d93025;
}

.timeline-page .md-timeline-card--media .md-timeline-card__content {
  padding-bottom: 8px;
}

.timeline-page .md-timeline-card__content {
  padding: 12px 14px 8px;
}

.timeline-page .md-timeline-card__title {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-transform: none;
  color: #202124;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.timeline-page .md-timeline-card__title:last-child {
  margin-bottom: 0;
}

.timeline-page .md-timeline-card__body,
.timeline-page .md-timeline-card__body.post-message {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.72);
}

/*
 * FOUC guard: full HTML paints before preview is built.
 * Clamp until initTimelineExpander sets data-expander-ready.
 */
.timeline-page .md-timeline-card__body.post-message:not([data-expander-ready]) {
  max-height: calc(1.45em * 3);
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.timeline-page .md-timeline-card__teaser,
.timeline-page .md-timeline-card__body .summary.md-timeline-card__teaser {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  word-break: break-word;
}

.timeline-page .md-timeline-card--media .md-timeline-card__teaser,
.timeline-page .md-timeline-card--media .md-timeline-card__body .summary.md-timeline-card__teaser {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.timeline-page .md-timeline-card__body p,
.timeline-page .md-timeline-card__body.post-message p,
.timeline-page .md-timeline-card__body .summary,
.timeline-page .md-timeline-card__body .summary p {
  margin: 0 0 0.5em;
  line-height: inherit;
}

.timeline-page .md-timeline-card__body p:last-child,
.timeline-page .md-timeline-card__body.post-message p:last-child {
  margin-bottom: 0;
}

.timeline-page .md-timeline-card__more,
.timeline-page .md-timeline-card__body .more-link,
.timeline-page .post-message .more-link {
  display: inline-flex;
  align-items: center;
  margin: 6px 0 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--tl-google-blue, #1a73e8);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
}

.timeline-page .md-timeline-card__more:hover,
.timeline-page .md-timeline-card__body .more-link:hover,
.timeline-page .post-message .more-link:hover,
.timeline-page .md-timeline-card__more:focus-visible {
  text-decoration: underline;
  outline: none;
}

.timeline-page .md-timeline-card__more[hidden] {
  display: none !important;
}

/* Media carousel */
.timeline-page .md-timeline-media,
.timeline-page .md-ig-carousel {
  margin: 8px 0 0;
  border-radius: 0;
  overflow: hidden;
  background: #1a2332;
}

.timeline-page .md-ig-stage {
  position: relative;
  background: #1a2332;
}

.timeline-page .md-ig-track {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}

.timeline-page .md-ig-track::-webkit-scrollbar {
  display: none;
}

.timeline-page .md-ig-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #1a2332;
  overflow: hidden;
}

.timeline-page .md-ig-slide--image {
  isolation: isolate;
  aspect-ratio: 4 / 5;
  max-height: min(80vh, 720px);
  min-height: 0;
}

.timeline-page .md-ig-slide__glow {
  position: absolute;
  inset: -16%;
  z-index: 0;
  width: 132%;
  height: 132%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  filter: blur(32px) saturate(1.4) brightness(0.7);
  transform: scale(1.1);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.timeline-page .md-ig-slide--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.32) 100%);
  pointer-events: none;
}

.timeline-page .md-ig-slide__photo,
.timeline-page .md-ig-slide--image img.md-ig-slide__photo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  object-position: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  transform: scale(1.02);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.timeline-page .md-ig-slide--image.is-poster-ready .md-ig-slide__photo {
  opacity: 1;
  transform: scale(1);
}

.timeline-page .md-ig-slide--image.is-poster-ready .md-ig-slide__glow {
  opacity: 1;
}

.timeline-page .md-ig-slide--image.is-poster-instant .md-ig-slide__photo,
.timeline-page .md-ig-slide--image.is-poster-instant .md-ig-slide__glow {
  transition: none;
}

.timeline-page .md-ig-slide--video {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  aspect-ratio: auto;
  max-height: none;
  overflow: hidden;
  background: #0b1220;
}

.timeline-page .md-ig-video-frame {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  aspect-ratio: 4 / 5;
  max-height: min(72vh, 640px);
  background: #0b1220;
  overflow: hidden;
}

/* Tap play/pause feedback (Instagram-style) */
.timeline-page .md-ig-tap-flash {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.72);
  border: 2px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.55);
  will-change: opacity, transform;
}

.timeline-page .md-ig-tap-flash--play i {
  margin-left: 3px;
}

.timeline-page .md-ig-tap-flash.is-active {
  animation: md-ig-tap-flash 640ms cubic-bezier(0.22, 0.82, 0.2, 1) forwards;
}

@keyframes md-ig-tap-flash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
  42% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.28);
  }
}

.timeline-page .md-ig-play {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.timeline-page .md-ig-play[hidden] {
  display: none !important;
}

.timeline-page .md-ig-poster,
.timeline-page .md-ig-slide--video .md-ig-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #0b1220;
  opacity: 0;
  transform: scale(1.03);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.timeline-page .md-ig-video-frame.is-poster-ready .md-ig-poster {
  opacity: 1;
  transform: scale(1);
}

.timeline-page .md-ig-video-frame.is-poster-instant .md-ig-poster {
  transition: none;
}

.timeline-page .md-ig-poster-shimmer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  background:
    radial-gradient(ellipse 80% 55% at 20% 15%, rgba(26, 115, 232, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 80%, rgba(13, 148, 136, 0.16) 0%, transparent 50%),
    linear-gradient(160deg, #152238 0%, #0b1220 48%, #101826 100%);
}

.timeline-page .md-ig-poster-shimmer__glow {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.07) 0%, transparent 42%),
    radial-gradient(circle at 70% 65%, rgba(66, 165, 245, 0.12) 0%, transparent 45%);
  animation: md-ig-poster-breathe 3.2s ease-in-out infinite;
}

.timeline-page .md-ig-poster-shimmer__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 32%,
    rgba(255, 255, 255, 0.04) 42%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.04) 58%,
    transparent 68%
  );
  background-size: 220% 100%;
  animation: md-ig-poster-sheen 2.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.timeline-page .md-ig-poster-shimmer__orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  margin: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(15, 23, 42, 0.45);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 0 0 10px rgba(255, 255, 255, 0.04),
    0 12px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: md-ig-poster-orb 1.8s ease-in-out infinite;
}

.timeline-page .md-ig-poster-shimmer__orb::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.92);
  transform: translate(-50%, -50%);
  opacity: 0.85;
}

.timeline-page .md-ig-slide--image .md-ig-poster-shimmer__orb::before {
  display: none;
}

.timeline-page .md-ig-slide--image .md-ig-poster-shimmer__orb::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.timeline-page .md-ig-poster-shimmer {
  display: none;
}

.timeline-page .md-ig-video-frame.is-poster-pending .md-ig-poster-shimmer,
.timeline-page .md-ig-slide--image.is-poster-pending .md-ig-poster-shimmer,
.timeline-page .md-ig-video-frame.is-poster-loading .md-ig-poster-shimmer,
.timeline-page .md-ig-slide--image.is-poster-loading .md-ig-poster-shimmer {
  display: block;
  z-index: 3;
  pointer-events: none;
  opacity: 1;
}

.timeline-page .md-ig-slide--image.is-poster-pending .md-ig-poster-shimmer {
  background:
    radial-gradient(ellipse 85% 60% at 18% 12%, rgba(26, 115, 232, 0.18) 0%, transparent 58%),
    radial-gradient(ellipse 70% 55% at 88% 82%, rgba(13, 148, 136, 0.14) 0%, transparent 52%),
    linear-gradient(165deg, #121a2a 0%, #0b1220 52%, #0e1624 100%);
}

.timeline-page .md-ig-slide--image.is-poster-pending .md-ig-poster-shimmer__orb {
  display: none;
}

.timeline-page .md-ig-video-frame.is-poster-ready .md-ig-poster-shimmer,
.timeline-page .md-ig-slide--image.is-poster-ready .md-ig-poster-shimmer {
  opacity: 0;
  pointer-events: none;
}

.timeline-page .md-ig-video-frame.is-poster-pending .md-ig-play::after,
.timeline-page .md-ig-video-frame.is-poster-pending .md-ig-play::before,
.timeline-page .md-ig-video-frame.is-poster-loading .md-ig-play::after,
.timeline-page .md-ig-video-frame.is-poster-loading .md-ig-play::before {
  opacity: 0;
}

.timeline-page .md-ig-video-frame.is-poster-ready .md-ig-play::after,
.timeline-page .md-ig-video-frame.is-poster-ready .md-ig-play::before {
  opacity: 1;
  transition: opacity 0.35s ease 0.15s;
}

.timeline-page .md-ig-poster-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 50% 35%, rgba(26, 115, 232, 0.2) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 80% 85%, rgba(13, 148, 136, 0.16) 0%, transparent 50%),
    linear-gradient(165deg, #152238 0%, #0b1220 55%, #0e1624 100%);
  color: #fff;
  animation: md-ig-poster-fallback-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.timeline-page .md-ig-poster-fallback__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 220px;
  padding: 22px 24px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: center;
}

.timeline-page .md-ig-poster-fallback__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  color: #fff;
  font-size: 1.125rem;
}

.timeline-page .md-ig-poster-fallback__icon .fa-play {
  margin-left: 3px;
}

.timeline-page .md-ig-poster-fallback__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timeline-page .md-ig-poster-fallback__title {
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.25;
}

.timeline-page .md-ig-poster-fallback__label {
  font-family: "Jost", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.35;
}

.timeline-page .md-ig-video-frame.is-poster-failed .md-ig-poster-fallback,
.timeline-page .md-ig-slide--image.is-poster-failed .md-ig-poster-fallback {
  display: flex;
  pointer-events: auto;
  cursor: pointer;
  border: 0;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
}

.timeline-page .md-ig-video-frame.is-poster-failed .md-ig-poster,
.timeline-page .md-ig-video-frame.is-poster-failed .md-ig-poster-shimmer,
.timeline-page .md-ig-slide--image.is-poster-failed .md-ig-slide__photo,
.timeline-page .md-ig-slide--image.is-poster-failed .md-ig-slide__glow,
.timeline-page .md-ig-slide--image.is-poster-failed .md-ig-poster-shimmer {
  display: none;
}

.timeline-page .md-ig-slide--image.is-poster-ready .md-ig-poster-shimmer,
.timeline-page .md-ig-video-frame.is-poster-ready .md-ig-poster-shimmer {
  display: block;
}

.timeline-page .md-ig-video-frame.is-poster-failed .md-ig-play::after,
.timeline-page .md-ig-video-frame.is-poster-failed .md-ig-play::before {
  opacity: 0;
}

@keyframes md-ig-poster-sheen {
  0% { background-position: 140% 0; }
  100% { background-position: -60% 0; }
}

@keyframes md-ig-poster-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes md-ig-poster-orb {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow:
      0 0 0 10px rgba(255, 255, 255, 0.04),
      0 12px 32px rgba(0, 0, 0, 0.35);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow:
      0 0 0 14px rgba(255, 255, 255, 0.06),
      0 14px 36px rgba(0, 0, 0, 0.4);
  }
}

@keyframes md-ig-poster-fallback-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-page .md-ig-poster-shimmer__glow,
  .timeline-page .md-ig-poster-shimmer__sheen,
  .timeline-page .md-ig-poster-shimmer__orb,
  .timeline-page .md-ig-poster-fallback {
    animation: none;
  }

  .timeline-page .md-ig-slide__photo,
  .timeline-page .md-ig-slide__glow,
  .timeline-page .md-ig-poster,
  .timeline-page .md-ig-poster-shimmer {
    transition: none;
  }

  .timeline-page .md-ig-slide--image.is-poster-pending .md-ig-slide__photo,
  .timeline-page .md-ig-video-frame.is-poster-pending .md-ig-poster {
    opacity: 1;
    transform: none;
  }
}

.timeline-page .md-ig-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(15, 23, 42, 0.08) 0%, rgba(15, 23, 42, 0.45) 72%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.55) 100%);
  pointer-events: none;
}

.timeline-page .md-ig-play::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(15, 23, 42, 0.72);
  border: 2px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 3;
}

.timeline-page .md-ig-play::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
}

.timeline-page .md-ig-play.is-loading::after {
  border-color: rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  animation: md-ig-spin 700ms linear infinite;
  background: rgba(15, 23, 42, 0.55);
}

.timeline-page .md-ig-play.is-loading::before {
  opacity: 0;
}

.timeline-page .md-ig-buffer {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  background: radial-gradient(circle at center, rgba(11, 18, 32, 0.18) 0%, rgba(11, 18, 32, 0.42) 100%);
}

.timeline-page .md-ig-video-frame.is-buffering .md-ig-buffer,
.timeline-page .md-ig-slide--video.is-buffering .md-ig-buffer {
  opacity: 1;
  visibility: visible;
}

.timeline-page .md-ig-buffer__spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  animation: md-ig-buffer-spin 0.7s linear infinite;
}

@keyframes md-ig-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes md-ig-buffer-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-page .md-ig-play.is-loading::after,
  .timeline-page .md-ig-buffer__spinner {
    animation: none;
  }

  .timeline-page .md-ig-video-frame.is-buffering .md-ig-buffer__spinner {
    border-color: rgba(255, 255, 255, 0.55);
    border-top-color: #fff;
  }
}

.timeline-page .md-ig-slide--video img.md-ig-native,
.timeline-page .md-ig-slide iframe,
.timeline-page .md-ig-slide video,
.timeline-page .md-ig-player,
.timeline-page .md-ig-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  background: #0b1220;
}

.timeline-page .md-ig-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.92);
  color: #202124;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.timeline-page .md-ig-nav:hover,
.timeline-page .md-ig-nav:focus-visible {
  background: #fff;
  outline: none;
}

.timeline-page .md-ig-nav:disabled {
  opacity: 0.28;
  cursor: default;
}

.timeline-page .md-ig-nav--prev { left: 8px; }
.timeline-page .md-ig-nav--next { right: 8px; }

.timeline-page .md-ig-chrome {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 32px;
  padding: 8px 16px 0;
  background: #fff;
}

.timeline-page .md-ig-counter {
  flex-shrink: 0;
  color: #5f6368;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
}

.timeline-page .md-ig-dots {
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

.timeline-page .md-ig-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

.timeline-page .md-ig-dot.is-active {
  background: var(--tl-google-blue, #1a73e8);
}

.timeline-page .md-ig-video-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  flex: 0 0 auto;
  align-self: stretch;
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 10px 10px;
  background: #0f172a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.timeline-page .md-ig-video-bar__row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.timeline-page .md-ig-video-toggle,
.timeline-page .md-ig-mute,
.timeline-page .md-ig-fs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.timeline-page .md-ig-video-toggle:hover,
.timeline-page .md-ig-mute:hover,
.timeline-page .md-ig-fs:hover,
.timeline-page .md-ig-video-toggle:focus-visible,
.timeline-page .md-ig-mute:focus-visible,
.timeline-page .md-ig-fs:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  outline: none;
}

.timeline-page .md-ig-video-toggle:disabled,
.timeline-page .md-ig-mute:disabled,
.timeline-page .md-ig-fs:disabled,
.timeline-page .md-ig-seek:disabled {
  opacity: 0.42;
  cursor: default;
}

.timeline-page .md-ig-fs {
  margin-left: auto;
}

.timeline-page .md-ig-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.timeline-page .md-ig-time {
  flex: 0 0 auto;
  min-width: 2.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1;
  color: rgba(248, 250, 252, 0.78);
  font-variant-numeric: tabular-nums;
}

.timeline-page .md-ig-time--dur {
  text-align: right;
}

.timeline-page .md-ig-seek {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 18px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  --md-ig-seek-pct: 0%;
}

.timeline-page .md-ig-seek:focus-visible {
  outline: 2px solid rgba(66, 133, 244, 0.7);
  outline-offset: 2px;
  border-radius: 999px;
}

.timeline-page .md-ig-seek::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #4285f4 0%,
    #4285f4 var(--md-ig-seek-pct),
    rgba(255, 255, 255, 0.22) var(--md-ig-seek-pct),
    rgba(255, 255, 255, 0.22) 100%
  );
}

.timeline-page .md-ig-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.timeline-page .md-ig-seek::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.timeline-page .md-ig-seek::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: #4285f4;
}

.timeline-page .md-ig-seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.timeline-page .md-ig-video-frame:fullscreen,
.timeline-page .md-ig-video-frame:-webkit-full-screen,
.timeline-page .md-ig-native:fullscreen,
.timeline-page .md-ig-native:-webkit-full-screen {
  width: 100%;
  height: 100%;
  background: #000;
  object-fit: contain;
}

.timeline-page .md-ig-embed {
  position: relative;
  margin: 12px -14px 0;
  background: #000;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.timeline-page .md-ig-embed iframe,
.timeline-page .md-ig-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.timeline-page .md-timeline-card__body iframe,
.timeline-page .md-timeline-card__body video,
.timeline-page .md-timeline-card__body .note-video-clip {
  aspect-ratio: 16 / 9;
  height: auto;
  max-width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .timeline-page .md-ig-nav { opacity: 0; }
  .timeline-page .md-ig-stage:hover .md-ig-nav,
  .timeline-page .md-ig-stage:focus-within .md-ig-nav { opacity: 1; }
}

@media (pointer: coarse) {
  .timeline-page .md-ig-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-page .md-ig-track { scroll-behavior: auto; }
  .timeline-page .md-ig-play.is-loading::after { animation: none; }
  .timeline-page .md-ig-tap-flash,
  .timeline-page .md-ig-tap-flash.is-active {
    animation: none !important;
    opacity: 0 !important;
  }
}

.timeline-page .md-timeline-attachments-panel {
  margin: 8px 12px 0;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: #f8f9fa;
  overflow: hidden;
}

.timeline-page .md-timeline-attach,
.timeline-page .mui-list-item-link.md-timeline-attach {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: #202124;
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.timeline-page .md-timeline-attach:last-child {
  border-bottom: none;
}

.timeline-page .md-timeline-attach__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #e8f0fe;
  color: #1a73e8;
}

.timeline-page .md-timeline-attach__name {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-page .md-timeline-attach__arrow {
  color: #9aa0a6;
  font-size: 0.75rem;
}

.timeline-page .md-timeline-card__foot {
  padding: 0;
  border-top: none;
  background: transparent;
}

.timeline-page .md-timeline-card__metrics {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin: 8px 0 0;
  padding: 10px 12px 8px;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-top: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12));
}

.timeline-page .md-timeline-card__metrics--3,
.timeline-page .md-timeline-card__metrics--4 {
  grid-template-columns: unset;
}

.timeline-page .md-timeline-card__metric.md-chip,
.timeline-page .md-timeline-card__metric {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 28px;
  height: auto;
  padding: 4px 10px;
  border: none;
  border-radius: 999px;
  background: #f1f3f4;
  color: #3c4043;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  box-shadow: none;
  text-align: left;
  box-sizing: border-box;
}

.timeline-page .md-timeline-card__metric i {
  font-size: 0.75rem;
  line-height: 1;
  color: #5f6368;
}

.timeline-page .md-timeline-card__metric--likes i {
  color: var(--tl-google-blue, #1a73e8);
}

.timeline-page .md-timeline-card__metric--comments i {
  color: #188038;
}

.timeline-page .md-timeline-card__metric--files i {
  color: #e37400;
}

.timeline-page .md-timeline-card__metric-badge,
.timeline-page .md-timeline-card__metric .count_like,
.timeline-page .md-timeline-card__metric .count_comment {
  display: inline;
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: inherit;
  letter-spacing: 0;
}

.timeline-page .md-timeline-card__metric-label {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  letter-spacing: 0;
  text-transform: none;
  color: #5f6368;
  white-space: nowrap;
}

.timeline-page .md-timeline-card__metric--time,
.timeline-page .md-timeline-card__date {
  margin-left: auto;
  background: transparent;
  color: #80868b;
  font-weight: 500;
  padding: 4px 2px;
  flex: 0 0 auto;
  flex-shrink: 0;
  max-width: 100%;
  white-space: nowrap;
  box-sizing: border-box;
}

.timeline-page .md-timeline-card__metric--time i,
.timeline-page .md-timeline-card__date i {
  color: #9aa0a6;
}

.timeline-page .md-timeline-card__metric-icon,
.timeline-page .md-timeline-card__metric-value,
.timeline-page .md-timeline-card__metric-sep {
  display: none;
}

@media (max-width: 480px) {
  .timeline-page .md-timeline-card__metrics {
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    overflow: hidden;
  }

  .timeline-page .md-timeline-card__metric.md-chip,
  .timeline-page .md-timeline-card__metric {
    flex: 0 0 auto;
    min-height: 22px;
    padding: 2px 7px;
    gap: 4px;
    font-size: 0.6875rem;
  }

  .timeline-page .md-timeline-card__metric i {
    font-size: 0.6875rem;
  }

  .timeline-page .md-timeline-card__metric-label {
    display: none;
  }

  .timeline-page .md-timeline-card__metric--time,
  .timeline-page .md-timeline-card__date {
    margin-left: auto;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 46%;
    padding: 2px 0;
    font-size: 0.6875rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .timeline-page .md-timeline-card__metric--time i,
  .timeline-page .md-timeline-card__date i {
    display: none;
  }
}

.timeline-page .md-timeline-card__action-bar {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 0;
  margin-top: 0;
  padding: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

.timeline-page .md-timeline-card__action-bar .mui-btn-text,
.timeline-page .md-timeline-card__action-bar .md-timeline-action-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #5f6368;
  font-family: var(--mui-font, "Jost", sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-page .md-timeline-card__action-bar .mui-btn-text i,
.timeline-page .md-timeline-card__action-bar .md-timeline-action-btn i {
  font-size: 1.125rem;
  line-height: 1;
  color: inherit;
}

.timeline-page .md-timeline-card__action-bar .mui-btn-text:hover,
.timeline-page .md-timeline-card__action-bar .md-timeline-action-btn:hover {
  background: #f6f9fe;
  color: #5f6368;
}

.timeline-page .md-timeline-card__action-bar .md-timeline-action-btn + .md-timeline-action-btn,
.timeline-page .md-timeline-card__action-bar .mui-btn-text + .mui-btn-text {
  border-left: 1px solid #e8eaed;
}

.timeline-page .md-timeline-card__action-bar .mui-btn-text.mui-btn--active,
.timeline-page .md-timeline-card__action-bar .md-timeline-action-btn--active,
.timeline-page .md-timeline-card__action-bar .dislike_news_post {
  background: #e8f0fe;
  color: var(--tl-google-blue, #1a73e8) !important;
}

.timeline-page .md-timeline-card__action-bar .mui-btn-text.mui-btn--active:hover,
.timeline-page .md-timeline-card__action-bar .md-timeline-action-btn--active:hover,
.timeline-page .md-timeline-card__action-bar .dislike_news_post:hover {
  background: #d2e3fc;
  color: var(--tl-google-blue-dark, #1557b0) !important;
}

.timeline-page .md-timeline-card__action-bar .mui-btn-text.mui-btn--active i,
.timeline-page .md-timeline-card__action-bar .md-timeline-action-btn--active i,
.timeline-page .md-timeline-card__action-bar .dislike_news_post i {
  color: var(--tl-google-blue, #1a73e8);
}

.timeline-page .md-timeline-action-btn--disabled {
  pointer-events: none;
  visibility: hidden;
}

.timeline-page .md-timeline-card__action-bar:empty {
  display: none;
}

.md-timeline-like-burst {
  position: fixed;
  z-index: 1200;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  color: var(--tl-google-blue, #1a73e8);
  font-size: 1.75rem;
  opacity: 0;
  filter: drop-shadow(0 2px 10px rgba(26, 115, 232, 0.35));
}

.md-timeline-like-burst.is-active {
  animation: tl-like-burst 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes tl-like-burst {
  0% { opacity: 0; transform: scale(0.3) translateY(0); }
  18% { opacity: 1; transform: scale(1.2) translateY(-8px); }
  45% { opacity: 1; transform: scale(1) translateY(-22px); }
  100% { opacity: 0; transform: scale(0.9) translateY(-44px); }
}

.timeline-page .md-timeline-action-btn.is-liking {
  animation: tl-like-btn-pop 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tl-like-btn-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .md-timeline-like-burst.is-active,
  .timeline-page .md-timeline-action-btn.is-liking {
    animation: none;
  }
}

.timeline-page .md-timeline-end,
.timeline-page .timeline_reached_max_test {
  display: none;
  margin: 8px auto 16px;
  padding: 8px 12px;
  max-width: 680px;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #9aa0a6;
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.timeline-page .md-timeline-end.md-ripple,
.timeline-page .timeline_reached_max_test.md-ripple,
.timeline-page .md-timeline-end.md-ripple::after,
.timeline-page .timeline_reached_max_test.md-ripple::after {
  content: none !important;
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.timeline-page .md-timeline-empty {
  display: none;
  align-items: stretch;
  justify-content: center;
  max-width: 680px;
  width: calc(100% - 20px);
  min-height: 0;
  margin: 4px auto 24px;
  padding: 4px 0 20px;
  text-align: center;
  box-sizing: border-box;
}

.timeline-page .md-timeline-empty[hidden] {
  display: none !important;
}

.timeline-page .md-timeline-empty:not([hidden]),
.timeline-page .md-timeline-empty[style*="display: block"],
.timeline-page .md-timeline-empty[style*="display: flex"] {
  display: flex;
}

/* When empty state is visible, collapse loader / end so the panel sits under the toolbar */
.timeline-page:has(.md-timeline-empty:not([hidden])) .loader-ellips,
.timeline-page:has(.md-timeline-empty[style*="display: flex"]) .loader-ellips,
.timeline-page:has(.md-timeline-empty[style*="display: block"]) .loader-ellips {
  min-height: 0;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.timeline-page:has(.md-timeline-empty:not([hidden])) .enter-timeline,
.timeline-page:has(.md-timeline-empty[style*="display: flex"]) .enter-timeline,
.timeline-page:has(.md-timeline-empty[style*="display: block"]) .enter-timeline {
  padding: 0;
  min-height: 0;
}

.timeline-page:has(.md-timeline-empty:not([hidden])) .md-timeline-end,
.timeline-page:has(.md-timeline-empty[style*="display: flex"]) .md-timeline-end,
.timeline-page:has(.md-timeline-empty[style*="display: block"]) .md-timeline-end,
.timeline-page:has(.md-timeline-empty:not([hidden])) .timeline_reached_max_test,
.timeline-page:has(.md-timeline-empty[style*="display: flex"]) .timeline_reached_max_test,
.timeline-page:has(.md-timeline-empty[style*="display: block"]) .timeline_reached_max_test {
  display: none !important;
}

.timeline-page .md-timeline-empty__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 36px 28px 40px;
  border: 1px solid rgba(26, 115, 232, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(26, 115, 232, 0.14), transparent 58%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(52, 168, 83, 0.06), transparent 55%),
    linear-gradient(180deg, #f7fbff 0%, #ffffff 52%, #fafbfd 100%);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 32px rgba(26, 115, 232, 0.08);
  box-sizing: border-box;
  gap: 0;
  position: relative;
  overflow: hidden;
}

.timeline-page .md-timeline-empty__panel::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #1a73e8 0%, #34a853 55%, #fbbc04 100%);
  opacity: 0.85;
}

.timeline-page .md-timeline-empty__mark {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 0 20px;
  flex-shrink: 0;
}

.timeline-page .md-timeline-empty__mark-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(232, 240, 254, 0.95);
  border: 1px solid rgba(26, 115, 232, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation: md-tl-empty-pulse 3.2s ease-in-out infinite;
}

.timeline-page .md-timeline-empty__mark-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 66px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transform-origin: center center;
}

.timeline-page .md-timeline-empty__mark-card--back {
  transform: translate(-58%, -56%) rotate(-10deg);
  background: #e8f0fe;
  opacity: 0.9;
}

.timeline-page .md-timeline-empty__mark-card--front {
  transform: translate(-42%, -44%) rotate(6deg);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12px 10px 10px;
  box-sizing: border-box;
}

.timeline-page .md-timeline-empty__mark-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.timeline-page .md-timeline-empty__mark-lines span {
  display: block;
  height: 4px;
  border-radius: 99px;
  background: #d2e3fc;
}

.timeline-page .md-timeline-empty__mark-lines span:nth-child(1) {
  width: 72%;
  background: #aecbfa;
}

.timeline-page .md-timeline-empty__mark-lines span:nth-child(2) {
  width: 100%;
}

.timeline-page .md-timeline-empty__mark-lines span:nth-child(3) {
  width: 48%;
}

.timeline-page .md-timeline-empty__mark-badge {
  position: absolute;
  right: 10px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1a73e8;
  color: #fff;
  font-size: 0.9375rem;
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.35);
  z-index: 2;
}

.timeline-page .md-timeline-empty__eyebrow {
  margin: 0 0 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a73e8;
}

.timeline-page .md-timeline-empty__title {
  margin: 0 0 10px;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: #202124;
}

.timeline-page .md-timeline-empty__text {
  margin: 0;
  max-width: 20rem;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--tl-google-on-surface-variant, #5f6368);
}

.timeline-page .md-timeline-empty__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 22px;
  background: #1a73e8;
  color: #fff;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.28);
  transition: background 0.15s ease, transform 0.15s ease;
}

.timeline-page .md-timeline-empty__cta:hover {
  background: #174ea6;
  color: #fff;
}

.timeline-page .md-timeline-empty__cta:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 3px;
}

.timeline-page .md-timeline-empty[data-empty-mode="drafts"] .md-timeline-empty__mark-badge,
.timeline-page .md-timeline-empty[data-empty-mode="published"] .md-timeline-empty__mark-badge {
  background: #5f6368;
  box-shadow: 0 4px 12px rgba(32, 33, 36, 0.2);
}

.timeline-page .md-timeline-empty[data-empty-mode="drafts"] .md-timeline-empty__cta,
.timeline-page .md-timeline-empty[data-empty-mode="published"] .md-timeline-empty__cta {
  display: none;
}

@keyframes md-tl-empty-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: 0.92; }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-page .md-timeline-empty__mark-ring {
    animation: none;
  }
}

.timeline-page .md-timeline-empty__visual {
  display: none;
}

.timeline-page .md-timeline-empty__image,
.timeline-page img.md-timeline-empty__image,
.timeline-page img.timeline_empty_image {
  display: none;
}

.timeline-page .loader-ellips {
  min-height: 52px;
  padding: 16px 0 8px;
  transition: opacity 0.2s ease;
}

.timeline-page .loader-ellips.is-idle {
  opacity: 0;
  pointer-events: none;
}

.timeline-page .loader-ellips.is-idle .md-loading__spinner {
  animation-play-state: paused;
}

.timeline-page .loader-ellips.is-loading {
  opacity: 1;
}

.timeline-page .loader-ellips.is-complete {
  min-height: 0;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Filter posts sheet — scoped to #emptyAction (lives outside .md-page) */
@keyframes md-filter-sheet-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

#emptyAction.md-timeline-filter-sheet {
  display: none !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 24px 24px 0 0 !important;
  background: #fff !important;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.18) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(82vh, 640px) !important;
  overflow: hidden !important;
  z-index: 1300 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  opacity: 0;
  pointer-events: none;
}

#emptyAction.md-timeline-filter-sheet.menu-active {
  display: flex !important;
  flex-direction: column !important;
  transform: translate3d(0, 0, 0) !important;
  opacity: 1 !important;
  pointer-events: all !important;
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-sheet__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  max-height: min(82vh, 640px);
  background: #fff;
  font-family: "Jost", sans-serif;
  overflow: hidden;
  animation: md-filter-sheet-rise 0.28s cubic-bezier(0.2, 0, 0, 1) both;
}

body:has(#emptyAction.menu-active) #logger.menu-active {
  background: rgba(15, 23, 42, 0.45) !important;
  opacity: 1 !important;
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-sheet__handle {
  flex-shrink: 0;
  width: 36px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: #dadce0;
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  min-height: 52px;
  padding: 4px 8px 12px 20px;
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-sheet__title {
  margin: 0 !important;
  font-family: "Jost", sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em;
  color: #202124 !important;
  text-transform: none !important;
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-sheet__close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: #f1f3f4 !important;
  color: #5f6368 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  cursor: pointer;
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-sheet__close:hover,
#emptyAction.md-timeline-filter-sheet .md-timeline-filter-sheet__close:focus-visible {
  background: #e8eaed !important;
  color: #202124 !important;
  outline: none;
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-sheet__body.content {
  flex: 0 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: visible;
  margin: 0 !important;
  padding: 4px 20px 16px !important;
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-sheet__loading {
  display: none;
  padding: 28px 0;
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-sheet__fields {
  min-height: 56px;
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-select__label {
  display: block;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.6);
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-select {
  position: relative;
  width: 100%;
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-select__control {
  display: block !important;
  width: 100% !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 16px 40px 16px 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.23) !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: rgba(0, 0, 0, 0.87) !important;
  font-family: "Jost", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer;
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-select__control:hover {
  border-color: rgba(0, 0, 0, 0.87) !important;
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-select__control:focus {
  outline: none;
  border-color: #1a73e8 !important;
  border-width: 2px !important;
  padding: 15px 39px 15px 13px !important;
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-select__icon {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.54);
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-sheet__footer {
  flex-shrink: 0;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 8px 16px calc(16px + var(--md-sheet-footer-safe, 0px));
  background: #fff;
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-sheet__reset,
#emptyAction.md-timeline-filter-sheet .md-timeline-filter-sheet__submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.75 !important;
  letter-spacing: 0.02857em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  box-shadow: none !important;
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-sheet__reset {
  border: 1px solid rgba(26, 115, 232, 0.5) !important;
  background: transparent !important;
  color: #1a73e8 !important;
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-sheet__reset:hover,
#emptyAction.md-timeline-filter-sheet .md-timeline-filter-sheet__reset:focus-visible {
  background: rgba(26, 115, 232, 0.04) !important;
  border-color: #1a73e8 !important;
  outline: none;
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-sheet__submit {
  border: none !important;
  background: #1a73e8 !important;
  color: #fff !important;
  box-shadow:
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12) !important;
}

#emptyAction.md-timeline-filter-sheet .md-timeline-filter-sheet__submit:hover,
#emptyAction.md-timeline-filter-sheet .md-timeline-filter-sheet__submit:focus-visible {
  background: #1557b0 !important;
  outline: none;
}

@media (min-width: 600px) {
  #emptyAction.md-timeline-filter-sheet {
    left: 50% !important;
    right: auto !important;
    width: 420px !important;
    margin-left: -210px !important;
  }
}

/* View login credentials sheet */
.md-login-creds {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0 12px;
  font-family: "Jost", sans-serif;
  color: #1a1c1e;
}

.md-login-creds__hero {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 2px 2px;
}

.md-login-creds__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--md-primary-container, #e3f2fd);
  color: var(--md-primary-dark, #1565c0);
  font-size: 1.125rem;
}

.md-login-creds__hero-copy {
  min-width: 0;
  flex: 1;
}

.md-login-creds__overline {
  margin: 0 0 2px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5f6368;
}

.md-login-creds__name {
  margin: 0 0 4px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  color: #1a1c1e;
}

.md-login-creds__hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #5f6368;
}

.md-login-creds__card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.md-login-creds__card--student {
  border-top: 3px solid #2e7d32;
}

.md-login-creds__card--parent {
  border-top: 3px solid #00897b;
}

.md-login-creds__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 10px 14px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.md-login-creds__card-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1a1c1e;
}

.md-login-creds__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 0.75rem;
  background: #e8f5e9;
  color: #2e7d32;
}

.md-login-creds__card--parent .md-login-creds__card-icon {
  background: #e0f2f1;
  color: #00695c;
}

.md-login-creds__copy-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin: 0;
  padding: 7px 12px;
  border: none;
  border-radius: 999px;
  background: var(--md-primary-container, #e3f2fd);
  color: var(--md-primary-dark, #1565c0);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.md-login-creds__copy-all:hover,
.md-login-creds__copy-all:focus-visible {
  background: #bbdefb;
  outline: none;
}

.md-login-creds__copy-all.is-copied {
  background: #e8f5e9;
  color: #2e7d32;
}

.md-login-creds__rows {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.md-login-creds__rows > li + li {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.md-login-creds__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  text-decoration: none !important;
  color: inherit;
  cursor: pointer;
  transition: background 0.12s ease;
}

.md-login-creds__row:hover,
.md-login-creds__row:focus-visible {
  background: #f5f7fa;
  outline: none;
}

.md-login-creds__row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #fff;
  font-size: 0.875rem;
}

.md-login-creds__row-icon--blue {
  background: #1976d2;
}

.md-login-creds__row-icon--magenta {
  background: #c2185b;
}

.md-login-creds__row-icon--teal {
  background: #00897b;
}

.md-login-creds__row-icon--orange {
  background: #ef6c00;
}

.md-login-creds__row-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.md-login-creds__row-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #5f6368;
}

.md-login-creds__row-value {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-all;
  color: #1a1c1e;
}

.md-login-creds__row-action {
  flex-shrink: 0;
  font-size: 0.9375rem;
  color: #90a4ae;
}

.md-login-creds__row:hover .md-login-creds__row-action,
.md-login-creds__row:focus-visible .md-login-creds__row-action {
  color: var(--md-primary-dark, #1565c0);
}

/* Topic filter sheet — compressed MUI fields */
#emptyAction.md-topic-filter-sheet .md-timeline-filter-sheet__body.content {
  padding: 2px 16px 10px !important;
}

#emptyAction.md-topic-filter-sheet .md-topic-filter-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#emptyAction.md-topic-filter-sheet .md-topic-filter-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: start;
}

#emptyAction.md-topic-filter-sheet .md-topic-filter-field {
  margin: 0;
}

#emptyAction.md-topic-filter-sheet .md-topic-filter-field .mui-field__label {
  margin-bottom: 3px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.6);
}

#emptyAction.md-topic-filter-sheet .md-topic-filter-field__control {
  position: relative;
}

#emptyAction.md-topic-filter-sheet .md-topic-filter-field .bootstrap-select > .dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 36px !important;
  height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 4px 32px 4px 10px !important;
  border: 1px solid rgba(0, 0, 0, 0.23) !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: rgba(0, 0, 0, 0.87) !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#emptyAction.md-topic-filter-sheet .md-topic-filter-field .bootstrap-select .dropdown-toggle .filter-option-inner,
#emptyAction.md-topic-filter-sheet .md-topic-filter-field .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.8125rem !important;
  line-height: 1.25 !important;
}

#emptyAction.md-topic-filter-sheet .md-topic-filter-field .bootstrap-select > .dropdown-toggle:hover {
  border-color: rgba(0, 0, 0, 0.87) !important;
  background: #fff !important;
}

#emptyAction.md-topic-filter-sheet .md-topic-filter-field .bootstrap-select > .dropdown-toggle:focus,
#emptyAction.md-topic-filter-sheet .md-topic-filter-field .bootstrap-select.show > .dropdown-toggle {
  outline: none !important;
  border-color: #1a73e8 !important;
  border-width: 2px !important;
  padding: 3px 31px 3px 9px !important;
  box-shadow: none !important;
}

#emptyAction.md-topic-filter-sheet .md-topic-filter-field .bootstrap-select .dropdown-toggle .filter-option {
  display: flex !important;
  align-items: center !important;
}

#emptyAction.md-topic-filter-sheet .md-topic-filter-field .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#emptyAction.md-topic-filter-sheet .md-topic-filter-field__loading {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
}

#emptyAction.md-topic-filter-sheet .md-topic-filter-field__loading .md-loading__spinner {
  width: 16px;
  height: 16px;
}

#emptyAction.md-topic-filter-sheet .md-timeline-filter-sheet__footer {
  padding: 6px 16px calc(12px + var(--md-sheet-footer-safe, 0px));
  gap: 8px;
}

#emptyAction.md-topic-filter-sheet .md-timeline-filter-sheet__header {
  padding: 4px 16px 2px;
}

#emptyAction.md-topic-filter-sheet .md-timeline-filter-sheet__title {
  font-size: 1rem;
}

@media (max-width: 379px) {
  #emptyAction.md-topic-filter-sheet .md-topic-filter-form__row {
    grid-template-columns: 1fr;
  }
}

/* Timeline “Read more” bottom sheet */
.md-timeline-read-sheet {
  display: none !important;
}

@keyframes md-timeline-read-sheet-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

#timelineReadSheet.md-timeline-read-sheet.is-open,
#timelineReadSheet.md-timeline-read-sheet.is-open[hidden] {
  --tl-read-height: calc(var(--vh, 1vh) * 68);
  display: flex !important;
  flex-direction: column !important;
  pointer-events: auto !important;
  visibility: visible !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  height: var(--tl-read-height) !important;
  max-height: var(--tl-read-height) !important;
  transform: none !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 28px 28px 0 0 !important;
  background: #fff !important;
  box-shadow:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2),
    0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden !important;
  z-index: 1400 !important;
  animation: md-timeline-read-sheet-rise 0.28s cubic-bezier(0.2, 0, 0, 1) both;
}

#timelineReadSheet .md-timeline-read-sheet__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #fff;
  font-family: "Jost", sans-serif;
}

#timelineReadSheet .md-timeline-read-sheet__handle {
  flex-shrink: 0;
  width: 32px;
  height: 4px;
  margin: 12px auto 4px;
  border-radius: 999px;
  background: #c4c7c5;
}

#timelineReadSheet .md-timeline-read-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 4px 8px 12px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

#timelineReadSheet .md-timeline-read-sheet__heading {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}

#timelineReadSheet .md-timeline-read-sheet__overline {
  display: block;
  margin: 0 0 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a73e8;
}

#timelineReadSheet .md-timeline-read-sheet__title {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.00938em;
  color: #1c1b1f;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#timelineReadSheet .md-timeline-read-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #49454f;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#timelineReadSheet .md-timeline-read-sheet__close:hover,
#timelineReadSheet .md-timeline-read-sheet__close:focus-visible {
  background: rgba(26, 115, 232, 0.08);
  color: #1a73e8;
  outline: none;
}

#timelineReadSheet .md-timeline-read-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 8px;
  background: #f7f9fc;
}

#timelineReadSheet .md-timeline-read-sheet__paper {
  margin: 0;
  padding: 20px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#timelineReadSheet .md-timeline-read-sheet__message {
  font-family: "Jost", sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.015em;
  color: #444746;
}

#timelineReadSheet .md-timeline-read-sheet__message p {
  margin: 0 0 1em;
}

#timelineReadSheet .md-timeline-read-sheet__message p:last-child {
  margin-bottom: 0;
}

#timelineReadSheet .md-timeline-read-sheet__footer {
  flex-shrink: 0;
  display: flex;
  justify-content: stretch;
  align-items: center;
  gap: 8px;
  padding: 12px 16px calc(12px + var(--md-sheet-footer-safe, 0px));
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}

#timelineReadSheet .md-timeline-read-sheet__add-event {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  min-height: 48px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid rgba(26, 115, 232, 0.35);
  border-radius: 24px;
  background: #fff;
  color: #1a73e8;
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-sizing: border-box;
}

#timelineReadSheet .md-timeline-read-sheet__add-event:not([hidden]) {
  display: inline-flex;
}

#timelineReadSheet .md-timeline-read-sheet__footer--with-add .md-timeline-read-sheet__done {
  flex: 1;
}

#timelineReadSheet .md-timeline-read-sheet__done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 24px;
  border: none;
  border-radius: 24px;
  background: #1a73e8;
  color: #fff;
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
  box-shadow:
    0px 1px 2px rgba(0, 0, 0, 0.3),
    0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#timelineReadSheet .md-timeline-read-sheet__done:hover,
#timelineReadSheet .md-timeline-read-sheet__done:focus-visible {
  background: #1557b0;
  outline: none;
}

body:has(#timelineReadSheet.is-open) #logger.menu-active {
  background: rgba(15, 23, 42, 0.45) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 1350 !important;
}

@media (min-width: 600px) {
  #timelineReadSheet.md-timeline-read-sheet.is-open {
    left: 50% !important;
    right: auto !important;
    width: min(480px, calc(100% - 32px)) !important;
    margin-left: 0 !important;
    transform: translateX(-50%) !important;
    --tl-read-height: min(640px, calc(var(--vh, 1vh) * 72));
    border-radius: 24px 24px 0 0 !important;
  }
}

/* Timeline full-screen sheet — Add/Edit post & Comments
   Must stay display:none when inactive: custom.js sets .menu { display:block }
   and bootstrap hides via opacity/transform — transform:none would otherwise
   leave a white full-screen sheet over the feed. */
#emptyModal.md-timeline-sheet,
#comment_modal.md-timeline-sheet {
  --tl-sheet-blue: #0d47a1;
  --tl-sheet-blue-dark: #0a3a82;
  --tl-sheet-blue-soft: #e3f2fd;
  --tl-google-blue: #1565c0;
  --tl-google-blue-dark: #0d47a1;
  --tl-google-blue-hover: #e3f2fd;
  --tl-sheet-height: 100vh;
  --tl-sheet-height: 100dvh;
  display: none !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--tl-sheet-height) !important;
  min-height: var(--tl-sheet-height) !important;
  max-height: var(--tl-sheet-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 1200 !important;
  font-family: "Jost", sans-serif;
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 0;
  pointer-events: none;
}

#emptyModal.md-timeline-sheet.menu-active,
#comment_modal.md-timeline-sheet.menu-active {
  display: flex !important;
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 1 !important;
  pointer-events: all !important;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__panel,
#comment_modal.md-timeline-sheet .md-timeline-sheet__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  background: #fff;
  font-family: "Jost", sans-serif;
  overflow: hidden;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__handle,
#comment_modal.md-timeline-sheet .md-timeline-sheet__handle {
  display: none;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__header,
#comment_modal.md-timeline-sheet .md-timeline-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  min-height: 64px;
  padding: 12px 8px 12px 16px;
  border-bottom: 1px solid #e8eaed;
  background: #fff;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__heading,
#comment_modal.md-timeline-sheet .md-timeline-sheet__heading {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__overline,
#comment_modal.md-timeline-sheet .md-timeline-sheet__overline {
  display: none;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tl-sheet-blue);
  line-height: 1.2;
}

#emptyModal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__header,
#comment_modal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__header {
  min-height: 64px;
  padding: 10px 8px 10px 16px;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e8eaed;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.04);
}

#emptyModal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__overline:not(:empty),
#comment_modal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__overline:not(:empty) {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8f0fe;
  color: #1967d2;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

#emptyModal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__title,
#comment_modal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__title {
  font-size: 1rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__title,
#comment_modal.md-timeline-sheet .md-timeline-sheet__title {
  margin: 0 !important;
  flex: none;
  min-width: 0;
  font-family: "Jost", sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em;
  color: #202124 !important;
  text-transform: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__lead,
#comment_modal.md-timeline-sheet .md-timeline-sheet__lead {
  display: none;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  color: #5f6368;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#emptyModal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__lead:not(:empty),
#comment_modal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__lead:not(:empty),
#emptyModal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__lead:not(:empty),
#comment_modal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__lead:not(:empty) {
  display: block;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__close,
#comment_modal.md-timeline-sheet .md-timeline-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #5f6368;
  font-size: 1.0625rem;
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__close:hover,
#comment_modal.md-timeline-sheet .md-timeline-sheet__close:hover,
#emptyModal.md-timeline-sheet .md-timeline-sheet__close:focus-visible,
#comment_modal.md-timeline-sheet .md-timeline-sheet__close:focus-visible {
  background: #e8eaed;
  color: #202124;
  outline: none;
}

/* ── In-sheet publish progress (timeline compose) ── */
#emptyModal.md-timeline-sheet .md-timeline-sheet__header {
  flex-wrap: wrap;
}

#emptyModal.md-timeline-sheet .md-timeline-publish {
  flex: 1 1 100%;
  width: 100%;
  margin: 4px 8px 8px 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #e8f0fe 0%, #f8fafc 100%);
  border: 1px solid #d2e3fc;
  box-sizing: border-box;
}

#emptyModal.md-timeline-sheet .md-timeline-publish[hidden] {
  display: none !important;
}

#emptyModal.md-timeline-sheet.md-timeline-sheet--publishing .md-timeline-sheet__body,
#emptyModal.md-timeline-sheet.md-timeline-sheet--publishing .md-timeline-sheet__footer {
  pointer-events: none;
  opacity: 0.55;
}

#emptyModal.md-timeline-sheet .md-timeline-publish__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

#emptyModal.md-timeline-sheet .md-timeline-publish__phase {
  font-size: 0.875rem;
  font-weight: 600;
  color: #174ea6;
  line-height: 1.3;
}

#emptyModal.md-timeline-sheet .md-timeline-publish__pct {
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #1967d2;
}

#emptyModal.md-timeline-sheet .md-timeline-publish__bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(26, 115, 232, 0.14);
  overflow: hidden;
}

#emptyModal.md-timeline-sheet .md-timeline-publish__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #1a73e8, #8ab4f8);
  transition: width 0.25s ease;
}

#emptyModal.md-timeline-sheet .md-timeline-publish__bar.is-indeterminate .md-timeline-publish__fill {
  width: 40% !important;
  animation: md-timeline-publish-indeterminate 1.2s ease-in-out infinite;
}

@keyframes md-timeline-publish-indeterminate {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}

#emptyModal.md-timeline-sheet .md-timeline-publish__hint,
#emptyModal.md-timeline-sheet .md-timeline-publish__meta {
  margin: 8px 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #5f6368;
}

#emptyModal.md-timeline-sheet .md-timeline-publish__meta:empty {
  display: none;
}

.md-timeline-card.md-timeline-card--media-pending {
  position: relative;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 4px 12px 14px;
  padding: 14px 14px 12px;
  border-radius: 12px;
  background: #e8f0fe;
  border: 1px solid #d2e3fc;
  box-shadow: 0 1px 2px rgba(26, 115, 232, 0.06);
  color: #174ea6;
  box-sizing: border-box;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  min-width: 0;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending__phase {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 650;
  color: #174ea6;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending__pct {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #c5d7f7;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #1967d2;
  line-height: 1.2;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending__bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(26, 115, 232, 0.16);
  overflow: hidden;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #1a73e8 0%, #4285f4 55%, #8ab4f8 100%);
  transition: width 0.2s ease-out;
  will-change: width, transform;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending__bar.is-indeterminate .md-timeline-media-pending__fill {
  width: 40% !important;
  animation: md-timeline-media-pending-bar 1.2s ease-in-out infinite;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending__bar:not(.is-indeterminate) .md-timeline-media-pending__fill {
  animation: none;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending__meta {
  margin: 10px 0 0;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: #202124;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending__meta:empty {
  display: none;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending__hint {
  margin: 6px 0 0;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: #5f6368;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending__resume {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 28px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(26, 115, 232, 0.35);
  border-radius: 999px;
  background: #fff;
  color: #1967d2;
  font-family: "Jost", sans-serif;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending__resume > i {
  font-size: 0.625rem;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending__resume:hover,
.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending__resume:focus-visible {
  background: #e8f0fe;
  border-color: rgba(26, 115, 232, 0.55);
  color: #174ea6;
  outline: none;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending__resume:disabled,
.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending__resume.is-busy {
  opacity: 0.65;
  cursor: default;
  box-shadow: none;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending.is-stalled {
  background: #fef7e0;
  border-color: #f9e3a5;
  color: #7a5c00;
  box-shadow: 0 1px 2px rgba(122, 92, 0, 0.08);
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending.is-stalled .md-timeline-media-pending__phase {
  color: #7a5c00;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending.is-stalled .md-timeline-media-pending__pct {
  border-color: #f0d78c;
  color: #b06000;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending.is-stalled .md-timeline-media-pending__bar {
  background: rgba(176, 96, 0, 0.16);
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending.is-stalled .md-timeline-media-pending__fill {
  background: linear-gradient(90deg, #f9ab00 0%, #fbbc04 55%, #fdd663 100%);
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending.is-stalled .md-timeline-media-pending__resume {
  background: #fff;
  border-color: rgba(227, 116, 0, 0.4);
  color: #e37400;
  box-shadow: none;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending.is-stalled .md-timeline-media-pending__resume:hover,
.md-timeline-card.md-timeline-card--media-pending .md-timeline-media-pending.is-stalled .md-timeline-media-pending__resume:focus-visible {
  background: #fff8e1;
  border-color: rgba(227, 116, 0, 0.6);
  color: #c26400;
}

.md-timeline-card.md-timeline-card--media-pending .md-timeline-card__content,
.md-timeline-card.md-timeline-card--media-pending .md-timeline-card__media,
.md-timeline-card.md-timeline-card--media-pending .md-ig,
.md-timeline-card.md-timeline-card--media-pending .md-timeline-attachments-panel {
  opacity: 0.7;
}

@keyframes md-timeline-media-pending-bar {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}

/* Global upload chrome — full-bleed top status band (above page header) */
.zap-upload-chrome {
  --zuc-accent: var(--md-primary, #1976d2);
  --zuc-accent-soft: var(--md-primary-container, #e3f2fd);
  --zuc-ink: #1f1f1f;
  --zuc-muted: #5f6368;
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 10050;
  width: min(360px, calc(100vw - 24px));
  transform: translateX(-50%);
  pointer-events: none;
  font-family: "Jost", sans-serif;
}

.zap-upload-chrome[hidden] {
  display: none !important;
}

.zap-upload-chrome__shell {
  pointer-events: auto;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  color: var(--zuc-ink);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 8px 24px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.zap-upload-chrome__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 8px;
  box-sizing: border-box;
}

.zap-upload-chrome__spinner {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--zuc-accent-soft);
  border-top-color: var(--zuc-accent);
  box-sizing: border-box;
  animation: zap-upload-chrome-spin 0.75s linear infinite;
}

.zap-upload-chrome__copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.zap-upload-chrome__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zap-upload-chrome__meta {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--zuc-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zap-upload-chrome__meta:empty {
  display: none;
}

.zap-upload-chrome__pct {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--zuc-accent);
  min-width: 2.5rem;
  text-align: right;
}

.zap-upload-chrome__resume {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: var(--zuc-accent);
  color: #fff;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(25, 118, 210, 0.28);
}

.zap-upload-chrome__resume:hover,
.zap-upload-chrome__resume:focus-visible {
  filter: brightness(1.06);
  outline: none;
}

.zap-upload-chrome__resume:disabled {
  opacity: 0.72;
  cursor: default;
  filter: none;
}

.zap-upload-chrome__bar {
  height: 3px;
  background: rgba(25, 118, 210, 0.12);
  overflow: hidden;
}

.zap-upload-chrome__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--zuc-accent);
  transition: width 0.22s ease-out;
}

.zap-upload-chrome__bar.is-indeterminate .zap-upload-chrome__fill {
  width: 40% !important;
  animation: zap-upload-chrome-indeterminate 1.05s ease-in-out infinite;
}

.zap-upload-chrome.is-stalled {
  --zuc-accent: #e37400;
  --zuc-accent-soft: #fff3e0;
}

.zap-upload-chrome.is-stalled .zap-upload-chrome__spinner {
  animation: none;
  border-color: #ffe0b2;
  border-top-color: #e37400;
  background: radial-gradient(circle at center, #e37400 0 2px, transparent 2.5px);
}

.zap-upload-chrome.is-stalled .zap-upload-chrome__bar {
  background: rgba(227, 116, 0, 0.14);
}

.zap-upload-chrome.is-stalled .zap-upload-chrome__resume {
  background: #e37400;
  box-shadow: 0 1px 2px rgba(227, 116, 0, 0.28);
}

@keyframes zap-upload-chrome-spin {
  to { transform: rotate(360deg); }
}

@keyframes zap-upload-chrome-indeterminate {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}

@media (prefers-reduced-motion: reduce) {
  .zap-upload-chrome__spinner {
    animation: none;
  }
  .zap-upload-chrome__bar.is-indeterminate .zap-upload-chrome__fill {
    animation: none;
  }
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__loader,
#comment_modal.md-timeline-sheet .md-timeline-sheet__loader,
#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 14, 18, 0.42);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__loader.d-none,
#comment_modal.md-timeline-sheet .md-timeline-sheet__loader.d-none,
#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__loader.d-none {
  display: none !important;
}

/* Shared sheet loading chip — matches processing toast (black status card) */
.md-sheet-loading {
  --md-sheet-load-ink: #f5f6f7;
  --md-sheet-load-ink-soft: rgba(245, 246, 247, 0.62);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
  min-width: min(72vw, 220px);
  min-height: 56px;
  padding: 12px 18px 14px 14px;
  overflow: hidden;
  border-radius: 14px;
  background: #121417;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--md-sheet-load-ink);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  font-family: "Jost", "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  animation: md-sheet-loading-rise 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.md-sheet-loading__rail {
  width: 3px;
  align-self: stretch;
  min-height: 28px;
  border-radius: 999px;
  background: #ffffff;
}

.md-sheet-loading__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.md-sheet-loading__eyebrow {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--md-sheet-load-ink-soft);
}

.md-sheet-loading__message {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--md-sheet-load-ink);
  white-space: nowrap;
}

.md-sheet-loading__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.md-sheet-loading__bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 38%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ffffff, rgba(255, 255, 255, 0.7), transparent);
  animation: md-sheet-loading-bar 1.15s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}

@keyframes md-sheet-loading-rise {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes md-sheet-loading-bar {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
  .md-sheet-loading {
    animation: none;
  }

  .md-sheet-loading__bar::after {
    animation: none;
    width: 48%;
    transform: none;
    background: #ffffff;
    opacity: 0.85;
  }
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__body,
#comment_modal.md-timeline-sheet .md-timeline-sheet__body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  padding: 12px 16px 16px;
  background: #eef3f9;
}

#emptyModal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__body,
#comment_modal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__body {
  background: #fff;
  padding: 16px;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__footer,
#comment_modal.md-timeline-sheet .md-timeline-sheet__footer {
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 0;
  padding: 10px 12px calc(10px + var(--md-sheet-footer-safe, 0px));
  border-top: 1px solid #e8eaed;
  background: #fff;
  z-index: 3;
}

#emptyModal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__footer,
#comment_modal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__footer {
  justify-content: stretch;
  padding: 10px 12px calc(12px + var(--md-sheet-footer-safe, 0px));
  background: #fff;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__footer:empty,
#comment_modal.md-timeline-sheet .md-timeline-sheet__footer:empty {
  display: none;
  padding: 0;
  border-top: none;
  box-shadow: none;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__btn,
#comment_modal.md-timeline-sheet .md-timeline-sheet__btn {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-text,
#comment_modal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-text {
  color: var(--tl-sheet-blue);
  background: transparent;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-text:hover,
#comment_modal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-text:hover,
#emptyModal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-text:focus-visible,
#comment_modal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-text:focus-visible {
  background: var(--tl-sheet-blue-soft);
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-contained,
#comment_modal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-contained {
  background: var(--tl-sheet-blue);
  color: #fff;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-contained:hover,
#comment_modal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-contained:hover,
#emptyModal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-contained:focus-visible,
#comment_modal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-contained:focus-visible {
  background: var(--tl-sheet-blue-dark);
  color: #fff;
}

/* Comment compose bar — WhatsApp-style */
#emptyModal.md-timeline-sheet .md-timeline-sheet__footer:has(.md-timeline-sheet__comment-compose),
#comment_modal.md-timeline-sheet .md-timeline-sheet__footer:has(.md-timeline-sheet__comment-compose) {
  background: #f0f2f5;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  padding: 8px 10px calc(8px + var(--md-sheet-footer-safe, 0px));
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__comment-compose,
#comment_modal.md-timeline-sheet .md-timeline-sheet__comment-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__compose-field,
#comment_modal.md-timeline-sheet .md-timeline-sheet__compose-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 4px 0 6px;
  border-radius: 24px;
  background: #fff;
  border: none;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.06);
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__compose-close,
#comment_modal.md-timeline-sheet .md-timeline-sheet__compose-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #54656f;
  font-size: 1rem;
  cursor: pointer;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__compose-close:hover,
#comment_modal.md-timeline-sheet .md-timeline-sheet__compose-close:hover,
#emptyModal.md-timeline-sheet .md-timeline-sheet__compose-close:focus-visible,
#comment_modal.md-timeline-sheet .md-timeline-sheet__compose-close:focus-visible {
  background: rgba(15, 23, 42, 0.06);
  color: #111b21;
  outline: none;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__compose-input,
#comment_modal.md-timeline-sheet .md-timeline-sheet__compose-input,
#emptyModal.md-timeline-sheet input#comment.chat-input,
#comment_modal.md-timeline-sheet input#comment.chat-input,
#emptyModalForm input#comment.chat-input,
input#comment.md-timeline-sheet__compose-input.chat-input,
#emptyModal.md-timeline-sheet textarea.md-timeline-sheet__compose-input.chat-input,
#comment_modal.md-timeline-sheet textarea.md-timeline-sheet__compose-input.chat-input {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 48px;
  max-height: 120px;
  margin: 0;
  padding: 12px 14px;
  border: none !important;
  border-radius: 24px;
  background: transparent !important;
  color: #111b21;
  font-family: "Jost", sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em;
  box-shadow: none !important;
  box-sizing: border-box;
  resize: none;
  overflow-y: auto;
  -webkit-appearance: none;
  appearance: none;
  -webkit-text-size-adjust: 100%;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__compose-input:focus,
#comment_modal.md-timeline-sheet .md-timeline-sheet__compose-input:focus,
#emptyModal.md-timeline-sheet input#comment.chat-input:focus,
#comment_modal.md-timeline-sheet input#comment.chat-input:focus,
#emptyModalForm input#comment.chat-input:focus,
input#comment.md-timeline-sheet__compose-input.chat-input:focus,
#emptyModal.md-timeline-sheet textarea.md-timeline-sheet__compose-input.chat-input:focus,
#comment_modal.md-timeline-sheet textarea.md-timeline-sheet__compose-input.chat-input:focus {
  outline: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__compose-field:focus-within,
#comment_modal.md-timeline-sheet .md-timeline-sheet__compose-field:focus-within {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__compose-input::placeholder,
#comment_modal.md-timeline-sheet .md-timeline-sheet__compose-input::placeholder,
#emptyModal.md-timeline-sheet input#comment.chat-input::placeholder,
#comment_modal.md-timeline-sheet input#comment.chat-input::placeholder,
#emptyModalForm input#comment.chat-input::placeholder,
input#comment.md-timeline-sheet__compose-input.chat-input::placeholder,
#emptyModal.md-timeline-sheet textarea.md-timeline-sheet__compose-input.chat-input::placeholder,
#comment_modal.md-timeline-sheet textarea.md-timeline-sheet__compose-input.chat-input::placeholder {
  color: #8696a0 !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  opacity: 1;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__compose-send,
#comment_modal.md-timeline-sheet .md-timeline-sheet__compose-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #1565c0;
  color: #fff;
  font-size: 1.0625rem;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(21, 101, 192, 0.4);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__compose-send > i,
#comment_modal.md-timeline-sheet .md-timeline-sheet__compose-send > i {
  transform: translateX(1px);
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__compose-send:hover,
#comment_modal.md-timeline-sheet .md-timeline-sheet__compose-send:hover,
#emptyModal.md-timeline-sheet .md-timeline-sheet__compose-send:focus-visible,
#comment_modal.md-timeline-sheet .md-timeline-sheet__compose-send:focus-visible {
  background: #0d47a1;
  outline: none;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__compose-send:active,
#comment_modal.md-timeline-sheet .md-timeline-sheet__compose-send:active {
  transform: scale(0.96);
}

/* Sheet footer refinements */
#emptyModal.md-timeline-sheet .md-timeline-sheet__footer,
#comment_modal.md-timeline-sheet .md-timeline-sheet__footer {
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 0;
  padding: 10px 12px calc(10px + var(--md-sheet-footer-safe, 0px));
  border-top: 1px solid #e8eaed;
  background: #fff;
  z-index: 3;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__footer:has(.md-timeline-sheet__comment-compose),
#comment_modal.md-timeline-sheet .md-timeline-sheet__footer:has(.md-timeline-sheet__comment-compose),
#emptyModal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__footer:has(.md-timeline-sheet__comment-compose),
#comment_modal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__footer:has(.md-timeline-sheet__comment-compose) {
  justify-content: stretch;
  align-items: flex-end;
  padding: 8px 10px calc(8px + var(--md-sheet-footer-safe, 0px));
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  background: #f0f2f5;
  box-shadow: none;
}

#emptyModal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__footer,
#comment_modal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__footer {
  justify-content: stretch;
  padding: 10px 12px calc(12px + var(--md-sheet-footer-safe, 0px));
  background: #fff;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}

#emptyModal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__footer,
#comment_modal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
  justify-content: stretch;
  flex-wrap: nowrap;
  padding: 10px 12px calc(10px + var(--md-sheet-footer-safe, 0px));
}

/* WebView footer pad: see html.is-webview --md-sheet-footer-safe + global sheet footer rule near :root */

#emptyModal.md-timeline-sheet .md-timeline-sheet__footer:empty,
#comment_modal.md-timeline-sheet .md-timeline-sheet__footer:empty {
  display: none;
  padding: 0;
  border-top: none;
  box-shadow: none;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__btn,
#comment_modal.md-timeline-sheet .md-timeline-sheet__btn {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
}

#emptyModal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__btn,
#comment_modal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__btn {
  width: 100%;
  justify-content: center;
}

#emptyModal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__btn--cancel,
#comment_modal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__btn--cancel {
  background: #fff;
  color: var(--tl-sheet-blue);
  border: 1px solid rgba(26, 115, 232, 0.35);
}

#emptyModal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__btn--cancel:hover,
#comment_modal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__btn--cancel:hover,
#emptyModal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__btn--cancel:focus-visible,
#comment_modal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__btn--cancel:focus-visible {
  background: var(--tl-sheet-blue-soft);
  border-color: var(--tl-sheet-blue);
  outline: none;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-text,
#comment_modal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-text {
  color: var(--tl-sheet-blue);
  background: transparent;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-text:hover,
#comment_modal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-text:hover,
#emptyModal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-text:focus-visible,
#comment_modal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-text:focus-visible {
  background: var(--tl-sheet-blue-soft);
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-contained,
#comment_modal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-contained,
#emptyModal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__btn--submit,
#comment_modal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__btn--submit {
  background: var(--tl-sheet-blue);
  color: #fff;
  border: 1px solid var(--tl-sheet-blue);
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-contained:hover,
#comment_modal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-contained:hover,
#emptyModal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-contained:focus-visible,
#comment_modal.md-timeline-sheet .md-timeline-sheet__footer .mui-btn-contained:focus-visible,
#emptyModal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__btn--submit:hover,
#comment_modal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__btn--submit:hover,
#emptyModal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__btn--submit:focus-visible,
#comment_modal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__btn--submit:focus-visible {
  background: var(--tl-sheet-blue-dark);
  border-color: var(--tl-sheet-blue-dark);
  color: #fff;
  outline: none;
}

/* Add / Edit post form — Material compose */
#emptyModal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__body,
#comment_modal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__body {
  background: #f8f9fa;
  padding: 12px 12px 20px;
}

#emptyModal .md-post-form,
#comment_modal .md-post-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 680px;
  min-width: 0;
  margin: 0 auto;
}

#emptyModal .md-post-form__audience,
#comment_modal .md-post-form__audience {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e8eaed;
  border-radius: 14px;
  background: #fff;
}

#emptyModal .md-post-form__audience-icon,
#comment_modal .md-post-form__audience-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e8f0fe;
  color: #1a73e8;
  font-size: 0.9375rem;
}

#emptyModal .md-post-form__audience-fields,
#comment_modal .md-post-form__audience-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#emptyModal .md-post-form__audience-label,
#comment_modal .md-post-form__audience-label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5f6368;
  line-height: 1.2;
}

#emptyModal .md-post-form__audience-wrap,
#comment_modal .md-post-form__audience-wrap {
  position: relative;
  display: block;
  min-width: 0;
}

#emptyModal .md-post-form__audience-select,
#comment_modal .md-post-form__audience-select {
  display: block;
  width: 100%;
  min-height: 28px;
  padding: 0 24px 0 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #202124;
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

#emptyModal .md-post-form__audience-select:focus,
#comment_modal .md-post-form__audience-select:focus {
  outline: none;
}

#emptyModal .md-post-form__branch-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}
#emptyModal .md-post-form__branch-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
#emptyModal .md-post-form__branch-toggle:focus-visible {
  outline: 2px solid var(--md-primary, #1a73e8);
  outline-offset: 2px;
  border-radius: 6px;
}
#emptyModal .md-post-form__branch-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
#emptyModal .md-post-form__branch .md-post-form__audience-label {
  margin: 0;
}
#emptyModal .md-post-form__branch-summary {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #5f6368;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#emptyModal .md-post-form__branch-chevron {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: #80868b;
  transition: transform 0.2s ease;
}
#emptyModal .md-post-form__branch-toggle:not(.collapsed) .md-post-form__branch-chevron {
  transform: rotate(180deg);
}
#emptyModal .md-post-form__branch-panel {
  margin-top: 8px;
}
#emptyModal .md-post-form__branch-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 6px;
}
#emptyModal .md-post-form__branch-toolbar .mui-btn {
  min-height: 32px;
  padding: 4px 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: none;
}
#emptyModal .md-post-form__branch-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #202124;
  transition: border-color 0.15s ease, background 0.15s ease;
}
#emptyModal .md-post-form__branch-check:hover {
  border-color: #dadce0;
  background: #f8f9fa;
}
#emptyModal .md-post-form__branch-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
#emptyModal .md-post-form__branch-box {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 2px solid #5f6368;
  border-radius: 4px;
  background: #fff;
  position: relative;
}
#emptyModal .md-post-form__branch-input:checked + .md-post-form__branch-box {
  border-color: var(--md-primary, #1a73e8);
  background: var(--md-primary, #1a73e8);
}
#emptyModal .md-post-form__branch-input:checked + .md-post-form__branch-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#emptyModal .md-post-form__branch-input:focus-visible + .md-post-form__branch-box {
  outline: 2px solid var(--md-primary, #1a73e8);
  outline-offset: 2px;
}
#emptyModal .md-post-form__branch-name {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
#emptyModal .md-post-form__branch-hint {
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: #80868b;
  line-height: 1.35;
}

#emptyModal .md-post-form__appear {
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid #c0c4c8;
  border-radius: 12px;
  background: #f7f9fc;
}

#emptyModal .md-post-form__appear[hidden] {
  display: none !important;
}

#emptyModal .md-post-form__appear-label {
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #202124;
}

#emptyModal .md-post-form__appear-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#emptyModal .md-post-form__appear-choice {
  display: block;
  margin: 0;
  cursor: pointer;
}

#emptyModal .md-post-form__appear-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#emptyModal .md-post-form__appear-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid #c0c4c8;
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

#emptyModal .md-post-form__appear-input:checked + .md-post-form__appear-card {
  border-color: #1a73e8;
  background: #e8f0fe;
  box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.25);
}

#emptyModal .md-post-form__appear-input:focus-visible + .md-post-form__appear-card {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

#emptyModal .md-post-form__appear-title {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #202124;
}

#emptyModal .md-post-form__appear-sub {
  font-size: 0.75rem;
  line-height: 1.35;
  color: #5f6368;
}

#emptyModal .md-post-form__audience--locked .md-post-form__audience-select {
  opacity: 0.65;
  pointer-events: none;
}


#emptyModal .md-post-form__headline-wrap,
#comment_modal .md-post-form__headline-wrap,
#emptyModal .md-post-form__editor,
#comment_modal .md-post-form__editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid #e8eaed;
  border-radius: 14px;
  background: #fff;
}

#emptyModal .md-post-form__headline-label,
#comment_modal .md-post-form__headline-label,
#emptyModal .md-post-form__editor-label,
#comment_modal .md-post-form__editor-label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5f6368;
}

#emptyModal .md-post-form__headline,
#comment_modal .md-post-form__headline {
  display: block;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid #dadce0;
  border-radius: 0;
  background: transparent;
  color: #202124;
  font-family: "Jost", sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

#emptyModal .md-mail-form .md-post-form__headline {
  text-transform: uppercase;
}

#emptyModal .md-post-form__headline:focus,
#comment_modal .md-post-form__headline:focus {
  outline: none;
  border-bottom-color: #1a73e8;
  box-shadow: 0 1px 0 #1a73e8;
}

#emptyModal .md-post-form__headline::placeholder,
#comment_modal .md-post-form__headline::placeholder {
  color: #9aa0a6;
  font-weight: 500;
}

#emptyModal .md-post-form__editor .note-editor,
#comment_modal .md-post-form__editor .note-editor {
  border: 1px solid #dadce0 !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: none !important;
  background: #fff;
}

#emptyModal .md-post-form__editor .note-toolbar,
#comment_modal .md-post-form__editor .note-toolbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 8px !important;
  border-bottom: 1px solid #e8eaed !important;
  background: #fafafa !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#emptyModal .md-mail-form .md-post-form__editor .note-toolbar > .note-btn-group,
#emptyModal .md-post-form__editor .note-toolbar > .note-btn-group {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  margin: 0 !important;
  float: none !important;
}

#emptyModal .md-mail-form .md-post-form__editor .note-toolbar .note-btn,
#emptyModal .md-post-form__editor .note-toolbar .note-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #5f6368 !important;
  box-shadow: none !important;
}

#emptyModal .md-mail-form .md-post-form__editor .note-toolbar .note-btn:hover,
#emptyModal .md-mail-form .md-post-form__editor .note-toolbar .note-btn:focus,
#emptyModal .md-post-form__editor .note-toolbar .note-btn:hover,
#emptyModal .md-post-form__editor .note-toolbar .note-btn:focus {
  background: #e8f0fe !important;
  color: #1565c0 !important;
  outline: none !important;
}

#emptyModal .md-mail-form .md-post-form__editor .note-toolbar .note-btn.active,
#emptyModal .md-post-form__editor .note-toolbar .note-btn.active {
  background: #e8f0fe !important;
  color: #0d47a1 !important;
}

#emptyModal .md-mail-form .md-post-form__editor .note-toolbar .note-btn i,
#emptyModal .md-post-form__editor .note-toolbar .note-btn i {
  font-size: 0.875rem;
}

#emptyModal .md-mail-form .md-post-form__editor .note-statusbar,
#emptyModal .md-post-form__editor .note-statusbar {
  display: none !important;
}

#emptyModal .md-post-form__editor .note-editable,
#comment_modal .md-post-form__editor .note-editable {
  min-height: 148px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 12px 14px !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.9375rem !important;
  line-height: 1.55 !important;
  color: #3c4043 !important;
  background: #fff !important;
}

#emptyModal .md-post-form__editor .note-editing-area,
#comment_modal .md-post-form__editor .note-editing-area,
#emptyModal .md-post-form__editor .note-editor,
#comment_modal .md-post-form__editor .note-editor {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

#emptyModal .md-post-form__editor .note-placeholder,
#comment_modal .md-post-form__editor .note-placeholder {
  color: #9aa0a6 !important;
  font-family: "Jost", sans-serif !important;
}

#emptyModal .md-post-form__attach-grid,
#comment_modal .md-post-form__attach-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 520px) {
  #emptyModal .md-post-form__attach-grid {
    grid-template-columns: 1fr 1fr;
  }
}

#emptyModal .md-post-form__tile,
#comment_modal .md-post-form__tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid #c2d7f5;
  border-radius: 14px;
  background: #e8f0fe;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

#emptyModal .md-post-form__tile[data-kind="files"],
#comment_modal .md-post-form__tile[data-kind="files"] {
  border-color: #b7dfc3;
  background: #e6f4ea;
}

#emptyModal .md-post-form__tile-head,
#comment_modal .md-post-form__tile-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#emptyModal .md-post-form__tile-icon,
#comment_modal .md-post-form__tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e8f0fe;
  color: #1a73e8;
  font-size: 1rem;
}

#emptyModal .md-post-form__tile[data-kind="files"] .md-post-form__tile-icon,
#comment_modal .md-post-form__tile[data-kind="files"] .md-post-form__tile-icon {
  background: #e6f4ea;
  color: #137333;
}

#emptyModal .md-post-form__tile-copy,
#comment_modal .md-post-form__tile-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#emptyModal .md-post-form__tile-title,
#comment_modal .md-post-form__tile-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #202124;
  line-height: 1.25;
}

#emptyModal .md-post-form__tile-hint,
#comment_modal .md-post-form__tile-hint {
  font-size: 0.75rem;
  font-weight: 500;
  color: #80868b;
  line-height: 1.3;
}

#emptyModal .md-post-form__tile-actions,
#comment_modal .md-post-form__tile-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#emptyModal .md-post-form__tile-actions .bootstrap-filestyle,
#comment_modal .md-post-form__tile-actions .bootstrap-filestyle {
  display: inline-flex;
  position: relative;
}

/* Keep filestyle's clipped <input type="file"> from scrolling the sheet when focused */
#emptyModal .md-post-form__tile-actions input[type="file"].filestyle,
#comment_modal .md-post-form__tile-actions input[type="file"].filestyle,
#emptyModal .md-post-form__tile-actions input[type="file"].post_attachments,
#comment_modal .md-post-form__tile-actions input[type="file"].post_attachments,
#emptyModal .md-post-form__tile-actions input[type="file"].post_images,
#comment_modal .md-post-form__tile-actions input[type="file"].post_images {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  overflow: hidden !important;
  z-index: -1 !important;
}

#emptyModal .md-post-form__tile-actions .bootstrap-filestyle .btn,
#comment_modal .md-post-form__tile-actions .bootstrap-filestyle .btn,
#emptyModal .md-post-form__file-row .bootstrap-filestyle .btn,
#comment_modal .md-post-form__file-row .bootstrap-filestyle .btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  padding: 6px 14px !important;
  border: none !important;
  border-radius: 999px !important;
  background: #d2e3fc !important;
  color: #0b57d0 !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
}

#emptyModal .md-post-form__tile[data-kind="files"] .bootstrap-filestyle .btn,
#comment_modal .md-post-form__tile[data-kind="files"] .bootstrap-filestyle .btn {
  background: #ceead6 !important;
  color: #0d652d !important;
}

#emptyModal .md-post-form__tile-actions .bootstrap-filestyle .btn .badge,
#comment_modal .md-post-form__tile-actions .bootstrap-filestyle .btn .badge,
#emptyModal .md-post-form__file-row .bootstrap-filestyle .btn .badge,
#comment_modal .md-post-form__file-row .bootstrap-filestyle .btn .badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  margin: 0 0 0 2px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: #0b57d0 !important;
  color: #fff !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  vertical-align: middle !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

#emptyModal .md-post-form__tile[data-kind="files"] .bootstrap-filestyle .btn .badge,
#comment_modal .md-post-form__tile[data-kind="files"] .bootstrap-filestyle .btn .badge {
  background: #0d652d !important;
  color: #fff !important;
}

#emptyModal .md-post-form__tile-actions .bootstrap-filestyle .btn:hover,
#comment_modal .md-post-form__tile-actions .bootstrap-filestyle .btn:hover,
#emptyModal .md-post-form__tile-actions .bootstrap-filestyle .btn:focus,
#comment_modal .md-post-form__tile-actions .bootstrap-filestyle .btn:focus {
  filter: brightness(0.96);
  outline: none;
}

#emptyModal .md-post-form__clear,
#comment_modal .md-post-form__clear {
  min-height: 36px;
  padding: 6px 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #5f6368;
  font-family: "Jost", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: none;
  cursor: pointer;
}

#emptyModal .md-post-form__clear:hover,
#comment_modal .md-post-form__clear:hover,
#emptyModal .md-post-form__clear:focus-visible,
#comment_modal .md-post-form__clear:focus-visible {
  background: #f1f3f4;
  color: #202124;
  outline: none;
}

#emptyModal .md-post-form__picked:not([hidden]),
#comment_modal .md-post-form__picked:not([hidden]),
#fullEmptyModal .md-post-form__picked:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

#emptyModal .md-post-form__tile.is-filled,
#comment_modal .md-post-form__tile.is-filled,
#fullEmptyModal .md-post-form__tile.is-filled {
  border-color: #90caf9;
  background: #f7fbff;
}

#emptyModal .md-post-form__tile[data-kind="files"].is-filled,
#comment_modal .md-post-form__tile[data-kind="files"].is-filled,
#fullEmptyModal .md-post-form__tile[data-kind="files"].is-filled {
  border-color: #81c784;
  background: #f6fbf7;
}

#emptyModal .md-post-form__picked-thumb,
#comment_modal .md-post-form__picked-thumb,
#fullEmptyModal .md-post-form__picked-thumb {
  display: block;
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border: 1px solid #e8eaed;
  border-radius: 10px;
  overflow: hidden;
  background: #f1f3f4;
}

#emptyModal .md-post-form__picked-remove,
#comment_modal .md-post-form__picked-remove,
#fullEmptyModal .md-post-form__picked-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(32, 33, 36, 0.78);
  color: #fff;
  font-size: 0.625rem;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

#emptyModal .md-post-form__picked-remove:hover,
#comment_modal .md-post-form__picked-remove:hover,
#fullEmptyModal .md-post-form__picked-remove:hover,
#emptyModal .md-post-form__picked-remove:focus-visible,
#comment_modal .md-post-form__picked-remove:focus-visible,
#fullEmptyModal .md-post-form__picked-remove:focus-visible {
  background: #c62828;
  outline: none;
}

#emptyModal .md-post-form__picked-remove--file,
#comment_modal .md-post-form__picked-remove--file,
#fullEmptyModal .md-post-form__picked-remove--file {
  position: static;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: rgba(32, 33, 36, 0.08);
  color: #5f6368;
}

#emptyModal .md-post-form__picked-thumb img,
#comment_modal .md-post-form__picked-thumb img,
#fullEmptyModal .md-post-form__picked-thumb img {
  display: block;
  width: 72px;
  height: 72px;
  max-width: 72px;
  object-fit: cover;
  object-position: center;
}

#emptyModal .md-post-form__picked-more,
#comment_modal .md-post-form__picked-more,
#fullEmptyModal .md-post-form__picked-more {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border: 1px dashed #dadce0;
  border-radius: 10px;
  background: #f8f9fa;
  color: #5f6368;
  font-size: 0.8125rem;
  font-weight: 600;
}

#emptyModal .md-post-form__picked-files,
#comment_modal .md-post-form__picked-files,
#fullEmptyModal .md-post-form__picked-files {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

#emptyModal .md-post-form__picked-file,
#comment_modal .md-post-form__picked-file,
#fullEmptyModal .md-post-form__picked-file {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

#emptyModal .md-post-form__picked-file-icon,
#comment_modal .md-post-form__picked-file-icon,
#fullEmptyModal .md-post-form__picked-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #e6f4ea;
  color: #137333;
  font-size: 0.9375rem;
}

#emptyModal .md-post-form__picked-file-copy,
#comment_modal .md-post-form__picked-file-copy,
#fullEmptyModal .md-post-form__picked-file-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

#emptyModal .md-post-form__picked-file-name,
#comment_modal .md-post-form__picked-file-name,
#fullEmptyModal .md-post-form__picked-file-name {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: #202124;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#emptyModal .md-post-form__picked-file-meta,
#comment_modal .md-post-form__picked-file-meta,
#fullEmptyModal .md-post-form__picked-file-meta {
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.3;
  color: #80868b;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#emptyModal .md-post-form__picked-file-more,
#comment_modal .md-post-form__picked-file-more,
#fullEmptyModal .md-post-form__picked-file-more {
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #5f6368;
}

#emptyModal .md-post-form__picked-names,
#comment_modal .md-post-form__picked-names,
#fullEmptyModal .md-post-form__picked-names {
  display: none;
}

#emptyModal .md-post-form__section,
#comment_modal .md-post-form__section {
  margin-top: 0;
  padding: 12px 14px;
  border: 1px solid #e8eaed;
  border-radius: 14px;
  background: #fff;
}

#emptyModal .md-post-form__section-title,
#comment_modal .md-post-form__section-title {
  margin: 0 0 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #202124;
  text-transform: none;
}

#emptyModal .md-post-form__hint,
#comment_modal .md-post-form__hint {
  margin: 0 0 10px;
  font-size: 0.75rem;
  color: #80868b;
}

#emptyModal .md-post-form__file-row,
#comment_modal .md-post-form__file-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#emptyModal .md-post-form .mui-field,
#comment_modal .md-post-form .mui-field {
  margin-bottom: 12px;
}

#emptyModal .md-post-form__thumb-grid,
#comment_modal .md-post-form__thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

#emptyModal .md-post-form__thumb,
#comment_modal .md-post-form__thumb {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  overflow: hidden;
  background: #f8f9fa;
  cursor: pointer;
}

#emptyModal .md-post-form__thumb img,
#comment_modal .md-post-form__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#emptyModal .md-post-form__thumb-remove,
#comment_modal .md-post-form__thumb-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(32, 33, 36, 0.72);
  color: #fff;
  font-size: 0.625rem;
}

#emptyModal .md-post-form__attach-list,
#comment_modal .md-post-form__attach-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#emptyModal .md-post-form__attach,
#comment_modal .md-post-form__attach {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  background: #f8f9fa;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

#emptyModal .md-post-form__attach:hover,
#comment_modal .md-post-form__attach:hover,
#emptyModal .md-post-form__attach:focus-visible,
#comment_modal .md-post-form__attach:focus-visible {
  background: #fce8e6;
  border-color: #f28b82;
  outline: none;
}

#emptyModal .md-post-form__attach-icon,
#comment_modal .md-post-form__attach-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  object-fit: contain;
}

#emptyModal .md-post-form__attach-name,
#comment_modal .md-post-form__attach-name {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #3c4043;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#emptyModal .md-post-form__attach-remove,
#comment_modal .md-post-form__attach-remove {
  flex-shrink: 0;
  font-size: 0.875rem;
  color: #d93025;
}

.timeline-page .md-comment {
  margin-bottom: 12px;
  padding: 12px;
  border: none;
  border-radius: var(--md-shape-md);
  box-shadow: var(--mui-elevation-1);
  background: var(--mui-surface);
}

/* Discussion thread — Material comment list */
#emptyModal .md-comment-thread,
#comment_modal .md-comment-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
  padding: 4px 0 8px;
}

#emptyModal .md-comment-empty,
#comment_modal .md-comment-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: min(52vh, 360px);
  margin: 8px 0;
  padding: 28px 20px;
  text-align: center;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e8eaed;
}

#emptyModal .md-comment-empty__icon,
#comment_modal .md-comment-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: #e8f0fe;
  color: #1a73e8;
  font-size: 1.375rem;
}

#emptyModal .md-comment-empty__title,
#comment_modal .md-comment-empty__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #202124;
}

#emptyModal .md-comment-empty__text,
#comment_modal .md-comment-empty__text {
  margin: 0;
  max-width: 280px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #5f6368;
}

/* Legacy comment cards only — activity/topic comments use .md-mail-reply */
#emptyModal .md-comment:not(.md-mail-reply),
#comment_modal .md-comment:not(.md-mail-reply),
.timeline-page-modal .md-comment:not(.md-mail-reply) {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #e8eaed;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.06);
}

#emptyModal .md-comment--mine:not(.md-mail-reply),
#comment_modal .md-comment--mine:not(.md-mail-reply) {
  background: #f3f8ff;
  border-color: #d2e3fc;
}

#emptyModal .md-comment__avatar,
#comment_modal .md-comment__avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#emptyModal .md-comment__avatar--photo,
#comment_modal .md-comment__avatar--photo {
  color: transparent;
  font-size: 0;
  background-color: #e8eaed;
}

#emptyModal .md-comment__main,
#comment_modal .md-comment__main {
  flex: 1;
  min-width: 0;
}

#emptyModal .md-comment__head,
#comment_modal .md-comment__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

#emptyModal .md-comment__identity,
#comment_modal .md-comment__identity {
  min-width: 0;
  flex: 1;
}

#emptyModal .md-comment__author,
#comment_modal .md-comment__author {
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.3;
  color: #202124;
}

#emptyModal .md-comment__meta,
#comment_modal .md-comment__meta {
  margin-top: 2px;
  font-size: 0.75rem;
  line-height: 1.3;
  color: #80868b;
}

#emptyModal .md-comment__body,
#comment_modal .md-comment__body {
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  color: #3c4043;
  line-height: 1.5;
  word-break: break-word;
}

#emptyModal .md-comment__delete,
#comment_modal .md-comment__delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: -4px -4px 0 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #9aa0a6;
  font-size: 0.8125rem;
  cursor: pointer;
}

#emptyModal .md-comment__delete:hover,
#comment_modal .md-comment__delete:hover,
#emptyModal .md-comment__delete:focus-visible,
#comment_modal .md-comment__delete:focus-visible {
  background: #fce8e6;
  color: #d93025;
  outline: none;
}


/* Discussion day separators */
#emptyModal .md-comment-day,
#comment_modal .md-comment-day {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 2px;
  color: #80868b;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#emptyModal .md-comment-day::before,
#comment_modal .md-comment-day::before,
#emptyModal .md-comment-day::after,
#comment_modal .md-comment-day::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e8eaed;
}

#emptyModal .md-comment-day span,
#comment_modal .md-comment-day span {
  flex-shrink: 0;
}

/* Timeline mail / comment sheets — navy header (match activity sheet) */
#emptyModal.md-timeline-sheet,
#comment_modal.md-timeline-sheet {
  font-family: "Jost", sans-serif;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__header,
#emptyModal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__header,
#emptyModal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__header,
#comment_modal.md-timeline-sheet .md-timeline-sheet__header,
#comment_modal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__header,
#comment_modal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 72px;
  background:
    radial-gradient(ellipse 90% 140% at 100% -10%, rgba(255, 255, 255, 0.18), transparent 55%),
    linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 10px rgba(13, 71, 161, 0.28) !important;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 10px 14px 18px !important;
  overflow: hidden;
  z-index: 2;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__heading,
#comment_modal.md-timeline-sheet .md-timeline-sheet__heading {
  position: relative;
  z-index: 1;
  gap: 4px;
  padding-top: 0;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__title,
#emptyModal.md-timeline-sheet .md-timeline-sheet__title.modal-title,
#emptyModal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__title,
#comment_modal.md-timeline-sheet .md-timeline-sheet__title,
#comment_modal.md-timeline-sheet .md-timeline-sheet__title.modal-title,
#comment_modal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__title {
  color: #ffffff !important;
  white-space: normal !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.015em !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#emptyModal.md-timeline-sheet #mail-sheet-title.md-timeline-sheet__title,
#emptyModal.md-timeline-sheet.md-timeline-sheet--thread #mail-sheet-title {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em !important;
  -webkit-line-clamp: 2;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__title .md-sl-form-heading__overline,
#comment_modal.md-timeline-sheet .md-timeline-sheet__title .md-sl-form-heading__overline {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__title .md-sl-form-heading__title,
#comment_modal.md-timeline-sheet .md-timeline-sheet__title .md-sl-form-heading__title {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__overline:not(:empty),
#emptyModal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__overline:not(:empty),
#comment_modal.md-timeline-sheet .md-timeline-sheet__overline:not(:empty),
#comment_modal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__overline:not(:empty) {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  line-height: 1.35;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__lead:not(:empty),
#emptyModal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__lead:not(:empty),
#emptyModal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__lead:not(:empty),
#comment_modal.md-timeline-sheet .md-timeline-sheet__lead:not(:empty),
#comment_modal.md-timeline-sheet.md-timeline-sheet--thread .md-timeline-sheet__lead:not(:empty),
#comment_modal.md-timeline-sheet.md-timeline-sheet--compose .md-timeline-sheet__lead:not(:empty) {
  color: rgba(255, 255, 255, 0.82) !important;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__close,
#comment_modal.md-timeline-sheet .md-timeline-sheet__close {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  margin-top: 0;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__close:hover,
#emptyModal.md-timeline-sheet .md-timeline-sheet__close:focus-visible,
#comment_modal.md-timeline-sheet .md-timeline-sheet__close:hover,
#comment_modal.md-timeline-sheet .md-timeline-sheet__close:focus-visible {
  background: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}

#emptyModal .md-comment-empty__icon,
#comment_modal .md-comment-empty__icon {
  background: #e3f2fd;
  color: #0d47a1;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__compose-input:focus,
#comment_modal.md-timeline-sheet .md-timeline-sheet__compose-input:focus {
  border: none;
  background: transparent;
  box-shadow: none;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__compose-send,
#comment_modal.md-timeline-sheet .md-timeline-sheet__compose-send {
  background: #1565c0;
  box-shadow: 0 1px 3px rgba(21, 101, 192, 0.4);
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__compose-send:hover,
#emptyModal.md-timeline-sheet .md-timeline-sheet__compose-send:focus-visible,
#comment_modal.md-timeline-sheet .md-timeline-sheet__compose-send:hover,
#comment_modal.md-timeline-sheet .md-timeline-sheet__compose-send:focus-visible {
  background: #0d47a1;
}

@media (prefers-reduced-motion: reduce) {
  .timeline-page .md-animate-in {
    animation: none;
  }
}

/* Bottom nav — timeline page */
.timeline-page #footer-bar {
  max-width: none;
  width: 100%;
  left: 0;
  right: 0;
  transform: none;
  background: var(--mui-surface);
  border-top: none;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

.timeline-page #footer-bar .circle-nav {
  position: relative;
}

.timeline-page #footer-bar .circle-nav i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-top: -20px;
  border-radius: 16px;
  background: var(--mui-primary);
  color: #fff !important;
  box-shadow: var(--mui-elevation-2);
}

.timeline-page #footer-bar .circle-nav span {
  color: var(--mui-primary) !important;
  font-weight: 500 !important;
  text-decoration: none;
}

.timeline-page #footer-bar a:not(.circle-nav) span {
  color: var(--mui-on-surface-variant);
  font-weight: 500;
}

/* Alert badge position is owned by footer.php */

/* ── Timeline: action buttons ── */

.timeline-page .mui-button-text {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.8125rem;
}

/* ── WebView layout (React Native app) ── */

.is-webview .timeline-page .md-timeline-toolbar.card-filter {
  left: 0;
  right: 0;
  max-width: none;
  width: 100%;
  transform: none;
}

.is-webview .timeline-page .timeline-feed.page-content,
.is-webview .timeline-page .page-content {
  max-width: none;
  padding-top: var(--md-timeline-toolbar-offset) !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 61px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 8px) !important;
}

/* ── Timeline: mobile / narrow screens ── */

@media (max-width: 480px) {
  .timeline-page .md-timeline-toolbar .content,
  .timeline-page .md-timeline-toolbar__inner {
    padding: 8px 10px 10px !important;
    gap: 6px;
  }

  .timeline-page .md-timeline-toolbar__title {
    font-size: 1.25rem;
  }

  .timeline-page .md-timeline-toolbar__actions .mui-btn,
  .timeline-page .md-timeline-toolbar__actions .md-btn-contained,
  .timeline-page .md-timeline-toolbar__actions .md-btn-outlined {
    min-height: 44px;
    font-size: 0.875rem;
    padding: 10px 12px;
  }

  .is-webview .timeline-page .md-timeline-toolbar__actions .mui-btn,
  .is-webview .timeline-page .md-timeline-toolbar__actions .md-btn-contained,
  .is-webview .timeline-page .md-timeline-toolbar__actions .md-btn-outlined {
    min-height: 48px;
    font-size: 0.9375rem;
    padding: 12px 14px;
  }

  .timeline-page .timeline-feed.page-content,
  .timeline-page .page-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .timeline-page .md-timeline-stream {
    padding: 8px 8px 8px;
    gap: 10px;
  }

  .timeline-page .md-timeline-card__head {
    padding-left: 14px;
    padding-right: 14px;
  }

  .timeline-page .md-timeline-card__content {
    padding-left: 14px;
    padding-right: 14px;
  }

  .timeline-page .md-timeline-attachments-panel {
    margin-left: 10px;
    margin-right: 10px;
  }

  .timeline-page .md-timeline-card__metrics {
    flex-wrap: nowrap;
    padding: 6px 10px;
    gap: 4px;
  }

  .timeline-page .md-timeline-card__metric.md-chip,
  .timeline-page .md-timeline-card__metric {
    min-height: 22px;
    height: auto;
    padding: 2px 7px;
    font-size: 0.6875rem;
  }

  .timeline-page .md-timeline-card__action-bar .mui-btn-text,
  .timeline-page .md-timeline-card__action-bar .md-timeline-action-btn {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 0.8125rem;
  }

  .timeline-page .md-timeline-card__action-bar .mui-btn-text i,
  .timeline-page .md-timeline-card__action-bar .md-timeline-action-btn i {
    font-size: 1rem;
  }

  .timeline-page #footer-bar .circle-nav i {
    width: 48px;
    height: 48px;
    margin-top: -16px;
  }
}@media (prefers-reduced-motion: reduce) {
  .timeline-page .md-animate-in {
    animation: none;
  }
}

/* Bottom nav — timeline page */
.timeline-page #footer-bar {
  max-width: none;
  width: 100%;
  left: 0;
  right: 0;
  transform: none;
  background: var(--mui-surface);
  border-top: none;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

.timeline-page #footer-bar .circle-nav {
  position: relative;
}

.timeline-page #footer-bar .circle-nav i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-top: -20px;
  border-radius: 16px;
  background: var(--mui-primary);
  color: #fff !important;
  box-shadow: var(--mui-elevation-2);
}

.timeline-page #footer-bar .circle-nav span {
  color: var(--mui-primary) !important;
  font-weight: 500 !important;
  text-decoration: none;
}

.timeline-page #footer-bar a:not(.circle-nav) span {
  color: var(--mui-on-surface-variant);
  font-weight: 500;
}

/* Alert badge position is owned by footer.php */

/* ── Timeline: action buttons ── */

.timeline-page .mui-button-text {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.8125rem;
}

/* ── WebView layout (React Native app) ── */

.is-webview .timeline-page .md-timeline-toolbar.card-filter {
  left: 0;
  right: 0;
  max-width: none;
  width: 100%;
  transform: none;
}

.is-webview .timeline-page .timeline-feed.page-content,
.is-webview .timeline-page .page-content {
  max-width: none;
  padding-top: var(--md-timeline-toolbar-offset) !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 61px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 8px) !important;
}

/* ── Timeline: mobile / narrow screens ── */

@media (max-width: 480px) {
  .timeline-page .md-timeline-toolbar .content,
  .timeline-page .md-timeline-toolbar__inner {
    padding: 8px 10px 10px !important;
    gap: 6px;
  }

  .timeline-page .md-timeline-toolbar__title {
    font-size: 1.125rem;
  }

  .timeline-page .md-timeline-toolbar__reload {
    width: 36px;
    height: 36px;
  }

  .timeline-page .md-timeline-toolbar__actions .mui-btn,
  .timeline-page .md-timeline-toolbar__actions .md-btn-contained,
  .timeline-page .md-timeline-toolbar__actions .md-btn-outlined {
    min-height: 40px;
    font-size: 0.8125rem;
    padding: 8px 12px;
  }

  .is-webview .timeline-page .md-timeline-toolbar__actions .mui-btn,
  .is-webview .timeline-page .md-timeline-toolbar__actions .md-btn-contained,
  .is-webview .timeline-page .md-timeline-toolbar__actions .md-btn-outlined {
    min-height: 44px;
    font-size: 0.875rem;
    padding: 10px 12px;
  }

  .timeline-page .timeline-feed.page-content,
  .timeline-page .page-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .timeline-page .md-timeline-stream {
    padding: 6px 8px 8px;
    gap: 8px;
  }

  .timeline-page .md-timeline-card__head {
    padding: 10px;
  }

  .timeline-page .md-timeline-card__content {
    padding: 12px 12px 4px;
  }

  .timeline-page .md-timeline-attachments-panel {
    margin-left: 8px;
    margin-right: 8px;
  }

  .timeline-page .md-timeline-card__metrics {
    flex-wrap: nowrap;
    padding: 6px 10px;
    gap: 4px;
  }

  .timeline-page .md-timeline-card__metric.md-chip,
  .timeline-page .md-timeline-card__metric {
    min-height: 22px;
    height: auto;
    padding: 2px 7px;
  }

  .timeline-page .md-timeline-card__action-bar .mui-btn-text,
  .timeline-page .md-timeline-card__action-bar .md-timeline-action-btn {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 0.8125rem;
  }

  .timeline-page .md-timeline-card__action-bar .mui-btn-text i,
  .timeline-page .md-timeline-card__action-bar .md-timeline-action-btn i {
    font-size: 1rem;
  }

  .timeline-page #footer-bar .circle-nav i {
    width: 48px;
    height: 48px;
    margin-top: -16px;
  }
}

/* ── zap-app: student-list sheets (Filter / Actions / Phone / Admit) ── */

#emptyAction.md-sl-filter-sheet .md-timeline-filter-sheet__footer:empty {
  display: none !important;
}

#emptyAction.md-sl-filter-sheet .md-timeline-filter-sheet__footer:has(> :only-child) {
  grid-template-columns: 1fr;
}

#emptyAction.md-sl-filter-sheet .md-timeline-filter-sheet__loading {
  display: none;
  padding: 24px 0;
}

#emptyAction.md-sl-filter-sheet .md-sl-filter-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#emptyAction.md-sl-filter-sheet .md-sl-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Bottom action sheets */
.md-sl-sheet.menu {
  display: none !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 24px 24px 0 0 !important;
  background: #fff !important;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.18) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(82vh, 640px) !important;
  overflow: hidden !important;
  z-index: 1300 !important;
  opacity: 0;
  pointer-events: none;
}

.md-sl-sheet.menu.menu-active {
  display: flex !important;
  flex-direction: column !important;
  transform: translate3d(0, 0, 0) !important;
  opacity: 1 !important;
  pointer-events: all !important;
}

body:has(.md-sl-sheet.menu-active) #logger.menu-active {
  background: rgba(15, 23, 42, 0.45) !important;
  opacity: 1 !important;
}

.md-sl-sheet__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  max-height: min(82vh, 640px);
  background: #fff;
  font-family: "Jost", sans-serif;
  overflow: hidden;
  animation: md-filter-sheet-rise 0.28s cubic-bezier(0.2, 0, 0, 1) both;
}

.md-sl-sheet__handle {
  flex-shrink: 0;
  width: 36px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: #dadce0;
}

.md-sl-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  min-height: 56px;
  padding: 4px 8px 14px 20px;
}

.md-sl-sheet__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  padding-top: 4px;
}

.md-sl-sheet__overline {
  display: block;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a73e8;
}

.md-sl-sheet__title {
  margin: 0 !important;
  font-family: "Jost", sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em;
  color: #202124 !important;
  text-transform: none !important;
}

.md-sl-sheet__close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: #f1f3f4 !important;
  color: #5f6368 !important;
  font-size: 1rem !important;
  cursor: pointer;
}

.md-sl-sheet__close:hover,
.md-sl-sheet__close:focus-visible {
  background: #e8eaed !important;
  color: #202124 !important;
  outline: none;
}

.md-sl-sheet__body.content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0 12px calc(16px + var(--md-sheet-footer-safe, 0px)) !important;
  margin: 0 !important;
  -webkit-overflow-scrolling: touch;
}

html.is-webview .md-sl-sheet__body.content,
body.is-webview .md-sl-sheet__body.content,
html.is-webview #resultAction.md-sl-sheet .md-sl-sheet__body,
body.is-webview #resultAction.md-sl-sheet .md-sl-sheet__body {
  padding-bottom: 16px !important;
}

.md-sl-sheet__loading {
  display: none;
  padding: 24px 0 8px;
}

.md-sl-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 4px 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.md-sl-sheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-decoration: none !important;
  color: #202124;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}

.md-sl-sheet-item:last-child {
  border-bottom: none;
}

.md-sl-sheet-item:hover,
.md-sl-sheet-item:focus-visible {
  background: rgba(26, 115, 232, 0.06);
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

.md-sl-sheet-item:active {
  background: rgba(26, 115, 232, 0.1);
}

.md-sl-sheet-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1rem;
}

.md-sl-sheet-item__icon--blue { background: #e8f0fe; color: #1a73e8; }
.md-sl-sheet-item__icon--green { background: #e6f4ea; color: #1e8e3e; }
.md-sl-sheet-item__icon--amber { background: #fef7e0; color: #e37400; }
.md-sl-sheet-item__icon--red { background: #fce8e6; color: #d93025; }
.md-sl-sheet-item__icon--purple { background: #f3e8fd; color: #9334e6; }
.md-sl-sheet-item__icon--teal { background: #e0f2f1; color: #00796b; }
.md-sl-sheet-item__icon--orange { background: #feefe3; color: #e8710a; }
.md-sl-sheet-item__icon--magenta { background: #fce4ec; color: #c2185b; }

.md-sl-sheet-item__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.md-sl-sheet-item__title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #202124;
}

.md-sl-sheet-item__sub {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  color: #5f6368;
}

.md-sl-sheet-item__chevron {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: #9aa0a6;
}

.md-sl-sheet-item--danger {
  background: transparent;
}

.md-sl-sheet-item--danger:hover,
.md-sl-sheet-item--danger:focus-visible {
  background: rgba(217, 48, 37, 0.06);
}

.md-sl-sheet-item--danger .md-sl-sheet-item__title {
  color: #d93025;
}

/* Student list form dialogs (empty_modal / fullEmptyModal)
   Use inset + margin:auto (not translate) so lock/unlock / visualViewport
   changes cannot drift the card off-center. */
#empty_modal:has(.md-sl-form),
#empty_modal:has(.md-parent-devices) {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: 0 !important;
  width: min(440px, calc(100vw - 24px)) !important;
  max-width: min(440px, calc(100vw - 24px)) !important;
  height: fit-content !important;
  min-height: 0 !important;
  min-width: 0 !important;
  max-height: min(92dvh, 720px) !important;
  margin: auto !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.22) !important;
  overflow: hidden !important;
  transform: none !important;
  -webkit-transform: none !important;
  font-family: "Jost", sans-serif;
}

#empty_modal:has(.md-sl-form) .menu-title,
#empty_modal:has(.md-parent-devices) .menu-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
  margin: 0;
  padding: 12px 12px 12px 20px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

#empty_modal:has(.md-sl-form) .menu-title > a.close-menu,
#empty_modal:has(.md-parent-devices) .menu-title > a.close-menu {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: static !important;
  top: auto !important;
  right: auto !important;
  width: 40px;
  height: 40px;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50%;
  background: #f1f3f4;
  color: #5f6368;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
}

#empty_modal:has(.md-sl-form) .menu-title > a.close-menu i,
#empty_modal:has(.md-parent-devices) .menu-title > a.close-menu i {
  margin: 0;
}

#empty_modal:has(.md-sl-form) .modal-title,
#empty_modal:has(.md-parent-devices) .modal-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
}

#empty_modal:has(.md-sl-form) .content {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

#empty_modal:has(.md-parent-devices) .content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

#empty_modal:has(.md-sl-form) .divider,
#empty_modal:has(.md-sl-form) .spinnerContent,
#empty_modal:has(.md-parent-devices) .divider,
#empty_modal:has(.md-parent-devices) .spinnerContent {
  display: none !important;
}

#empty_modal:has(.md-sl-form) .modal-div,
#empty_modal:has(.md-parent-devices) .modal-div {
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(60dvh, 480px);
  overflow: auto;
  padding: 16px 20px 8px;
  -webkit-overflow-scrolling: touch;
}

#empty_modal:has(.md-sl-form) .modal-footer,
#empty_modal:has(.md-parent-devices) .modal-footer,
#empty_modal.menu:has(.md-parent-devices) .modal-footer,
#empty_modal.menu:has(.md-parent-devices) .modal-footer.author-wrapper,
#empty_modal.menu:has(.md-parent-devices) .modal-footer.p-0,
#empty_modal.menu:has(.md-parent-devices) .modal-footer.mb-3,
#empty_modal:has(.md-parent-devices) .modal-footer.author-wrapper,
#empty_modal:has(.md-parent-devices) .modal-footer.p-0.mb-3 {
  display: block !important;
  flex: 0 0 auto !important;
  flex-shrink: 0;
  align-self: stretch !important;
  position: relative;
  z-index: 2;
  width: 100% !important;
  margin: 0 !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding: 12px 16px !important;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  border-radius: 0 0 16px 16px;
  box-shadow: none;
}

#empty_modal:has(.md-sl-form) .modal-footer.mb-3,
#empty_modal:has(.md-sl-form) .modal-footer.author-wrapper,
#empty_modal:has(.md-parent-devices) .modal-footer.mb-3,
#empty_modal:has(.md-parent-devices) .modal-footer.author-wrapper {
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 12px 16px !important;
  padding-bottom: 12px !important;
}

#fullEmptyModal:has(.md-sl-form) .md-timeline-sheet__body.modal-div {
  padding: 14px 14px 8px;
  background: #f3f5f8;
}

#fullEmptyModal:has(.md-sl-form) .md-timeline-sheet__footer.modal-footer {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px) + var(--md-sheet-footer-safe, 0px));
  background: #fff;
  box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
  z-index: 30;
}

#fullEmptyModal:has(.md-link-parent) .md-timeline-sheet__footer.modal-footer,
#fullEmptyModal.md-timeline-sheet:has(.md-link-parent) .md-timeline-sheet__footer {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
}

#fullEmptyModal:has(.md-sl-form) .md-timeline-sheet__footer .md-sl-form-actions {
  width: 100%;
}

/* fullEmptyModal sheet chrome (Link to parent, Edit student, …) */
#fullEmptyModal.md-timeline-sheet {
  display: none !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
  touch-action: pan-y;
  z-index: 1300 !important;
  transform: none !important;
  opacity: 0;
  pointer-events: none;
}

/* Dropdowns use data-container=body; keep sheet scroll locked while pickers are open. */

#fullEmptyModal.md-timeline-sheet.menu-active {
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  pointer-events: all !important;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  background: #fff;
  font-family: "Jost", sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  touch-action: pan-y;
}

#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__handle {
  display: none;
}

#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 10px 14px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background:
    linear-gradient(180deg, #f6f9fe 0%, #ffffff 72%);
}

#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 2px;
}

#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__overline {
  display: none;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #1a73e8;
  line-height: 1.2;
}

#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__overline:not(:empty) {
  display: block;
}

#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__title,
#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__title.modal-title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Jost", sans-serif !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em;
  color: #202124 !important;
  text-transform: none !important;
}

#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__lead {
  display: none;
  margin: 4px 0 0;
  max-width: 34rem;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  color: #5f6368;
}

#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__lead:not(:empty) {
  display: block;
}

#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: #f1f3f4 !important;
  color: #5f6368 !important;
  font-size: 1rem !important;
  cursor: pointer;
  box-shadow: none !important;
}

#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__close:hover,
#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__close:focus-visible {
  background: #e8eaed !important;
  color: #202124 !important;
  outline: none;
}

/* fullEmptyModal loader overlay: shared with #emptyModal / #comment_modal above */

#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  touch-action: pan-y;
}

#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  position: sticky;
  bottom: 0;
  z-index: 30;
  box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
}

.md-link-parent {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
  padding-bottom: 8px;
}

.md-link-parent__pick {
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.md-link-parent__pick-head {
  margin-bottom: 14px;
}

.md-link-parent__pick-overline {
  display: block;
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #1a73e8;
}

.md-link-parent__pick-title {
  margin: 0 0 4px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #202124;
  line-height: 1.25;
}

.md-link-parent__pick-lead {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(26, 115, 232, 0.28);
  background: #e8f0fe;
  color: #174ea6;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
}

.md-link-parent__pick-lead > i {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1.0625rem;
  color: #1a73e8;
}

.md-link-parent__pick-lead strong {
  font-weight: 700;
  color: #0b57d0;
}

.md-link-parent__picker {
  margin: 0 0 12px;
}

.md-link-parent__picker-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #5f6368;
}

.md-link-parent__picker-shell {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 52px;
  border: 1.5px solid rgba(26, 115, 232, 0.28);
  border-radius: 14px;
  background: #f8fbff;
  overflow: visible;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  z-index: 2;
}

.md-link-parent__picker-shell:focus-within {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.16);
  background: #fff;
  z-index: 5;
}

.md-link-parent__picker-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  color: #1a73e8;
  font-size: 0.9375rem;
  pointer-events: none;
  z-index: 1;
}

.md-link-parent__picker-shell .bootstrap-select {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  position: relative;
  z-index: 2;
}

.md-link-parent__picker-shell .bootstrap-select > .dropdown-toggle.md-link-parent__picker-btn,
.md-link-parent__picker-shell .bootstrap-select > .dropdown-toggle {
  min-height: 52px !important;
  padding: 10px 40px 10px 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #202124 !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  text-align: left !important;
  box-shadow: none !important;
}

.md-link-parent__picker-shell .bootstrap-select .filter-option-inner-inner {
  color: #202124;
}

.md-link-parent__picker-shell .bootstrap-select .dropdown-toggle .bs-caret,
.md-link-parent__picker-shell .bootstrap-select .dropdown-toggle::after {
  color: #1a73e8;
}

/* Keep parent picker menu above the cover sheet / logger */
:is(#fullEmptyModal, #admit_student_modal) .bootstrap-select .dropdown-menu,
:is(#fullEmptyModal, #admit_student_modal).bootstrap-select .dropdown-menu,
:is(#fullEmptyModal, #admit_student_modal) > .bs-container .dropdown-menu,
body:has(:is(#fullEmptyModal, #admit_student_modal).menu-active) > .dropdown-menu,
body:has(:is(#fullEmptyModal, #admit_student_modal).menu-active) .bootstrap-select .dropdown-menu {
  z-index: 2100 !important;
}

/* Material redesign: link-parent bootstrap-select menu */
:is(#fullEmptyModal, #admit_student_modal) > .bs-container.md-link-parent-select,
:is(#fullEmptyModal, #admit_student_modal) .bs-container.md-link-parent-select {
  z-index: 2100 !important;
}

:is(#fullEmptyModal, #admit_student_modal) > .bs-container.md-link-parent-select .dropdown-menu,
:is(#fullEmptyModal, #admit_student_modal) .bs-container.md-link-parent-select .dropdown-menu,
:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu {
  margin: 6px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 16px !important;
  background: #fff !important;
  font-family: "Jost", sans-serif !important;
  box-shadow:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden !important;
  max-width: min(420px, calc(100vw - 24px)) !important;
}

:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu .popover-header,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu .popover-header,
:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu .dropdown-header,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu .bs-actionsbox,
:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .bs-title-option {
  display: none !important;
}

/* Live-search field */
:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .bs-searchbox,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .bs-searchbox {
  position: relative;
  padding: 12px 12px 10px !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: #f8fbff;
}

:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .bs-searchbox::before,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .bs-searchbox::before {
  content: "\f002";
  font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
  font-weight: 900;
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: #1a73e8;
  font-size: 0.8125rem;
  pointer-events: none;
  z-index: 1;
}

:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .bs-searchbox .form-control,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .bs-searchbox .form-control {
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 14px 10px 40px !important;
  border: 1.5px solid rgba(26, 115, 232, 0.28) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #202124 !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  outline: none !important;
}

:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .bs-searchbox .form-control:focus,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .bs-searchbox .form-control:focus {
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.16) !important;
}

:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .bs-searchbox .form-control::placeholder,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .bs-searchbox .form-control::placeholder {
  color: #80868b !important;
  font-weight: 400 !important;
}

/* Options list */
:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu .inner,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu .inner {
  padding: 6px 0 !important;
}

:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu .inner.show,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu .inner.show {
  max-height: min(280px, 42vh) !important;
}

:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu li,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu li {
  margin: 0 !important;
}

:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu li a,
:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu li a.dropdown-item,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu li a,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu li a.dropdown-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px;
  min-height: 48px !important;
  margin: 0 6px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  color: #202124 !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  white-space: normal !important;
  background: transparent !important;
}

:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu li a .text,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu li a .text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu li a .text small,
:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu li a small.text-muted,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu li a .text small,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu li a small {
  display: block !important;
  margin-top: 2px !important;
  color: #5f6368 !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu li a:hover,
:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu li a:focus,
:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu li.active:not(.selected) a,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu li a:hover,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu li a:focus,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu li.active:not(.selected) a {
  background: #e8f0fe !important;
  color: #174ea6 !important;
}

:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu li.selected a,
:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu li.selected.active a,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu li.selected a,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu li.selected.active a {
  background: rgba(26, 115, 232, 0.14) !important;
  color: #0b57d0 !important;
  font-weight: 700 !important;
}

:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu li.selected a::after,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu li.selected a::after {
  content: "\f00c";
  font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
  font-weight: 900;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #1a73e8;
  font-size: 0.8125rem;
}

:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu li.selected a,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu li.selected a {
  position: relative;
  padding-right: 36px !important;
}

:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu li.disabled a,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu li.disabled a,
:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu .no-results,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu .no-results {
  color: #80868b !important;
  font-weight: 500 !important;
  background: transparent !important;
}

:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu .no-results,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu .no-results {
  margin: 8px 12px 12px !important;
  padding: 14px !important;
  border-radius: 12px !important;
  background: #f8f9fa !important;
  text-align: center !important;
  font-size: 0.8125rem !important;
}

/* Hide default checkmark glyph from bootstrap-select if present */
:is(#fullEmptyModal, #admit_student_modal) .md-link-parent-select .dropdown-menu li a span.check-mark,
:is(#fullEmptyModal, #admit_student_modal) .link_to_parent_information .dropdown-menu li a span.check-mark {
  display: none !important;
}

.md-link-parent__unlink-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.md-link-parent__unlink {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  gap: 8px;
  text-transform: none;
  box-shadow: none;
  background: #fce8e6 !important;
  color: #c5221f !important;
}

.md-link-parent__unlink:hover,
.md-link-parent__unlink:focus-visible {
  background: #f5c6c2 !important;
  color: #a50e0e !important;
}

.md-link-parent__unlink:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.md-link-parent__unlink-hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #5f6368;
}

.md-link-parent__preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.md-link-parent__preview-panel {
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.md-link-parent__preview-head {
  margin-bottom: 12px;
}

.md-link-parent__preview-overline {
  display: block;
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #1a73e8;
}

.md-link-parent__preview-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #202124;
  line-height: 1.25;
}

.md-link-parent__card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #e8f0fe 0%, #f8fbff 100%);
  border: 1px solid rgba(26, 115, 232, 0.16);
}

.md-link-parent__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #1a73e8;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.md-link-parent__card-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.md-link-parent__card-name {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #202124;
  line-height: 1.3;
}

.md-link-parent__phones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.md-link-parent__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  font-size: 0.6875rem;
}

.md-link-parent__phone > i {
  font-size: 0.625rem;
}

.md-link-parent__phone-empty {
  font-size: 0.75rem;
  color: #80868b;
}

.md-link-parent__siblings-block {
  margin-top: 14px;
}

.md-link-parent__siblings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.md-link-parent__siblings-title {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5f6368;
}

.md-link-parent__siblings {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.md-link-parent__sibling {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 12px;
  border: 1px solid #c0c4c8;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

.md-link-parent__sibling:last-child {
  border-bottom: 1px solid #c0c4c8;
}

.md-link-parent__sibling-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-top: 1px;
  border-radius: 12px;
  border: 1px solid rgba(26, 115, 232, 0.18);
  background: #e8f0fe;
  color: #1565c0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.md-link-parent__sibling-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.md-link-parent__sibling-name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #202124;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-link-parent__sibling-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 6px;
}

.md-link-parent__sibling-class,
.md-link-parent__sibling-school {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-link-parent__sibling-class {
  border: 1px solid #c0c4c8;
  background: #f7f9fc;
  color: #3c4043;
}

.md-link-parent__sibling-class > i,
.md-link-parent__sibling-school > i {
  flex-shrink: 0;
  font-size: 0.625rem;
  opacity: 0.85;
}

.md-link-parent__sibling-class > span,
.md-link-parent__sibling-school > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-link-parent__sibling-school {
  border: 1px solid rgba(26, 115, 232, 0.22);
  background: #e8f0fe;
  color: #0d47a1;
}

.md-link-parent__sibling--other {
  background: #fafbfc;
  border-color: #c0c4c8;
}

.md-link-parent__sibling--other .md-link-parent__sibling-avatar {
  background: #eef2f7;
  border-color: #c0c4c8;
  color: #5f6368;
}

.md-link-parent__sibling--other .md-link-parent__sibling-school {
  border-color: rgba(15, 118, 110, 0.22);
  background: #e0f2f1;
  color: #0f766e;
}

.md-link-parent__siblings-hint {
  margin: 0 0 8px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #5f6368;
}

.md-link-parent__siblings-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: #f8f9fa;
  color: #5f6368;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.md-link-parent__siblings-empty > i {
  color: #80868b;
}

.md-link-parent__empty {
  text-align: center;
  padding: 28px 18px;
  border: 1px dashed rgba(15, 23, 42, 0.14);
  border-radius: 16px;
  background: #fff;
}

.md-link-parent__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #f1f3f4;
  color: #5f6368;
  font-size: 1.25rem;
}

.md-link-parent__empty-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: #202124;
}

.md-link-parent__empty-text {
  margin: 0 auto;
  max-width: 280px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #5f6368;
}

.md-sl-form-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.md-sl-form-heading__overline {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a73e8;
}

.md-sl-form-heading__title {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: #202124;
  text-transform: none;
}

.md-sl-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: "Jost", sans-serif;
}

.md-sl-form__lead {
  margin: 0 0 16px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #5f6368;
}

.md-sl-form .mui-field--outlined .mui-field__input,
.md-sl-form .mui-field--outlined .mui-field__select {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #c0c4c8;
  border-radius: 12px;
  background: #fff;
  border-bottom: 1px solid #c0c4c8;
}

.md-sl-form .mui-field--outlined .mui-field__input:hover,
.md-sl-form .mui-field--outlined .mui-field__select:hover {
  background: #fff;
  border-color: #5f6368;
}

.md-sl-form .mui-field--outlined .mui-field__input:focus,
.md-sl-form .mui-field--outlined .mui-field__select:focus {
  background: #fff;
  border-color: #1a73e8;
  border-bottom-width: 1px;
  border-bottom-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.18);
  padding-bottom: 12px;
}

.md-sl-form .mui-field__helper {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #5f6368;
}

.md-sl-form__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #e8f0fe;
  color: #174ea6;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.md-sl-form__notice > i {
  margin-top: 2px;
  flex-shrink: 0;
}

.md-sl-form__notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: #1565c0;
  font-size: 0.875rem;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.12);
}

.md-sl-form__notice--security {
  margin-bottom: 16px;
  border: 1px solid rgba(21, 101, 192, 0.14);
  background: linear-gradient(135deg, #e8f0fe 0%, #e3f2fd 100%);
}

/* Student access permissions sheet */
.md-access__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #c0c4c8;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.md-access__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 14px 14px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.md-access__row:last-child {
  border-bottom: none;
}

.md-access__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.md-access__title {
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #202124;
}

.md-access__hint {
  font-size: 0.8125rem;
  font-weight: 450;
  line-height: 1.4;
  color: #5f6368;
}

.md-access__choice {
  margin: 0;
}

.md-access__choice .md-admit-choice__row {
  max-width: 220px;
}

@media (min-width: 420px) {
  .md-access__row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 16px;
  }

  .md-access__choice .md-admit-choice__row {
    width: 168px;
    max-width: none;
  }
}

.md-sl-form--password {
  gap: 0;
  padding: 2px 0 4px;
}

.md-sl-pw-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.md-sl-form--password .md-sl-pw {
  margin: 0;
}

.md-sl-pw .mui-field__label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.72);
}

.md-sl-pw__control {
  position: relative;
  display: flex;
  align-items: center;
}

.md-sl-pw__control .mui-field__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 48px 12px 14px;
  border: 1px solid rgba(13, 71, 161, 0.18);
  border-radius: 12px;
  background: #fff;
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  color: rgba(0, 0, 0, 0.87);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.md-sl-pw__control .mui-field__input:hover {
  border-color: rgba(13, 71, 161, 0.36);
}

.md-sl-pw__control .mui-field__input:focus {
  outline: none;
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.18);
}

.md-sl-pw__toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5f6368;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.md-sl-pw__toggle:hover,
.md-sl-pw__toggle:focus-visible {
  background: rgba(26, 115, 232, 0.08);
  color: #1565c0;
  outline: none;
}

.md-sl-pw__hint {
  margin: 6px 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(13, 71, 161, 0.62);
}

.md-sl-form__section {
  margin: 0 0 16px;
}

.md-sl-form__section-title {
  margin: 0 0 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5f6368;
}

.md-sl-form .mui-field {
  margin-bottom: 14px;
}

.md-sl-form .mui-field__select,
.md-sl-form select.mui-field__input {
  appearance: none;
  cursor: pointer;
}

.md-sl-form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  position: relative;
}

.md-sl-form-actions .md-btn-contained {
  width: 100%;
  min-height: 44px;
  text-transform: none;
  box-shadow: none;
  justify-content: center;
}

.md-sl-form-actions .attend-loader {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  z-index: 2;
}

.md-sl-form-actions--solo {
  grid-template-columns: 1fr;
}

/* Compact parent phone edit dialog */
#empty_modal:has(.md-parent-phone-edit) {
  max-height: min(70vh, 420px) !important;
}

#empty_modal:has(.md-parent-phone-edit) .modal-div {
  max-height: none;
  overflow: visible;
  padding: 16px 20px 12px;
}

.md-parent-phone-edit .md-sl-form__notice {
  margin-bottom: 14px;
}

.md-parent-phone-edit .mui-field {
  margin-bottom: 0;
}

/* Parent app devices modal */
.md-parent-devices {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: "Jost", sans-serif;
  color: #202124;
}

.md-parent-devices__metrics {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  padding: 14px 8px;
  border: 1px solid #c0c4c8;
  border-radius: 14px;
  background: #fff;
}

.md-parent-devices__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
}

.md-parent-devices__metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #0d47a1;
  font-variant-numeric: tabular-nums;
}

.md-parent-devices__metric-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #5f6368;
}

.md-parent-devices__metric-divider {
  width: 1px;
  align-self: stretch;
  margin: 4px 0;
  background: rgba(15, 23, 42, 0.1);
}

.md-parent-devices__lead {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 450;
  line-height: 1.45;
  color: #5f6368;
}

.md-parent-devices__lead strong {
  font-weight: 700;
  color: #3c4043;
}

.md-parent-devices__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 16px;
  text-align: center;
  color: #5f6368;
  border: 1px dashed rgba(15, 23, 42, 0.16);
  border-radius: 14px;
  background: #fafafa;
}

.md-parent-devices__empty > i {
  font-size: 1.5rem;
  color: #9aa0a6;
}

.md-parent-devices__empty > p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

.md-parent-devices__account {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.md-parent-devices__account + .md-parent-devices__account {
  padding-top: 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
}

.md-parent-devices__account-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.md-parent-devices__account-copy {
  min-width: 0;
  flex: 1;
}

.md-parent-devices__account-overline {
  display: block;
  margin: 0 0 2px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5f6368;
}

.md-parent-devices__account-name {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #202124;
}

.md-parent-devices__account-meta {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  color: #5f6368;
}

.md-parent-devices__last {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.md-parent-devices__last-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #80868b;
}

.md-parent-devices__last-value {
  font-weight: 650;
  color: #202124;
  font-variant-numeric: tabular-nums;
}

.md-parent-devices__sign-all {
  flex-shrink: 0;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(217, 48, 37, 0.28);
  border-radius: 999px;
  background: #fff;
  color: #c5221f;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.md-parent-devices__sign-all:hover,
.md-parent-devices__sign-all:focus-visible {
  background: #fce8e6;
  outline: none;
}

.md-parent-devices__none {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8f9fa;
  font-size: 0.8125rem;
  color: #5f6368;
}

.md-parent-devices__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid #c0c4c8;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.md-parent-devices__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

.md-parent-devices__row:last-child {
  border-bottom: none;
}

.md-parent-devices__row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e8f0fe;
  color: #1565c0;
  font-size: 1rem;
}

.md-parent-devices__row-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.md-parent-devices__row-title {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #202124;
}

.md-parent-devices__status {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: #5f6368;
}

.md-parent-devices__status--on {
  color: #188038;
}

.md-parent-devices__regs {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  color: #5f6368;
}

.md-parent-devices__row-action {
  flex-shrink: 0;
  margin: 0;
  padding: 8px 12px;
  border: none;
  border-radius: 999px;
  background: #fce8e6;
  color: #c5221f;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.md-parent-devices__row-action:hover,
.md-parent-devices__row-action:focus-visible {
  background: #f6aea9;
  outline: none;
}

.md-sl-form-table {
  width: 100%;
  margin: 0 0 12px;
  border-collapse: collapse;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  font-size: 0.8125rem;
}

.md-sl-form-table th,
.md-sl-form-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  color: #202124;
}

.md-sl-form-table th {
  background: #f8f9fa;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5f6368;
}

.md-sl-form-table tr:last-child td {
  border-bottom: none;
}

.md-sl-form-actions--single {
  grid-template-columns: 1fr;
}

/* Duplicates finder dialog */
#empty_modal:has(.md-sl-duplicates) {
  width: min(520px, calc(100vw - 24px)) !important;
  max-height: min(92vh, 760px) !important;
}

#empty_modal:has(.md-sl-duplicates) .content {
  max-height: min(68vh, 560px);
}

.md-sl-duplicates__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
}

.md-sl-duplicates__count.md-chip {
  height: auto;
  min-height: 24px;
  padding: 4px 10px;
}

.md-sl-duplicates__table-wrap {
  min-width: 0;
}

.md-sl-duplicates .dataTables_wrapper {
  width: 100%;
}

.md-sl-duplicates .dataTables_wrapper .dataTables_filter {
  float: none;
  text-align: left;
  margin: 0 0 12px;
}

.md-sl-duplicates .dataTables_wrapper .dataTables_filter label {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 0;
  color: transparent;
}

.md-sl-duplicates .dataTables_wrapper .dataTables_filter input {
  width: 100% !important;
  min-height: 44px;
  margin: 0 !important;
  padding: 10px 14px 10px 40px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  background: #f8f9fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 14px 50% no-repeat;
  color: #202124;
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: none;
}

.md-sl-duplicates .dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: #1a73e8;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.16);
}

.md-sl-duplicates .dataTables_wrapper .dataTables_info {
  float: none;
  padding: 10px 2px 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: #5f6368;
}

.md-sl-duplicates .dataTables_wrapper .dataTables_paginate {
  float: none;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 10px;
}

.md-sl-duplicates .dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  margin: 0 !important;
  padding: 0 10px !important;
  border: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #202124 !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  cursor: pointer;
}

.md-sl-duplicates .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.md-sl-duplicates .dataTables_wrapper .dataTables_paginate .paginate_button:focus {
  background: #f1f3f4 !important;
  color: #202124 !important;
}

.md-sl-duplicates .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #e8f0fe !important;
  color: #1557b0 !important;
}

.md-sl-duplicates .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.md-sl-duplicates .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: #9aa0a6 !important;
  background: transparent !important;
  cursor: default;
}

.md-sl-duplicates table.md-sl-form-table {
  margin-bottom: 0;
}

.md-sl-duplicates table.md-sl-form-table.dataTable {
  border-collapse: collapse !important;
}

.md-sl-duplicates table.md-sl-form-table thead th {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

.md-sl-duplicates table.md-sl-form-table tbody td {
  vertical-align: middle;
  font-weight: 550;
}

.md-sl-duplicates table.md-sl-form-table tbody tr:hover td {
  background: #f8f9fa;
}

.md-sl-duplicates__class.md-chip {
  max-width: 140px;
  height: auto;
  min-height: 22px;
  padding: 2px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-sl-duplicates .dataTables_empty {
  padding: 28px 16px !important;
  text-align: center !important;
  color: #5f6368 !important;
  font-weight: 500 !important;
}

.md-sl-form .bootstrap-select > .dropdown-toggle.md-admit-select__btn,
.md-sl-form .bootstrap-select > .dropdown-toggle {
  min-height: 48px;
  border: none !important;
  border-bottom: 1px solid var(--mui-outline, #c4c7c5) !important;
  border-radius: 4px 4px 0 0 !important;
  background: var(--mui-surface-dim, #f5f5f5) !important;
  color: #202124 !important;
  font-family: "Jost", sans-serif;
  box-shadow: none !important;
}

/* Upload passport modal (empty_modal shell) */
#empty_modal:has(.md-passport) {
  --md-passport-blue: #1565c0;
  --md-passport-blue-deep: #0d47a1;
  --md-passport-blue-mid: #1976d2;
  --md-passport-blue-soft: #e3f2fd;
  --md-passport-blue-ink: #0d47a1;
  --md-passport-surface: #f3f6fb;
  display: flex !important;
  flex-direction: column !important;
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  width: min(420px, calc(100vw - 24px)) !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: min(92vh, 640px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 18px 48px rgba(13, 71, 161, 0.22) !important;
  overflow: hidden !important;
  transform: translate(-50%, -50%) !important;
  font-family: "Jost", sans-serif;
}

#empty_modal:has(.md-passport) .menu-title {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 18px 12px 16px 20px;
  border-bottom: none;
  background:
    radial-gradient(120% 140% at 100% -10%, rgba(255, 255, 255, 0.22) 0%, transparent 55%),
    linear-gradient(135deg, var(--md-passport-blue-deep) 0%, var(--md-passport-blue) 55%, var(--md-passport-blue-mid) 100%);
}

#empty_modal:has(.md-passport) .menu-title > a.close-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

#empty_modal:has(.md-passport) .menu-title > a.close-menu:hover,
#empty_modal:has(.md-passport) .menu-title > a.close-menu:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
  outline: none;
}

#empty_modal:has(.md-passport) .menu-title > a.close-menu i {
  margin: 0;
}

#empty_modal:has(.md-passport) .modal-title {
  display: block;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
}

#empty_modal:has(.md-passport) .md-passport-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

#empty_modal:has(.md-passport) .md-passport-heading__overline {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.2;
}

#empty_modal:has(.md-passport) .md-passport-heading__title {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
  text-transform: none;
}

#empty_modal:has(.md-passport) .content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--md-passport-surface);
}

#empty_modal:has(.md-passport) .divider,
#empty_modal:has(.md-passport) .spinnerContent {
  display: none !important;
}

#empty_modal:has(.md-passport) .modal-div {
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px 20px 12px;
  background: var(--md-passport-surface);
}

#empty_modal.menu:has(.md-passport) .modal-footer,
#empty_modal.menu:has(.md-passport) .modal-footer.author-wrapper,
#empty_modal.menu:has(.md-passport) .modal-footer.p-0,
#empty_modal.menu:has(.md-passport) .modal-footer.mb-3,
#empty_modal:has(.md-passport) .modal-footer,
#empty_modal:has(.md-passport) .modal-footer.author-wrapper,
#empty_modal:has(.md-passport) .modal-footer.p-0.mb-3 {
  display: block !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px) + var(--md-sheet-footer-safe, 0px)) !important;
  border-top: 1px solid rgba(13, 71, 161, 0.1);
  background: #fff;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 -6px 16px rgba(13, 71, 161, 0.06);
}

.md-passport {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.md-passport__stage {
  position: relative;
  width: 168px;
  height: 200px;
}

.md-passport__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  border: 2px solid rgba(21, 101, 192, 0.28);
  background:
    linear-gradient(180deg, #e8f1fb 0%, #d6e6f8 100%);
  box-shadow:
    0 0 0 4px rgba(227, 242, 253, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.md-passport__img,
#empty_modal:has(.md-passport) .p_image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  border-radius: 0 !important;
}

.md-passport__spinner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  border-radius: 16px;
  background: rgba(227, 242, 253, 0.72);
  backdrop-filter: blur(2px);
}

.md-passport__spinner .md-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
}

.md-passport__hint {
  margin: 0;
  max-width: 280px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  color: #456789;
}

.md-passport-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.md-passport-actions__file .bootstrap-filestyle,
.md-passport-actions__file .group-span-filestyle {
  display: block;
  width: 100%;
}

.md-passport-actions__file .bootstrap-filestyle .btn,
.md-passport-actions__file label.btn,
.md-passport-actions__file .md-passport-choose {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100% !important;
  min-height: 44px;
  margin: 0 !important;
  padding: 0 16px !important;
  border: none !important;
  border-radius: 10px !important;
  background: #e3f2fd !important;
  color: #0d47a1 !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 650 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  position: relative !important;
}

.md-passport-actions__file .bootstrap-filestyle .btn:hover,
.md-passport-actions__file label.btn:hover,
.md-passport-actions__file .md-passport-choose:hover {
  background: #d0e7fb !important;
  color: #0d47a1 !important;
}

/* Selected file count — high-contrast chip on Choose photo */
.md-passport-actions__file .bootstrap-filestyle .btn .badge,
.md-passport-actions__file label.btn .badge,
.md-passport-actions__file .md-passport-choose .badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px;
  min-width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 2px solid #fff !important;
  background: #0d47a1 !important;
  color: #fff !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  vertical-align: middle !important;
  box-shadow:
    0 0 0 1px rgba(13, 71, 161, 0.4),
    0 2px 8px rgba(13, 71, 161, 0.3) !important;
}

.md-passport-actions__file .bootstrap-filestyle .btn .badge::after,
.md-passport-actions__file label.btn .badge::after,
.md-passport-actions__file .md-passport-choose .badge::after {
  content: "photo";
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  opacity: 0.95;
}

.md-passport-actions__file .bootstrap-filestyle .btn:has(.badge),
.md-passport-actions__file label.btn:has(.badge),
.md-passport-actions__file .md-passport-choose:has(.badge) {
  justify-content: space-between !important;
  padding-left: 18px !important;
  padding-right: 10px !important;
  background: #c5e1f8 !important;
  color: #0d47a1 !important;
  box-shadow: inset 0 0 0 1.5px rgba(13, 71, 161, 0.35) !important;
}

.md-passport-actions__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.md-passport-actions__btns .md-btn-contained {
  width: 100%;
  min-height: 44px;
  text-transform: none;
  box-shadow: none;
  background: #1565c0;
  color: #fff;
}

.md-passport-actions__btns .md-btn-contained:hover,
.md-passport-actions__btns .md-btn-contained:focus-visible {
  background: #0d47a1;
  color: #fff;
}

.md-passport-actions__btns .remove_image.md-btn-contained--tonal {
  background: #fce8e6;
  color: #d93025;
}

.md-passport-actions__btns .remove_image.md-btn-contained--tonal:hover,
.md-passport-actions__btns .remove_image.md-btn-contained--tonal:focus-visible {
  background: #f5c6c2;
  color: #b3261e;
}

/* Admit / register-parent full-screen sheet */
#admit_student_modal.md-sl-admit-sheet,
#create_parent_modal.md-sl-admit-sheet,
#employ_staff_modal.md-sl-admit-sheet,
#create_event_modal.md-sl-admit-sheet,
#generateWithAIModal.md-sl-admit-sheet,
#create_topic.md-sl-admit-sheet {
  --md-admit-sheet-height: 100vh;
  --md-admit-sheet-height: 100dvh;
  display: none !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--md-admit-sheet-height) !important;
  min-height: var(--md-admit-sheet-height) !important;
  max-height: var(--md-admit-sheet-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 1300 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 0;
  pointer-events: none;
}

#admit_student_modal.md-sl-admit-sheet.menu-active,
#create_parent_modal.md-sl-admit-sheet.menu-active,
#employ_staff_modal.md-sl-admit-sheet.menu-active,
#create_event_modal.md-sl-admit-sheet.menu-active,
#generateWithAIModal.md-sl-admit-sheet.menu-active,
#create_topic.md-sl-admit-sheet.menu-active {
  display: flex !important;
  flex-direction: column !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: var(--md-admit-sheet-height) !important;
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 1 !important;
  pointer-events: all !important;
}

#admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__panel,
#create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__panel,
#employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__panel,
#create_event_modal.md-sl-admit-sheet .md-timeline-sheet__panel,
#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__panel,
#create_topic.md-sl-admit-sheet .md-timeline-sheet__panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  background: #fff;
  font-family: "Jost", sans-serif;
  overflow: hidden;
}

#admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__handle,
#create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__handle,
#employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__handle ,
#create_event_modal.md-sl-admit-sheet .md-timeline-sheet__handle,
#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__handle,
#create_topic.md-sl-admit-sheet .md-timeline-sheet__handle {
  display: none;
}

#admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__header,
#create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__header,
#employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__header ,
#create_event_modal.md-sl-admit-sheet .md-timeline-sheet__header,
#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__header,
#create_topic.md-sl-admit-sheet .md-timeline-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 8px 12px 20px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

#admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__overline,
#create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__overline,
#employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__overline ,
#create_event_modal.md-sl-admit-sheet .md-timeline-sheet__overline,
#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__overline,
#create_topic.md-sl-admit-sheet .md-timeline-sheet__overline {
  display: block;
  margin: 0 0 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a73e8;
}

#admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__title,
#create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__title,
#employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__title ,
#create_event_modal.md-sl-admit-sheet .md-timeline-sheet__title,
#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__title,
#create_topic.md-sl-admit-sheet .md-timeline-sheet__title {
  margin: 0 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #202124 !important;
  text-transform: none !important;
}

#admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__close,
#create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__close,
#employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__close ,
#create_event_modal.md-sl-admit-sheet .md-timeline-sheet__close,
#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__close,
#create_topic.md-sl-admit-sheet .md-timeline-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #5f6368;
  cursor: pointer;
}

#admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__loader,
#create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__loader,
#employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__loader ,
#create_event_modal.md-sl-admit-sheet .md-timeline-sheet__loader,
#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__loader,
#create_topic.md-sl-admit-sheet .md-timeline-sheet__loader {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}

#admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__loader.d-none,
#create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__loader.d-none,
#employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__loader.d-none ,
#create_event_modal.md-sl-admit-sheet .md-timeline-sheet__loader.d-none,
#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__loader.d-none,
#create_topic.md-sl-admit-sheet .md-timeline-sheet__loader.d-none {
  display: none !important;
}

#admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__body,
#create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__body,
#employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__body,
#create_event_modal.md-sl-admit-sheet .md-timeline-sheet__body,
#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__body,
#create_topic.md-sl-admit-sheet .md-timeline-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 16px 16px 8px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: #f3f5f8;
}

html.is-webview #admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__body,
html.is-webview #create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__body,
html.is-webview #employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__body,
html.is-webview #create_event_modal.md-sl-admit-sheet .md-timeline-sheet__body,
html.is-webview #generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__body,
html.is-webview #create_topic.md-sl-admit-sheet .md-timeline-sheet__body,
body.is-webview #admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__body,
body.is-webview #create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__body,
body.is-webview #employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__body,
body.is-webview #create_event_modal.md-sl-admit-sheet .md-timeline-sheet__body,
body.is-webview #generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__body,
body.is-webview #create_topic.md-sl-admit-sheet .md-timeline-sheet__body {
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain;
}

#admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__footer,
#create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__footer,
#employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__footer,
#create_event_modal.md-sl-admit-sheet .md-timeline-sheet__footer,
#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__footer,
#create_topic.md-sl-admit-sheet .md-timeline-sheet__footer {
  flex-shrink: 0;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px calc(12px + var(--md-sheet-footer-safe, 0px));
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

#admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__footer .md-sl-form-actions,
#create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__footer .md-sl-form-actions,
#employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__footer .md-sl-form-actions,
#create_event_modal.md-sl-admit-sheet .md-timeline-sheet__footer .md-sl-form-actions,
#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__footer .md-sl-form-actions,
#create_topic.md-sl-admit-sheet .md-timeline-sheet__footer .md-sl-form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

#admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__footer:not(:has(.md-sl-form-actions)),
#create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__footer:not(:has(.md-sl-form-actions)),
#employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__footer:not(:has(.md-sl-form-actions)),
#create_event_modal.md-sl-admit-sheet .md-timeline-sheet__footer:not(:has(.md-sl-form-actions)),
#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__footer:not(:has(.md-sl-form-actions)),
#create_topic.md-sl-admit-sheet .md-timeline-sheet__footer:not(:has(.md-sl-form-actions)) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__footer .md-btn-contained,
#create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__footer .md-btn-contained,
#employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__footer .md-btn-contained,
#create_event_modal.md-sl-admit-sheet .md-timeline-sheet__footer .md-btn-contained,
#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__footer .md-btn-contained,
#create_topic.md-sl-admit-sheet .md-timeline-sheet__footer .md-btn-contained {
  width: 100%;
  min-height: 44px;
  text-transform: none;
  box-shadow: none;
}

/* Dropdowns use data-container="body" — do not unlock sheet overflow while open
   (that froze scroll when subclass options were empty). Menus are z-indexed on body. */

#create_parent_modal .bootstrap-select .dropdown-menu,
#admit_student_modal .bootstrap-select .dropdown-menu,
#create_topic .bootstrap-select .dropdown-menu,
body:has(#create_parent_modal.menu-active) > .dropdown-menu,
body:has(#create_parent_modal.menu-active) .bootstrap-select .dropdown-menu,
body:has(#admit_student_modal.menu-active) > .dropdown-menu,
body:has(#admit_student_modal.menu-active) .bootstrap-select .dropdown-menu,
body:has(#create_topic.menu-active) > .dropdown-menu,
body:has(#create_topic.menu-active) .bootstrap-select .dropdown-menu,
body > .bootstrap-select .dropdown-menu.show {
  z-index: 2100 !important;
}

/* Shared admit / edit student form layout */
.md-admit-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
  margin: 0 auto;
  font-family: "Jost", sans-serif;
}

.md-admit-step {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}

.md-admit-section {
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.md-admit-section__head {
  margin: 0 0 14px;
}

.md-admit-section__overline {
  display: block;
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a73e8;
}

.md-admit-section__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #202124;
  line-height: 1.3;
}

.md-admit-section__lead {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  color: #5f6368;
}

.md-admit-error:empty {
  display: none;
}

.md-admit-error:not(:empty) {
  margin: 0 0 14px;
}

.md-admit-dup {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 40px 14px 14px;
  border-radius: 12px;
  border: 1px solid rgba(197, 34, 31, 0.18);
  background: linear-gradient(135deg, #fce8e6 0%, #fff8f7 100%);
  color: #5f2120;
  box-shadow: 0 1px 2px rgba(197, 34, 31, 0.06);
  animation: md-admit-dup-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes md-admit-dup-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-admit-dup {
    animation: none;
  }
}

.md-admit-dup__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(197, 34, 31, 0.12);
  color: #c5221f;
  font-size: 1rem;
}

.md-admit-dup__copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.md-admit-dup__overline {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c5221f;
  line-height: 1.2;
}

.md-admit-dup__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #3c1514;
  line-height: 1.25;
  word-break: break-word;
}

.md-admit-dup__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.md-admit-dup__chips .md-chip {
  font-size: 0.6875rem;
  font-weight: 700;
}

.md-admit-dup__hint {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  font-weight: 450;
  line-height: 1.4;
  color: #7a3a38;
}

.md-admit-dup__dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #c5221f;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.md-admit-dup__dismiss:hover,
.md-admit-dup__dismiss:focus-visible {
  background: rgba(197, 34, 31, 0.1);
  outline: none;
}

.md-admit-dup__dismiss i {
  font-size: 0.8125rem;
}

#create_parent_modal .md-parent-phone-wrap,
#admit_student_modal .md-parent-phone-wrap {
  position: relative;
}

#create_parent_modal .md-parent-phone-status,
#admit_student_modal .md-parent-phone-status {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-family: "Jost", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}

#create_parent_modal .md-parent-phone-field.is-checking .md-parent-phone-status,
#create_parent_modal .md-parent-phone-field.is-taken .md-parent-phone-status,
#create_parent_modal .md-parent-phone-field.is-available .md-parent-phone-status,
#admit_student_modal .md-parent-phone-field.is-checking .md-parent-phone-status,
#admit_student_modal .md-parent-phone-field.is-taken .md-parent-phone-status,
#admit_student_modal .md-parent-phone-field.is-available .md-parent-phone-status {
  display: inline-flex;
}

#create_parent_modal .md-parent-phone-field.is-checking .md-parent-phone-status,
#admit_student_modal .md-parent-phone-field.is-checking .md-parent-phone-status {
  color: #5f6368;
}

#create_parent_modal .md-parent-phone-field.is-taken .md-parent-phone-status,
#admit_student_modal .md-parent-phone-field.is-taken .md-parent-phone-status {
  color: #c5221f;
}

#create_parent_modal .md-parent-phone-field.is-available .md-parent-phone-status,
#admit_student_modal .md-parent-phone-field.is-available .md-parent-phone-status {
  color: #137333;
}

#create_parent_modal .md-parent-phone-check.is-checking,
#admit_student_modal .md-parent-phone-check.is-checking {
  border-color: #9aa0a6 !important;
}

#create_parent_modal .md-parent-phone-check.is-taken,
#admit_student_modal .md-parent-phone-check.is-taken {
  border-color: #d93025 !important;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12) !important;
}

#create_parent_modal .md-parent-phone-check.is-available,
#admit_student_modal .md-parent-phone-check.is-available {
  border-color: #137333 !important;
}

#create_parent_modal .register_parent[disabled],
#create_parent_modal .register_parent[aria-disabled="true"],
#admit_student_modal .admit_student[disabled],
#admit_student_modal .admit_student[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

/* Parents sheet: mode switch, search, results */
#create_parent_modal .md-parent-mode {
  margin: 0 0 16px;
}

#create_parent_modal .md-parent-edit-back {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: #1557b0;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#create_parent_modal .md-parent-edit-back:hover,
#create_parent_modal .md-parent-edit-back:focus-visible {
  color: #0d47a1;
  outline: none;
}

#create_parent_modal .md-parent-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

#create_parent_modal .md-parent-search__field {
  margin-bottom: 0;
}

#create_parent_modal .md-parent-search__btn {
  min-height: 48px;
  padding-left: 18px;
  padding-right: 18px;
  white-space: nowrap;
}

#create_parent_modal .md-parent-search__status {
  min-height: 1.25rem;
  margin: 0 0 10px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--md-text-secondary, rgba(0, 0, 0, 0.6));
}

#create_parent_modal .md-parent-search__results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#create_parent_modal .md-parent-result {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 14px;
  border: 1px solid #c0c4c8;
  border-radius: 12px;
  background: #fff;
}

#create_parent_modal .md-parent-result__name {
  margin: 0 0 4px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #0f172a;
}

#create_parent_modal .md-parent-result__phone,
#create_parent_modal .md-parent-result__meta {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--md-text-secondary, rgba(0, 0, 0, 0.6));
}

#create_parent_modal .md-parent-result__meta {
  margin-top: 2px;
}

#create_parent_modal .md-parent-result__edit {
  min-height: 40px;
  padding-left: 14px;
  padding-right: 14px;
  white-space: nowrap;
}

@media (max-width: 480px) {
  #create_parent_modal .md-parent-search {
    grid-template-columns: 1fr;
  }

  #create_parent_modal .md-parent-search__btn {
    width: 100%;
  }

  #create_parent_modal .md-parent-result {
    grid-template-columns: 1fr;
  }

  #create_parent_modal .md-parent-result__edit {
    width: 100%;
  }
}

.md-admit-grid {
  display: grid;
  gap: 0 12px;
}

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

.md-admit-field {
  margin-bottom: 12px;
}

.md-admit-field--area .mui-field__input {
  min-height: 96px;
  resize: vertical;
  padding-top: 12px;
}

.md-admit-req {
  color: #d93025;
  font-weight: 700;
}

.md-admit-select {
  margin-bottom: 12px;
  min-width: 0;
}

.md-admit-select__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.md-admit-select__row .bootstrap-select {
  flex: 1 1 auto;
  min-width: 0;
}

.md-admit-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.md-admit-spinner.d-none,
.md-admit-select__row .load_subclass.d-none,
.md-admit-select__row .load_hostel.d-none,
.md-admit-select__row .load_room.d-none {
  display: none !important;
}

.md-admit-spinner .md-loading__spinner {
  width: 22px;
  height: 22px;
  border-width: 2px;
}

.md-admit-form .bootstrap-select:not(.md-link-parent-select) > .dropdown-toggle.md-admit-select__btn,
.md-admit-form .bootstrap-select:not(.md-link-parent-select) > .dropdown-toggle {
  min-height: 48px !important;
  border: none !important;
  border-bottom: 1px solid var(--mui-outline, #c4c7c5) !important;
  border-radius: 4px 4px 0 0 !important;
  background: var(--mui-surface-dim, #f5f5f5) !important;
  color: #202124 !important;
  font-family: "Jost", sans-serif !important;
  font-size: 1rem !important;
  box-shadow: none !important;
  text-align: left !important;
}

.md-admit-form .bootstrap-select:not(.md-link-parent-select) > .dropdown-toggle.md-admit-select__btn:focus,
.md-admit-form .bootstrap-select:not(.md-link-parent-select) > .dropdown-toggle:focus {
  border-bottom-width: 2px !important;
  border-bottom-color: #1a73e8 !important;
  outline: none !important;
}

.md-create-topic-form .mui-field__helper {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #5f6368;
}

.md-create-topic-form__editor .note-editor.note-frame {
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.md-create-topic-form__editor .note-editor.note-frame .note-toolbar {
  background: #f8f9fa;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

@media (max-width: 680px) {
  .md-create-topic-form__editor .note-editor.note-frame .note-toolbar {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    max-height: 64px;
    overflow: hidden;
    padding: 4px 6px !important;
  }

  .md-create-topic-form__editor .note-toolbar > .note-btn-group {
    margin: 0 !important;
  }

  .md-create-topic-form__editor .note-toolbar .note-btn {
    height: 28px;
    padding: 2px 6px !important;
  }
}

.md-admit-switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 0;
  padding: 14px 16px;
  border: 1px solid #c0c4c8;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.md-admit-switch:hover {
  border-color: rgba(26, 115, 232, 0.35);
  background: #f8fbff;
}

.md-admit-switch:has(.md-admit-switch__input:checked) {
  border-color: rgba(26, 115, 232, 0.35);
  background: #f6f9fe;
  box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.08);
}

.md-admit-switch:has(.md-admit-switch__input:focus-visible) {
  box-shadow: inset 0 0 0 2px rgba(26, 115, 232, 0.45);
}

.md-admit-switch__input,
.md-admit-switch .form-check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.md-admit-switch__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  order: 0;
}

.md-admit-switch__title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #202124;
}

.md-admit-switch__hint {
  font-size: 0.75rem;
  color: #5f6368;
  line-height: 1.35;
}

.md-admit-switch__control {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  order: 1;
}

.md-admit-switch__track {
  display: block;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-admit-switch__thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fafafa;
  box-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  transform: translate(0, -50%);
  transition:
    left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-admit-switch:has(.md-admit-switch__input:checked) .md-admit-switch__track {
  background: rgba(26, 115, 232, 0.5);
}

.md-admit-switch:has(.md-admit-switch__input:checked) .md-admit-switch__thumb {
  left: 22px;
  background: #1a73e8;
  box-shadow:
    0px 2px 1px -1px rgba(26, 115, 232, 0.35),
    0px 1px 1px 0px rgba(26, 115, 232, 0.24),
    0px 1px 3px 0px rgba(26, 115, 232, 0.2);
}

.md-admit-switch .icon-check-1,
.md-admit-switch .icon-check-2 {
  display: none !important;
}

.md-admit-choice {
  margin: 0 0 14px;
}

.md-admit-choice > .mui-field__label {
  display: block;
  margin-bottom: 8px;
}

.md-admit-choice__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 0;
  padding: 3px;
  border: 1px solid #c0c4c8;
  border-radius: 12px;
  background: #f1f3f4;
  overflow: hidden;
}

.md-admit-choice__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-admit-choice__input,
.md-admit-choice__option .form-check-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.md-admit-choice__label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #5f6368;
  line-height: 1.2;
}

.md-admit-choice__option:hover {
  background: rgba(255, 255, 255, 0.55);
}

.md-admit-choice__option:has(input:checked) {
  background: #fff;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 1px 3px rgba(15, 23, 42, 0.06);
}

.md-admit-choice__option:has(input:checked) .md-admit-choice__label {
  color: #1a73e8;
}

.md-admit-choice__option:has(input:focus-visible) {
  outline: 2px solid rgba(26, 115, 232, 0.45);
  outline-offset: 1px;
}

.md-admit-choice__option .icon-check-1,
.md-admit-choice__option .icon-check-2 {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .md-admit-switch,
  .md-admit-switch__track,
  .md-admit-switch__thumb,
  .md-admit-choice__option {
    transition: none;
  }
}

.md-admit-parent-fields {
  margin-top: 4px;
  padding-top: 4px;
}

#fullEmptyModal:has(.md-admit-form) .md-timeline-sheet__body.modal-div {
  padding: 14px 14px 8px;
  background: #f3f5f8;
}

#fullEmptyModal:has(.md-admit-form) .md-timeline-sheet__footer.modal-footer {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-top: auto;
  gap: 0;
  padding: 12px 16px calc(12px + var(--md-sheet-footer-safe, 0px));
  position: relative;
  bottom: auto;
  box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
  background: #fff;
  z-index: 30;
}

#fullEmptyModal:has(.md-admit-form) .md-timeline-sheet__footer .md-sl-form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  position: relative;
}

#fullEmptyModal:has(.md-admit-form) .md-timeline-sheet__footer.modal-footer:not(:has(.md-sl-form-actions)) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#fullEmptyModal:has(.md-admit-form) .md-timeline-sheet__footer .md-btn-contained {
  width: 100%;
}

#fullEmptyModal:has(.md-admit-form) .md-timeline-sheet__footer script {
  display: none !important;
}

@media (max-width: 420px) {
  .md-admit-grid--2 {
    grid-template-columns: 1fr;
  }
}

#admit_student_modal.md-sl-admit-sheet fieldset.step > h4,
#create_parent_modal.md-sl-admit-sheet fieldset.step > h4,
#employ_staff_modal.md-sl-admit-sheet fieldset.step > h4 ,
#create_event_modal.md-sl-admit-sheet fieldset.step > h4,
#generateWithAIModal.md-sl-admit-sheet fieldset.step > h4,
#create_topic.md-sl-admit-sheet fieldset.step > h4 {
  margin: 0 0 16px !important;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #202124;
  text-align: left !important;
}

@media (min-width: 600px) {
  .md-sl-sheet.menu {
    left: 50% !important;
    right: auto !important;
    width: 420px !important;
    margin-left: -210px !important;
  }
}


/* =============================================================================
   RECOVERED PAGE SECTIONS (from agent transcripts + /tmp/recovered-zapapp-session.css)
   Appended after timeline + student-list sheets. Existing content above preserved.
   ============================================================================= */

/* >>> recovered: mail-base (Pattern B) <<< */
/* ── Mail page (Pattern B — timeline feed) ── */

html.mail-app .header.header-fixed,
body.mail-app .header.header-fixed,
.is-webview.mail-app .header.header-fixed,
.is-webview body.mail-app .header.header-fixed {
  display: none !important;
}

body.mail-app {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  min-height: 100% !important;
  overflow: visible !important;
  -webkit-overflow-scrolling: touch;
}

body.mail-app #page,
body.mail-app .md-page.mail-page,
body.mail-app .md-page.mail-page .mail-feed.page-content,
body.mail-app .md-page.mail-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.mail-page {
  --md-header-offset: 0px;
  --md-mail-toolbar-height: 108px;
  --md-mail-toolbar-offset: var(--md-mail-toolbar-height);
  --mail-blue: #1a73e8;
  --mail-blue-dark: #1557b0;
  --mail-blue-light: #4285f4;
  --mail-blue-container: #e8f0fe;
  --mail-teal: #0f766e;
  --mail-teal-dark: #0d5e58;
  --mail-ink: #202124;
  --mail-muted: #5f6368;
  --mail-feed-bg: #eef1f4;
  --mail-card-radius: 8px;
  --mail-card-border: #c0c4c8;
  --mail-card-border-hover: #9aa0a6;
  --mail-card-shadow: none;
  --md-soft-pill-bg: var(--mail-blue-container);
  --md-soft-pill-border: rgba(26, 115, 232, 0.18);
  --md-soft-pill-primary: var(--mail-blue);
  --md-soft-pill-overline: rgba(21, 87, 176, 0.72);
  --md-soft-pill-ink: #0d47a1;
  --mui-primary: var(--mail-blue);
  --mui-primary-dark: var(--mail-blue-dark);
  --mui-primary-light: var(--mail-blue-light);
  --mui-primary-container: var(--mail-blue-container);
  --mui-font: "Jost", sans-serif;
  --md-font: "Jost", sans-serif;
  font-family: "Jost", sans-serif !important;
  background: var(--mail-feed-bg);
  min-height: 100vh;
}

.mail-page a,
.mail-page button,
.mail-page .mui-btn,
.mail-page .md-btn-contained,
.mail-page .md-ripple {
  touch-action: manipulation;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mail-page .page-title-clear {
  display: none !important;
}

.mail-page .mail-feed.page-content,
.mail-page .page-content,
.mail-page .mail-feed.md-feed {
  max-width: none !important;
  width: 100%;
  margin: 0 !important;
  padding-top: calc(var(--md-mail-toolbar-offset) + var(--app-safe-top, 0px) + 8px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 61px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 16px) !important;
  background: var(--mail-feed-bg) !important;
  overflow: visible !important;
}

/* Toolbar */
.mail-page .md-mail-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--mui-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)) !important;
  background: #fff !important;
  background-image: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none !important;
  overflow: visible !important;
}

.mail-page .md-mail-toolbar .content,
.mail-page .md-mail-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 6px 12px 8px !important;
  box-sizing: border-box;
}

.mail-page .md-mail-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.mail-page .md-mail-toolbar__title {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--mail-ink);
  text-transform: none;
}

.mail-page .md-mail-toolbar__chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.mail-page .md-mail-toolbar__chip {
  display: flex;
  width: 100%;
  flex: none;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}

.mail-page .md-mail-toolbar__chip-avatar {
  width: 32px;
  height: 32px;
  font-size: 0.8125rem;
}

.mail-page .md-mail-toolbar__reload,
.mail-page .md-mail-toolbar__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: var(--mail-ink);
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mail-page .md-mail-toolbar__reload {
  margin-left: auto;
}

.mail-page .md-mail-toolbar__back:focus-visible,
.mail-page .md-mail-toolbar__reload:focus-visible {
  outline: 2px solid var(--mail-blue);
  outline-offset: 2px;
}

.mail-page .md-mail-toolbar__reload:hover,
.mail-page .md-mail-toolbar__reload:focus-visible,
.mail-page .md-mail-toolbar__back:hover,
.mail-page .md-mail-toolbar__back:focus-visible {
  background: #e8eaed;
  color: var(--mail-ink);
}

.mail-page .md-mail-toolbar .md-toolbar__row {
  gap: 6px;
}

.mail-page .md-mail-toolbar__actions,
.mail-page .mui-toolbar__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
  width: 100%;
}

.mail-page .md-mail-toolbar__actions .mui-btn,
.mail-page .md-mail-toolbar__actions .md-btn-contained {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 6px;
  gap: 4px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  box-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-page .md-mail-toolbar__actions .mui-btn > i,
.mail-page .md-mail-toolbar__actions .md-btn-contained > i {
  flex-shrink: 0;
  font-size: 0.75rem;
}

@media (min-width: 400px) {
  .mail-page .md-mail-toolbar__actions .mui-btn,
  .mail-page .md-mail-toolbar__actions .md-btn-contained {
    padding: 8px 12px;
    gap: 8px;
    font-size: 0.875rem;
  }

  .mail-page .md-mail-toolbar__actions .mui-btn > i,
  .mail-page .md-mail-toolbar__actions .md-btn-contained > i {
    font-size: inherit;
  }
}

/* Filter — soft Material light blue */
.mail-page .md-mail-toolbar__actions .filter_mail_action {
  background: #e3f2fd;
  color: #0d47a1;
  border: 1px solid #90caf9;
}

.mail-page .md-mail-toolbar__actions .filter_mail_action:hover,
.mail-page .md-mail-toolbar__actions .filter_mail_action:focus-visible {
  background: #d6eafc;
  border-color: #64b5f6;
  color: #0d47a1;
  outline: none;
}

/* Mark read — cooler sky light blue */
.mail-page .md-mail-toolbar__actions .mark_all_mail_read {
  background: #e8f4fc;
  color: #0b5f8a;
  border: 1px solid #b3d9ef;
}

.mail-page .md-mail-toolbar__actions .mark_all_mail_read:hover,
.mail-page .md-mail-toolbar__actions .mark_all_mail_read:focus-visible {
  background: #d9eef9;
  border-color: #7ec8e8;
  color: #0b5f8a;
  outline: none;
}

/* Compose — deeper powder blue (primary action) */
.mail-page .md-mail-toolbar__actions .create_mail_button {
  background: #d2e3fc;
  color: #174ea6;
  border: 1px solid #8ab4f8;
}

.mail-page .md-mail-toolbar__actions .create_mail_button:hover,
.mail-page .md-mail-toolbar__actions .create_mail_button:focus-visible {
  background: #c2d7f8;
  border-color: #669df6;
  color: #174ea6;
  outline: none;
}

/* Search */
.mail-page .md-mail-live-refresh {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 680px;
  margin: 0 auto 10px;
  padding: 10px 14px;
  border: 1px solid rgba(26, 115, 232, 0.28);
  border-radius: 12px;
  background: linear-gradient(180deg, #e8f0fe 0%, #f7fbff 100%);
  color: #174ea6;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(23, 78, 166, 0.08);
}

.mail-page .md-mail-live-refresh.is-visible {
  display: flex;
}

.mail-page .md-mail-live-refresh__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1a73e8;
  box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.45);
  animation: md-mail-live-refresh-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

.mail-page .md-mail-live-refresh__text {
  flex: 1 1 auto;
  min-width: 0;
}

.mail-page .md-mail-live-refresh__icon {
  flex-shrink: 0;
  opacity: 0.85;
}

.mail-page .md-mail-live-refresh:hover,
.mail-page .md-mail-live-refresh:focus-visible {
  background: #e8f0fe;
  outline: none;
  border-color: rgba(26, 115, 232, 0.45);
}

@keyframes md-mail-live-refresh-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.45);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 0 6px rgba(26, 115, 232, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mail-page .md-mail-live-refresh__dot {
    animation: none;
  }
}

.mail-page .md-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 680px;
  margin: 0 auto 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.mail-page .md-search-field__icon {
  color: rgba(0, 0, 0, 0.45);
  font-size: 0.875rem;
}

.mail-page .md-search-field__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  color: rgba(0, 0, 0, 0.87);
}

.mail-page .md-search-field__input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

.mail-page .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Feed table → card list */
.mail-page .md-mail-table,
.mail-page .md-mail-table.dataTable {
  display: block !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
}

.mail-page .md-mail-table thead {
  display: none;
}

.mail-page .md-mail-table tbody {
  display: block !important;
  width: 100%;
}

.mail-page .md-mail-list {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
}

.mail-page .dataTables_wrapper {
  max-width: 680px;
  margin: 0 auto;
}

.mail-page .md-mail-list .dataTables_processing {
  display: none !important;
}

.mail-page .md-mail-list table#student.is-booting {
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
  margin: 0 !important;
}

.mail-page .md-mail-list .dataTables_wrapper.is-loading table#student:not(.is-booting) {
  opacity: 0.28;
  pointer-events: none;
}

.mail-page .md-mail-list .dataTables_wrapper .dataTables_length,
.mail-page .md-mail-list .dataTables_wrapper .dataTables_filter,
.mail-page .md-mail-list .dataTables_wrapper .dataTables_info,
.mail-page .md-mail-list .dataTables_wrapper .dataTables_paginate {
  display: none !important;
}

.mail-page .md-mail-table tbody td.dataTables_empty {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.mail-page .md-mail-loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 8px;
}

.mail-page .md-mail-loading[hidden],
.mail-page .md-mail-loading[aria-hidden="true"] {
  display: none !important;
}

.mail-page .md-mail-loading__banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(26, 115, 232, 0.16);
  background:
    linear-gradient(135deg, rgba(26, 115, 232, 0.08) 0%, transparent 48%),
    linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%);
  box-shadow: 0 4px 14px rgba(15, 28, 46, 0.04);
}

.mail-page .md-mail-loading__pulse {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--mail-blue);
  box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.4);
  animation: md-mail-loading-pulse 1.4s ease-out infinite;
}

.mail-page .md-mail-loading__pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(26, 115, 232, 0.28);
  animation: md-mail-loading-ring 1.4s ease-out infinite;
}

.mail-page .md-mail-loading__copy {
  min-width: 0;
}

.mail-page .md-mail-loading__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mail-ink);
}

.mail-page .md-mail-loading__text {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--mail-muted);
}

.mail-page .md-mail-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mail-page .md-mail-skeleton__card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px 10px;
  border-radius: var(--mail-card-radius);
  border: 1.5px solid var(--mail-card-border);
  background: #fff;
}

.mail-page .md-mail-skeleton__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(90deg, #e8eef5 0%, #f5f8fb 50%, #e8eef5 100%);
  background-size: 200% 100%;
  animation: md-mail-skeleton-shimmer 1.2s ease-in-out infinite;
}

.mail-page .md-mail-skeleton__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.mail-page .md-mail-skeleton__line {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8eef5 0%, #f5f8fb 50%, #e8eef5 100%);
  background-size: 200% 100%;
  animation: md-mail-skeleton-shimmer 1.2s ease-in-out infinite;
}

.mail-page .md-mail-skeleton__line--name {
  width: 42%;
  height: 11px;
}

.mail-page .md-mail-skeleton__line--subject {
  width: 78%;
}

.mail-page .md-mail-skeleton__line--meta {
  width: 34%;
  height: 8px;
}

.mail-page .md-mail-skeleton__card:nth-child(2) .md-mail-skeleton__line,
.mail-page .md-mail-skeleton__card:nth-child(2) .md-mail-skeleton__avatar {
  animation-delay: 0.12s;
}

.mail-page .md-mail-skeleton__card:nth-child(3) .md-mail-skeleton__line,
.mail-page .md-mail-skeleton__card:nth-child(3) .md-mail-skeleton__avatar {
  animation-delay: 0.24s;
}

.mail-page .md-mail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  padding: 36px 20px;
  border: 1.5px solid rgba(26, 115, 232, 0.22);
  border-radius: 12px;
  background: linear-gradient(160deg, #e8f0fe 0%, #f8fbff 48%, #fff 100%);
  text-align: center;
}

.mail-page .md-mail-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #fff;
  color: var(--mail-blue);
  font-size: 1.25rem;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.14);
}

.mail-page .md-mail-empty__title {
  margin: 4px 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mail-blue-dark);
}

.mail-page .md-mail-empty__text {
  margin: 0;
  max-width: 280px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--mail-muted);
}

.mail-page .md-mail-empty--loading {
  border-color: rgba(26, 115, 232, 0.16);
}

.mail-page .md-mail-empty__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(26, 115, 232, 0.18);
  border-top-color: var(--mail-blue);
  border-radius: 50%;
  animation: md-mail-spin 0.7s linear infinite;
}

@keyframes md-mail-loading-pulse {
  0% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.4); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(26, 115, 232, 0); }
  100% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(26, 115, 232, 0); }
}

@keyframes md-mail-loading-ring {
  0% { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}

@keyframes md-mail-skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@keyframes md-mail-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mail-page .md-mail-loading__pulse,
  .mail-page .md-mail-loading__pulse::after,
  .mail-page .md-mail-skeleton__avatar,
  .mail-page .md-mail-skeleton__line,
  .mail-page .md-mail-empty__spinner {
    animation: none;
  }
}

.mail-page .md-mail-table tbody tr {
  display: block !important;
  width: 100%;
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.mail-page .md-mail-table tbody tr:last-child {
  margin-bottom: 0 !important;
}

.mail-page .md-mail-table tbody td {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  vertical-align: top;
}

/* MUI Outlined Card — beat Enabled .card margin-bottom:30px + border:0 */
.mail-page .md-mail-card.card,
.mail-page .md-mail-card {
  display: block;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border-radius: var(--mail-card-radius) !important;
  box-shadow: none !important;
  border: 1.5px solid var(--mail-card-border) !important;
  overflow: visible;
  isolation: isolate;
  max-height: none !important;
  background-size: auto !important;
  background-position: initial !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
}

.mail-page .md-mail-card.md-animate-in {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.mail-page .md-mail-card--expanded {
  box-shadow: none !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
  background: #fff !important;
}

.mail-page .md-mail-card__foot {
  border-radius: 0 0 var(--mail-card-radius) var(--mail-card-radius);
  overflow: visible;
}

.mail-page .md-mail-card__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 8px 8px 8px 10px;
  min-height: 0;
  border: 0;
  border-radius: var(--mail-card-radius);
  background: #fff;
  box-shadow: none;
  text-align: left;
  text-decoration: none !important;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow: visible;
  position: relative;
}

.mail-page .md-mail-card__summary:hover,
.mail-page .md-mail-card__summary:active,
.mail-page .md-mail-card__summary:focus,
.mail-page .md-mail-card__summary:focus-visible,
.mail-page .md-mail-card--expanded .md-mail-card__summary:hover,
.mail-page .md-mail-card--expanded .md-mail-card__summary:active,
.mail-page .md-mail-card--expanded .md-mail-card__summary:focus,
.mail-page .md-mail-card--expanded .md-mail-card__summary:focus-visible {
  background: #fff !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  outline: none !important;
  color: inherit !important;
}

.mail-page .md-mail-card--unread .md-mail-card__summary:hover,
.mail-page .md-mail-card--unread .md-mail-card__summary:active,
.mail-page .md-mail-card--unread .md-mail-card__summary:focus,
.mail-page .md-mail-card--unread .md-mail-card__summary:focus-visible,
.mail-page .md-mail-card--expanded.md-mail-card--unread .md-mail-card__summary:hover,
.mail-page .md-mail-card--expanded.md-mail-card--unread .md-mail-card__summary:active,
.mail-page .md-mail-card--expanded.md-mail-card--unread .md-mail-card__summary:focus,
.mail-page .md-mail-card--expanded.md-mail-card--unread .md-mail-card__summary:focus-visible {
  background: #f8f9fa !important;
  color: inherit !important;
}

/* Expanded: shape only — do not change summary fill */
.mail-page .md-mail-card--expanded .md-mail-card__summary {
  border-radius: var(--mail-card-radius) var(--mail-card-radius) 0 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}

.mail-page .md-mail-card__details.collapse:not(.show) {
  display: none;
}

.mail-page .md-mail-card__details.collapsing {
  display: block;
  height: 0;
  overflow: hidden;
  transition: none;
}

.mail-page .md-mail-card__details.collapse.show {
  display: block;
  height: auto;
  overflow: visible;
}

.mail-page .md-mail-card__avatar {
  position: relative;
  flex-shrink: 0;
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: hsl(var(--mail-avatar-hue, 210), 58%, 46%);
  box-shadow: none;
  overflow: hidden;
  isolation: isolate;
}

.mail-page .md-mail-card__avatar > .md-ripple-ink,
.mail-page .md-mail-card__avatar > .md-ripple-ink.is-animating {
  display: none !important;
  animation: none !important;
}

/* Expanding pulse — works with overflow:hidden (box-shadow, not ::after) */
@keyframes md-mail-attention-ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(96, 100, 104, 0.55);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(96, 100, 104, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(96, 100, 104, 0);
  }
}

@keyframes md-mail-attention-ripple-blue {
  0% {
    box-shadow:
      var(--mui-elevation-2, 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)),
      0 0 0 0 rgba(26, 115, 232, 0.55);
  }
  70% {
    box-shadow:
      var(--mui-elevation-2, 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)),
      0 0 0 14px rgba(26, 115, 232, 0);
  }
  100% {
    box-shadow:
      var(--mui-elevation-2, 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)),
      0 0 0 0 rgba(26, 115, 232, 0);
  }
}

.mail-page .md-mail-card--unread .md-mail-card__avatar {
  overflow: visible;
  z-index: 1;
  animation: md-mail-attention-ripple 1.4s ease-out infinite;
}

.mail-page .md-mail-card--unread .md-mail-card__avatar::after {
  content: none !important;
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .mail-page .md-mail-card--unread .md-mail-card__avatar {
    animation: none;
    box-shadow: 0 0 0 3px rgba(96, 100, 104, 0.4);
  }
}

.mail-page .md-mail-card__summary.md-ripple::after,
.mail-page .md-mail-card .md-ripple::after {
  content: none !important;
  display: none !important;
}

.mail-page .md-mail-card__summary-body {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.mail-page .md-mail-card__summary-body > .md-mail-card__title {
  flex: 0 0 auto;
  width: 100%;
}

.mail-page .md-mail-card__topline {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.mail-page .md-mail-card__author {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  color: rgba(0, 0, 0, 0.87);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-page .md-mail-card__author-primary,
.mail-page .md-mail-card__author-secondary {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
  white-space: nowrap;
}

.mail-page .md-mail-card__author-secondary::before {
  content: " ";
}


.mail-page .md-mail-card__end {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
  padding-right: 0;
  min-width: 0;
}

.mail-page .md-mail-card__end .md-mail-card__date {
  margin: 0;
  padding: 0;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  text-align: right;
}

.mail-page .md-mail-card__labels {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.mail-page .md-mail-card__labels .read_status:empty,
.mail-page .md-mail-card__labels .post_status:empty {
  display: none;
  padding: 0;
  min-height: 0;
}

.mail-page .md-mail-card__title {
  display: block;
  margin: 0;
  max-width: 100%;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.6);
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
  transition: color 0.15s ease, font-weight 0.15s ease;
}

.mail-page .md-mail-card__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin-top: 2px;
  min-width: 0;
  font-size: 0.6875rem;
  color: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.mail-page .md-mail-card__meta-sep {
  opacity: 0.55;
}

/* Compact badges for replies + status */
.mail-page .md-mail-card__meta .md-chip,
.mail-page .md-mail-card__labels .md-chip,
.mail-page .md-mail-card__recipients-chip,
.mail-page .md-mail-card__replies-chip,
.mail-page .md-mail-card__recipients {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: auto;
  min-height: 18px;
  margin: 0;
  padding: 1px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.625rem !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-transform: none;
  box-shadow: none;
  white-space: nowrap;
}

.mail-page .md-mail-card__recipients-chip,
.mail-page .md-mail-card__replies-chip,
.mail-page .md-mail-card__recipients,
.mail-page .md-mail-card__meta .md-chip--neutral {
  background: #f1f3f4 !important;
  color: rgba(0, 0, 0, 0.65) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.mail-page .md-mail-card__meta .md-chip--warning,
.mail-page .md-mail-card__labels .md-chip--warning {
  background: #fff3e0 !important;
  color: #e65100 !important;
  border-color: rgba(230, 81, 0, 0.2) !important;
}

.mail-page .md-mail-card__meta .md-chip--success,
.mail-page .md-mail-card__labels .md-chip--success {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
  border-color: rgba(46, 125, 50, 0.2) !important;
}

.mail-page .md-mail-card__meta .md-chip--info,
.mail-page .md-mail-card__labels .md-chip--info {
  background: #e8f0fe !important;
  color: #1967d2 !important;
  border-color: rgba(25, 103, 210, 0.18) !important;
}

.mail-page .md-mail-card__meta .md-chip:not([class*="md-chip--"]),
.mail-page .md-mail-card__labels .md-chip:not([class*="md-chip--"]) {
  background: #f1f3f4 !important;
  color: rgba(0, 0, 0, 0.65) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.mail-page .md-mail-card__date {
  font-size: 0.625rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.mail-page .md-mail-card__expand-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(0, 0, 0, 0.4);
  font-size: 0.625rem;
  transition: none;
}

.mail-page .md-mail-card__summary[aria-expanded="true"] .md-mail-card__expand-icon,
.mail-page .md-mail-card__summary:not(.collapsed) .md-mail-card__expand-icon,
.mail-page .md-mail-card--expanded .md-mail-card__expand-icon {
  transform: rotate(180deg);
  background: transparent;
  color: rgba(0, 0, 0, 0.4);
}

.mail-page .md-mail-card__details {
  border-top: 1px solid var(--mail-card-border);
}

.mail-page .md-mail-card__foot {
  margin-top: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  overflow: visible;
}

.mail-page .md-mail-card__metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 0;
  padding: 8px 10px;
  box-sizing: border-box;
  background: #f8f9fa;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.mail-page .md-mail-card__metrics-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.mail-page .md-mail-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 26px;
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  color: #3c4043;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.mail-page .md-mail-card__stat i {
  font-size: 0.75rem;
  line-height: 1;
  color: #5f6368;
}

.mail-page .md-mail-card__stat--replies i {
  color: #188038;
}

.mail-page .md-mail-card__stat--files i {
  color: #e37400;
}

.mail-page .md-mail-card__stat-value,
.mail-page .md-mail-card__stat .count_reply {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #202124;
}

.mail-page .md-mail-card__stat-label {
  font-weight: 500;
  color: #5f6368;
}

.mail-page .md-mail-card__stat--sent {
  margin-left: auto;
  padding: 3px 2px;
  background: transparent;
  box-shadow: none;
  color: #80868b;
  font-weight: 500;
  flex: 0 0 auto;
}

.mail-page .md-mail-card__stat--sent i {
  color: #9aa0a6;
}

.mail-page .md-mail-card__stat--sent .md-mail-card__stat-label {
  color: #80868b;
}

.mail-page .md-mail-card__sent-date {
  font-weight: 600;
  color: #5f6368;
  text-transform: none;
  letter-spacing: 0;
}

.mail-page .md-mail-card__action-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 8px 10px 10px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 0 0 var(--mail-card-radius) var(--mail-card-radius);
  overflow: visible;
}

.mail-page .md-mail-card__action-bar .md-timeline-action-btn,
.mail-page .md-mail-card__action-bar .mui-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 6px 16px;
  border-radius: var(--mui-shape, 4px);
  font-family: var(--mui-font, inherit);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02857em;
  line-height: 1.75;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
    color 250ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

.mail-page .md-mail-card__action-bar .md-timeline-action-btn + .md-timeline-action-btn {
  border-left: 0;
}

.mail-page .md-mail-card__action-bar .md-timeline-action-btn i {
  font-size: 1.125rem;
  line-height: 1;
  color: inherit;
}

/* MUI Button outlined — error */
.mail-page .md-mail-card__action-bar .delete_mail,
.mail-page .md-mail-card__action-bar .mui-btn-outlined.delete_mail {
  background: transparent;
  color: #d32f2f;
  border: 1px solid rgba(211, 47, 47, 0.5);
  box-shadow: none;
}

.mail-page .md-mail-card__action-bar .delete_mail:hover,
.mail-page .md-mail-card__action-bar .delete_mail:focus-visible {
  background: rgba(211, 47, 47, 0.04);
  border-color: #d32f2f;
  color: #d32f2f;
  outline: none;
}

.mail-page .md-mail-card__action-bar .delete_mail:active {
  background: rgba(211, 47, 47, 0.12);
}

/* MUI Button contained — primary */
.mail-page .md-mail-card__action-bar .reply_modal,
.mail-page .md-mail-card__action-bar .mui-btn-contained.reply_modal {
  background: var(--mail-blue, var(--mui-primary, #1976d2));
  color: #fff;
  border: 1px solid transparent;
  box-shadow: var(--mui-elevation-2);
}

.mail-page .md-mail-card__action-bar .reply_modal:hover,
.mail-page .md-mail-card__action-bar .reply_modal:focus-visible {
  background: var(--mail-blue-dark, var(--mui-primary-dark, #1565c0));
  color: #fff;
  box-shadow: var(--mui-elevation-1);
  outline: none;
}

.mail-page .md-mail-card__action-bar .reply_modal:active {
  box-shadow: none;
}

.mail-page .md-mail-card__action-bar .reply_modal.reply_modal--attention,
.mail-page .md-mail-card__action-bar .reply_modal.reply_modal--attention:hover,
.mail-page .md-mail-card__action-bar .reply_modal.reply_modal--attention:focus-visible,
.mail-page .md-mail-card__action-bar .reply_modal.reply_modal--attention:active {
  z-index: 1;
  transition:
    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
    color 250ms cubic-bezier(0.4, 0, 0.2, 1);
  animation: md-mail-attention-ripple-blue 1.4s ease-out infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  .mail-page .md-mail-card__action-bar .reply_modal.reply_modal--attention {
    animation: none !important;
    box-shadow:
      var(--mui-elevation-2),
      0 0 0 3px rgba(26, 115, 232, 0.4);
  }
}

.mail-page .md-timeline-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 680px;
  margin: 24px auto 0;
  padding: 28px 8px 40px;
  text-align: center;
}

.mail-page .md-timeline-empty__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 28px 24px 32px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 20px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 18%, rgba(26, 115, 232, 0.1), transparent 62%),
    linear-gradient(180deg, #f6f9fe 0%, #ffffff 56%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);
  box-sizing: border-box;
  gap: 0;
}

.mail-page .md-timeline-empty__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(200px, 64vw);
  height: min(200px, 64vw);
  margin-bottom: 18px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--mail-blue-container, #e8f0fe);
  border: 3px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(26, 115, 232, 0.08),
    0 8px 20px rgba(26, 115, 232, 0.12);
}

.mail-page .md-timeline-empty__image,
.mail-page img.md-timeline-empty__image,
.mail-page img.emptycontent {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0;
  object-fit: cover;
  object-position: center;
  opacity: 1;
}

.mail-page .md-timeline-empty__title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--mail-ink, #202124);
}

.mail-page .md-timeline-empty__text {
  margin: 0;
  max-width: 18rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--mail-muted, #5f6368);
}

/* Filter sheet fields */
.mail-page .md-mail-filter-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mail-page .md-mail-filter-form__dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.mail-page .md-mail-filter-form .select2-container {
  width: 100% !important;
}

.mail-page .md-mail-filter-form .mui-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
}

.mail-page .md-mail-filter-form .mui-field__input,
.mail-page .md-mail-filter-form .form-control {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9375rem;
}

/* Native date: OS picker in RN WebView; 16px avoids iOS focus zoom */
.mail-page .md-mail-filter-form input[type="date"].md-mail-filter-date {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.3;
  color: #202124;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}

.mail-page .md-mail-filter-form input[type="date"].md-mail-filter-date::-webkit-date-and-time-value {
  text-align: left;
}

.mail-page .md-mail-filter-form input[type="date"].md-mail-filter-date::-webkit-calendar-picker-indicator {
  opacity: 0.72;
  cursor: pointer;
  padding: 4px;
  margin-left: 4px;
}

/* Shared native date / datetime-local (mail, attendance, DOB, due dates, meetings…) */
input.md-native-date,
input.md-native-datetime,
input[type="date"].md-native-date,
input[type="datetime-local"].md-native-datetime {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 10px;
  background: #fff;
  color: #202124;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
}

input.md-native-date::-webkit-date-and-time-value,
input.md-native-datetime::-webkit-date-and-time-value {
  text-align: left;
}

input.md-native-date::-webkit-calendar-picker-indicator,
input.md-native-datetime::-webkit-calendar-picker-indicator {
  opacity: 0.72;
  cursor: pointer;
  padding: 4px;
  margin-left: 4px;
}

input.md-native-date:focus,
input.md-native-datetime:focus {
  outline: none;
  border-color: rgba(21, 101, 192, 0.55);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.14);
}

/* Compose Select2 — MUI Autocomplete chips */
#emptyModal .md-mail-form .md-post-form__audience.md-mail-recipients {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 14px !important;
  margin: 0 !important;
  border: 1px solid rgba(25, 118, 210, 0.14) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #f7faff 0%, #f3f7fd 100%) !important;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#emptyModal .md-mail-form .md-mail-form__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #e8f0fe;
  color: #174ea6;
  font-family: "Jost", sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  box-sizing: border-box;
}

#emptyModal .md-mail-form .md-mail-form__notice > i {
  margin-top: 2px;
  flex-shrink: 0;
}

#emptyModal .md-mail-form .md-mail-recipients .md-post-form__audience-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#emptyModal .md-mail-form .md-mail-recipients .md-post-form__audience-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(25, 118, 210, 0.16);
  color: #1967d2;
  font-size: 0.9375rem;
  box-shadow: 0 1px 2px rgba(25, 118, 210, 0.08);
}

#emptyModal .md-mail-form .md-mail-recipients .md-mail-recipients__label,
#emptyModal .md-mail-form .md-mail-recipients .md-post-form__audience-label {
  margin: 0 !important;
  font-family: "Jost", "Roboto", sans-serif;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #1a237e !important;
}

#emptyModal .md-mail-form .md-mail-recipients .md-post-form__audience-fields {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
}

#emptyModal .md-mail-form .md-mail-recipients .select2-container,
#emptyModal .md-mui-select {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  position: relative;
}

#emptyModal .md-mui-select .select2-selection,
#emptyModal .select2-container--default.md-mui-select .select2-selection,
#emptyModal .md-mail-form .md-mail-recipients .select2-selection {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100% !important;
  min-height: 56px !important;
  height: auto !important;
  padding: 10px 44px 10px 14px !important;
  border: 1.5px solid #c5d4eb !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  outline: none !important;
  cursor: text;
  transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

#emptyModal .md-mui-select .select2-selection:hover,
#emptyModal .md-mail-form .md-mail-recipients .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection:hover {
  border-color: #90caf9 !important;
}

#emptyModal .select2-container--default.md-mui-select.select2-container--focus .select2-selection,
#emptyModal .select2-container--default.md-mui-select.select2-container--open .select2-selection,
#emptyModal .md-mail-form .md-mail-recipients .select2-container--focus .select2-selection,
#emptyModal .md-mail-form .md-mail-recipients .select2-container--open .select2-selection {
  border-color: #1976d2 !important;
  border-width: 2px !important;
  padding: 9px 43px 9px 13px !important;
  box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.14) !important;
}

.select2-container--open .md-mui-select__dropdown,
#emptyModal .md-mui-select__dropdown,
#emptyModal .select2-dropdown {
  z-index: 1600 !important;
  margin-top: 6px;
  border: 1px solid rgba(25, 118, 210, 0.12) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12) !important;
  overflow: hidden;
}

.md-mui-select__dropdown .select2-results__options,
#emptyModal .select2-results__options {
  max-height: min(50vh, 280px);
  padding: 6px 0;
}

.md-mui-select__dropdown .select2-results__option,
#emptyModal .select2-results__option {
  min-height: 48px !important;
  padding: 12px 16px !important;
  font-family: "Jost", "Roboto", sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: rgba(0, 0, 0, 0.87) !important;
  box-sizing: border-box;
}

#emptyModal .md-mui-select::after,
#emptyModal .md-mail-form .md-mail-recipients .select2-container::after {
  content: "\f002";
  font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
  font-weight: 900;
  font-size: 0.8125rem;
  position: absolute;
  top: 50%;
  right: 16px;
  width: auto;
  height: auto;
  margin-top: -0.5em;
  border: none;
  color: #5f6368;
  pointer-events: none;
  z-index: 2;
  line-height: 1;
}

#emptyModal .select2-container--open.md-mui-select::after,
#emptyModal .md-mail-form .md-mail-recipients .select2-container--open::after {
  margin-top: -0.5em;
  border: none;
  color: #1976d2;
}

#emptyModal .md-mui-select .select2-selection--multiple .select2-selection__rendered,
#emptyModal .md-mail-form .md-mail-recipients .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow: visible !important;
  white-space: normal !important;
}

#emptyModal .md-mui-select .select2-selection--multiple .select2-selection__choice,
#emptyModal .md-mail-form .md-mail-recipients .select2-selection--multiple .select2-selection__choice {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  position: relative !important;
  float: none !important;
  margin: 0 !important;
  padding: 4px 6px 4px 12px !important;
  max-width: 100%;
  min-height: 32px;
  height: auto !important;
  border: 1px solid rgba(25, 118, 210, 0.18) !important;
  border-radius: 999px !important;
  background: #e8f0fe !important;
  color: #0d47a1 !important;
  font-family: "Jost", "Roboto", sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  overflow: visible !important;
  white-space: nowrap;
  cursor: default;
  box-sizing: border-box;
  box-shadow: 0 1px 1px rgba(13, 71, 161, 0.06);
}

#emptyModal .md-mui-select .select2-selection--multiple .select2-selection__choice__display,
#emptyModal .md-mail-form .md-mail-recipients .select2-selection--multiple .select2-selection__choice__display {
  order: 1;
  display: inline-block;
  max-width: 14rem;
  padding: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

#emptyModal .md-mui-select .select2-selection--multiple .select2-selection__choice__remove,
#emptyModal .md-mail-form .md-mail-recipients .select2-selection--multiple .select2-selection__choice__remove {
  order: 2;
  position: static !important;
  left: auto !important;
  top: auto !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.65) !important;
  color: #1565c0 !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer;
}

#emptyModal .md-mui-select .select2-selection--multiple .select2-selection__choice__remove span,
#emptyModal .md-mail-form .md-mail-recipients .select2-selection--multiple .select2-selection__choice__remove span {
  display: block;
  line-height: 1;
  transform: translateY(-0.5px);
}

#emptyModal .md-mui-select .select2-selection--multiple .select2-selection__choice__remove:hover,
#emptyModal .md-mui-select .select2-selection--multiple .select2-selection__choice__remove:focus,
#emptyModal .md-mail-form .md-mail-recipients .select2-selection--multiple .select2-selection__choice__remove:hover,
#emptyModal .md-mail-form .md-mail-recipients .select2-selection--multiple .select2-selection__choice__remove:focus {
  background: #fff !important;
  color: #0d47a1 !important;
  outline: none !important;
}

/* Select2 4.1+: search is a sibling textarea, not an <input> inside the UL */
#emptyModal .md-mui-select .select2-selection--multiple .select2-search--inline,
#emptyModal .md-mail-form .md-mail-recipients .select2-selection--multiple .select2-search--inline {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 1 12rem;
  min-width: 8rem !important;
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

#emptyModal .md-mui-select .select2-selection--multiple .select2-search__field,
#emptyModal .md-mail-form .md-mail-recipients .select2-selection--multiple .select2-search__field,
#emptyModal .md-mui-select textarea.select2-search__field,
#emptyModal .md-mail-form .md-mail-recipients textarea.select2-search__field {
  display: block !important;
  float: none !important;
  width: 100% !important;
  min-width: 8rem !important;
  max-width: 100% !important;
  min-height: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  resize: none !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: "Jost", "Roboto", sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  color: rgba(0, 0, 0, 0.87) !important;
  vertical-align: middle;
  box-sizing: border-box !important;
}

#emptyModal .md-mui-select .select2-selection--multiple .select2-search__field::placeholder,
#emptyModal .md-mail-form .md-mail-recipients .select2-selection--multiple .select2-search__field::placeholder {
  color: rgba(0, 0, 0, 0.42) !important;
  opacity: 1 !important;
  font-weight: 500 !important;
  line-height: 32px !important;
}

#emptyModal .md-mui-select .select2-selection--single,
#emptyModal .md-mail-form .md-mail-recipients .select2-selection--single {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  position: relative !important;
  min-height: 56px !important;
  height: auto !important;
  padding: 8px 72px 8px 14px !important;
  gap: 0 !important;
}

#emptyModal .md-mui-select.select2-container--focus .select2-selection--single,
#emptyModal .md-mui-select.select2-container--open .select2-selection--single,
#emptyModal .md-mail-form .md-mail-recipients .select2-container--focus .select2-selection--single,
#emptyModal .md-mail-form .md-mail-recipients .select2-container--open .select2-selection--single {
  padding: 7px 71px 7px 13px !important;
}

#emptyModal .md-mui-select.md-mui-select--filled .select2-selection--single {
  border-color: rgba(25, 118, 210, 0.42) !important;
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%) !important;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.06) !important;
}

#emptyModal .md-mui-select .select2-selection--single .select2-selection__rendered,
#emptyModal .md-mail-form .md-mail-recipients .select2-selection--single .select2-selection__rendered {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  color: rgba(0, 0, 0, 0.87) !important;
  font-family: "Jost", "Roboto", sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  overflow: hidden !important;
}

#emptyModal .md-mui-select .select2-selection--single .select2-selection__placeholder,
#emptyModal .md-mail-form .md-mail-recipients .select2-selection--single .select2-selection__placeholder {
  color: rgba(0, 0, 0, 0.38) !important;
  font-weight: 500 !important;
}

#emptyModal .md-mui-select .select2-selection--single .select2-selection__clear,
#emptyModal .md-mail-form .md-mail-recipients .select2-selection--single .select2-selection__clear {
  position: absolute !important;
  top: 50% !important;
  right: 40px !important;
  left: auto !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  height: 28px !important;
  margin: -14px 0 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: none !important;
  background: #f1f3f4 !important;
  color: #5f6368 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 3;
}

#emptyModal .md-mui-select .select2-selection--single .select2-selection__clear:hover,
#emptyModal .md-mail-form .md-mail-recipients .select2-selection--single .select2-selection__clear:hover {
  background: #e8f0fe !important;
  color: #1565c0 !important;
}

#emptyModal .md-mui-select .select2-selection--single .select2-selection__arrow,
#emptyModal .md-mail-form .md-mail-recipients .select2-selection--single .select2-selection__arrow {
  display: none !important;
}

#emptyModal .md-mui-select.md-mui-select--filled::after,
#emptyModal .md-mail-form .md-mail-recipients .select2-container.md-mui-select--filled::after {
  content: "\f078";
  color: #1976d2;
}

.md-mui-select__opt,
#emptyModal .md-mui-select__opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
}

.md-mui-select__opt--selection,
#emptyModal .md-mui-select__opt--selection {
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}

.md-mui-select__opt-name,
#emptyModal .md-mui-select__opt-name {
  display: block;
  max-width: 100%;
  font-family: "Jost", "Roboto", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  color: #0d47a1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-mui-select__opt--selection .md-mui-select__opt-name,
#emptyModal .md-mui-select__opt--selection .md-mui-select__opt-name {
  color: #0d47a1;
  font-size: 0.875rem;
}

.md-mui-select__opt-meta,
#emptyModal .md-mui-select__opt-meta {
  display: block;
  max-width: 100%;
  font-family: "Jost", "Roboto", sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: #5f6368;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-mui-select__opt--plain,
#emptyModal .md-mui-select__opt--plain {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.87);
}

.md-mui-select__dropdown .select2-results__group,
#emptyModal .select2-results__group,
.md-mui-select__group,
#emptyModal .md-mui-select__group {
  display: block !important;
  margin: 4px 8px 2px !important;
  padding: 8px 10px 4px !important;
  font-family: "Jost", "Roboto", sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #5f6368 !important;
  background: transparent !important;
  cursor: default !important;
}

.md-mui-select__dropdown .select2-results__option--highlighted .md-mui-select__opt-name,
#emptyModal .select2-results__option--highlighted .md-mui-select__opt-name {
  color: #0d47a1;
}

.md-mui-select__dropdown .select2-results__option[aria-selected="true"] .md-mui-select__opt-name,
#emptyModal .select2-results__option[aria-selected="true"] .md-mui-select__opt-name {
  color: #1565c0;
}

.md-mui-select__dropdown .select2-results__option--highlighted,
#emptyModal .select2-results__option--highlighted {
  background: #e8f0fe !important;
  color: #0d47a1 !important;
}

.md-mui-select__dropdown .select2-results__option[aria-selected="true"],
#emptyModal .select2-results__option[aria-selected="true"] {
  background: rgba(25, 118, 210, 0.12) !important;
  color: #1565c0 !important;
  font-weight: 600;
}

.md-mui-select__dropdown .select2-results__message,
#emptyModal .select2-results__message {
  padding: 14px 16px !important;
  font-family: "Jost", "Roboto", sans-serif !important;
  font-size: 0.875rem !important;
  color: rgba(0, 0, 0, 0.54) !important;
}

#emptyModal .md-mail-reply:not(.md-mail-reply--chat),
#comment_modal .md-mail-reply:not(.md-mail-reply--chat) {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(13, 71, 161, 0.16);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}

#emptyModal .md-mail-reply--mine:not(.md-mail-reply--chat),
#comment_modal .md-mail-reply--mine:not(.md-mail-reply--chat),
#emptyModal .md-mail-reply.md-comment--mine:not(.md-mail-reply--chat),
#comment_modal .md-mail-reply.md-comment--mine:not(.md-mail-reply--chat) {
  border-color: rgba(21, 101, 192, 0.42);
  background: #fff;
}

#emptyModal .md-mail-reply--mine:not(.md-mail-reply--chat) .md-mail-reply__head,
#comment_modal .md-mail-reply--mine:not(.md-mail-reply--chat) .md-mail-reply__head,
#emptyModal .md-mail-reply.md-comment--mine:not(.md-mail-reply--chat) .md-mail-reply__head,
#comment_modal .md-mail-reply.md-comment--mine:not(.md-mail-reply--chat) .md-mail-reply__head {
  background: linear-gradient(180deg, #e3f2fd 0%, #dbeafe 100%);
}

#emptyModal .md-mail-thread,
#comment_modal .md-mail-thread {
  --wa-ink: #111b21;
  --wa-muted: #667781;
  --wa-in: #ffffff;
  --wa-out: #d6ebff;
  --wa-out-ink: #0d2137;
  --wa-accent: #1565c0;
  --wa-accent-deep: #0d47a1;
  --wa-tick: #1a73e8;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 6px 4px 8px;
  min-height: 100%;
  box-sizing: border-box;
}

/* Empty chat: pin the placeholder to the middle of the sheet body */
#emptyModal.md-timeline-sheet:has(.md-mail-thread:not(:has(.md-mail-reply))) .md-timeline-sheet__body,
#comment_modal.md-timeline-sheet:has(.md-mail-thread:not(:has(.md-mail-reply))) .md-timeline-sheet__body {
  display: flex;
  flex-direction: column;
}

#emptyModal .md-mail-thread:not(:has(.md-mail-reply)),
#comment_modal .md-mail-thread:not(:has(.md-mail-reply)),
#emptyModal .md-mail-thread:has(> .md-mail-thread__empty:only-child),
#comment_modal .md-mail-thread:has(> .md-mail-thread__empty:only-child),
#emptyModal .md-mail-thread:has(> .md-comment-empty:only-child),
#comment_modal .md-mail-thread:has(> .md-comment-empty:only-child) {
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}

/* WhatsApp-style mail chat wallpaper (current WA Web) */
#emptyModal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__body,
#comment_modal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__body,
#emptyModal.md-timeline-sheet.md-timeline-sheet--thread:has(.md-mail-thread) .md-timeline-sheet__body,
#comment_modal.md-timeline-sheet.md-timeline-sheet--thread:has(.md-mail-thread) .md-timeline-sheet__body {
  background-color: #efeae2;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23d5cdc2' stroke-width='1' opacity='0.35'%3E%3Cpath d='M20 30c8-10 22-8 28 2M70 50c6 8 2 18-6 20M120 28c10 4 14 16 6 24M40 100c12-2 18 10 10 18M100 90c8 10 20 8 24-2M150 120c-10 6-8 18 2 22M30 150c8 6 18 2 20-8'/%3E%3Ccircle cx='55' cy='70' r='3'/%3E%3Ccircle cx='140' cy='60' r='2.5'/%3E%3Ccircle cx='95' cy='140' r='3'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(239, 234, 226, 0.92) 0%, rgba(233, 227, 216, 0.96) 100%);
  background-size: 180px 180px, auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 6px 6px;
}

#emptyModal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__footer:has(.md-timeline-sheet__comment-compose),
#comment_modal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__footer:has(.md-timeline-sheet__comment-compose) {
  background: #f0f2f5;
  border-top: 1px solid rgba(17, 27, 33, 0.08);
  padding: 8px 10px calc(10px + var(--md-sheet-footer-safe, 0px));
}

#emptyModal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-field,
#comment_modal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-field {
  min-height: 44px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(11, 20, 26, 0.08);
}

#emptyModal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-input.chat-input,
#comment_modal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-input.chat-input,
#emptyModal.md-timeline-sheet:has(.md-mail-thread) textarea.md-timeline-sheet__compose-input.chat-input,
#comment_modal.md-timeline-sheet:has(.md-mail-thread) textarea.md-timeline-sheet__compose-input.chat-input {
  min-height: 44px;
  padding: 11px 16px;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  color: #111b21;
}

#emptyModal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-send,
#comment_modal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-send {
  width: 48px;
  height: 48px;
  background: #1565c0 !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(21, 101, 192, 0.4);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

#emptyModal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-send:hover,
#comment_modal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-send:hover,
#emptyModal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-send:focus-visible,
#comment_modal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-send:focus-visible {
  background: #0d47a1 !important;
  color: #fff !important;
}

#emptyModal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-send:disabled,
#comment_modal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-send:disabled,
#emptyModal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-send[aria-busy="true"],
#comment_modal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-send[aria-busy="true"],
#emptyModal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-send.is-sending,
#comment_modal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-send.is-sending {
  opacity: 1;
  pointer-events: none;
  background: #0d47a1 !important;
  box-shadow: none;
}

#emptyModal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-send.is-sending > i,
#comment_modal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-send.is-sending > i,
#emptyModal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-send .md-mail-send-spinner,
#comment_modal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-send .md-mail-send-spinner {
  font-size: 1.125rem;
  animation: md-mail-send-spin 0.75s linear infinite;
}

@keyframes md-mail-send-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #emptyModal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-send.is-sending > i,
  #comment_modal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-send.is-sending > i,
  #emptyModal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-send .md-mail-send-spinner,
  #comment_modal.md-timeline-sheet:has(.md-mail-thread) .md-timeline-sheet__compose-send .md-mail-send-spinner {
    animation: none;
  }
}

#emptyModal .md-mail-thread .md-mail-reply.md-mail-reply--chat,
#comment_modal .md-mail-thread .md-mail-reply.md-mail-reply--chat {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 6px;
  max-width: 100%;
  margin: 0;
  padding: 1px 2px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  animation: md-wa-bubble-in 0.22s ease both;
}

#emptyModal .md-mail-thread .md-mail-reply.md-mail-reply--chat.md-mail-reply--mine,
#comment_modal .md-mail-thread .md-mail-reply.md-mail-reply--chat.md-mail-reply--mine {
  flex-direction: row-reverse;
  border: none;
  background: transparent;
}

#emptyModal .md-mail-thread .md-mail-reply.md-mail-reply--chat .md-mail-reply__head,
#comment_modal .md-mail-thread .md-mail-reply.md-mail-reply--chat .md-mail-reply__head {
  display: none;
}

#emptyModal .md-mail-thread .md-mail-reply__avatar,
#comment_modal .md-mail-thread .md-mail-reply__avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-bottom: 2px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Jost", sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #fff;
  border: none;
  box-shadow: 0 1px 2px rgba(17, 27, 33, 0.18);
}

#emptyModal .md-mail-thread .md-mail-reply__bubble,
#comment_modal .md-mail-thread .md-mail-reply__bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: min(85%, 360px);
  min-width: 64px;
  padding: 6px 9px 4px 9px;
  border-radius: 7.5px;
  background: var(--wa-in);
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

#emptyModal .md-mail-thread .md-mail-reply:not(.md-mail-reply--mine) .md-mail-reply__bubble,
#comment_modal .md-mail-thread .md-mail-reply:not(.md-mail-reply--mine) .md-mail-reply__bubble {
  border-top-left-radius: 0;
}

#emptyModal .md-mail-thread .md-mail-reply--mine .md-mail-reply__bubble,
#comment_modal .md-mail-thread .md-mail-reply--mine .md-mail-reply__bubble {
  border-top-right-radius: 0;
  background: var(--wa-out);
}

#emptyModal .md-mail-thread .md-mail-reply--deleted,
#comment_modal .md-mail-thread .md-mail-reply--deleted {
  justify-content: center;
  opacity: 0.92;
}

#emptyModal .md-mail-thread .md-mail-reply__bubble--deleted,
#comment_modal .md-mail-thread .md-mail-reply__bubble--deleted {
  background: transparent !important;
  box-shadow: none !important;
  border: 0;
  padding: 6px 12px;
  max-width: 100%;
}

#emptyModal .md-mail-thread .md-mail-reply__bubble--deleted::before,
#comment_modal .md-mail-thread .md-mail-reply__bubble--deleted::before {
  display: none;
}

#emptyModal .md-mail-thread .md-mail-reply__body--deleted,
#comment_modal .md-mail-thread .md-mail-reply__body--deleted {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: 0.8125rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  color: #667781;
}

#emptyModal .md-mail-thread .md-mail-reply__bubble::before,
#comment_modal .md-mail-thread .md-mail-reply__bubble::before {
  content: "";
  position: absolute;
  top: 0;
  left: -8px;
  width: 8px;
  height: 13px;
  background: var(--wa-in);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

#emptyModal .md-mail-thread .md-mail-reply--mine .md-mail-reply__bubble::before,
#comment_modal .md-mail-thread .md-mail-reply--mine .md-mail-reply__bubble::before {
  left: auto;
  right: -8px;
  background: var(--wa-out);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

#emptyModal .md-mail-thread .md-mail-reply__author,
#comment_modal .md-mail-thread .md-mail-reply__author {
  display: block;
  max-width: 100%;
  margin: 0 0 3px;
  padding: 0 1px;
  font-family: "Jost", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #027eb5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#emptyModal .md-mail-thread .md-mail-reply--mine .md-mail-reply__author,
#comment_modal .md-mail-thread .md-mail-reply--mine .md-mail-reply__author {
  display: none;
}

#emptyModal .md-mail-thread .md-mail-reply__body,
#comment_modal .md-mail-thread .md-mail-reply__body {
  margin: 0;
  padding: 0 2px 0 1px;
  text-align: left;
  font-family: "Jost", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--wa-ink);
  word-break: break-word;
  white-space: pre-wrap;
  background: transparent;
}

#emptyModal .md-mail-thread .md-mail-reply__meta,
#comment_modal .md-mail-thread .md-mail-reply__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin: 2px 0 0;
  padding: 0 0 0 36px;
  min-height: 15px;
}

#emptyModal .md-mail-thread .md-mail-reply__time,
#comment_modal .md-mail-thread .md-mail-reply__time {
  display: inline-block;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--wa-muted);
  white-space: nowrap;
}

#emptyModal .md-mail-thread .md-mail-reply__ticks,
#comment_modal .md-mail-thread .md-mail-reply__ticks {
  display: inline-flex;
  align-items: center;
  color: var(--wa-tick);
  font-size: 0.75rem;
  line-height: 1;
  margin-left: 1px;
}

#emptyModal .md-mail-thread .md-mail-reply__delete,
#comment_modal .md-mail-thread .md-mail-reply__delete {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  min-width: 22px;
  height: 22px;
  margin: 0 0 0 2px;
  padding: 0 4px;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: rgba(102, 119, 129, 0.9);
  font-size: 0.6875rem;
  cursor: pointer;
  opacity: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#emptyModal .md-mail-thread .md-mail-reply__unsend-timer,
#comment_modal .md-mail-thread .md-mail-reply__unsend-timer {
  font-family: "Jost", sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #c62828;
  line-height: 1;
}

#emptyModal .md-mail-thread .md-mail-reply__delete.is-unsend-ending,
#comment_modal .md-mail-thread .md-mail-reply__delete.is-unsend-ending {
  color: #c62828;
}

#emptyModal .md-mail-thread .md-mail-reply__delete:hover,
#comment_modal .md-mail-thread .md-mail-reply__delete:hover,
#emptyModal .md-mail-thread .md-mail-reply__delete:focus-visible,
#comment_modal .md-mail-thread .md-mail-reply__delete:focus-visible {
  background: rgba(211, 47, 47, 0.12);
  color: #d32f2f;
  outline: none;
}

#emptyModal .md-mail-thread .md-mail-thread__empty.md-comment-empty,
#comment_modal .md-mail-thread .md-mail-thread__empty.md-comment-empty,
#emptyModal .md-mail-thread .md-comment-empty,
#comment_modal .md-mail-thread .md-comment-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  min-height: 0;
  margin: 0 auto;
  padding: 20px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(17, 27, 33, 0.06);
  box-shadow: 0 2px 8px rgba(17, 27, 33, 0.06);
  text-align: center;
  box-sizing: border-box;
}

#emptyModal .md-mail-thread .md-comment-empty__icon,
#comment_modal .md-mail-thread .md-comment-empty__icon {
  color: #1565c0;
}

#emptyModal.md-timeline-sheet .md-timeline-sheet__panel {
  position: relative;
}

#emptyModal .md-mail-jump-down {
  position: absolute;
  right: 14px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--md-sheet-footer-safe, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #54656f;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(11, 20, 26, 0.18);
  transition: transform 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

#emptyModal .md-mail-jump-down[hidden] {
  display: none !important;
}

#emptyModal .md-mail-jump-down:hover,
#emptyModal .md-mail-jump-down:focus-visible {
  background: #f0f2f5;
  color: #111b21;
  outline: none;
  transform: translateY(1px);
}

#emptyModal .md-mail-jump-down:active {
  transform: scale(0.96);
}

@keyframes md-wa-bubble-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #emptyModal .md-mail-thread .md-mail-reply.md-mail-reply--chat,
  #comment_modal .md-mail-thread .md-mail-reply.md-mail-reply--chat {
    animation: none;
  }
}

#emptyModal .md-mail-reply__head,
#comment_modal .md-mail-reply__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 10px;
  background: #f3f8ff;
  border-bottom: 1px solid rgba(13, 71, 161, 0.1);
}

#emptyModal .md-mail-reply__avatar,
#comment_modal .md-mail-reply__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Jost", Roboto, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #fff;
  background: #1565c0;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(13, 71, 161, 0.22);
  background-size: cover;
  background-position: center;
}

#emptyModal .md-mail-reply__avatar--photo,
#comment_modal .md-mail-reply__avatar--photo {
  color: transparent;
  font-size: 0;
}

#emptyModal .md-mail-reply__who,
#comment_modal .md-mail-reply__who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

#emptyModal .md-mail-reply__topline,
#comment_modal .md-mail-reply__topline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 2px;
  min-width: 0;
  width: 100%;
}

#emptyModal .md-mail-reply__author,
#comment_modal .md-mail-reply__author {
  min-width: 0;
  max-width: 100%;
  font-family: "Jost", Roboto, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #0d47a1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#emptyModal .md-mail-reply__time,
#comment_modal .md-mail-reply__time {
  display: block;
  flex-shrink: 0;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.25;
  color: rgba(13, 71, 161, 0.62);
  white-space: nowrap;
}

#emptyModal .md-mail-reply__delete,
#comment_modal .md-mail-reply__delete {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(0, 0, 0, 0.54);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#emptyModal .md-mail-reply__delete:hover,
#emptyModal .md-mail-reply__delete:focus-visible,
#comment_modal .md-mail-reply__delete:hover,
#comment_modal .md-mail-reply__delete:focus-visible {
  background: rgba(211, 47, 47, 0.08);
  color: #d32f2f;
  outline: none;
}

#emptyModal .md-mail-reply__body,
#comment_modal .md-mail-reply__body {
  margin: 0;
  padding: 12px 14px 14px;
  text-align: left;
  font-family: "Jost", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.78);
  word-break: break-word;
  white-space: pre-wrap;
  background: #fff;
}

@media (max-width: 380px) {
  #emptyModal .md-mail-reply__topline,
  #comment_modal .md-mail-reply__topline {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

@media (max-width: 480px) {
  .mail-page {
    --md-mail-toolbar-height: 112px;
  }

  .mail-page .mail-feed.page-content,
  .mail-page .page-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mail-page .md-animate-in,
  .mail-page .md-mail-card__expand-icon {
    animation: none;
    transition: none;
  }
}

/* >>> recovered: alert-feed (536 lines) <<< */
/* ── zap-app: alerts feed (Pattern B) ── */

html.alert-app .header.header-fixed,
body.alert-app .header.header-fixed,
.is-webview.alert-app .header.header-fixed,
.is-webview body.alert-app .header.header-fixed {
  display: none !important;
}

body.alert-app {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  min-height: 100% !important;
  overflow: visible !important;
  -webkit-overflow-scrolling: touch;
  background: #f3f4f6 !important;
}

body.alert-app #page,
body.alert-app .md-page.alert-page,
body.alert-app .md-page.alert-page .alert-feed.page-content,
body.alert-app .md-page.alert-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}



.alert-page {
  --md-header-offset: 0px;
  --md-alert-toolbar-height: 56px;
  --md-alert-toolbar-offset: var(--md-alert-toolbar-height);
  --al-feed-bg: #f3f4f6;
  --al-surface: rgba(255, 255, 255, 0.92);
  --al-ink: #111827;
  --al-muted: #6b7280;
  --al-line: rgba(17, 24, 39, 0.06);
  --al-accent: #2563eb;
  --md-font: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mui-primary: #2563eb;
  font-family: "Jost", sans-serif !important;
  background:
    radial-gradient(1200px 420px at 50% -80px, rgba(37, 99, 235, 0.08), transparent 60%),
    var(--al-feed-bg);
}

.alert-page a,
.alert-page button,
.alert-page .md-ripple {
  touch-action: manipulation;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.alert-page .page-title-clear {
  display: none;
}

.alert-page .alert-feed.page-content,
.alert-page .page-content,
.alert-page .alert-feed.md-feed {
  max-width: 560px !important;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--md-alert-toolbar-offset) + var(--app-safe-top, 0px) + 12px) !important;
  padding-right: 16px !important;
  padding-left: 16px !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 61px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 24px) !important;
  background: transparent !important;
  overflow: visible !important;
}

.alert-page .md-alert-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  background: rgba(243, 244, 246, 0.78) !important;
  background-image: none !important;
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  transform: none !important;
  overflow: visible !important;
}

.alert-page .md-alert-toolbar .content,
.alert-page .md-alert-toolbar__inner {
  display: flex;
  align-items: center;
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  padding: 14px 16px !important;
  box-sizing: border-box;
}

.alert-page .md-alert-toolbar__title {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--al-ink);
}

.alert-page .md-alert-toolbar__brand,
.alert-page .md-alert-toolbar__titles,
.alert-page .md-alert-toolbar__overline,
.alert-page .md-alert-toolbar__chip,
.alert-page .md-alert-toolbar__chip-avatar,
.alert-page .md-alert-toolbar__chip-label,
.alert-page .md-alert-toolbar__chip-overline,
.alert-page .md-alert-toolbar__chip-text {
  display: none !important;
}

.alert-page .md-alert-stream {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}

.alert-page .md-alert-day {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.alert-page .md-alert-day__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.alert-page .md-alert-day--pinned {
  gap: 0;
}

.alert-page .md-alert-day--pinned .md-alert-card--birthday .md-alert-card__label {
  color: #be123c;
}

.alert-page .md-timeline-date,
.alert-page .mui-divider.md-timeline-date {
  position: sticky;
  top: calc(var(--md-alert-toolbar-offset, 56px) + 4px);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 6px 0;
  background: linear-gradient(
    180deg,
    var(--al-feed-bg, #f3f4f6) 0%,
    rgba(243, 244, 246, 0.94) 70%,
    rgba(243, 244, 246, 0.72) 100%
  );
  text-align: center;
  pointer-events: none;
}

.alert-page .md-timeline-date::before,
.alert-page .md-timeline-date::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  display: block;
}

.alert-page .md-timeline-date::before {
  background: linear-gradient(90deg, transparent 0%, rgba(15, 23, 42, 0.14) 100%);
}

.alert-page .md-timeline-date::after {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.14) 0%, transparent 100%);
}

.alert-page .md-timeline-date__chip,
.alert-page .md-timeline-date > span.md-timeline-date__chip {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 14px;
  border: 1px solid rgba(95, 99, 104, 0.22);
  border-radius: 999px;
  background: #f1f3f4;
  box-shadow: none;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5f6368;
  white-space: nowrap;
}

.alert-page .md-alert-day__head,
.alert-page .md-alert-day__date {
  display: none !important;
}

.alert-page .md-alert-card {
  margin: 0;
  border: none;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.alert-page .md-alert-card + .md-alert-card {
  border-top: none;
}

.alert-page .md-alert-card:active {
  transform: scale(0.985);
}

.alert-page .md-alert-card--static:active {
  transform: none;
}

.alert-page .md-alert-card__link {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
  width: 100%;
  margin: 0;
  padding: 13px 14px 13px 16px;
  border: 1px solid #93c5fd;
  border-radius: 18px;
  background: #f8fbff;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
  cursor: pointer;
}

.alert-page .md-alert-card__link--static {
  cursor: default;
  border-width: 1px;
  border-color: #c0c4c8;
  background: #fcfcfd;
  opacity: 0.96;
}

.alert-page .md-alert-card__link:hover,
.alert-page .md-alert-card__link:focus-visible {
  background: #eff6ff;
  border-color: #60a5fa;
  box-shadow: none;
  outline: none;
}

.alert-page .md-alert-card__link--static:hover,
.alert-page .md-alert-card__link--static:focus-visible {
  background: #fcfcfd;
  border-color: #c0c4c8;
}

.alert-page .md-alert-card__accent {
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: #2563eb;
}

.alert-page .md-alert-card__icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.16);
  color: #1d4ed8;
  font-size: 0.6875rem;
  flex-shrink: 0;
}

.alert-page .md-alert-card--assessment .md-alert-card__icon,
.alert-page .md-alert-card--class .md-alert-card__icon {
  background: rgba(37, 99, 235, 0.16);
  color: #1d4ed8;
}

.alert-page .md-alert-card--activity .md-alert-card__icon,
.alert-page .md-alert-card--marked .md-alert-card__icon {
  background: rgba(22, 163, 74, 0.16);
  color: #15803d;
}

.alert-page .md-alert-card--topics .md-alert-card__icon,
.alert-page .md-alert-card--library .md-alert-card__icon {
  background: rgba(147, 51, 234, 0.16);
  color: #7e22ce;
}

.alert-page .md-alert-card--announce .md-alert-card__icon {
  background: rgba(202, 138, 4, 0.18);
  color: #a16207;
}

.alert-page .md-alert-card--birthday .md-alert-card__icon {
  background: rgba(225, 29, 72, 0.14);
  color: #be123c;
}

.alert-page .md-alert-card--clock .md-alert-card__icon,
.alert-page .md-alert-card--clock-in .md-alert-card__icon,
.alert-page .md-alert-card[data-alert-type="clock_in"] .md-alert-card__icon {
  background: rgba(46, 125, 50, 0.18);
  color: #1b5e20;
}

.alert-page .md-alert-card--clock-out .md-alert-card__icon,
.alert-page .md-alert-card[data-alert-type="clock_out"] .md-alert-card__icon {
  background: rgba(183, 28, 28, 0.16);
  color: #b71c1c;
}

.alert-page .md-alert-card--static .md-alert-card__icon {
  background: rgba(95, 99, 104, 0.12);
  color: #5f6368;
}

.alert-page .md-alert-card--assessment .md-alert-card__link,
.alert-page .md-alert-card--class .md-alert-card__link {
  background: #f8fbff;
  border-color: #93c5fd;
}
.alert-page .md-alert-card--assessment .md-alert-card__accent,
.alert-page .md-alert-card--class .md-alert-card__accent {
  background: #2563eb;
}
.alert-page .md-alert-card--assessment .md-alert-card__link:hover,
.alert-page .md-alert-card--assessment .md-alert-card__link:focus-visible,
.alert-page .md-alert-card--class .md-alert-card__link:hover,
.alert-page .md-alert-card--class .md-alert-card__link:focus-visible {
  background: #eff6ff;
  border-color: #60a5fa;
}

.alert-page .md-alert-card--activity .md-alert-card__link,
.alert-page .md-alert-card--marked .md-alert-card__link {
  background: #f7fdf9;
  border-color: #86efac;
}
.alert-page .md-alert-card--activity .md-alert-card__accent,
.alert-page .md-alert-card--marked .md-alert-card__accent {
  background: #16a34a;
}
.alert-page .md-alert-card--activity .md-alert-card__link:hover,
.alert-page .md-alert-card--activity .md-alert-card__link:focus-visible,
.alert-page .md-alert-card--marked .md-alert-card__link:hover,
.alert-page .md-alert-card--marked .md-alert-card__link:focus-visible {
  background: #f0fdf4;
  border-color: #4ade80;
}

.alert-page .md-alert-card--topics .md-alert-card__link,
.alert-page .md-alert-card--library .md-alert-card__link {
  background: #fcf9ff;
  border-color: #d8b4fe;
}
.alert-page .md-alert-card--topics .md-alert-card__accent,
.alert-page .md-alert-card--library .md-alert-card__accent {
  background: #9333ea;
}
.alert-page .md-alert-card--topics .md-alert-card__link:hover,
.alert-page .md-alert-card--topics .md-alert-card__link:focus-visible,
.alert-page .md-alert-card--library .md-alert-card__link:hover,
.alert-page .md-alert-card--library .md-alert-card__link:focus-visible {
  background: #faf5ff;
  border-color: #c084fc;
}

.alert-page .md-alert-card--announce .md-alert-card__link {
  background: #fffdf7;
  border-color: #fcd34d;
}
.alert-page .md-alert-card--announce.md-alert-card--static .md-alert-card__link {
  background: #fcfcfd;
  border-color: #c0c4c8;
}
.alert-page .md-alert-card--announce .md-alert-card__accent {
  background: #ca8a04;
}
.alert-page .md-alert-card--announce.md-alert-card--static .md-alert-card__accent {
  background: #b0b5ba;
}
.alert-page .md-alert-card--announce .md-alert-card__link:hover,
.alert-page .md-alert-card--announce .md-alert-card__link:focus-visible {
  background: #fffbeb;
  border-color: #fbbf24;
}
.alert-page .md-alert-card--announce.md-alert-card--static .md-alert-card__link:hover,
.alert-page .md-alert-card--announce.md-alert-card--static .md-alert-card__link:focus-visible {
  background: #fcfcfd;
  border-color: #c0c4c8;
}

.alert-page .md-alert-card--birthday .md-alert-card__link {
  background: #fff8f9;
  border-color: #fda4af;
}
.alert-page .md-alert-card--birthday.md-alert-card--static .md-alert-card__link {
  background: #fcfcfd;
  border-color: #c0c4c8;
}
.alert-page .md-alert-card--birthday .md-alert-card__accent {
  background: #e11d48;
}
.alert-page .md-alert-card--birthday.md-alert-card--static .md-alert-card__accent {
  background: #b0b5ba;
}
.alert-page .md-alert-card--birthday .md-alert-card__link:hover,
.alert-page .md-alert-card--birthday .md-alert-card__link:focus-visible {
  background: #fff1f2;
  border-color: #fb7185;
}
.alert-page .md-alert-card--birthday.md-alert-card--static .md-alert-card__link:hover,
.alert-page .md-alert-card--birthday.md-alert-card--static .md-alert-card__link:focus-visible {
  background: #fcfcfd;
  border-color: #c0c4c8;
}

/* Clock in vs out — attribute selectors beat static gray and work even if class modifiers lag */
.alert-page .md-alert-card[data-alert-type="clock_in"] .md-alert-card__link,
.alert-page .md-alert-card[data-alert-type="clock_in"] .md-alert-card__link--static,
.alert-page .md-alert-card--clock-in .md-alert-card__link,
.alert-page .md-alert-card--clock-in .md-alert-card__link--static {
  background: linear-gradient(90deg, rgba(46, 125, 50, 0.16) 0%, #f3faf3 48%, #f7fbf7 100%) !important;
  border-color: #66bb6a !important;
  opacity: 1 !important;
}
.alert-page .md-alert-card[data-alert-type="clock_in"] .md-alert-card__accent,
.alert-page .md-alert-card--clock-in .md-alert-card__accent {
  width: 4px;
  background: #2e7d32 !important;
}
.alert-page .md-alert-card[data-alert-type="clock_in"] .md-alert-card__label,
.alert-page .md-alert-card--clock-in .md-alert-card__label {
  color: #1b5e20 !important;
}
.alert-page .md-alert-card[data-alert-type="clock_in"] .md-alert-card__icon,
.alert-page .md-alert-card[data-alert-type="clock_in"].md-alert-card--static .md-alert-card__icon,
.alert-page .md-alert-card--clock-in .md-alert-card__icon,
.alert-page .md-alert-card--clock-in.md-alert-card--static .md-alert-card__icon {
  background: rgba(46, 125, 50, 0.22) !important;
  color: #1b5e20 !important;
}

.alert-page .md-alert-card[data-alert-type="clock_out"] .md-alert-card__link,
.alert-page .md-alert-card[data-alert-type="clock_out"] .md-alert-card__link--static,
.alert-page .md-alert-card--clock-out .md-alert-card__link,
.alert-page .md-alert-card--clock-out .md-alert-card__link--static {
  background: linear-gradient(90deg, rgba(183, 28, 28, 0.14) 0%, #faf3f3 48%, #fdf7f7 100%) !important;
  border-color: #e57373 !important;
  opacity: 1 !important;
}
.alert-page .md-alert-card[data-alert-type="clock_out"] .md-alert-card__accent,
.alert-page .md-alert-card--clock-out .md-alert-card__accent {
  width: 4px;
  background: #c62828 !important;
}
.alert-page .md-alert-card[data-alert-type="clock_out"] .md-alert-card__label,
.alert-page .md-alert-card--clock-out .md-alert-card__label {
  color: #b71c1c !important;
}
.alert-page .md-alert-card[data-alert-type="clock_out"] .md-alert-card__icon,
.alert-page .md-alert-card[data-alert-type="clock_out"].md-alert-card--static .md-alert-card__icon,
.alert-page .md-alert-card--clock-out .md-alert-card__icon,
.alert-page .md-alert-card--clock-out.md-alert-card--static .md-alert-card__icon {
  background: rgba(183, 28, 28, 0.2) !important;
  color: #b71c1c !important;
}

.alert-page .md-alert-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.alert-page .md-alert-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.alert-page .md-alert-card__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9ca3af;
}

.alert-page .md-alert-card__time {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #9ca3af;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.alert-page .md-alert-card__text {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--al-ink);
  text-transform: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.alert-page .md-alert-card__text strong {
  font-weight: 650;
  color: var(--al-ink);
}

.alert-page .md-alert-card__extra {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--al-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.alert-page .md-alert-card__hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #1557b0;
}

.alert-page .md-alert-card__hint > i {
  font-size: 0.625rem;
}

.alert-page .md-alert-card--activity .md-alert-card__hint,
.alert-page .md-alert-card--marked .md-alert-card__hint {
  color: #15803d;
}

.alert-page .md-alert-card--topics .md-alert-card__hint,
.alert-page .md-alert-card--library .md-alert-card__hint {
  color: #7e22ce;
}

.alert-page .md-alert-card__main,
.alert-page .md-alert-card__meta,
.alert-page .md-alert-card__sep,
.alert-page .md-alert-card__trail,
.alert-page .md-alert-card__content,
.alert-page .md-alert-card__topline,
.alert-page .md-alert-card__chevron {
  display: none !important;
}

.alert-page .md-alert-end,
.alert-page .timeline_reached_max_test {
  display: none;
  margin: 8px 0 0;
  padding: 0;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #9ca3af;
}

.alert-page .md-alert-empty {
  display: none;
  align-items: center;
  justify-content: center;
  max-width: 680px;
  margin: 24px auto 0;
  padding: 28px 8px 40px;
  text-align: center;
}

.alert-page .md-alert-empty.is-visible,
.alert-page .md-alert-empty[style*="display: block"],
.alert-page .md-alert-empty[style*="display: flex"] {
  display: flex;
}

.alert-page .md-alert-empty__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 28px 24px 32px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 20px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 18%, rgba(26, 115, 232, 0.1), transparent 62%),
    linear-gradient(180deg, #f6f9fe 0%, #ffffff 56%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);
  box-sizing: border-box;
  gap: 0;
}

.alert-page .md-alert-empty__icon {
  display: none;
}

.alert-page .md-alert-empty__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(200px, 64vw);
  height: min(200px, 64vw);
  margin-bottom: 18px;
  border-radius: 50%;
  overflow: hidden;
  background: #e8f0fe;
  border: 3px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(26, 115, 232, 0.08),
    0 8px 20px rgba(26, 115, 232, 0.12);
}

.alert-page .md-alert-empty__image,
.alert-page img.md-alert-empty__image,
.alert-page img.emptycontent {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0;
  object-fit: cover;
  object-position: center;
  opacity: 1;
}

.alert-page .md-alert-empty__title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--al-ink, #202124);
}

.alert-page .md-alert-empty__text {
  margin: 0;
  max-width: 18rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--al-muted, #5f6368);
}

.alert-page .loader-ellips {
  min-height: 48px;
  padding: 20px 0 8px;
  transition: opacity 0.2s ease;
}

.alert-page .loader-ellips.is-idle {
  opacity: 0;
  pointer-events: none;
}

.alert-page .loader-ellips.is-idle .md-loading__spinner {
  animation-play-state: paused;
}

.alert-page .loader-ellips.is-loading {
  opacity: 1;
}

.alert-page .loader-ellips.is-complete {
  min-height: 0;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.is-webview .alert-page .md-alert-toolbar.card-filter {
  left: 0;
  right: 0;
  max-width: none;
  width: 100%;
  transform: none;
}

.is-webview .alert-page .alert-feed.page-content,
.is-webview .alert-page .page-content {
  max-width: 560px;
  padding-right: 16px !important;
  padding-left: 16px !important;
}

@media (max-width: 480px) {
  .alert-page .alert-feed.page-content,
  .alert-page .page-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .alert-page .md-alert-toolbar__title {
    font-size: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alert-page .md-animate-in,
  .alert-page .md-alert-card,
  .alert-page .md-alert-card__link {
    animation: none;
    transition: none;
    transform: none;
  }
}

/* >>> recovered: alert-modal (340 lines) <<< */
/* ── Alert page: fullEmptyModal redesign (MUI dialog) ── */

.alert-page #fullEmptyModal.modal-main-dialog {
  background: var(--al-feed-bg, #eef1f4) !important;
  font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.alert-page #fullEmptyModal > .card.rounded-0 {
  position: sticky;
  top: 0;
  z-index: 10;
  height: auto !important;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: var(--al-surface, #fff) !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.alert-page #fullEmptyModal > .card.rounded-0 > .px-3.py-3 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px !important;
}

.alert-page #fullEmptyModal > .card.rounded-0 .modal-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  float: none !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--al-ink, #202124);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alert-page #fullEmptyModal > .card.rounded-0 .close-menu {
  order: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border: none !important;
  border-radius: 50% !important;
  background: #f1f3f4 !important;
  color: #5f6368 !important;
  font-size: 0 !important;
  cursor: pointer;
  transition: background 0.15s ease;
}

.alert-page #fullEmptyModal > .card.rounded-0 .close-menu i {
  font-size: 0.875rem !important;
  color: #5f6368 !important;
}

.alert-page #fullEmptyModal > .card.rounded-0 .close-menu:hover,
.alert-page #fullEmptyModal > .card.rounded-0 .close-menu:focus-visible {
  background: #e8eaed !important;
}

.alert-page #fullEmptyModal > .card.rounded-0 > .divider {
  display: none !important;
}

.alert-page #fullEmptyModal .canvas-spinner {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 200px !important;
  margin: 0 !important;
  padding: 40px 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.alert-page #fullEmptyModal .canvas-spinner:not(.d-none) {
  display: flex !important;
}

.alert-page #fullEmptyModal .canvas-spinner .spinner-border {
  display: none !important;
}

.alert-page #fullEmptyModal .canvas-spinner .center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-page #fullEmptyModal .canvas-spinner::after {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--al-accent, #ed6c02);
  border-radius: 50%;
  animation: md-spin 0.7s linear infinite;
}

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

.alert-page #fullEmptyModal .canvas-contents {
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.alert-page #fullEmptyModal .canvas-contents > .content {
  min-height: 0 !important;
  padding: 12px 12px 80px !important;
}

.alert-page #fullEmptyModal .canvas-contents .card.card-styles {
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.alert-page #fullEmptyModal .canvas-contents .modal-div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Assessment card inside modal */
.alert-page #fullEmptyModal .md-assess-card {
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  background: var(--al-surface, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.alert-page #fullEmptyModal .md-assess-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 8px;
}

.alert-page #fullEmptyModal .md-assess-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #e8f0fe;
  color: #1565c0;
  font-size: 0.875rem;
}

.alert-page #fullEmptyModal .md-assess-card__meta {
  flex: 1;
  min-width: 0;
}

.alert-page #fullEmptyModal .md-assess-card__subject {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5f6368;
}

.alert-page #fullEmptyModal .md-assess-card__subject-badge {
  display: inline-flex;
  padding: 1px 6px;
  border-radius: 999px;
  background: #e8f0fe;
  color: #1565c0;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.alert-page #fullEmptyModal .md-assess-card__title {
  margin: 2px 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--al-ink, #202124);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alert-page #fullEmptyModal .md-assess-card__body {
  padding: 0 14px 12px;
}

.alert-page #fullEmptyModal .md-assess-card__desc {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
  color: #5f6368;
}

.alert-page #fullEmptyModal .md-assess-card__score {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #e8f5e9;
  font-size: 0.875rem;
  font-weight: 700;
  color: #2e7d32;
}

.alert-page #fullEmptyModal .md-assess-card__score-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #4caf50;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.alert-page #fullEmptyModal .md-assess-card__time {
  display: block;
  margin-top: 6px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.38);
}

/* Modal footer */
.alert-page #fullEmptyModal > #footer-bar,
.alert-page #fullEmptyModal > .modal-footer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 10;
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  padding-bottom: calc(10px + var(--md-sheet-footer-safe, 0px)) !important;
  background: var(--al-surface, #fff) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.04) !important;
  transform: none !important;
}

.alert-page #fullEmptyModal .md-assess-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  height: 42px;
  margin: 0;
  padding: 0 24px;
  border: none;
  border-radius: 999px;
  background: #f1f3f4;
  color: #202124;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.alert-page #fullEmptyModal .md-assess-close:hover,
.alert-page #fullEmptyModal .md-assess-close:focus-visible {
  background: #e8eaed;
}

/* Legacy footer fallback — style the old close button */
.alert-page #fullEmptyModal .space_evenly {
  display: flex;
  justify-content: center;
  width: 100%;
}

.alert-page #fullEmptyModal .space_evenly .item_space {
  width: 100%;
  max-width: 320px;
}

.alert-page #fullEmptyModal .space_evenly .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 0 24px;
  border: none !important;
  border-radius: 999px !important;
  background: #f1f3f4 !important;
  color: #202124 !important;
  font-family: inherit;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
  cursor: pointer;
  transition: background 0.15s ease;
}

.alert-page #fullEmptyModal .space_evenly .btn:hover,
.alert-page #fullEmptyModal .space_evenly .btn:focus-visible {
  background: #e8eaed !important;
}

/* >>> recovered: alert-sheet (318 lines) <<< */
/* ── Alert page: assessment bottom sheet (Material) ── */

@keyframes al-sheet-rise {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes al-sheet-fall {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}
@keyframes al-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#alertAssessSheet {
  position: fixed;
  inset: 0;
  z-index: 1400;
  font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#alertAssessSheet[hidden] {
  display: none !important;
}
#alertAssessSheet.is-open {
  display: block;
}

.al-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(32, 33, 36, 0.48);
  animation: al-backdrop-in 0.2s ease both;
}

.al-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 820px);
  border-radius: 28px 28px 0 0;
  background: #ffffff;
  box-shadow: 0 -4px 32px rgba(60, 64, 67, 0.16);
  overflow: hidden;
  animation: al-sheet-rise 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#alertAssessSheet.is-closing .al-sheet__panel {
  animation: al-sheet-fall 0.2s cubic-bezier(0.4, 0, 1, 1) both;
}

.al-sheet__handle {
  flex-shrink: 0;
  width: 32px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: #dadce0;
}

.al-sheet__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
  padding: 12px 12px 14px 20px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 70%);
  border-bottom: 1px solid rgba(60, 64, 67, 0.1);
}

.al-sheet__heading {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}

.al-sheet__overline {
  display: none;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a73e8;
  line-height: 1.2;
}
.al-sheet__overline:not(:empty) {
  display: block;
}

.al-sheet__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #202124;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-sheet__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #5f6368;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.al-sheet__close:hover,
.al-sheet__close:focus-visible {
  background: #e8eaed;
  color: #202124;
  outline: none;
}

.al-sheet__loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 0;
  flex-shrink: 0;
}
.al-sheet__loader[hidden] {
  display: none !important;
}

.al-sheet__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 12px;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.al-sheet__body .md-alert-bday-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.al-sheet__body .md-alert-bday-list__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(60, 64, 67, 0.12);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.al-sheet__body .md-alert-bday-list__item.is-today {
  border-color: #fda4af;
  background:
    linear-gradient(90deg, rgba(225, 29, 72, 0.08) 0%, #fff 48%);
}

.al-sheet__body .md-alert-bday-list__date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(225, 29, 72, 0.1);
  color: #be123c;
  font-family: var(--md-font, "Jost", sans-serif);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.al-sheet__body .md-alert-bday-list__item.is-today .md-alert-bday-list__date {
  background: rgba(225, 29, 72, 0.16);
  color: #9f1239;
}

.al-sheet__body .md-alert-bday-list__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.al-sheet__body .md-alert-bday-list__name {
  font-family: var(--md-font, "Jost", sans-serif);
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #202124;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-sheet__body .md-alert-bday-list__meta {
  font-size: 0.75rem;
  font-weight: 500;
  color: #5f6368;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-sheet__body .md-alert-bday-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 16px;
  text-align: center;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(60, 64, 67, 0.1);
}

.al-sheet__body .md-alert-bday-empty__title {
  margin: 0;
  font-family: var(--md-font, "Jost", sans-serif);
  font-size: 1rem;
  font-weight: 700;
  color: #202124;
}

.al-sheet__body .md-alert-bday-empty__text {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #5f6368;
  line-height: 1.45;
  max-width: 28ch;
}

.al-sheet__footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  padding-bottom: calc(12px + var(--md-sheet-footer-safe, 0px));
  background: #fff;
  border-top: 1px solid rgba(60, 64, 67, 0.1);
}

.al-sheet__done.md-btn-contained,
.al-sheet__done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: auto;
  max-width: none;
  min-height: 44px;
  border: none;
  border-radius: 12px;
  text-transform: none;
  box-shadow: none;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.al-sheet__view.md-btn-contained,
.al-sheet__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1.15;
  min-height: 44px;
  border-radius: 12px;
  text-decoration: none;
  text-transform: none;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}

.al-sheet__view[hidden] {
  display: none !important;
}

/* Assessment result cards in alert sheet */
#alertAssessSheet .md-assess-card,
.al-sheet__body .md-assess-card {
  border: 1px solid rgba(60, 64, 67, 0.12);
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.06);
}

#alertAssessSheet .md-assess-card__head,
.al-sheet__body .md-assess-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: none;
  background: #fff;
}

#alertAssessSheet .md-assess-card__icon,
.al-sheet__body .md-assess-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e8f0fe;
  color: #1a73e8;
  font-size: 0.9375rem;
}

#alertAssessSheet .md-assess-card__meta,
.al-sheet__body .md-assess-card__meta {
  flex: 1;
  min-width: 0;
}

#alertAssessSheet .md-assess-card__subject-badge,
.al-sheet__body .md-assess-card__subject-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8f0fe;
  color: #174ea6;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
}

#alertAssessSheet .md-assess-card__title,
.al-sheet__body .md-assess-card__title {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #202124;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#alertAssessSheet .md-assess-card__class,
.al-sheet__body .md-assess-card__class {
  margin: 2px 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: #5f6368;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#alertAssessSheet .md-assess-card__score-pill,
.al-sheet__body .md-assess-card__score-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 6px 10px;
  border-radius: 12px;
  background: #e6f4ea;
  color: #137333;
  line-height: 1;
}

#alertAssessSheet .md-assess-card--mid .md-assess-card__score-pill,
.al-sheet__body .md-assess-card--mid .md-assess-card__score-pill {
  background: #fef7e0;
  color: #e37400;
}

#alertAssessSheet .md-assess-card--low .md-assess-card__score-pill,
.al-sheet__body .md-assess-card--low .md-assess-card__score-pill {
  background: #fce8e6;
  color: #c5221f;
}

#alertAssessSheet .md-assess-card__score-num,
.al-sheet__body .md-assess-card__score-num {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

#alertAssessSheet .md-assess-card__score-den,
.al-sheet__body .md-assess-card__score-den {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.8;
}

#alertAssessSheet .md-assess-card__body,
.al-sheet__body .md-assess-card__body {
  padding: 0 14px 14px;
}

#alertAssessSheet .md-assess-card__progress,
.al-sheet__body .md-assess-card__progress {
  height: 6px;
  border-radius: 999px;
  background: #e8eaed;
  overflow: hidden;
  margin-bottom: 8px;
}

#alertAssessSheet .md-assess-card__progress-bar,
.al-sheet__body .md-assess-card__progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #34a853;
}

#alertAssessSheet .md-assess-card__progress-bar--mid,
.al-sheet__body .md-assess-card__progress-bar--mid {
  background: #f9ab00;
}

#alertAssessSheet .md-assess-card__progress-bar--low,
.al-sheet__body .md-assess-card__progress-bar--low {
  background: #ea4335;
}

#alertAssessSheet .md-assess-card__score-row,
.al-sheet__body .md-assess-card__score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
}

#alertAssessSheet .md-assess-card__pct,
.al-sheet__body .md-assess-card__pct {
  font-size: 0.75rem;
  font-weight: 700;
  color: #5f6368;
}

#alertAssessSheet .md-assess-card__time,
.al-sheet__body .md-assess-card__time {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #80868b;
  white-space: nowrap;
}

#alertAssessSheet .md-assess-card__comment,
.al-sheet__body .md-assess-card__comment {
  margin: 8px 0 0;
  padding: 8px 10px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #5f6368;
  background: #f1f3f4;
  border-radius: 8px;
}

/* Parent check subject assessment — card list in cover sheet */
.csa-assess-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 12px;
}

#emptyModal .csa-assess-list .md-assess-card {
  margin: 0;
}

body.al-sheet-open,
html.al-sheet-open {
  overflow: hidden;
}

/* ── Alert sheet: class activity preview ── */
.md-activity-preview {
  --act-ink: #1a2332;
  --act-muted: #5f6b7a;
  --act-line: rgba(26, 35, 50, 0.1);
  --act-surface: #f7f8fa;
  --act-accent: #1565c0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 2px 0 8px;
  font-family: "Jost", sans-serif;
  color: var(--act-ink);
}

.md-activity-preview__hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background: var(--act-surface);
  border: 1px solid var(--act-line);
}

.md-activity-preview__who {
  display: flex;
  align-items: center;
  gap: 12px;
}

.md-activity-preview__avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--act-line);
}

.md-activity-preview__who-text {
  min-width: 0;
  flex: 1;
}

.md-activity-preview__eyebrow {
  margin: 0 0 2px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--act-accent);
}

.md-activity-preview__student {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--act-ink);
}

.md-activity-preview__status {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  background: #e8f0fe;
  color: #174ea6;
}

.md-activity-preview__status--submitted {
  background: #e6f4ea;
  color: #137333;
}

.md-activity-preview__status--marked {
  background: #fef7e0;
  color: #b06000;
}

.md-activity-preview__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--act-ink);
}

.md-activity-preview__meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.md-activity-preview__meta::-webkit-scrollbar {
  display: none;
}

.md-activity-preview__chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--act-line);
  color: var(--act-muted);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

.md-activity-preview__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.md-activity-preview__fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--act-line);
  text-align: center;
}

.md-activity-preview__fact-label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--act-muted);
}

.md-activity-preview__fact-value {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--act-ink);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-activity-preview__brief {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--act-line);
}

.md-activity-preview__brief-title {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--act-muted);
}

.md-activity-preview__brief-text {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--act-ink);
  white-space: pre-wrap;
}

/* >>> recovered: topic (747 lines) <<< */
/* ── zap-app: topic-page ── */

/* Legacy Appkit header is replaced by the topic toolbar back row */
html.topic-app .header.header-fixed,
body.topic-app .header.header-fixed,
.is-webview.topic-app .header.header-fixed,
.is-webview body.topic-app .header.header-fixed {
  display: none !important;
}

html.topic-app .page-title-clear,
body.topic-app .page-title-clear {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.topic-app {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.topic-app #page,
body.topic-app .md-page.topic-page,
body.topic-app .md-page.topic-page .topic-feed.page-content,
body.topic-app .md-page.topic-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.topic-page {
  --topic-primary: #1976d2;
  --topic-primary-dark: #1565c0;
  --topic-primary-light: #42a5f5;
  --topic-primary-soft: #e3f2fd;
  --topic-bg: #f5f5f5;
  --topic-surface: #ffffff;
  --topic-ink: #0d47a1;
  --md-header-offset: 0px;
  --md-topic-toolbar-height: 208px;
  --md-topic-toolbar-offset: var(--md-topic-toolbar-height);
  --mui-primary: var(--topic-primary);
  --mui-primary-dark: var(--topic-primary-dark);
  --mui-primary-light: var(--topic-primary-light);
  --mui-primary-container: var(--topic-primary-soft);
  --mui-font: "Jost", sans-serif;
  --md-font: "Jost", sans-serif;
  --md-soft-pill-bg: var(--topic-primary-soft);
  --md-soft-pill-border: rgba(25, 118, 210, 0.22);
  --md-soft-pill-primary: var(--topic-primary);
  --md-soft-pill-overline: rgba(21, 101, 192, 0.72);
  --md-soft-pill-ink: var(--topic-ink);
  font-family: "Jost", sans-serif !important;
  background: var(--topic-bg);
  min-height: 100vh;
}

.topic-page a,
.topic-page button,
.topic-page .mui-btn,
.topic-page .md-btn-contained,
.topic-page .md-ripple {
  -webkit-tap-highlight-color: transparent;
}

.topic-page .page-title-clear {
  display: none !important;
}

/* Shared empty_modal — hide until .menu-active
   (custom.js sets display:block on every .menu; bootstrap .menu-box-modal
   only uses opacity/transform — must hard-hide or the sheet covers the feed) */
#empty_modal.menu {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 1300;
}

#empty_modal.menu.menu-active {
  display: block !important;
  opacity: 1 !important;
  pointer-events: all !important;
}

/* Floating form dialogs: undo full-screen shell above when body has .md-sl-form.
   Only while .menu-active — :has() without it kept display:flex after close and
   trapped scroll under an invisible overlay.
   Center with inset + margin:auto so mobile lock/unlock cannot shift the card. */
#empty_modal.menu.menu-active:has(.md-sl-form),
#empty_modal.menu.menu-active:has(.md-parent-devices) {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: 0 !important;
  width: min(440px, calc(100vw - 24px)) !important;
  max-width: min(440px, calc(100vw - 24px)) !important;
  height: fit-content !important;
  max-height: min(92dvh, 720px) !important;
  margin: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.22) !important;
}

/* Profile password / QR — same floating dialog treatment */
#empty_modal.menu.menu-active:has(.md-profile-sheet) {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: 0 !important;
  width: min(420px, calc(100vw - 24px)) !important;
  max-width: min(420px, calc(100vw - 24px)) !important;
  height: fit-content !important;
  max-height: min(92dvh, 680px) !important;
  margin: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* Passport upload — floating dialog; footer pinned to card bottom */
#empty_modal.menu.menu-active:has(.md-passport) {
  display: flex !important;
  flex-direction: column !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: 0 !important;
  width: min(420px, calc(100vw - 24px)) !important;
  max-width: min(420px, calc(100vw - 24px)) !important;
  height: fit-content !important;
  max-height: min(92dvh, 640px) !important;
  margin: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 18px 48px rgba(13, 71, 161, 0.22) !important;
}

/* ── Toolbar (MUI AppBar + dual context) ── */

.topic-page .md-topic-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--mui-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)) !important;
  background: var(--mui-surface, #fff) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none !important;
  overflow: visible !important;
}

.topic-page .md-topic-toolbar .content,
.topic-page .md-topic-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px 16px 12px !important;
  box-sizing: border-box;
}

.topic-page .md-topic-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.topic-page .md-topic-toolbar__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #202124;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.topic-page .md-topic-toolbar__back:hover,
.topic-page .md-topic-toolbar__back:focus-visible {
  background: #e8eaed;
  color: #202124;
  outline: none;
}

.topic-page .md-topic-toolbar__title {
  margin: 0;
  flex: 0 0 auto;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #202124;
  text-transform: none;
  white-space: nowrap;
}

.topic-page .md-topic-toolbar__context {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 100%;
}

.topic-page .md-topic-toolbar__chip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  max-width: none;
  min-height: 0;
  height: 26px;
  margin: 0;
  padding: 1px 6px 1px 3px;
  box-sizing: border-box;
  border: none;
  border-radius: 8px;
  background: #f1f3f4;
  color: #5f6368;
  font-family: var(--mui-font, "Jost", sans-serif);
  pointer-events: none;
}

.topic-page .md-topic-toolbar__chip--class,
.topic-page .md-topic-toolbar__chip--subject,
.topic-page .md-topic-toolbar__chip--week,
.topic-page .md-topic-toolbar__chip--topic,
.topic-page .md-topic-toolbar__chip--session,
.topic-page .md-topic-toolbar__chip--term,
.topic-page .md-topic-toolbar__chip--st {
  background: #f1f3f4;
  color: #5f6368;
}

.topic-page .md-topic-toolbar__chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 0.5rem;
  background: #5f6368;
  color: #fff;
}

.topic-page .md-topic-toolbar__chip--class .md-topic-toolbar__chip-avatar,
.topic-page .md-topic-toolbar__chip--subject .md-topic-toolbar__chip-avatar,
.topic-page .md-topic-toolbar__chip--week .md-topic-toolbar__chip-avatar,
.topic-page .md-topic-toolbar__chip--topic .md-topic-toolbar__chip-avatar,
.topic-page .md-topic-toolbar__chip--session .md-topic-toolbar__chip-avatar,
.topic-page .md-topic-toolbar__chip--term .md-topic-toolbar__chip-avatar,
.topic-page .md-topic-toolbar__chip--st .md-topic-toolbar__chip-avatar {
  background: #5f6368;
  color: #fff;
}

.topic-page .md-topic-toolbar__chip-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0;
  flex: 1;
  text-align: left;
}

.topic-page .md-topic-toolbar__chip-overline {
  font-size: 0.4375rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  color: #5f6368;
}

.topic-page .md-topic-toolbar__chip--class .md-topic-toolbar__chip-overline,
.topic-page .md-topic-toolbar__chip--subject .md-topic-toolbar__chip-overline,
.topic-page .md-topic-toolbar__chip--week .md-topic-toolbar__chip-overline,
.topic-page .md-topic-toolbar__chip--topic .md-topic-toolbar__chip-overline,
.topic-page .md-topic-toolbar__chip--session .md-topic-toolbar__chip-overline,
.topic-page .md-topic-toolbar__chip--term .md-topic-toolbar__chip-overline,
.topic-page .md-topic-toolbar__chip--st .md-topic-toolbar__chip-overline {
  color: #5f6368;
}

.topic-page .md-topic-toolbar__chip-text {
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.1;
  color: #5f6368;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topic-page .md-topic-toolbar__actions,
.topic-page .mui-toolbar__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  align-items: stretch;
}

.topic-page .md-topic-toolbar__actions--solo,
.topic-page .mui-toolbar__actions--solo {
  grid-template-columns: 1fr;
}

.topic-page .mui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  border: none;
  font-family: var(--mui-font, "Jost", sans-serif);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.02857em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.topic-page .md-topic-toolbar__actions .mui-btn,
.topic-page .md-topic-toolbar__actions .md-btn-contained {
  width: 100%;
  min-height: 42px;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: none;
}

.topic-page .md-topic-toolbar__actions .mui-btn i {
  font-size: 0.9375rem;
}

.topic-page .md-topic-toolbar__actions .mui-btn-outlined {
  background: transparent;
  color: var(--topic-primary);
  border: 1px solid rgba(25, 118, 210, 0.5);
  box-shadow: none;
}

.topic-page .md-topic-toolbar__actions .mui-btn-outlined:hover,
.topic-page .md-topic-toolbar__actions .mui-btn-outlined:focus-visible {
  background: rgba(25, 118, 210, 0.04);
  border-color: var(--topic-primary);
  color: var(--topic-primary);
}

.topic-page .md-topic-toolbar__actions .mui-btn-contained {
  background: var(--topic-primary);
  color: #fff;
  border: none;
  box-shadow: var(--mui-elevation-2, 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12));
}

.topic-page .md-topic-toolbar__actions .mui-btn-contained:hover,
.topic-page .md-topic-toolbar__actions .mui-btn-contained:focus-visible {
  background: var(--topic-primary-dark);
  color: #fff;
  box-shadow: var(--mui-elevation-4, 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12));
}

.is-webview .topic-page .md-topic-toolbar.card-filter {
  left: 0;
  right: 0;
  max-width: none;
  width: 100%;
  transform: none;
}

/* ── Feed ── */

.topic-page .topic-feed.page-content,
.topic-page .page-content,
.topic-page .topic-feed.md-feed {
  max-width: none !important;
  width: 100%;
  margin: 0 !important;
  padding-top: var(--md-topic-toolbar-offset) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 61px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 16px) !important;
  background: var(--topic-bg) !important;
  overflow: visible !important;
}

body.md-has-bottom-nav .topic-page .page-content {
  padding-top: var(--md-topic-toolbar-offset) !important;
  background: var(--topic-bg) !important;
}

.topic-page .topic-feed {
  max-width: 680px;
  margin: 0 auto;
}

.topic-page .md-topic-sort {
  margin: 0 0 8px;
}

.topic-page .md-topic-sort__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  padding: 0 2px;
}

.topic-page .md-topic-sort__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0d47a1;
}

.topic-page .md-topic-sort__hint {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #5f6368;
  white-space: nowrap;
}

.topic-page .md-topic-sort-strip {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(25, 118, 210, 0.16);
  background: var(--topic-surface, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.topic-page .md-topic-sort-strip--staff {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.topic-page .md-topic-sort-strip--learner {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.topic-page .md-topic-sort-strip--elibrary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}

.topic-page .md-topic-sort-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  background: rgba(25, 118, 210, 0.12);
  z-index: 2;
}

.topic-page .md-topic-sort-strip.is-filtering .md-topic-sort-progress {
  opacity: 1;
  visibility: visible;
}

.topic-page .md-topic-sort-progress__bar {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 0 2px 2px 0;
  background: var(--topic-primary, #1976d2);
  transform: translateX(-100%);
}

.topic-page .md-topic-sort-strip.is-filtering .md-topic-sort-progress__bar {
  animation: md-topic-sort-progress-indeterminate 1.1s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}

@keyframes md-topic-sort-progress-indeterminate {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(80%); }
  100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
  .topic-page .md-topic-sort-strip.is-filtering .md-topic-sort-progress__bar {
    animation: none;
    width: 100%;
    transform: none;
    opacity: 0.85;
  }
}

.topic-page .md-topic-sort-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  padding: 6px 2px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f8fbff;
  text-align: center;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.topic-page .md-topic-sort-stat:hover {
  background: #eef5ff;
  border-color: rgba(25, 118, 210, 0.22);
}

.topic-page .md-topic-sort-stat:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.2);
}

.topic-page .md-topic-sort-stat.is-active {
  background: #e3f2fd;
  border-color: #90caf9;
  box-shadow: inset 0 0 0 1px rgba(21, 101, 192, 0.08);
}

.topic-page .md-topic-sort-stat.is-alert {
  background: #fce8e6;
}

.topic-page .md-topic-sort-stat.is-alert.is-active {
  background: #fce8e6;
  border-color: #f6aea9;
}

.topic-page .md-topic-sort-stat__value {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  color: var(--topic-ink, #0d47a1);
}

.topic-page .md-topic-sort-stat.is-alert .md-topic-sort-stat__value {
  color: #d93025;
}

.topic-page .md-topic-sort-stat__label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--md-text-secondary, #5f6368);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

@media (min-width: 420px) {
  .topic-page .md-topic-sort-stat__label {
    font-size: 0.625rem;
  }

  .topic-page .md-topic-sort-stat {
    padding: 6px 4px;
  }
}

.topic-page .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.topic-page .md-search-field,
.topic-page .md-search-field--topic {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  max-width: none;
  min-height: 56px;
  margin: 8px 0 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--topic-surface, #fff) !important;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
  box-sizing: border-box;
  font-family: var(--mui-font, "Jost", sans-serif);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.topic-page .md-search-field:focus-within,
.topic-page .md-search-field--topic:focus-within {
  border-color: rgba(25, 118, 210, 0.28);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04),
    0 0 0 3px rgba(25, 118, 210, 0.1);
}

.topic-page .md-search-field__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--topic-primary);
  color: #fff;
  box-shadow: none;
}

.topic-page .md-search-field__icon {
  color: inherit;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.topic-page .md-search-field__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #202124;
}

.topic-page .md-search-field__input::placeholder {
  color: #5f6368;
  font-weight: 500;
}

.topic-page .md-topic-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0 0 0 auto;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #202124;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.topic-page .md-topic-toolbar__reload:hover,
.topic-page .md-topic-toolbar__reload:focus-visible {
  background: #e8eaed;
  color: #202124;
  outline: none;
}

.topic-page .md-topic-toolbar__reload.is-refreshing,
.topic-page .md-topic-toolbar__reload[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.72;
  background: #e8eaed;
}

/* ── Topic stream (hides DataTable chrome) ── */

.topic-page .md-topic-stream {
  max-width: 680px;
  margin: 0 auto;
}

.topic-page .md-topic-stream .dataTables_wrapper {
  position: relative;
  width: 100%;
}

.topic-page .md-topic-stream .dataTables_wrapper .dataTables_length,
.topic-page .md-topic-stream .dataTables_wrapper .dataTables_filter,
.topic-page .md-topic-stream .dataTables_wrapper .dataTables_info,
.topic-page .md-topic-stream .dataTables_wrapper .dataTables_paginate {
  display: none !important;
}

/* Show Loading topics… while ajax runs — do not leave stale cards (e.g. Materials count) visible. */
.topic-page .md-topic-stream .dataTables_processing {
  display: none !important;
  position: absolute;
  inset: 0;
  z-index: 6;
  margin: 0 !important;
  padding: 36px 16px;
  border: none;
  border-radius: 12px;
  background: rgba(248, 251, 255, 0.94);
  box-shadow: none;
  color: inherit;
  text-align: center;
}

.topic-page .md-topic-stream .dataTables_wrapper.is-loading .dataTables_processing {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.topic-page .md-topic-stream .dataTables_wrapper.is-loading table#student tbody {
  opacity: 0.28;
  pointer-events: none;
}

.topic-page .md-topic-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 36px 16px;
  text-align: center;
}

.topic-page .md-topic-empty__text {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.54);
}

.topic-page .md-topic-empty--loading .md-topic-empty__spinner,
.topic-page .md-topic-empty__spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid rgba(25, 118, 210, 0.18);
  border-top-color: #1976d2;
  border-radius: 50%;
  animation: md-topic-spin 0.7s linear infinite;
}

@keyframes md-topic-spin {
  to { transform: rotate(360deg); }
}

.topic-page .md-topic-stream table#student {
  display: block !important;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.topic-page .md-topic-stream table#student thead {
  display: none;
}

.topic-page .md-topic-stream table#student tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.topic-page .md-topic-stream table#student tbody tr,
.topic-page .md-topic-stream table#student tbody td {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* ── Lesson card (timeline-style outlined Card) ── */

.topic-page .md-topic-lesson,
.topic-page article.md-topic-lesson.md-card {
  margin: 4px 2px 14px;
  border: 1px solid #90caf9 !important;
  border-radius: 12px !important;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 8px 24px rgba(15, 23, 42, 0.1) !important;
  overflow: hidden;
  transform: translateZ(0);
}

.topic-page .md-topic-lesson__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  background:
    linear-gradient(135deg, #0b1b2b 0%, #12263a 48%, #16324f 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #f8fafc;
}

.topic-page .md-topic-lesson__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.topic-page .md-topic-lesson__avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(145deg, #42a5f5 0%, #1976d2 100%);
  color: #fff;
  font-size: 0.875rem;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.12),
    0 4px 10px rgba(0, 0, 0, 0.28);
}

.topic-page .md-topic-lesson__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.topic-page .md-topic-lesson__author {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topic-page .md-topic-lesson__meta {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(226, 232, 240, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topic-page .md-topic-lesson__head-aside {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.topic-page .md-topic-lesson__head .mui-chip {
  height: 22px;
  padding: 0 8px;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.topic-page .md-topic-lesson__head .mui-chip--success {
  background: rgba(46, 125, 50, 0.22);
  color: #a5d6a7;
  border-color: rgba(165, 214, 167, 0.28);
}

.topic-page .md-topic-lesson__head .mui-chip--error {
  background: rgba(211, 47, 47, 0.22);
  color: #ef9a9a;
  border-color: rgba(239, 154, 154, 0.28);
}

.topic-page .md-topic-lesson__head .mui-chip--info {
  background: rgba(66, 165, 245, 0.18);
  color: #90caf9;
  border-color: rgba(144, 202, 249, 0.28);
}

.topic-page .md-topic-lesson__head .mui-chip--neutral {
  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.14);
}

.topic-page .md-topic-lesson .mui-chip {
  height: 22px;
  padding: 0 8px;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
}

.topic-page .md-topic-lesson .mui-chip--info {
  background: #e3f2fd;
  color: #1565c0;
}

.topic-page .md-topic-lesson .mui-chip--neutral {
  background: #f1f3f4;
  color: #5f6368;
}

.topic-page .md-topic-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: 9px;
  background: var(--topic-primary-soft);
  color: var(--topic-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

.topic-page .md-topic-lesson__menu-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: rgba(248, 250, 252, 0.78);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.topic-page .md-topic-lesson__menu-btn:hover,
.topic-page .md-topic-lesson__menu-btn:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  outline: none;
}

.topic-page .md-topic-lesson__menu {
  position: relative;
}

/* MUI Menu surface */
.topic-page .md-topic-menu.dropdown-menu {
  min-width: 212px;
  max-width: min(280px, calc(100vw - 24px));
  margin: 4px 0 0 !important;
  padding: 8px 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #fff !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 8px 24px rgba(15, 23, 42, 0.14);
  overflow: hidden;
  z-index: 1080;
}

.topic-page .md-topic-menu .toggle_publish_div {
  display: block;
  margin: 0;
  padding: 0;
}

.topic-page .md-topic-menu__item,
.topic-page .md-topic-menu a.md-topic-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
  border: none !important;
  border-radius: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.87);
  font-family: var(--mui-font, "Jost", Roboto, sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-decoration: none !important;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.topic-page .md-topic-menu__item:hover,
.topic-page .md-topic-menu__item:focus-visible,
.topic-page .md-topic-menu a.md-topic-menu__item:hover,
.topic-page .md-topic-menu a.md-topic-menu__item:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.87);
  outline: none;
}

.topic-page .md-topic-menu__item:active {
  background: rgba(0, 0, 0, 0.08);
}

.topic-page .md-topic-menu__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  font-size: 0.9375rem;
  line-height: 1;
  color: #5f6368;
}

.topic-page .md-topic-menu__label {
  flex: 1 1 auto;
  min-width: 0;
}

.topic-page .md-topic-menu__item--danger,
.topic-page .md-topic-menu a.md-topic-menu__item--danger {
  color: #d32f2f;
}

.topic-page .md-topic-menu__item--danger .md-topic-menu__icon,
.topic-page .md-topic-menu a.md-topic-menu__item--danger .md-topic-menu__icon {
  color: #d32f2f;
}

.topic-page .md-topic-menu__item--danger:hover,
.topic-page .md-topic-menu__item--danger:focus-visible,
.topic-page .md-topic-menu a.md-topic-menu__item--danger:hover,
.topic-page .md-topic-menu a.md-topic-menu__item--danger:focus-visible {
  background: rgba(211, 47, 47, 0.08);
  color: #c62828;
}


.topic-page .md-topic-lesson__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 8px;
  background: #e0e3e7;
}

/* Soft-pill intro chips — same inset as facts / expand below */
.topic-page .md-topic-lesson__intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: calc(100% - 8px);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
  border-radius: 0;
}

.topic-page .md-topic-lesson__chip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  max-width: none;
  min-height: 40px;
  margin: 0;
  padding: 6px 12px 6px 8px;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  font-family: var(--mui-font, "Jost", sans-serif);
  box-shadow: none;
  pointer-events: none;
}

.topic-page .md-topic-lesson__chip--title,
.topic-page .md-topic-lesson__chip--class,
.topic-page .md-topic-lesson__chip--topic {
  background: #fff !important;
  color: #5f6368;
  border: 1px solid #e8eaed;
}

.topic-page .md-topic-lesson__chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.75rem;
  color: #fff;
}

.topic-page .md-topic-lesson__chip--title .md-topic-lesson__chip-avatar,
.topic-page .md-topic-lesson__chip--class .md-topic-lesson__chip-avatar,
.topic-page .md-topic-lesson__chip--topic .md-topic-lesson__chip-avatar {
  background: #5f6368;
  box-shadow: none;
}

.topic-page .md-topic-lesson__chip-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}

.topic-page .md-topic-lesson__chip-overline {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topic-page .md-topic-lesson__chip--title .md-topic-lesson__chip-overline,
.topic-page .md-topic-lesson__chip--class .md-topic-lesson__chip-overline,
.topic-page .md-topic-lesson__chip--topic .md-topic-lesson__chip-overline {
  color: #5f6368;
}

.topic-page .md-topic-lesson__chip-text,
.topic-page .md-topic-lesson__title {
  display: block;
  margin: 0;
  width: 100%;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}

.topic-page .md-topic-lesson__chip--title .md-topic-lesson__chip-text,
.topic-page .md-topic-lesson__chip--title .md-topic-lesson__title,
.topic-page .md-topic-lesson__chip--class .md-topic-lesson__chip-text,
.topic-page .md-topic-lesson__chip--topic .md-topic-lesson__chip-text {
  color: var(--mui-on-surface, rgba(0, 0, 0, 0.87));
}

.topic-page .md-topic-lesson__class-line {
  display: none;
}

/* Joined full-width summary strip (value over label, vertical dividers) */
.topic-page .md-topic-lesson__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid #bbdefb;
  border-left: none;
  border-right: none;
  border-radius: 0;
  background: #f5f9ff;
  box-shadow: none;
  box-sizing: border-box;
  overflow: hidden;
}

.topic-page .md-topic-lesson__fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 8px 4px;
  border: none;
  border-right: 1px solid #bbdefb;
  border-radius: 0;
  text-align: center;
  background: transparent;
  box-shadow: none;
}

.topic-page .md-topic-lesson__fact:last-child {
  border-right: none;
}

.topic-page .md-topic-lesson__fact-sep {
  display: none;
}

.topic-page .md-topic-lesson__fact-icon {
  display: none !important;
}

.topic-page .md-topic-lesson__fact-value,
.topic-page .md-topic-lesson__fact dd {
  margin: 0;
  max-width: 100%;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1565c0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-page .md-topic-lesson__fact-label,
.topic-page .md-topic-lesson__fact dt {
  margin: 0;
  max-width: 100%;
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5f6368;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 360px) {
  .topic-page .md-topic-lesson__facts {
    min-height: 0;
  }

  .topic-page .md-topic-lesson__fact {
    min-height: 48px;
    padding: 6px 2px;
  }

  .topic-page .md-topic-lesson__fact-value,
  .topic-page .md-topic-lesson__fact dd {
    font-size: 0.625rem;
  }
}

/* Expand — same horizontal inset as intro chips / facts */
.topic-page .md-topic-lesson__expand.mui-btn,
.topic-page .md-topic-lesson__expand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: calc(100% - 8px);
  margin: 0 auto;
  min-height: 44px;
  padding: 8px 12px 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.87);
  box-shadow: none;
  cursor: pointer;
  font-family: var(--mui-font, "Jost", sans-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  text-align: left;
  transition: none;
  -webkit-tap-highlight-color: transparent;
}

.topic-page .md-topic-lesson__expand:hover,
.topic-page .md-topic-lesson__expand:focus-visible,
.topic-page .md-topic-lesson__expand:active,
.topic-page .md-topic-lesson__expand:not(.collapsed),
.topic-page .md-topic-lesson__expand.collapsed {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.87);
  box-shadow: none;
  outline: none;
}

.topic-page .md-topic-lesson__expand-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--topic-primary-soft);
  color: var(--topic-primary);
  font-size: 0.75rem;
}

.topic-page .md-topic-lesson__expand-copy {
  flex: 1;
  min-width: 0;
}

.topic-page .md-topic-lesson__expand-label {
  display: none;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topic-page .md-topic-lesson__expand.collapsed .md-topic-lesson__expand-label--open,
.topic-page .md-topic-lesson__expand:not(.collapsed) .md-topic-lesson__expand-label--close {
  display: block;
}

/* Due status as MUI chip badge */
.topic-page .md-topic-lesson__expand-due {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  max-width: 42%;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.topic-page .md-topic-lesson__expand-due i {
  font-size: 0.625rem;
  opacity: 0.9;
}

.topic-page .md-topic-lesson__expand-due span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.topic-page .md-topic-lesson__expand-due--overdue {
  background: #fdecea;
  color: #c62828;
}

.topic-page .md-topic-lesson__expand-due--soon {
  background: #fff4e5;
  color: #ed6c02;
}

.topic-page .md-topic-lesson__expand-due--ok {
  background: #e8f5e9;
  color: #2e7d32;
}

.topic-page .md-topic-lesson__expand-due--none {
  background: #f1f3f4;
  color: #5f6368;
}

.topic-page .md-topic-lesson__expand-chevron {
  flex-shrink: 0;
  font-size: 0.6875rem;
  color: rgba(0, 0, 0, 0.45);
  opacity: 1;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.topic-page .md-topic-lesson__expand:not(.collapsed) .md-topic-lesson__expand-chevron {
  transform: rotate(180deg);
  color: rgba(0, 0, 0, 0.45);
}

.topic-page .md-topic-lesson__details {
  background: #eceff1;
}

.topic-page .md-topic-lesson__details:not(.show) {
  display: none;
}

.topic-page .md-topic-lesson__add-content {
  width: calc(100% - 8px);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.topic-page .md-topic-lesson__add-content .md-topic-lesson__add-btn,
.topic-page .md-topic-lesson__add-content .mui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  border: none;
  border-radius: 10px;
  font-family: var(--mui-font, "Jost", sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-decoration: none;
  color: #1565c0 !important;
  background: #e3f2fd;
  box-shadow: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.topic-page .md-topic-lesson__add-content .md-topic-lesson__add-btn i,
.topic-page .md-topic-lesson__add-content .mui-btn i {
  font-size: 0.875rem;
}

.topic-page .md-topic-lesson__add-content .md-topic-lesson__add-btn:hover,
.topic-page .md-topic-lesson__add-content .md-topic-lesson__add-btn:focus-visible,
.topic-page .md-topic-lesson__add-content .mui-btn:hover,
.topic-page .md-topic-lesson__add-content .mui-btn:focus-visible {
  background: #bbdefb;
  color: #0d47a1 !important;
  box-shadow: none;
  outline: none;
}

.topic-page .md-topic-lesson__add-content .md-topic-lesson__add-btn:active,
.topic-page .md-topic-lesson__add-content .mui-btn:active {
  background: #90caf9;
  transform: translateY(1px);
  box-shadow: none;
}

/* Add-content action sheet */
.topic-page ~ #createAction.md-topic-create-sheet .md-sl-sheet__overline,
#createAction.md-topic-create-sheet .md-sl-sheet__overline {
  color: var(--topic-primary, #1976d2);
}

#createAction.md-topic-create-sheet .md-sl-sheet-list {
  padding: 0 8px 12px;
}

#createAction.md-topic-create-sheet .md-sl-sheet-item__icon--amber {
  background: #fef7e0;
  color: #e37400;
}

#createAction.md-topic-create-sheet .md-sl-sheet-item__icon--teal {
  background: #e0f2f1;
  color: #00796b;
}

/* Topic create activity / e-library cover sheets */
.md-topic-create {
  max-width: 680px;
  margin: 0 auto;
  font-family: "Jost", sans-serif;
}

.md-topic-create__intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.md-topic-create__intro-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 1rem;
}

.md-topic-create__intro-icon--amber {
  background: #fef7e0;
  color: #e37400;
}

.md-topic-create__intro-icon--teal {
  background: #e0f2f1;
  color: #00796b;
}

.md-topic-create__intro-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.md-topic-create__intro-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #202124;
  line-height: 1.3;
}

.md-topic-create__intro-text {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(32, 33, 36, 0.62);
  line-height: 1.4;
}

.md-topic-create__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.md-topic-create__field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.md-topic-create__step {
  display: none;
}

.md-topic-create__control {
  flex: 1 1 auto;
  min-width: 0;
}

.topic-create-sheet .md-topic-create .mui-field__label,
.md-topic-create .mui-field__label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #5f6368;
}

.topic-create-sheet .md-topic-create .mui-field__input,
.topic-create-sheet .md-topic-create .mui-field__select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 12px;
  background: #f8f9fa;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #202124;
  box-shadow: none;
}

.topic-create-sheet .md-topic-create .mui-field__input:hover,
.topic-create-sheet .md-topic-create .mui-field__select:hover {
  background: #f1f3f4;
  border-color: rgba(15, 23, 42, 0.22);
}

.topic-create-sheet .md-topic-create .mui-field__input:focus,
.topic-create-sheet .md-topic-create .mui-field__select:focus {
  outline: none;
  background: #fff;
  border-color: #1565c0;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16);
}

.md-topic-create__hint {
  margin: 6px 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(32, 33, 36, 0.55);
}

.md-topic-create__notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(21, 101, 192, 0.14);
  border-radius: 10px;
  background: #f8fbff;
  color: #1565c0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

.md-topic-create__notice i {
  flex-shrink: 0;
  margin-top: 2px;
}

.md-topic-create__upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.md-topic-create__upload .file_group {
  flex: 1 1 auto;
  min-width: 0;
}

.md-topic-create__files {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
}

.md-topic-create__file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  background: #f8fafc;
}

.md-topic-create__file-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff8e1;
  color: #f9a825;
}

.md-topic-create__file-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-topic-create__file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 0 0 auto;
}

.md-topic-create__file-actions .md-btn-contained {
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.8125rem;
  text-transform: none;
}

.md-topic-create__clear {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  text-transform: none;
}

.md-topic-create__picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.md-topic-create__picker {
  flex: 1 1 auto;
  min-width: 0;
}

.md-topic-create__spinner {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.md-topic-create__loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(21, 101, 192, 0.2);
  border-top-color: #1565c0;
  border-radius: 50%;
  animation: md-topic-create-spin 0.7s linear infinite;
}

@keyframes md-topic-create-spin {
  to { transform: rotate(360deg); }
}

.md-topic-create__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 4px;
  color: rgba(32, 33, 36, 0.45);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.md-topic-create__or::before,
.md-topic-create__or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(15, 23, 42, 0.1);
}

.topic-create-sheet .bootstrap-select > .dropdown-toggle,
.topic-create-sheet .md-topic-create__selectpicker {
  min-height: 48px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  border-radius: 12px !important;
  background: #f8f9fa !important;
  color: #202124 !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.topic-create-sheet .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
  color: #202124;
}

.topic-create-sheet .note-editor.note-frame {
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.topic-create-sheet .note-editor.note-frame .note-toolbar {
  background: #f8f9fa;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

@media (max-width: 680px) {
  .topic-create-sheet .note-editor.note-frame .note-toolbar,
  #fullEmptyModal .note-editor.note-frame .note-toolbar {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    max-height: 64px; /* two toolbar rows */
    overflow: hidden;
    padding: 4px 6px !important;
  }

  .topic-create-sheet .note-toolbar > .note-btn-group,
  #fullEmptyModal .note-toolbar > .note-btn-group {
    margin: 0 !important;
  }

  .topic-create-sheet .note-toolbar .note-btn,
  #fullEmptyModal .note-toolbar .note-btn {
    height: 28px;
    min-width: 28px;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 1.2;
  }

  .topic-create-sheet .note-toolbar .note-btn.dropdown-toggle,
  #fullEmptyModal .note-toolbar .note-btn.dropdown-toggle {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Keep essentials on two lines; hide lower-priority groups */
  .topic-create-sheet .note-toolbar .note-font,
  .topic-create-sheet .note-toolbar .note-height,
  .topic-create-sheet .note-toolbar .note-insert,
  #fullEmptyModal .note-toolbar .note-font,
  #fullEmptyModal .note-toolbar .note-height,
  #fullEmptyModal .note-toolbar .note-insert {
    display: none !important;
  }
}

.topic-create-sheet .md-timeline-sheet__footer .create_assignment_button,
.topic-create-sheet .md-timeline-sheet__footer .create_e_library_button {
  flex: 1;
  min-height: 42px;
  border: none;
  text-transform: none;
}

/* Panels (MUI Accordion) — even spacing */
.topic-page .md-topic-lesson__panels {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px 12px;
}

.topic-page .md-topic-lesson__panels > .accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.topic-page .md-topic-panel {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  margin: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden;
  background: #fff;
}

.topic-page .md-topic-panel:last-child {
  margin-bottom: 0 !important;
}

.topic-page .md-topic-panel__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem;
  color: rgba(0, 0, 0, 0.87);
  text-align: left;
  transition: background 0.15s;
}

.topic-page .md-topic-panel__trigger:hover {
  background: rgba(25, 118, 210, 0.04);
}

.topic-page .md-topic-panel__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--topic-primary-soft);
  color: var(--topic-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  flex-shrink: 0;
}

.topic-page .md-topic-panel__label {
  font-weight: 600;
  letter-spacing: 0.01em;
  flex: 1;
  min-width: 0;
  text-transform: none;
}

.topic-page .md-topic-panel__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.topic-page .md-topic-panel__copy .md-topic-panel__label {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.topic-page .md-topic-panel__hint {
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: rgba(0, 0, 0, 0.38);
  text-transform: none;
}

.topic-page .md-topic-panel__trigger:not(.collapsed) .md-topic-panel__hint {
  display: none;
}

.topic-page .md-topic-panel__chevron {
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.45);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-left: 4px;
}

.topic-page .md-topic-panel__trigger:not(.collapsed) .md-topic-panel__chevron {
  transform: rotate(180deg);
}

.topic-page .md-topic-panel__body,
.topic-page .md-topic-panel .collapse {
  background: #fafafa;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.topic-page .md-topic-panel .collapse.show,
.topic-page .md-topic-panel .collapse:not(.show) {
  padding: 0;
}

.topic-page .md-topic-panel .collapse.show {
  padding: 10px 12px 12px;
}

.topic-page .md-topic-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.topic-page .md-topic-panel__actions .mui-btn {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 34px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
}

.topic-page .md-topic-panel__actions .mui-btn-contained {
  background: var(--topic-primary);
  color: #fff;
  border: none;
}

.topic-page .md-topic-panel__actions .mui-btn-outlined {
  background: #fff;
  color: var(--topic-primary);
  border: 1px solid rgba(25, 118, 210, 0.4);
}

.topic-page .md-topic-panel__actions .mui-btn--danger {
  color: #d32f2f;
  border-color: rgba(211, 47, 47, 0.4);
}

.topic-page .md-topic-panel .styled-table {
  width: 100%;
  margin: 4px 0 8px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

/* Footer (CardActions) */
.topic-page .md-topic-lesson__foot {
  display: flex;
  justify-content: stretch;
  padding: 8px 10px 10px;
  border-top: 1px solid #e8eaed;
  background: #fafafa;
}

.topic-page .md-topic-lesson__foot .mui-button-text,
.topic-page .md-topic-lesson__foot .view_discussion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid #bbdefb;
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--topic-primary);
  text-decoration: none;
  gap: 8px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.topic-page .md-topic-lesson__foot .mui-button-text:hover,
.topic-page .md-topic-lesson__foot .mui-button-text:focus-visible,
.topic-page .md-topic-lesson__foot .view_discussion:hover,
.topic-page .md-topic-lesson__foot .view_discussion:focus-visible {
  background: var(--topic-primary-soft, #e8eaf6);
  border-color: var(--topic-primary);
  color: var(--topic-primary);
  outline: none;
}

.topic-page .md-topic-lesson__foot .md-topic-count-badge {
  margin-left: 2px;
}

/* Empty state */
.topic-page .md-topic-empty {
  text-align: center;
  padding: 48px 24px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.topic-page .md-topic-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 16px;
  background: #e3f2fd;
  color: #1565c0;
  font-size: 1.25rem;
}

.topic-page .md-topic-empty__title {
  margin: 0 0 8px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.87);
}

.topic-page .md-topic-empty__img {
  max-width: 160px;
  opacity: 0.7;
}

.topic-page .md-topic-empty__text {
  margin: 0;
  margin-top: 8px;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 500;
}

/* DataTables empty cell — topics / e-library / class activity */
.topic-page .md-topic-stream table#student tbody td.dataTables_empty {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
}

.topic-page .md-feed-empty,
.class-activity-student-page .md-cas-student-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  padding: 40px 20px 36px;
  text-align: center;
  border: 1px dashed rgba(21, 101, 192, 0.22);
  border-radius: 16px;
  background: linear-gradient(180deg, #e3f2fd 0%, #fff 72%);
  box-shadow: none;
}

.topic-page .md-feed-empty .md-topic-empty__icon,
.class-activity-student-page .md-cas-student-empty .md-topic-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 4px;
  border-radius: 50%;
  background: #fff;
  color: #1565c0;
  font-size: 1.25rem;
  box-shadow: 0 2px 6px rgba(13, 71, 161, 0.14);
}

.topic-page .md-feed-empty .md-topic-empty__title,
.class-activity-student-page .md-cas-student-empty .md-topic-empty__title {
  margin: 4px 0 0;
  font-family: "Jost", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(0, 0, 0, 0.87);
}

.topic-page .md-feed-empty .md-topic-empty__text,
.class-activity-student-page .md-cas-student-empty .md-topic-empty__text {
  margin: 0;
  max-width: 280px;
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  color: #5f6368;
}

/* ── Activity sheets: Submit / Script / Correction (#fullEmptyModal) ── */
#fullEmptyModal.md-activity-sheet {
  --act-navy: #0d47a1;
  --act-navy-deep: #0a3a82;
  --act-blue: #1565c0;
  --act-soft: #e3f2fd;
  --act-ink: #0d47a1;
}

#fullEmptyModal.md-activity-sheet .md-timeline-sheet__header {
  background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%) !important;
  border-bottom: none !important;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 10px 16px 18px !important;
}

#fullEmptyModal.md-activity-sheet .md-timeline-sheet__title,
#fullEmptyModal.md-activity-sheet .md-timeline-sheet__title.modal-title {
  color: #ffffff !important;
}

#fullEmptyModal.md-activity-sheet .md-timeline-sheet__title .md-sl-form-heading__overline {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

#fullEmptyModal.md-activity-sheet .md-timeline-sheet__title .md-sl-form-heading__title {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
}

#fullEmptyModal.md-activity-sheet .md-timeline-sheet__lead:not(:empty) {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.82);
}

#fullEmptyModal.md-activity-sheet .md-timeline-sheet__close {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

#fullEmptyModal.md-activity-sheet .md-timeline-sheet__close:hover,
#fullEmptyModal.md-activity-sheet .md-timeline-sheet__close:focus-visible {
  background: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}

#fullEmptyModal.md-activity-sheet .md-timeline-sheet__body.modal-div {
  padding: 14px 14px 10px;
  background: #eef3f9;
}

#fullEmptyModal.md-activity-sheet .md-timeline-sheet__footer.modal-footer {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: stretch;
  padding: 10px 12px calc(10px + var(--md-sheet-footer-safe, 0px));
  gap: 0;
  background: #fff;
}

/* Dark navy header — Answer sheet pattern for topic create / edit sheets */
#create_topic.md-sl-admit-sheet,
#create_assignment.topic-create-sheet,
#create_e_l_file.topic-create-sheet,
#fullEmptyModal.topic-create-sheet {
  --act-navy: #0d47a1;
  --act-navy-deep: #0a3a82;
  --act-blue: #1565c0;
  --act-soft: #e3f2fd;
  --act-ink: #0d47a1;
}

#create_topic.md-sl-admit-sheet .md-timeline-sheet__header,
#create_assignment.topic-create-sheet .md-timeline-sheet__header,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__header,
#fullEmptyModal.topic-create-sheet .md-timeline-sheet__header {
  background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%) !important;
  border-bottom: none !important;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 10px 16px 18px !important;
}

#create_topic.md-sl-admit-sheet .md-timeline-sheet__overline,
#create_assignment.topic-create-sheet .md-timeline-sheet__overline,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__overline,
#fullEmptyModal.topic-create-sheet .md-timeline-sheet__overline {
  color: rgba(255, 255, 255, 0.78) !important;
}

#create_topic.md-sl-admit-sheet .md-timeline-sheet__title,
#create_topic.md-sl-admit-sheet .md-timeline-sheet__title.modal-title,
#create_assignment.topic-create-sheet .md-timeline-sheet__title,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__title,
#fullEmptyModal.topic-create-sheet .md-timeline-sheet__title,
#fullEmptyModal.topic-create-sheet .md-timeline-sheet__title.modal-title {
  color: #ffffff !important;
}

#create_topic.md-sl-admit-sheet .md-timeline-sheet__title .md-sl-form-heading__overline,
#create_assignment.topic-create-sheet .md-timeline-sheet__title .md-sl-form-heading__overline,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__title .md-sl-form-heading__overline,
#fullEmptyModal.topic-create-sheet .md-timeline-sheet__title .md-sl-form-heading__overline {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

#create_topic.md-sl-admit-sheet .md-timeline-sheet__title .md-sl-form-heading__title,
#create_assignment.topic-create-sheet .md-timeline-sheet__title .md-sl-form-heading__title,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__title .md-sl-form-heading__title,
#fullEmptyModal.topic-create-sheet .md-timeline-sheet__title .md-sl-form-heading__title {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
}

#create_topic.md-sl-admit-sheet .md-timeline-sheet__lead,
#create_assignment.topic-create-sheet .md-timeline-sheet__lead,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__lead,
#fullEmptyModal.topic-create-sheet .md-timeline-sheet__lead,
#fullEmptyModal.topic-create-sheet .md-timeline-sheet__lead:not(:empty) {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.82) !important;
}

#create_topic.md-sl-admit-sheet .md-timeline-sheet__close,
#create_assignment.topic-create-sheet .md-timeline-sheet__close,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__close,
#fullEmptyModal.topic-create-sheet .md-timeline-sheet__close {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

#create_topic.md-sl-admit-sheet .md-timeline-sheet__close:hover,
#create_topic.md-sl-admit-sheet .md-timeline-sheet__close:focus-visible,
#create_assignment.topic-create-sheet .md-timeline-sheet__close:hover,
#create_assignment.topic-create-sheet .md-timeline-sheet__close:focus-visible,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__close:hover,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__close:focus-visible,
#fullEmptyModal.topic-create-sheet .md-timeline-sheet__close:hover,
#fullEmptyModal.topic-create-sheet .md-timeline-sheet__close:focus-visible {
  background: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}

#create_assignment.topic-create-sheet .md-timeline-sheet__body,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__body,
#fullEmptyModal.topic-create-sheet .md-timeline-sheet__body.modal-div {
  background: #eef3f9;
}

#fullEmptyModal .md-sheet-view,
#fullEmptyModal .md-sheet-submit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
  font-family: "Jost", sans-serif;
}

#fullEmptyModal .md-sheet-view__section-title,
#fullEmptyModal .md-post-form__section-title {
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5f6368;
}

#fullEmptyModal .md-sheet-view__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 36px 20px;
  border: 1px solid rgba(13, 71, 161, 0.12);
  border-radius: 16px;
  background: #fff;
  text-align: center;
}

#fullEmptyModal .md-sheet-view__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--act-soft, #e3f2fd);
  color: var(--act-blue, #1565c0);
  font-size: 1.125rem;
}

#fullEmptyModal .md-sheet-view__empty-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #202124;
}

#fullEmptyModal .md-sheet-view__empty-text {
  margin: 0;
  max-width: 16rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #5f6368;
}

#fullEmptyModal .md-sheet-view__files,
#fullEmptyModal .md-sheet-view__prose,
#fullEmptyModal .md-post-form__section,
#fullEmptyModal .md-sheet-submit__editor {
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(13, 71, 161, 0.1);
  border-radius: 16px;
  background: #fff;
}

#fullEmptyModal .md-post-form__attach-grid {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

#fullEmptyModal .md-sheet-view__file-list,
#fullEmptyModal .md-post-form__attach-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}

#fullEmptyModal .md-sheet-view__file,
#fullEmptyModal .md-sheet-submit__file .md-sheet-view__file {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(13, 71, 161, 0.1);
  border-radius: 12px;
  background: #f5f9ff;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
}

#fullEmptyModal .md-sheet-view__file:hover,
#fullEmptyModal .md-sheet-view__file:focus-visible {
  background: #e3f2fd;
  border-color: rgba(21, 101, 192, 0.28);
  outline: none;
}

#fullEmptyModal .md-sheet-view__file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #e3f2fd;
  color: #1565c0;
  font-size: 0.9375rem;
}

#fullEmptyModal .md-sheet-view__file-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

#fullEmptyModal .md-sheet-view__file-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #202124;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#fullEmptyModal .md-sheet-view__file-hint {
  font-size: 0.75rem;
  color: #5f6368;
}

#fullEmptyModal .md-sheet-view__file-chevron {
  flex-shrink: 0;
  color: #90caf9;
  font-size: 0.75rem;
}

#fullEmptyModal .md-sheet-view__prose-body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #202124;
  word-break: break-word;
}

#fullEmptyModal .md-sheet-view__prose-body p {
  margin: 0 0 0.75em;
}

#fullEmptyModal .md-sheet-view__prose-body p:last-child {
  margin-bottom: 0;
}

#fullEmptyModal .md-sheet-submit__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(13, 71, 161, 0.18);
  background: #e3f2fd;
  color: #0d47a1;
}

#fullEmptyModal .md-sheet-submit__notice-icon {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 1rem;
}

#fullEmptyModal .md-sheet-submit__notice-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
}

#fullEmptyModal .md-sheet-submit__file {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

#fullEmptyModal .md-sheet-submit__file .md-sheet-view__file {
  flex: 1 1 auto;
  min-width: 0;
}

#fullEmptyModal .md-sheet-submit__file-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  border: 1px solid rgba(234, 67, 53, 0.22);
  border-radius: 12px;
  background: #fce8e6;
  color: #c5221f;
  cursor: pointer;
}

#fullEmptyModal .md-sheet-submit__file-delete:hover,
#fullEmptyModal .md-sheet-submit__file-delete:focus-visible {
  background: #f9d7d4;
  outline: none;
}

#fullEmptyModal .md-sheet-submit__editor-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

#fullEmptyModal .md-sheet-submit__editor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e3f2fd;
  color: #1565c0;
  flex-shrink: 0;
}

#fullEmptyModal .md-sheet-submit__editor-title {
  margin: 0 0 2px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0d47a1;
}

#fullEmptyModal .md-sheet-submit__editor-hint {
  margin: 0;
  font-size: 0.75rem;
  color: #5f6368;
  line-height: 1.4;
}

/* Clean upload tile */
#fullEmptyModal .md-sheet-submit .md-post-form__tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(13, 71, 161, 0.14);
  border-radius: 16px;
  background: #fff;
  padding: 14px;
}

#fullEmptyModal .md-sheet-submit .md-post-form__tile-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

#fullEmptyModal .md-sheet-submit .md-post-form__tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e3f2fd;
  color: #1565c0;
  font-size: 1rem;
}

#fullEmptyModal .md-sheet-submit .md-post-form__tile-title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0d47a1;
}

#fullEmptyModal .md-sheet-submit .md-post-form__tile-hint,
#fullEmptyModal .md-post-form__hint {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: #5f6368;
}

#fullEmptyModal .md-sheet-submit .md-post-form__tile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#fullEmptyModal .md-sheet-submit .md-post-form__tile-actions .bootstrap-filestyle,
#fullEmptyModal .md-sheet-submit .md-post-form__tile-actions .group-span-filestyle {
  display: inline-flex;
  margin: 0;
}

#fullEmptyModal .md-sheet-submit .md-post-form__tile-actions .btn,
#fullEmptyModal .md-sheet-submit .md-post-form__tile-actions label.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0 !important;
  padding: 0 16px !important;
  border: none !important;
  border-radius: 10px !important;
  background: #1565c0 !important;
  color: #fff !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

#fullEmptyModal .md-sheet-submit .md-post-form__clear {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  color: #1565c0;
  font-weight: 600;
  text-transform: none;
}

#fullEmptyModal .md-sheet-submit .md-post-form__picked {
  margin-top: 0;
}

#fullEmptyModal .md-sheet-submit .note-editor.note-frame {
  border: 1px solid rgba(13, 71, 161, 0.14);
  border-radius: 12px;
  overflow: hidden;
}

#fullEmptyModal .md-sheet-view-actions,
#fullEmptyModal .md-sheet-submit-actions,
#fullEmptyModal .md-sl-form-actions.md-sheet-submit-actions,
#fullEmptyModal .md-sl-form-actions.md-sheet-view-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100%;
  flex: 1 1 auto;
}

#fullEmptyModal .md-sheet-submit-actions--3,
#fullEmptyModal .md-sl-form-actions.md-sheet-submit-actions--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#fullEmptyModal .md-sheet-view-actions .md-btn-contained,
#fullEmptyModal .md-sheet-submit-actions .md-btn-contained {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 8px;
  justify-content: center;
  text-transform: none;
  box-shadow: none;
  font-size: 0.8125rem;
  white-space: nowrap;
}

#fullEmptyModal.md-activity-sheet .md-sheet-submit-actions .md-btn-contained:not(.md-btn-contained--tonal) {
  background: #1565c0;
}

#fullEmptyModal.md-activity-sheet .md-sheet-submit-actions .md-btn-contained:not(.md-btn-contained--tonal):hover,
#fullEmptyModal.md-activity-sheet .md-sheet-submit-actions .md-btn-contained:not(.md-btn-contained--tonal):focus-visible {
  background: #0d47a1;
}

#fullEmptyModal.md-activity-sheet .visually-hidden,
#fullEmptyModal .md-sheet-submit .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.class-activity-page .md-ca-edit-files {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.class-activity-page .md-ca-edit-file,
#fullEmptyModal .md-ca-edit-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#fullEmptyModal:has(.md-topic-create) .md-timeline-sheet__footer.modal-footer,
#fullEmptyModal:has(.md-sl-form.md-topic-create) .md-timeline-sheet__footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#create_assignment.topic-create-sheet .md-timeline-sheet__footer .md-btn-contained[type="submit"] {
  background: var(--topic-primary, #1976d2);
  color: #fff;
}

/* >>> recovered: topic-extra-L166 (236 lines) <<< */
.topic-page .md-topic-panel .collapse.show {
  padding: 10px 12px 12px;
}

/* Activity detail body */
.topic-page .md-topic-activity {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.topic-page .md-topic-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.topic-page .md-topic-panel__actions--footer {
  padding-top: 4px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.topic-page .md-topic-panel__actions .mui-btn {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 34px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
}

.topic-page .md-topic-panel__actions .mui-btn-contained {
  background: var(--topic-primary);
  color: #fff;
  border: none;
}

.topic-page .md-topic-panel__actions .mui-btn-outlined {
  background: #fff;
  color: var(--topic-primary);
  border: 1px solid rgba(25, 118, 210, 0.4);
}

.topic-page .md-topic-panel__actions .mui-btn--danger {
  color: #d32f2f;
  border-color: rgba(211, 47, 47, 0.4);
}

.topic-page .md-topic-activity__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #fff;
}

.topic-page .md-topic-activity__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.topic-page .md-topic-activity__stat--score {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(46, 125, 50, 0.06);
  border: 1px solid rgba(46, 125, 50, 0.12);
}

.topic-page .md-topic-activity__stat-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.42);
  line-height: 1.2;
}

.topic-page .md-topic-activity__stat-value {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: #1a1a1a;
  word-break: break-word;
}

.topic-page .md-topic-activity__empty {
  color: rgba(0, 0, 0, 0.35);
  font-weight: 500;
}

.topic-page .md-topic-activity__files {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.topic-page .md-topic-activity__files-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #fafbfc;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
}

.topic-page .md-topic-activity__files-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(25, 118, 210, 0.08);
  color: var(--topic-primary);
  font-size: 0.6875rem;
}

.topic-page .md-topic-activity__file-list {
  display: flex;
  flex-direction: column;
}

.topic-page .md-topic-activity__file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  text-decoration: none;
  color: #1a1a1a;
  transition: background 0.15s ease;
}

.topic-page .md-topic-activity__file + .md-topic-activity__file {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.topic-page .md-topic-activity__file:hover {
  background: rgba(25, 118, 210, 0.04);
}

.topic-page .md-topic-activity__file-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #e8eaf6;
  color: var(--topic-primary);
  font-size: 0.8125rem;
}

.topic-page .md-topic-activity__file-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.topic-page .md-topic-activity__file-name {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-page .md-topic-activity__file-hint {
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.42);
}

.topic-page .md-topic-activity__file-dl {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: rgba(0, 0, 0, 0.28);
}

.topic-page .md-topic-activity__file:hover .md-topic-activity__file-dl {
  color: var(--topic-primary);
}

.topic-page .md-topic-activity__note {
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #fff;
}

.topic-page .md-topic-activity__note-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.42);
}

.topic-page .md-topic-activity__note-body {
  font-size: 0.8125rem;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.75);
  word-break: break-word;
}

.topic-page .md-topic-activity__note-body p {
  margin: 0 0 0.6em;
}

.topic-page .md-topic-activity__note-body p:last-child {
  margin-bottom: 0;
}

.topic-page .md-topic-panel .styled-table {
  margin: 4px 0 8px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

/* >>> recovered: topic-extra-L172 (77 lines) <<< */
.topic-page .md-topic-activity__stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #fff;
}

.topic-page .md-topic-activity__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.topic-page .md-topic-activity__stat--title {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.topic-page .md-topic-activity__stat--title .md-topic-activity__stat-value {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #202124;
}

.topic-page .md-topic-activity__stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.topic-page .md-topic-activity__stat--score,
.topic-page .md-topic-activity__stat--due {
  padding: 10px;
  border-radius: 10px;
  min-height: 58px;
}

.topic-page .md-topic-activity__stat--score {
  background: rgba(46, 125, 50, 0.06);
  border: 1px solid rgba(46, 125, 50, 0.12);
}

.topic-page .md-topic-activity__stat--due {
  background: #f5f7fa;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.topic-page .md-topic-activity__stat-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.42);
  line-height: 1.2;
}

.topic-page .md-topic-activity__stat-value {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: #1a1a1a;
  word-break: break-word;
}

.topic-page .md-topic-activity__stat--score .md-topic-activity__stat-value {
  color: #2e7d32;
}

.topic-page .md-topic-activity__empty {
  color: rgba(0, 0, 0, 0.35);
  font-weight: 500;
}

/* >>> recovered: topic-extra-L185 (137 lines) <<< */
.topic-page .md-topic-activity__note-body p:last-child {
  margin-bottom: 0;
}

/* Study material (e-library) detail */
.topic-page .md-topic-elib {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.topic-page .md-topic-elib__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #fff;
}

.topic-page .md-topic-elib__label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.42);
  line-height: 1.2;
}

.topic-page .md-topic-elib__title {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #202124;
  word-break: break-word;
}

.topic-page .md-topic-elib__desc {
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.topic-page .md-topic-elib__desc-body {
  font-size: 0.8125rem;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.72);
  word-break: break-word;
}

.topic-page .md-topic-elib__desc-body p {
  margin: 0 0 0.55em;
}

.topic-page .md-topic-elib__desc-body p:last-child {
  margin-bottom: 0;
}

.topic-page .md-topic-elib__file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: #1a1a1a;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.topic-page .md-topic-elib__file:hover {
  background: rgba(25, 118, 210, 0.04);
  border-color: rgba(25, 118, 210, 0.22);
}

.topic-page .md-topic-elib__file-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #e8eaf6;
  color: var(--topic-primary);
  font-size: 0.875rem;
}

.topic-page .md-topic-elib__file-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.topic-page .md-topic-elib__file-name {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-page .md-topic-elib__file-hint {
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.42);
}

.topic-page .md-topic-elib__file-dl {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: rgba(0, 0, 0, 0.28);
}

.topic-page .md-topic-elib__file:hover .md-topic-elib__file-dl {
  color: var(--topic-primary);
}

.topic-page .elibrary-button-div .md-topic-panel__label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
}

.topic-page .md-topic-panel .styled-table {
  margin: 4px 0 8px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

/* >>> recovered: topic-extra-L200 (68 lines) <<< */
.topic-page .md-topic-elib__file:hover .md-topic-elib__file-dl {
  color: var(--topic-primary);
}

/* Topic note */
.topic-page .md-topic-note {
  display: flex;
  flex-direction: column;
}

.topic-page .md-topic-note__body {
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #fff;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.75);
  word-break: break-word;
}

.topic-page .md-topic-note__body p {
  margin: 0 0 0.6em;
}

.topic-page .md-topic-note__body p:last-child {
  margin-bottom: 0;
}

.topic-page .md-topic-note__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 16px;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  background: #fff;
  text-align: center;
}

.topic-page .md-topic-note__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  border-radius: 10px;
  background: rgba(245, 124, 0, 0.08);
  color: #ef6c00;
  font-size: 0.875rem;
}

.topic-page .md-topic-note__empty-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #1a1a1a;
}

.topic-page .md-topic-note__empty-text {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.45);
  line-height: 1.4;
}

/* >>> recovered: mail-extra-L131 (196 lines) <<< */
/* ── Mail detail expanded panel ── */
.mail-page .md-mail-card__details-inner {
  padding: 0;
}

.mail-page .md-mail-detail {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
}

/* Info rows — school + recipients */
.mail-page .md-mail-detail__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}

.mail-page .md-mail-detail__info-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: none;
}

.mail-page .md-mail-detail__info-row + .md-mail-detail__info-row {
  border-top: none;
}

.mail-page .md-mail-detail__info-row--sent {
  display: block;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-shadow: none;
}

/* MUI List + Chip pattern for recipients */
.mail-page .md-mail-sent {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mail-page .md-mail-sent__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 6px 10px;
  background: #f5f5f5;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mail-page .md-mail-sent__header-start {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mail-page .md-mail-sent__overline {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.25;
}

.mail-page .md-mail-sent__count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  background: #fff;
  color: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

.mail-page .md-mail-sent__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
}

.mail-page .md-mail-sent__badge {
  display: inline-flex;
  align-items: center;
  gap: 0;
  max-width: 100%;
  min-height: 26px;
  padding: 0 10px 0 3px;
  border-radius: 14px;
  background: #f1f3f4;
  color: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

.mail-page .md-mail-sent__badge-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  border-radius: 50%;
  background: #5f6368;
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.mail-page .md-mail-sent__badge-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-page .md-mail-sent__list {
  list-style: none;
  margin: 0;
  padding: 2px 0;
  display: flex;
  flex-direction: column;
}

.mail-page .md-mail-sent__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 12px;
  background: transparent;
  transition: background-color 0.15s ease;
}

.mail-page .md-mail-sent__item + .md-mail-sent__item {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.mail-page .md-mail-sent__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #5f6368;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

.mail-page .md-mail-sent__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.mail-page .md-mail-sent__primary {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.87);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.mail-page .md-mail-sent__secondary {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.mail-page .md-mail-detail__info-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #e8eaed;
  color: rgba(0, 0, 0, 0.55);
  font-size: 0.6875rem;
  box-shadow: none;
}

.mail-page .md-mail-detail__info-icon--school {
  background: #e8f5e9;
  color: #2e7d32;
  box-shadow: none;
}

.mail-page .md-mail-detail__info-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}

.mail-page .md-mail-detail__info-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #1565c0;
  line-height: 1.2;
}

.mail-page .md-mail-detail__info-value {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: #0d47a1;
  word-break: break-word;
}

.mail-page .md-mail-detail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.mail-page .md-mail-detail__chips .md-chip {
  height: auto;
  min-height: 22px;
  padding: 3px 8px;
  font-size: 0.75rem;
  line-height: 1.25;
  border-radius: 6px;
}

/* Message card — placeholder; letter layout overrides below */
.mail-page .md-mail-detail__divider {
  display: none;
}

/* Attachments */
.mail-page .md-mail-detail__attachments {
  padding: 0 16px 16px;
  background: #fff;
}

.mail-page .md-mail-detail__attach-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
}

.mail-page .md-mail-detail__attach-label i {
  font-size: 0.6875rem;
}

.mail-page .md-mail-detail__file-list {
  margin: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #f8fafc;
}

.mail-page .md-mail-detail__file-list .mui-list-item-link {
  min-height: 52px;
  padding: 10px 14px;
}

.mail-page .md-mail-detail__file-list .mui-list-item-link__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #e8f0fe;
  color: #1976d2;
  font-size: 0.8125rem;
}

.mail-page .md-mail-detail__file-list .mui-list-item-link__text {
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.35;
}

.mail-page .md-mail-detail__file-list .mui-list-item-link__arrow {
  color: rgba(0, 0, 0, 0.28);
  font-size: 0.8125rem;
}

.mail-page .md-mail-detail__file-list .mui-list-item-link:hover .mui-list-item-link__arrow {
  color: #1976d2;
}

/* Legacy compat */
.mail-page .md-mail-card__files {
  margin: 0;
}

/* >>> recovered: mail-extra-L140 — Gmail / MUI reading pane <<< */
.mail-page .md-mail-detail__message-card {
  padding: 8px 10px;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.mail-page .md-mail-letter,
.mail-page .md-mail-detail__letter {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: none;
}

.mail-page .md-mail-letter__header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: #f5f5f5;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mail-page .md-mail-letter__header-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mail-page .md-mail-letter__overline,
.mail-page .md-mail-detail__field-label {
  display: block;
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.2;
}

.mail-page .md-mail-letter__subject,
.mail-page .md-mail-detail__subject {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.87);
  word-break: break-word;
}

.mail-page .md-mail-letter__body,
.mail-page .md-mail-detail__letter-body {
  padding: 10px 12px 12px;
  background: #fff;
}

.mail-page .md-mail-letter__body > .md-mail-letter__overline {
  margin-bottom: 6px;
}

.mail-page .md-mail-detail__empty-body {
  margin: 0;
  font-size: 0.8125rem;
  font-style: italic;
  color: rgba(0, 0, 0, 0.45);
}

.mail-page .md-mail-letter__content,
.mail-page .md-mail-card__message {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.75);
  word-break: break-word;
}

.mail-page .md-mail-letter__content .summary,
.mail-page .md-mail-card__message .summary,
.mail-page .mail-message .summary {
  display: inline;
}

.mail-page .md-mail-letter__content .details,
.mail-page .md-mail-card__message .details,
.mail-page .mail-message .details {
  display: none;
}

.mail-page .md-mail-letter__content .more-link,
.mail-page .md-mail-card__message .more-link,
.mail-page .mail-message .more-link {
  display: inline;
  color: #1565c0;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.mail-page .md-mail-letter__content .more-link:hover,
.mail-page .md-mail-card__message .more-link:hover,
.mail-page .mail-message .more-link:hover {
  text-decoration: underline;
}

.mail-page .md-mail-card__message p {
  margin: 0 0 0.7em;
}

.mail-page .md-mail-card__message p:last-child {
  margin-bottom: 0;
}

.mail-page .md-mail-card__message a {
  color: #1565c0;
  text-decoration: none;
}

.mail-page .md-mail-card__message a:hover {
  text-decoration: underline;
}

.mail-page .md-mail-card__message ul,
.mail-page .md-mail-card__message ol {
  margin: 0 0 0.7em;
  padding-left: 1.25em;
}

.mail-page .md-mail-card__message img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.mail-page .md-mail-card__message blockquote {
  margin: 0 0 0.7em;
  padding: 6px 10px;
  border-left: 3px solid rgba(0, 0, 0, 0.16);
  color: rgba(0, 0, 0, 0.6);
  background: #f8f9fa;
  border-radius: 0 6px 6px 0;
}

/* Legacy letter subject padding when old markup is cached */
.mail-page .md-mail-detail__letter-subject {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: #f5f5f5;
}

/* >>> recovered: mail-extra-L149 — attachments <<< */
.mail-page .md-mail-detail__attachments,
.mail-page .md-mail-detail__attachment {
  padding: 8px 10px 12px;
  background: #fff;
}

.mail-page .md-mail-attach,
.mail-page .md-mail-detail__attach-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  box-shadow: none;
}

.mail-page .md-mail-attach__header,
.mail-page .md-mail-detail__attach-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 0;
  margin: 0 0 6px;
  padding: 0 2px;
  background: transparent;
  border-bottom: 0;
}

.mail-page .md-mail-attach__header-start {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.mail-page .md-mail-attach__icon,
.mail-page .md-mail-detail__attach-head-icon {
  display: none;
}

.mail-page .md-mail-attach__overline,
.mail-page .md-mail-detail__attach-head-text {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
  line-height: 1.25;
}

.mail-page .md-mail-attach__count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.45);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.mail-page .md-mail-attach__list,
.mail-page .md-mail-detail__attach-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}

.mail-page .md-mail-attach__item,
.mail-page .md-mail-detail__file {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 10px 10px 12px;
  border: 1px solid #dadce0;
  border-radius: 10px;
  background: #e8eaed;
  text-decoration: none;
  color: #3c4043;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.mail-page .md-mail-attach__item:hover,
.mail-page .md-mail-attach__item:focus-visible,
.mail-page .md-mail-detail__file:hover {
  background: #dde1e6;
  border-color: #bdc1c6;
  box-shadow: 0 2px 6px rgba(60, 64, 67, 0.12);
  outline: none;
}

.mail-page .md-mail-attach__item:focus-visible {
  box-shadow: 0 0 0 3px rgba(60, 64, 67, 0.18), 0 2px 6px rgba(60, 64, 67, 0.12);
}

.mail-page .md-mail-attach__item:active,
.mail-page .md-mail-detail__file:active {
  transform: scale(0.985);
  background: #d3d7dc;
}

.mail-page .md-mail-attach__file-icon,
.mail-page .md-mail-detail__file-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #dadce0;
  color: #5f6368;
  font-size: 0.9375rem;
}

.mail-page .md-mail-attach__file-icon--image,
.mail-page .md-mail-attach__file-icon--pdf {
  background: #fff;
  color: #5f6368;
}

.mail-page .md-mail-attach__meta,
.mail-page .md-mail-detail__file-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mail-page .md-mail-attach__name,
.mail-page .md-mail-detail__file-name {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: #202124;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-page .md-mail-attach__hint,
.mail-page .md-mail-detail__file-action {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.25;
  color: #5f6368;
}

.mail-page .md-mail-attach__dl,
.mail-page .md-mail-detail__file-dl {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #dadce0;
  background: #fff;
  color: #3c4043;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mail-page .md-mail-attach__dl-label {
  line-height: 1;
}

.mail-page .md-mail-attach__item:hover .md-mail-attach__dl,
.mail-page .md-mail-detail__file:hover .md-mail-detail__file-dl {
  background: #202124;
  border-color: #202124;
  color: #fff;
}

@media (max-width: 360px) {
  .mail-page .md-mail-attach__dl-label {
    display: none;
  }

  .mail-page .md-mail-attach__dl,
  .mail-page .md-mail-detail__file-dl {
    width: 32px;
    padding: 0;
  }
}

.mail-page .md-mail-detail__attach-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
}

.mail-page .md-mail-detail__attach-label i {
  font-size: 0.6875rem;
}

.mail-page .md-mail-detail__file-list {
  margin: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #f8fafc;
}

.mail-page .md-mail-card__files {
  margin: 0;
}
.mail-page .md-mail-card__foot {
  padding: 0;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* >>> recovered: nav (460 lines) <<< */
/* ── zap-app: app menu (nav launcher) ── */

#menu_nav.md-nav-menu {
  --nav-bg: #e8f1fb;
  --nav-surface: #ffffff;
  --nav-ink: #0d47a1;
  --nav-muted: rgba(13, 71, 161, 0.62);
  --nav-line: rgba(21, 101, 192, 0.16);
  --nav-navy: #1565c0;
  --nav-navy-mid: #1976d2;
  --nav-navy-light: #1e88e5;
  --nav-soft: #e3f2fd;
  --nav-soft-deep: #bbdefb;
  --nav-stripe: var(--nav-navy);
  --md-primary: var(--nav-navy);
  --md-primary-dark: #0d47a1;
  --md-primary-container: var(--nav-soft);
  --nav-close-h: 72px;
  box-sizing: border-box;
  /* Must hide when inactive: custom.js forces display:block; transform:none
     would otherwise leave a full-screen nav layer over every page. */
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100% !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  background: var(--nav-bg) !important;
  color: var(--nav-ink);
  font-family: var(--md-font, "Jost", "Roboto", sans-serif);
  overflow: hidden !important;
  z-index: 101;
  opacity: 0;
  pointer-events: none;
}

#menu_nav.md-nav-menu.menu-active {
  /* Flex column: sheet scrolls; close bar stays pinned. Must beat Appkit
     inline display:block on .menu so min-height:0 can create a scrollport. */
  display: flex !important;
  flex-direction: column !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: all !important;
}

/*
 * Nav tiles call loadPage() → #menu_nav.is-processing + #logger.menu-active.
 * Default logger z-index (100) sits under the open menu (101), so raise it
 * to the same dark scrim used by filter/sheets on other pages.
 */
body:has(#menu_nav.md-nav-menu.is-processing) #logger.menu-active {
  z-index: 1500 !important;
  background: rgba(15, 23, 42, 0.45) !important;
  opacity: 1 !important;
  pointer-events: all !important;
}

/* Beat page shells (e.g. class-result-app overflow:visible !important). */
html.md-nav-menu-open,
html.md-nav-menu-open body,
body.md-nav-menu-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  max-height: 100% !important;
  max-height: 100dvh !important;
}

body.md-nav-menu-open {
  position: fixed !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  height: 100% !important;
  height: 100dvh !important;
}

#menu_nav.md-nav-menu .md-nav-menu__sheet {
  display: block;
  flex: 1 1 auto;
  min-height: 0 !important;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 12px 12px 16px;
  box-sizing: border-box;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

#menu_nav.md-nav-menu .md-nav-hero {
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid var(--nav-line);
  box-shadow: var(--md-elevation-1);
}

#menu_nav.md-nav-menu .md-nav-hero__band {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 14px;
  background: var(--nav-soft);
}

#menu_nav.md-nav-menu .md-nav-hero__copy {
  flex: 1;
  min-width: 0;
}

#menu_nav.md-nav-menu .md-nav-hero__overline {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-primary, #1976d2);
}

#menu_nav.md-nav-menu .md-nav-hero__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--nav-ink);
}

#menu_nav.md-nav-menu .md-nav-hero__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -6px -8px 0 0;
  border-radius: 50%;
  color: var(--nav-muted);
  text-decoration: none;
}

#menu_nav.md-nav-menu .md-nav-hero__close:hover,
#menu_nav.md-nav-menu .md-nav-hero__close:focus-visible {
  background: rgba(11, 45, 92, 0.1);
  color: var(--nav-navy);
}

#menu_nav.md-nav-menu .md-nav-hero__pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px 12px;
  background: var(--nav-surface);
}

#menu_nav.md-nav-menu .md-nav-hero__pill {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--md-shape-lg, 12px);
  background: var(--md-surface-variant, #f5f5f5);
  color: var(--nav-ink);
}

#menu_nav.md-nav-menu .md-nav-hero__pill > i {
  width: 18px;
  text-align: center;
  color: var(--md-primary, #1976d2);
}

#menu_nav.md-nav-menu .md-nav-hero__pill-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nav-muted);
}

#menu_nav.md-nav-menu .md-nav-hero__pill-value {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
}

#menu_nav.md-nav-menu .md-nav-id {
  /* Children flow in the sheet so the band can stick while tiles scroll */
  display: contents;
}

#menu_nav.md-nav-menu .md-nav-id__band {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px;
  background: linear-gradient(135deg, #0d47a1 0%, #1565c0 48%, #1e88e5 100%);
  color: #fff;
  border: 1px solid rgba(13, 71, 161, 0.35);
  border-bottom: none;
  border-radius: var(--md-shape-xl, 16px) var(--md-shape-xl, 16px) 0 0;
  box-shadow: 0 8px 18px rgba(11, 45, 92, 0.16);
}

#menu_nav.md-nav-menu .md-nav-id__avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  margin-top: 2px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.16);
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(7, 36, 71, 0.35);
}

#menu_nav.md-nav-menu .md-nav-id__copy {
  flex: 1 1 auto;
  min-width: 0;
}

#menu_nav.md-nav-menu .md-nav-id__school {
  margin: 0 0 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
}

#menu_nav.md-nav-menu .md-nav-id__branch {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  min-width: 0;
  color: rgba(227, 242, 253, 0.92);
  font-size: 0.6875rem;
  line-height: 1.25;
}

#menu_nav.md-nav-menu .md-nav-id__branch > i {
  flex-shrink: 0;
  font-size: 0.625rem;
  opacity: 0.9;
}

#menu_nav.md-nav-menu .md-nav-id__branch-label {
  flex-shrink: 0;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.78;
}

#menu_nav.md-nav-menu .md-nav-id__branch-name {
  min-width: 0;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#menu_nav.md-nav-menu .md-nav-id__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  min-width: 0;
  width: 100%;
  overflow: visible;
}

#menu_nav.md-nav-menu .md-nav-id__badges .md-chip {
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  height: 18px;
  padding: 0 6px;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.22);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#menu_nav.md-nav-menu .md-nav-id__badges .md-chip--neutral {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.18);
}

#menu_nav.md-nav-menu .md-nav-id__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px 12px;
  border: 1px solid var(--nav-line);
  border-top: 1px solid rgba(11, 45, 92, 0.08);
  border-radius: 0 0 var(--md-shape-xl, 16px) var(--md-shape-xl, 16px);
  box-shadow: 0 1px 2px rgba(11, 45, 92, 0.06), 0 4px 14px rgba(11, 45, 92, 0.08);
  background: linear-gradient(180deg, #f5f8fc 0%, var(--nav-surface) 100%);
}

#menu_nav.md-nav-menu .md-nav-id__actions .nav_exit {
  display: none;
  min-width: 0;
}

#menu_nav.md-nav-menu .md-nav-id__actions .nav_exit.is-landing-exit {
  display: block;
}

#menu_nav.md-nav-menu .md-nav-id__actions .nav_exit[hidden],
#menu_nav.md-nav-menu .md-nav-id__actions .nav_exit.d-none {
  display: none !important;
}

#menu_nav.md-nav-menu .md-nav-id__account {
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: var(--md-shape-lg, 12px);
  background: var(--nav-soft) !important;
  color: var(--nav-navy) !important;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0.01em;
  text-align: left;
}

#menu_nav.md-nav-menu .md-nav-id__account:hover,
#menu_nav.md-nav-menu .md-nav-id__account:focus-visible {
  background: var(--nav-soft-deep) !important;
  color: var(--nav-navy) !important;
}

#menu_nav.md-nav-menu .md-nav-id__account > .fa-user-circle {
  flex-shrink: 0;
  font-size: 1.25rem;
  color: var(--nav-navy-light);
}

#menu_nav.md-nav-menu .md-nav-id__account-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

#menu_nav.md-nav-menu .md-nav-id__account-label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--nav-navy);
}

#menu_nav.md-nav-menu .md-nav-id__account-hint {
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--nav-muted);
}

#menu_nav.md-nav-menu .md-nav-id__account-role {
  display: inline-flex;
  align-items: center;
  flex-shrink: 1;
  max-width: 42%;
  min-width: 0;
  height: 22px;
  margin-left: auto;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(21, 101, 192, 0.22);
  background: rgba(255, 255, 255, 0.92);
  color: var(--nav-navy);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 1px rgba(13, 71, 161, 0.06);
}

#menu_nav.md-nav-menu .md-nav-id__account:hover .md-nav-id__account-role,
#menu_nav.md-nav-menu .md-nav-id__account:focus-visible .md-nav-id__account-role {
  background: #fff;
  border-color: rgba(21, 101, 192, 0.32);
}

#menu_nav.md-nav-menu .md-nav-id__account-chevron {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--nav-navy-light);
  opacity: 0.75;
}

#menu_nav.md-nav-menu .md-nav-id__actions .md-btn-contained:not(.md-nav-id__account) {
  width: 100%;
  min-height: 40px;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.8125rem;
  border-radius: var(--md-shape-lg, 12px);
}

#menu_nav.md-nav-menu .md-nav-menu__btn--exit {
  background: #fdecee;
  color: var(--md-error, #c62828);
  box-shadow: none;
}

#menu_nav.md-nav-menu .md-nav-menu__btn--exit:hover,
#menu_nav.md-nav-menu .md-nav-menu__btn--exit:focus-visible {
  background: #f8d7da;
  color: var(--md-error, #c62828);
}

#menu_nav.md-nav-menu .md-nav-branch {
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid var(--nav-line);
}

#menu_nav.md-nav-menu .md-nav-branch__trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: inherit;
  text-decoration: none;
}

#menu_nav.md-nav-menu .md-nav-branch__lead {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--md-shape-md, 8px);
  background: var(--nav-soft);
  color: var(--nav-navy);
}

#menu_nav.md-nav-menu .md-nav-branch__copy {
  flex: 1;
  min-width: 0;
}

#menu_nav.md-nav-menu .md-nav-branch__hint,
#menu_nav.md-nav-menu .md-nav-branch__overline {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nav-muted);
}

#menu_nav.md-nav-menu .md-nav-branch__title {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nav-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#menu_nav.md-nav-menu .md-nav-branch--static .md-nav-branch__trigger {
  cursor: default;
  pointer-events: none;
}

#menu_nav.md-nav-menu .md-nav-branch__chevron {
  color: var(--nav-muted);
  transition: transform 0.2s ease;
}

#menu_nav.md-nav-menu .md-nav-branch__trigger[aria-expanded="true"] .md-nav-branch__chevron {
  transform: rotate(180deg);
}

#menu_nav.md-nav-menu .md-nav-branch__list {
  border-top: 1px solid var(--nav-line);
  padding: 4px 0;
}

#menu_nav.md-nav-menu .md-nav-branch__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--nav-ink);
  text-decoration: none;
  font-size: 0.875rem;
}

#menu_nav.md-nav-menu .md-nav-branch__item > i:first-child {
  color: var(--nav-muted);
}

#menu_nav.md-nav-menu .md-nav-branch__item > span {
  flex: 1;
}

#menu_nav.md-nav-menu .md-nav-branch__item > i:last-child {
  color: var(--nav-muted);
  font-size: 0.75rem;
}

#menu_nav.md-nav-menu .md-nav-menu__search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--md-shape-lg, 12px);
  background: var(--nav-surface);
  border: 1px solid var(--nav-line);
  box-shadow: var(--md-elevation-1);
}

#menu_nav.md-nav-menu .md-nav-menu__search:focus-within {
  border-color: rgba(11, 45, 92, 0.4);
  box-shadow: 0 0 0 3px rgba(11, 45, 92, 0.12);
}

#menu_nav.md-nav-menu .md-search-field__icon {
  color: var(--nav-muted);
}

#menu_nav.md-nav-menu .md-search-field__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--nav-ink);
}

#menu_nav.md-nav-menu .md-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  align-items: stretch;
}

#menu_nav.md-nav-menu .md-nav-tile {
  --tile-accent: var(--nav-navy-light);
  --tile-accent-soft: var(--nav-soft);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 118px;
  padding: 12px 12px 12px 14px;
  border: 1px solid rgba(11, 45, 92, 0.1);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  box-shadow: 0 1px 2px rgba(11, 45, 92, 0.04);
  color: inherit;
  text-decoration: none;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
}

#menu_nav.md-nav-menu .md-nav-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(
    180deg,
    var(--nav-navy-light) 0%,
    var(--tile-accent) 45%,
    var(--nav-navy) 100%
  );
  box-shadow: 1px 0 0 rgba(11, 45, 92, 0.08);
}

#menu_nav.md-nav-menu .md-nav-tile::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 48px;
  background: linear-gradient(90deg, rgba(11, 45, 92, 0.07) 0%, transparent 100%);
  pointer-events: none;
}

#menu_nav.md-nav-menu .md-nav-tile:hover,
#menu_nav.md-nav-menu .md-nav-tile:focus-visible {
  border-color: rgba(11, 45, 92, 0.28);
  background: #f2f6fb;
  box-shadow: 0 2px 10px rgba(11, 45, 92, 0.12);
}

#menu_nav.md-nav-menu .md-nav-tile:hover::before,
#menu_nav.md-nav-menu .md-nav-tile:focus-visible::before {
  width: 5px;
  box-shadow: 0 0 0 1px rgba(11, 45, 92, 0.12), 2px 0 8px rgba(11, 45, 92, 0.2);
}

#menu_nav.md-nav-menu .md-nav-tile:active {
  background: var(--nav-soft);
  box-shadow: none;
}

#menu_nav.md-nav-menu .md-nav-tile__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#menu_nav.md-nav-menu .md-nav-tile__icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--tile-accent-soft);
  border: 1px solid rgba(11, 45, 92, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

#menu_nav.md-nav-menu .md-nav-tile__icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

#menu_nav.md-nav-menu .md-nav-tile__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 3px;
  min-width: 0;
  width: 100%;
  margin-top: auto;
}

#menu_nav.md-nav-menu .md-nav-tile__title {
  width: 100%;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--nav-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#menu_nav.md-nav-menu .md-nav-tile__sub {
  width: 100%;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--nav-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#menu_nav.md-nav-menu .md-nav-tile__chevron {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(11, 45, 92, 0.06);
  color: var(--tile-accent);
  font-size: 0.625rem;
  opacity: 0.75;
}

#menu_nav.md-nav-menu .md-nav-tile:hover .md-nav-tile__chevron,
#menu_nav.md-nav-menu .md-nav-tile:focus-visible .md-nav-tile__chevron {
  opacity: 1;
  background: rgba(11, 45, 92, 0.12);
}

#menu_nav.md-nav-menu .md-nav-tile .md-chip {
  margin-top: 4px;
  align-self: flex-start;
  height: 18px;
  padding: 0 7px;
  font-size: 0.5625rem;
}

#menu_nav.md-nav-menu .md-nav-tile--full {
  --tile-accent: #fff;
  --tile-accent-soft: rgba(255, 255, 255, 0.18);
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 0;
  height: auto;
  padding: 12px 14px;
  border-color: rgba(13, 71, 161, 0.35);
  border-radius: 12px;
  background:
    linear-gradient(135deg, var(--nav-navy-mid, #1976d2) 0%, var(--nav-navy, #1565c0) 48%, var(--nav-ink, #0d47a1) 100%);
  box-shadow: 0 2px 8px rgba(13, 71, 161, 0.22);
}

#menu_nav.md-nav-menu .md-nav-tile--full::before {
  width: 3px;
  background: rgba(255, 255, 255, 0.55);
}

#menu_nav.md-nav-menu .md-nav-tile--full::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, transparent 100%);
}

#menu_nav.md-nav-menu .md-nav-tile--full .md-nav-tile__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}

#menu_nav.md-nav-menu .md-nav-tile--full .md-nav-tile__icon img {
  width: 20px;
  height: 20px;
}

#menu_nav.md-nav-menu .md-nav-tile--full .md-nav-tile__copy {
  flex: 1 1 auto;
  margin-top: 0;
  width: auto;
  min-width: 0;
  gap: 2px;
}

#menu_nav.md-nav-menu .md-nav-tile--full .md-nav-tile__title {
  font-size: 0.875rem;
  color: #fff;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

#menu_nav.md-nav-menu .md-nav-tile--full .md-nav-tile__sub {
  font-size: 0.6875rem;
  color: rgba(227, 242, 253, 0.92);
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

#menu_nav.md-nav-menu .md-nav-tile--full .md-nav-tile__chevron {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  opacity: 1;
}

#menu_nav.md-nav-menu .md-nav-tile--full:hover,
#menu_nav.md-nav-menu .md-nav-tile--full:focus-visible {
  background:
    linear-gradient(135deg, #1e88e5 0%, var(--nav-navy-mid, #1976d2) 45%, var(--nav-navy, #1565c0) 100%);
  border-color: rgba(13, 71, 161, 0.5);
  box-shadow: 0 4px 14px rgba(13, 71, 161, 0.28);
}

#menu_nav.md-nav-menu .md-nav-tile--full:hover .md-nav-tile__chevron,
#menu_nav.md-nav-menu .md-nav-tile--full:focus-visible .md-nav-tile__chevron {
  background: rgba(255, 255, 255, 0.28);
  opacity: 1;
}

#menu_nav.md-nav-menu .md-nav-tile--full:active {
  background:
    linear-gradient(135deg, var(--nav-navy, #1565c0) 0%, var(--nav-ink, #0d47a1) 100%);
  box-shadow: none;
}

#menu_nav.md-nav-menu .md-nav-tile--soon {
  --tile-accent: #ed6c02;
  --tile-accent-soft: #fff8e1;
  background: #fffdf8;
  border-color: rgba(237, 108, 2, 0.2);
}

#menu_nav.md-nav-menu .md-nav-tile--soon::before {
  background: linear-gradient(180deg, #ffb74d 0%, #ed6c02 50%, #e65100 100%);
}

#menu_nav.md-nav-menu .md-nav-tile--soon::after {
  background: linear-gradient(90deg, rgba(237, 108, 2, 0.08) 0%, transparent 100%);
}

#menu_nav.md-nav-menu .md-nav-tile--soon .md-nav-tile__icon {
  border-color: rgba(237, 108, 2, 0.14);
}

#menu_nav.md-nav-menu .md-nav-tile--soon .md-nav-tile__chevron {
  background: rgba(237, 108, 2, 0.08);
  color: #ed6c02;
}

#menu_nav.md-nav-menu .md-nav-tile--blocked {
  opacity: 0.55;
  pointer-events: none;
  filter: grayscale(0.35);
}

#menu_nav.md-nav-menu .md-nav-tile[hidden] {
  display: none !important;
}

#menu_nav.md-nav-menu .md-nav-menu__empty {
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--nav-muted);
}

#menu_nav.md-nav-menu .md-nav-menu__close-bar,
#menu_nav.md-nav-menu #footer-bar.md-nav-menu__close-bar {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: auto !important;
  min-height: var(--nav-close-h);
  margin: 0 !important;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  background: var(--nav-surface) !important;
  border-top: 1px solid var(--nav-line);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
  transform: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#menu_nav.md-nav-menu .md-nav-menu__close-bar .md-btn-contained,
#menu_nav.md-nav-menu #footer-bar.md-nav-menu__close-bar > a.md-btn-contained {
  flex: 0 0 auto;
  width: 100%;
  max-width: 656px;
  min-height: 48px;
  margin: 0;
  padding: 12px 20px !important;
  border-radius: var(--md-shape-lg, 12px);
  background: #1565c0 !important;
  color: #fff !important;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(21, 101, 192, 0.35);
}

#menu_nav.md-nav-menu .md-nav-menu__close-bar .md-btn-contained:hover,
#menu_nav.md-nav-menu .md-nav-menu__close-bar .md-btn-contained:focus-visible,
#menu_nav.md-nav-menu #footer-bar.md-nav-menu__close-bar > a.md-btn-contained:hover,
#menu_nav.md-nav-menu #footer-bar.md-nav-menu__close-bar > a.md-btn-contained:focus-visible {
  background: #0d47a1 !important;
  color: #fff !important;
}

#menu_nav.md-nav-menu .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html.is-webview #menu_nav.md-nav-menu .md-nav-menu__sheet {
  padding-top: calc(12px + var(--app-safe-top, 0px));
}

@media (max-width: 360px) {
  #menu_nav.md-nav-menu .md-nav-hero__pills {
    grid-template-columns: 1fr;
  }

  #menu_nav.md-nav-menu .md-nav-grid {
    gap: 8px;
  }

  #menu_nav.md-nav-menu .md-nav-tile {
    min-height: 110px;
    padding: 10px 10px 10px 12px;
    gap: 8px;
  }

  #menu_nav.md-nav-menu .md-nav-tile__icon {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #menu_nav.md-nav-menu .md-animate-in {
    animation: none;
  }
}

/* >>> recovered: profile (595 lines) <<< */
/* ── zap-app: profile ── */

html.profile-app .header.header-fixed,
body.profile-app .header.header-fixed,
.is-webview.profile-app .header.header-fixed,
.is-webview body.profile-app .header.header-fixed {
  display: none !important;
}

body.profile-app {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.profile-app #page,
body.profile-app .md-page.profile-page,
body.profile-app .md-page.profile-page .profile-feed.page-content,
body.profile-app .md-page.profile-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.profile-page {
  --md-header-offset: 0px;
  --profile-bg: #eef1f4;
  --profile-surface: #ffffff;
  --profile-border: #dadce0;
  --profile-text: #202124;
  --profile-muted: #5f6368;
  --profile-blue: #1a73e8;
  --profile-blue-dark: #1557b0;
  --profile-blue-light: #4285f4;
  --profile-cover: linear-gradient(135deg, #1557b0 0%, #1a73e8 52%, #4c8df6 100%);
  --mui-primary: var(--profile-blue);
  --mui-primary-dark: var(--profile-blue-dark);
  --mui-primary-light: var(--profile-blue-light);
  --mui-primary-container: #e8f0fe;
  --mui-font: "Jost", sans-serif;
  --md-font: "Jost", sans-serif;
  font-family: "Jost", sans-serif !important;
  background: var(--profile-bg);
  min-height: 100vh;
}

.profile-page a,
.profile-page button,
.profile-page .md-btn-contained,
.profile-page .md-ripple {
  -webkit-tap-highlight-color: transparent;
}

.profile-page .page-title-clear {
  display: none !important;
}

.profile-page .profile-feed.page-content,
.profile-page .page-content,
.profile-page .profile-feed.md-feed {
  max-width: 680px;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--app-safe-top, 0px) + 8px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 24px) !important;
  background: var(--profile-bg) !important;
  overflow: visible !important;
}

.profile-page .md-profile-hero {
  position: relative;
  margin: 12px 0 12px;
  border-radius: 20px;
  background: var(--profile-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
  overflow: visible;
}

.profile-page .md-profile-hero__cover {
  position: relative;
  height: 112px;
  border-radius: 20px 20px 0 0;
  background: var(--profile-cover);
  overflow: hidden;
}

.profile-page .md-profile-hero__cover-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.22) 50%, transparent 62%);
  background-size: 220% 100%;
  animation: md-profile-shine 8s ease-in-out infinite;
}

@keyframes md-profile-shine {
  0% { background-position: 120% 0; }
  100% { background-position: -40% 0; }
}

.profile-page .md-profile-hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 18px;
  border-radius: 0 0 20px 20px;
  text-align: center;
}

.profile-page .md-profile-hero__avatar-wrap {
  position: relative;
  z-index: 2;
  margin-top: -58px;
  line-height: 0;
}

.profile-page .md-profile-hero__avatar {
  display: block;
  width: 104px;
  height: 104px;
  border: 4px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  background: var(--mui-primary-container);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14), 0 8px 20px rgba(15, 23, 42, 0.08);
}

.profile-page .md-profile-hero__avatar-wrap--icon .md-profile-hero__avatar--icon {
  object-fit: contain;
  padding: 14px;
  background: #fff;
  box-sizing: border-box;
}

.profile-page .md-profile-hero__overline {
  margin: 12px 0 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--profile-blue);
}

.profile-page .md-profile-hero__name {
  margin: 0 0 8px;
  max-width: 100%;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--profile-text);
}

.profile-page .md-profile-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  margin-bottom: 16px;
  padding: 0 10px;
  border-radius: 16px;
  background: #e6f4ea;
  color: #137333;
  font-size: 0.75rem;
  font-weight: 600;
}

.profile-page .md-profile-hero__chip i {
  font-size: 0.75rem;
}

.profile-page .md-profile-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--profile-border);
  box-sizing: border-box;
}

.profile-page .md-profile-hero__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 0 14px;
  border-radius: 20px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-transform: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.profile-page .md-profile-hero__action i {
  font-size: 0.875rem;
  flex-shrink: 0;
}

.profile-page .md-profile-hero__action span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-page .md-profile-hero__action--ghost {
  border: 1px solid rgba(26, 115, 232, 0.18);
  background: #e8f0fe;
  color: #174ea6;
}

.profile-page .md-profile-hero__action--ghost:hover,
.profile-page .md-profile-hero__action--ghost:focus-visible {
  background: #d2e3fc;
  border-color: rgba(26, 115, 232, 0.28);
  color: #0d47a1;
  outline: none;
}

.profile-page .md-profile-hero__action--primary {
  border: 1px solid rgba(66, 133, 244, 0.35);
  background: #d2e3fc;
  color: #0d47a1;
  box-shadow: none;
}

.profile-page .md-profile-hero__action--primary:hover,
.profile-page .md-profile-hero__action--primary:focus-visible {
  background: #aecbfa;
  border-color: rgba(26, 115, 232, 0.4);
  color: #0d47a1;
  outline: none;
}

.profile-page .md-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  border-top: 1px solid var(--profile-border);
}

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

.profile-page .md-profile-stats__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 8px 4px;
}

.profile-page .md-profile-stats__item + .md-profile-stats__item {
  border-left: 1px solid var(--profile-border);
}

.profile-page .md-profile-stats__value {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--profile-text);
  overflow-wrap: anywhere;
}

.profile-page .md-profile-stats__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--profile-muted);
}

.profile-page .md-profile-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
  box-sizing: border-box;
}

/* Force side-by-side rows (Password|QR, Phone|Address) */
body.profile-app .profile-page .md-profile-panel__actions,
body.profile-app .profile-page .md-profile-info-card,
.profile-page .md-profile-panel__actions,
.profile-page .md-profile-info-card {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

body.profile-app .profile-page .md-profile-panel__actions > .md-profile-tile,
body.profile-app .profile-page .md-profile-info-card > .md-profile-tile,
.profile-page .md-profile-panel__actions > .md-profile-tile,
.profile-page .md-profile-info-card > .md-profile-tile {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none;
  min-width: 0;
}

body.profile-app .profile-page .md-profile-info-card--stack,
.profile-page .md-profile-info-card--stack {
  display: flex !important;
  flex-flow: column nowrap !important;
  gap: 8px;
}

body.profile-app .profile-page .md-profile-info-card--stack > .md-profile-tile,
.profile-page .md-profile-info-card--stack > .md-profile-tile {
  flex: 0 0 auto !important;
  width: 100% !important;
}

.profile-page .md-profile-tile {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid #c0c4c8;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
}

.profile-page .md-profile-tile--static {
  cursor: default;
}

.profile-page a.md-profile-tile:hover,
.profile-page a.md-profile-tile:focus-visible {
  border-color: rgba(26, 115, 232, 0.45);
  background: #f7fbff;
  outline: none;
}

.profile-page .md-profile-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--mui-primary-container);
  color: var(--profile-blue);
  font-size: 0.9375rem;
}

.profile-page .md-profile-tile--password .md-profile-tile__icon {
  background: #e8f0fe;
  color: var(--profile-blue);
}

.profile-page .md-profile-tile--phone .md-profile-tile__icon {
  background: #e6f4ea;
  color: #137333;
}

.profile-page .md-profile-tile--location .md-profile-tile__icon {
  background: #fef7e0;
  color: #b06000;
}

.profile-page .md-profile-tile--qr .md-profile-tile__icon {
  background: #f3e8fd;
  color: #7b1fa2;
}

.profile-page .md-profile-tile--id .md-profile-tile__icon {
  background: #e8eaed;
  color: #3c4043;
}

.profile-page .md-profile-tile--settings .md-profile-tile__icon {
  background: #e8f0fe;
  color: #1a73e8;
}

.profile-page .md-profile-tile__copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
  padding-right: 12px;
  text-align: left;
}

.profile-page .md-profile-tile__label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--profile-muted);
}

.profile-page .md-profile-tile__value {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--profile-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-page .md-profile-tile--location .md-profile-tile__value,
.profile-page .md-profile-tile--phone .md-profile-tile__value {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.profile-page .md-profile-tile__chevron {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  flex-shrink: 0;
  font-size: 0.65rem;
  color: rgba(0, 0, 0, 0.32);
}

@media (max-width: 360px) {
  .profile-page .md-profile-panel__actions,
  .profile-page .md-profile-info-card {
    gap: 8px;
  }

  .profile-page .md-profile-tile {
    gap: 8px;
    min-height: 56px;
    padding: 8px 10px;
  }

  .profile-page .md-profile-tile__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 0.8125rem;
  }

  .profile-page .md-profile-tile__chevron {
    display: none;
  }

  .profile-page .md-profile-tile__copy {
    padding-right: 0;
  }
}

.profile-page .md-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 14px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.profile-page .md-search-field:focus-within {
  border-color: rgba(26, 115, 232, 0.35);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
}

.profile-page .md-search-field__icon {
  color: rgba(0, 0, 0, 0.45);
  font-size: 0.875rem;
}

.profile-page .md-search-field__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  color: rgba(0, 0, 0, 0.87);
}

.profile-page .md-profile-sheet {
  margin: 0 0 16px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.profile-page .md-profile-sheet__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  padding: 0 2px;
}

.profile-page .md-profile-sheet__head-copy {
  min-width: 0;
}

.profile-page .md-profile-sheet__overline {
  margin: 0 0 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--profile-blue);
}

.profile-page .md-profile-sheet__title {
  margin: 0;
  padding: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-transform: none;
  color: var(--profile-text);
}

.profile-page .md-profile-sheet__count {
  flex-shrink: 0;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  background: #e8f0fe;
  color: var(--profile-blue);
  font-size: 0.75rem;
  font-weight: 600;
}

.profile-page .md-profile-sheet__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-page .md-profile-sheet__empty {
  margin: 0;
  padding: 18px 16px;
  border-radius: 16px;
  background: var(--profile-surface);
  border: 1px dashed rgba(15, 23, 42, 0.14);
  color: var(--profile-muted);
  font-size: 0.875rem;
  text-align: center;
}

.profile-page .md-profile-member-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #c0c4c8 !important;
  border-radius: 12px !important;
  background: #fff;
  box-shadow: none !important;
  overflow: hidden;
}

.profile-page .md-profile-member-row__main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 12px;
}

.profile-page .md-profile-member-row__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  width: 56px;
}

.profile-page .md-profile-member-row__avatar {
  flex-shrink: 0;
  width: 56px;
  height: 68px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--mui-primary-container, #e8f0fe);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.profile-page .md-profile-member-row__avatar.md-avatar--staff {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

.profile-page .md-profile-member-row__gender {
  max-width: 100%;
  height: 18px;
  padding: 0 6px;
  font-size: 0.5625rem;
  letter-spacing: 0.02em;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-page .md-profile-member-row__text,
.profile-page .md-profile-member-row__body {
  flex: 1;
  min-width: 0;
}

.profile-page .md-profile-member-row__name {
  margin: 0 0 6px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--profile-text);
}

.profile-page .md-profile-member-row__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.profile-page .md-profile-member-row__chips .md-chip,
.profile-page .md-profile-member-row__class {
  height: 22px;
  padding: 0 8px;
  font-size: 0.6875rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-page .md-profile-member-row__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: #f8fafc;
  overflow: hidden;
}

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

.profile-page .md-profile-member-row__facts--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-page .md-profile-member-row__facts--1 {
  grid-template-columns: 1fr;
}

.profile-page .md-profile-dob-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #e8f0fe 0%, #f8fafc 100%);
  border: 1px solid rgba(21, 101, 192, 0.12);
  box-sizing: border-box;
}

.profile-page .md-profile-dob-tip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #1565c0;
  font-size: 0.9375rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.profile-page .md-profile-dob-tip__copy {
  min-width: 0;
}

.profile-page .md-profile-dob-tip__title {
  display: block;
  margin: 0 0 2px;
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: #0d47a1;
  line-height: 1.3;
}

.profile-page .md-profile-dob-tip__text {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #174ea6;
  line-height: 1.4;
}

/* Compact staff “My details” card */
.profile-page .md-profile-details {
  margin: 0 0 16px;
  padding: 0;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.profile-page .md-profile-details__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 12px;
}

.profile-page .md-profile-details__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: #e8eaed;
  flex-shrink: 0;
}

.profile-page .md-profile-details__identity {
  min-width: 0;
  flex: 1;
}

.profile-page .md-profile-details__overline {
  margin: 0 0 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--profile-blue, #1a73e8);
}

.profile-page .md-profile-details__name {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: rgba(0, 0, 0, 0.87);
  word-break: break-word;
}

.profile-page .md-profile-details__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.profile-page .md-profile-details__chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  background: #f1f3f4;
  color: #3c4043;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
}

.profile-page .md-profile-details__chip--tonal {
  background: rgba(26, 115, 232, 0.12);
  color: #1557b0;
}

.profile-page .md-profile-details__meta {
  margin: 0;
  padding: 0 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.profile-page .md-profile-details__meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}

.profile-page .md-profile-details__meta-row + .md-profile-details__meta-row {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.profile-page .md-profile-details__meta-row dt {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}

.profile-page .md-profile-details__meta-row dd {
  margin: 0;
  text-align: right;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
  word-break: break-word;
}

.profile-page .md-profile-details__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 14px 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.profile-page .md-profile-details__actions .md-btn-contained,
.profile-page .md-profile-details__actions .md-btn-outlined {
  width: 100%;
  min-height: 40px;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  font-size: 0.8125rem;
}

.profile-page .md-profile-details__actions .edit_staff_profile.md-btn-contained {
  background: var(--profile-blue, #1a73e8);
  color: #fff;
  border: none;
}

.profile-page .md-profile-details__actions .edit_staff_profile.md-btn-contained:hover,
.profile-page .md-profile-details__actions .edit_staff_profile.md-btn-contained:focus-visible {
  background: var(--profile-blue-dark, #1557b0);
  color: #fff;
}

.profile-page .md-profile-member-row__fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 8px 7px;
}

.profile-page .md-profile-member-row__fact + .md-profile-member-row__fact {
  border-left: 1px solid rgba(15, 23, 42, 0.08);
}

.profile-page .md-profile-member-row__fact-label {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--profile-muted);
}

.profile-page .md-profile-member-row__fact-value {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--profile-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-page .md-profile-member-row__meta,
.profile-page .md-profile-member-row__serial {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--profile-muted);
}

.profile-page .md-profile-member-row__serial {
  color: var(--profile-blue);
  font-weight: 600;
}

.profile-page .md-profile-member-row__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  background: #f8fafc;
}

.profile-page .md-profile-member-row__actions--solo {
  grid-template-columns: 1fr;
}

.profile-page .md-profile-member-row__actions .md-btn-contained,
.profile-page .md-profile-member-row__actions .md-btn-outlined {
  width: 100%;
  min-height: 40px;
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 600;
  box-shadow: none;
  border-radius: 12px;
}

.profile-page .md-profile-member-row__actions .edit_staff_profile.md-btn-contained {
  border: 1px solid #c0c4c8;
  background: #e8f0fe;
  color: #1565c0;
  box-shadow: none;
}

.profile-page .md-profile-member-row__actions .edit_staff_profile.md-btn-contained:hover,
.profile-page .md-profile-member-row__actions .edit_staff_profile.md-btn-contained:focus-visible {
  background: #d2e3fc;
  border-color: #c0c4c8;
  color: #0d47a1;
}

/* Account + Contact — MUI Paper + ListItem */
.profile-page .md-profile-account,
.profile-page .md-profile-contact {
  margin: 0 0 16px;
  padding: 0;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--md-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06));
  overflow: hidden;
}

.profile-page .md-profile-account__head,
.profile-page .md-profile-contact__head {
  padding: 14px 16px 8px;
  border-bottom: none;
}

.profile-page .md-profile-account__title,
.profile-page .md-profile-contact__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--md-primary, #1976d2);
}

.profile-page .md-profile-account__hint,
.profile-page .md-profile-contact__hint {
  margin: 2px 0 0;
  font-size: 0.75rem;
  line-height: 1.43;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.6);
}

.profile-page .md-profile-account__list.md-mui-list,
.profile-page .md-profile-contact__list.md-mui-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-page .md-profile-account .md-mui-list-item,
.profile-page .md-profile-contact .md-mui-list-item {
  margin: 0;
  padding: 0;
}

.profile-page .md-profile-account .md-mui-list-item + .md-mui-list-item,
.profile-page .md-profile-contact .md-mui-list-item + .md-mui-list-item {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.profile-page .md-profile-account .md-mui-list-item__btn,
.profile-page .md-profile-contact .md-mui-list-item__btn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;
}

.profile-page .md-profile-account .md-mui-list-item__btn:hover,
.profile-page .md-profile-contact a.md-mui-list-item__btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

.profile-page .md-profile-account .md-mui-list-item__btn:active,
.profile-page .md-profile-account .md-mui-list-item__btn:focus-visible,
.profile-page .md-profile-contact a.md-mui-list-item__btn:active,
.profile-page .md-profile-contact a.md-mui-list-item__btn:focus-visible {
  background: rgba(25, 118, 210, 0.08);
  outline: none;
}

.profile-page .md-profile-account .md-mui-list-item__btn--static,
.profile-page .md-profile-contact .md-mui-list-item__btn--static {
  cursor: default;
}

.profile-page .md-profile-contact .md-mui-list-item__btn--static:hover {
  background: transparent;
}

.profile-page .md-profile-account .md-mui-list-item__icon,
.profile-page .md-profile-contact .md-mui-list-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(25, 118, 210, 0.08);
  color: #1976d2;
  flex-shrink: 0;
  font-size: 1rem;
}

.profile-page .md-profile-account .md-mui-list-item__icon--danger {
  background: rgba(211, 47, 47, 0.08);
  color: #d32f2f;
}

.profile-page .md-profile-account .md-mui-list-item__text,
.profile-page .md-profile-contact .md-mui-list-item__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.profile-page .md-profile-account .md-mui-list-item__primary,
.profile-page .md-profile-contact .md-mui-list-item__primary {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.00938em;
  color: rgba(0, 0, 0, 0.87);
}

.profile-page .md-profile-account .md-mui-list-item__secondary,
.profile-page .md-profile-contact .md-mui-list-item__secondary {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: 0.01071em;
  color: rgba(0, 0, 0, 0.6);
  white-space: normal;
  overflow-wrap: anywhere;
}

.profile-page .md-profile-account .md-mui-list-item__chevron,
.profile-page .md-profile-contact .md-mui-list-item__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.38);
  font-size: 0.875rem;
  flex-shrink: 0;
}

.profile-page .md-profile-account__item--danger .md-mui-list-item__primary {
  color: #d32f2f;
}

.profile-page .md-profile-account__item--danger .md-mui-list-item__btn:hover,
.profile-page .md-profile-account__item--danger .md-mui-list-item__btn:focus-visible {
  background: rgba(211, 47, 47, 0.06);
}

.profile-page .md-profile-account__item--danger .md-mui-list-item__chevron {
  color: rgba(211, 47, 47, 0.45);
}

.profile-page .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.md-profile-form .mui-field {
  margin-bottom: 12px;
}

/* Profile password / QR dialogs in #empty_modal */
#empty_modal:has(.md-profile-sheet) {
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  width: min(420px, calc(100vw - 24px)) !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: min(92dvh, 680px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 18px 48px rgba(13, 71, 161, 0.22) !important;
  overflow: hidden !important;
  transform: translate(-50%, -50%) !important;
  font-family: "Jost", sans-serif;
  display: flex !important;
  flex-direction: column !important;
}

#empty_modal:has(.md-profile-sheet) .menu-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 18px 12px 16px 20px;
  border-bottom: none;
  background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
}

#empty_modal:has(.md-profile-sheet) .menu-title > a.close-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

#empty_modal:has(.md-profile-sheet) .menu-title > a.close-menu:hover,
#empty_modal:has(.md-profile-sheet) .menu-title > a.close-menu:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
  outline: none;
}

#empty_modal:has(.md-profile-sheet) .menu-title > a.close-menu i {
  margin: 0;
}

#empty_modal:has(.md-profile-sheet) .modal-title {
  display: block;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
}

#empty_modal:has(.md-profile-sheet) .md-profile-sheet-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

#empty_modal:has(.md-profile-sheet) .md-profile-sheet-heading__overline {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.2;
}

#empty_modal:has(.md-profile-sheet) .md-profile-sheet-heading__title {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
  text-transform: none;
}

#empty_modal:has(.md-profile-sheet) .content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}

#empty_modal:has(.md-profile-sheet) .divider,
#empty_modal:has(.md-profile-sheet) .spinnerContent {
  display: none !important;
}

#empty_modal:has(.md-profile-sheet) .modal-div {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  background: #f3f6fb;
}

#empty_modal:has(.md-profile-sheet) .modal-footer {
  display: block !important;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 12px 16px calc(14px + var(--md-sheet-footer-safe, 0px)) !important;
  border-top: 1px solid rgba(13, 71, 161, 0.1);
  background: #fff;
}

.md-profile-sheet {
  padding: 16px 16px 8px;
}

.md-profile-sheet__banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #e3f2fd;
  border: 1px solid rgba(21, 101, 192, 0.16);
}

.md-profile-sheet__banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #1565c0;
  font-size: 0.9375rem;
  box-shadow: 0 1px 3px rgba(13, 71, 161, 0.12);
}

.md-profile-sheet__banner-text {
  margin: 0;
  padding-top: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: #0d47a1;
}

.md-profile-sheet__fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.md-profile-sheet__hint {
  margin: 6px 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(13, 71, 161, 0.62);
}

.md-profile-pw .mui-field__label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.72);
}

.md-profile-pw__control {
  position: relative;
  display: flex;
  align-items: center;
}

.md-profile-pw__control .mui-field__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 48px 12px 14px;
  border: 1px solid rgba(13, 71, 161, 0.18);
  border-radius: 12px;
  background: #fff;
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  color: rgba(0, 0, 0, 0.87);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.md-profile-pw__control .mui-field__input:focus {
  outline: none;
  border-color: #1565c0;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16);
}

.md-profile-pw__toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(13, 71, 161, 0.62);
  cursor: pointer;
}

.md-profile-pw__toggle:hover,
.md-profile-pw__toggle:focus-visible {
  background: rgba(21, 101, 192, 0.08);
  color: #0d47a1;
  outline: none;
}

.md-profile-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

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

.md-profile-modal__actions .md-btn-contained,
.md-profile-modal__actions .md-btn-outlined,
.md-profile-modal__actions .close-menu {
  width: 100%;
  min-height: 44px;
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 600;
  border-radius: 12px;
}

#empty_modal:has(.md-profile-sheet) .md-profile-modal__actions .md-btn-contained {
  background: #0d47a1;
  border-color: #0d47a1;
}

#empty_modal:has(.md-profile-sheet) .md-profile-modal__actions .md-btn-contained:hover,
#empty_modal:has(.md-profile-sheet) .md-profile-modal__actions .md-btn-contained:focus-visible {
  background: #0a3a82;
  border-color: #0a3a82;
}

#empty_modal:has(.md-profile-sheet) .md-profile-modal__actions .md-btn-outlined,
#empty_modal:has(.md-profile-sheet) .md-profile-modal__actions .close-menu.md-btn-outlined {
  border: 1px solid rgba(13, 71, 161, 0.28);
  color: #0d47a1;
  background: #fff;
}

.md-profile-sheet--qr {
  padding: 20px 16px 12px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(227, 242, 253, 0.95) 0%, transparent 70%),
    #f3f6fb;
}

.md-profile-qr {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 0 4px;
}

.md-profile-qr__glow {
  position: absolute;
  top: 24px;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25, 118, 210, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.md-profile-qr__frame {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(220px, 68vw);
  aspect-ratio: 1;
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(13, 71, 161, 0.12);
  box-shadow:
    0 1px 2px rgba(13, 71, 161, 0.06),
    0 12px 28px rgba(13, 71, 161, 0.12);
}

.md-profile-qr__frame img,
.md-profile-qr .qr-code {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.md-profile-qr__hint {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 280px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(13, 71, 161, 0.72);
  text-align: center;
}

.md-profile-dl {
  margin: 0;
}

.md-profile-dl__row {
  display: grid;
  grid-template-columns: minmax(110px, 38%) 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.md-profile-dl__row:last-child {
  border-bottom: 0;
}

.md-profile-dl dt {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.54);
}

.md-profile-dl dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
  overflow-wrap: anywhere;
}

.md-profile-dl__empty {
  color: var(--mui-error);
  font-style: italic;
  font-weight: 500;
}

.md-profile-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.md-profile-view__empty {
  margin: 0;
  padding: 24px 12px;
  text-align: center;
  color: rgba(0, 0, 0, 0.54);
  font-size: 0.9375rem;
}

.md-profile-view__hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(21, 101, 192, 0.16);
  background: linear-gradient(160deg, #e8f1fc 0%, #f7fbff 55%, #fff 100%);
  box-shadow: 0 2px 8px rgba(13, 71, 161, 0.08);
}

.md-profile-view__avatar {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: cover;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(13, 71, 161, 0.14);
}

.md-profile-view__intro {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.md-profile-view__eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1565c0;
}

.md-profile-view__name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #0d47a1;
  overflow-wrap: anywhere;
}

.md-profile-view__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.md-profile-view__section {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

.md-profile-view__section-title {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(13, 71, 161, 0.72);
}

.md-profile-view .md-profile-dl__row {
  padding: 10px 0;
}

.md-profile-view .md-profile-dl__row:first-of-type {
  padding-top: 8px;
}

#fullEmptyModal.md-timeline-sheet:has(.md-profile-view) .md-timeline-sheet__title.modal-title {
  display: block;
}

#fullEmptyModal.md-timeline-sheet:has(.md-profile-view) .md-profile-sheet-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#fullEmptyModal.md-timeline-sheet:has(.md-profile-view) .md-profile-sheet-heading__overline {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(13, 71, 161, 0.72);
  line-height: 1.2;
}

#fullEmptyModal.md-timeline-sheet:has(.md-profile-view) .md-profile-sheet-heading__title {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #0f172a;
  text-transform: none;
}

#fullEmptyModal.md-timeline-sheet:has(.md-profile-view) .md-timeline-sheet__body {
  background: #f5f8fc;
}

#fullEmptyModal.md-timeline-sheet:has(.md-profile-view) .md-profile-modal__actions {
  width: 100%;
}

/* Edit student profile sheet inside fullEmptyModal */
#fullEmptyModal.md-timeline-sheet:has(.md-profile-sheet) .md-timeline-sheet__title.modal-title {
  width: 100%;
}

#fullEmptyModal.md-timeline-sheet:has(.md-profile-sheet) .md-profile-sheet-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#fullEmptyModal.md-timeline-sheet:has(.md-profile-sheet) .md-profile-sheet-heading__overline {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

#fullEmptyModal.md-timeline-sheet:has(.md-profile-sheet) .md-profile-sheet-heading__title {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

#fullEmptyModal.md-timeline-sheet:has(.md-profile-sheet) .md-timeline-sheet__body {
  background: #f5f7fb;
}

#fullEmptyModal.md-timeline-sheet:has(.md-profile-sheet) .md-profile-modal__actions {
  width: 100%;
}

#fullEmptyModal.md-timeline-sheet:has(.md-profile-sheet) .md-profile-modal__actions .md-btn-contained {
  background: #1565c0;
  color: #fff;
  box-shadow: none;
}

#fullEmptyModal.md-timeline-sheet:has(.md-profile-sheet) .md-profile-modal__actions .md-btn-contained:hover,
#fullEmptyModal.md-timeline-sheet:has(.md-profile-sheet) .md-profile-modal__actions .md-btn-contained:focus-visible {
  background: #0d47a1;
}

#fullEmptyModal .md-profile-sheet--edit {
  padding: 4px 0 8px;
}

#fullEmptyModal .md-profile-sheet--edit .md-profile-sheet__banner {
  margin-bottom: 16px;
}

#fullEmptyModal .md-profile-edit-dob {
  margin: 0;
}

#fullEmptyModal .md-profile-edit-dob__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
}

#fullEmptyModal .md-profile-edit-dob__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

#fullEmptyModal .md-profile-edit-dob__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #e3f2fd;
  color: #1565c0;
  font-size: 1.0625rem;
  flex-shrink: 0;
}

#fullEmptyModal .md-profile-edit-dob__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#fullEmptyModal .md-profile-edit-dob__label {
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #202124;
  letter-spacing: 0.01em;
}

#fullEmptyModal .md-profile-edit-dob__hint {
  font-family: "Jost", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: #5f6368;
  line-height: 1.35;
}

#fullEmptyModal .md-profile-edit-dob__value-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 14px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef5ff 100%);
  border: 1px solid rgba(21, 101, 192, 0.1);
}

#fullEmptyModal .md-profile-edit-dob__display {
  font-family: "Jost", sans-serif;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #0d47a1;
}

#fullEmptyModal .md-profile-edit-dob__iso {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(21, 101, 192, 0.1);
  color: #1565c0;
  font-family: "Jost", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

#fullEmptyModal .md-profile-edit-dob__trigger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(21, 101, 192, 0.22);
  border-radius: 12px;
  background: #e3f2fd;
  color: #0d47a1;
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

#fullEmptyModal .md-profile-edit-dob__trigger:hover,
#fullEmptyModal .md-profile-edit-dob__trigger:focus-visible {
  background: #bbdefb;
  border-color: rgba(21, 101, 192, 0.35);
  outline: none;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.14);
}

#fullEmptyModal .md-profile-edit-dob__input {
  position: absolute !important;
  left: 16px;
  bottom: 16px;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
}

.md-profile-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--mui-primary-container);
  color: var(--profile-blue-dark, #1557b0);
  font-size: 0.875rem;
}

#student_action.md-sl-sheet .md-sl-sheet__body.action-div {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

#student_action.md-sl-sheet .spinnerStudentAction.md-sl-sheet__loading {
  display: none;
  padding: 28px 0 20px;
  text-align: center;
}

.is-webview #student_action.md-sl-sheet .md-sl-sheet__body.action-div {
  padding-bottom: 16px !important;
}

@media (max-width: 480px) {
  .profile-page .profile-feed.page-content,
  .profile-page .page-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .profile-page .md-profile-hero__name {
    font-size: 1.25rem;
  }

  .profile-page .md-profile-stats__value {
    font-size: 0.8125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-page .md-profile-hero__cover-shine,
  .profile-page .md-animate-in {
    animation: none;
  }
}

/* >>> recovered: check-result (607 lines) <<< */
/* ── zap-app: check-result ── */

html.check-result-app .header.header-fixed,
body.check-result-app .header.header-fixed,
.is-webview.check-result-app .header.header-fixed,
.is-webview body.check-result-app .header.header-fixed,
html.zap-ward-app .header.header-fixed,
body.zap-ward-app .header.header-fixed,
.is-webview.zap-ward-app .header.header-fixed,
.is-webview body.zap-ward-app .header.header-fixed {
  display: none !important;
}

body.check-result-app,
body.zap-ward-app {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.check-result-app #page,
body.check-result-app .md-page.check-result-page,
body.check-result-app .md-page.check-result-page .check-result-feed.page-content,
body.check-result-app .md-page.check-result-page .page-content,
body.zap-ward-app #page,
body.zap-ward-app .md-page.zap-ward-page,
body.zap-ward-app .md-page.zap-ward-page .check-result-feed.page-content,
body.zap-ward-app .md-page.zap-ward-page .zap-ward-feed.page-content,
body.zap-ward-app .md-page.zap-ward-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.check-result-page,
.zap-ward-page {
  --md-header-offset: 0px;
  --md-check-result-toolbar-offset: 64px;
  --cr-bg: #eef3f9;
  --cr-surface: #ffffff;
  --cr-border: rgba(25, 118, 210, 0.14);
  --cr-text: rgba(0, 0, 0, 0.87);
  --cr-muted: rgba(0, 0, 0, 0.6);
  --cr-navy: #1565c0;
  --cr-navy-mid: #1976d2;
  --cr-navy-light: #1976d2;
  --cr-blue: var(--cr-navy-light);
  --cr-blue-dark: var(--cr-navy);
  --cr-blue-light: #42a5f5;
  --cr-ink: #0d47a1;
  --cr-stamp: #ffffff;
  --cr-soft: #e3f2fd;
  --cr-soft-deep: #bbdefb;
  --md-soft-pill-bg: #e3f2fd;
  --md-soft-pill-border: rgba(25, 118, 210, 0.2);
  --md-soft-pill-primary: #1976d2;
  --md-soft-pill-overline: rgba(21, 101, 192, 0.7);
  --mui-primary: #1976d2;
  --mui-primary-dark: #1565c0;
  --mui-primary-light: #42a5f5;
  --mui-primary-container: #e3f2fd;
  --mui-font: "Jost", sans-serif;
  --md-font: "Jost", sans-serif;
  font-family: "Jost", sans-serif !important;
  background: var(--cr-bg);
  min-height: 100vh;
}

.check-result-page a,
.check-result-page button,
.check-result-page .md-btn-contained,
.check-result-page .md-ripple,
.zap-ward-page a,
.zap-ward-page button,
.zap-ward-page .md-btn-contained,
.zap-ward-page .md-ripple {
  -webkit-tap-highlight-color: transparent;
}

.check-result-page .page-title-clear,
.zap-ward-page .page-title-clear {
  display: none !important;
}

.check-result-page .check-result-feed.page-content,
.check-result-page .page-content,
.check-result-page .check-result-feed.md-feed,
.zap-ward-page .check-result-feed.page-content,
.zap-ward-page .zap-ward-feed.page-content,
.zap-ward-page .page-content,
.zap-ward-page .check-result-feed.md-feed,
.zap-ward-page .zap-ward-feed.md-feed {
  max-width: 680px;
  width: 100%;
  margin: 0 auto !important;
  margin-top: 0 !important;
  padding-top: calc(var(--md-check-result-toolbar-offset, 64px) + 8px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 24px) !important;
  background: var(--cr-bg) !important;
  overflow: visible !important;
}

.check-result-page .md-check-toolbar.card-filter,
.zap-ward-page .md-check-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--cr-border) !important;
  box-shadow: var(--mui-elevation-1) !important;
  background: var(--cr-surface) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none !important;
  overflow: visible !important;
}

.check-result-page .md-check-toolbar .content,
.check-result-page .md-check-toolbar__inner,
.zap-ward-page .md-check-toolbar .content,
.zap-ward-page .md-check-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 8px 12px 10px !important;
  box-sizing: border-box;
}

.check-result-page .md-check-toolbar__brand,
.zap-ward-page .md-check-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.check-result-page .md-check-toolbar__back,
.check-result-page .md-check-toolbar__reload,
.zap-ward-page .md-check-toolbar__back,
.zap-ward-page .md-check-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--cr-soft);
  color: var(--cr-navy);
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.check-result-page .md-check-toolbar__reload,
.zap-ward-page .md-check-toolbar__reload {
  margin-left: auto;
}

.check-result-page .md-check-toolbar__back:hover,
.check-result-page .md-check-toolbar__back:focus-visible,
.check-result-page .md-check-toolbar__reload:hover,
.check-result-page .md-check-toolbar__reload:focus-visible,
.zap-ward-page .md-check-toolbar__back:hover,
.zap-ward-page .md-check-toolbar__back:focus-visible,
.zap-ward-page .md-check-toolbar__reload:hover,
.zap-ward-page .md-check-toolbar__reload:focus-visible {
  background: var(--cr-soft-deep);
  color: var(--cr-navy);
  outline: none;
}

.check-result-page .md-check-toolbar__back:focus-visible,
.check-result-page .md-check-toolbar__reload:focus-visible,
.zap-ward-page .md-check-toolbar__back:focus-visible,
.zap-ward-page .md-check-toolbar__reload:focus-visible {
  outline: 2px solid var(--cr-navy-light);
  outline-offset: 2px;
}

.check-result-page .md-check-toolbar__title,
.zap-ward-page .md-check-toolbar__title {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cr-ink);
  line-height: 1.2;
  text-transform: none;
}

.check-result-page .md-check-toolbar__chip,
.zap-ward-page .md-check-toolbar__chip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 14px 8px 8px;
  box-sizing: border-box;
  border: 1px solid var(--md-soft-pill-border);
  border-radius: 16px;
  background: var(--md-soft-pill-bg) !important;
  color: var(--md-soft-pill-primary);
  font-family: var(--mui-font, "Jost", sans-serif);
  box-shadow: none !important;
  pointer-events: none;
}

.check-result-page .md-check-toolbar__chip-avatar,
.zap-ward-page .md-check-toolbar__chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--md-soft-pill-primary);
  color: #fff;
  font-size: 0.8125rem;
  box-shadow: 0 1px 2px rgba(11, 45, 92, 0.28);
}

.check-result-page .md-check-toolbar__chip-label,
.zap-ward-page .md-check-toolbar__chip-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}

.check-result-page .md-check-toolbar__chip-overline,
.zap-ward-page .md-check-toolbar__chip-overline {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-soft-pill-overline);
}

.check-result-page .md-check-toolbar__chip-text,
.zap-ward-page .md-check-toolbar__chip-text {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--cr-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.check-result-page .md-check-hero,
.zap-ward-page .md-check-hero {
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid var(--cr-border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(11, 45, 92, 0.06), 0 4px 14px rgba(11, 45, 92, 0.08);
}

.check-result-page .md-check-hero__band,
.zap-ward-page .md-check-hero__band {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 16px;
  background: linear-gradient(135deg, #1565c0 0%, #1976d2 52%, #42a5f5 100%);
  color: #fff;
}

.check-result-page .md-check-hero__copy,
.zap-ward-page .md-check-hero__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.check-result-page .md-check-hero__overline,
.zap-ward-page .md-check-hero__overline {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.check-result-page .md-check-hero__title,
.zap-ward-page .md-check-hero__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #fff;
}

.check-result-page .md-check-hero__stamp,
.zap-ward-page .md-check-hero__stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 88px;
  padding: 8px 12px;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  text-align: center;
  transform: rotate(-3deg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.check-result-page .md-check-hero__stamp-value,
.zap-ward-page .md-check-hero__stamp-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.check-result-page .md-check-hero__stamp-label,
.zap-ward-page .md-check-hero__stamp-label {
  margin-top: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.check-result-page .md-check-hero__pills,
.zap-ward-page .md-check-hero__pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, #f5f8fc 0%, var(--cr-surface) 100%);
  border-top: 1px solid var(--cr-border);
}

.check-result-page .md-check-hero__pill,
.zap-ward-page .md-check-hero__pill {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #c0c4c8;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

.check-result-page .md-check-hero__pill i,
.zap-ward-page .md-check-hero__pill i {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #c0c4c8;
  background: #fff;
  color: var(--cr-navy);
  font-size: 0.75rem;
  box-shadow: none;
}

.check-result-page .md-check-hero__pill-copy,
.zap-ward-page .md-check-hero__pill-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.check-result-page .md-check-hero__pill-label,
.zap-ward-page .md-check-hero__pill-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cr-muted);
}

.check-result-page .md-check-hero__pill-value,
.zap-ward-page .md-check-hero__pill-value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cr-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.check-result-page .md-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0 14px;
  min-height: 48px;
  border-radius: 24px;
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.check-result-page .md-search-field:focus-within,
.zap-ward-page .md-search-field:focus-within {
  border-color: var(--cr-navy-light);
  box-shadow: 0 0 0 3px rgba(11, 45, 92, 0.14);
}

.check-result-page .md-search-field__icon {
  color: var(--cr-muted);
  font-size: 0.875rem;
}

.check-result-page .md-search-field__input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--cr-text);
  outline: none;
}

.check-result-page .md-search-field__input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

.check-result-page .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.check-result-page .md-list,
.zap-ward-page .md-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.check-result-page .md-check-graduated,
.zap-ward-page .md-check-graduated,
.profile-page .md-check-graduated {
  margin: 4px 0 0;
  border: 1px solid #e0e3e7;
  border-radius: 12px;
  background: #f8f9fa;
  overflow: hidden;
}

.check-result-page .md-check-graduated__summary,
.zap-ward-page .md-check-graduated__summary,
.profile-page .md-check-graduated__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  font-family: var(--md-font, "Jost", sans-serif);
  color: rgba(0, 0, 0, 0.72);
}

.check-result-page .md-check-graduated__summary::-webkit-details-marker,
.zap-ward-page .md-check-graduated__summary::-webkit-details-marker,
.profile-page .md-check-graduated__summary::-webkit-details-marker {
  display: none;
}

.check-result-page .md-check-graduated__summary::marker,
.zap-ward-page .md-check-graduated__summary::marker,
.profile-page .md-check-graduated__summary::marker {
  content: "";
}

.check-result-page .md-check-graduated__copy,
.zap-ward-page .md-check-graduated__copy,
.profile-page .md-check-graduated__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.check-result-page .md-check-graduated__label,
.zap-ward-page .md-check-graduated__label,
.profile-page .md-check-graduated__label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.check-result-page .md-check-graduated__hint,
.zap-ward-page .md-check-graduated__hint,
.profile-page .md-check-graduated__hint {
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.48);
}

.check-result-page .md-check-graduated__hint-open,
.zap-ward-page .md-check-graduated__hint-open,
.profile-page .md-check-graduated__hint-open {
  display: none;
}

.check-result-page .md-check-graduated[open] .md-check-graduated__hint-closed,
.zap-ward-page .md-check-graduated[open] .md-check-graduated__hint-closed,
.profile-page .md-check-graduated[open] .md-check-graduated__hint-closed {
  display: none;
}

.check-result-page .md-check-graduated[open] .md-check-graduated__hint-open,
.zap-ward-page .md-check-graduated[open] .md-check-graduated__hint-open,
.profile-page .md-check-graduated[open] .md-check-graduated__hint-open {
  display: inline;
}

.check-result-page .md-check-graduated__count,
.zap-ward-page .md-check-graduated__count,
.profile-page .md-check-graduated__count {
  flex: 0 0 auto;
  min-width: 1.5rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8eaed;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: rgba(0, 0, 0, 0.64);
}

.check-result-page .md-check-graduated__chevron,
.zap-ward-page .md-check-graduated__chevron,
.profile-page .md-check-graduated__chevron {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease;
}

.check-result-page .md-check-graduated[open] .md-check-graduated__chevron,
.zap-ward-page .md-check-graduated[open] .md-check-graduated__chevron,
.profile-page .md-check-graduated[open] .md-check-graduated__chevron {
  transform: rotate(180deg);
}

.check-result-page .md-check-graduated__list,
.zap-ward-page .md-check-graduated__list {
  padding: 0 10px 10px;
  gap: 10px;
}

.profile-page .md-profile-graduated__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 10px 10px;
}

.check-result-page .md-check-graduated__summary:focus-visible,
.zap-ward-page .md-check-graduated__summary:focus-visible,
.profile-page .md-check-graduated__summary:focus-visible {
  outline: 2px solid var(--md-primary, #1565c0);
  outline-offset: -2px;
}

.check-result-page .md-check-card,
.zap-ward-page .md-check-card,
.check-result-page article.md-check-card.md-card,
.zap-ward-page article.md-check-card.md-card {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid #c0c4c8 !important;
  border-radius: 12px !important;
  background: #fff;
  box-shadow: none !important;
}

.check-result-page .md-check-card::before,
.zap-ward-page .md-check-card::before {
  display: none;
}

.check-result-page .md-check-card__body,
.zap-ward-page .md-check-card__body {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  background: #fff;
}

.check-result-page .md-check-card__profile,
.zap-ward-page .md-check-card__profile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 72px;
  max-width: 72px;
  min-width: 0;
  text-align: center;
}

.check-result-page .md-check-card__avatar,
.zap-ward-page .md-check-card__avatar {
  display: block;
  width: 72px;
  height: 112px;
  margin: 0;
  border-radius: 10px;
  object-fit: cover;
  object-position: center top;
  background: var(--cr-soft);
  border: 1px solid #e8eaed;
  box-shadow: none;
}

.check-result-page .md-check-card__content,
.zap-ward-page .md-check-card__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}

.check-result-page .md-check-card__name,
.zap-ward-page .md-check-card__name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.87);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.check-result-page .md-check-card__chips,
.zap-ward-page .md-check-card__chips {
  display: none;
}

.check-result-page .md-check-card__class,
.zap-ward-page .md-check-card__class {
  display: block;
  max-width: 100%;
  margin: -2px 0 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: var(--cr-navy);
  overflow: visible;
  white-space: normal;
  word-break: break-word;
}

.check-result-page .md-check-card__class--graduated,
.zap-ward-page .md-check-card__class--graduated {
  background: transparent;
  color: var(--md-success, #137333);
}

.check-result-page .md-check-card__meta,
.zap-ward-page .md-check-card__meta {
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.5625rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--cr-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.check-result-page .md-check-card__metrics,
.zap-ward-page .md-check-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border: 1px solid #e8eaed;
  border-radius: 10px;
  overflow: hidden;
  background: #f8f9fa;
}

.check-result-page .md-check-card__metrics--1,
.zap-ward-page .md-check-card__metrics--1 {
  grid-template-columns: 1fr;
}

.check-result-page .md-check-card__metrics--2,
.zap-ward-page .md-check-card__metrics--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.check-result-page .md-check-card__metrics--4,
.zap-ward-page .md-check-card__metrics--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.check-result-page .md-check-metric,
.zap-ward-page .md-check-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 0;
  padding: 6px 4px;
  border: 0;
  border-right: 1px solid #e8eaed;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.check-result-page .md-check-metric:last-child,
.zap-ward-page .md-check-metric:last-child {
  border-right: 0;
}

.check-result-page .md-check-card__metrics--4 .md-check-metric:nth-child(2),
.zap-ward-page .md-check-card__metrics--4 .md-check-metric:nth-child(2) {
  border-right: 0;
}

.check-result-page .md-check-card__metrics--4 .md-check-metric:nth-child(n+3),
.zap-ward-page .md-check-card__metrics--4 .md-check-metric:nth-child(n+3) {
  border-top: 1px solid #e8eaed;
}

.check-result-page .md-check-metric__value,
.zap-ward-page .md-check-metric__value {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--cr-navy, #0b2d5c);
}

.check-result-page .md-check-metric__label,
.zap-ward-page .md-check-metric__label {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.54);
}

.check-result-page .md-check-metric--ok,
.zap-ward-page .md-check-metric--ok {
  background: rgba(46, 125, 50, 0.06);
  border-color: #e8eaed;
}

.check-result-page .md-check-metric--ok .md-check-metric__value,
.zap-ward-page .md-check-metric--ok .md-check-metric__value {
  color: #2e7d32;
}

.check-result-page .md-check-metric--alert,
.zap-ward-page .md-check-metric--alert {
  background: rgba(211, 47, 47, 0.06);
  border-color: #e8eaed;
}

.check-result-page .md-check-metric--alert .md-check-metric__value,
.zap-ward-page .md-check-metric--alert .md-check-metric__value {
  color: #d32f2f;
}

.check-result-page .md-check-card__actions,
.zap-ward-page .md-check-card__actions {
  margin-top: 0;
  padding-top: 0;
}

.check-result-page .md-check-card__actions .md-btn-contained,
.zap-ward-page .md-check-card__actions .md-btn-contained {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid #c0c4c8;
  border-radius: 8px;
  background: var(--md-primary-container, #e3f2fd);
  color: var(--md-primary-dark, #1565c0);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase !important;
  box-shadow: none;
}

.check-result-page .md-check-card__actions .md-btn-contained i,
.zap-ward-page .md-check-card__actions .md-btn-contained i {
  font-size: 0.625rem;
  opacity: 0.9;
}

.check-result-page .md-check-card__actions .md-btn-contained:hover,
.check-result-page .md-check-card__actions .md-btn-contained:focus-visible,
.zap-ward-page .md-check-card__actions .md-btn-contained:hover,
.zap-ward-page .md-check-card__actions .md-btn-contained:focus-visible {
  background: #bbdefb;
  border-color: #c0c4c8;
  color: var(--md-primary-dark, #1565c0);
}

.check-result-page .md-check-empty,
.zap-ward-page .md-check-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 36px 20px;
  border-radius: 16px;
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  box-shadow: 0 1px 2px rgba(11, 45, 92, 0.06);
}

.check-result-page .md-check-empty__icon,
.zap-ward-page .md-check-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: 16px;
  background: var(--cr-soft);
  color: var(--cr-navy);
  font-size: 1.25rem;
}

.check-result-page .md-check-empty h2,
.zap-ward-page .md-check-empty h2 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--cr-text);
}

.check-result-page .md-check-empty p,
.zap-ward-page .md-check-empty p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--cr-muted);
}

/* Assessment summary preview (check-class-assessment) */
.md-assess-preview {
  --ap-ink: #0f1c2e;
  --ap-muted: #5a6a7a;
  --ap-line: rgba(15, 28, 46, 0.08);
  --ap-accent: #0d7377;
  --ap-accent-deep: #0a5c5f;
  --ap-soft: #e8f4f4;
  --ap-mist: #f3faf9;
  --ap-surface: #ffffff;
  --ap-mastered: #0f766e;
  --ap-mastered-bg: #e6f5f3;
  --ap-mastered-line: rgba(15, 118, 110, 0.28);
  --ap-steady: #b45309;
  --ap-steady-bg: #fef3e2;
  --ap-steady-line: rgba(180, 83, 9, 0.28);
  --ap-support: #b91c1c;
  --ap-support-bg: #fef2f2;
  --ap-support-line: rgba(185, 28, 28, 0.24);
  --ap-neutral: #334155;
  --ap-neutral-bg: #f1f5f9;
  --ap-neutral-line: rgba(51, 65, 85, 0.2);
  --ap-empty: #94a3b8;
  --ap-empty-bg: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 0;
  font-family: "Jost", sans-serif;
  color: var(--ap-ink);
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview),
#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview-picker),
#emptyModal.md-timeline-sheet:has(.md-assess-preview) {
  --ap-sheet-tint: #f3faf9;
}

#fullEmptyModal.md-timeline-sheet.menu-active:has(.md-assess-preview),
#fullEmptyModal.md-timeline-sheet.menu-active:has(.md-assess-preview-picker),
#emptyModal.md-timeline-sheet.menu-active:has(.md-assess-preview) {
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  touch-action: pan-y;
}

#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__panel,
#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview-picker) .md-timeline-sheet__panel,
#emptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__panel {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(13, 115, 119, 0.1) 0%, transparent 52%),
    linear-gradient(180deg, #f7fcfb 0%, #eef5f4 100%);
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__header,
#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview-picker) .md-timeline-sheet__header,
#emptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__header {
  background: transparent;
  border-bottom-color: rgba(13, 115, 119, 0.1);
}

#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__overline,
#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview-picker) .md-timeline-sheet__overline,
#emptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__overline {
  color: #0d7377;
}

#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__body,
#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview-picker) .md-timeline-sheet__body,
#emptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__body {
  background: transparent;
  padding: 12px 16px 20px;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__footer,
#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview-picker) .md-timeline-sheet__footer,
#emptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__footer {
  display: grid !important;
  grid-template-columns: 1fr 1.35fr;
  align-items: stretch;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(13, 115, 119, 0.12);
  box-shadow: 0 -10px 28px rgba(13, 115, 119, 0.08);
}

#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview-picker) .md-timeline-sheet__footer {
  grid-template-columns: 1fr;
}

#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__footer .md-timeline-sheet__btn,
#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview-picker) .md-timeline-sheet__footer .md-timeline-sheet__btn,
#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__footer .mui-btn,
#emptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__footer .mui-btn,
#emptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__footer .md-timeline-sheet__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
}

#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__footer .md-assess-back-to-picker,
#emptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__footer .md-assess-back-to-picker {
  background: #eef7f6 !important;
  border: 1px solid rgba(13, 115, 119, 0.18) !important;
  color: #0a5c5f !important;
}

#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__footer .md-assess-back-to-picker:hover,
#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__footer .md-assess-back-to-picker:focus-visible {
  background: #dff3f1 !important;
  border-color: rgba(13, 115, 119, 0.28) !important;
  color: #08484a !important;
}

#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__footer .md-timeline-sheet__btn--cancel,
#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__footer .mui-btn-outlined,
#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview-picker) .md-timeline-sheet__footer .close-menu,
#emptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__footer .md-timeline-sheet__btn--cancel,
#emptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__footer .mui-btn-outlined {
  background: #eef7f6 !important;
  border: 1px solid rgba(13, 115, 119, 0.18) !important;
  color: #0a5c5f !important;
}

#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__footer .md-timeline-sheet__btn--cancel:hover,
#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__footer .md-timeline-sheet__btn--cancel:focus-visible,
#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__footer .mui-btn-outlined:hover,
#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__footer .mui-btn-outlined:focus-visible,
#emptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__footer .mui-btn-outlined:hover,
#emptyModal.md-timeline-sheet:has(.md-assess-preview) .md-timeline-sheet__footer .mui-btn-outlined:focus-visible {
  background: #dff3f1 !important;
  border-color: rgba(13, 115, 119, 0.28) !important;
  color: #08484a !important;
}

#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview) .view_assess_report,
#emptyModal.md-timeline-sheet:has(.md-assess-preview) .view_assess_report {
  background: linear-gradient(160deg, #0d7377 0%, #14968f 100%) !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(13, 115, 119, 0.28) !important;
}

#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview) .view_assess_report:hover,
#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview) .view_assess_report:focus-visible,
#emptyModal.md-timeline-sheet:has(.md-assess-preview) .view_assess_report:hover,
#emptyModal.md-timeline-sheet:has(.md-assess-preview) .view_assess_report:focus-visible {
  background: linear-gradient(160deg, #0a5c5f 0%, #0d7377 100%) !important;
  color: #fff !important;
}

#fullEmptyModal.md-timeline-sheet:has(.md-assess-preview) .view_assess_report i,
#emptyModal.md-timeline-sheet:has(.md-assess-preview) .view_assess_report i {
  font-size: 0.875rem;
  opacity: 0.95;
}

.md-assess-preview__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px 16px;
  border-radius: 22px;
  background:
    linear-gradient(155deg, rgba(13, 115, 119, 0.14) 0%, transparent 46%),
    linear-gradient(180deg, #ffffff 0%, #f4fbfb 100%);
  border: 1px solid rgba(13, 115, 119, 0.16);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 14px 32px rgba(13, 115, 119, 0.08);
}

.md-assess-preview__head-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Backward compatible with class-activity preview markup */
.md-assess-preview__head-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.md-assess-preview__context {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ap-muted);
  line-height: 1.4;
}

.md-assess-preview__comment-by {
  display: block;
  margin-bottom: 6px;
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ap-accent);
}

.md-assess-preview__comment p {
  margin: 0;
  font-size: 0.975rem;
  line-height: 1.55;
  color: var(--ap-ink);
  white-space: pre-wrap;
}

.md-assess-preview__avatar {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  object-fit: cover;
  flex-shrink: 0;
  background: #fff;
  border: 3px solid rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 0 1px rgba(13, 115, 119, 0.12),
    0 10px 22px rgba(13, 115, 119, 0.18);
}

.md-assess-preview__identity {
  min-width: 0;
  flex: 1;
}

.md-assess-preview__eyebrow {
  margin: 0 0 3px;
  font-size: 0.625rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ap-accent);
}

.md-assess-preview__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ap-ink);
}

.md-assess-preview__assess {
  margin: 4px 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a5f62;
  line-height: 1.35;
}

.md-assess-preview__complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex-shrink: 0;
  min-width: 58px;
  min-height: 58px;
  padding: 8px 10px;
  border-radius: 16px;
  background: linear-gradient(160deg, #0d7377 0%, #14b8a6 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(13, 115, 119, 0.28);
  text-align: center;
}

.md-assess-preview__complete strong {
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.md-assess-preview__complete span {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.88;
}

.md-assess-preview__vitals {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(13, 115, 119, 0.1);
}

.md-assess-preview__progress {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.md-assess-preview__progress-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.md-assess-preview__progress-label {
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ap-muted);
}

.md-assess-preview__progress-value {
  font-size: 0.9375rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--ap-ink);
}

.md-assess-preview__progress-track {
  height: 7px;
  border-radius: 999px;
  background: rgba(13, 115, 119, 0.12);
  overflow: hidden;
}

.md-assess-preview__progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0d7377 0%, #2dd4bf 100%);
  min-width: 0;
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.35);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.md-assess-preview__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(13, 115, 119, 0.1);
  box-sizing: border-box;
}

.md-assess-preview__meta-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f7fcfb 0%, #ffffff 100%);
  border: 1px solid rgba(13, 115, 119, 0.08);
}

.md-assess-preview__meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 9px;
  background: var(--ap-soft);
  color: var(--ap-accent);
  font-size: 0.75rem;
}

.md-assess-preview__meta-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.md-assess-preview__meta-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a8b97;
  line-height: 1.2;
}

.md-assess-preview__meta-value {
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ap-ink);
  word-break: break-word;
}

.md-assess-preview__chip {
  display: none;
}

@media (max-width: 360px) {
  .md-assess-preview__meta {
    grid-template-columns: 1fr;
  }
}

.md-assess-preview__snapshot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.md-assess-preview__snap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 10px 6px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f4fbfb 100%);
  border: 1px solid rgba(13, 115, 119, 0.1);
  text-align: center;
  box-shadow: 0 4px 12px rgba(15, 28, 46, 0.03);
}

.md-assess-preview__snap strong {
  font-size: 1.125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ap-ink);
  line-height: 1.1;
}

.md-assess-preview__snap span {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ap-muted);
}

.md-assess-preview__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.md-assess-preview__section-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ap-muted);
}

.md-assess-preview__section-title span {
  flex-shrink: 0;
}

.md-assess-preview__section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(13, 115, 119, 0.22), transparent 90%);
}

/* Legend — clean progress bars by tone */
.md-assess-preview__legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.md-assess-preview__legend-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 16px;
  background: var(--ap-surface);
  border: 1px solid var(--ap-line);
  box-shadow: 0 4px 14px rgba(15, 28, 46, 0.03);
}

.md-assess-preview__legend-swatch {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ap-neutral);
  box-shadow: 0 0 0 4px var(--ap-neutral-bg);
}

.md-assess-preview__legend-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.md-assess-preview__legend-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.md-assess-preview__legend-name {
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--ap-ink);
  line-height: 1.3;
}

.md-assess-preview__legend-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
}

.md-assess-preview__legend-meta strong {
  font-size: 0.9375rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--ap-ink);
}

.md-assess-preview__legend-meta em {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ap-muted);
  font-variant-numeric: tabular-nums;
}

.md-assess-preview__legend-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 28, 46, 0.06);
  overflow: hidden;
}

.md-assess-preview__legend-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ap-neutral);
  max-width: 100%;
}

.md-assess-preview__legend-item.md-assess-preview__tone--mastered {
  background: linear-gradient(90deg, var(--ap-mastered-bg) 0%, #fff 55%);
  border-color: var(--ap-mastered-line);
}

.md-assess-preview__legend-item.md-assess-preview__tone--mastered .md-assess-preview__legend-swatch,
.md-assess-preview__legend-item.md-assess-preview__tone--mastered .md-assess-preview__legend-bar i {
  background: var(--ap-mastered);
}

.md-assess-preview__legend-item.md-assess-preview__tone--mastered .md-assess-preview__legend-swatch {
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.14);
}

.md-assess-preview__legend-item.md-assess-preview__tone--steady {
  background: linear-gradient(90deg, var(--ap-steady-bg) 0%, #fff 55%);
  border-color: var(--ap-steady-line);
}

.md-assess-preview__legend-item.md-assess-preview__tone--steady .md-assess-preview__legend-swatch,
.md-assess-preview__legend-item.md-assess-preview__tone--steady .md-assess-preview__legend-bar i {
  background: var(--ap-steady);
}

.md-assess-preview__legend-item.md-assess-preview__tone--steady .md-assess-preview__legend-swatch {
  box-shadow: 0 0 0 4px rgba(180, 83, 9, 0.14);
}

.md-assess-preview__legend-item.md-assess-preview__tone--support {
  background: linear-gradient(90deg, var(--ap-support-bg) 0%, #fff 55%);
  border-color: var(--ap-support-line);
}

.md-assess-preview__legend-item.md-assess-preview__tone--support .md-assess-preview__legend-swatch,
.md-assess-preview__legend-item.md-assess-preview__tone--support .md-assess-preview__legend-bar i {
  background: var(--ap-support);
}

.md-assess-preview__legend-item.md-assess-preview__tone--support .md-assess-preview__legend-swatch {
  box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.12);
}

/* Areas + aspect rows */
.md-assess-preview__areas {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.md-assess-preview__area {
  padding: 0;
  border-radius: 18px;
  background: var(--ap-surface);
  border: 1px solid var(--ap-line);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(15, 28, 46, 0.04);
}

.md-assess-preview__area-head {
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, #f4fbfb 0%, #fff 100%);
  border-bottom: 1px solid var(--ap-line);
}

.md-assess-preview__area-label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ap-ink);
  line-height: 1.3;
}

.md-assess-preview__area-note {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ap-muted);
}

.md-assess-preview__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}

.md-assess-preview__row {
  position: relative;
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 10px 12px 10px 10px;
  border-radius: 12px;
  background: var(--ap-empty-bg);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.md-assess-preview__row-rail {
  align-self: stretch;
  width: 4px;
  border-radius: 999px;
  background: var(--ap-empty);
}

.md-assess-preview__row-aspect {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ap-ink);
  line-height: 1.35;
}

.md-assess-preview__row-mark {
  justify-self: end;
  max-width: 100%;
  padding: 5px 11px;
  border-radius: 999px;
  background: #e2e8f0;
  color: var(--ap-neutral);
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
}

.md-assess-preview__row-mark--empty {
  background: #eef2f6;
  color: var(--ap-empty);
  font-weight: 600;
  text-transform: none;
}

.md-assess-preview__row.md-assess-preview__tone--mastered {
  background: var(--ap-mastered-bg);
  border-color: var(--ap-mastered-line);
}

.md-assess-preview__row.md-assess-preview__tone--mastered .md-assess-preview__row-rail {
  background: var(--ap-mastered);
}

.md-assess-preview__row.md-assess-preview__tone--mastered .md-assess-preview__row-mark {
  background: var(--ap-mastered);
  color: #fff;
}

.md-assess-preview__row.md-assess-preview__tone--steady {
  background: var(--ap-steady-bg);
  border-color: var(--ap-steady-line);
}

.md-assess-preview__row.md-assess-preview__tone--steady .md-assess-preview__row-rail {
  background: var(--ap-steady);
}

.md-assess-preview__row.md-assess-preview__tone--steady .md-assess-preview__row-mark {
  background: var(--ap-steady);
  color: #fff;
}

.md-assess-preview__row.md-assess-preview__tone--support {
  background: var(--ap-support-bg);
  border-color: var(--ap-support-line);
}

.md-assess-preview__row.md-assess-preview__tone--support .md-assess-preview__row-rail {
  background: var(--ap-support);
}

.md-assess-preview__row.md-assess-preview__tone--support .md-assess-preview__row-mark {
  background: var(--ap-support);
  color: #fff;
}

.md-assess-preview__row.md-assess-preview__tone--neutral {
  background: var(--ap-neutral-bg);
  border-color: var(--ap-neutral-line);
}

.md-assess-preview__row.md-assess-preview__tone--neutral .md-assess-preview__row-rail {
  background: var(--ap-neutral);
}

.md-assess-preview__row.md-assess-preview__tone--neutral .md-assess-preview__row-mark {
  background: var(--ap-neutral);
  color: #fff;
}

/* Comments */
.md-assess-preview__comments {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.md-assess-preview__comment {
  margin: 0;
  padding: 16px 16px 16px 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--ap-line);
  border-left: 4px solid var(--ap-accent);
  box-shadow: 0 8px 20px rgba(15, 28, 46, 0.04);
}

.md-assess-preview__comment--form {
  border-left-color: #0369a1;
  background: linear-gradient(90deg, #f0f9ff 0%, #fff 40%);
}

.md-assess-preview__comment--head {
  border-left-color: #0f766e;
  background: linear-gradient(90deg, #ecfdf8 0%, #fff 40%);
}

.md-assess-preview__comment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-bottom: 8px;
}

.md-assess-preview__comment-role {
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ap-accent);
}

.md-assess-preview__comment--form .md-assess-preview__comment-role {
  color: #0369a1;
}

.md-assess-preview__comment--head .md-assess-preview__comment-role {
  color: #0f766e;
}

.md-assess-preview__comment-who {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ap-muted);
}

.md-assess-preview__comment-text {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: 0.975rem;
  font-weight: 500;
  font-style: normal;
  line-height: 1.55;
  color: var(--ap-ink);
  white-space: pre-wrap;
}

#emptyModal .view_assess_report,
#fullEmptyModal .view_assess_report {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

@media (max-width: 420px) {
  .md-assess-preview__head-top {
    flex-wrap: wrap;
  }

  .md-assess-preview__complete {
    margin-left: auto;
  }

  .md-assess-preview__name {
    font-size: 1.125rem;
  }

  .md-assess-preview__row {
    grid-template-columns: 4px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .md-assess-preview__row-rail {
    grid-row: 1 / span 2;
  }

  .md-assess-preview__row-mark {
    justify-self: start;
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-assess-preview__progress-fill,
  .md-assess-preview-pick {
    transition: none;
  }
}

/* ── Class activity (staff) — parent-wards shell + expandable check cards ── */
html.class-activity-app .header.header-fixed,
body.class-activity-app .header.header-fixed {
  display: none !important;
}

.class-activity-page .md-check-toolbar__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.class-activity-page .md-check-toolbar__actions .md-btn-contained {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.class-activity-page .md-check-toolbar__actions .md-btn-contained--tonal {
  background: var(--cr-soft);
  color: var(--cr-navy);
  box-shadow: none;
}

.class-activity-page .md-check-toolbar__actions .md-btn-contained:not(.md-btn-contained--tonal) {
  background: var(--cr-navy-mid);
  color: #fff;
}

.class-activity-page .md-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-sizing: border-box;
}

.class-activity-page .md-search-field:focus-within {
  border-color: var(--cr-navy-mid);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.16);
}

.class-activity-page .md-search-field__icon {
  color: var(--cr-muted);
}

.class-activity-page .md-search-field__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
}

.class-activity-page .md-list .dataTables_wrapper,
.class-activity-page .md-list table.dataTable {
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
}

.class-activity-page .md-list table.dataTable thead,
.class-activity-page .md-list .dataTables_filter,
.class-activity-page .md-list .dataTables_length,
.class-activity-page .md-list .dataTables_info,
.class-activity-page .md-list .dataTables_processing {
  display: none !important;
}

.class-activity-page .md-list table.dataTable tbody td {
  padding: 0 0 12px !important;
  border: 0 !important;
  background: transparent !important;
  vertical-align: top;
}

.class-activity-page .md-ca-card__avatar {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--cr-soft) !important;
  color: var(--cr-navy) !important;
  font-size: 1.125rem;
  object-fit: unset;
}

.class-activity-page .md-ca-card__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.class-activity-page .md-ca-card__heading-main {
  min-width: 0;
  flex: 1;
}

.class-activity-page .md-ca-card__heading-aside {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.class-activity-page .md-ca-card__meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--cr-muted);
}

.class-activity-page .md-ca-card__dot {
  opacity: 0.55;
}

.class-activity-page .md-ca-card__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--cr-muted);
  text-decoration: none;
}

.class-activity-page .md-ca-card__menu-btn:hover,
.class-activity-page .md-ca-card__menu-btn:focus-visible {
  background: rgba(25, 118, 210, 0.08);
  color: var(--cr-navy);
  outline: none;
}

.class-activity-page .md-ca-card__dropdown {
  min-width: 160px;
  padding: 6px;
  border-radius: 12px !important;
  background: #fff !important;
}

.class-activity-page .md-ca-card__menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--cr-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
}

.class-activity-page .md-ca-card__menu-item:hover {
  background: #f5f7fa;
}

.class-activity-page .md-ca-card__menu-item--danger {
  color: #c62828;
}

.class-activity-page .md-ca-card .md-check-card__metrics {
  margin-bottom: 8px;
}

.class-activity-page .md-ca-card__expand {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #bbdefb;
  border-radius: 10px;
  background: #f5f9ff;
  color: var(--cr-navy);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.class-activity-page .md-ca-card__expand-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #e3f2fd;
}

.class-activity-page .md-ca-card__expand-copy {
  flex: 1;
  min-width: 0;
}

.class-activity-page .md-ca-card__expand-chevron {
  transition: transform 0.2s ease;
}

.class-activity-page .md-ca-card__expand:not(.collapsed) .md-ca-card__expand-chevron {
  transform: rotate(180deg);
}

.class-activity-page .md-ca-card__details {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e8eaed;
}

.class-activity-page .md-ca-card__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.class-activity-page .md-ca-card__actions .mui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}

.class-activity-page .md-ca-card__actions .mui-btn-contained {
  background: var(--cr-navy-mid);
  color: #fff;
  border: none;
}

.class-activity-page .md-ca-card__actions .mui-btn-outlined {
  background: #fff;
  color: var(--cr-navy);
  border: 1px solid rgba(25, 118, 210, 0.35);
}

.class-activity-page .md-topic-activity__files,
.class-activity-page .md-topic-activity__text {
  margin-top: 8px;
}

.class-activity-page .md-topic-activity__text-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cr-muted);
}

.class-activity-page .md-topic-activity__text-body {
  font-size: 0.875rem;
  color: var(--cr-text);
  line-height: 1.45;
}

.class-activity-page .md-topic-activity__file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.class-activity-page .md-topic-activity__file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e8eaed;
  background: #fff;
  text-decoration: none;
  color: inherit;
}

.class-activity-page .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#emptyAction.md-timeline-filter-sheet.menu {
  z-index: 1300 !important;
}



#emptyAction.check-result-sheet .md-timeline-filter-sheet__footer,
#scratchCardAction.check-result-sheet .md-timeline-filter-sheet__footer,
#emptyAction.zap-ward-sheet .md-timeline-filter-sheet__footer {
  grid-template-columns: 1fr;
  padding: 8px 16px calc(12px + var(--md-sheet-footer-safe, 0px));
}

/* WebView footer pad: see html.is-webview --md-sheet-footer-safe + global sheet footer rule near :root */

#emptyAction.check-result-sheet .md-check-sheet-field,
#emptyAction.zap-ward-sheet .md-check-sheet-field {
  position: relative;
  margin-bottom: 12px;
}

#emptyAction.check-result-sheet .md-check-sheet-field:last-of-type,
#emptyAction.zap-ward-sheet .md-check-sheet-field:last-of-type {
  margin-bottom: 0;
}

#emptyAction.check-result-sheet .md-timeline-filter-select--native-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#emptyAction.check-result-sheet .md-check-term-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

#emptyAction.check-result-sheet .md-check-term-list__empty {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed #dadce0;
  border-radius: 10px;
  background: #f8f9fa;
  color: #80868b;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
}

#emptyAction.check-result-sheet .md-check-term-option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #dadce0;
  border-radius: 10px;
  background: #fff;
  color: #202124;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

#emptyAction.check-result-sheet .md-check-term-option:active {
  background: #f8f9fa;
}

#emptyAction.check-result-sheet .md-check-term-option.is-selected {
  border-color: #1a73e8;
  box-shadow: 0 0 0 1px rgba(26, 115, 232, 0.2);
  background: #f8fbff;
}

#emptyAction.check-result-sheet .md-check-term-option__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#emptyAction.check-result-sheet .md-check-term-option__radio {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 2px solid #9aa0a6;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
  position: relative;
}

#emptyAction.check-result-sheet .md-check-term-option.is-selected .md-check-term-option__radio {
  border-color: #1a73e8;
}

#emptyAction.check-result-sheet .md-check-term-option.is-selected .md-check-term-option__radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1a73e8;
  transform: translate(-50%, -50%);
}

#emptyAction.check-result-sheet .md-check-term-option__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

#emptyAction.check-result-sheet .md-check-term-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

#emptyAction.check-result-sheet .md-check-term-status--checked {
  background: #e6f4ea;
  color: #137333;
  border: 1px solid #ceead6;
}

#emptyAction.check-result-sheet .md-check-term-status--open {
  background: #f1f3f4;
  color: #5f6368;
  border: 1px solid #e0e3e7;
}

#emptyAction.check-result-sheet .md-check-term-option.is-checked .md-check-term-option__name {
  color: #0d652d;
}

#emptyAction.check-result-sheet .load_class,
#emptyAction.check-result-sheet .load_term,
#emptyAction.check-result-sheet .load_cat,
#emptyAction.check-result-sheet .load_assess,
#emptyAction.zap-ward-sheet .load_class,
#emptyAction.zap-ward-sheet .load_term,
#emptyAction.zap-ward-sheet .load_cat,
#emptyAction.zap-ward-sheet .load_assess {
  display: flex;
  justify-content: center;
  padding: 8px 0 0;
}

#emptyAction.check-result-sheet .load_class.d-none,
#emptyAction.check-result-sheet .load_term.d-none,
#emptyAction.check-result-sheet .load_cat.d-none,
#emptyAction.check-result-sheet .load_assess.d-none,
#emptyAction.zap-ward-sheet .load_class.d-none,
#emptyAction.zap-ward-sheet .load_term.d-none,
#emptyAction.zap-ward-sheet .load_cat.d-none,
#emptyAction.zap-ward-sheet .load_assess.d-none {
  display: none !important;
}

#emptyAction.check-result-sheet .md-loading,
#scratchCardAction.check-result-sheet .md-loading,
#emptyAction.zap-ward-sheet .md-loading {
  padding: 4px 0 0;
}

#scratchCardAction.check-result-sheet .md-check-pin-label {
  display: block;
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.6);
}

#scratchCardAction.check-result-sheet .md-check-pin {
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
  background: #fff;
  color: rgba(0, 0, 0, 0.87);
  font-family: "Jost", sans-serif;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#scratchCardAction.check-result-sheet .md-check-pin:focus {
  outline: none;
  border-color: #1a73e8;
  border-width: 2px;
  padding: 11px 13px;
}

#scratchCardAction.check-result-sheet .md-check-pin-hint {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
}

/* ── Scratch card unlock sheet ── */
#scratchCardAction.md-scratch-sheet {
  --scratch-ink: #1a1c1e;
  --scratch-muted: #5f6368;
  --scratch-line: rgba(25, 118, 210, 0.12);
  --scratch-fill: #f3f8fd;
  --scratch-primary: var(--md-primary, #1976d2);
  --scratch-primary-dark: var(--md-primary-dark, #1565c0);
  --scratch-ok: var(--md-success, #188038);
  --scratch-pad-x: 20px;
}

#scratchCardAction.md-scratch-sheet .md-scratch-sheet__panel {
  padding: 0 !important;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(25, 118, 210, 0.14), transparent 55%),
    linear-gradient(180deg, #eaf3fc 0%, #f7fafd 38%, #ffffff 72%);
}

#scratchCardAction.md-scratch-sheet .md-timeline-filter-sheet__handle {
  margin: 10px auto 0;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: #dadce0;
}

#scratchCardAction.md-scratch-sheet .md-scratch-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 14px var(--scratch-pad-x) 0;
  min-height: 0;
  border: 0;
  background: transparent;
}

#scratchCardAction.md-scratch-sheet .md-scratch-sheet__heading {
  flex: 1;
  min-width: 0;
  padding: 4px 0 0;
}

#scratchCardAction.md-scratch-sheet .md-scratch-sheet__header .md-timeline-filter-sheet__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--scratch-ink);
  text-transform: none;
}

#scratchCardAction.md-scratch-sheet .md-scratch-sheet__subtitle {
  margin: 6px 0 0;
  max-width: 32ch;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--scratch-muted);
}

#scratchCardAction.md-scratch-sheet .md-scratch-sheet__icon-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin: 0 -6px 0 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--scratch-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#scratchCardAction.md-scratch-sheet .md-scratch-sheet__icon-btn:hover,
#scratchCardAction.md-scratch-sheet .md-scratch-sheet__icon-btn:focus-visible {
  background: rgba(0, 0, 0, 0.05);
  color: var(--scratch-ink);
  outline: none;
}

#scratchCardAction.md-scratch-sheet .md-scratch-sheet__body.content,
#scratchCardAction.md-scratch-sheet .md-scratch-sheet__body {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 18px var(--scratch-pad-x) 12px !important;
  box-sizing: border-box;
  background: transparent;
}

#scratchCardAction.md-scratch-sheet .md-scratch-field {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(25, 118, 210, 0.1);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, rgba(243, 248, 253, 0.92) 100%);
  box-shadow: 0 10px 28px rgba(25, 118, 210, 0.08);
}

#scratchCardAction.md-scratch-sheet .md-scratch-field__label {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--scratch-ink);
}

#scratchCardAction.md-scratch-sheet .md-scratch-field__control {
  position: relative;
}

#scratchCardAction.md-scratch-sheet .md-scratch-pin,
#scratchCardAction.md-scratch-sheet .md-check-pin {
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  margin: 0;
  padding: 18px 16px;
  border: 1px solid rgba(25, 118, 210, 0.14);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9fd 100%);
  color: var(--scratch-ink);
  font-family: var(--md-font, "Jost", "Roboto", sans-serif);
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: 0.28em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  caret-color: var(--scratch-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

#scratchCardAction.md-scratch-sheet .md-scratch-pin::placeholder {
  letter-spacing: 0.28em;
  color: #bdc1c6;
  font-weight: 500;
  opacity: 1;
}

#scratchCardAction.md-scratch-sheet .md-scratch-field__control:focus-within .md-scratch-pin,
#scratchCardAction.md-scratch-sheet .md-scratch-pin:focus {
  outline: none;
  border-color: var(--scratch-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.16);
  padding: 18px 16px;
  border-width: 1px;
}

#scratchCardAction.md-scratch-sheet .md-scratch-pin.is-complete {
  border-color: var(--scratch-ok);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(24, 128, 56, 0.14);
}

#scratchCardAction.md-scratch-sheet .md-scratch-field__helper,
#scratchCardAction.md-scratch-sheet .md-scratch-pin-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 8px 2px 0;
  min-height: 18px;
}

#scratchCardAction.md-scratch-sheet .md-scratch-pin-count {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #80868b;
  font-variant-numeric: tabular-nums;
}

#scratchCardAction.md-scratch-sheet .md-scratch-pin-count.is-complete {
  color: var(--scratch-ok);
}

#scratchCardAction.md-scratch-sheet .md-scratch-sheet__footer,
#scratchCardAction.check-result-sheet.md-scratch-sheet .md-timeline-filter-sheet__footer {
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: 10px;
  grid-template-columns: none;
  margin: 4px 16px calc(22px + var(--md-sheet-footer-safe, 0px));
  padding: 10px;
  border: 1px solid rgba(25, 118, 210, 0.08);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 249, 253, 0.94));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#scratchCardAction.md-scratch-sheet .md-scratch-sheet__cancel {
  appearance: none;
  flex: 0 0 auto;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.9);
  color: var(--scratch-ink);
  min-width: 96px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#scratchCardAction.md-scratch-sheet .md-scratch-sheet__cancel:hover,
#scratchCardAction.md-scratch-sheet .md-scratch-sheet__cancel:focus-visible {
  background: #fff;
  border-color: rgba(25, 118, 210, 0.22);
  outline: none;
}

#scratchCardAction.md-scratch-sheet .md-scratch-sheet__submit,
#scratchCardAction.md-scratch-sheet .md-timeline-filter-sheet__submit.md-scratch-sheet__submit {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, #1e88e5 0%, var(--scratch-primary) 55%, var(--scratch-primary-dark) 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(25, 118, 210, 0.28);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

#scratchCardAction.md-scratch-sheet .md-scratch-sheet__submit:hover,
#scratchCardAction.md-scratch-sheet .md-scratch-sheet__submit:focus-visible {
  filter: brightness(1.03);
  box-shadow: 0 8px 18px rgba(25, 118, 210, 0.34);
  outline: none;
}

#scratchCardAction.md-scratch-sheet .md-scratch-sheet__submit:active {
  transform: scale(0.985);
}


@media (max-width: 480px) {
  .check-result-page .check-result-feed.page-content,
  .check-result-page .page-content,
  .zap-ward-page .check-result-feed.page-content,
  .zap-ward-page .page-content,
  .zap-ward-page .zap-ward-feed.page-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .check-result-page .md-check-hero__title,
  .zap-ward-page .md-check-hero__title {
    font-size: 1.25rem;
  }

  .check-result-page .md-check-card__body,
  .zap-ward-page .md-check-card__body {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .check-result-page .md-check-card__profile,
  .zap-ward-page .md-check-card__profile {
    width: 64px;
    max-width: 64px;
  }

  .check-result-page .md-check-card__avatar,
  .zap-ward-page .md-check-card__avatar {
    width: 64px;
    height: 108px;
    border-radius: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .check-result-page .md-animate-in,
  .check-result-page .md-check-hero__stamp,
  .zap-ward-page .md-animate-in,
  .zap-ward-page .md-check-hero__stamp {
    animation: none;
    transform: none;
  }
}

/* In-app A4 result viewer (check-result.php)
   Full-screen cover — do NOT use menu-box-modal (bootstrap centers with
   translate(-50%,-50%) and leaves the sheet at negative top/left). */
#checkResultViewSheet.md-check-result-view-sheet {
  --check-result-sheet-height: 100vh;
  --check-result-sheet-height: 100dvh;
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--check-result-sheet-height) !important;
  min-height: var(--check-result-sheet-height) !important;
  max-height: var(--check-result-sheet-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  z-index: 1400 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 0;
  pointer-events: none;
  flex-direction: column;
}

#checkResultViewSheet.md-check-result-view-sheet.menu-active,
#checkResultViewSheet.md-check-result-view-sheet.menu-active[hidden] {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: all !important;
  transform: none !important;
  -webkit-transform: none !important;
}

#checkResultViewSheet .md-check-result-view__panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
}

#checkResultViewSheet .md-check-result-view__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 10px 16px;
  background: #fff;
  border-bottom: 1px solid #e0e3e7;
}

#checkResultViewSheet .md-check-result-view__header .md-timeline-sheet__heading {
  flex: 1 1 auto;
  min-width: 0;
}

#checkResultViewSheet .md-check-result-view__header .md-timeline-sheet__overline {
  display: block;
  margin: 0 0 2px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5f6368;
}

#checkResultViewSheet .md-check-result-view__header .md-timeline-sheet__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #202124;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#checkResultViewSheet .md-check-result-view__zoom {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  padding: 2px;
  border: 1px solid #dadce0;
  border-radius: 999px;
  background: #f1f3f4;
}

#checkResultViewSheet .md-check-result-view__zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #202124;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

#checkResultViewSheet .md-check-result-view__zoom-btn:active {
  background: #e8eaed;
}

#checkResultViewSheet .md-check-result-view__zoom-label {
  min-width: 2.75rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #5f6368;
  font-variant-numeric: tabular-nums;
}

#checkResultViewSheet .md-check-result-view__zoom-reset {
  padding: 0 10px;
  color: #1a73e8;
}

#checkResultViewSheet .md-check-result-view__close.md-timeline-sheet__close {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: #f1f3f4 !important;
  color: #5f6368 !important;
  font-size: 1rem !important;
  cursor: pointer;
  box-shadow: none !important;
}

#checkResultViewSheet .md-check-result-view__close.md-timeline-sheet__close:hover,
#checkResultViewSheet .md-check-result-view__close.md-timeline-sheet__close:focus-visible {
  background: #e8eaed !important;
  color: #202124 !important;
  outline: none;
}

#checkResultViewSheet .md-check-result-view__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  background: #cfd4da;
}

#checkResultViewSheet .md-check-result-view__loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(207, 212, 218, 0.94);
  color: #5f6368;
  font-size: 0.875rem;
  font-weight: 500;
}

#checkResultViewSheet .md-check-result-view__loader[hidden] {
  display: none !important;
}

/* Desk surface behind the A4 sheet */
#checkResultViewSheet .md-check-result-view__viewport {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 12px 22px;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(255, 255, 255, 0.45) 0%, transparent 55%),
    linear-gradient(165deg, #d5d9df 0%, #c8ced6 48%, #bdc3cc 100%);
  touch-action: pan-x pan-y pinch-zoom;
}

/* A4 paper sheet */
#checkResultViewSheet .md-check-result-view__scroll {
  position: relative;
  margin: 0;
  background: #fff;
  border: 1px solid #b0b6be;
  border-radius: 1px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35) inset,
    0 1px 2px rgba(60, 64, 67, 0.12),
    0 4px 10px rgba(60, 64, 67, 0.14),
    0 12px 28px rgba(60, 64, 67, 0.16);
  overflow: hidden;
}

#checkResultViewSheet .md-check-result-view__scroll::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(60, 64, 67, 0.04));
  z-index: 1;
}

#checkResultViewSheet .md-check-result-view__scaler {
  position: relative;
  transform-origin: top left;
  will-change: transform;
  background: #fff;
}

#checkResultViewSheet .md-check-result-view__frame {
  display: block;
  width: 750px;
  max-width: none;
  border: 0;
  background: #fff;
  vertical-align: top;
  /* Parent handles pan/pinch — iframe is display-only */
  pointer-events: none;
}

#checkResultViewSheet .md-check-result-view__footer {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px) + var(--md-sheet-footer-safe, 0px));
  background: #fff;
  border-top: 1px solid #e0e3e7;
}

#checkResultViewSheet .md-check-result-view__footer .md-btn-contained {
  width: 100%;
  min-height: 44px;
}

/* >>> recovered: class-list (562 lines) <<< */
/* ── zap-app: class-list-page ── */

html.class-list-app .header.header-fixed,
body.class-list-app .header.header-fixed,
.is-webview.class-list-app .header.header-fixed,
.is-webview body.class-list-app .header.header-fixed,
html.class-list-app .page-title-clear,
body.class-list-app .page-title-clear {
  display: none !important;
}

html.class-list-app body,
body.class-list-app {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html.class-list-app #page,
body.class-list-app #page,
body.class-list-app .md-page.class-list-page,
body.class-list-app .md-page.class-list-page .class-list-feed.page-content,
body.class-list-app .md-page.class-list-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.class-list-page {
  --cl-primary: #1565c0;
  --cl-primary-dark: #0d47a1;
  --cl-primary-light: #42a5f5;
  --cl-soft: #e3f2fd;
  --cl-ink: #0d47a1;
  --cl-bg: #f5f7fb;
  --cl-surface: #ffffff;
  --cl-cover: linear-gradient(135deg, #0d47a1 0%, #1565c0 48%, #42a5f5 100%);
  --md-header-offset: 0px;
  --md-class-toolbar-offset: 112px;
  --mui-primary: var(--cl-primary);
  --mui-primary-dark: var(--cl-primary-dark);
  --mui-primary-light: var(--cl-primary-light);
  --mui-primary-container: var(--cl-soft);
  --mui-font: "Jost", sans-serif;
  --md-font: "Jost", sans-serif;
  font-family: "Jost", sans-serif !important;
  background: var(--cl-bg);
  min-height: 100vh;
}

.class-list-page a,
.class-list-page button,
.class-list-page .md-btn-contained,
.class-list-page .md-ripple {
  -webkit-tap-highlight-color: transparent;
}

.class-list-page .page-title-clear { display: none !important; }

.class-list-page .class-list-feed.page-content,
.class-list-page .page-content,
.class-list-page .class-list-feed.md-feed {
  max-width: 680px;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--md-class-toolbar-offset, 112px) + 0px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 24px) !important;
  background: var(--cl-bg) !important;
  overflow: visible !important;
}

.class-list-page .md-cl-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--mui-elevation-1) !important;
  background: var(--cl-surface) !important;
  transform: none !important;
  overflow: visible !important;
}

.class-list-page .md-cl-toolbar .content,
.class-list-page .md-cl-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 10px 12px 12px !important;
  box-sizing: border-box;
}

.class-list-page .md-cl-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.class-list-page .md-cl-toolbar__back,
.class-list-page .md-cl-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #202124;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.class-list-page .md-cl-toolbar__reload { margin-left: auto; }

.class-list-page .md-cl-toolbar__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #202124;
  text-transform: none;
}

.class-list-page .md-cl-toolbar__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 6px 12px 6px 8px;
  border-radius: 16px;
  background: var(--cl-soft) !important;
  color: var(--cl-ink) !important;
  box-shadow: none !important;
  text-transform: none;
  pointer-events: none;
}

.class-list-page .md-cl-toolbar__chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: var(--cl-primary);
  font-size: 0.75rem;
}

.class-list-page .md-cl-toolbar__chip-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.class-list-page .md-cl-toolbar__chip-overline {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(124, 45, 18, 0.7);
}

.class-list-page .md-cl-toolbar__chip-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cl-ink);
}

.class-list-page .md-cl-toolbar__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
}

.class-list-page .md-cl-toolbar__actions .md-btn-contained,
.class-list-page .md-cl-toolbar__actions .mui-btn {
  width: 100%;
  min-height: 42px;
  text-transform: none;
  box-shadow: none;
}

.class-list-page .md-cl-toolbar__actions .mui-btn-contained {
  background: var(--cl-primary);
  color: #fff;
}

.class-list-page .md-cl-hero {
  overflow: hidden;
  margin: 12px 0 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--md-shape-lg);
}

.class-list-page .md-cl-hero__band {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 16px;
  background: var(--cl-cover);
  color: #fff;
}

.class-list-page .md-cl-hero__overline {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.class-list-page .md-cl-hero__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
}

.class-list-page .md-cl-hero__stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 8px 12px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  transform: rotate(-3deg);
  text-align: center;
}

.class-list-page .md-cl-hero__stamp-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.class-list-page .md-cl-hero__stamp-label {
  margin-top: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.class-list-page .md-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.class-list-page .md-search-field:focus-within {
  border-color: var(--cl-primary);
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.16);
}

.class-list-page .md-search-field__icon { color: var(--md-text-secondary); }

.class-list-page .md-search-field__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
}

.class-list-page .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.class-list-page .md-cl-list .dataTables_wrapper { width: 100%; }

.class-list-page .md-cl-loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 8px;
}

.class-list-page .md-cl-loading[hidden] {
  display: none !important;
}

.class-list-page .md-cl-list table#student.is-booting,
.class-list-page .md-cl-list #student_wrapper.is-booting,
.class-list-page .md-cl-list:has(table#student.is-booting) #student_wrapper {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.class-list-page .md-cl-list .dataTables_wrapper .dataTables_length,
.class-list-page .md-cl-list .dataTables_wrapper .dataTables_filter,
.class-list-page .md-cl-list .dataTables_wrapper .dataTables_info,
.class-list-page .md-cl-list .dataTables_wrapper .dataTables_paginate,
.class-list-page .md-cl-list .dataTables_processing {
  display: none !important;
}

.class-list-page .md-cl-list table#student {
  display: block !important;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.class-list-page .md-cl-list table#student thead { display: none; }

.class-list-page .md-cl-list table#student tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.class-list-page .md-cl-list table#student tbody tr,
.class-list-page .md-cl-list table#student tbody td {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.class-list-page .md-cl-card {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--md-shape-lg);
  background: var(--cl-surface);
}

.class-list-page .md-cl-card__body {
  display: block;
}

.class-list-page .md-cl-card__content {
  min-width: 0;
  padding: 12px 12px 10px;
}

.class-list-page .md-cl-card__head { margin-bottom: 10px; }

.class-list-page .md-cl-card__title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}

.class-list-page .md-cl-card__badge.md-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: auto;
  min-height: 28px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--cl-soft);
  color: var(--cl-ink);
  border: 1px solid rgba(21, 101, 192, 0.16);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.class-list-page .md-cl-card__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 10px;
  border: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12));
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
}

.class-list-page .md-cl-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  text-align: center;
}

.class-list-page .md-cl-metric + .md-cl-metric {
  border-left: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12));
}

.class-list-page .md-cl-metric__value {
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cl-ink);
}

.class-list-page .md-cl-metric__label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-text-secondary);
}

.class-list-page .md-cl-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.class-list-page .md-cl-card__actions .md-btn-contained {
  width: 100%;
  min-height: 36px;
  text-transform: none;
  box-shadow: none;
  background: var(--cl-primary);
  color: #fff;
  font-size: 0.75rem;
}

.class-list-page .md-cl-card__actions .md-btn-contained--tonal {
  background: var(--cl-soft);
  color: var(--cl-ink);
}

.md-cl-repeater__item {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #fff;
}

.md-cl-repeater__delete {
  width: 100%;
  min-height: 36px;
  margin-top: 4px;
  text-transform: none;
  box-shadow: none;
  background: #ffebee;
  color: var(--md-error);
}

#create_subclass_modal.class-list-sheet,
#assign_class_modal.class-list-sheet {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  z-index: 1300 !important;
  overflow: hidden !important;
  transform: none !important;
}

#create_subclass_modal.class-list-sheet.menu-active,
#assign_class_modal.class-list-sheet.menu-active {
  display: flex !important;
  flex-direction: column !important;
}

#create_subclass_modal.class-list-sheet .md-timeline-sheet__panel,
#assign_class_modal.class-list-sheet .md-timeline-sheet__panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  background: #fff;
  font-family: "Jost", sans-serif;
}

#create_subclass_modal.class-list-sheet .md-timeline-sheet__handle,
#assign_class_modal.class-list-sheet .md-timeline-sheet__handle { display: none; }

#create_subclass_modal.class-list-sheet .md-timeline-sheet__header,
#assign_class_modal.class-list-sheet .md-timeline-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 8px 12px 20px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

#create_subclass_modal.class-list-sheet .md-timeline-sheet__body,
#assign_class_modal.class-list-sheet .md-timeline-sheet__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 16px;
}

#create_subclass_modal.class-list-sheet .md-timeline-sheet__footer,
#assign_class_modal.class-list-sheet .md-timeline-sheet__footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 16px calc(12px + var(--md-sheet-footer-safe, 0px));
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

#create_subclass_modal.class-list-sheet .md-timeline-sheet__footer .md-btn-contained,
#assign_class_modal.class-list-sheet .md-timeline-sheet__footer .md-btn-contained {
  width: 100%;
  min-height: 42px;
  text-transform: none;
  box-shadow: none;
}

#assign_class_modal.class-list-sheet .spinnerAssign {
  padding: 24px;
  text-align: center;
}

#create_subclass_modal.class-list-sheet .md-timeline-sheet__overline,
#assign_class_modal.class-list-sheet .md-timeline-sheet__overline {
  display: block;
  margin: 0 0 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a73e8;
}

#create_subclass_modal.class-list-sheet .md-timeline-sheet__title,
#assign_class_modal.class-list-sheet .md-timeline-sheet__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #202124;
}

#create_subclass_modal.class-list-sheet .md-timeline-sheet__lead,
#assign_class_modal.class-list-sheet .md-timeline-sheet__lead {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--md-text-secondary, #5f6368);
}

#create_subclass_modal.class-list-sheet .md-timeline-sheet__close,
#assign_class_modal.class-list-sheet .md-timeline-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #202124;
  cursor: pointer;
}

.md-cl-assign__chip-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
}

.md-cl-assign__count {
  background: #f1f3f4 !important;
  color: #5f6368 !important;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.md-cl-assign__toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 12px;
}

.md-cl-assign__toolbar .md-btn-contained {
  width: 100%;
  min-height: 40px;
  text-transform: none;
  box-shadow: none;
  font-size: 0.8125rem;
}

.md-cl-assign__search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.md-cl-assign__search:focus-within {
  border-color: #1565c0;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16);
}

.md-cl-assign__search .md-search-field__icon { color: #5f6368; }

.md-cl-assign__search .md-search-field__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
}

.md-cl-assign .dataTables_wrapper .dataTables_filter,
.md-cl-assign .dataTables_wrapper .dataTables_length,
.md-cl-assign .dataTables_wrapper .dataTables_info {
  display: none !important;
}

.md-cl-assign__table,
.md-cl-assign table#assign {
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.md-cl-assign table#assign thead { display: none; }

.md-cl-assign table#assign tbody {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.md-cl-assign table#assign tbody tr,
.md-cl-assign table#assign tbody td {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.md-cl-check {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.md-cl-check:hover {
  border-color: rgba(21, 101, 192, 0.28);
  background: #f8fbff;
}

.md-cl-check__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.md-cl-check__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid #9aa0a6;
  border-radius: 6px;
  background: #fff;
  color: transparent;
  font-size: 0.75rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.md-cl-check__input:checked + .md-cl-check__box {
  background: #1565c0;
  border-color: #1565c0;
  color: #fff;
}

.md-cl-check__input:focus-visible + .md-cl-check__box {
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.24);
}

.md-cl-check:has(.md-cl-check__input:checked) {
  border-color: rgba(21, 101, 192, 0.35);
  background: #eef5ff;
  box-shadow: inset 0 0 0 1px rgba(21, 101, 192, 0.08);
}

.md-cl-check__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #202124;
  line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
  .class-list-page .md-animate-in,
  .class-list-page .md-cl-hero__stamp {
    animation: none;
    transform: none;
  }
}



/* ── Soft pill toolbar chips + session nav tiles (restored) ── */
.md-toolbar__row {
  display: grid;
  gap: 8px;
}

/* Soft pill toolbar context chip (canonical: school roll / class roster) */
.timeline-page .md-timeline-toolbar__chip,
.mail-page .md-mail-toolbar__chip,
.alert-page .md-alert-toolbar__chip,
.topic-page .md-topic-toolbar__chip,
.student-class-page .md-sc-toolbar__chip,
.subject-list-page .md-sub-toolbar__chip,
.student-list-page .md-sl-toolbar__chip,
.staff-list-page .md-stf-toolbar__chip,
.class-list-page .md-cl-toolbar__chip,
.pay-invoice-page .md-pay-inv-toolbar__chip,
.app-settings-page .md-app-settings-toolbar__chip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 14px 8px 8px;
  box-sizing: border-box;
  border: 1px solid var(--md-soft-pill-border, rgba(21, 101, 192, 0.18));
  border-radius: 16px;
  background: var(--md-soft-pill-bg, #e3f2fd) !important;
  color: var(--md-soft-pill-primary, #1565c0);
  font-family: var(--mui-font, "Jost", sans-serif);
  box-shadow: none !important;
  text-transform: none;
  pointer-events: none;
}

.timeline-page .md-timeline-toolbar__chip-avatar,
.mail-page .md-mail-toolbar__chip-avatar,
.alert-page .md-alert-toolbar__chip-avatar,
.topic-page .md-topic-toolbar__chip-avatar,
.student-class-page .md-sc-toolbar__chip-avatar,
.subject-list-page .md-sub-toolbar__chip-avatar,
.student-list-page .md-sl-toolbar__chip-avatar,
.staff-list-page .md-stf-toolbar__chip-avatar,
.class-list-page .md-cl-toolbar__chip-avatar,
.pay-invoice-page .md-pay-inv-toolbar__chip-avatar,
.app-settings-page .md-app-settings-toolbar__chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--md-soft-pill-primary, #1565c0);
  color: #fff;
  font-size: 0.8125rem;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.28);
}

.timeline-page .md-timeline-toolbar__chip-label,
.mail-page .md-mail-toolbar__chip-label,
.alert-page .md-alert-toolbar__chip-label,
.topic-page .md-topic-toolbar__chip-label,
.student-class-page .md-sc-toolbar__chip-label,
.subject-list-page .md-sub-toolbar__chip-copy,
.student-list-page .md-sl-toolbar__chip-copy,
.staff-list-page .md-stf-toolbar__chip-copy,
.class-list-page .md-cl-toolbar__chip-label,
.pay-invoice-page .md-pay-inv-toolbar__chip-label,
.app-settings-page .md-app-settings-toolbar__chip-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}

.timeline-page .md-timeline-toolbar__chip-overline,
.mail-page .md-mail-toolbar__chip-overline,
.alert-page .md-alert-toolbar__chip-overline,
.topic-page .md-topic-toolbar__chip-overline,
.student-class-page .md-sc-toolbar__chip-overline,
.subject-list-page .md-sub-toolbar__chip-overline,
.student-list-page .md-sl-toolbar__chip-overline,
.staff-list-page .md-stf-toolbar__chip-overline,
.class-list-page .md-cl-toolbar__chip-overline,
.pay-invoice-page .md-pay-inv-toolbar__chip-overline,
.app-settings-page .md-app-settings-toolbar__chip-overline {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-soft-pill-overline, rgba(21, 101, 192, 0.72));
}

.timeline-page .md-timeline-toolbar__chip-text,
.mail-page .md-mail-toolbar__chip-text,
.alert-page .md-alert-toolbar__chip-text,
.topic-page .md-topic-toolbar__chip-text,
.student-class-page .md-sc-toolbar__chip-text,
.subject-list-page .md-sub-toolbar__chip-name,
.student-list-page .md-sl-toolbar__chip-name,
.staff-list-page .md-stf-toolbar__chip-name,
.class-list-page .md-cl-toolbar__chip-text,
.pay-invoice-page .md-pay-inv-toolbar__chip-text,
.app-settings-page .md-app-settings-toolbar__chip-text {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--md-soft-pill-ink, #0d47a1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mail filter chips: side-by-side + denser than other toolbars */
.mail-page .md-mail-toolbar__chip {
  min-height: 0;
  padding: 4px 8px 4px 4px;
  gap: 6px;
  border-radius: 12px;
}

.mail-page .md-mail-toolbar__chip-avatar {
  width: 24px;
  height: 24px;
  font-size: 0.6875rem;
}

.mail-page .md-mail-toolbar__chip-label {
  gap: 0;
}

.mail-page .md-mail-toolbar__chip-overline {
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

.mail-page .md-mail-toolbar__chip-text {
  font-size: 0.75rem;
  line-height: 1.2;
}

.timeline-page .md-timeline-toolbar__chip {
  width: 100%;
  flex: none;
  max-width: none;
  min-width: 0;
}

/* Nav menu focus + motion (tiles live in main nav block above) */
#menu_nav.md-nav-menu .md-nav-tile:focus-visible,
#menu_nav.md-nav-menu .md-nav-id__actions a:focus-visible {
  outline: 2px solid var(--nav-stripe);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #menu_nav.md-nav-menu .md-nav-tile {
    transition: none;
  }

  #menu_nav.md-nav-menu .md-nav-tile:hover,
  #menu_nav.md-nav-menu .md-nav-tile:focus-visible,
  #menu_nav.md-nav-menu .md-nav-tile:active {
    transform: none;
  }

  #menu_nav.md-nav-menu .md-nav-tile::before,
  #menu_nav.md-nav-menu .md-nav-tile__chevron {
    transition: none;
  }
}
/* ── Topic context chips (ash + timeline border) ── */
.topic-page .md-topic-toolbar__chip--class,
.topic-page .md-topic-toolbar__chip--subject,
.topic-page .md-topic-toolbar__chip--week,
.topic-page .md-topic-toolbar__chip--topic,
.topic-page .md-topic-toolbar__chip--term,
.topic-page .md-topic-toolbar__chip--st {
  background: #f1f3f4 !important;
  border-color: var(--tl-card-border, #c0c4c8) !important;
  color: #5f6368 !important;
}

.topic-page .md-topic-toolbar__chip--class .md-topic-toolbar__chip-avatar,
.topic-page .md-topic-toolbar__chip--subject .md-topic-toolbar__chip-avatar,
.topic-page .md-topic-toolbar__chip--week .md-topic-toolbar__chip-avatar,
.topic-page .md-topic-toolbar__chip--topic .md-topic-toolbar__chip-avatar,
.topic-page .md-topic-toolbar__chip--term .md-topic-toolbar__chip-avatar,
.topic-page .md-topic-toolbar__chip--st .md-topic-toolbar__chip-avatar {
  background: #5f6368 !important;
  color: #fff !important;
  box-shadow: none !important;
}

.topic-page .md-topic-toolbar__chip--class .md-topic-toolbar__chip-overline,
.topic-page .md-topic-toolbar__chip--subject .md-topic-toolbar__chip-overline,
.topic-page .md-topic-toolbar__chip--week .md-topic-toolbar__chip-overline,
.topic-page .md-topic-toolbar__chip--topic .md-topic-toolbar__chip-overline,
.topic-page .md-topic-toolbar__chip--term .md-topic-toolbar__chip-overline,
.topic-page .md-topic-toolbar__chip--st .md-topic-toolbar__chip-overline {
  color: #5f6368 !important;
}

.topic-page .md-topic-toolbar__chip--class .md-topic-toolbar__chip-text,
.topic-page .md-topic-toolbar__chip--subject .md-topic-toolbar__chip-text,
.topic-page .md-topic-toolbar__chip--week .md-topic-toolbar__chip-text,
.topic-page .md-topic-toolbar__chip--topic .md-topic-toolbar__chip-text,
.topic-page .md-topic-toolbar__chip--term .md-topic-toolbar__chip-text,
.topic-page .md-topic-toolbar__chip--st .md-topic-toolbar__chip-text {
  color: #5f6368 !important;
}

/* Compact 2×2 filter strip — overrides shared soft-pill chip sizing */
.topic-page .md-topic-toolbar__context {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 100%;
}

.topic-page .md-topic-toolbar__context .md-topic-toolbar__chip {
  gap: 0;
  min-height: 0;
  height: auto;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid var(--tl-card-border, #c0c4c8);
  background: #f1f3f4 !important;
}

.topic-page .md-topic-toolbar__context .md-topic-toolbar__chip-avatar {
  display: none;
}

.topic-page .md-topic-toolbar__context .md-topic-toolbar__chip-label {
  flex-direction: row;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
}

.topic-page .md-topic-toolbar__context .md-topic-toolbar__chip-overline {
  flex-shrink: 0;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #5f6368 !important;
  opacity: 0.72;
}

.topic-page .md-topic-toolbar__context .md-topic-toolbar__chip-overline::after {
  content: "·";
  margin-left: 4px;
  font-weight: 600;
  opacity: 0.55;
}

.topic-page .md-topic-toolbar__context .md-topic-toolbar__chip-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  color: #5f6368 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── zap-app: shared class-dash + student card (Pattern A) ── */
.md-class-dash {
  margin: 0 0 12px;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--md-shape-lg);
  background: #fff;
  box-shadow: var(--md-elevation-1);
}

.md-class-dash__hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.md-class-dash__count {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--dash-primary, #1a73e8);
}

.md-class-dash__hero-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.md-class-dash__label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--md-text-primary);
}

.md-class-dash__sublabel {
  font-size: 0.75rem;
  color: var(--md-text-secondary);
}

.md-class-dash__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 0;
}

.md-class-dash__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 10px;
  background: #f5f7fb;
  text-align: center;
}

.md-class-dash__stat--accent {
  background: #e8f5e9;
}

.md-class-dash__stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--md-text-primary);
}

.md-class-dash__stat-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-text-secondary);
}

.md-class-dash__banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff8e1;
  color: #8a5a00;
  font-size: 0.75rem;
  line-height: 1.4;
}

.md-class-dash__banner > i {
  margin-top: 2px;
  color: #f9ab00;
}

.md-class-dash__banner-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.md-class-dash__banner-lead { font-weight: 700; }
.md-class-dash__banner-sep { opacity: 0.55; }

.md-summary-metrics__group {
  display: grid;
  gap: 0;
  border: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12));
  border-radius: 8px;
  overflow: hidden;
  background: #f8f9fa;
}

.md-summary-metrics__group--2 {
  grid-template-columns: repeat(2, 1fr);
}

.md-summary-metrics__group--4 {
  grid-template-columns: repeat(4, 1fr);
}

.md-summary-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  text-align: center;
  border-right: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12));
}

.md-summary-metric:last-child { border-right: none; }

.md-summary-metric__value {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--md-text-primary);
}

.md-summary-metric__label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--md-text-secondary);
}

.md-summary-metric--success .md-summary-metric__value { color: var(--md-success); }
.md-summary-metric--error .md-summary-metric__value { color: var(--md-error); }
.md-summary-metric--warning .md-summary-metric__value { color: var(--md-warning); }
.md-summary-metric--info .md-summary-metric__value { color: var(--md-info); }

.md-student-card {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--md-shape-lg);
  background: #fff;
}

.md-student-card__body {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
}

.md-student-card__profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 10px;
  background: linear-gradient(180deg, #e3f2fd 0%, #f5f7fb 100%);
  text-align: center;
}

.md-student-card__avatar-wrap {
  width: 76px;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(13, 71, 161, 0.18);
}

.md-student-card__avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.md-student-card__class {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--md-text-primary);
}

.md-student-card__meta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  margin: 0;
}

.md-student-card__meta-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(21, 101, 192, 0.12);
  color: #1565c0;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.md-student-card__meta .md-student-card__devices {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

.md-student-card__content {
  min-width: 0;
  padding: 12px 12px 10px;
}

.md-student-card__name {
  margin: 0 0 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--md-text-primary);
}

.md-student-card__phones {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 4px;
  margin-bottom: 6px;
  min-width: 0;
}

.md-student-card__phone {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 32px;
  padding: 4px 6px;
  border-radius: 8px;
  background: #e3f2fd;
  color: #1565c0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.md-student-card__phone:active {
  background: #bbdefb;
}

.md-student-card__phone i {
  display: inline-block;
  flex-shrink: 0;
  font-size: 0.625rem;
  line-height: 1;
}

.md-student-card__phone span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-student-card__devices {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
}

.md-student-card__devices--on {
  background: #e0f2f1;
  color: #00695c;
  border: 1px solid rgba(0, 105, 92, 0.14);
}

.md-student-card__devices--off {
  background: #f1f3f4;
  color: #80868b;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.md-student-card__devices:hover,
.md-student-card__devices:focus-visible {
  filter: brightness(0.97);
}

.md-student-card__devices > i {
  font-size: 0.75rem;
}

.md-student-card__devices-count {
  font-variant-numeric: tabular-nums;
}

.md-student-card__devices-label {
  font-weight: 600;
  text-transform: lowercase;
}

.md-student-card__stats { margin-bottom: 10px; }

.student-list-page .md-student-card .md-summary-metric__value {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.student-list-page .md-student-card .md-summary-metric__label {
  font-size: 0.5rem;
}

.md-student-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.md-student-card__actions .md-btn-contained {
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  gap: 6px;
  border: 1px solid #c0c4c8;
  border-radius: 10px;
  background: #d2e3fc;
  color: #0d47a1;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  box-shadow: none;
}

.md-student-card__actions .md-btn-contained:hover,
.md-student-card__actions .md-btn-contained:focus-visible {
  background: #c4daf9;
  border-color: #c0c4c8;
  color: #0d47a1;
  box-shadow: none;
}

.md-student-card__actions .md-btn-contained--tonal {
  background: #bbdefb;
  color: #0d47a1;
}

.md-student-card__actions .md-btn-contained--tonal:hover,
.md-student-card__actions .md-btn-contained--tonal:focus-visible {
  background: #a6d4f9;
  color: #0d47a1;
}

/* ── zap-app: student-list-page ── */
html.student-list-app .header.header-fixed,
body.student-list-app .header.header-fixed,
.is-webview.student-list-app .header.header-fixed,
.is-webview body.student-list-app .header.header-fixed,
html.student-list-app .page-title-clear,
body.student-list-app .page-title-clear {
  display: none !important;
}

html.student-list-app body,
body.student-list-app {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html.student-list-app #page,
body.student-list-app #page,
body.student-list-app .md-page.student-list-page,
body.student-list-app .md-page.student-list-page .student-list-feed.page-content,
body.student-list-app .md-page.student-list-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.student-list-page {
  --sl-primary: #1565c0;
  --sl-primary-dark: #0d47a1;
  --sl-soft: #e3f2fd;
  --sl-ink: #0d47a1;
  --sl-bg: #eef0f3;
  --sl-toolbar-teal: #0f766e;
  --dash-primary: #1a73e8;
  --md-soft-pill-bg: #e3f2fd;
  --md-soft-pill-primary: #1565c0;
  --md-soft-pill-ink: #0d47a1;
  --md-soft-pill-overline: rgba(21, 101, 192, 0.72);
  --md-soft-pill-border: rgba(21, 101, 192, 0.18);
  --md-student-list-toolbar-offset: 168px;
  --mui-primary: var(--sl-primary);
  --mui-font: "Jost", sans-serif;
  --md-font: "Jost", sans-serif;
  font-family: "Jost", sans-serif !important;
  background: var(--sl-bg);
  min-height: 100vh;
}

.student-list-page .page-title-clear { display: none !important; }

.student-list-page .student-list-feed.page-content,
.student-list-page .page-content,
.student-list-page .student-list-feed.md-feed {
  max-width: 680px;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--md-student-list-toolbar-offset, 168px) + 8px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 24px) !important;
  background:
    radial-gradient(120% 48% at 50% -8%, rgba(21, 101, 192, 0.09) 0%, transparent 58%),
    linear-gradient(180deg, #eef3f8 0%, var(--sl-bg) 220px) !important;
  overflow: visible !important;
}

.student-list-page .md-sl-feed-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.student-list-page .md-sl-feed-dash {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.student-list-page .md-sl-feed-tools {
  margin: 0;
}

.student-list-page .md-sl-feed-list {
  margin: 0;
}

.student-list-page .md-sl-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--mui-elevation-1) !important;
  background: #fff !important;
  transform: none !important;
  overflow: visible !important;
}

.student-list-page .md-sl-toolbar .content,
.student-list-page .md-sl-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 10px 12px 12px !important;
  box-sizing: border-box;
}

.student-list-page .md-sl-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.student-list-page .md-sl-toolbar__back,
.student-list-page .md-sl-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #202124;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.student-list-page .md-sl-toolbar__reload { margin-left: auto; }

.student-list-page .md-sl-toolbar__heading {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.student-list-page .md-sl-toolbar__overline {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a73e8;
  line-height: 1.2;
}

.student-list-page .md-sl-toolbar__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #202124;
  text-transform: none;
}

.student-list-page .md-sl-toolbar__heading .md-sl-toolbar__title {
  flex: none;
  font-size: 1.0625rem;
  color: #0d47a1;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.student-list-page .md-sl-toolbar__actions {
  display: grid;
  gap: 8px;
  width: 100%;
}

.student-list-page .md-sl-toolbar__actions--3 { grid-template-columns: 1fr 1fr 1fr; }
.student-list-page .md-sl-toolbar__actions--2 { grid-template-columns: 1fr 1fr; }

.student-list-page .md-sl-toolbar__actions .md-btn-contained {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  gap: 8px;
  border: 1px solid #c0c4c8;
  border-radius: 10px;
  background: #e8f0fe;
  color: #1557b0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  box-shadow: none;
}

.student-list-page .md-sl-toolbar__actions .md-btn-contained:hover,
.student-list-page .md-sl-toolbar__actions .md-btn-contained:focus-visible {
  border-color: #c0c4c8;
  box-shadow: none;
}

.student-list-page .md-sl-toolbar__actions .md-btn-contained--success {
  background: #e8f0fe;
  color: #1557b0;
}

.student-list-page .md-sl-toolbar__actions .md-btn-contained--success:hover,
.student-list-page .md-sl-toolbar__actions .md-btn-contained--success:focus-visible {
  background: #dce8fb;
  color: #0d47a1;
}

.student-list-page .md-sl-toolbar__actions .md-btn-contained:not(.md-btn-contained--success):not(.md-btn-contained--tonal) {
  background: #d2e3fc;
  color: #0d47a1;
}

.student-list-page .md-sl-toolbar__actions .md-btn-contained:not(.md-btn-contained--success):not(.md-btn-contained--tonal):hover,
.student-list-page .md-sl-toolbar__actions .md-btn-contained:not(.md-btn-contained--success):not(.md-btn-contained--tonal):focus-visible {
  background: #c4daf9;
  color: #0d47a1;
}

.student-list-page .md-sl-toolbar__actions .md-btn-contained--tonal {
  background: #bbdefb;
  color: #0d47a1;
}

.student-list-page .md-sl-toolbar__actions .md-btn-contained--tonal:hover,
.student-list-page .md-sl-toolbar__actions .md-btn-contained--tonal:focus-visible {
  background: #a6d4f9;
  color: #0d47a1;
}

.student-list-page .md-sl-dash.md-class-dash {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid #64b5f6;
  border-radius: 14px;
  background: linear-gradient(160deg, #e8f1fc 0%, #e3f2fd 48%, #f0f6ff 100%);
  box-shadow: 0 1px 3px rgba(21, 101, 192, 0.1);
}

.student-list-page .md-sl-dash__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-top: 0;
  background: transparent;
}

.student-list-page .md-sl-dash__setup {
  display: flex;
  align-items: center;
  gap: 10px;
}

.student-list-page .md-sl-dash__complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 56px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #90caf9;
  line-height: 1.1;
  color: var(--sl-ink, #0d47a1);
}

.student-list-page .md-sl-dash__complete-value {
  font-size: 0.9375rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: inherit;
}

.student-list-page .md-sl-dash__complete-label {
  margin-top: 2px;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.8;
}

.student-list-page .md-sl-dash__complete--ok {
  background: #edf3ee;
  border-color: #b9cfc0;
  color: #1e5c32;
}

.student-list-page .md-sl-dash__complete--mid {
  background: #f6f1e4;
  border-color: #d9cc9e;
  color: #6b5420;
}

.student-list-page .md-sl-dash__complete--low,
.student-list-page .md-sl-dash__complete--empty {
  background: #f4eceb;
  border-color: #d8b8b5;
  color: #8f3a37;
}

.student-list-page .md-sl-dash__progress {
  flex: 1 1 auto;
  min-width: 0;
  height: 8px;
  margin: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(144, 202, 249, 0.55);
  overflow: hidden;
}

.student-list-page .md-sl-dash__progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  min-width: 0;
  transition: width 0.35s ease;
}

.student-list-page .md-sl-dash__progress-bar--ok { background: #5f8f6b; }
.student-list-page .md-sl-dash__progress-bar--mid { background: #c49a3a; }
.student-list-page .md-sl-dash__progress-bar--low,
.student-list-page .md-sl-dash__progress-bar--empty { background: #b55c56; }

.student-list-page .md-sl-sort {
  margin: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.student-list-page .md-sl-sort__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  padding: 0 2px;
}

.student-list-page .md-sl-sort__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0d47a1;
}

.student-list-page .md-sl-sort__hint {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #5f6368;
  white-space: nowrap;
}

.student-list-page .md-sl-sort-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  padding: 6px;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  border-radius: 12px;
  border: 1px solid rgba(25, 118, 210, 0.18);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 2px rgba(21, 101, 192, 0.06);
  overflow: hidden;
  box-sizing: border-box;
}

.student-list-page .md-sl-sort-strip--row {
  width: 100%;
  max-width: none;
  flex-shrink: 0;
}

.student-list-page .md-sl-sort-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  background: rgba(25, 118, 210, 0.12);
  z-index: 2;
}

.student-list-page .md-sl-sort-strip.is-filtering .md-sl-sort-progress {
  opacity: 1;
  visibility: visible;
}

.student-list-page .md-sl-sort-progress__bar {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 0 2px 2px 0;
  background: #1976d2;
  transform: translateX(-100%);
}

.student-list-page .md-sl-sort-strip.is-filtering .md-sl-sort-progress__bar {
  animation: md-topic-sort-progress-indeterminate 1.1s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .student-list-page .md-sl-sort-strip.is-filtering .md-sl-sort-progress__bar {
    animation: none;
    width: 100%;
    transform: none;
    opacity: 0.85;
  }
}

.student-list-page .md-sl-sort-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  min-height: 44px;
  padding: 4px 1px 5px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f8fbff;
  text-align: center;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.student-list-page .md-sl-sort-stat:hover {
  background: #eef5ff;
  border-color: rgba(25, 118, 210, 0.22);
}

.student-list-page .md-sl-sort-stat:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.2);
}

.student-list-page .md-sl-sort-stat.is-active {
  background: #e3f2fd;
  border-color: #90caf9;
  box-shadow: inset 0 0 0 1px rgba(21, 101, 192, 0.08);
}

.student-list-page .md-sl-sort-stat.is-accent {
  background: #edf5ee;
}

.student-list-page .md-sl-sort-stat.is-accent.is-active {
  background: #e4f0e6;
  border-color: #a5d6a7;
}

.student-list-page .md-sl-sort-stat.is-alert {
  background: #fce8e6;
}

.student-list-page .md-sl-sort-stat.is-alert.is-active {
  background: #fce8e6;
  border-color: #f6aea9;
}

.student-list-page .md-sl-sort-stat__value {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--sl-ink, #0d47a1);
}

.student-list-page .md-sl-sort-stat.is-accent .md-sl-sort-stat__value {
  color: #2e7d32;
}

.student-list-page .md-sl-sort-stat.is-alert .md-sl-sort-stat__value {
  color: #d93025;
}

.student-list-page .md-sl-sort-stat__label {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--md-text-secondary, #5f6368);
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

@media (min-width: 420px) {
  .student-list-page .md-sl-sort-stat {
    min-height: 48px;
    padding: 5px 2px 6px;
  }

  .student-list-page .md-sl-sort-stat__value {
    font-size: 0.9375rem;
  }

  .student-list-page .md-sl-sort-stat__label {
    font-size: 0.5625rem;
  }
}

.student-list-page .md-sl-dash__banner.md-class-dash__banner {
  margin: 0;
  border-radius: 10px;
  border: 1px solid rgba(249, 171, 0, 0.32);
  background: linear-gradient(135deg, #fff8e1 0%, #fff3c4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.student-list-page .md-sl-dash__banner-action {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  -webkit-tap-highlight-color: transparent;
}

.student-list-page .md-sl-dash__banner-action:hover,
.student-list-page .md-sl-dash__banner-action:focus-visible {
  color: #6d4500;
}

.student-list-page .md-sl-dash__banner-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(249, 171, 0, 0.28);
  border-radius: 4px;
}

.student-list-page .md-sl-dash__banner-note {
  opacity: 0.92;
}

.student-list-page .md-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.student-list-page .md-search-field:focus-within {
  border-color: var(--sl-primary);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16);
}

.student-list-page .md-search-field__icon { color: var(--md-text-secondary); }

.student-list-page .md-search-field__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
}

.student-list-page .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.student-list-page .md-sl-list .dataTables_wrapper { width: 100%; }

.student-list-page .md-sl-list table#student tbody td.dataTables_empty {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
}

.student-list-page .md-sl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  padding: 28px 20px;
  border: 1px dashed rgba(21, 101, 192, 0.22);
  border-radius: var(--md-shape-lg);
  background: linear-gradient(180deg, #e3f2fd 0%, #fff 72%);
  text-align: center;
}

.student-list-page .md-sl-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--sl-primary);
  font-size: 1.25rem;
  box-shadow: 0 2px 6px rgba(13, 71, 161, 0.16);
}

.student-list-page .md-sl-empty__title {
  margin: 4px 0 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sl-ink);
}

.student-list-page .md-sl-empty__text {
  margin: 0;
  max-width: 280px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--md-text-secondary);
}

.student-list-page .md-sl-empty--loading {
  border-style: solid;
  border-color: rgba(21, 101, 192, 0.12);
}

.student-list-page .md-sl-empty__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(21, 101, 192, 0.18);
  border-top-color: var(--sl-primary);
  border-radius: 50%;
  animation: md-sl-spin 0.7s linear infinite;
}

@keyframes md-sl-spin {
  to { transform: rotate(360deg); }
}

.student-list-page .md-sl-loading {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 4px 0 8px;
}

.student-list-page .md-sl-loading__banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(21, 101, 192, 0.14);
  background:
    linear-gradient(135deg, rgba(21, 101, 192, 0.08) 0%, transparent 48%),
    linear-gradient(180deg, #eef5ff 0%, #ffffff 100%);
  box-shadow: 0 6px 18px rgba(15, 28, 46, 0.04);
}

.student-list-page .md-sl-loading__pulse {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sl-primary, #1565c0);
  box-shadow: 0 0 0 0 rgba(21, 101, 192, 0.45);
  animation: md-sl-loading-pulse 1.4s ease-out infinite;
}

.student-list-page .md-sl-loading__pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(21, 101, 192, 0.28);
  animation: md-sl-loading-ring 1.4s ease-out infinite;
}

.student-list-page .md-sl-loading__copy {
  min-width: 0;
}

.student-list-page .md-sl-loading__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sl-ink, #0f1c2e);
}

.student-list-page .md-sl-loading__text {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #5a6a7a;
}

@keyframes md-sl-loading-pulse {
  0% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(21, 101, 192, 0.4); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(21, 101, 192, 0); }
  100% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(21, 101, 192, 0); }
}

@keyframes md-sl-loading-ring {
  0% { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}

.student-list-page .md-sl-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.student-list-page .md-sl-skeleton__card {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  border-radius: var(--md-shape-lg, 12px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  background:
    linear-gradient(90deg, #e8eef7 0%, #f5f8fc 50%, #e8eef7 100%),
    #fff;
  background-size: 200% 100%, auto;
  animation: md-sl-skeleton-shimmer 1.2s ease-in-out infinite;
}

.student-list-page .md-sl-skeleton__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 104px;
  bottom: 0;
  background: linear-gradient(180deg, rgba(227, 242, 253, 0.95) 0%, rgba(245, 247, 251, 0.95) 100%);
}

.student-list-page .md-sl-skeleton__card::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 124px;
  right: 16px;
  height: 72%;
  border-radius: 10px;
  background:
    linear-gradient(#fff 0 0) 0 0 / 58% 14px,
    linear-gradient(#fff 0 0) 0 28px / 40% 10px,
    linear-gradient(#fff 0 0) 0 56px / 100% 44px,
    linear-gradient(#fff 0 0) 0 calc(100% - 36px) / 48% 32px,
    linear-gradient(#fff 0 0) calc(52%) calc(100% - 36px) / 42% 32px;
  background-repeat: no-repeat;
  opacity: 0.72;
}

@keyframes md-sl-skeleton-shimmer {
  0% { background-position: 100% 0, 0 0; }
  100% { background-position: -100% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .student-list-page .md-sl-empty__spinner {
    animation: none;
    border-top-color: rgba(21, 101, 192, 0.45);
  }

  .student-list-page .md-sl-loading__pulse,
  .student-list-page .md-sl-loading__pulse::after,
  .student-list-page .md-sl-skeleton__card {
    animation: none;
  }
}

.student-list-page .md-sl-list .dataTables_wrapper .dataTables_length,
.student-list-page .md-sl-list .dataTables_wrapper .dataTables_filter,
.student-list-page .md-sl-list .dataTables_wrapper .dataTables_info,
.student-list-page .md-sl-list .dataTables_processing {
  display: none !important;
}

.student-list-page .md-sl-list table#student.is-booting,
.student-list-page .md-sl-list:has(table#student.is-booting) #student_wrapper {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.student-list-page .md-sl-list .dataTables_wrapper .dataTables_paginate {
  margin-top: 12px !important;
  text-align: center;
}

.student-list-page .md-sl-list table#student {
  display: block !important;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.student-list-page .md-sl-list table#student thead { display: none; }

.student-list-page .md-sl-list table#student tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.student-list-page .md-sl-list table#student tbody tr,
.student-list-page .md-sl-list table#student tbody td {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
  .student-list-page .md-animate-in,
  .staff-list-page .md-animate-in,
  .student-class-page .md-animate-in,
  .subject-list-page .md-animate-in {
    animation: none !important;
  }
}

/* ── zap-app: student-class-page ── */
html.student-class-app .header.header-fixed,
body.student-class-app .header.header-fixed,
.is-webview.student-class-app .header.header-fixed,
.is-webview body.student-class-app .header.header-fixed,
html.student-class-app .page-title-clear,
body.student-class-app .page-title-clear {
  display: none !important;
}

html.student-class-app body,
body.student-class-app {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html.student-class-app #page,
body.student-class-app #page,
body.student-class-app .md-page.student-class-page,
body.student-class-app .md-page.student-class-page .student-class-feed.page-content,
body.student-class-app .md-page.student-class-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.student-class-page {
  --sc-primary: #1976d2;
  --sc-primary-dark: #1565c0;
  --sc-soft: #e3f2fd;
  --sc-ink: #0d47a1;
  --sc-bg: #eef1f4;
  --sc-cover: linear-gradient(135deg, #1565c0 0%, #1976d2 48%, #42a5f5 100%);
  --md-soft-pill-bg: #e3f2fd;
  --md-soft-pill-primary: #1976d2;
  --md-soft-pill-ink: #0d47a1;
  --md-soft-pill-overline: rgba(25, 118, 210, 0.72);
  --md-soft-pill-border: rgba(25, 118, 210, 0.18);
  --dash-primary: #1976d2;
  --md-student-class-toolbar-offset: 168px;
  --mui-primary: var(--sc-primary);
  --mui-primary-dark: var(--sc-primary-dark);
  --mui-primary-container: var(--sc-soft);
  --mui-font: "Jost", sans-serif;
  --md-font: "Jost", sans-serif;
  font-family: "Jost", sans-serif !important;
  background: var(--sc-bg);
  min-height: 100vh;
}

.student-class-page .page-title-clear { display: none !important; }

.student-class-page .student-class-feed.page-content,
.student-class-page .page-content,
.student-class-page .student-class-feed.md-feed {
  max-width: 680px;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--md-student-class-toolbar-offset, 168px) + 8px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 24px) !important;
  background: var(--sc-bg) !important;
  overflow: visible !important;
}

.student-class-page .md-sc-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--mui-elevation-1) !important;
  background: #fff !important;
  transform: none !important;
  overflow: visible !important;
}

.student-class-page .md-sc-toolbar .content,
.student-class-page .md-sc-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 10px 12px 12px !important;
  box-sizing: border-box;
}

.student-class-page .md-sc-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.student-class-page .md-sc-toolbar__back,
.student-class-page .md-sc-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #202124;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.student-class-page .md-sc-toolbar__reload { margin-left: auto; }

.student-class-page .md-sc-toolbar__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #202124;
  text-transform: none;
}

.student-class-page .md-sc-toolbar__actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.student-class-page .md-sc-toolbar__actions .md-btn-contained {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  gap: 8px;
  border: 1px solid #c0c4c8;
  border-radius: 10px;
  background: #e8f0fe;
  color: #1557b0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  box-shadow: none;
}

.student-class-page .md-sc-toolbar__actions .md-btn-contained:hover,
.student-class-page .md-sc-toolbar__actions .md-btn-contained:focus-visible {
  border-color: #c0c4c8;
  box-shadow: none;
}

.student-class-page .md-sc-toolbar__actions .md-btn-contained--success {
  background: #e8f0fe;
  color: #1557b0;
}

.student-class-page .md-sc-toolbar__actions .md-btn-contained--success:hover,
.student-class-page .md-sc-toolbar__actions .md-btn-contained--success:focus-visible {
  background: #dce8fb;
  color: #0d47a1;
}

.student-class-page .md-sc-toolbar__actions .md-btn-contained:not(.md-btn-contained--success):not(.md-btn-contained--tonal) {
  background: #d2e3fc;
  color: #0d47a1;
}

.student-class-page .md-sc-toolbar__actions .md-btn-contained:not(.md-btn-contained--success):not(.md-btn-contained--tonal):hover,
.student-class-page .md-sc-toolbar__actions .md-btn-contained:not(.md-btn-contained--success):not(.md-btn-contained--tonal):focus-visible {
  background: #c4daf9;
  color: #0d47a1;
}

.student-class-page .md-sc-toolbar__actions .md-btn-contained--tonal {
  background: #bbdefb;
  color: #0d47a1;
}

.student-class-page .md-sc-toolbar__actions .md-btn-contained--tonal:hover,
.student-class-page .md-sc-toolbar__actions .md-btn-contained--tonal:focus-visible {
  background: #a6d4f9;
  color: #0d47a1;
}

.student-class-page .md-sc-dash.md-class-dash {
  margin: 0 0 12px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(25, 118, 210, 0.14);
  border-radius: var(--md-shape-lg);
  background: #fff;
  box-shadow: none;
}

.student-class-page .md-sc-dash__band {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 16px;
  background: var(--sc-cover);
  color: #fff;
}

.student-class-page .md-sc-dash__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1 1 auto;
}

.student-class-page .md-sc-dash__overline {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.student-class-page .md-sc-dash__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.25;
}

.student-class-page .md-sc-dash__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.88);
}

.student-class-page .md-sc-dash__meta-strong {
  font-weight: 700;
  color: #fff;
}

.student-class-page .md-sc-dash__meta-sep {
  opacity: 0.55;
}

.student-class-page .md-sc-dash__stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  min-width: 88px;
  padding: 8px 12px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  transform: rotate(-3deg);
  text-align: center;
}

.student-class-page .md-sc-dash__stamp-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.student-class-page .md-sc-dash__stamp-label {
  margin-top: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.student-class-page .md-sc-dash__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

.student-class-page .md-sc-dash__stats.md-class-dash__stats {
  gap: 8px;
  margin: 0;
}

.student-class-page .md-sc-dash .md-class-dash__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 72px;
  padding: 12px 8px;
  border-radius: 12px;
  background: #f5f7fb;
  border: 1px solid rgba(15, 23, 42, 0.06);
  text-align: center;
}

.student-class-page .md-sc-dash .md-class-dash__stat--accent {
  background: #e8f5e9;
  border-color: rgba(46, 125, 50, 0.14);
}

.student-class-page .md-sc-dash .md-class-dash__stat-value {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink);
}

.student-class-page .md-sc-dash .md-class-dash__stat--accent .md-class-dash__stat-value {
  color: var(--md-success);
}

.student-class-page .md-sc-dash .md-class-dash__stat-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-text-secondary);
}

.student-class-page .md-sc-dash__banner.md-class-dash__banner {
  margin: 0;
  border-radius: 10px;
  border: 1px solid rgba(249, 171, 0, 0.28);
  background: #fff8e1;
}

@media (prefers-reduced-motion: reduce) {
  .student-class-page .md-sc-dash__stamp {
    transform: none;
  }
}

.student-class-page .md-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.student-class-page .md-search-field:focus-within {
  border-color: var(--sc-primary);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.16);
}

.student-class-page .md-search-field__icon { color: var(--md-text-secondary); }

.student-class-page .md-search-field__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
}

.student-class-page .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.student-class-page .md-sc-list .dataTables_wrapper { width: 100%; }

.student-class-page .md-sc-list .dataTables_wrapper .dataTables_length,
.student-class-page .md-sc-list .dataTables_wrapper .dataTables_filter,
.student-class-page .md-sc-list .dataTables_wrapper .dataTables_info,
.student-class-page .md-sc-list .dataTables_wrapper .dataTables_paginate,
.student-class-page .md-sc-list .dataTables_processing {
  display: none !important;
}

.student-class-page .md-sc-list table#student {
  display: block !important;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.student-class-page .md-sc-list table#student thead { display: none; }

.student-class-page .md-sc-list table#student tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.student-class-page .md-sc-list table#student tbody tr,
.student-class-page .md-sc-list table#student tbody td {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.student-class-page .md-sc-card {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--md-shape-lg);
  background: #fff;
}

.student-class-page .md-sc-card__body {
  display: block;
}

.student-class-page .md-sc-card__content {
  min-width: 0;
  padding: 12px 12px 10px;
}

.student-class-page .md-sc-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.student-class-page .md-sc-card__title {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}

.student-class-page .md-sc-card__badge.md-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: auto;
  min-height: 28px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--sc-soft, #e3f2fd);
  color: var(--sc-ink, #0d47a1);
  border: 1px solid rgba(21, 101, 192, 0.16);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.student-class-page .md-sc-card__complete {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  min-width: 52px;
  line-height: 1.1;
}

.student-class-page .md-sc-card__complete-value {
  font-size: 1.0625rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.student-class-page .md-sc-card__complete-label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-text-secondary);
}

.student-class-page .md-sc-card__complete--ok .md-sc-card__complete-value { color: #5f8f63; }
.student-class-page .md-sc-card__complete--mid .md-sc-card__complete-value { color: #a8843a; }
.student-class-page .md-sc-card__complete--low .md-sc-card__complete-value,
.student-class-page .md-sc-card__complete--empty .md-sc-card__complete-value { color: #a56b68; }

.student-class-page .md-sc-card__progress {
  height: 5px;
  margin: 0 0 10px;
  border-radius: 999px;
  background: #eef0f3;
  overflow: hidden;
}

.student-class-page .md-sc-card__progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  min-width: 0;
  transition: width 0.35s ease;
}

.student-class-page .md-sc-card__progress-bar--ok { background: #9ccc9f; }
.student-class-page .md-sc-card__progress-bar--mid { background: #e8c47a; }
.student-class-page .md-sc-card__progress-bar--low,
.student-class-page .md-sc-card__progress-bar--empty { background: #d7a3a0; }

.student-class-page .md-sc-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 10px;
  border: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12));
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
}

.student-class-page .md-sc-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  text-align: center;
  border-right: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12));
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12));
}

.student-class-page .md-sc-metric:nth-child(3n) { border-right: none; }
.student-class-page .md-sc-metric:nth-child(n+4) { border-bottom: none; }

.student-class-page .md-sc-metric__value {
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.student-class-page .md-sc-metric__value--warn { color: var(--md-error); }
.student-class-page .md-sc-metric__value--ok { color: var(--md-success); }

.student-class-page .md-sc-metric__label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-text-secondary);
}

.student-class-page .md-sc-card__actions .md-btn-contained {
  width: 100%;
  min-height: 36px;
  text-transform: none;
  box-shadow: none;
  background: var(--sc-primary);
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.student-class-page .md-sc-card__actions .md-sc-btn--view.is-processing {
  pointer-events: none;
  opacity: 0.85;
}

/* ── ID card picker sheet (#idcard_modal) ── */
#idcard_modal.md-timeline-sheet {
  display: none !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 1300 !important;
  transform: none !important;
  opacity: 0;
  pointer-events: none;
}

#idcard_modal.md-timeline-sheet.menu-active {
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  pointer-events: all !important;
}

#idcard_modal.md-timeline-sheet .md-timeline-sheet__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;
  background: #fff;
  font-family: "Jost", sans-serif;
  overflow: hidden;
}

#idcard_modal.md-timeline-sheet .md-timeline-sheet__handle {
  display: none;
}

#idcard_modal.md-timeline-sheet .md-timeline-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 10px 14px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, #f6f9fe 0%, #ffffff 72%);
}

#idcard_modal.md-timeline-sheet .md-timeline-sheet__heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 2px;
}

#idcard_modal.md-timeline-sheet .md-timeline-sheet__overline {
  display: none;
}

#idcard_modal.md-timeline-sheet .md-timeline-sheet__title,
#idcard_modal.md-timeline-sheet .md-timeline-sheet__title.modal-title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Jost", sans-serif !important;
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.03em;
  color: #202124 !important;
  text-transform: none !important;
}

#idcard_modal.md-timeline-sheet .md-timeline-sheet__title .md-sl-form-heading__overline {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a73e8;
}

#idcard_modal.md-timeline-sheet .md-timeline-sheet__title .md-sl-form-heading__title {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: #202124;
  text-transform: none;
}

#idcard_modal.md-timeline-sheet .md-timeline-sheet__lead {
  display: none;
}

#idcard_modal.md-timeline-sheet .md-timeline-sheet__close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #5f6368;
  cursor: pointer;
}

#idcard_modal.md-timeline-sheet .md-timeline-sheet__close:hover,
#idcard_modal.md-timeline-sheet .md-timeline-sheet__close:focus-visible {
  background: #e8eaed;
  color: #202124;
}

#idcard_modal.md-timeline-sheet .md-timeline-sheet__loader {
  display: flex;
  justify-content: center;
  padding: 48px 0;
}

#idcard_modal.md-timeline-sheet .md-timeline-sheet__loader.d-none {
  display: none !important;
}

#idcard_modal.md-timeline-sheet .md-timeline-sheet__body.modal-div {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 8px;
  background: #f5f7fb;
}

#idcard_modal.md-timeline-sheet .md-timeline-sheet__footer.modal_footer {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: stretch;
  flex-shrink: 0;
  margin-top: auto;
  gap: 0;
  padding: 12px 16px calc(12px + var(--md-sheet-footer-safe, 0px));
  position: relative !important;
  bottom: auto !important;
  transform: none !important;
  box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  z-index: 30;
  height: auto !important;
  min-height: 0;
}

#idcard_modal.md-timeline-sheet .md-timeline-sheet__footer:empty {
  display: none;
}

#idcard_modal .md-idcard-sheet-footer,
#idcard_modal .md-sl-form-actions.md-idcard-sheet-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr) !important;
  gap: 8px;
  width: 100%;
  flex: 1 1 auto;
}

#idcard_modal .md-idcard-sheet-footer .md-btn-contained {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  justify-content: center;
  text-transform: none;
  box-shadow: none;
  gap: 6px;
  font-size: 0.8125rem;
  white-space: nowrap;
}

#idcard_modal .md-idcard-sheet .md-admit-section {
  margin: 0;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

#idcard_modal .md-idcard-sheet__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

#idcard_modal .md-idcard-sheet__bulk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 14px;
}

#idcard_modal .md-idcard-sheet__bulk .md-btn-contained {
  width: 100%;
  min-height: 40px;
  text-transform: none;
  box-shadow: none;
  gap: 6px;
  justify-content: center;
}

#idcard_modal .md-idcard-sheet__table-wrap {
  margin: 0;
  overflow: visible;
  border: none;
  background: transparent;
}

#idcard_modal .md-idcard-sheet .dataTables_wrapper {
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

#idcard_modal .md-idcard-dt-top {
  margin: 0 0 10px;
}

#idcard_modal .md-idcard-sheet .dataTables_wrapper .dataTables_filter {
  float: none;
  text-align: left;
  margin: 0;
  padding: 0;
}

#idcard_modal .md-idcard-sheet .dataTables_wrapper .dataTables_filter label {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 0;
}

#idcard_modal .md-idcard-sheet .dataTables_wrapper .dataTables_filter input {
  width: 100% !important;
  margin: 0 !important;
  padding: 11px 14px 11px 40px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  background: #f8f9fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 14px 50% / 16px no-repeat;
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
  color: #202124;
}

#idcard_modal .md-idcard-sheet .dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: #1a73e8;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.16);
}

#idcard_modal .md-idcard-dt-bottom {
  padding: 8px 0 0;
}

#idcard_modal .md-idcard-sheet .dataTables_wrapper .dataTables_paginate {
  float: none;
  text-align: center;
  padding: 4px 0 0;
}

#idcard_modal .md-idcard-sheet .dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  margin: 0 2px;
  padding: 0 8px;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: #5f6368 !important;
  font-family: "Jost", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
}

#idcard_modal .md-idcard-sheet .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #e8f0fe !important;
  color: #174ea6 !important;
}

#idcard_modal .md-idcard-sheet .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.35;
}

#idcard_modal .md-idcard-table {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

#idcard_modal .md-idcard-table thead {
  display: none;
}

#idcard_modal .md-idcard-table__th-check {
  width: 48px;
}

#idcard_modal .md-idcard-row {
  cursor: pointer;
  transition: background 0.15s ease;
}

#idcard_modal .md-idcard-row:hover td {
  background: #f8fafc;
}

#idcard_modal .md-idcard-row.is-selected td {
  background: #e8f0fe;
}

#idcard_modal .md-idcard-row td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  vertical-align: middle;
  background: #fff;
}

#idcard_modal .md-idcard-row:last-child td {
  border-bottom: none;
}

#idcard_modal .md-idcard-row__check {
  width: 48px;
  text-align: right;
  padding-left: 4px;
}

#idcard_modal .md-idcard-row__person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#idcard_modal .md-idcard-row__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #1565c0 0%, #42a5f5 100%);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: "Jost", sans-serif;
  line-height: 1;
}

#idcard_modal .md-idcard-row.is-selected .md-idcard-row__avatar {
  background: linear-gradient(135deg, #0d47a1 0%, #1a73e8 100%);
}

#idcard_modal .md-idcard-row__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#idcard_modal .md-idcard-row__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #202124;
  font-family: "Jost", sans-serif;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#idcard_modal .md-idcard-row__class {
  font-size: 0.75rem;
  font-weight: 500;
  color: #5f6368;
  font-family: "Jost", sans-serif;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#idcard_modal .md-idcard-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
}

#idcard_modal .md-idcard-check__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

#idcard_modal .md-idcard-check__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid rgba(15, 23, 42, 0.28);
  background: #fff;
  color: transparent;
  font-size: 0.6875rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#idcard_modal .md-idcard-check__input:checked + .md-idcard-check__box,
#idcard_modal .md-idcard-row.is-selected .md-idcard-check__box {
  background: #1a73e8;
  border-color: #1a73e8;
  color: #fff;
}

#idcard_modal .md-idcard-check__input:focus-visible + .md-idcard-check__box {
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  #idcard_modal .md-idcard-row,
  #idcard_modal .md-idcard-check__box {
    transition: none;
  }
}

/* ── zap-app: subject-list-page ── */
html.subject-list-app .header.header-fixed,
body.subject-list-app .header.header-fixed,
.is-webview.subject-list-app .header.header-fixed,
.is-webview body.subject-list-app .header.header-fixed,
html.subject-list-app .page-title-clear,
body.subject-list-app .page-title-clear {
  display: none !important;
}

html.subject-list-app body,
body.subject-list-app {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html.subject-list-app #page,
body.subject-list-app #page,
body.subject-list-app .md-page.subject-list-page,
body.subject-list-app .md-page.subject-list-page .subject-list-feed.page-content,
body.subject-list-app .md-page.subject-list-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.subject-list-page {
  --sub-primary: #1565c0;
  --sub-primary-dark: #0d47a1;
  --sub-primary-light: #42a5f5;
  --sub-soft: #e3f2fd;
  --sub-ink: #0d47a1;
  --sub-bg: #f5f7fb;
  --sub-cover: linear-gradient(135deg, #0d47a1 0%, #1565c0 48%, #42a5f5 100%);
  --md-soft-pill-bg: #e3f2fd;
  --md-soft-pill-primary: #1565c0;
  --md-soft-pill-ink: #0d47a1;
  --md-soft-pill-overline: rgba(21, 101, 192, 0.72);
  --md-soft-pill-border: rgba(21, 101, 192, 0.18);
  --md-subject-list-toolbar-offset: 168px;
  --mui-primary: var(--sub-primary);
  --mui-primary-dark: var(--sub-primary-dark);
  --mui-primary-light: var(--sub-primary-light);
  --mui-primary-container: var(--sub-soft);
  --mui-font: "Jost", sans-serif;
  --md-font: "Jost", sans-serif;
  font-family: "Jost", sans-serif !important;
  background: var(--sub-bg);
  min-height: 100vh;
}

.subject-list-page .page-title-clear { display: none !important; }

.subject-list-page .subject-list-feed.page-content,
.subject-list-page .page-content,
.subject-list-page .subject-list-feed.md-feed {
  max-width: 680px;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--md-subject-list-toolbar-offset, 168px) + 8px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 24px) !important;
  background: var(--sub-bg) !important;
  overflow: visible !important;
}

.subject-list-page .md-sub-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--mui-elevation-1) !important;
  background: #fff !important;
  transform: none !important;
  overflow: visible !important;
}

.subject-list-page .md-sub-toolbar .content,
.subject-list-page .md-sub-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 10px 12px 12px !important;
  box-sizing: border-box;
}

.subject-list-page .md-sub-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.subject-list-page .md-sub-toolbar__back,
.subject-list-page .md-sub-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #202124;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.subject-list-page .md-sub-toolbar__reload { margin-left: auto; }

.subject-list-page .md-sub-toolbar__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #202124;
  text-transform: none;
}

.subject-list-page .md-sub-toolbar__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
}

.subject-list-page .md-sub-toolbar__actions .md-btn-contained {
  width: 100%;
  min-height: 42px;
  text-transform: none;
  box-shadow: none;
  background: var(--sub-primary);
}

.subject-list-page .md-sub-hero {
  overflow: hidden;
  margin: 0 0 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--md-shape-lg);
}

.subject-list-page .md-sub-hero__band {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 16px;
  background: var(--sub-cover);
  color: #fff;
}

.subject-list-page .md-sub-hero__overline {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.subject-list-page .md-sub-hero__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
}

.subject-list-page .md-sub-hero__stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 8px 12px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  transform: rotate(-3deg);
  text-align: center;
}

.subject-list-page .md-sub-hero__stamp-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.subject-list-page .md-sub-hero__stamp-label {
  margin-top: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.subject-list-page .md-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.subject-list-page .md-search-field:focus-within {
  border-color: var(--sub-primary);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16);
}

.subject-list-page .md-search-field__icon { color: var(--md-text-secondary); }

.subject-list-page .md-search-field__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
}

.subject-list-page .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.subject-list-page .md-sub-list .dataTables_wrapper { width: 100%; }

.subject-list-page .md-sub-loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 8px;
}

.subject-list-page .md-sub-loading[hidden] {
  display: none !important;
}

.subject-list-page .md-sub-loading__banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #e3f2fd 0%, #fff 68%);
  border: 1px solid rgba(21, 101, 192, 0.14);
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.06);
}

.subject-list-page .md-sub-loading__pulse {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1565c0;
  animation: md-sub-loading-pulse 1.4s ease-out infinite;
}

.subject-list-page .md-sub-loading__pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(21, 101, 192, 0.35);
  animation: md-sub-loading-ring 1.4s ease-out infinite;
}

.subject-list-page .md-sub-loading__copy {
  min-width: 0;
}

.subject-list-page .md-sub-loading__title {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0d47a1;
}

.subject-list-page .md-sub-loading__text {
  margin: 2px 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #5f6368;
}

@keyframes md-sub-loading-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.85); opacity: 0.7; }
}

@keyframes md-sub-loading-ring {
  0% { transform: scale(0.7); opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 0; }
}

.subject-list-page .md-sub-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.subject-list-page .md-sub-skeleton__card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--md-shape-lg, 14px);
  background: #fff;
}

.subject-list-page .md-sub-skeleton__mark {
  min-height: 88px;
  background: linear-gradient(90deg, #e8eef5 25%, #f4f7fb 50%, #e8eef5 75%);
  background-size: 200% 100%;
  animation: md-sub-skeleton-shimmer 1.2s ease-in-out infinite;
}

.subject-list-page .md-sub-skeleton__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px 12px;
}

.subject-list-page .md-sub-skeleton__line {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8eef5 25%, #f4f7fb 50%, #e8eef5 75%);
  background-size: 200% 100%;
  animation: md-sub-skeleton-shimmer 1.2s ease-in-out infinite;
}

.subject-list-page .md-sub-skeleton__line--title {
  width: 62%;
  height: 14px;
}

.subject-list-page .md-sub-skeleton__line--meta {
  width: 38%;
}

.subject-list-page .md-sub-skeleton__line--btn {
  width: 88px;
  height: 28px;
  margin-top: 4px;
  border-radius: 10px;
}

.subject-list-page .md-sub-skeleton__card:nth-child(2) .md-sub-skeleton__line,
.subject-list-page .md-sub-skeleton__card:nth-child(2) .md-sub-skeleton__mark {
  animation-delay: 0.12s;
}

.subject-list-page .md-sub-skeleton__card:nth-child(3) .md-sub-skeleton__line,
.subject-list-page .md-sub-skeleton__card:nth-child(3) .md-sub-skeleton__mark {
  animation-delay: 0.24s;
}

@keyframes md-sub-skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.subject-list-page .md-sub-list table#student.is-booting,
.subject-list-page .md-sub-list #student_wrapper.is-booting,
.subject-list-page .md-sub-list:has(table#student.is-booting) #student_wrapper {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .subject-list-page .md-sub-loading__pulse,
  .subject-list-page .md-sub-loading__pulse::after {
    animation: none;
  }

  .subject-list-page .md-sub-skeleton__mark,
  .subject-list-page .md-sub-skeleton__line {
    animation: none;
    background: #e8eef5;
  }
}

.subject-list-page .md-sub-list .dataTables_wrapper .dataTables_length,
.subject-list-page .md-sub-list .dataTables_wrapper .dataTables_filter,
.subject-list-page .md-sub-list .dataTables_wrapper .dataTables_info,
.subject-list-page .md-sub-list .dataTables_wrapper .dataTables_paginate,
.subject-list-page .md-sub-list .dataTables_processing {
  display: none !important;
}

.subject-list-page .md-sub-list table#student {
  display: block !important;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.subject-list-page .md-sub-list table#student thead { display: none; }

.subject-list-page .md-sub-list table#student tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.subject-list-page .md-sub-list table#student tbody tr,
.subject-list-page .md-sub-list table#student tbody td {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.subject-list-page .md-sub-card {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--md-shape-lg);
  background: #fff;
}

.subject-list-page .md-sub-card__body {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
}

.subject-list-page .md-sub-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  background: var(--sub-cover);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
}

.subject-list-page .md-sub-card__content {
  min-width: 0;
  padding: 12px 12px 10px;
}

.subject-list-page .md-sub-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.subject-list-page .md-sub-card__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--md-text-primary);
}

.subject-list-page .md-sub-card__meta {
  margin: 0 0 10px;
  font-size: 0.75rem;
  color: var(--md-text-secondary);
}

.subject-list-page .md-sub-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.subject-list-page .md-sub-card__actions .md-btn-contained {
  width: 100%;
  min-height: 34px;
  text-transform: none;
  box-shadow: none;
  font-size: 0.75rem;
}

.subject-list-page .md-sub-card__delete {
  background: #ffebee !important;
  color: var(--md-error) !important;
}

/* Create subject — full-screen Material sheet */
#create_subject_modal.subject-list-sheet {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 1300 !important;
  transform: none !important;
}

#create_subject_modal.subject-list-sheet.menu-active {
  display: flex !important;
  flex-direction: column !important;
}

#create_subject_modal.subject-list-sheet .md-timeline-sheet__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;
  background: #fff;
  font-family: "Jost", sans-serif;
  overflow: hidden;
}

#create_subject_modal.subject-list-sheet .md-timeline-sheet__handle {
  display: none;
}

#create_subject_modal.subject-list-sheet .md-timeline-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 8px 12px 20px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

#create_subject_modal.subject-list-sheet .md-timeline-sheet__heading {
  min-width: 0;
  flex: 1 1 auto;
}

#create_subject_modal.subject-list-sheet .md-timeline-sheet__overline {
  display: block;
  margin: 0 0 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1565c0;
}

#create_subject_modal.subject-list-sheet .md-timeline-sheet__title {
  margin: 0 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #202124 !important;
  text-transform: none !important;
  line-height: 1.25;
}

#create_subject_modal.subject-list-sheet .md-timeline-sheet__lead {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  color: #5f6368;
}

#create_subject_modal.subject-list-sheet .md-timeline-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #5f6368;
  cursor: pointer;
  flex-shrink: 0;
}

#create_subject_modal.subject-list-sheet .md-timeline-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px 16px 8px;
  -webkit-overflow-scrolling: touch;
  background: #f3f5f8;
}

#create_subject_modal.subject-list-sheet .md-timeline-sheet__footer {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

#create_subject_modal.subject-list-sheet .md-timeline-sheet__footer .md-btn-contained {
  width: 100%;
  min-height: 44px;
  text-transform: none;
  box-shadow: none;
}

#create_subject_modal.subject-list-sheet .md-admit-section__overline {
  color: #1565c0;
}

#create_subject_modal.subject-list-sheet .select2-container,
#fullEmptyModal:has(.md-subject-form) .select2-container {
  width: 100% !important;
}

body:has(#create_subject_modal.menu-active) .select2-container--open .select2-dropdown,
body:has(#fullEmptyModal.menu-active) .select2-container--open .select2-dropdown {
  z-index: 2100 !important;
}

body.subject-list-app #fullEmptyModal.md-timeline-sheet .md-timeline-sheet__overline {
  color: #1565c0;
}

body.subject-list-app #fullEmptyModal:has(.md-subject-form) .md-admit-section__overline {
  color: #1565c0;
}

/* ── zap-app: googlemeetings-page (Pattern B + blue) ── */
html.googlemeetings-app .header.header-fixed,
body.googlemeetings-app .header.header-fixed,
.is-webview.googlemeetings-app .header.header-fixed,
.is-webview body.googlemeetings-app .header.header-fixed,
html.googlemeetings-app .page-title-clear,
body.googlemeetings-app .page-title-clear {
  display: none !important;
}

html.googlemeetings-app body,
body.googlemeetings-app {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html.googlemeetings-app #page,
body.googlemeetings-app #page,
body.googlemeetings-app .md-page.googlemeetings-page,
body.googlemeetings-app .md-page.googlemeetings-page .googlemeetings-feed.page-content,
body.googlemeetings-app .md-page.googlemeetings-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.googlemeetings-page {
  --gm-primary: #1565c0;
  --gm-primary-dark: #0d47a1;
  --gm-primary-light: #1e88e5;
  --gm-soft: #e3f2fd;
  --gm-ink: #0d47a1;
  --gm-bg: #f5f8fc;
  --gm-cover: linear-gradient(160deg, #0d47a1 0%, #1565c0 45%, #1e88e5 100%);
  --md-soft-pill-bg: #e3f2fd;
  --md-soft-pill-primary: #1565c0;
  --md-soft-pill-ink: #0d47a1;
  --md-soft-pill-overline: rgba(13, 71, 161, 0.72);
  --md-soft-pill-border: rgba(21, 101, 192, 0.2);
  --md-gm-toolbar-offset: 168px;
  --mui-primary: var(--gm-primary);
  --mui-primary-dark: var(--gm-primary-dark);
  --mui-primary-light: var(--gm-primary-light);
  --mui-primary-container: var(--gm-soft);
  --mui-font: "Jost", sans-serif;
  --md-font: "Jost", sans-serif;
  font-family: "Jost", sans-serif !important;
  background: var(--gm-bg);
  min-height: 100vh;
}

.googlemeetings-page .page-title-clear { display: none !important; }

.googlemeetings-page .googlemeetings-feed.page-content,
.googlemeetings-page .page-content,
.googlemeetings-page .googlemeetings-feed.md-feed {
  max-width: 680px;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--md-gm-toolbar-offset, 168px) + 8px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 24px) !important;
  background: var(--gm-bg) !important;
  overflow: visible !important;
}

.googlemeetings-page .md-gm-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(21, 101, 192, 0.12) !important;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.06), 0 4px 12px rgba(13, 71, 161, 0.04) !important;
  background: linear-gradient(180deg, #e8f1fb 0%, #ffffff 64%) !important;
  transform: none !important;
  overflow: visible !important;
}

.googlemeetings-page .md-gm-toolbar .content,
.googlemeetings-page .md-gm-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 10px 12px 12px !important;
  box-sizing: border-box;
}

.googlemeetings-page .md-gm-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.googlemeetings-page .md-gm-toolbar__back,
.googlemeetings-page .md-gm-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--gm-ink);
  border: 1px solid rgba(21, 101, 192, 0.14);
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.googlemeetings-page .md-gm-toolbar__reload { margin-left: auto; }

.googlemeetings-page .md-gm-toolbar__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--gm-ink);
  text-transform: none;
}

.googlemeetings-page .md-gm-toolbar__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--md-soft-pill-bg);
  border: 1px solid var(--md-soft-pill-border);
}

.googlemeetings-page .md-gm-toolbar__chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gm-cover);
  color: #fff;
  flex-shrink: 0;
}

.googlemeetings-page .md-gm-toolbar__chip-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.googlemeetings-page .md-gm-toolbar__chip-overline {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-soft-pill-overline);
}

.googlemeetings-page .md-gm-toolbar__chip-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--md-soft-pill-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.googlemeetings-page .md-gm-toolbar__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.googlemeetings-page .md-gm-toolbar__actions--solo {
  grid-template-columns: 1fr;
}

.googlemeetings-page .md-gm-toolbar__actions .md-btn-contained {
  width: 100%;
  min-height: 42px;
  text-transform: none;
  box-shadow: none;
}

.googlemeetings-page .md-gm-toolbar__actions .md-btn-contained:not(.md-btn-contained--tonal) {
  background: var(--gm-primary);
}

.googlemeetings-page .md-gm-toolbar__actions .md-btn-contained--tonal {
  background: var(--gm-soft);
  color: var(--gm-ink);
}

.googlemeetings-page .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.googlemeetings-page .md-search-field,
.googlemeetings-page .md-search-field--gm {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(21, 101, 192, 0.14);
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.05);
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.googlemeetings-page .md-search-field:focus-within,
.googlemeetings-page .md-search-field--gm:focus-within {
  border-color: rgba(21, 101, 192, 0.4);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.14);
}

.googlemeetings-page .md-search-field__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gm-soft);
  color: var(--gm-primary);
  font-size: 0.875rem;
}

.googlemeetings-page .md-search-field__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  color: #202124;
}

.googlemeetings-page .md-search-field__input::placeholder {
  color: #5f6368;
  font-weight: 500;
}

.googlemeetings-page .md-gm-list .dataTables_wrapper { width: 100%; }

.googlemeetings-page .md-gm-list .dataTables_wrapper .dataTables_length,
.googlemeetings-page .md-gm-list .dataTables_wrapper .dataTables_filter,
.googlemeetings-page .md-gm-list .dataTables_wrapper .dataTables_info,
.googlemeetings-page .md-gm-list .dataTables_wrapper .dataTables_paginate,
.googlemeetings-page .md-gm-list .dataTables_processing {
  display: none !important;
}

.googlemeetings-page .md-gm-list table#student {
  display: block !important;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.googlemeetings-page .md-gm-list table#student thead { display: none; }

.googlemeetings-page .md-gm-list table#student tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.googlemeetings-page .md-gm-list table#student tbody tr,
.googlemeetings-page .md-gm-list table#student tbody td {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.googlemeetings-page .md-gm-list table#student.is-booting,
.googlemeetings-page .md-gm-list #student_wrapper.is-booting,
.googlemeetings-page .md-gm-list:has(table#student.is-booting) #student_wrapper {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.googlemeetings-page .md-gm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 36px 24px 32px;
  border: 1px solid rgba(21, 101, 192, 0.14);
  border-radius: 20px;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(30, 136, 229, 0.16), transparent 58%),
    radial-gradient(ellipse 55% 40% at 100% 100%, rgba(13, 71, 161, 0.06), transparent 55%),
    linear-gradient(180deg, #f3f8ff 0%, #ffffff 55%, #fafcff 100%);
  box-shadow:
    0 1px 2px rgba(13, 71, 161, 0.04),
    0 12px 28px rgba(21, 101, 192, 0.07);
  text-align: center;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.googlemeetings-page .md-gm-empty::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #0d47a1 0%, #1565c0 45%, #1e88e5 100%);
  opacity: 0.9;
}

.googlemeetings-page .md-gm-empty__mark {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 0 8px;
  flex-shrink: 0;
}

.googlemeetings-page .md-gm-empty__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(227, 242, 253, 0.95);
  border: 1px solid rgba(21, 101, 192, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation: md-gm-empty-pulse 3s ease-in-out infinite;
}

.googlemeetings-page .md-gm-empty__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--gm-cover);
  color: #fff;
  font-size: 1.125rem;
  box-shadow: 0 6px 16px rgba(13, 71, 161, 0.28);
  transform: translate(-50%, -50%);
}

.googlemeetings-page .md-gm-empty__title {
  margin: 4px 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gm-ink);
}

.googlemeetings-page .md-gm-empty__text {
  margin: 0;
  max-width: 280px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #5f6368;
}

.googlemeetings-page .md-gm-empty__cta {
  margin-top: 10px;
  min-height: 40px;
  padding: 0 18px;
  background: var(--gm-primary) !important;
  box-shadow: none;
  text-transform: none;
  font-size: 0.8125rem;
  gap: 8px;
}

.googlemeetings-page .md-gm-empty--loading {
  border-style: solid;
  border-color: rgba(21, 101, 192, 0.12);
  padding: 28px 20px 24px;
}

.googlemeetings-page .md-gm-empty__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(21, 101, 192, 0.18);
  border-top-color: var(--gm-primary);
  border-radius: 50%;
  animation: md-gm-spin 0.7s linear infinite;
}

.googlemeetings-page .md-gm-loading {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 4px 0 8px;
}

.googlemeetings-page .md-gm-loading .md-gm-empty {
  margin: 0;
}

.googlemeetings-page .md-gm-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.googlemeetings-page .md-gm-skeleton__card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  overflow: hidden;
  border: 1px solid rgba(21, 101, 192, 0.12);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.05);
}

.googlemeetings-page .md-gm-skeleton__mark {
  grid-row: 1;
  grid-column: 1;
  width: 48px;
  min-height: 88px;
  background: linear-gradient(90deg, #e3f2fd 25%, #f3f8ff 50%, #e3f2fd 75%);
  background-size: 200% 100%;
  animation: md-gm-skeleton-shimmer 1.2s ease-in-out infinite;
}

.googlemeetings-page .md-gm-skeleton__copy {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px 12px;
  min-width: 0;
}

.googlemeetings-page .md-gm-skeleton__line {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8eef5 25%, #f4f7fb 50%, #e8eef5 75%);
  background-size: 200% 100%;
  animation: md-gm-skeleton-shimmer 1.2s ease-in-out infinite;
}

.googlemeetings-page .md-gm-skeleton__line--title {
  width: 68%;
  height: 14px;
}

.googlemeetings-page .md-gm-skeleton__line--chip {
  width: 52px;
  height: 18px;
  border-radius: 999px;
}

.googlemeetings-page .md-gm-skeleton__line--meta {
  width: 46%;
}

.googlemeetings-page .md-gm-skeleton__line--schedule {
  width: 88%;
  height: 36px;
  border-radius: 10px;
  margin-top: 2px;
}

.googlemeetings-page .md-gm-skeleton__actions {
  grid-row: 2;
  grid-column: 1 / -1;
  display: block;
  height: 44px;
  border-top: 1px solid rgba(21, 101, 192, 0.1);
  background: linear-gradient(90deg, #f5f8fc 25%, #fafcff 50%, #f5f8fc 75%);
  background-size: 200% 100%;
  animation: md-gm-skeleton-shimmer 1.2s ease-in-out infinite;
}

.googlemeetings-page .md-gm-skeleton__card:nth-child(2) .md-gm-skeleton__line,
.googlemeetings-page .md-gm-skeleton__card:nth-child(2) .md-gm-skeleton__mark,
.googlemeetings-page .md-gm-skeleton__card:nth-child(2) .md-gm-skeleton__actions {
  animation-delay: 0.12s;
}

.googlemeetings-page .md-gm-skeleton__card:nth-child(3) .md-gm-skeleton__line,
.googlemeetings-page .md-gm-skeleton__card:nth-child(3) .md-gm-skeleton__mark,
.googlemeetings-page .md-gm-skeleton__card:nth-child(3) .md-gm-skeleton__actions {
  animation-delay: 0.24s;
}

@keyframes md-gm-skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@keyframes md-gm-spin {
  to { transform: rotate(360deg); }
}

@keyframes md-gm-empty-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: 0.88; }
}

@media (prefers-reduced-motion: reduce) {
  .googlemeetings-page .md-gm-empty__spinner {
    animation: none;
    border-top-color: rgba(21, 101, 192, 0.45);
  }

  .googlemeetings-page .md-gm-empty__ring,
  .googlemeetings-page .md-gm-skeleton__mark,
  .googlemeetings-page .md-gm-skeleton__line,
  .googlemeetings-page .md-gm-skeleton__actions {
    animation: none;
  }
}

.googlemeetings-page .md-gm-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(21, 101, 192, 0.12);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.05);
}

.googlemeetings-page .md-gm-card--live {
  border-color: rgba(21, 101, 192, 0.28);
}

.googlemeetings-page .md-gm-card__body {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  min-width: 0;
}

.googlemeetings-page .md-gm-card__mark {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px 8px 12px;
  background: var(--gm-cover);
  color: #fff;
  font-size: 1.05rem;
}

.googlemeetings-page .md-gm-card--ended .md-gm-card__mark {
  background: linear-gradient(160deg, #607d8b 0%, #78909c 100%);
}

.googlemeetings-page .md-gm-card__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px 12px 10px;
}

.googlemeetings-page .md-gm-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.googlemeetings-page .md-gm-card__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #202124;
  text-transform: none;
}

.googlemeetings-page .md-gm-card__status.md-chip {
  flex-shrink: 0;
  margin: 0;
}

.googlemeetings-page .md-gm-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.googlemeetings-page .md-gm-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gm-soft);
  color: var(--gm-ink);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}

.googlemeetings-page .md-gm-card__tag > i {
  font-size: 0.6875rem;
  opacity: 0.8;
}

.googlemeetings-page .md-gm-card__tag--subject {
  background: #f1f3f4;
  color: #3c4043;
}

.googlemeetings-page .md-gm-card__schedule {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  margin-top: 2px;
  padding: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef5ff 0%, #f8fafc 55%, #fff 100%);
  border: 1px solid rgba(21, 101, 192, 0.12);
  overflow: hidden;
}

.googlemeetings-page .md-gm-card--ended .md-gm-card__schedule {
  background: linear-gradient(135deg, #f1f3f4 0%, #f8f9fa 55%, #fff 100%);
  border-color: rgba(15, 23, 42, 0.08);
}

.googlemeetings-page .md-gm-card__when {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 12px 12px 12px 12px;
}

.googlemeetings-page .md-gm-card__when-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e3f2fd;
  color: #1565c0;
  font-size: 0.6875rem;
}

.googlemeetings-page .md-gm-card__when--end .md-gm-card__when-icon {
  background: #fce8e6;
  color: #c62828;
}

.googlemeetings-page .md-gm-card--ended .md-gm-card__when-icon {
  background: #e8eaed;
  color: #5f6368;
}

.googlemeetings-page .md-gm-card__when-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.googlemeetings-page .md-gm-card__when-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #80868b;
}

.googlemeetings-page .md-gm-card__when-date {
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.3;
  color: #202124;
  word-break: break-word;
}

.googlemeetings-page .md-gm-card__when-time {
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1565c0;
  font-variant-numeric: tabular-nums;
}

.googlemeetings-page .md-gm-card--ended .md-gm-card__when-time {
  color: #5f6368;
}

.googlemeetings-page .md-gm-card__rail {
  width: 1px;
  margin: 12px 0;
  background: rgba(21, 101, 192, 0.16);
  justify-self: center;
}

.googlemeetings-page .md-gm-card--ended .md-gm-card__rail {
  background: rgba(15, 23, 42, 0.1);
}

.googlemeetings-page .md-gm-card__when-value {
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.35;
  color: #202124;
  word-break: break-word;
}

@media (max-width: 380px) {
  .googlemeetings-page .md-gm-card__schedule {
    grid-template-columns: 1fr;
  }

  .googlemeetings-page .md-gm-card__rail {
    width: auto;
    height: 1px;
    margin: 0 12px;
  }

  .googlemeetings-page .md-gm-card__when {
    padding: 10px 12px;
  }
}

.googlemeetings-page .md-gm-card__desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.7);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.googlemeetings-page .md-gm-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(21, 101, 192, 0.1);
  background: #fafcff;
}

.googlemeetings-page .md-gm-card__actions--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.googlemeetings-page .md-gm-card__actions--solo {
  grid-template-columns: 1fr;
}

.googlemeetings-page .md-gm-card__actions .md-btn-contained {
  width: 100%;
  min-height: 36px;
  text-transform: none;
  box-shadow: none;
  font-size: 0.75rem;
  justify-content: center;
}

.googlemeetings-page .md-gm-card__join {
  background: var(--gm-primary) !important;
}

.googlemeetings-page .md-gm-card__delete {
  background: #ffebee !important;
  color: #c62828 !important;
}

.googlemeetings-page .md-gm-filter-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 8px;
}

/* Create meeting sheet */
#create_googlemeet_modal.googlemeetings-sheet {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 1300 !important;
  transform: none !important;
  display: none !important;
}

#create_googlemeet_modal.googlemeetings-sheet.menu-active {
  display: flex !important;
  flex-direction: column !important;
}

#create_googlemeet_modal.googlemeetings-sheet .md-timeline-sheet__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;
  background: #fff;
  font-family: "Jost", sans-serif;
  overflow: hidden;
}

#create_googlemeet_modal.googlemeetings-sheet .md-timeline-sheet__handle { display: none; }

#create_googlemeet_modal.googlemeetings-sheet .md-timeline-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 10px 14px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, #e3f2fd 0%, #ffffff 72%);
}

#create_googlemeet_modal.googlemeetings-sheet .md-timeline-sheet__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

#create_googlemeet_modal.googlemeetings-sheet .md-timeline-sheet__overline {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gm-primary, #1565c0);
}

#create_googlemeet_modal.googlemeetings-sheet .md-timeline-sheet__title {
  margin: 0 !important;
  font-family: "Jost", sans-serif !important;
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.03em;
  color: #202124 !important;
  text-transform: none !important;
}

#create_googlemeet_modal.googlemeetings-sheet .md-timeline-sheet__lead {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #5f6368;
}

#create_googlemeet_modal.googlemeetings-sheet .md-timeline-sheet__close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: #f1f3f4 !important;
  color: #5f6368 !important;
  cursor: pointer;
}

#create_googlemeet_modal.googlemeetings-sheet .md-timeline-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 8px;
  background: #f3f5f8;
}

#create_googlemeet_modal.googlemeetings-sheet .md-timeline-sheet__footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex-shrink: 0;
  padding: 12px 16px calc(12px + var(--md-sheet-footer-safe, 0px));
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

#create_googlemeet_modal.googlemeetings-sheet .md-timeline-sheet__footer .md-btn-contained {
  width: 100%;
  min-height: 44px;
  text-transform: none;
  box-shadow: none;
}

#create_googlemeet_modal.googlemeetings-sheet .md-admit-section__overline,
body.googlemeetings-app #fullEmptyModal:has(.md-gm-form) .md-admit-section__overline,
body.googlemeetings-app #fullEmptyModal.md-timeline-sheet .md-timeline-sheet__overline {
  color: #00897b;
}

#fullEmptyModal:has(.md-gm-form) .md-timeline-sheet__body.modal-div {
  padding: 14px 14px 8px;
  background: #f3f5f8;
}

#fullEmptyModal:has(.md-gm-form) .md-timeline-sheet__footer.modal-footer {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-top: auto;
  padding: 12px 16px calc(12px + var(--md-sheet-footer-safe, 0px));
  background: #fff;
}

#fullEmptyModal:has(.md-gm-form) .md-timeline-sheet__footer .md-sl-form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

#fullEmptyModal:has(.md-gm-form) .md-timeline-sheet__footer .md-btn-contained {
  width: 100%;
}

body:has(#create_googlemeet_modal.menu-active) > .dropdown-menu,
body:has(#create_googlemeet_modal.menu-active) .bootstrap-select .dropdown-menu {
  z-index: 2100 !important;
}

@media (max-width: 420px) {
  .googlemeetings-page .md-gm-card__actions--3 {
    grid-template-columns: 1fr;
  }
}

/* ── Assign student to subclass sheet (MUI-inspired) ── */
#assign_student_to_subclass_modal.md-sl-assign-sheet {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 1300 !important;
  transform: none !important;
}

#assign_student_to_subclass_modal.md-sl-assign-sheet.menu-active {
  display: flex !important;
  flex-direction: column !important;
}

#assign_student_to_subclass_modal.md-sl-assign-sheet .md-timeline-sheet__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;
  background: #fff;
  font-family: "Jost", sans-serif;
  overflow: hidden;
}

#assign_student_to_subclass_modal.md-sl-assign-sheet .md-timeline-sheet__handle {
  display: none;
}

#assign_student_to_subclass_modal.md-sl-assign-sheet .md-timeline-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: calc(10px + var(--app-safe-top, 0px) + env(safe-area-inset-top, 0px)) 8px 14px 20px;
  border-bottom: 1px solid rgba(21, 101, 192, 0.12);
  background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
}

#assign_student_to_subclass_modal.md-sl-assign-sheet .md-timeline-sheet__overline {
  display: block;
  margin: 0 0 2px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1565c0;
}

#assign_student_to_subclass_modal.md-sl-assign-sheet .md-timeline-sheet__title {
  margin: 0 !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #0d47a1 !important;
  text-transform: none !important;
}

#assign_student_to_subclass_modal.md-sl-assign-sheet .md-timeline-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(21, 101, 192, 0.08);
  color: #1565c0;
  cursor: pointer;
}

#assign_student_to_subclass_modal.md-sl-assign-sheet .md-timeline-sheet__loader {
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

#assign_student_to_subclass_modal.md-sl-assign-sheet .md-timeline-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 14px 14px 10px;
  -webkit-overflow-scrolling: touch;
  background: #f5f7fa;
}

#assign_student_to_subclass_modal.md-sl-assign-sheet .md-timeline-sheet__footer {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 10px;
  padding: 12px 16px calc(12px + var(--md-sheet-footer-safe, 0px));
  border-top: 1px solid rgba(21, 101, 192, 0.1);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
}

#assign_student_to_subclass_modal.md-sl-assign-sheet .md-timeline-sheet__footer .md-btn-contained {
  width: 100%;
  min-height: 46px;
  text-transform: none;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 12px;
  box-shadow: none;
}

#assign_student_to_subclass_modal.md-sl-assign-sheet .md-timeline-sheet__footer .update_student_subclass_button {
  background: #1565c0;
  box-shadow: none;
}

.md-assign {
  max-width: 560px;
  margin: 0 auto;
  font-family: "Jost", sans-serif;
}

.md-assign--simple {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.md-assign__context {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(21, 101, 192, 0.16);
  background: #e8f0fe;
}

.md-assign__context-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(13, 71, 161, 0.7);
  line-height: 1.2;
}

.md-assign__context-name {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0d47a1;
  line-height: 1.25;
}

.md-assign-lead {
  margin: 0 0 10px;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #5f6368;
}

.md-assign-lead strong {
  color: #0d47a1;
  font-weight: 700;
}

.md-assign-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 4px;
  border-radius: 12px;
  background: #eef1f4;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.md-assign-tabs__tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #5f6368;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.md-assign-tabs__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.md-assign-tabs__label {
  line-height: 1.2;
  font-weight: 800;
  color: inherit;
}

.md-assign-tabs__hint {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #80868b;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-assign-tabs__tab.is-active,
.md-assign-tabs__tab.active,
.md-assign-tabs__tab[aria-selected="true"] {
  background: #fff;
  color: #0d47a1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.md-assign-tabs__tab.is-active .md-assign-tabs__hint,
.md-assign-tabs__tab.active .md-assign-tabs__hint,
.md-assign-tabs__tab[aria-selected="true"] .md-assign-tabs__hint {
  color: rgba(13, 71, 161, 0.65);
}

.md-assign-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: #5f6368;
  font-size: 0.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.md-assign-tabs__tab.is-active .md-assign-tabs__count,
.md-assign-tabs__tab.active .md-assign-tabs__count,
.md-assign-tabs__tab[aria-selected="true"] .md-assign-tabs__count {
  background: #e3f2fd;
  color: #1565c0;
}

.md-assign-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 10px;
}

.md-assign-toolbar__btn {
  width: 100%;
  min-height: 40px;
  text-transform: none;
  box-shadow: none;
  background: #e8f0fe;
  color: #1557b0;
  border-radius: 10px;
  font-weight: 700;
}

.md-assign-toolbar__btn--muted {
  background: #eef1f4;
  color: #5f6368;
}

.md-assign-panel[hidden] {
  display: none !important;
}

.md-assign-table {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0 8px;
  background: transparent !important;
}

.md-assign-table thead {
  display: none;
}

.md-assign-table tbody tr,
.md-assign-table tbody td {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

#assign_student_to_subclass_modal .md-assign-table tbody td.dataTables_empty {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
}

.md-assign-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  padding: 32px 20px;
  border: 1px dashed rgba(21, 101, 192, 0.22);
  border-radius: 18px;
  background: linear-gradient(180deg, #e8f1fc 0%, #fff 70%);
  text-align: center;
}

.md-assign-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  color: #1565c0;
  font-size: 1.3rem;
  box-shadow: 0 6px 16px rgba(13, 71, 161, 0.16);
}

.md-assign-empty__title {
  margin: 4px 0 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.md-assign-empty__text {
  margin: 0;
  max-width: 280px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--md-text-secondary, rgba(0, 0, 0, 0.6));
}

.md-assign-table .dataTables_wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

#assign_student_to_subclass_modal .dataTables_wrapper {
  max-width: 100%;
}

#assign_student_to_subclass_modal table.dataTable,
#assign_student_to_subclass_modal .md-assign-table {
  table-layout: fixed;
  width: 100% !important;
}

#assign_student_to_subclass_modal .md-assign-table tbody td {
  max-width: 100%;
}

.md-assign-out {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "name"
    "field";
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.md-assign-out__avatar {
  display: none;
}

.md-assign-out__name {
  grid-area: name;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-assign-out__field {
  grid-area: field;
  width: 100%;
  max-width: 100%;
  margin: 0;
  min-width: 0;
}

.md-assign-out__select {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 42px !important;
  padding: 8px 32px 8px 12px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(21, 101, 192, 0.18) !important;
  background: #f7faff !important;
  font-size: 0.875rem !important;
  font-weight: 700;
  color: #0d47a1 !important;
  text-align: left;
  box-sizing: border-box;
}

@media (min-width: 420px) {
  .md-assign-out {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 148px);
    grid-template-areas: "name field";
    row-gap: 0;
  }

  .md-assign-out__select {
    min-height: 40px !important;
    font-size: 0.8125rem !important;
  }
}

#assign_student_to_subclass_modal .dataTables_filter {
  float: none !important;
  text-align: left !important;
  margin: 0 0 12px !important;
  width: 100%;
}

#assign_student_to_subclass_modal .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0 14px;
  min-height: 46px;
  border: 1px solid rgba(21, 101, 192, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  font-size: 0;
  color: transparent;
}

#assign_student_to_subclass_modal .dataTables_filter input {
  flex: 1;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem !important;
  color: #202124;
  outline: none;
}

#assign_student_to_subclass_modal .dataTables_filter label:focus-within {
  border-color: #1565c0;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16);
}

.md-assign-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 13px 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.md-assign-row:hover {
  border-color: rgba(21, 101, 192, 0.22);
  box-shadow: 0 6px 16px rgba(21, 101, 192, 0.1);
}

.md-assign-row:has(.md-assign-row__input:checked) {
  border-color: rgba(21, 101, 192, 0.35);
  background: linear-gradient(135deg, #f5f9ff 0%, #eaf2ff 100%);
  box-shadow: 0 8px 18px rgba(21, 101, 192, 0.14);
}

.md-assign-row__check {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

.md-assign-row__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.md-assign-row__box {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(0, 0, 0, 0.28);
  border-radius: 7px;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.md-assign-row__box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.6);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.md-assign-row__input:checked + .md-assign-row__box {
  border-color: #1565c0;
  background: #1565c0;
  transform: scale(1.04);
}

.md-assign-row__input:checked + .md-assign-row__box::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.md-assign-row__input:focus-visible + .md-assign-row__box {
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.2);
}

.md-assign-row__copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.md-assign-row__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.md-assign-row__from {
  font-size: 0.75rem;
  font-weight: 600;
  color: #5f6368;
  line-height: 1.3;
}

.md-assign-row__from--warn {
  color: #c5221f;
}

.md-assign-row .md-chip {
  flex-shrink: 0;
  font-size: 0.6875rem;
  border-radius: 999px;
}


@media (prefers-reduced-motion: reduce) {
  .md-assign-tabs__tab,
  .md-assign-row,
  .md-assign-row__box {
    transition: none;
  }
}

#assign_student_to_subclass_modal .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── zap-app: staff-list-page (Pattern A roster) ── */
html.staff-list-app .header.header-fixed,
body.staff-list-app .header.header-fixed,
.is-webview.staff-list-app .header.header-fixed,
.is-webview body.staff-list-app .header.header-fixed,
html.staff-list-app .page-title-clear,
body.staff-list-app .page-title-clear {
  display: none !important;
}

html.staff-list-app body,
body.staff-list-app {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html.staff-list-app #page,
body.staff-list-app #page,
body.staff-list-app .md-page.staff-list-page,
body.staff-list-app .md-page.staff-list-page .staff-list-feed.page-content,
body.staff-list-app .md-page.staff-list-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.staff-list-page {
  --stf-primary: #1565c0;
  --stf-primary-dark: #0d47a1;
  --stf-soft: #e3f2fd;
  --stf-ink: #0d47a1;
  --stf-bg: #f5f7fb;
  --stf-toolbar-teal: #1565c0;
  --dash-primary: #1565c0;
  --md-soft-pill-bg: #e3f2fd;
  --md-soft-pill-primary: #1565c0;
  --md-soft-pill-ink: #0d47a1;
  --md-soft-pill-overline: rgba(21, 101, 192, 0.72);
  --md-soft-pill-border: rgba(21, 101, 192, 0.18);
  --md-staff-list-toolbar-offset: 168px;
  --mui-primary: var(--stf-primary);
  --mui-font: "Jost", sans-serif;
  --md-font: "Jost", sans-serif;
  font-family: "Jost", sans-serif !important;
  background: var(--stf-bg);
  min-height: 100vh;
}

.staff-list-page .page-title-clear { display: none !important; }

.staff-list-page .staff-list-feed.page-content,
.staff-list-page .page-content,
.staff-list-page .staff-list-feed.md-feed {
  max-width: 680px;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--md-staff-list-toolbar-offset, 168px) + 8px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 24px) !important;
  background: var(--stf-bg) !important;
  overflow: visible !important;
}

.staff-list-page .md-stf-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--mui-elevation-1) !important;
  background: #fff !important;
  transform: none !important;
  overflow: visible !important;
}

.staff-list-page .md-stf-toolbar .content,
.staff-list-page .md-stf-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 10px 12px 12px !important;
  box-sizing: border-box;
}

.staff-list-page .md-stf-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.staff-list-page .md-stf-toolbar__back,
.staff-list-page .md-stf-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #202124;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.staff-list-page .md-stf-toolbar__reload { margin-left: auto; }

.staff-list-page .md-stf-toolbar__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #202124;
  text-transform: none;
}

.staff-list-page .md-stf-toolbar__actions {
  display: grid;
  gap: 8px;
  width: 100%;
}

.staff-list-page .md-stf-toolbar__actions--3 { grid-template-columns: 1fr 1fr 1fr; }
.staff-list-page .md-stf-toolbar__actions--2 { grid-template-columns: 1fr 1fr; }

.staff-list-page .md-stf-toolbar__actions .md-btn-contained {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  gap: 8px;
  border: 1px solid #c0c4c8;
  border-radius: 10px;
  background: #d2e3fc;
  color: #0d47a1;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  box-shadow: none;
}

.staff-list-page .md-stf-toolbar__actions .md-btn-contained:hover,
.staff-list-page .md-stf-toolbar__actions .md-btn-contained:focus-visible {
  background: #c4daf9;
  border-color: #c0c4c8;
  color: #0d47a1;
  box-shadow: none;
}

.staff-list-page .md-stf-toolbar__actions .md-btn-contained--success {
  background: #e8f0fe;
  color: #1557b0;
}

.staff-list-page .md-stf-toolbar__actions .md-btn-contained--success:hover,
.staff-list-page .md-stf-toolbar__actions .md-btn-contained--success:focus-visible {
  background: #dce8fb;
  color: #0d47a1;
}

.staff-list-page .md-stf-toolbar__actions .md-btn-contained--tonal {
  background: #bbdefb;
  color: #0d47a1;
}

.staff-list-page .md-stf-toolbar__actions .md-btn-contained--tonal:hover,
.staff-list-page .md-stf-toolbar__actions .md-btn-contained--tonal:focus-visible {
  background: #a6d4f9;
  color: #0d47a1;
}

.staff-list-page .md-stf-dash.md-class-dash {
  margin: 0 0 12px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(21, 101, 192, 0.14);
  border-radius: var(--md-shape-lg);
  background: #fff;
  box-shadow: none;
}

.staff-list-page .md-stf-dash__band {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 16px;
  background: linear-gradient(135deg, #0d47a1 0%, #1565c0 48%, #42a5f5 100%);
  color: #fff;
}

.staff-list-page .md-stf-dash__overline {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.staff-list-page .md-stf-dash__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.25;
}

.staff-list-page .md-stf-dash__stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 8px 12px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  transform: rotate(-3deg);
  text-align: center;
}

.staff-list-page .md-stf-dash__stamp-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.staff-list-page .md-stf-dash__stamp-label {
  margin-top: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.staff-list-page .md-stf-dash__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

.staff-list-page .md-stf-dash__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0;
}

.staff-list-page .md-stf-dash__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 72px;
  padding: 12px 8px;
  border-radius: 12px;
  background: #f5f7fb;
  border: 1px solid rgba(15, 23, 42, 0.06);
  text-align: center;
}

.staff-list-page .md-stf-dash__stat--accent {
  background: #e8f5e9;
  border-color: rgba(46, 125, 50, 0.14);
}

.staff-list-page .md-stf-dash__stat-value {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--stf-ink);
}

.staff-list-page .md-stf-dash__stat--accent .md-stf-dash__stat-value {
  color: var(--md-success);
}

.staff-list-page .md-stf-dash__stat-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-text-secondary);
}

.staff-list-page .md-stf-dash__banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #e3f2fd;
  border: 1px solid rgba(21, 101, 192, 0.2);
}

.staff-list-page .md-stf-dash__banner--info {
  background: linear-gradient(180deg, #e3f2fd 0%, #f0f7fc 100%);
  border-color: rgba(25, 118, 210, 0.18);
}

.staff-list-page .md-stf-dash__banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--md-info);
  font-size: 1.125rem;
  box-shadow: 0 1px 2px rgba(2, 136, 209, 0.16);
}

.staff-list-page .md-stf-dash__banner-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.staff-list-page .md-stf-dash__banner-title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: #01579b;
}

.staff-list-page .md-stf-dash__banner-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.staff-list-page .md-stf-dash__banner-chips .md-chip {
  height: 22px;
  padding: 0 8px;
  font-size: 0.625rem;
  background: #fff;
  color: var(--md-info);
  border: 1px solid rgba(2, 136, 209, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .staff-list-page .md-stf-dash__stamp {
    transform: none;
  }
}

.staff-list-page .md-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.staff-list-page .md-search-field:focus-within {
  border-color: var(--stf-primary);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16);
}

.staff-list-page .md-search-field__icon { color: var(--md-text-secondary); }

.staff-list-page .md-search-field__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
}

.staff-list-page .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.staff-list-page .md-stf-list .dataTables_wrapper { width: 100%; }

.staff-list-page .md-stf-list table#staff tbody td.dataTables_empty {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
}

.staff-list-page .md-stf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  padding: 28px 20px;
  border: 1px dashed rgba(21, 101, 192, 0.22);
  border-radius: var(--md-shape-lg);
  background: linear-gradient(180deg, #e3f2fd 0%, #fff 72%);
  text-align: center;
}

.staff-list-page .md-stf-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--stf-primary);
  font-size: 1.25rem;
  box-shadow: 0 2px 6px rgba(13, 71, 161, 0.16);
}

.staff-list-page .md-stf-empty__title {
  margin: 4px 0 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--stf-ink);
}

.staff-list-page .md-stf-empty__text {
  margin: 0;
  max-width: 280px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--md-text-secondary);
}

.staff-list-page .md-stf-empty--loading {
  border-style: solid;
  border-color: rgba(21, 101, 192, 0.12);
}

.staff-list-page .md-stf-empty__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(21, 101, 192, 0.18);
  border-top-color: var(--stf-primary);
  border-radius: 50%;
  animation: md-sl-spin 0.7s linear infinite;
}

@keyframes md-sl-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .staff-list-page .md-stf-empty__spinner {
    animation: none;
    border-top-color: rgba(21, 101, 192, 0.45);
  }
}

.staff-list-page .md-stf-list .dataTables_wrapper .dataTables_length,
.staff-list-page .md-stf-list .dataTables_wrapper .dataTables_filter,
.staff-list-page .md-stf-list .dataTables_wrapper .dataTables_info,
.staff-list-page .md-stf-list .dataTables_processing {
  display: none !important;
}

.staff-list-page .md-stf-list .dataTables_wrapper .dataTables_paginate {
  margin-top: 12px !important;
  text-align: center;
}

.staff-list-page .md-stf-list table#staff {
  display: block !important;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.staff-list-page .md-stf-list table#staff thead { display: none; }

.staff-list-page .md-stf-list table#staff tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.staff-list-page .md-stf-list table#staff tbody tr,
.staff-list-page .md-stf-list table#staff tbody td {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
  .staff-list-page .md-animate-in,
  .student-class-page .md-animate-in,
  .subject-list-page .md-animate-in {
    animation: none !important;
  }
}

/* ── zap-app: about-page ── */
html.about-app .header.header-fixed,
body.about-app .header.header-fixed,
html.about-app .page-title-clear,
body.about-app .page-title-clear {
  display: none !important;
}

html.about-app body,
body.about-app {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html.about-app #page,
body.about-app #page,
body.about-app .md-page.about-page,
body.about-app .md-page.about-page .about-feed.page-content,
body.about-app .md-page.about-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.about-page {
  --about-primary: #1565c0;
  --about-primary-dark: #0d47a1;
  --about-soft: #e3f2fd;
  --about-ink: #0d47a1;
  --about-bg: #f5f7fb;
  --about-cover: linear-gradient(160deg, #0d47a1 0%, #1565c0 55%, #42a5f5 100%);
  --md-about-toolbar-offset: 140px;
  --md-font: "Jost", sans-serif;
  font-family: "Jost", sans-serif !important;
  background: var(--about-bg);
  min-height: 100vh;
}

.about-page .page-title-clear { display: none !important; }

.about-page .about-feed.page-content,
.about-page .page-content,
.about-page .about-feed.md-feed {
  max-width: 680px;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--md-about-toolbar-offset, 140px) + 8px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 24px) !important;
  background: var(--about-bg) !important;
  overflow: visible !important;
}

.about-page .md-about-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--mui-elevation-1) !important;
  background: #fff !important;
  transform: none !important;
  overflow: visible !important;
}

.about-page .md-about-toolbar .content,
.about-page .md-about-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 10px 12px 12px !important;
  box-sizing: border-box;
}

.about-page .md-about-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.about-page .md-about-toolbar__back,
.about-page .md-about-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #202124;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.about-page .md-about-toolbar__reload { margin-left: auto; }

.about-page .md-about-toolbar__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #202124;
  text-transform: none;
}

.about-page .md-about-toolbar__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--about-soft);
  border: 1px solid rgba(21, 101, 192, 0.16);
}

.about-page .md-about-toolbar__chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--about-primary);
  flex-shrink: 0;
}

.about-page .md-about-toolbar__chip-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.about-page .md-about-toolbar__chip-overline {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(21, 101, 192, 0.72);
}

.about-page .md-about-toolbar__chip-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--about-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.about-page .md-about-hero {
  overflow: hidden;
  margin: 0 0 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--md-shape-lg);
  background: #fff;
}

.about-page .md-about-hero__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 168px;
  padding: 28px 20px 12px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.22), transparent 55%),
    var(--about-cover);
}

.about-page .md-about-hero__logo {
  width: 112px;
  height: 112px;
  object-fit: contain;
  border-radius: 20px;
  background: #fff;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(13, 71, 161, 0.28);
}

.about-page .md-about-hero__band {
  padding: 16px 16px 18px;
}

.about-page .md-about-hero__overline {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-text-secondary);
}

.about-page .md-about-hero__title {
  margin: 0 0 8px;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--about-ink);
}

.about-page .md-about-hero__address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--md-text-secondary);
}

.about-page .md-about-hero__address i {
  margin-top: 3px;
  color: var(--about-primary);
}

.about-page .md-about-body {
  margin: 0 0 12px;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--md-shape-lg);
  background: #fff;
}

.about-page .md-about-body__head { margin-bottom: 12px; }

.about-page .md-about-body__overline {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-text-secondary);
}

.about-page .md-about-body__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #202124;
}

.about-page .md-about-body__content {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--md-text-primary);
}

.about-page .md-about-body__content p:first-child { margin-top: 0; }
.about-page .md-about-body__content p:last-child { margin-bottom: 0; }

.about-page .md-about-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  padding: 28px 20px;
  border: 1px dashed rgba(21, 101, 192, 0.22);
  border-radius: var(--md-shape-lg);
  background: linear-gradient(180deg, #e3f2fd 0%, #fff 72%);
  text-align: center;
}

.about-page .md-about-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--about-primary);
  font-size: 1.25rem;
  box-shadow: 0 2px 6px rgba(13, 71, 161, 0.16);
}

.about-page .md-about-empty__title {
  margin: 4px 0 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--about-ink);
}

.about-page .md-about-empty__text {
  margin: 0;
  max-width: 280px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--md-text-secondary);
}

/* ── zap-app: contact-page ── */
html.contact-app .header.header-fixed,
body.contact-app .header.header-fixed,
html.contact-app .page-title-clear,
body.contact-app .page-title-clear {
  display: none !important;
}

html.contact-app body,
body.contact-app {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html.contact-app #page,
body.contact-app #page,
body.contact-app .md-page.contact-page,
body.contact-app .md-page.contact-page .contact-feed.page-content,
body.contact-app .md-page.contact-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.contact-page {
  --contact-primary: #1565c0;
  --contact-primary-dark: #0d47a1;
  --contact-soft: #e3f2fd;
  --contact-ink: #0d47a1;
  --contact-bg: #f5f7fb;
  --contact-cover: linear-gradient(135deg, #0d47a1 0%, #1565c0 48%, #42a5f5 100%);
  --md-contact-toolbar-offset: 140px;
  --md-font: "Jost", sans-serif;
  font-family: "Jost", sans-serif !important;
  background: var(--contact-bg);
  min-height: 100vh;
}

.contact-page .page-title-clear { display: none !important; }

.contact-page .contact-feed.page-content,
.contact-page .page-content,
.contact-page .contact-feed.md-feed {
  max-width: 680px;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--md-contact-toolbar-offset, 140px) + 8px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 24px) !important;
  background: var(--contact-bg) !important;
  overflow: visible !important;
}

.contact-page .md-contact-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--mui-elevation-1) !important;
  background: #fff !important;
  transform: none !important;
  overflow: visible !important;
}

.contact-page .md-contact-toolbar .content,
.contact-page .md-contact-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 10px 12px 12px !important;
  box-sizing: border-box;
}

.contact-page .md-contact-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.contact-page .md-contact-toolbar__back,
.contact-page .md-contact-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #202124;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.contact-page .md-contact-toolbar__reload { margin-left: auto; }

.contact-page .md-contact-toolbar__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #202124;
  text-transform: none;
}

.contact-page .md-contact-toolbar__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--contact-soft);
  border: 1px solid rgba(21, 101, 192, 0.16);
}

.contact-page .md-contact-toolbar__chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--contact-primary);
  flex-shrink: 0;
}

.contact-page .md-contact-toolbar__chip-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.contact-page .md-contact-toolbar__chip-overline {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(21, 101, 192, 0.72);
}

.contact-page .md-contact-toolbar__chip-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--contact-ink);
}

.contact-page .md-contact-hero {
  overflow: hidden;
  margin: 0 0 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--md-shape-lg);
}

.contact-page .md-contact-hero__band {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 16px;
  background: var(--contact-cover);
  color: #fff;
}

.contact-page .md-contact-hero__overline {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.contact-page .md-contact-hero__title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: #fff;
}

.contact-page .md-contact-hero__address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
}

.contact-page .md-contact-hero__stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 8px 12px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  transform: rotate(-3deg);
  text-align: center;
  flex-shrink: 0;
}

.contact-page .md-contact-hero__stamp-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.contact-page .md-contact-hero__stamp-label {
  margin-top: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-page .md-contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-page .md-contact-card {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--md-shape-lg);
  background: #fff;
}

.contact-page .md-contact-card__body {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
}

.contact-page .md-contact-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--contact-cover);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
}

.contact-page .md-contact-card__content {
  min-width: 0;
  padding: 12px 12px 10px;
}

.contact-page .md-contact-card__role {
  margin: 0 0 2px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--contact-primary);
}

.contact-page .md-contact-card__name {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #202124;
}

.contact-page .md-contact-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 10px;
}

.contact-page .md-contact-card__meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--md-text-secondary);
  word-break: break-word;
}

.contact-page .md-contact-card__meta-item i {
  width: 14px;
  text-align: center;
  color: var(--contact-primary);
}

.contact-page .md-contact-card__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.contact-page .md-contact-card__actions .md-btn-contained {
  width: 100%;
  min-height: 36px;
  text-transform: none;
  box-shadow: none;
  font-size: 0.75rem;
  gap: 6px;
}

.contact-page .md-contact-card__actions .md-btn-contained:not(.md-btn-contained--tonal):not(.md-btn-contained--success) {
  background: var(--contact-primary);
}

.contact-page .md-contact-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  padding: 28px 20px;
  border: 1px dashed rgba(21, 101, 192, 0.22);
  border-radius: var(--md-shape-lg);
  background: linear-gradient(180deg, #e3f2fd 0%, #fff 72%);
  text-align: center;
}

.contact-page .md-contact-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--contact-primary);
  font-size: 1.25rem;
  box-shadow: 0 2px 6px rgba(13, 71, 161, 0.16);
}

.contact-page .md-contact-empty__title {
  margin: 4px 0 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--contact-ink);
}

.contact-page .md-contact-empty__text {
  margin: 0;
  max-width: 280px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--md-text-secondary);
}

@media (max-width: 380px) {
  .contact-page .md-contact-card__actions {
    grid-template-columns: 1fr;
  }
}

/* ── zap-app: app-settings-page ── */
html.app-settings-app .header.header-fixed,
body.app-settings-app .header.header-fixed,
.header.header-fixed:has(+ .md-page.app-settings-page),
html.app-settings-app .page-title-clear,
body.app-settings-app .page-title-clear {
  display: none !important;
}

html.app-settings-app body,
body.app-settings-app {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html.app-settings-app #page,
body.app-settings-app #page,
body.app-settings-app .md-page.app-settings-page,
body.app-settings-app .md-page.app-settings-page .app-settings-feed.page-content,
body.app-settings-app .md-page.app-settings-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.app-settings-page {
  --app-settings-primary: #1976d2;
  --app-settings-primary-dark: #1565c0;
  --app-settings-soft: rgba(25, 118, 210, 0.08);
  --app-settings-ink: #0d47a1;
  --app-settings-bg: #f5f5f5;
  --md-app-settings-toolbar-offset: 64px;
  background: var(--app-settings-bg);
  min-height: 100%;
  font-family: var(--md-font, "Jost", Roboto, "Helvetica", "Arial", sans-serif);
}

.app-settings-page .page-title-clear { display: none !important; }

.app-settings-page .app-settings-feed.page-content,
.app-settings-page .page-content,
.app-settings-page .app-settings-feed.md-feed {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px !important;
  padding-right: 12px !important;
  padding-top: calc(var(--md-app-settings-toolbar-offset, 64px) + 12px) !important;
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

/* Fixed toolbar — same shell as student-class md-sc-toolbar */
.app-settings-page .md-app-settings-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--mui-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)) !important;
  background: #fff !important;
  transform: none !important;
  overflow: visible !important;
}

.app-settings-page .md-app-settings-toolbar .content,
.app-settings-page .md-app-settings-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 10px 12px 12px !important;
  box-sizing: border-box;
}

.app-settings-page .md-app-settings-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.app-settings-page .md-app-settings-toolbar__back,
.app-settings-page .md-app-settings-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #202124;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.app-settings-page .md-app-settings-toolbar__back:hover,
.app-settings-page .md-app-settings-toolbar__reload:hover,
.app-settings-page .md-app-settings-toolbar__back:focus-visible,
.app-settings-page .md-app-settings-toolbar__reload:focus-visible {
  background: #e8eaed;
  color: #202124;
  outline: none;
}

.app-settings-page .md-app-settings-toolbar__reload { margin-left: auto; }

.app-settings-page .md-app-settings-toolbar__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #202124;
  text-transform: none;
}

/* Notifications alerts card (summary + list) */
.app-settings-page .md-mui-paper.md-app-settings-alerts {
  margin: 0 0 12px;
  padding: 0;
  overflow: hidden;
}

.app-settings-page .md-app-settings-alerts__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 0;
}

.app-settings-page .md-app-settings-alerts__intro {
  min-width: 0;
  flex: 1;
}

.app-settings-page .md-app-settings-alerts__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.87);
}

.app-settings-page .md-app-settings-alerts__hint {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.6);
}

.app-settings-page .md-app-settings-alerts__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #e8f0fe;
  color: #0d47a1;
  flex-shrink: 0;
  text-align: center;
}

.app-settings-page .md-app-settings-alerts__badge-value {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.app-settings-page .md-app-settings-alerts__badge-label {
  margin-top: 2px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(13, 71, 161, 0.7);
}

.app-settings-page .md-app-settings-alerts__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 10px;
}

.app-settings-page .md-app-settings-alerts__chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  background: #f1f3f4;
  color: #3c4043;
  font-size: 0.75rem;
  font-weight: 600;
}

.app-settings-page .md-app-settings-alerts__meta-text {
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.55);
}

.app-settings-page .md-app-settings-alerts__progress {
  height: 3px;
  margin: 0 16px 4px;
  border-radius: 999px;
  background: rgba(21, 101, 192, 0.12);
  overflow: hidden;
}

.app-settings-page .md-app-settings-alerts__progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1565c0;
  transition: width 0.25s ease;
}

.app-settings-page .md-app-settings-alerts #app-settings-user-list .md-mui-list {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* MUI Paper + List + Switch (Material settings pattern via CSS) */
.app-settings-page .md-mui-paper {
  margin: 0 0 12px;
  padding: 0;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--md-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06));
  overflow: hidden;
}

.app-settings-page .md-mui-paper__header {
  padding: 14px 16px 8px;
}

.app-settings-page .md-mui-subheader {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--md-primary, #1976d2);
}

.app-settings-page .md-mui-subheader--warn {
  color: #ed6c02;
}

.app-settings-page .md-mui-paper__hint {
  margin: 2px 0 0;
  font-size: 0.75rem;
  line-height: 1.43;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.6);
}

.app-settings-page .md-mui-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-settings-page .md-mui-list-item {
  margin: 0;
  padding: 0;
}

.app-settings-page .md-mui-list-item + .md-mui-list-item {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.app-settings-page .md-mui-list-item.is-saving {
  opacity: 0.65;
  pointer-events: none;
}

.app-settings-page .md-mui-list-item__btn {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;
}

.app-settings-page .md-mui-list-item__btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

.app-settings-page .md-mui-list-item__btn:active,
.app-settings-page .md-mui-list-item__btn:focus-within {
  background: rgba(25, 118, 210, 0.08);
}

.app-settings-page .md-mui-list-item__btn--link {
  align-items: center;
}

.app-settings-page .md-mui-list-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(25, 118, 210, 0.08);
  color: #1976d2;
  flex-shrink: 0;
  font-size: 1.125rem;
}

.app-settings-page .md-mui-list-item__icon--warn {
  background: rgba(237, 108, 2, 0.1);
  color: #ed6c02;
}

.app-settings-page .md-mui-list-item__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 4px;
}

.app-settings-page .md-mui-list-item__primary {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.00938em;
  color: rgba(0, 0, 0, 0.87);
}

.app-settings-page .md-mui-list-item__secondary {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: 0.01071em;
  color: rgba(0, 0, 0, 0.6);
}

.app-settings-page .md-mui-list-item__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.38);
  font-size: 0.875rem;
  flex-shrink: 0;
}

/* MUI Switch */
.app-settings-page .md-mui-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 58px;
  height: 38px;
  margin: -9px -12px -9px 0;
}

.app-settings-page .md-mui-switch__input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.app-settings-page .md-mui-switch__track {
  position: relative;
  display: block;
  width: 34px;
  height: 14px;
  margin: 0 auto;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.38);
  opacity: 0.5;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.app-settings-page .md-mui-switch__thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: #fafafa;
  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.app-settings-page .md-mui-switch__input:checked + .md-mui-switch__track {
  background: #1976d2;
  opacity: 0.5;
}

.app-settings-page .md-mui-switch__input:checked + .md-mui-switch__track .md-mui-switch__thumb {
  background: #1976d2;
  transform: translateX(14px);
}

.app-settings-page .md-mui-switch__input:focus-visible + .md-mui-switch__track .md-mui-switch__thumb {
  box-shadow: 0 0 0 8px rgba(25, 118, 210, 0.16), 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
}

.app-settings-page .md-mui-switch__input:disabled + .md-mui-switch__track {
  opacity: 0.3;
}

.app-settings-page .md-mui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 32px 20px;
}

.app-settings-page .md-mui-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(25, 118, 210, 0.08);
  color: #1976d2;
  font-size: 1.5rem;
}

.app-settings-page .md-mui-empty__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
}

.app-settings-page .md-mui-empty__text {
  margin: 0;
  max-width: 280px;
  font-size: 0.875rem;
  line-height: 1.43;
  color: rgba(0, 0, 0, 0.6);
}

/* ── zap-app: attendance-class-page + attendance-subject-page ── */
html.attendance-class-app .header.header-fixed,
body.attendance-class-app .header.header-fixed,
html.attendance-subject-app .header.header-fixed,
body.attendance-subject-app .header.header-fixed,
html.attendance-class-app .page-title-clear,
body.attendance-class-app .page-title-clear,
html.attendance-subject-app .page-title-clear,
body.attendance-subject-app .page-title-clear {
  display: none !important;
}

html.attendance-class-app body,
body.attendance-class-app,
html.attendance-subject-app body,
body.attendance-subject-app {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html.attendance-class-app #page,
body.attendance-class-app #page,
body.attendance-class-app .md-page.attendance-class-page,
body.attendance-class-app .md-page.attendance-class-page .attendance-class-feed.page-content,
body.attendance-class-app .md-page.attendance-class-page .page-content,
html.attendance-subject-app #page,
body.attendance-subject-app #page,
body.attendance-subject-app .md-page.attendance-subject-page,
body.attendance-subject-app .md-page.attendance-subject-page .attendance-subject-feed.page-content,
body.attendance-subject-app .md-page.attendance-subject-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.attendance-class-page,
.attendance-subject-page {
  --att-primary: #1565c0;
  --att-primary-dark: #0d47a1;
  --att-soft: #e3f2fd;
  --att-ink: #0d47a1;
  --att-bg: #f5f7fb;
  --att-cover: linear-gradient(135deg, #0d47a1 0%, #1565c0 48%, #42a5f5 100%);
  --md-att-toolbar-offset: 140px;
  --md-soft-pill-bg: #e3f2fd;
  --md-soft-pill-primary: #1565c0;
  --md-soft-pill-ink: #0d47a1;
  --md-soft-pill-border: rgba(21, 101, 192, 0.18);
  --md-soft-pill-overline: rgba(21, 101, 192, 0.72);
  --md-font: "Jost", sans-serif;
  font-family: "Jost", sans-serif !important;
  background: var(--att-bg);
  min-height: 100vh;
}

.attendance-class-page .page-title-clear,
.attendance-subject-page .page-title-clear { display: none !important; }

.attendance-class-page .attendance-class-feed.page-content,
.attendance-class-page .page-content,
.attendance-class-page .attendance-class-feed.md-feed,
.attendance-subject-page .attendance-subject-feed.page-content,
.attendance-subject-page .page-content,
.attendance-subject-page .attendance-subject-feed.md-feed {
  max-width: 680px;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--md-att-toolbar-offset, 140px) + 8px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 24px) !important;
  background: var(--att-bg) !important;
  overflow: visible !important;
}

.attendance-class-page .md-att-toolbar.card-filter,
.attendance-subject-page .md-att-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--mui-elevation-1) !important;
  background: #fff !important;
  transform: none !important;
  overflow: visible !important;
}

.attendance-class-page .md-att-toolbar .content,
.attendance-class-page .md-att-toolbar__inner,
.attendance-subject-page .md-att-toolbar .content,
.attendance-subject-page .md-att-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 10px 12px 12px !important;
  box-sizing: border-box;
}

.attendance-class-page .md-att-toolbar__brand,
.attendance-subject-page .md-att-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.attendance-class-page .md-att-toolbar__back,
.attendance-class-page .md-att-toolbar__reload,
.attendance-subject-page .md-att-toolbar__back,
.attendance-subject-page .md-att-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #202124;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.attendance-class-page .md-att-toolbar__reload,
.attendance-subject-page .md-att-toolbar__reload { margin-left: auto; }

.attendance-class-page .md-att-toolbar__title,
.attendance-subject-page .md-att-toolbar__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #202124;
  text-transform: none;
}

/* MUI Chip (soft filled + avatar) — session / term context */
.attendance-class-page .md-att-toolbar__context,
.attendance-subject-page .md-att-toolbar__context {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.attendance-class-page .md-att-toolbar__chip,
.attendance-subject-page .md-att-toolbar__chip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: auto;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 14px 8px 8px;
  box-sizing: border-box;
  border: 1px solid rgba(21, 101, 192, 0.18);
  border-radius: 16px;
  background: #e3f2fd;
  color: var(--att-primary, #1565c0);
  font-family: var(--mui-font, "Jost", sans-serif);
  box-shadow: none;
  text-transform: none;
  pointer-events: none;
}

.attendance-class-page .md-att-toolbar__chip--term,
.attendance-subject-page .md-att-toolbar__chip--term {
  background: #e8eaf6;
  border-color: rgba(63, 81, 181, 0.2);
  color: #3949ab;
}

.attendance-class-page .md-att-toolbar__chip-avatar,
.attendance-subject-page .md-att-toolbar__chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--att-primary, #1565c0);
  color: #fff;
  font-size: 0.8125rem;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.28);
}

.attendance-class-page .md-att-toolbar__chip--term .md-att-toolbar__chip-avatar,
.attendance-subject-page .md-att-toolbar__chip--term .md-att-toolbar__chip-avatar {
  background: #3949ab;
  box-shadow: 0 1px 2px rgba(57, 73, 171, 0.28);
}

.attendance-class-page .md-att-toolbar__chip-label,
.attendance-subject-page .md-att-toolbar__chip-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}

.attendance-class-page .md-att-toolbar__chip-overline,
.attendance-subject-page .md-att-toolbar__chip-overline {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: inherit;
  opacity: 0.85;
}

.attendance-class-page .md-att-toolbar__chip-text,
.attendance-subject-page .md-att-toolbar__chip-text {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--mui-on-surface, rgba(0, 0, 0, 0.87));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attendance-class-page .md-att-hero,
.attendance-subject-page .md-att-hero {
  overflow: hidden;
  margin: 0 0 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--md-shape-lg);
  background: #fff;
}

.attendance-class-page .md-att-hero__band,
.attendance-subject-page .md-att-hero__band {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 16px;
  background: var(--att-cover);
  color: #fff;
}

.attendance-class-page .md-att-hero__overline,
.attendance-subject-page .md-att-hero__overline {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.attendance-class-page .md-att-hero__title,
.attendance-subject-page .md-att-hero__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
}

.attendance-class-page .md-att-hero__stamp,
.attendance-subject-page .md-att-hero__stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 8px 12px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  transform: rotate(-3deg);
  text-align: center;
}

.attendance-class-page .md-att-hero__stamp-value,
.attendance-subject-page .md-att-hero__stamp-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.attendance-class-page .md-att-hero__stamp-label,
.attendance-subject-page .md-att-hero__stamp-label {
  margin-top: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.attendance-class-page .md-att-hero__pills,
.attendance-subject-page .md-att-hero__pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
  background: #fff;
}

.attendance-class-page .md-att-hero__pill,
.attendance-subject-page .md-att-hero__pill {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--att-soft);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.attendance-class-page .md-att-hero__pill i,
.attendance-subject-page .md-att-hero__pill i {
  color: var(--att-primary);
  flex-shrink: 0;
}

.attendance-class-page .md-att-hero__pill-copy,
.attendance-subject-page .md-att-hero__pill-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.attendance-class-page .md-att-hero__pill-label,
.attendance-subject-page .md-att-hero__pill-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-text-secondary);
}

.attendance-class-page .md-att-hero__pill-value,
.attendance-subject-page .md-att-hero__pill-value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--att-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attendance-class-page .md-search-field,
.attendance-subject-page .md-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.attendance-class-page .md-search-field:focus-within,
.attendance-subject-page .md-search-field:focus-within {
  border-color: var(--att-primary);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16);
}

.attendance-class-page .md-search-field__icon,
.attendance-subject-page .md-search-field__icon { color: var(--md-text-secondary); }

.attendance-class-page .md-search-field__input,
.attendance-subject-page .md-search-field__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
}

.attendance-class-page .visually-hidden,
.attendance-subject-page .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.attendance-class-page .md-att-list .dataTables_wrapper,
.attendance-subject-page .md-att-list .dataTables_wrapper { width: 100%; }

.attendance-class-page .md-att-list .dataTables_wrapper .dataTables_length,
.attendance-class-page .md-att-list .dataTables_wrapper .dataTables_filter,
.attendance-class-page .md-att-list .dataTables_wrapper .dataTables_info,
.attendance-class-page .md-att-list .dataTables_processing,
.attendance-subject-page .md-att-list .dataTables_wrapper .dataTables_length,
.attendance-subject-page .md-att-list .dataTables_wrapper .dataTables_filter,
.attendance-subject-page .md-att-list .dataTables_wrapper .dataTables_info,
.attendance-subject-page .md-att-list .dataTables_processing {
  display: none !important;
}

.attendance-class-page .md-att-loading,
.attendance-subject-page .md-att-loading {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 4px 0 8px;
}

.attendance-class-page .md-att-loading__banner,
.attendance-subject-page .md-att-loading__banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(21, 101, 192, 0.14);
  background:
    linear-gradient(135deg, rgba(21, 101, 192, 0.08) 0%, transparent 48%),
    linear-gradient(180deg, #eef5ff 0%, #ffffff 100%);
  box-shadow: 0 6px 18px rgba(15, 28, 46, 0.04);
}

.attendance-class-page .md-att-loading__pulse,
.attendance-subject-page .md-att-loading__pulse {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #1565c0;
  box-shadow: 0 0 0 0 rgba(21, 101, 192, 0.45);
  animation: md-att-loading-pulse 1.4s ease-out infinite;
}

.attendance-class-page .md-att-loading__pulse::after,
.attendance-subject-page .md-att-loading__pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(21, 101, 192, 0.28);
  animation: md-att-loading-ring 1.4s ease-out infinite;
}

.attendance-class-page .md-att-loading__copy,
.attendance-subject-page .md-att-loading__copy {
  min-width: 0;
}

.attendance-class-page .md-att-loading__title,
.attendance-subject-page .md-att-loading__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f1c2e;
}

.attendance-class-page .md-att-loading__text,
.attendance-subject-page .md-att-loading__text {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #5a6a7a;
}

@keyframes md-att-loading-pulse {
  0% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(21, 101, 192, 0.4); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(21, 101, 192, 0); }
  100% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(21, 101, 192, 0); }
}

@keyframes md-att-loading-ring {
  0% { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}

.attendance-class-page .md-att-skeleton,
.attendance-subject-page .md-att-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.attendance-class-page .md-att-skeleton__card,
.attendance-subject-page .md-att-skeleton__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

.attendance-class-page .md-att-skeleton__line,
.attendance-subject-page .md-att-skeleton__line {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8eef7 0%, #f5f8fc 50%, #e8eef7 100%);
  background-size: 200% 100%;
  animation: md-att-skeleton-shimmer 1.2s ease-in-out infinite;
}

.attendance-class-page .md-att-skeleton__line--title,
.attendance-subject-page .md-att-skeleton__line--title {
  width: 46%;
  height: 16px;
}

.attendance-class-page .md-att-skeleton__line--label,
.attendance-subject-page .md-att-skeleton__line--label {
  width: 58%;
}

.attendance-class-page .md-att-skeleton__line--btn,
.attendance-subject-page .md-att-skeleton__line--btn {
  width: 42%;
  height: 36px;
  border-radius: 10px;
  margin-top: 2px;
}

.attendance-class-page .md-att-skeleton__metrics,
.attendance-subject-page .md-att-skeleton__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.attendance-class-page .md-att-skeleton__metric,
.attendance-subject-page .md-att-skeleton__metric {
  display: block;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(90deg, #e8eef7 0%, #f5f8fc 50%, #e8eef7 100%);
  background-size: 200% 100%;
  animation: md-att-skeleton-shimmer 1.2s ease-in-out infinite;
}

@keyframes md-att-skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.attendance-class-page .md-att-list table#student.is-booting,
.attendance-subject-page .md-att-list table#student.is-booting {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.attendance-class-page .md-att-empty,
.attendance-subject-page .md-att-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  padding: 28px 20px;
  border: 1px dashed rgba(21, 101, 192, 0.22);
  border-radius: var(--md-shape-lg, 12px);
  background: linear-gradient(180deg, #e3f2fd 0%, #fff 72%);
  text-align: center;
}

.attendance-class-page .md-att-empty__icon,
.attendance-subject-page .md-att-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: #1565c0;
  font-size: 1.25rem;
  box-shadow: 0 2px 6px rgba(13, 71, 161, 0.16);
}

.attendance-class-page .md-att-empty__title,
.attendance-subject-page .md-att-empty__title {
  margin: 4px 0 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.attendance-class-page .md-att-empty__text,
.attendance-subject-page .md-att-empty__text {
  margin: 0;
  max-width: 280px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--md-text-secondary, #5f6368);
}

@media (prefers-reduced-motion: reduce) {
  .attendance-class-page .md-att-loading__pulse,
  .attendance-subject-page .md-att-loading__pulse,
  .attendance-class-page .md-att-loading__pulse::after,
  .attendance-subject-page .md-att-loading__pulse::after,
  .attendance-class-page .md-att-skeleton__line,
  .attendance-subject-page .md-att-skeleton__line,
  .attendance-class-page .md-att-skeleton__metric,
  .attendance-subject-page .md-att-skeleton__metric {
    animation: none;
  }
}

.attendance-class-page .md-att-list table#student,
.attendance-subject-page .md-att-list table#student {
  display: block !important;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.attendance-class-page .md-att-list table#student thead,
.attendance-subject-page .md-att-list table#student thead { display: none; }

.attendance-class-page .md-att-list table#student tbody,
.attendance-subject-page .md-att-list table#student tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.attendance-class-page .md-att-list table#student tbody tr,
.attendance-class-page .md-att-list table#student tbody td,
.attendance-subject-page .md-att-list table#student tbody tr,
.attendance-subject-page .md-att-list table#student tbody td {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.attendance-class-page .md-att-card,
.attendance-subject-page .md-att-card {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--md-shape-lg);
  background: #fff;
}

.attendance-class-page .md-att-card__content,
.attendance-subject-page .md-att-card__content {
  min-width: 0;
  padding: 12px 12px 10px;
}

.attendance-class-page .md-att-card__head,
.attendance-subject-page .md-att-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.attendance-class-page .md-att-card__title,
.attendance-subject-page .md-att-card__title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}

.attendance-class-page .md-att-card__badge.md-chip,
.attendance-subject-page .md-att-card__badge.md-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: auto;
  min-height: 28px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--att-soft);
  color: var(--att-ink);
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attendance-subject-page .md-att-card__subject.md-chip {
  height: auto;
  min-height: 24px;
  padding: 4px 10px;
  background: #fff;
  color: var(--att-primary);
  border: 1px solid rgba(21, 101, 192, 0.22);
  font-size: 0.75rem;
  font-weight: 600;
}

.attendance-class-page .md-att-card__metrics,
.attendance-subject-page .md-att-card__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 10px;
  border: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12));
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
}

.attendance-class-page .md-att-metric,
.attendance-subject-page .md-att-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  text-align: center;
  border-right: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12));
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12));
}

.attendance-class-page .md-att-metric:nth-child(2n),
.attendance-subject-page .md-att-metric:nth-child(2n) { border-right: none; }

.attendance-class-page .md-att-metric--wide,
.attendance-subject-page .md-att-metric--wide {
  grid-column: 1 / -1;
  border-right: none;
  border-bottom: none;
}

.attendance-class-page .md-att-metric__value,
.attendance-subject-page .md-att-metric__value {
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #202124;
}

.attendance-class-page .md-att-metric__value--warn,
.attendance-subject-page .md-att-metric__value--warn { color: var(--md-error); }

.attendance-class-page .md-att-metric__label,
.attendance-subject-page .md-att-metric__label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-text-secondary);
}

.attendance-class-page .md-att-card__actions,
.attendance-subject-page .md-att-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.attendance-class-page .md-att-card__actions .md-btn-contained,
.attendance-subject-page .md-att-card__actions .md-btn-contained {
  width: 100%;
  min-height: 36px;
  text-transform: none;
  box-shadow: none;
}

.attendance-class-page .md-att-card__actions .md-btn-contained:not(.md-btn-contained--tonal),
.attendance-subject-page .md-att-card__actions .md-btn-contained:not(.md-btn-contained--tonal) {
  background: var(--att-primary);
}

.attendance-subject-page .md-att-card__actions .md-att-btn--view.is-processing {
  pointer-events: none;
  opacity: 0.85;
}

#show_student_attendance.attendance-att-sheet {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  z-index: 1300 !important;
  overflow: hidden !important;
  transform: none !important;
}

#show_student_attendance.attendance-att-sheet.menu-active {
  display: flex !important;
  flex-direction: column !important;
}

#show_student_attendance.attendance-att-sheet .md-timeline-sheet__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;
  background: #fff;
  font-family: "Jost", sans-serif;
  overflow: hidden;
}

#show_student_attendance.attendance-att-sheet .md-timeline-sheet__handle { display: none; }

#show_student_attendance.attendance-att-sheet .md-att-sheet-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: calc(10px + var(--app-safe-top, 0px) + env(safe-area-inset-top, 0px)) 12px 12px !important;
  background: #1565c0 !important;
  border-bottom: none !important;
  color: #fff;
}

#show_student_attendance.attendance-att-sheet .md-att-sheet-header__bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#show_student_attendance.attendance-att-sheet .md-att-sheet-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1rem;
}

#show_student_attendance.attendance-att-sheet .md-att-sheet-header__copy {
  flex: 1 1 auto;
  min-width: 0;
}

#show_student_attendance.attendance-att-sheet .md-att-sheet-header .md-timeline-sheet__overline {
  display: block;
  margin: 0 0 2px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

#show_student_attendance.attendance-att-sheet .md-att-sheet-header .md-timeline-sheet__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff !important;
  line-height: 1.25;
}

#show_student_attendance.attendance-att-sheet .md-att-sheet-header__context,
#show_student_attendance.attendance-att-sheet .md-att-sheet-header .att-summary-lead {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#show_student_attendance.attendance-att-sheet .md-att-sheet-header .md-timeline-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto !important;
  padding: 0;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
}

#show_student_attendance.attendance-att-sheet .md-att-sheet-header .md-timeline-sheet__close:hover,
#show_student_attendance.attendance-att-sheet .md-att-sheet-header .md-timeline-sheet__close:focus-visible {
  background: rgba(255, 255, 255, 0.28);
}

#show_student_attendance.attendance-att-sheet .md-timeline-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px 16px 24px;
  -webkit-overflow-scrolling: touch;
  background: #f5f7fb;
}

#show_student_attendance.attendance-att-sheet .md-timeline-sheet__footer {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

#show_student_attendance.attendance-att-sheet .md-timeline-sheet__footer .md-btn-contained {
  flex: 1;
  min-height: 42px;
  text-transform: none;
  box-shadow: none;
}

.md-att-summary__table-wrap {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.md-att-summary__table {
  width: 100% !important;
  border-collapse: collapse;
}

.md-att-summary__table thead th {
  padding: 12px 10px;
  background: #e3f2fd;
  color: #0d47a1;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(21, 101, 192, 0.16);
  white-space: nowrap;
}

.md-att-summary__th--present { color: #2e7d32 !important; }
.md-att-summary__th--late { color: #f57f17 !important; }
.md-att-summary__th--absent { color: #c62828 !important; }

.md-att-summary__table tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  font-size: 0.875rem;
  vertical-align: middle;
}

.md-att-summary__table tbody tr:last-child td { border-bottom: none; }

.md-att-summary__table tbody tr:nth-child(even) {
  background: #fafbfd;
}

.md-att-summary__name {
  font-weight: 600;
  color: #202124;
  text-align: left !important;
}

.md-att-summary__val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.md-att-summary__val--present { color: #2e7d32; }
.md-att-summary__val--late { color: #f57f17; }
.md-att-summary__val--absent { color: #c62828; }

.md-att-summary .dataTables_wrapper .dataTables_filter {
  float: none !important;
  text-align: left;
  margin: 0 0 12px;
}

.md-att-summary .dataTables_wrapper .dataTables_filter label {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 0;
  color: transparent;
}

.md-att-summary .dataTables_wrapper .dataTables_filter input {
  display: block;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 12px 14px 12px 42px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 12px !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center / 16px 16px !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.9375rem !important;
  color: #202124 !important;
  box-shadow: none !important;
}

.md-att-summary .dataTables_wrapper .dataTables_filter input:focus {
  outline: none !important;
  border-color: #1565c0 !important;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16) !important;
}

.md-att-summary .dataTables_wrapper .dataTables_paginate {
  margin-top: 12px;
  text-align: center;
}

.md-att-summary .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 8px !important;
  border: none !important;
  background: #e3f2fd !important;
  color: #1565c0 !important;
  margin: 0 2px;
}

.md-att-summary .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #1565c0 !important;
  color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
  .about-page .md-animate-in,
  .contact-page .md-animate-in,
  .app-settings-page .md-animate-in,
  .attendance-class-page .md-animate-in,
  .attendance-subject-page .md-animate-in,
  .contact-page .md-contact-hero__stamp,
  .attendance-class-page .md-att-hero__stamp,
  .attendance-subject-page .md-att-hero__stamp {
    animation: none !important;
    transform: none;
  }
}

/* ── zap-app: assign-teacher-page ── */
html.assign-teacher-app .header.header-fixed,
body.assign-teacher-app .header.header-fixed,
html.assign-teacher-app .page-title-clear,
body.assign-teacher-app .page-title-clear {
  display: none !important;
}

html.assign-teacher-app body,
body.assign-teacher-app {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html.assign-teacher-app #page,
body.assign-teacher-app #page,
body.assign-teacher-app .md-page.assign-teacher-page,
body.assign-teacher-app .md-page.assign-teacher-page .assign-teacher-feed.page-content,
body.assign-teacher-app .md-page.assign-teacher-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.assign-teacher-page {
  --at-primary: #1565c0;
  --at-primary-dark: #0d47a1;
  --at-soft: #e3f2fd;
  --at-ink: #0d47a1;
  --at-bg: #f5f7fb;
  --at-cover: linear-gradient(135deg, #0d47a1 0%, #1565c0 48%, #42a5f5 100%);
  --md-at-toolbar-offset: 120px;
  --md-soft-pill-bg: #e3f2fd;
  --md-soft-pill-primary: #1565c0;
  --md-soft-pill-ink: #0d47a1;
  --md-soft-pill-border: rgba(21, 101, 192, 0.18);
  --md-soft-pill-overline: rgba(21, 101, 192, 0.72);
  --md-font: "Jost", sans-serif;
  font-family: "Jost", sans-serif !important;
  background: var(--at-bg);
  min-height: 100vh;
}

.assign-teacher-page .page-title-clear { display: none !important; }

.assign-teacher-page .assign-teacher-feed.page-content,
.assign-teacher-page .page-content,
.assign-teacher-page .assign-teacher-feed.md-feed {
  max-width: 680px;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--md-at-toolbar-offset, 140px) + 8px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 24px) !important;
  background: var(--at-bg) !important;
  overflow: visible !important;
}

.assign-teacher-page .md-at-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--mui-elevation-1) !important;
  background: #fff !important;
  transform: none !important;
  overflow: visible !important;
}

.assign-teacher-page .md-at-toolbar .content,
.assign-teacher-page .md-at-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 10px 12px 12px !important;
  box-sizing: border-box;
}

.assign-teacher-page .md-at-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.assign-teacher-page .md-at-toolbar__back,
.assign-teacher-page .md-at-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #202124;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.assign-teacher-page .md-at-toolbar__reload { margin-left: auto; }

.assign-teacher-page .md-at-toolbar__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #202124;
  text-transform: none;
}

.assign-teacher-page .md-at-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 4px;
  border-radius: 12px;
  background: #f1f3f4;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.assign-teacher-page .md-at-tab {
  appearance: none;
  border: none;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;
  color: var(--md-text-secondary);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.assign-teacher-page .md-at-tab.is-active,
.assign-teacher-page .md-at-tab.active {
  background: #fff;
  color: var(--at-ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.assign-teacher-page #pills-tabContent .tab-pane {
  display: none;
}

.assign-teacher-page #pills-tabContent .tab-pane.is-active {
  display: block;
}

.assign-teacher-page .md-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.assign-teacher-page .md-search-field:focus-within {
  border-color: var(--at-primary);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16);
}

.assign-teacher-page .md-search-field__icon { color: var(--md-text-secondary); }

.assign-teacher-page .md-search-field__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
}

.assign-teacher-page .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.assign-teacher-page .md-at-list .dataTables_wrapper { width: 100%; }

.assign-teacher-page .md-at-list .dataTables_wrapper .dataTables_length,
.assign-teacher-page .md-at-list .dataTables_wrapper .dataTables_filter,
.assign-teacher-page .md-at-list .dataTables_wrapper .dataTables_info,
.assign-teacher-page .md-at-list .dataTables_processing {
  display: none !important;
}

.assign-teacher-page .md-at-list table#subject,
.assign-teacher-page .md-at-list table#staff {
  display: block !important;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.assign-teacher-page .md-at-list table#subject thead,
.assign-teacher-page .md-at-list table#staff thead { display: none; }

.assign-teacher-page .md-at-list table#subject tbody,
.assign-teacher-page .md-at-list table#staff tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.assign-teacher-page .md-at-list table#subject tbody tr,
.assign-teacher-page .md-at-list table#subject tbody td,
.assign-teacher-page .md-at-list table#staff tbody tr,
.assign-teacher-page .md-at-list table#staff tbody td {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.assign-teacher-page .md-at-list table#subject tbody td.dataTables_empty,
.assign-teacher-page .md-at-list table#staff tbody td.dataTables_empty {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
  color: inherit !important;
  font-size: inherit !important;
}

.assign-teacher-page .md-at-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 32px 20px 28px;
  border: 1px dashed rgba(21, 101, 192, 0.22);
  border-radius: var(--md-shape-lg, 16px);
  background: linear-gradient(180deg, var(--at-soft, #e3f2fd) 0%, #fff 72%);
  text-align: center;
}

.assign-teacher-page .md-at-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--at-primary, #1565c0);
  font-size: 1.25rem;
  box-shadow: 0 2px 6px rgba(13, 71, 161, 0.14);
}

.assign-teacher-page .md-at-empty__title {
  margin: 4px 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--at-ink, #0d47a1);
}

.assign-teacher-page .md-at-empty__text {
  margin: 0;
  max-width: 18rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #5f6368;
}

.assign-teacher-page .md-at-card {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--md-shape-lg);
  background: #fff;
}

.assign-teacher-page .md-at-card__content {
  min-width: 0;
  padding: 12px 12px 10px;
}

.assign-teacher-page .md-at-card__head { margin-bottom: 10px; }

.assign-teacher-page .md-at-card__title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}

.assign-teacher-page .md-at-card__badge.md-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: auto;
  min-height: 28px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--at-soft);
  color: var(--at-ink);
  border: 1px solid rgba(21, 101, 192, 0.16);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assign-teacher-page .md-at-card__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 10px;
  border: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12));
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
}

.assign-teacher-page .md-at-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  text-align: center;
  border-right: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12));
}

.assign-teacher-page .md-at-metric:last-child { border-right: none; }

.assign-teacher-page .md-at-metric__value {
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #202124;
}

.assign-teacher-page .md-at-metric__value--ok { color: var(--md-success); }
.assign-teacher-page .md-at-metric__value--warn { color: var(--md-error); }

.assign-teacher-page .md-at-metric__label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-text-secondary);
}

.assign-teacher-page .md-at-card__staff {
  margin: 0 0 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #202124;
}

.assign-teacher-page .md-at-card__actions .md-btn-contained {
  width: 100%;
  min-height: 36px;
  text-transform: none;
  box-shadow: none;
  background: var(--at-primary);
}

#assign_subject.assign-teacher-sheet,
#assign_class.assign-teacher-sheet {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  z-index: 1300 !important;
  overflow: hidden !important;
  transform: none !important;
}

#assign_subject.assign-teacher-sheet.menu-active,
#assign_class.assign-teacher-sheet.menu-active {
  display: flex !important;
  flex-direction: column !important;
}

#assign_subject.assign-teacher-sheet .md-timeline-sheet__panel,
#assign_class.assign-teacher-sheet .md-timeline-sheet__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;
  background: #fff;
  font-family: "Jost", sans-serif;
  overflow: hidden;
}

#assign_subject.assign-teacher-sheet .md-timeline-sheet__handle,
#assign_class.assign-teacher-sheet .md-timeline-sheet__handle { display: none; }

#assign_subject.assign-teacher-sheet .md-timeline-sheet__header,
#assign_class.assign-teacher-sheet .md-timeline-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: calc(10px + var(--app-safe-top, 0px) + env(safe-area-inset-top, 0px)) 8px 12px 20px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

#assign_subject.assign-teacher-sheet .md-timeline-sheet__heading,
#assign_class.assign-teacher-sheet .md-timeline-sheet__heading {
  min-width: 0;
  flex: 1 1 auto;
}

#assign_subject.assign-teacher-sheet .md-timeline-sheet__overline,
#assign_class.assign-teacher-sheet .md-timeline-sheet__overline {
  display: block;
  margin: 0 0 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1565c0;
}

#assign_subject.assign-teacher-sheet .md-timeline-sheet__title,
#assign_class.assign-teacher-sheet .md-timeline-sheet__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #202124;
  text-transform: none;
}

#assign_subject.assign-teacher-sheet .md-at-sheet-context {
  display: inline-flex;
  align-items: center;
  margin: 8px 0 0;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 8px;
  background: #e8f0fe;
  color: #1557b0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#assign_subject.assign-teacher-sheet .md-at-sheet-context[hidden] {
  display: none !important;
}

#assign_subject.assign-teacher-sheet .md-timeline-sheet__lead,
#assign_class.assign-teacher-sheet .md-timeline-sheet__lead {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--md-text-secondary);
}

#assign_subject.assign-teacher-sheet .md-timeline-sheet__close,
#assign_class.assign-teacher-sheet .md-timeline-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #5f6368;
  cursor: pointer;
  flex-shrink: 0;
}

#assign_subject.assign-teacher-sheet .md-timeline-sheet__body,
#assign_class.assign-teacher-sheet .md-timeline-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px 16px 24px;
  -webkit-overflow-scrolling: touch;
  background: #f3f5f8;
}

#assign_subject.assign-teacher-sheet .md-timeline-sheet__footer,
#assign_class.assign-teacher-sheet .md-timeline-sheet__footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex-shrink: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

#assign_subject.assign-teacher-sheet .md-timeline-sheet__footer .md-btn-contained,
#assign_class.assign-teacher-sheet .md-timeline-sheet__footer .md-btn-contained {
  width: 100%;
  min-height: 44px;
  text-transform: none;
  box-shadow: none;
}

#assign_subject.assign-teacher-sheet .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.md-at-assign {
  max-width: 560px;
  margin: 0 auto;
  font-family: "Jost", sans-serif;
}

.md-at-bulk {
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--md-shape-lg, 16px);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.md-at-bulk__head {
  margin: 0 0 12px;
}

.md-at-bulk__overline {
  margin: 0 0 2px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1565c0;
}

.md-at-bulk__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #202124;
}

.md-at-bulk__lead {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #5f6368;
}

.md-at-bulk__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}

.md-at-bulk__field {
  margin: 0;
}

.md-at-bulk__row .md-btn-contained {
  min-height: 44px;
  text-transform: none;
  box-shadow: none;
  background: #1565c0;
  white-space: nowrap;
  padding-inline: 16px;
}

.md-at-assign__toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 12px;
}

.md-at-assign__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.md-at-assign .md-search-field--at-sheet {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.md-at-assign .md-search-field--at-sheet:focus-within {
  border-color: #1565c0;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16);
}

.md-at-assign .md-search-field--at-sheet .md-search-field__icon {
  color: #5f6368;
  flex-shrink: 0;
}

.md-at-assign .md-search-field--at-sheet .md-search-field__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
  color: #202124;
}

.md-at-assign .dataTables_wrapper .dataTables_filter {
  display: none !important;
}

.md-at-assign__list {
  margin: 0;
}

.md-at-assign__table,
.md-at-assign table#assign {
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.md-at-assign table#assign thead { display: none; }

.md-at-assign table#assign tbody tr,
.md-at-assign table#assign tbody td {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.md-at-assign table#assign tbody {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.md-at-subject-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.md-at-subject-row--warn {
  border-color: rgba(237, 108, 2, 0.35);
  background: #fffaf5;
}

.md-at-subject-row__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.md-at-subject-row__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #202124;
  word-break: break-word;
}

.md-at-subject-row__status {
  flex-shrink: 0;
}

.md-at-subject-row__field {
  margin: 0;
}

.md-at-subject-row__field .mui-field__label {
  margin-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #5f6368;
}

.md-at-subject-row__field .mui-field__input {
  min-height: 44px;
  font-size: 0.875rem;
  width: 100%;
}

#assign_class.assign-teacher-sheet .md-timeline-sheet__body .md-btn-contained {
  display: flex;
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  text-transform: none;
  box-shadow: none;
  background: #1565c0;
  align-items: center;
  justify-content: center;
}

@media (max-width: 420px) {
  .md-at-bulk__row {
    grid-template-columns: 1fr;
  }

  .md-at-bulk__row .md-btn-contained {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .assign-teacher-page .md-animate-in,
  #assign_subject.assign-teacher-sheet .md-animate-in {
    animation: none !important;
  }
}


/* ── zap-app: attendance-classlist + attendance-subjectlist + assessment pages ── */
html.attendance-classlist-app .header.header-fixed,
body.attendance-classlist-app .header.header-fixed,
html.attendance-subjectlist-app .header.header-fixed,
body.attendance-subjectlist-app .header.header-fixed,
html.assessment-class-app .header.header-fixed,
body.assessment-class-app .header.header-fixed,
html.assessment-class-student-app .header.header-fixed,
body.assessment-class-student-app .header.header-fixed,
html.attendance-classlist-app .page-title-clear,
body.attendance-classlist-app .page-title-clear,
html.attendance-subjectlist-app .page-title-clear,
body.attendance-subjectlist-app .page-title-clear,
html.assessment-class-app .page-title-clear,
body.assessment-class-app .page-title-clear,
html.assessment-class-student-app .page-title-clear,
body.assessment-class-student-app .page-title-clear {
  display: none !important;
}

html.attendance-classlist-app body,
body.attendance-classlist-app,
html.attendance-subjectlist-app body,
body.attendance-subjectlist-app,
html.assessment-class-app body,
body.assessment-class-app,
html.assessment-class-student-app body,
body.assessment-class-student-app {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html.attendance-classlist-app #page,
body.attendance-classlist-app #page,
body.attendance-classlist-app .md-page.attendance-classlist-page,
body.attendance-classlist-app .md-page.attendance-classlist-page .page-content,
html.attendance-subjectlist-app #page,
body.attendance-subjectlist-app #page,
body.attendance-subjectlist-app .md-page.attendance-subjectlist-page,
body.attendance-subjectlist-app .md-page.attendance-subjectlist-page .page-content,
html.assessment-class-app #page,
body.assessment-class-app #page,
body.assessment-class-app .md-page.assessment-class-page,
body.assessment-class-app .md-page.assessment-class-page .page-content,
html.assessment-class-student-app #page,
body.assessment-class-student-app #page,
body.assessment-class-student-app .md-page.assessment-class-student-page,
body.assessment-class-student-app .md-page.assessment-class-student-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.attendance-classlist-page,
.attendance-subjectlist-page,
.assessment-class-page,
.assessment-class-student-page {
  --att-primary: #1565c0;
  --att-primary-dark: #0d47a1;
  --att-soft: #e3f2fd;
  --att-ink: #0d47a1;
  --att-bg: #f5f7fb;
  --att-cover: linear-gradient(135deg, #0d47a1 0%, #1565c0 48%, #42a5f5 100%);
  --assess-primary: #1565c0;
  --assess-primary-dark: #0d47a1;
  --assess-soft: #e3f2fd;
  --assess-ink: #0d47a1;
  --assess-bg: #f5f7fb;
  --assess-cover: linear-gradient(135deg, #0d47a1 0%, #1565c0 48%, #42a5f5 100%);
  --md-att-toolbar-offset: 160px;
  --md-assess-toolbar-offset: 160px;
  --md-soft-pill-bg: #e3f2fd;
  --md-soft-pill-primary: #1565c0;
  --md-soft-pill-ink: #0d47a1;
  --md-font: "Jost", sans-serif;
  font-family: "Jost", sans-serif !important;
  background: var(--att-bg);
  min-height: 100vh;
}

.assessment-class-page,
.assessment-class-student-page {
  background: var(--assess-bg);
}

.attendance-classlist-page .page-title-clear,
.attendance-subjectlist-page .page-title-clear,
.assessment-class-page .page-title-clear,
.assessment-class-student-page .page-title-clear { display: none !important; }

.attendance-classlist-page .page-content,
.attendance-classlist-page .attendance-classlist-feed.md-feed,
.attendance-subjectlist-page .page-content,
.attendance-subjectlist-page .attendance-subjectlist-feed.md-feed,
.assessment-class-page .page-content,
.assessment-class-page .assessment-class-feed.md-feed,
.assessment-class-student-page .page-content,
.assessment-class-student-page .assessment-class-student-feed.md-feed {
  max-width: 680px;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--md-att-toolbar-offset, var(--md-assess-toolbar-offset, 160px)) + 8px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 24px) !important;
  background: var(--att-bg) !important;
  overflow: visible !important;
}

.assessment-class-page .page-content,
.assessment-class-page .assessment-class-feed.md-feed,
.assessment-class-student-page .page-content,
.assessment-class-student-page .assessment-class-student-feed.md-feed {
  padding-top: calc(var(--md-assess-toolbar-offset, 160px) + 8px) !important;
  background: var(--assess-bg) !important;
}

/* Toolbars */
.attendance-classlist-page .md-att-toolbar.card-filter,
.attendance-subjectlist-page .md-att-toolbar.card-filter,
.assessment-class-page .md-assess-toolbar.card-filter,
.assessment-class-student-page .md-assess-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--mui-elevation-1) !important;
  background: #fff !important;
  transform: none !important;
  overflow: visible !important;
}

.attendance-classlist-page .md-att-toolbar .content,
.attendance-classlist-page .md-att-toolbar__inner,
.attendance-subjectlist-page .md-att-toolbar .content,
.attendance-subjectlist-page .md-att-toolbar__inner,
.assessment-class-page .md-assess-toolbar .content,
.assessment-class-page .md-assess-toolbar__inner,
.assessment-class-student-page .md-assess-toolbar .content,
.assessment-class-student-page .md-assess-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 10px 12px 12px !important;
  box-sizing: border-box;
}

.attendance-classlist-page .md-att-toolbar__brand,
.attendance-subjectlist-page .md-att-toolbar__brand,
.assessment-class-page .md-assess-toolbar__brand,
.assessment-class-student-page .md-assess-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.attendance-classlist-page .md-att-toolbar__back,
.attendance-classlist-page .md-att-toolbar__reload,
.attendance-subjectlist-page .md-att-toolbar__back,
.attendance-subjectlist-page .md-att-toolbar__reload,
.assessment-class-page .md-assess-toolbar__back,
.assessment-class-page .md-assess-toolbar__reload,
.assessment-class-student-page .md-assess-toolbar__back,
.assessment-class-student-page .md-assess-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #202124;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.attendance-classlist-page .md-att-toolbar__reload,
.attendance-subjectlist-page .md-att-toolbar__reload,
.assessment-class-page .md-assess-toolbar__reload,
.assessment-class-student-page .md-assess-toolbar__reload { margin-left: auto; }

.attendance-classlist-page .md-att-toolbar__heading,
.assessment-class-page .md-assess-toolbar__heading {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.attendance-classlist-page .md-att-toolbar__overline,
.assessment-class-page .md-assess-toolbar__overline {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a73e8;
  line-height: 1.2;
}

.attendance-classlist-page .md-att-toolbar__title,
.attendance-subjectlist-page .md-att-toolbar__title,
.assessment-class-page .md-assess-toolbar__title,
.assessment-class-student-page .md-assess-toolbar__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #202124;
  text-transform: none;
}

.attendance-classlist-page .md-att-toolbar__heading .md-att-toolbar__title,
.assessment-class-page .md-assess-toolbar__heading .md-assess-toolbar__title {
  flex: none;
  font-size: 1.0625rem;
  color: #0d47a1;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Assessment toolbar — session / term MUI soft chips */
.assessment-class-page .md-assess-toolbar__context {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.assessment-class-page .md-assess-toolbar__chip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: auto;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 14px 8px 8px;
  box-sizing: border-box;
  border: 1px solid rgba(21, 101, 192, 0.18);
  border-radius: 16px;
  background: #e3f2fd;
  color: var(--att-primary, #1565c0);
  font-family: var(--mui-font, "Jost", sans-serif);
  box-shadow: none;
  text-transform: none;
  pointer-events: none;
}

.assessment-class-page .md-assess-toolbar__chip--term {
  background: #e8eaf6;
  border-color: rgba(63, 81, 181, 0.2);
  color: #3949ab;
}

.assessment-class-page .md-assess-toolbar__chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--att-primary, #1565c0);
  color: #fff;
  font-size: 0.8125rem;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.28);
}

.assessment-class-page .md-assess-toolbar__chip--term .md-assess-toolbar__chip-avatar {
  background: #3949ab;
  box-shadow: 0 1px 2px rgba(57, 73, 171, 0.28);
}

.assessment-class-page .md-assess-toolbar__chip-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}

.assessment-class-page .md-assess-toolbar__chip-overline {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: inherit;
  opacity: 0.85;
}

.assessment-class-page .md-assess-toolbar__chip-text {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--mui-on-surface, rgba(0, 0, 0, 0.87));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attendance-classlist-page .md-att-toolbar__chip,
.attendance-subjectlist-page .md-att-toolbar__chip,
.assessment-class-student-page .md-assess-toolbar__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--att-soft);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.attendance-classlist-page .md-att-toolbar__chip-avatar,
.attendance-subjectlist-page .md-att-toolbar__chip-avatar,
.assessment-class-student-page .md-assess-toolbar__chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--att-primary);
  flex-shrink: 0;
}

.attendance-classlist-page .md-att-toolbar__chip-copy,
.attendance-subjectlist-page .md-att-toolbar__chip-copy,
.assessment-class-student-page .md-assess-toolbar__chip-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.attendance-classlist-page .md-att-toolbar__chip-overline,
.attendance-subjectlist-page .md-att-toolbar__chip-overline,
.assessment-class-student-page .md-assess-toolbar__chip-overline {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(13, 71, 161, 0.72);
}

.attendance-classlist-page .md-att-toolbar__chip-name,
.attendance-subjectlist-page .md-att-toolbar__chip-name,
.assessment-class-student-page .md-assess-toolbar__chip-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--att-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attendance-classlist-page .md-att-toolbar__actions,
.attendance-subjectlist-page .md-att-toolbar__actions,
.assessment-class-page .md-assess-toolbar__actions,
.assessment-class-student-page .md-assess-toolbar__actions {
  display: grid;
  gap: 8px;
  width: 100%;
}

.attendance-classlist-page .md-att-toolbar__actions--solo,
.attendance-subjectlist-page .md-att-toolbar__actions--solo,
.assessment-class-page .md-assess-toolbar__actions--solo,
.assessment-class-student-page .md-assess-toolbar__actions--solo {
  grid-template-columns: 1fr;
}

.attendance-classlist-page .md-att-toolbar__actions--2,
.attendance-subjectlist-page .md-att-toolbar__actions--2,
.assessment-class-page .md-assess-toolbar__actions--2,
.assessment-class-student-page .md-assess-toolbar__actions--2 {
  grid-template-columns: 1fr 1fr;
}

.attendance-classlist-page .md-att-toolbar__actions--3,
.attendance-subjectlist-page .md-att-toolbar__actions--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.md-assess-preview-picker {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: "Jost", sans-serif;
  color: #0f1c2e;
}

.md-assess-preview-picker__hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(13, 115, 119, 0.12) 0%, transparent 48%),
    linear-gradient(180deg, #ffffff 0%, #f4fbfb 100%);
  border: 1px solid rgba(13, 115, 119, 0.14);
  box-shadow: 0 12px 28px rgba(13, 115, 119, 0.07);
}

.md-assess-preview-picker__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(160deg, #0d7377 0%, #14b8a6 100%);
  color: #fff;
  font-size: 1.0625rem;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(13, 115, 119, 0.24);
}

.md-assess-preview-picker__hero-copy {
  min-width: 0;
  flex: 1;
}

.md-assess-preview-picker__kicker {
  margin: 0 0 2px;
  font-size: 0.625rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0d7377;
}

.md-assess-preview-picker__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #0f1c2e;
}

.md-assess-preview-picker__hint {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  color: #5a6a7a;
}

.md-assess-preview-picker__count {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 52px;
  min-height: 52px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(13, 115, 119, 0.12);
  text-align: center;
  flex-shrink: 0;
}

.md-assess-preview-picker__count strong {
  font-size: 1.0625rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #0f1c2e;
  line-height: 1.1;
}

.md-assess-preview-picker__count span {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a6a7a;
}

.md-assess-preview-picker__lead {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #455a64;
}

.md-assess-preview-picker__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.md-assess-preview-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(13, 115, 119, 0.12);
  border-radius: 16px;
  background: #fff;
  color: #102a43;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 28, 46, 0.04);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.md-assess-preview-pick:hover,
.md-assess-preview-pick:focus-visible {
  background: #f4fbfb;
  border-color: rgba(13, 115, 119, 0.28);
  box-shadow: 0 10px 22px rgba(13, 115, 119, 0.1);
  outline: none;
}

.md-assess-preview-pick:active {
  transform: scale(0.992);
}

.md-assess-preview-pick__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(160deg, #d8f3f0 0%, #e8f4f4 100%);
  color: #0d7377;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.md-assess-preview-pick__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.md-assess-preview-pick__name {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-assess-preview-pick__meta {
  font-size: 0.75rem;
  font-weight: 600;
  color: #5a6a7a;
}

.md-assess-preview-pick > i {
  color: #0d7377;
  opacity: 0.65;
  flex-shrink: 0;
  font-size: 0.8125rem;
}

.md-assess-preview-picker__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 36px 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px dashed rgba(13, 115, 119, 0.22);
}

.md-assess-preview-picker__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: 18px;
  background: #e8f4f4;
  color: #0d7377;
  font-size: 1.25rem;
}

.md-assess-preview-picker__empty-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 750;
  color: #0f1c2e;
}

.md-assess-preview-picker__empty-text {
  margin: 0;
  max-width: 28ch;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #5a6a7a;
}

.attendance-classlist-page .md-att-toolbar__actions .md-btn-contained,
.attendance-subjectlist-page .md-att-toolbar__actions .md-btn-contained,
.assessment-class-page .md-assess-toolbar__actions .md-btn-contained,
.assessment-class-student-page .md-assess-toolbar__actions .md-btn-contained {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  gap: 8px;
  border: 1px solid #c0c4c8;
  border-radius: 10px;
  background: #e8f0fe;
  color: #1557b0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.attendance-classlist-page .md-att-toolbar__actions .md-btn-contained:hover,
.attendance-classlist-page .md-att-toolbar__actions .md-btn-contained:focus-visible,
.attendance-subjectlist-page .md-att-toolbar__actions .md-btn-contained:hover,
.attendance-subjectlist-page .md-att-toolbar__actions .md-btn-contained:focus-visible,
.assessment-class-page .md-assess-toolbar__actions .md-btn-contained:not(.md-btn-contained--tonal):hover,
.assessment-class-page .md-assess-toolbar__actions .md-btn-contained:not(.md-btn-contained--tonal):focus-visible,
.assessment-class-student-page .md-assess-toolbar__actions .md-btn-contained:not(.md-btn-contained--tonal):hover,
.assessment-class-student-page .md-assess-toolbar__actions .md-btn-contained:not(.md-btn-contained--tonal):focus-visible {
  background: #dce8fb;
  border-color: #c0c4c8;
  color: #0d47a1;
  box-shadow: none;
}

.attendance-subjectlist-page .md-att-toolbar__actions .md-btn-contained--tonal,
.assessment-class-page .md-assess-toolbar__actions .md-btn-contained--tonal,
.assessment-class-student-page .md-assess-toolbar__actions .md-btn-contained--tonal {
  background: #bbdefb;
  color: #0d47a1;
}

.attendance-subjectlist-page .md-att-toolbar__actions .md-btn-contained--tonal:hover,
.attendance-subjectlist-page .md-att-toolbar__actions .md-btn-contained--tonal:focus-visible,
.assessment-class-page .md-assess-toolbar__actions .md-btn-contained--tonal:hover,
.assessment-class-page .md-assess-toolbar__actions .md-btn-contained--tonal:focus-visible,
.assessment-class-student-page .md-assess-toolbar__actions .md-btn-contained--tonal:hover,
.assessment-class-student-page .md-assess-toolbar__actions .md-btn-contained--tonal:focus-visible {
  background: #90caf9;
  color: #0d47a1;
}

/* Class filter (shared control styles) */
/* Class Center tabs sticky top is set with shared .md-cc-tabs rules */

.assessment-class-page .md-assess-class-filter__form {
  margin: 0;
}

.assessment-class-page .md-assess-class-filter__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin: 0;
}

.assessment-class-page .md-assess-class-filter__label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--md-text-secondary, #5f6368);
}

.assessment-class-page .md-assess-class-filter__control {
  position: relative;
  display: block;
}

.assessment-class-page .md-assess-class-filter__select {
  width: 100%;
  min-height: 38px;
  padding: 6px 32px 6px 12px;
  border: 1px solid rgba(21, 101, 192, 0.22);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--assess-ink, #0d47a1);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.assessment-class-page .md-assess-class-filter__select:focus {
  outline: none;
  border-color: var(--assess-primary, #1565c0);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16);
}

.assessment-class-page .md-assess-class-filter__icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 0.625rem;
  color: var(--assess-ink, #0d47a1);
}

.assessment-class-student-page .md-assess-toolbar__actions .md-btn-contained--tonal {
  background: var(--assess-soft);
  color: var(--assess-ink);
}

.assessment-class-student-page .md-assess-toolbar__actions .md-btn-contained--tonal:hover,
.assessment-class-student-page .md-assess-toolbar__actions .md-btn-contained--tonal:focus-visible {
  background: #bbdefb;
  color: var(--assess-ink);
}

/* Heroes */
.attendance-classlist-page .md-att-hero,
.attendance-subjectlist-page .md-att-hero,
.assessment-class-page .md-assess-hero,
.assessment-class-student-page .md-assess-hero {
  overflow: hidden;
  margin: 0 0 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--md-shape-lg);
  background: #fff;
}

.attendance-classlist-page .md-att-hero__band,
.attendance-subjectlist-page .md-att-hero__band,
.assessment-class-page .md-assess-hero__band,
.assessment-class-student-page .md-assess-hero__band {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 16px;
  background: var(--att-cover);
  color: #fff;
}

.attendance-classlist-page .md-att-hero__overline,
.attendance-subjectlist-page .md-att-hero__overline,
.assessment-class-page .md-assess-hero__overline,
.assessment-class-student-page .md-assess-hero__overline {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.attendance-classlist-page .md-att-hero__title,
.attendance-subjectlist-page .md-att-hero__title,
.assessment-class-page .md-assess-hero__title,
.assessment-class-student-page .md-assess-hero__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
}

.attendance-classlist-page .md-att-hero__stamp,
.attendance-subjectlist-page .md-att-hero__stamp,
.assessment-class-page .md-assess-hero__stamp,
.assessment-class-student-page .md-assess-hero__stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 8px 12px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  transform: rotate(-3deg);
  text-align: center;
}

.attendance-classlist-page .md-att-hero__stamp-value,
.attendance-subjectlist-page .md-att-hero__stamp-value,
.assessment-class-page .md-assess-hero__stamp-value,
.assessment-class-student-page .md-assess-hero__stamp-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.attendance-classlist-page .md-att-hero__stamp-label,
.attendance-subjectlist-page .md-att-hero__stamp-label,
.assessment-class-page .md-assess-hero__stamp-label,
.assessment-class-student-page .md-assess-hero__stamp-label {
  margin-top: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Assessment list — compact context bar (class + session/term + count) */
.assessment-class-page .md-assess-hero--context {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1.5px solid #64b5f6;
  box-shadow: 0 1px 3px rgba(21, 101, 192, 0.1);
  background: linear-gradient(160deg, #e8f1fc 0%, #e3f2fd 48%, #f0f6ff 100%);
}

.assessment-class-page .md-assess-hero--context .md-assess-hero__filter {
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(21, 101, 192, 0.12);
}

.assessment-class-page .md-assess-hero--context .md-assess-class-filter__label {
  color: rgba(13, 71, 161, 0.7);
}

.assessment-class-page .md-assess-hero--context .md-assess-hero__band {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 6px;
  padding: 10px 12px 12px;
  background: transparent;
  color: #0d47a1;
}

.assessment-class-page .md-assess-hero--context .md-assess-hero__meta {
  display: contents;
}

.assessment-class-page .md-assess-hero--context .md-assess-hero__meta-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 56px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #90caf9;
  background: rgba(255, 255, 255, 0.92);
  color: #0d47a1;
  box-shadow: 0 1px 2px rgba(21, 101, 192, 0.06);
}

.assessment-class-page .md-assess-hero--context .md-assess-hero__meta-chip i {
  display: none;
}

.assessment-class-page .md-assess-hero--context .md-assess-hero__meta-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  width: 100%;
  line-height: 1.1;
}

.assessment-class-page .md-assess-hero--context .md-assess-hero__meta-label {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(13, 71, 161, 0.7);
}

.assessment-class-page .md-assess-hero--context .md-assess-hero__meta-value {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0d47a1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.assessment-class-page .md-assess-hero--context .md-assess-hero__stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  min-width: 64px;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid #64b5f6;
  border-radius: 10px;
  background: #fff;
  color: #0d47a1;
  transform: none;
  box-shadow: 0 1px 2px rgba(21, 101, 192, 0.06);
  text-align: center;
}

.assessment-class-page .md-assess-hero--context .md-assess-hero__stamp-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  flex-shrink: 0;
  gap: 6px;
  min-width: 0;
}

.assessment-class-page .md-assess-hero--context .md-assess-hero__stamp-wrap .md-assess-hero__stamp {
  align-self: stretch;
  width: 100%;
}

.assessment-class-page .md-assess-hero--context .md-assess-hero__cal-btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0d47a1;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}

.assessment-class-page .md-assess-hero--context .md-assess-hero__cal-btn:hover,
.assessment-class-page .md-assess-hero--context .md-assess-hero__cal-btn:focus-visible {
  outline: none;
  color: #0d47a1;
  opacity: 0.88;
}

.md-att-cal__day--selected:not(.md-att-cal__day--outside) {
  box-shadow: inset 0 0 0 2px #0d47a1;
}

.assessment-class-page .md-assess-day-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: 680px;
  margin: 0 auto 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #90caf9;
  background: #e3f2fd;
  color: #0d47a1;
}

.assessment-class-page .md-assess-day-filter[hidden] {
  display: none !important;
}

.assessment-class-page .md-assess-day-filter__text {
  font-size: 0.8125rem;
  font-weight: 600;
  min-width: 0;
}

.assessment-class-page .md-assess-day-filter__clear {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  color: #0d47a1;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  white-space: nowrap;
}

.assessment-class-page .md-assess-hero__cal-btn[hidden] {
  display: none !important;
}



.assessment-class-page .md-assess-hero--context .md-assess-hero__stamp-value {
  color: #1565c0;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.assessment-class-page .md-assess-hero--context .md-assess-hero__stamp-label {
  margin-top: 2px;
  color: rgba(13, 71, 161, 0.7);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Assessment student hero — compact mobile band + progress */
.assessment-class-student-page .md-assess-hero.md-assess-hero--compact,
.assessment-class-student-page .md-assess-hero {
  margin: 0 0 10px;
  border: 1px solid #90caf9;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(21, 101, 192, 0.08);
  overflow: hidden;
}

.assessment-class-student-page .md-assess-hero__band {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  padding: 10px 12px;
  background: linear-gradient(160deg, #e8f1fc 0%, #e3f2fd 55%, #f5f9ff 100%);
  color: #0d47a1;
}

.assessment-class-student-page .md-assess-hero__top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.assessment-class-student-page .md-assess-hero__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.assessment-class-student-page .md-assess-hero__overline {
  margin: 0;
  color: rgba(13, 71, 161, 0.72);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assessment-class-student-page .md-assess-hero__title {
  margin: 0;
  color: #0d47a1;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assessment-class-student-page .md-assess-hero__context {
  margin: 2px 0 0;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(13, 71, 161, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assessment-class-student-page .md-assess-hero__stamp {
  align-self: flex-start;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 6px 8px;
  border: 1px solid #90caf9;
  border-radius: 10px;
  background: #fff;
  color: #0d47a1;
  transform: none;
  box-shadow: none;
}

.assessment-class-student-page .md-assess-hero__stamp-value {
  color: #1565c0;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.assessment-class-student-page .md-assess-hero__stamp-label {
  color: rgba(13, 71, 161, 0.7);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.assessment-class-student-page .md-assess-hero__progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.assessment-class-student-page .md-assess-hero__progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.assessment-class-student-page .md-assess-hero__progress-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(13, 71, 161, 0.7);
}

.assessment-class-student-page .md-assess-hero__progress-value {
  font-size: 0.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #1565c0;
}

.assessment-class-student-page .md-assess-hero__progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(144, 202, 249, 0.9);
  overflow: hidden;
}

.assessment-class-student-page .md-assess-hero__progress-bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: #64b5f6;
  transition: width 0.25s ease;
}

.assessment-class-student-page .md-assess-hero__progress-bar--ok { background: #66bb6a; }
.assessment-class-student-page .md-assess-hero__progress-bar--mid { background: #42a5f5; }
.assessment-class-student-page .md-assess-hero__progress-bar--low { background: #ffb74d; }
.assessment-class-student-page .md-assess-hero__progress-bar--empty { background: #90caf9; }

@media (prefers-reduced-motion: reduce) {
  .assessment-class-student-page .md-assess-hero__progress-bar {
    transition: none;
  }
}

/* Attendance classlist — light blue tonal hero with blended session/term */
.attendance-classlist-page .md-att-hero--tonal {
  border: 1.5px solid #64b5f6;
  box-shadow: 0 1px 3px rgba(21, 101, 192, 0.1);
  background: linear-gradient(160deg, #e8f1fc 0%, #e3f2fd 48%, #f0f6ff 100%);
}

.attendance-classlist-page .md-att-hero--tonal .md-att-hero__band {
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: transparent;
  color: #0d47a1;
}

.attendance-classlist-page .md-att-hero--tonal .md-att-hero__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.attendance-classlist-page .md-att-hero--tonal .md-att-hero__overline {
  margin: 0 0 2px;
  color: rgba(13, 71, 161, 0.72);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
}

.attendance-classlist-page .md-att-hero--tonal .md-att-hero__title {
  margin: 0 0 10px;
  color: #0d47a1;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.attendance-classlist-page .md-att-hero--tonal .md-att-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.attendance-classlist-page .md-att-hero--tonal .md-att-hero__meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  padding: 5px 9px 5px 6px;
  border-radius: 999px;
  border: 1px solid #90caf9;
  background: rgba(255, 255, 255, 0.92);
  color: #0d47a1;
  box-shadow: none;
}

.attendance-classlist-page .md-att-hero--tonal .md-att-hero__meta-chip i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #bbdefb;
  color: #1565c0;
  font-size: 0.625rem;
  flex-shrink: 0;
}

.attendance-classlist-page .md-att-hero--tonal .md-att-hero__meta-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  line-height: 1.1;
}

.attendance-classlist-page .md-att-hero--tonal .md-att-hero__meta-label {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(13, 71, 161, 0.65);
}

.attendance-classlist-page .md-att-hero--tonal .md-att-hero__meta-value {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #0d47a1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

.attendance-classlist-page .md-att-hero--tonal .md-att-hero__stamp {
  align-self: center;
  flex-shrink: 0;
  min-width: 72px;
  padding: 8px 10px;
  border: 1px solid #90caf9;
  border-radius: 10px;
  background: #fff;
  color: #0d47a1;
  transform: none;
  box-shadow: 0 1px 2px rgba(21, 101, 192, 0.08);
}

.attendance-classlist-page .md-att-hero--tonal .md-att-hero__stamp-value {
  color: #1565c0;
  font-size: 1.375rem;
  font-weight: 800;
}

.attendance-classlist-page .md-att-hero--tonal .md-att-hero__stamp-label {
  margin-top: 2px;
  color: rgba(13, 71, 161, 0.7);
  font-size: 0.5625rem;
}

.attendance-classlist-page .md-att-hero__stamp-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
  gap: 8px;
}

.attendance-subjectlist-page .md-att-hero__stamp-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
  gap: 8px;
}

.attendance-classlist-page .md-att-hero--tonal .md-att-hero__stamp-wrap .md-att-hero__stamp {
  align-self: stretch;
}

.attendance-classlist-page .md-att-hero__cal-btn,
.attendance-subjectlist-page .md-att-hero__cal-btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.95);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  line-height: 1.2;
}

.attendance-classlist-page .md-att-hero--tonal .md-att-hero__cal-btn {
  color: #0d47a1;
}

.attendance-classlist-page .md-att-hero__cal-btn:hover,
.attendance-classlist-page .md-att-hero__cal-btn:focus-visible,
.attendance-subjectlist-page .md-att-hero__cal-btn:hover,
.attendance-subjectlist-page .md-att-hero__cal-btn:focus-visible {
  outline: none;
  opacity: 0.88;
}

.attendance-classlist-page .md-att-hero--tonal .md-att-hero__cal-btn:hover,
.attendance-classlist-page .md-att-hero--tonal .md-att-hero__cal-btn:focus-visible {
  color: #0d47a1;
  opacity: 1;
}

.attendance-classlist-page .md-att-hero__pills,
.attendance-subjectlist-page .md-att-hero__pills,
.assessment-class-page .md-assess-hero__pills,
.assessment-class-student-page .md-assess-hero__pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
  background: #fff;
}

.attendance-subjectlist-page .md-att-hero__pills--3 {
  grid-template-columns: 1fr 1fr;
}

.attendance-subjectlist-page .md-att-hero__pills--3 .md-att-hero__pill:last-child {
  grid-column: 1 / -1;
}

.attendance-classlist-page .md-att-hero__pill,
.attendance-subjectlist-page .md-att-hero__pill,
.assessment-class-page .md-assess-hero__pill,
.assessment-class-student-page .md-assess-hero__pill {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--att-soft);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.attendance-classlist-page .md-att-hero__pill i,
.attendance-subjectlist-page .md-att-hero__pill i,
.assessment-class-page .md-assess-hero__pill i,
.assessment-class-student-page .md-assess-hero__pill i {
  color: var(--att-primary);
  flex-shrink: 0;
}

.attendance-classlist-page .md-att-hero__pill-copy,
.attendance-subjectlist-page .md-att-hero__pill-copy,
.assessment-class-page .md-assess-hero__pill-copy,
.assessment-class-student-page .md-assess-hero__pill-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.attendance-classlist-page .md-att-hero__pill-label,
.attendance-subjectlist-page .md-att-hero__pill-label,
.assessment-class-page .md-assess-hero__pill-label,
.assessment-class-student-page .md-assess-hero__pill-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-text-secondary);
}

.attendance-classlist-page .md-att-hero__pill-value,
.attendance-subjectlist-page .md-att-hero__pill-value,
.assessment-class-page .md-assess-hero__pill-value,
.assessment-class-student-page .md-assess-hero__pill-value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--att-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Search */
.attendance-classlist-page .md-search-field,
.attendance-subjectlist-page .md-search-field,
.assessment-class-page .md-search-field,
.assessment-class-student-page .md-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.attendance-classlist-page .md-search-field:focus-within,
.attendance-subjectlist-page .md-search-field:focus-within,
.assessment-class-page .md-search-field:focus-within,
.assessment-class-student-page .md-search-field:focus-within {
  border-color: var(--att-primary);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16);
}

.attendance-classlist-page .md-search-field__icon,
.attendance-subjectlist-page .md-search-field__icon,
.assessment-class-page .md-search-field__icon,
.assessment-class-student-page .md-search-field__icon { color: var(--md-text-secondary); }

.attendance-classlist-page .md-search-field__input,
.attendance-subjectlist-page .md-search-field__input,
.assessment-class-page .md-search-field__input,
.assessment-class-student-page .md-search-field__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
}

.attendance-classlist-page .visually-hidden,
.attendance-subjectlist-page .visually-hidden,
.assessment-class-page .visually-hidden,
.assessment-class-student-page .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* DataTable lists */
.attendance-classlist-page .md-att-list .dataTables_wrapper .dataTables_length,
.attendance-classlist-page .md-att-list .dataTables_wrapper .dataTables_filter,
.attendance-classlist-page .md-att-list .dataTables_wrapper .dataTables_info,
.attendance-classlist-page .md-att-list .dataTables_processing,
.attendance-subjectlist-page .md-att-list .dataTables_wrapper .dataTables_length,
.attendance-subjectlist-page .md-att-list .dataTables_wrapper .dataTables_filter,
.attendance-subjectlist-page .md-att-list .dataTables_wrapper .dataTables_info,
.attendance-subjectlist-page .md-att-list .dataTables_processing,
.assessment-class-page .md-assess-list .dataTables_wrapper .dataTables_length,
.assessment-class-page .md-assess-list .dataTables_wrapper .dataTables_filter,
.assessment-class-page .md-assess-list .dataTables_wrapper .dataTables_info,
.assessment-class-page .md-assess-list .dataTables_processing,
.assessment-class-student-page .md-assess-list .dataTables_wrapper .dataTables_length,
.assessment-class-student-page .md-assess-list .dataTables_wrapper .dataTables_filter,
.assessment-class-student-page .md-assess-list .dataTables_wrapper .dataTables_info,
.assessment-class-student-page .md-assess-list .dataTables_processing {
  display: none !important;
}

.attendance-classlist-page .md-att-list table#attendance_table,
.attendance-subjectlist-page .md-att-list table#attendance_table,
.assessment-class-page .md-assess-list table#student,
.assessment-class-student-page .md-assess-list table#student {
  display: block !important;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.attendance-classlist-page .md-att-list table#attendance_table thead,
.attendance-subjectlist-page .md-att-list table#attendance_table thead,
.assessment-class-page .md-assess-list table#student thead,
.assessment-class-student-page .md-assess-list table#student thead { display: none; }

.attendance-classlist-page .md-att-list table#attendance_table tbody,
.attendance-subjectlist-page .md-att-list table#attendance_table tbody,
.assessment-class-page .md-assess-list table#student tbody,
.assessment-class-student-page .md-assess-list table#student tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.attendance-classlist-page .md-att-list table#attendance_table tbody tr,
.attendance-classlist-page .md-att-list table#attendance_table tbody td,
.attendance-subjectlist-page .md-att-list table#attendance_table tbody tr,
.attendance-subjectlist-page .md-att-list table#attendance_table tbody td,
.assessment-class-page .md-assess-list table#student tbody tr,
.assessment-class-page .md-assess-list table#student tbody td,
.assessment-class-student-page .md-assess-list table#student tbody tr,
.assessment-class-student-page .md-assess-list table#student tbody td {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.attendance-classlist-page .md-att-list table#attendance_table tbody td.dataTables_empty,
.attendance-subjectlist-page .md-att-list table#attendance_table tbody td.dataTables_empty,
.assessment-class-page .md-assess-list table#student tbody td.dataTables_empty,
.assessment-class-student-page .md-assess-list table#student tbody td.dataTables_empty {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
}

.assessment-class-page .md-assess-empty,
.assessment-class-student-page .md-assess-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  padding: 32px 20px;
  border: 1.5px solid #90caf9;
  border-radius: var(--md-shape-lg, 12px);
  background: linear-gradient(160deg, #e8f1fc 0%, #e3f2fd 42%, #fff 100%);
  box-shadow: 0 2px 10px rgba(21, 101, 192, 0.1);
  text-align: center;
}

.assessment-class-page .md-assess-empty__icon,
.assessment-class-student-page .md-assess-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #fff;
  color: #1565c0;
  font-size: 1.35rem;
  box-shadow: 0 2px 8px rgba(13, 71, 161, 0.14);
}

.assessment-class-page .md-assess-empty__title,
.assessment-class-student-page .md-assess-empty__title {
  margin: 6px 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0d47a1;
}

.assessment-class-page .md-assess-empty__text,
.assessment-class-student-page .md-assess-empty__text {
  margin: 0;
  max-width: 280px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--md-text-secondary, #5f6368);
}

.assessment-class-page .md-assess-empty--loading,
.assessment-class-student-page .md-assess-empty--loading {
  border-style: solid;
  border-color: rgba(13, 115, 119, 0.16);
}

.assessment-class-page .md-assess-empty__spinner,
.assessment-class-student-page .md-assess-empty__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(13, 115, 119, 0.18);
  border-top-color: #0d7377;
  border-radius: 50%;
  animation: md-assess-spin 0.7s linear infinite;
}

@keyframes md-assess-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .assessment-class-page .md-assess-empty__spinner,
  .assessment-class-student-page .md-assess-empty__spinner {
    animation: none;
    border-top-color: rgba(13, 115, 119, 0.45);
  }
}

/* List / student loading shells */
.assessment-class-page .md-assess-loading,
.assessment-class-student-page .md-assess-loading {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 4px 0 8px;
}

.assessment-class-page .md-assess-loading .md-assess-empty,
.assessment-class-student-page .md-assess-loading .md-assess-empty {
  margin: 0;
}

.assessment-class-page .md-assess-loading__banner,
.assessment-class-student-page .md-assess-loading__banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(13, 115, 119, 0.14);
  background:
    linear-gradient(135deg, rgba(13, 115, 119, 0.08) 0%, transparent 48%),
    linear-gradient(180deg, #f3fbfb 0%, #ffffff 100%);
  box-shadow: 0 6px 18px rgba(15, 28, 46, 0.04);
}

.assessment-class-page .md-assess-loading__pulse,
.assessment-class-student-page .md-assess-loading__pulse {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #0d7377;
  box-shadow: 0 0 0 0 rgba(13, 115, 119, 0.45);
  animation: md-assess-loading-pulse 1.4s ease-out infinite;
}

.assessment-class-page .md-assess-loading__pulse::after,
.assessment-class-student-page .md-assess-loading__pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(13, 115, 119, 0.28);
  animation: md-assess-loading-ring 1.4s ease-out infinite;
}

.assessment-class-page .md-assess-loading__copy,
.assessment-class-student-page .md-assess-loading__copy {
  min-width: 0;
}

.assessment-class-page .md-assess-loading__title,
.assessment-class-student-page .md-assess-loading__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f1c2e;
}

.assessment-class-page .md-assess-loading__text,
.assessment-class-student-page .md-assess-loading__text {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #5a6a7a;
}

@keyframes md-assess-loading-pulse {
  0% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(13, 115, 119, 0.4); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(13, 115, 119, 0); }
  100% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(13, 115, 119, 0); }
}

@keyframes md-assess-loading-ring {
  0% { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}

.assessment-class-page .md-assess-skeleton,
.assessment-class-student-page .md-assess-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.assessment-class-student-page .md-assess-skeleton__card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.assessment-class-page .md-assess-skeleton__card--list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #c0c4c8;
  background: #fff;
  overflow: hidden;
}

.assessment-class-student-page .md-assess-skeleton__card--student {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-areas:
    "avatar copy"
    "label label"
    "bar bar"
    "actions actions";
  gap: 10px 12px;
  align-items: start;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #c0c4c8;
  background: #fff;
}

.assessment-class-student-page .md-assess-skeleton__card--student .md-assess-skeleton__avatar {
  grid-area: avatar;
}

.assessment-class-student-page .md-assess-skeleton__card--student .md-assess-skeleton__copy {
  grid-area: copy;
  padding-top: 2px;
}

.assessment-class-student-page .md-assess-skeleton__card--student .md-assess-skeleton__line--label {
  grid-area: label;
}

.assessment-class-student-page .md-assess-skeleton__card--student .md-assess-skeleton__line--bar {
  grid-area: bar;
}

.assessment-class-student-page .md-assess-skeleton__card--student .md-assess-skeleton__actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.assessment-class-student-page .md-assess-skeleton__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(90deg, #e4eef0 0%, #f4fafb 50%, #e4eef0 100%);
  background-size: 200% 100%;
  animation: md-assess-skeleton-shimmer 1.2s ease-in-out infinite;
}

.assessment-class-student-page .md-assess-skeleton__copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding-top: 2px;
}

.assessment-class-page .md-assess-skeleton__line,
.assessment-class-student-page .md-assess-skeleton__line {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e4eef0 0%, #f4fafb 50%, #e4eef0 100%);
  background-size: 200% 100%;
  animation: md-assess-skeleton-shimmer 1.2s ease-in-out infinite;
}

.assessment-class-page .md-assess-skeleton__line--title,
.assessment-class-student-page .md-assess-skeleton__line--title {
  width: 58%;
  height: 16px;
}

.assessment-class-student-page .md-assess-skeleton__line--chip {
  width: 38%;
  height: 18px;
  border-radius: 8px;
  animation-delay: 0.08s;
}

.assessment-class-page .md-assess-skeleton__line--label,
.assessment-class-student-page .md-assess-skeleton__line--label {
  width: 28%;
  height: 10px;
  animation-delay: 0.1s;
}

.assessment-class-page .md-assess-skeleton__line--bar,
.assessment-class-student-page .md-assess-skeleton__line--bar {
  width: 100%;
  height: 8px;
  margin-top: 0;
  animation-delay: 0.16s;
}

.assessment-class-page .md-assess-skeleton__line--btn,
.assessment-class-student-page .md-assess-skeleton__line--btn {
  width: 100%;
  height: 40px;
  margin-top: 2px;
  border-radius: 10px;
  animation-delay: 0.22s;
}

.assessment-class-page .md-assess-skeleton__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.assessment-class-page .md-assess-skeleton__metric {
  display: block;
  height: 54px;
  border-radius: 12px;
  background: linear-gradient(90deg, #e8f2f3 0%, #f6fbfb 50%, #e8f2f3 100%);
  background-size: 200% 100%;
  animation: md-assess-skeleton-shimmer 1.2s ease-in-out infinite;
  animation-delay: 0.06s;
}

.assessment-class-page .md-assess-skeleton__card--list:nth-child(2) .md-assess-skeleton__line,
.assessment-class-page .md-assess-skeleton__card--list:nth-child(2) .md-assess-skeleton__metric,
.assessment-class-student-page .md-assess-skeleton__card:nth-child(2) .md-assess-skeleton__line,
.assessment-class-student-page .md-assess-skeleton__card:nth-child(2) .md-assess-skeleton__avatar {
  animation-delay: 0.12s;
}

.assessment-class-page .md-assess-skeleton__card--list:nth-child(3) .md-assess-skeleton__line,
.assessment-class-page .md-assess-skeleton__card--list:nth-child(3) .md-assess-skeleton__metric,
.assessment-class-student-page .md-assess-skeleton__card:nth-child(3) .md-assess-skeleton__line,
.assessment-class-student-page .md-assess-skeleton__card:nth-child(3) .md-assess-skeleton__avatar {
  animation-delay: 0.24s;
}

@keyframes md-assess-skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .assessment-class-page .md-assess-loading__pulse,
  .assessment-class-page .md-assess-loading__pulse::after,
  .assessment-class-student-page .md-assess-loading__pulse,
  .assessment-class-student-page .md-assess-loading__pulse::after {
    animation: none;
  }

  .assessment-class-page .md-assess-skeleton__line,
  .assessment-class-page .md-assess-skeleton__metric,
  .assessment-class-student-page .md-assess-skeleton__avatar,
  .assessment-class-student-page .md-assess-skeleton__line {
    animation: none;
    background: #e4eef0;
  }
}

.assessment-class-page .md-assess-list table#student.is-booting,
.assessment-class-student-page .md-assess-list table#student.is-booting {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.attendance-classlist-page .md-att-empty,
.attendance-subjectlist-page .md-att-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  padding: 28px 20px;
  border: 1px dashed rgba(21, 101, 192, 0.22);
  border-radius: var(--md-shape-lg, 12px);
  background: linear-gradient(180deg, #e3f2fd 0%, #fff 72%);
  text-align: center;
}

.attendance-classlist-page .md-att-empty__icon,
.attendance-subjectlist-page .md-att-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: #1565c0;
  font-size: 1.25rem;
  box-shadow: 0 2px 6px rgba(13, 71, 161, 0.16);
}

.attendance-classlist-page .md-att-empty__title,
.attendance-subjectlist-page .md-att-empty__title {
  margin: 4px 0 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.attendance-classlist-page .md-att-empty__text,
.attendance-subjectlist-page .md-att-empty__text {
  margin: 0;
  max-width: 280px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--md-text-secondary, #5f6368);
}

.attendance-classlist-page .md-att-empty--loading,
.attendance-subjectlist-page .md-att-empty--loading {
  border-style: solid;
  border-color: rgba(21, 101, 192, 0.12);
}

.attendance-classlist-page .md-att-empty__spinner,
.attendance-subjectlist-page .md-att-empty__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(21, 101, 192, 0.18);
  border-top-color: #1565c0;
  border-radius: 50%;
  animation: md-att-spin 0.7s linear infinite;
}

@keyframes md-att-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .attendance-classlist-page .md-att-empty__spinner,
  .attendance-subjectlist-page .md-att-empty__spinner {
    animation: none;
    border-top-color: rgba(21, 101, 192, 0.45);
  }
}

.attendance-classlist-page .md-att-list .dataTables_paginate,
.attendance-subjectlist-page .md-att-list .dataTables_paginate {
  margin-top: 12px;
  text-align: center;
}

/* Cards */
.attendance-classlist-page .md-att-card,
.attendance-subjectlist-page .md-att-card,
.assessment-class-page .md-assess-card,
.assessment-class-student-page .md-assess-card {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--md-shape-lg);
  background: #fff;
}

.attendance-classlist-page .md-att-card__content,
.attendance-subjectlist-page .md-att-card__content,
.assessment-class-page .md-assess-card__content,
.assessment-class-student-page .md-assess-card__content {
  min-width: 0;
  padding: 12px 12px 10px;
}

.attendance-classlist-page .md-att-card__head,
.attendance-subjectlist-page .md-att-card__head,
.assessment-class-page .md-assess-card__head,
.assessment-class-student-page .md-assess-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.attendance-classlist-page .md-att-card__title,
.attendance-subjectlist-page .md-att-card__title,
.assessment-class-page .md-assess-card__title,
.assessment-class-student-page .md-assess-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #202124;
}

/* Assessment card — compact MUI list item */
.assessment-class-page .md-assess-card {
  position: relative;
  margin: 0;
  border: 1px solid #c0c4c8 !important;
  border-radius: 12px !important;
  background: #fff;
  box-shadow: none !important;
  overflow: hidden;
}

.assessment-class-page .md-assess-card__body {
  padding: 0;
}

.assessment-class-page .md-assess-card__content {
  padding: 10px 12px 8px;
}

.assessment-class-page .md-assess-card__head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  flex-wrap: nowrap;
  margin: 0 0 8px;
  padding: 0;
  border-bottom: none;
  background: transparent;
}

.assessment-class-page .md-assess-card__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.assessment-class-page .md-assess-card__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #202124;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.assessment-class-page .md-assess-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.assessment-class-page .md-assess-card__class.md-chip {
  height: auto;
  min-height: 22px;
  padding: 2px 8px;
  background: var(--assess-soft);
  color: var(--assess-primary);
  border: 1px solid rgba(21, 101, 192, 0.18);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.assessment-class-page .md-assess-card__date {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--md-text-secondary);
  line-height: 1.2;
}

.assessment-class-page .md-assess-card__date i {
  color: var(--assess-primary);
  opacity: 0.75;
  font-size: 0.6875rem;
}

.assessment-class-page .md-assess-card__status {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 1px;
}

.assessment-class-page .md-assess-card__status .md-chip {
  height: auto;
  min-height: 22px;
  padding: 2px 8px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

.assessment-class-page .md-assess-card__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 8px;
  border: 1px solid rgba(21, 101, 192, 0.14);
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #e3f2fd 0%, #f8fbff 100%);
}

.assessment-class-page .md-assess-metric {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  text-align: left;
  border: none;
  border-right: 1px solid rgba(21, 101, 192, 0.12);
}

.assessment-class-page .md-assess-metric:last-child {
  border-right: none;
}

.assessment-class-page .md-assess-metric__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--assess-primary);
  font-size: 0.8125rem;
  box-shadow: 0 1px 3px rgba(13, 71, 161, 0.16);
  flex-shrink: 0;
}

.assessment-class-page .md-assess-metric__copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.assessment-class-page .md-assess-metric__value {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--assess-ink);
}

.assessment-class-page .md-assess-metric__value--date {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assessment-class-page .md-assess-metric__label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(32, 33, 36, 0.55);
}

.assessment-class-page .md-assess-card__progress-wrap {
  margin: 0 0 10px;
}

.assessment-class-page .md-assess-card__progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
}

.assessment-class-page .md-assess-card__progress-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(32, 33, 36, 0.55);
}

.assessment-class-page .md-assess-card__progress-value {
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--assess-ink);
}

.assessment-class-page .md-assess-card__progress {
  height: 6px;
  border-radius: 999px;
  background: #eef0f3;
  overflow: hidden;
}

.assessment-class-page .md-assess-card__progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  min-width: 0;
  background: #d7a3a0;
  transition: width 0.35s ease;
}

.assessment-class-page .md-assess-card__progress-bar--ok { background: #9ccc9f; }
.assessment-class-page .md-assess-card__progress-bar--mid { background: #e8c47a; }
.assessment-class-page .md-assess-card__progress-bar--low,
.assessment-class-page .md-assess-card__progress-bar--empty { background: #d7a3a0; }

.assessment-class-page .md-assess-card__actions--3 {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.assessment-class-page .md-assess-card__actions .md-btn-contained {
  gap: 6px;
  min-height: 36px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 0.8125rem;
}

/* Card actions — light blue shades throughout */
.assessment-class-page .md-assess-card__actions .md-assess-btn--students {
  background: #e3f2fd;
  color: #0d47a1;
}
.assessment-class-page .md-assess-card__actions .md-assess-btn--students.is-processing {
  pointer-events: none;
  opacity: 0.85;
}
.assessment-class-page .md-assess-card__actions .md-assess-btn--students:hover,
.assessment-class-page .md-assess-card__actions .md-assess-btn--students:focus-visible {
  background: #bbdefb;
  color: #0d47a1;
}

.assessment-class-page .md-assess-card__actions .md-assess-btn--publish {
  background: #d6eafc;
  color: #1565c0;
}
.assessment-class-page .md-assess-card__actions .md-assess-btn--publish:hover,
.assessment-class-page .md-assess-card__actions .md-assess-btn--publish:focus-visible {
  background: #b3d4f7;
  color: #0d47a1;
}

.assessment-class-page .md-assess-card__actions .md-assess-btn--unpublish {
  background: #cfe8fc;
  color: #1976d2;
}
.assessment-class-page .md-assess-card__actions .md-assess-btn--unpublish:hover,
.assessment-class-page .md-assess-card__actions .md-assess-btn--unpublish:focus-visible {
  background: #b3d4f7;
  color: #0d47a1;
}

.assessment-class-page .md-assess-card__actions .md-assess-btn--delete {
  background: #f0f7fd;
  color: #1e88e5;
}
.assessment-class-page .md-assess-card__actions .md-assess-btn--delete:hover,
.assessment-class-page .md-assess-card__actions .md-assess-btn--delete:focus-visible {
  background: #ddeffc;
  color: #1565c0;
}

.assessment-class-page .md-assess-card__actions .md-assess-btn--preview {
  background: #e0f2f1;
  color: #00695c;
}
.assessment-class-page .md-assess-card__actions .md-assess-btn--preview:hover,
.assessment-class-page .md-assess-card__actions .md-assess-btn--preview:focus-visible {
  background: #b2dfdb;
  color: #004d40;
}

.assessment-class-page .md-assess-card__actions .assess_third_action {
  display: contents;
}

.assessment-class-page .md-assess-card__actions .md-btn-contained--tonal {
  background: var(--assess-soft);
  color: var(--assess-ink);
}

.assessment-class-page .md-assess-card__actions .md-btn-contained--tonal:hover,
.assessment-class-page .md-assess-card__actions .md-btn-contained--tonal:focus-visible {
  background: #bbdefb;
  color: var(--assess-ink);
}

.attendance-classlist-page .md-att-card__badge.md-chip,
.attendance-subjectlist-page .md-att-card__badge.md-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: auto;
  min-height: 28px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--att-soft);
  color: var(--att-ink);
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 0.8125rem;
  font-weight: 700;
}

.attendance-subjectlist-page .md-att-card__subject.md-chip {
  height: auto;
  min-height: 24px;
  padding: 4px 10px;
  background: #fff;
  color: var(--att-primary);
  border: 1px solid rgba(21, 101, 192, 0.22);
  font-size: 0.75rem;
  font-weight: 600;
}

.attendance-classlist-page .md-att-card__metrics,
.attendance-subjectlist-page .md-att-card__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 10px;
  border: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12));
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
}

.attendance-classlist-page .md-att-metric,
.attendance-subjectlist-page .md-att-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  text-align: center;
  border-right: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12));
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12));
}

.attendance-classlist-page .md-att-metric:nth-child(2n),
.attendance-subjectlist-page .md-att-metric:nth-child(2n) { border-right: none; }

.attendance-classlist-page .md-att-metric:nth-last-child(-n+2),
.attendance-subjectlist-page .md-att-metric:nth-last-child(-n+2) { border-bottom: none; }

.attendance-classlist-page .md-att-metric__value,
.attendance-subjectlist-page .md-att-metric__value {
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #202124;
}

.attendance-classlist-page .md-att-metric__value--ok,
.attendance-subjectlist-page .md-att-metric__value--ok { color: #2e7d32; }

.attendance-classlist-page .md-att-metric__value--late,
.attendance-subjectlist-page .md-att-metric__value--late { color: #f9a825; }

.attendance-classlist-page .md-att-metric__value--warn,
.attendance-subjectlist-page .md-att-metric__value--warn { color: var(--md-error); }

.attendance-classlist-page .md-att-metric__label,
.attendance-subjectlist-page .md-att-metric__label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-text-secondary);
}

.attendance-classlist-page .md-att-card__actions,
.attendance-subjectlist-page .md-att-card__actions,
.assessment-class-page .md-assess-card__actions,
.assessment-class-student-page .md-assess-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.assessment-class-page .md-assess-card__actions--3 {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.assessment-class-student-page .md-assess-card__actions--solo {
  grid-template-columns: 1fr;
}

.attendance-classlist-page .md-att-card__actions .md-btn-contained,
.attendance-subjectlist-page .md-att-card__actions .md-btn-contained,
.assessment-class-page .md-assess-card__actions .md-btn-contained,
.assessment-class-student-page .md-assess-card__actions .md-btn-contained {
  width: 100%;
  min-height: 36px;
  text-transform: none;
  box-shadow: none;
}

.attendance-classlist-page .md-att-card__actions .md-btn-contained:not(.md-btn-contained--tonal),
.attendance-subjectlist-page .md-att-card__actions .md-btn-contained:not(.md-btn-contained--tonal),
.assessment-class-page .md-assess-card__actions .md-btn-contained:not(.md-btn-contained--tonal):not(.md-assess-btn),
.assessment-class-student-page .md-assess-card__actions .md-btn-contained:not(.md-btn-contained--tonal) {
  background: var(--att-primary);
}

.assessment-class-page .md-assess-card__actions .md-assess-btn--students:not(.md-btn-contained--tonal) {
  background: #e3f2fd;
  color: #0d47a1;
}
.assessment-class-page .md-assess-card__actions .md-assess-btn--publish:not(.md-btn-contained--tonal) {
  background: #d6eafc;
  color: #1565c0;
}
.assessment-class-page .md-assess-card__actions .md-assess-btn--unpublish:not(.md-btn-contained--tonal) {
  background: #cfe8fc;
  color: #1976d2;
}
.assessment-class-page .md-assess-card__actions .md-assess-btn--delete:not(.md-btn-contained--tonal) {
  background: #f0f7fd;
  color: #1e88e5;
}
.assessment-class-page .md-assess-card__actions .md-assess-btn--preview:not(.md-btn-contained--tonal) {
  background: #e0f2f1;
  color: #00695c;
}

.assessment-class-page .md-assess-card__title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.assessment-class-page .md-assess-card__actions .md-btn-contained--tonal {
  background: var(--assess-soft);
  color: var(--assess-ink);
}

.assessment-class-page .toggle_publish_div { min-width: 0; }
.assessment-class-page .toggle_publish_div .md-btn-contained { width: 100%; }
.assessment-class-page .assess_third_action { min-width: 0; display: contents; }
.assessment-class-page .assess_third_action .md-btn-contained { width: 100%; }

/* Attendance take modal content */
.md-att-take__chip-wrap,
.md-att-summary__chip-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.md-att-take__bulk {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 16px;
}

.md-att-take__bulk .md-btn-contained,
.md-att-take__bulk .md-att-bulk__btn {
  width: 100%;
  min-height: 40px;
  padding: 8px 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  box-shadow: none;
  border-radius: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-att-bulk__short { display: none; }
.md-att-bulk__full { display: inline; }

@media (max-width: 420px) {
  .md-att-take__bulk {
    gap: 5px;
  }

  .md-att-take__bulk .md-btn-contained,
  .md-att-take__bulk .md-att-bulk__btn {
    min-height: 38px;
    padding: 8px 4px;
    font-size: 0.6875rem;
  }

  .md-att-bulk__full { display: none; }
  .md-att-bulk__short { display: inline; }
}

.md-att-bulk--late { color: #e65100 !important; background: #fff3e0 !important; }
.md-att-bulk--absent { color: #c62828 !important; background: #ffebee !important; }

.md-att-take__date {
  margin-bottom: 16px;
  padding: 12px 14px 14px;
  border: 1px solid rgba(21, 101, 192, 0.22);
  border-radius: 12px;
  background: #f8fbff;
}

.md-att-take__date .mui-field__label {
  display: block;
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1565c0;
}

.md-att-take__date .mui-field__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #202124;
  text-align: center;
  box-shadow: none;
}

.md-att-take__date .mui-field__input:focus {
  outline: none;
  border-color: #1565c0;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16);
}

.md-att-take__table {
  width: 100% !important;
}

.md-att-take .dataTables_wrapper .dataTables_filter {
  float: none !important;
  text-align: left;
  margin: 0 0 14px;
  position: relative;
}

.md-att-take .dataTables_wrapper .dataTables_filter label {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 0;
  color: transparent;
}

.md-att-take .dataTables_wrapper .dataTables_filter input {
  display: block;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 12px 14px 12px 42px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 12px !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center / 16px 16px !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.9375rem !important;
  color: #202124 !important;
  box-shadow: none !important;
}

.md-att-take .dataTables_wrapper .dataTables_filter input:focus {
  outline: none !important;
  border-color: #1565c0 !important;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16) !important;
}

.md-att-take .dataTables_wrapper .dataTables_filter input::placeholder {
  color: #80868b;
  opacity: 1;
}

.md-att-take .dataTables_wrapper .dataTables_length,
.md-att-take .dataTables_wrapper .dataTables_info { display: none !important; }

.md-att-take table thead { display: none; }

.md-att-take table tbody tr,
.md-att-take table tbody td {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.md-att-take table tbody { display: flex; flex-direction: column; gap: 10px; }

.md-att-student {
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #fff;
}

.md-att-student--stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px;
}

.md-att-student--stack .md-att-student__name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #202124;
  text-align: left;
  line-height: 1.3;
}

.md-att-status--segment {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  width: 100%;
  padding: 3px;
  border-radius: 12px;
  background: #f1f3f4;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.md-att-status--segment .md-att-status__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 8px 6px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #5f6368;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  cursor: pointer;
  position: relative;
}

.md-att-status__opt .btn-check { position: absolute; opacity: 0; pointer-events: none; }

.md-att-status--segment .md-att-status__opt--present.active,
.md-att-status--segment .md-att-status__opt--present:has(input:checked) {
  background: #2e7d32;
  color: #fff;
}

.md-att-status--segment .md-att-status__opt--late.active,
.md-att-status--segment .md-att-status__opt--late:has(input:checked) {
  background: #f9a825;
  color: #fff;
}

.md-att-status--segment .md-att-status__opt--absent.active,
.md-att-status--segment .md-att-status__opt--absent:has(input:checked) {
  background: #c62828;
  color: #fff;
}

.md-att-status__opt--present.active,
.md-att-status__opt--present:has(input:checked) {
  background: #2e7d32;
  border-color: #2e7d32;
  color: #fff;
}

.md-att-status__opt--late.active,
.md-att-status__opt--late:has(input:checked) {
  background: #f9a825;
  border-color: #f9a825;
  color: #fff;
}

.md-att-status__opt--absent.active,
.md-att-status__opt--absent:has(input:checked) {
  background: #c62828;
  border-color: #c62828;
  color: #fff;
}

.md-att-sheet-actions,
.md-assess-sheet-actions {
  display: flex;
  gap: 8px;
  width: 100%;
}

.md-att-sheet-actions .md-btn-contained,
.md-assess-sheet-actions .md-btn-contained {
  flex: 1;
  min-height: 42px;
  text-transform: none;
  box-shadow: none;
}

.md-att-sheet-actions .md-btn-contained:not(.md-btn-contained--tonal),
.md-assess-sheet-actions .md-btn-contained:not(.md-btn-contained--tonal) {
  background: var(--att-primary, #1565c0);
}

/* Attendance sheet header */
#attendance_modal.attendance-att-sheet .md-att-sheet-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: calc(10px + var(--app-safe-top, 0px) + env(safe-area-inset-top, 0px)) 12px 12px !important;
  background: #1565c0 !important;
  border-bottom: none !important;
  color: #fff;
}

#attendance_modal.attendance-att-sheet .md-att-sheet-header__bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#attendance_modal.attendance-att-sheet .md-att-sheet-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1rem;
}

#attendance_modal.attendance-att-sheet .md-att-sheet-header__copy {
  flex: 1 1 auto;
  min-width: 0;
}

#attendance_modal.attendance-att-sheet .md-att-sheet-header .md-timeline-sheet__overline {
  margin: 0 0 2px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
}

#attendance_modal.attendance-att-sheet .md-att-sheet-header .md-timeline-sheet__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff !important;
  line-height: 1.25;
}

#attendance_modal.attendance-att-sheet .md-att-sheet-header__context {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#attendance_modal.attendance-att-sheet .md-att-sheet-header .md-timeline-sheet__close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  margin-left: auto !important;
  padding: 0;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 1.0625rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.12s ease;
}

#attendance_modal.attendance-att-sheet .md-att-sheet-header .md-timeline-sheet__close i {
  display: block;
  font-size: 1.0625rem;
  line-height: 1;
  width: 1em;
  text-align: center;
  pointer-events: none;
}

#attendance_modal.attendance-att-sheet .md-att-sheet-header .md-timeline-sheet__close:hover,
#attendance_modal.attendance-att-sheet .md-att-sheet-header .md-timeline-sheet__close:focus-visible {
  background: rgba(255, 255, 255, 0.32);
  color: #fff;
  outline: none;
}

#attendance_modal.attendance-att-sheet .md-att-sheet-header .md-timeline-sheet__close:active {
  transform: scale(0.94);
}

/* Attendance calendar sheet */
#attendance_calendar_modal.attendance-cal-sheet,
#assessment_calendar_modal.attendance-cal-sheet {
  display: none !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  z-index: 1290 !important;
  overflow: hidden !important;
  transform: none !important;
  opacity: 0;
  pointer-events: none;
}

#attendance_calendar_modal.attendance-cal-sheet.menu-active,
#assessment_calendar_modal.attendance-cal-sheet.menu-active {
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  pointer-events: all !important;
}

#attendance_calendar_modal.attendance-cal-sheet .md-timeline-sheet__panel,
#assessment_calendar_modal.attendance-cal-sheet .md-timeline-sheet__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;
  background: #fff;
  font-family: "Jost", sans-serif;
  overflow: hidden;
}

#attendance_calendar_modal.attendance-cal-sheet .md-timeline-sheet__handle,
#assessment_calendar_modal.attendance-cal-sheet .md-timeline-sheet__handle {
  display: none;
}

#attendance_calendar_modal.attendance-cal-sheet .md-att-sheet-header,
#assessment_calendar_modal.attendance-cal-sheet .md-att-sheet-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex-shrink: 0;
  padding: calc(10px + var(--app-safe-top, 0px) + env(safe-area-inset-top, 0px)) 12px 12px !important;
  background: #1565c0 !important;
  border-bottom: none !important;
  color: #fff;
}

#attendance_calendar_modal.attendance-cal-sheet .md-att-sheet-header__bar,
#assessment_calendar_modal.attendance-cal-sheet .md-att-sheet-header__bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#attendance_calendar_modal.attendance-cal-sheet .md-att-sheet-header__icon,
#assessment_calendar_modal.attendance-cal-sheet .md-att-sheet-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1rem;
}

#attendance_calendar_modal.attendance-cal-sheet .md-att-sheet-header__copy,
#assessment_calendar_modal.attendance-cal-sheet .md-att-sheet-header__copy {
  flex: 1 1 auto;
  min-width: 0;
}

#attendance_calendar_modal.attendance-cal-sheet .md-att-sheet-header .md-timeline-sheet__overline,
#assessment_calendar_modal.attendance-cal-sheet .md-att-sheet-header .md-timeline-sheet__overline {
  margin: 0 0 2px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
}

#attendance_calendar_modal.attendance-cal-sheet .md-att-sheet-header .md-timeline-sheet__title,
#assessment_calendar_modal.attendance-cal-sheet .md-att-sheet-header .md-timeline-sheet__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff !important;
  line-height: 1.25;
}

#attendance_calendar_modal.attendance-cal-sheet .md-att-sheet-header__context,
#assessment_calendar_modal.attendance-cal-sheet .md-att-sheet-header__context {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#attendance_calendar_modal.attendance-cal-sheet .md-att-sheet-header .md-timeline-sheet__close,
#assessment_calendar_modal.attendance-cal-sheet .md-att-sheet-header .md-timeline-sheet__close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  margin-left: auto !important;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 1.0625rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.12s ease;
}

#attendance_calendar_modal.attendance-cal-sheet .md-att-sheet-header .md-timeline-sheet__close i,
#assessment_calendar_modal.attendance-cal-sheet .md-att-sheet-header .md-timeline-sheet__close i {
  display: block;
  font-size: 1.0625rem;
  line-height: 1;
  width: 1em;
  text-align: center;
  pointer-events: none;
}

#attendance_calendar_modal.attendance-cal-sheet .md-att-sheet-header .md-timeline-sheet__close:hover,
#assessment_calendar_modal.attendance-cal-sheet .md-att-sheet-header .md-timeline-sheet__close:hover,

#attendance_calendar_modal.attendance-cal-sheet .md-att-sheet-header .md-timeline-sheet__close:focus-visible,
#assessment_calendar_modal.attendance-cal-sheet .md-att-sheet-header .md-timeline-sheet__close:focus-visible {
  background: rgba(255, 255, 255, 0.32);
  color: #fff;
  outline: none;
}

#attendance_calendar_modal.attendance-cal-sheet .md-att-sheet-header .md-timeline-sheet__close:active,
#assessment_calendar_modal.attendance-cal-sheet .md-att-sheet-header .md-timeline-sheet__close:active {
  transform: scale(0.94);
}

#attendance_calendar_modal.attendance-cal-sheet .md-timeline-sheet__body,
#assessment_calendar_modal.attendance-cal-sheet .md-timeline-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 8px;
  background: #f8fafc;
}

#attendance_calendar_modal.attendance-cal-sheet .md-timeline-sheet__footer,
#assessment_calendar_modal.attendance-cal-sheet .md-timeline-sheet__footer {
  flex-shrink: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

.md-att-cal {
  max-width: 420px;
  margin: 0 auto;
}

.md-att-cal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.md-att-cal__month {
  margin: 0;
  flex: 1 1 auto;
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.md-att-cal__nav-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: #fff;
  color: #1565c0;
  cursor: pointer;
  flex-shrink: 0;
}

.md-att-cal__nav-btn:hover,
.md-att-cal__nav-btn:focus-visible {
  background: #e3f2fd;
  outline: none;
}

.md-att-cal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}

.md-att-cal__weekdays span {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.45);
  padding: 4px 0;
}

.md-att-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.md-att-cal__day {
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-height: 40px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 650;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.md-att-cal__day:active {
  transform: scale(0.96);
}

.md-att-cal__day--taken {
  background: #2e7d32;
  color: #fff;
  box-shadow: 0 1px 2px rgba(46, 125, 50, 0.25);
}

.md-att-cal__day--empty {
  background: #e2e8f0;
  color: #475569;
}

.md-att-cal__day--outside {
  opacity: 0.38;
}

.md-att-cal__day--today:not(.md-att-cal__day--outside) {
  box-shadow: inset 0 0 0 2px #1565c0;
}

.md-att-cal__day--taken.md-att-cal__day--today {
  box-shadow: inset 0 0 0 2px #fff, 0 1px 2px rgba(46, 125, 50, 0.25);
}

.md-att-cal__day:focus-visible {
  outline: 2px solid #1565c0;
  outline-offset: 2px;
}

.md-att-cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
  justify-content: center;
}

.md-att-cal__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
}

.md-att-cal__swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex-shrink: 0;
}

.md-att-cal__swatch--taken {
  background: #2e7d32;
}

.md-att-cal__swatch--empty {
  background: #e2e8f0;
}

.md-att-cal__hint {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(15, 23, 42, 0.55);
}

/* Sheets: attendance_modal + assessment sheets — hidden until .menu-active */
#attendance_modal.attendance-att-sheet,
#create.assessment-class-sheet,
#create_assignment.topic-create-sheet,
#create_e_l_file.topic-create-sheet,
#assign_student_to_subclass_modal.assessment-class-student-sheet,
#inputscore.assessment-class-student-sheet,
#assign_student_to_subclass_modal.attendance-att-sheet {
  display: none !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  /* Stretch to viewport edges — 100svh/dvh collapses when the file picker
     resizes the visual viewport and leaves a gap under the footer. */
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  z-index: 1300 !important;
  overflow: hidden !important;
  transform: none !important;
  opacity: 0;
  pointer-events: none;
}

#attendance_modal.attendance-att-sheet.menu-active,
#create.assessment-class-sheet.menu-active,
#create_assignment.topic-create-sheet.menu-active,
#create_e_l_file.topic-create-sheet.menu-active,
#fullEmptyModal.topic-create-sheet.menu-active,
#assign_student_to_subclass_modal.assessment-class-student-sheet.menu-active,
#inputscore.assessment-class-student-sheet.menu-active,
#assign_student_to_subclass_modal.attendance-att-sheet.menu-active {
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  pointer-events: all !important;
}

#attendance_modal.attendance-att-sheet .md-timeline-sheet__panel,
#create.assessment-class-sheet .md-timeline-sheet__panel,
#create_assignment.topic-create-sheet .md-timeline-sheet__panel,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__panel,
#fullEmptyModal.topic-create-sheet .md-timeline-sheet__panel,
#assign_student_to_subclass_modal.assessment-class-student-sheet .md-timeline-sheet__panel,
#inputscore.assessment-class-student-sheet .md-timeline-sheet__panel,
#assign_student_to_subclass_modal.attendance-att-sheet .md-timeline-sheet__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;
  background: #fff;
  font-family: "Jost", sans-serif;
  overflow: hidden;
}

#attendance_modal.attendance-att-sheet .md-timeline-sheet__handle,
#create.assessment-class-sheet .md-timeline-sheet__handle,
#create_assignment.topic-create-sheet .md-timeline-sheet__handle,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__handle,
#assign_student_to_subclass_modal.assessment-class-student-sheet .md-timeline-sheet__handle,
#inputscore.assessment-class-student-sheet .md-timeline-sheet__handle,
#assign_student_to_subclass_modal.attendance-att-sheet .md-timeline-sheet__handle { display: none; }

#attendance_modal.attendance-att-sheet .md-timeline-sheet__header,
#create.assessment-class-sheet .md-timeline-sheet__header,
#create_assignment.topic-create-sheet .md-timeline-sheet__header,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__header,
#assign_student_to_subclass_modal.assessment-class-student-sheet .md-timeline-sheet__header,
#inputscore.assessment-class-student-sheet .md-timeline-sheet__header,
#assign_student_to_subclass_modal.attendance-att-sheet .md-timeline-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: calc(10px + var(--app-safe-top, 0px) + env(safe-area-inset-top, 0px)) 8px 12px 20px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

#attendance_modal.attendance-att-sheet .md-timeline-sheet__overline,
#create.assessment-class-sheet .md-timeline-sheet__overline,
#create_assignment.topic-create-sheet .md-timeline-sheet__overline,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__overline,
#assign_student_to_subclass_modal.assessment-class-student-sheet .md-timeline-sheet__overline,
#inputscore.assessment-class-student-sheet .md-timeline-sheet__overline,
#assign_student_to_subclass_modal.attendance-att-sheet .md-timeline-sheet__overline {
  display: block;
  margin: 0 0 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a73e8;
}

#attendance_modal.attendance-att-sheet .md-timeline-sheet__title,
#create.assessment-class-sheet .md-timeline-sheet__title,
#create_assignment.topic-create-sheet .md-timeline-sheet__title,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__title,
#assign_student_to_subclass_modal.assessment-class-student-sheet .md-timeline-sheet__title,
#inputscore.assessment-class-student-sheet .md-timeline-sheet__title,
#assign_student_to_subclass_modal.attendance-att-sheet .md-timeline-sheet__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #202124;
}

#attendance_modal.attendance-att-sheet .md-timeline-sheet__close,
#create.assessment-class-sheet .md-timeline-sheet__close,
#create_assignment.topic-create-sheet .md-timeline-sheet__close,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__close,
#assign_student_to_subclass_modal.assessment-class-student-sheet .md-timeline-sheet__close,
#inputscore.assessment-class-student-sheet .md-timeline-sheet__close,
#assign_student_to_subclass_modal.attendance-att-sheet .md-timeline-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #202124;
  cursor: pointer;
}

#attendance_modal.attendance-att-sheet .md-timeline-sheet__body,
#create.assessment-class-sheet .md-timeline-sheet__body,
#create_assignment.topic-create-sheet .md-timeline-sheet__body,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__body,
#assign_student_to_subclass_modal.assessment-class-student-sheet .md-timeline-sheet__body,
#inputscore.assessment-class-student-sheet .md-timeline-sheet__body,
#assign_student_to_subclass_modal.attendance-att-sheet .md-timeline-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px 16px 24px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

/* WebView: keep PTR from stealing the attendance list scroll */
html.is-webview #attendance_modal.attendance-att-sheet .md-timeline-sheet__body,
body.is-webview #attendance_modal.attendance-att-sheet .md-timeline-sheet__body {
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
}

/* WebView: lock document bounce while attendance (and peer) sheets are open */
html:has(#attendance_modal.menu-active),
body:has(#attendance_modal.menu-active),
html:has(#assign_student_to_subclass_modal.attendance-att-sheet.menu-active),
body:has(#assign_student_to_subclass_modal.attendance-att-sheet.menu-active),
html:has(#assign_student_to_subject_modal.md-ecr-sheet.menu-active),
body:has(#assign_student_to_subject_modal.md-ecr-sheet.menu-active),
html:has(#fullEmptyModal.menu-active),
body:has(#fullEmptyModal.menu-active),
html:has(#emptyModal.menu-active),
body:has(#emptyModal.menu-active),
html.md-cover-sheet-open,
body.md-cover-sheet-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
}

body.md-cover-sheet-open {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

#attendance_modal.attendance-att-sheet.menu-active,
#attendance_modal.attendance-att-sheet.menu-active .md-timeline-sheet__panel {
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

#create.assessment-class-sheet .md-timeline-sheet__body ,
#create_assignment.topic-create-sheet .md-timeline-sheet__body ,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__body {
  background: #f3f5f8;
  padding: 16px 16px 24px;
}

#create.assessment-class-sheet .md-timeline-sheet__lead ,
#create_assignment.topic-create-sheet .md-timeline-sheet__lead ,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__lead {
  display: block;
  margin: 4px 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(32, 33, 36, 0.65);
}

.md-assess-create {
  max-width: 560px;
  margin: 0 auto;
  font-family: "Jost", sans-serif;
}

.md-assess-create__intro {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(21, 101, 192, 0.16);
  border-radius: 14px;
  background: linear-gradient(135deg, #e3f2fd 0%, #f8fbff 100%);
}

.md-assess-create__intro-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  color: #1565c0;
  font-size: 1rem;
  box-shadow: 0 1px 3px rgba(13, 71, 161, 0.14);
}

.md-assess-create__intro-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.md-assess-create__intro-title {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0d47a1;
  line-height: 1.25;
}

.md-assess-create__intro-text {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(13, 71, 161, 0.72);
}

.md-assess-create__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(21, 101, 192, 0.12);
  background: #fff;
  color: #1565c0;
  font-size: 0.8125rem;
  font-weight: 600;
}

.md-assess-create__loading.d-none {
  display: none !important;
}

.md-assess-create__loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(21, 101, 192, 0.2);
  border-top-color: #1565c0;
  border-radius: 50%;
  animation: md-assess-create-spin 0.7s linear infinite;
}

@keyframes md-assess-create-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .md-assess-create__loading-spinner {
    animation: none;
    border-top-color: rgba(21, 101, 192, 0.45);
  }
}

.md-assess-create__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.md-assess-create__field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.md-assess-create__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border-radius: 50%;
  background: #e3f2fd;
  color: #1565c0;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.md-assess-create__control {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

#create.assessment-class-sheet .md-assess-create .mui-field__label ,
#create_assignment.topic-create-sheet .md-assess-create .mui-field__label ,
#create_e_l_file.topic-create-sheet .md-assess-create .mui-field__label {
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #5f6368;
}

#create.assessment-class-sheet .md-assess-create .mui-field__input,
#create_assignment.topic-create-sheet .md-assess-create .mui-field__input,
#create_e_l_file.topic-create-sheet .md-assess-create .mui-field__input,
#create.assessment-class-sheet .md-assess-create .mui-field__select ,
#create_assignment.topic-create-sheet .md-assess-create .mui-field__select ,
#create_e_l_file.topic-create-sheet .md-assess-create .mui-field__select {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 12px;
  background: #f8f9fa;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #202124;
  box-shadow: none;
}

#create.assessment-class-sheet .md-assess-create .mui-field__input:hover,
#create_assignment.topic-create-sheet .md-assess-create .mui-field__input:hover,
#create_e_l_file.topic-create-sheet .md-assess-create .mui-field__input:hover,
#create.assessment-class-sheet .md-assess-create .mui-field__select:hover ,
#create_assignment.topic-create-sheet .md-assess-create .mui-field__select:hover ,
#create_e_l_file.topic-create-sheet .md-assess-create .mui-field__select:hover {
  background: #f1f3f4;
  border-color: rgba(15, 23, 42, 0.22);
}

#create.assessment-class-sheet .md-assess-create .mui-field__input:focus,
#create_assignment.topic-create-sheet .md-assess-create .mui-field__input:focus,
#create_e_l_file.topic-create-sheet .md-assess-create .mui-field__input:focus,
#create.assessment-class-sheet .md-assess-create .mui-field__select:focus ,
#create_assignment.topic-create-sheet .md-assess-create .mui-field__select:focus ,
#create_e_l_file.topic-create-sheet .md-assess-create .mui-field__select:focus {
  outline: none;
  background: #fff;
  border-color: #1565c0;
  border-bottom-width: 1px;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16);
}

#create.assessment-class-sheet .md-assess-create .mui-field__input::placeholder ,
#create_assignment.topic-create-sheet .md-assess-create .mui-field__input::placeholder ,
#create_e_l_file.topic-create-sheet .md-assess-create .mui-field__input::placeholder {
  color: rgba(32, 33, 36, 0.45);
  font-weight: 500;
}

.md-assess-create__hint {
  margin: 6px 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(32, 33, 36, 0.55);
}

#attendance_modal.attendance-att-sheet .md-timeline-sheet__footer,
#create.assessment-class-sheet .md-timeline-sheet__footer,
#create_assignment.topic-create-sheet .md-timeline-sheet__footer,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__footer,
#fullEmptyModal.topic-create-sheet .md-timeline-sheet__footer,
#assign_student_to_subclass_modal.assessment-class-student-sheet .md-timeline-sheet__footer,
#inputscore.assessment-class-student-sheet .md-timeline-sheet__footer,
#assign_student_to_subclass_modal.attendance-att-sheet .md-timeline-sheet__footer {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  margin-top: auto;
  padding: 12px 16px calc(12px + var(--md-sheet-footer-safe, 0px));
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  position: relative;
  z-index: 2;
}

/* Keep e-library / activity create footers pinned while file picker opens */
#create_assignment.topic-create-sheet.menu-active,
#create_e_l_file.topic-create-sheet.menu-active,
#fullEmptyModal.topic-create-sheet.menu-active {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: auto !important;
  max-height: none !important;
}

#create_assignment.topic-create-sheet .md-timeline-sheet__panel,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__panel,
#fullEmptyModal.topic-create-sheet .md-timeline-sheet__panel {
  min-height: 100%;
  height: 100%;
}

/*
 * Filestyle parks a real <input type="file"> in the upload row. Focusing it
 * (via "Choose file") makes the browser scroll-into-view and lifts the footer,
 * leaving a gap under the sheet. Park the input off-flow like timeline compose.
 */
#create_assignment.topic-create-sheet input[type="file"].filestyle,
#create_e_l_file.topic-create-sheet input[type="file"].filestyle,
#fullEmptyModal.topic-create-sheet input[type="file"].filestyle,
#create_assignment.topic-create-sheet .bootstrap-filestyle input[type="file"],
#create_e_l_file.topic-create-sheet .bootstrap-filestyle input[type="file"],
#fullEmptyModal.topic-create-sheet .bootstrap-filestyle input[type="file"] {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  overflow: hidden !important;
  z-index: -1 !important;
}

#create_assignment.topic-create-sheet.menu-active .md-timeline-sheet__footer,
#create_e_l_file.topic-create-sheet.menu-active .md-timeline-sheet__footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  z-index: 40 !important;
  padding: 12px 16px calc(12px + var(--md-sheet-footer-safe, 0px)) !important;
  background: #fff !important;
  box-shadow: 0 -1px 0 rgba(15, 23, 42, 0.08);
}

#create_assignment.topic-create-sheet .md-timeline-sheet__body,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__body {
  padding-bottom: calc(88px + var(--md-sheet-footer-safe, 0px)) !important;
}

#attendance_modal.attendance-att-sheet .md-timeline-sheet__footer .md-btn-contained,
#create.assessment-class-sheet .md-timeline-sheet__footer .md-btn-contained,
#create_assignment.topic-create-sheet .md-timeline-sheet__footer .md-btn-contained,
#create_e_l_file.topic-create-sheet .md-timeline-sheet__footer .md-btn-contained,
#fullEmptyModal.topic-create-sheet .md-timeline-sheet__footer .md-btn-contained,
#assign_student_to_subclass_modal.assessment-class-student-sheet .md-timeline-sheet__footer .md-btn-contained,
#inputscore.assessment-class-student-sheet .md-timeline-sheet__footer .md-btn-contained,
#assign_student_to_subclass_modal.attendance-att-sheet .md-timeline-sheet__footer .md-btn-contained {
  flex: 1;
  min-height: 42px;
  text-transform: none;
  box-shadow: none;
}

/* Assessment modal form — clean input sheet */
#inputscore.assessment-class-student-sheet .md-assess-input-header.md-timeline-sheet__header {
  align-items: center;
  gap: 8px;
  padding: calc(8px + var(--app-safe-top, 0px) + env(safe-area-inset-top, 0px)) 10px 10px 16px;
  border-bottom: 1px solid rgba(144, 202, 249, 0.18);
  background:
    linear-gradient(135deg, #0d47a1 0%, #1565c0 48%, #0b3d91 100%);
  box-shadow: 0 1px 0 rgba(13, 71, 161, 0.35);
}

#inputscore.assessment-class-student-sheet .md-assess-input-header .md-timeline-sheet__heading {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#inputscore.assessment-class-student-sheet .md-assess-input-header .md-timeline-sheet__overline {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #90caf9;
  line-height: 1.2;
}

#inputscore.assessment-class-student-sheet .md-assess-input-header .md-timeline-sheet__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#inputscore.assessment-class-student-sheet .md-assess-input-header .md-timeline-sheet__lead {
  display: block;
  margin: 0;
  max-width: 100%;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(227, 242, 253, 0.88);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#inputscore.assessment-class-student-sheet .md-assess-input-header .md-timeline-sheet__lead:empty {
  display: none;
}

#inputscore.assessment-class-student-sheet .md-assess-input-header .md-timeline-sheet__close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.12);
  color: #e3f2fd;
  border: 1px solid rgba(144, 202, 249, 0.28);
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#inputscore.assessment-class-student-sheet .md-assess-input-header .md-timeline-sheet__close:hover,
#inputscore.assessment-class-student-sheet .md-assess-input-header .md-timeline-sheet__close:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(187, 222, 251, 0.45);
  color: #fff;
}

/* Remark input modal — attendance field grid */
.md-assess-attend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.md-assess-attend-grid .mui-field__input {
  min-height: 44px;
  text-align: center;
}

.assessment-class-student-page .md-assess-card__actions--2 {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#inputscore.assessment-class-student-sheet .md-timeline-sheet__body {
  background: #f3f5f8;
  padding: 10px 12px 16px;
}

.md-assess-modal {
  max-width: 680px;
  margin: 0 auto;
  font-family: "Jost", sans-serif;
}

.md-assess-modal__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 120px;
  margin: 8px 0;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(21, 101, 192, 0.12);
  background: #fff;
  color: #1565c0;
  font-size: 0.875rem;
  font-weight: 600;
}

.md-assess-modal__loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(21, 101, 192, 0.2);
  border-top-color: #1565c0;
  border-radius: 50%;
  animation: md-assess-modal-spin 0.7s linear infinite;
}

@keyframes md-assess-modal-spin {
  to { transform: rotate(360deg); }
}

.md-assess-modal__hint {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0 0 10px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(21, 101, 192, 0.16);
  border-radius: 12px;
  background: #e8f0fe;
  color: #0d47a1;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

.md-assess-modal__hint-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  align-self: stretch;
  min-height: 100%;
  background: #1565c0;
  color: #fff;
  font-size: 0.9375rem;
}

.md-assess-modal__hint-text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  color: #1565c0;
}

.md-assess-section__head {
  margin: 0 0 6px;
}

.md-assess-section__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #202124;
}

.md-assess-section__hint {
  margin: 2px 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(32, 33, 36, 0.55);
}

.md-assess-keys {
  margin: 0 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.md-assess-keys__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
  background: #fff;
  color: #0d47a1;
  font-size: 0.8125rem;
  font-weight: 700;
  user-select: none;
}

.md-assess-keys__toggle::-webkit-details-marker {
  display: none;
}

.md-assess-keys__toggle-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.md-assess-keys__chevron {
  font-size: 0.6875rem;
  color: #5f6368;
  transition: transform 0.15s ease;
}

.md-assess-keys[open] .md-assess-keys__chevron {
  transform: rotate(180deg);
}

.md-assess-keys__panel {
  padding: 6px 8px 8px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  background: #f8fafc;
}

.md-assess-keys__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.md-assess-keys__band {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #fff;
}

.md-assess-keys__range {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 6px;
  background: #e8f0fe;
  color: #0d47a1;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.md-assess-keys__name {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 2px 5px;
  border-radius: 6px;
  background: #eceff1;
  color: #546e7a;
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-assess-keys__empty {
  margin: 0;
  padding: 4px 2px;
  font-size: 0.75rem;
  color: rgba(32, 33, 36, 0.55);
  grid-column: 1 / -1;
}

.md-assess-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.md-assess-table th {
  background: #e8f0fe;
  color: #0d47a1;
  padding: 8px;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(21, 101, 192, 0.12);
}

.md-assess-table td {
  padding: 10px 8px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  vertical-align: middle;
  color: #202124;
}

.md-assess-table tr:last-child td {
  border-bottom: none;
}

.md-assess-comment,
.md-assess-scores {
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.md-assess-comment__field {
  margin: 0;
}

.md-assess-modal .mui-field__input,
.md-assess-modal textarea.mui-field__input {
  min-height: 112px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 12px;
  background: #f8f9fa;
  font-size: 0.875rem;
  font-weight: 500;
  color: #202124;
  resize: vertical;
  box-shadow: none;
}

.md-assess-modal .mui-field__input:focus,
.md-assess-modal textarea.mui-field__input:focus {
  outline: none;
  background: #fff;
  border-color: #1565c0;
  border-bottom-width: 1px;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16);
}

.md-assess-table-wrap {
  overflow: auto;
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #f7f9fc;
  -webkit-overflow-scrolling: touch;
}

.md-assess-table__col-item {
  min-width: 0;
  width: auto;
}

.md-assess-table__cat-row td {
  padding: 0;
  border-bottom: none;
  background: transparent;
}

.md-assess-cat {
  margin: 0 0 8px;
  padding: 10px;
  border: 1px solid rgba(21, 101, 192, 0.14);
  border-radius: 12px;
  background: #f8fbff;
}

.md-assess-cat__title {
  margin: 0 0 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #0d47a1;
}

.md-assess-cat__comment {
  margin: 0;
}

.md-assess-cat__comment .mui-field__input {
  min-height: 96px;
}

/* Score rows — timeline-style bordered cards */
.md-assess-scores .md-assess-table {
  border-collapse: separate;
  border-spacing: 0 8px;
}

.md-assess-scores .md-assess-table thead th {
  border-bottom: none;
}

.md-assess-table__score-row td {
  padding: 10px 12px;
  vertical-align: middle;
  border-top: 1px solid #c0c4c8;
  border-bottom: 1px solid #c0c4c8;
  background: #fff;
}

.md-assess-table__score-row:hover td {
  background: #fafbfd;
}

.md-assess-table__item-cell {
  width: auto;
  max-width: none;
  padding-right: 8px !important;
  border-left: 1px solid #c0c4c8;
  border-right: 1px solid #c0c4c8;
  border-radius: 12px 0 0 12px;
}

.md-assess-table__mark-cell {
  width: 1%;
  white-space: nowrap;
  padding-left: 4px !important;
  vertical-align: middle;
  text-align: right;
  border-right: 1px solid #c0c4c8;
  border-radius: 0 12px 12px 0;
}

.md-assess-table__score-row td.md-assess-table__mark-cell:not(:last-child) {
  border-right: none;
  border-radius: 0;
}

.md-assess-subcat {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid #c0c4c8;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  box-sizing: border-box;
}

.md-assess-subcat__bullet {
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: #1565c0;
}

.md-assess-subcat__name {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #202124;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.md-assess-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.md-assess-mark__col-label {
  display: none;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(32, 33, 36, 0.55);
}

.md-assess-mark__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8f0fe;
  color: #1a73e8;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}

.md-assess-mark__controls {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.md-assess-mark__field {
  width: 52px;
  margin: 0 !important;
}

.md-assess-mark__field.mb-1 {
  margin-bottom: 0 !important;
}

.md-assess-mark__field input,
.md-assess-mark__field .form-control {
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 4px 2px !important;
  text-align: center;
  border: 1px solid rgba(15, 23, 42, 0.16) !important;
  border-radius: 10px !important;
  background: #f8f9fa !important;
  font-family: inherit !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #202124 !important;
  box-shadow: none !important;
}

.md-assess-mark__field input:focus,
.md-assess-mark__field .form-control:focus {
  outline: none !important;
  background: #fff !important;
  border-color: #1565c0 !important;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16) !important;
}

.md-assess-mark__field.error-border input,
.md-assess-mark__field.error-border .form-control {
  border-color: #c62828 !important;
  background: #fff5f5 !important;
}

.md-assess-mark__badge.md-chip {
  min-width: 32px;
  justify-content: center;
  min-height: 22px;
  padding: 2px 6px;
  font-size: 0.6875rem;
  font-weight: 700;
}

/* When multiple score columns, show compact column labels under header space */
.md-assess-table thead th:not(.md-assess-table__col-item) {
  text-align: center;
  padding-right: 8px;
}

@media (max-width: 420px) {
  .md-assess-table__mark-cell {
    padding-left: 2px !important;
  }

  .md-assess-mark__field {
    width: 48px;
  }
}

.md-assess-sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.md-assess-sheet-actions:has(> :nth-child(3)) {
  grid-template-columns: 1fr 1fr 1fr;
}

.md-assess-sheet-actions .md-btn-contained {
  width: 100%;
  min-height: 44px;
  text-transform: none;
  box-shadow: none;
}

#inputscore .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .md-assess-modal__loading-spinner,
  .md-assess-keys__chevron {
    animation: none;
    transition: none;
  }
}

/* Check assess modal content */
.md-assess-check {
  max-width: 560px;
  margin: 0 auto;
  font-family: "Jost", sans-serif;
}

#fullEmptyModal:has(.md-assess-check) .md-timeline-sheet__body.modal-div {
  background: #f3f5f8;
  padding: 16px 16px 24px;
}

#fullEmptyModal:has(.md-assess-check) .md-timeline-sheet__footer.modal-footer {
  display: flex;
  gap: 8px;
}

.md-assess-check__intro {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(21, 101, 192, 0.16);
  border-radius: 14px;
  background: linear-gradient(135deg, #e3f2fd 0%, #f8fbff 100%);
}

.md-assess-check__intro-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  color: #1565c0;
  font-size: 1rem;
  box-shadow: 0 1px 3px rgba(13, 71, 161, 0.14);
}

.md-assess-check__intro-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.md-assess-check__intro-title {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0d47a1;
  line-height: 1.25;
}

.md-assess-check__intro-text {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(13, 71, 161, 0.72);
}

.md-assess-check__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 100%;
  margin: 0 0 14px;
  padding: 4px;
  border-radius: 12px;
  background: #f1f3f4;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.md-assess-check__tab {
  appearance: none;
  border: none;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;
  color: var(--md-text-secondary, rgba(0, 0, 0, 0.6));
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.md-assess-check__tab.is-active,
.md-assess-check__tab.active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.md-assess-check__panel {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.md-assess-check__panel[hidden] {
  display: none !important;
}

.md-assess-check__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.md-assess-check__field {
  display: block;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.md-assess-check__step {
  display: none;
}

.md-assess-check__control {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.md-assess-check__req {
  color: #c62828;
  font-weight: 700;
}

.md-assess-check .mui-field__label {
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #5f6368;
}

.md-assess-check .bootstrap-select > .dropdown-toggle.md-assess-check__picker,
.md-assess-check .bootstrap-select .dropdown-toggle.md-assess-check__picker,
.md-assess-check button.md-assess-check__picker {
  display: flex !important;
  align-items: center;
  width: 100% !important;
  min-height: 48px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  border-radius: 12px !important;
  background: #f8f9fa !important;
  color: #202124 !important;
  font-family: inherit !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  text-align: left !important;
  box-shadow: none !important;
}

.md-assess-check .bootstrap-select > .dropdown-toggle.md-assess-check__picker:hover,
.md-assess-check .bootstrap-select .dropdown-toggle.md-assess-check__picker:focus {
  background: #f1f3f4 !important;
  border-color: rgba(15, 23, 42, 0.22) !important;
  outline: none !important;
}

.md-assess-check .bootstrap-select.show > .dropdown-toggle.md-assess-check__picker,
.md-assess-check .bootstrap-select.open > .dropdown-toggle.md-assess-check__picker {
  background: #fff !important;
  border-color: #1565c0 !important;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16) !important;
}

.md-assess-check .bootstrap-select .filter-option-inner-inner {
  color: #202124 !important;
}

.md-assess-check .bootstrap-select .bs-caret,
.md-assess-check .bootstrap-select .caret {
  border-top-color: #5f6368 !important;
}

.md-assess-check__loading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1565c0;
}

.md-assess-check__loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(21, 101, 192, 0.2);
  border-top-color: #1565c0;
  border-radius: 50%;
  animation: md-assess-check-spin 0.7s linear infinite;
}

@keyframes md-assess-check-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .md-assess-check__loading-spinner {
    animation: none;
    border-top-color: rgba(21, 101, 192, 0.45);
  }
}

.md-assess-check__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  text-transform: none;
  box-shadow: none;
}

@media (max-width: 420px) {
  .assessment-class-page .md-assess-toolbar__actions--2 .md-btn-contained,
  .assessment-class-page .md-assess-card__actions--3 .md-btn-contained {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 0.75rem;
    gap: 4px;
  }

  .assessment-class-page .md-assess-card__actions--3 .md-btn-contained i {
    font-size: 0.75rem;
  }

  .attendance-subjectlist-page .md-att-toolbar__actions--2 .md-btn-contained,
  .attendance-subjectlist-page .md-att-toolbar__actions--3 .md-btn-contained,
  .attendance-classlist-page .md-att-toolbar__actions--2 .md-btn-contained,
  .attendance-classlist-page .md-att-toolbar__actions--3 .md-btn-contained {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 0.8125rem;
    gap: 6px;
  }

  .attendance-subjectlist-page .md-att-toolbar__actions--3 .md-btn-contained,
  .attendance-classlist-page .md-att-toolbar__actions--3 .md-btn-contained {
    font-size: 0.75rem;
    padding-left: 6px;
    padding-right: 6px;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .attendance-classlist-page .md-animate-in,
  .attendance-subjectlist-page .md-animate-in,
  .assessment-class-page .md-animate-in,
  .assessment-class-student-page .md-animate-in,
  .attendance-classlist-page .md-att-hero__stamp,
  .attendance-subjectlist-page .md-att-hero__stamp,
  .assessment-class-page .md-assess-hero__stamp,
  .assessment-class-student-page .md-assess-hero__stamp {
    animation: none !important;
    transform: none;
  }
}


.assessment-class-page .md-assess-metric__value .md-chip {
  font-size: 0.6875rem;
  min-height: 22px;
  padding: 2px 8px;
}

/* Student assessment cards — MUI list item style */
.assessment-class-student-page .md-assess-card--student {
  border: 1px solid #c0c4c8 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  background: #fff;
  overflow: hidden;
}

.assessment-class-student-page .md-assess-card--student .md-assess-card__content {
  padding: 12px 14px;
}

.assessment-class-student-page .md-assess-card--student .md-assess-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  margin-bottom: 10px;
}

.assessment-class-student-page .md-assess-card--student .md-assess-card__progress-wrap {
  margin: 0 0 12px;
}

.assessment-class-student-page .md-assess-card--student .md-assess-card__progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
}

.assessment-class-student-page .md-assess-card--student .md-assess-card__progress-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(32, 33, 36, 0.55);
}

.assessment-class-student-page .md-assess-card--student .md-assess-card__progress-value {
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--assess-ink);
}

.assessment-class-student-page .md-assess-card--student .md-assess-card__progress {
  height: 6px;
  border-radius: 999px;
  background: #eef0f3;
  overflow: hidden;
}

.assessment-class-student-page .md-assess-card--student .md-assess-card__progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  min-width: 0;
  background: #d7a3a0;
  transition: width 0.35s ease;
}

.assessment-class-student-page .md-assess-card--student .md-assess-card__progress-bar--ok { background: #9ccc9f; }
.assessment-class-student-page .md-assess-card--student .md-assess-card__progress-bar--mid { background: #e8c47a; }
.assessment-class-student-page .md-assess-card--student .md-assess-card__progress-bar--low,
.assessment-class-student-page .md-assess-card--student .md-assess-card__progress-bar--empty { background: #d7a3a0; }

.assessment-class-student-page .md-assess-card--student .md-assess-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--assess-soft);
  color: var(--assess-primary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.assessment-class-student-page .md-assess-card--student .md-assess-card__heading {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.assessment-class-student-page .md-assess-card--student .md-assess-card__title {
  margin: 0;
  flex: none;
  width: 100%;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #202124;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assessment-class-student-page .md-assess-card--student .md-assess-card__status,
.assessment-class-student-page .md-assess-card--student .submit_status {
  margin-left: 0;
}

.assessment-class-student-page .md-assess-card--student .submit_status .md-chip {
  height: auto;
  min-height: 22px;
  padding: 3px 10px;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
}

.assessment-class-student-page .md-assess-card--student .md-assess-card__actions--solo {
  grid-template-columns: 1fr;
}

.assessment-class-student-page .md-assess-card--student .md-assess-card__actions .md-btn-contained {
  gap: 8px;
  min-height: 40px;
  font-size: 0.875rem;
}

/* Behaviour rating sheet (remark_class_student → fullEmptyModal) */
.md-behaviour {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.md-behaviour__hint {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #5f6368;
}

.md-behaviour__group {
  margin: 0;
  padding: 14px 14px 4px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.md-behaviour__group-title {
  margin: 0 0 12px;
  font-family: "Jost", sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1976d2;
}

.md-behaviour__field {
  margin-bottom: 14px;
}

.md-behaviour__field:last-child {
  margin-bottom: 10px;
}

#fullEmptyModal:has(.md-behaviour) .md-timeline-sheet__body.modal-div {
  padding: 14px 14px 8px;
  background: #f3f5f8;
}

#fullEmptyModal:has(.md-behaviour) .md-timeline-sheet__footer.modal-footer {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px) + var(--md-sheet-footer-safe, 0px));
  background: #fff;
  box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
  z-index: 30;
}

#fullEmptyModal:has(.md-behaviour) .md-timeline-sheet__footer .md-sl-form-actions {
  width: 100%;
}

/* ── zap-app: class-result-page (Pattern C) ── */

html.class-result-app .header.header-fixed,
body.class-result-app .header.header-fixed,
.is-webview.class-result-app .header.header-fixed,
.is-webview body.class-result-app .header.header-fixed,
html.class-result-app .page-title-clear,
body.class-result-app .page-title-clear {
  display: none !important;
}

html.class-result-app body,
body.class-result-app {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html.class-result-app #page,
body.class-result-app #page,
body.class-result-app .md-page.class-result-page,
body.class-result-app .md-page.class-result-page .class-result-feed.page-content,
body.class-result-app .md-page.class-result-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.class-result-page {
  --cr-primary: #1565c0;
  --cr-primary-dark: #0d47a1;
  --cr-soft: #e3f2fd;
  --cr-ink: #0d47a1;
  --cr-bg: #f5f7fb;
  --cr-surface: #ffffff;
  --cr-cover: linear-gradient(135deg, #0d47a1 0%, #1565c0 52%, #42a5f5 100%);
  --md-header-offset: 0px;
  --md-class-result-toolbar-offset: 118px;
  --mui-primary: var(--cr-primary);
  --mui-primary-dark: var(--cr-primary-dark);
  --mui-primary-container: var(--cr-soft);
  --mui-font: "Jost", sans-serif;
  --md-font: "Jost", sans-serif;
  font-family: "Jost", sans-serif !important;
  background: var(--cr-bg);
  min-height: 100vh;
}

.class-result-page a,
.class-result-page button,
.class-result-page .md-btn-contained,
.class-result-page .md-ripple {
  -webkit-tap-highlight-color: transparent;
}

.class-result-page .page-title-clear { display: none !important; }

.class-result-page .class-result-feed.page-content,
.class-result-page .page-content,
.class-result-page .class-result-feed.md-feed {
  max-width: 680px;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--md-class-result-toolbar-offset, 64px) + 8px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 24px) !important;
  background: var(--cr-bg) !important;
  overflow: visible !important;
}

.class-result-page .md-cr-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--mui-elevation-1) !important;
  background: var(--cr-surface) !important;
  transform: none !important;
  overflow: visible !important;
}

.class-result-page .md-cr-toolbar .content,
.class-result-page .md-cr-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 10px 12px 12px !important;
  box-sizing: border-box;
}

.class-result-page .md-cr-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.class-result-page .md-cr-toolbar__back,
.class-result-page .md-cr-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--cr-ink);
  text-decoration: none;
  cursor: pointer;
}

.class-result-page .md-cr-toolbar__back:hover,
.class-result-page .md-cr-toolbar__back:focus-visible,
.class-result-page .md-cr-toolbar__reload:hover,
.class-result-page .md-cr-toolbar__reload:focus-visible {
  background: var(--cr-soft);
  color: var(--cr-primary-dark);
}

.class-result-page .md-cr-toolbar__title {
  flex: 1;
  margin: 0;
  min-width: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--cr-ink);
}

.class-result-page .md-cr-toolbar__filter {
  width: 100%;
}

.class-result-page .md-cr-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin: 0;
  cursor: pointer;
}

.class-result-page .md-cr-filter__overline {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(13, 71, 161, 0.7);
}

.class-result-page .md-cr-filter__control {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 36px 0 40px;
  border-radius: 12px;
  background: var(--cr-soft);
  border: 1px solid rgba(21, 101, 192, 0.14);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.class-result-page .md-cr-filter:focus-within .md-cr-filter__control {
  background: #fff;
  border-color: rgba(21, 101, 192, 0.45);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.12);
}

.class-result-page .md-cr-filter__icon {
  position: absolute;
  left: 14px;
  color: var(--cr-primary);
  font-size: 0.8125rem;
  pointer-events: none;
}

.class-result-page .md-cr-filter__caret {
  position: absolute;
  right: 14px;
  color: #5f6368;
  font-size: 0.6875rem;
  pointer-events: none;
}

.class-result-page .md-cr-filter__select {
  display: block;
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--cr-ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* Material blue header — blue field + soft complementary chips */
.class-result-page .md-class-result-hero {
  overflow: hidden;
  margin: 4px 0 12px;
  border: 1px solid #174ea6;
  border-radius: 12px;
  background: #1967d2;
  box-shadow: 0 1px 2px rgba(26, 115, 232, 0.24);
}

.class-result-page .md-class-result-hero__band {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #0d47a1 0%, #1967d2 48%, #1a73e8 100%);
  color: #fff;
}

.class-result-page .md-class-result-hero__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.class-result-page .md-class-result-hero__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.class-result-page .md-class-result-hero__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #174ea6;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.2);
}

.class-result-page .md-class-result-hero__copy {
  min-width: 0;
  flex: 1;
}

.class-result-page .md-class-result-hero__overline {
  margin: 0 0 2px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #fdd663;
}

.class-result-page .md-class-result-hero__title {
  margin: 0;
  font-family: "Jost", Roboto, sans-serif;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
  letter-spacing: 0;
}

.class-result-page .md-class-result-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.class-result-page .md-class-result-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: none;
}

.class-result-page .md-class-result-hero__meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #fdd663;
  font-size: 0.6875rem;
  flex-shrink: 0;
}

.class-result-page .md-class-result-hero__meta-text {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
}

.class-result-page .md-class-result-hero__meta-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.78);
  flex-shrink: 0;
}

.class-result-page .md-class-result-hero__meta-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.class-result-page .md-class-result-hero__progress-wrap {
  width: 100%;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.class-result-page .md-class-result-hero__progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
}

.class-result-page .md-class-result-hero__progress-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.class-result-page .md-class-result-hero__progress-value {
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.class-result-page .md-class-result-hero__progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.class-result-page .md-class-result-hero__progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  min-width: 0;
  transition: width 0.35s ease;
  background: #fdd663;
}

.class-result-page .md-class-result-hero__progress-bar--ok {
  background: #81c995;
}

.class-result-page .md-class-result-hero__progress-bar--mid {
  background: #fdd663;
}

.class-result-page .md-class-result-hero__progress-bar--low,
.class-result-page .md-class-result-hero__progress-bar--empty {
  background: #f28b82;
}

.class-result-page .md-class-result-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 64px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  flex-shrink: 0;
  text-align: right;
}

.class-result-page .md-class-result-hero__stat-value {
  font-family: "Jost", Roboto, sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: #fff;
}

.class-result-page .md-class-result-hero__stat-label {
  margin-top: 2px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #fdd663;
  opacity: 1;
}

.class-result-page .md-topic-sort {
  margin: 0 0 8px;
}

.class-result-page .md-topic-sort-strip {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(21, 101, 192, 0.16);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.class-result-page .md-topic-sort-strip--result {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.class-result-page .md-topic-sort-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  background: rgba(21, 101, 192, 0.12);
  z-index: 2;
}

.class-result-page .md-topic-sort-strip.is-filtering .md-topic-sort-progress {
  opacity: 1;
  visibility: visible;
}

.class-result-page .md-topic-sort-progress__bar {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 0 2px 2px 0;
  background: #1565c0;
  transform: translateX(-120%);
}

.class-result-page .md-topic-sort-strip.is-filtering .md-topic-sort-progress__bar {
  animation: md-topic-sort-progress-indeterminate 1.1s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .class-result-page .md-topic-sort-strip.is-filtering .md-topic-sort-progress__bar {
    animation: none;
    transform: none;
    width: 100%;
    opacity: 0.55;
  }
}

.class-result-page .md-topic-sort-stat {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  padding: 6px 2px;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.class-result-page .md-topic-sort-stat:hover {
  background: rgba(21, 101, 192, 0.06);
}

.class-result-page .md-topic-sort-stat:focus-visible {
  outline: 2px solid #1565c0;
  outline-offset: 1px;
}

.class-result-page .md-topic-sort-stat.is-active {
  background: rgba(21, 101, 192, 0.1);
  border-color: rgba(21, 101, 192, 0.22);
}

.class-result-page .md-topic-sort-stat.is-alert.is-active {
  background: #fce8e6;
  border-color: #f6aea9;
}

.class-result-page .md-topic-sort-stat__value {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  color: #0d47a1;
}

.class-result-page .md-topic-sort-stat.is-alert .md-topic-sort-stat__value {
  color: #d93025;
}

.class-result-page .md-topic-sort-stat__label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--md-text-secondary, #5f6368);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

@media (min-width: 420px) {
  .class-result-page .md-topic-sort-stat__label {
    font-size: 0.625rem;
  }

  .class-result-page .md-topic-sort-stat {
    padding: 6px 4px;
  }
}

.class-result-page .md-search-field,
.class-result-page .md-search-field--result {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0 14px;
  min-height: 48px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.class-result-page .md-search-field:focus-within {
  border-color: rgba(21, 101, 192, 0.45);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.12);
}

.class-result-page .md-search-field__icon {
  color: #5f6368;
  font-size: 0.875rem;
}

.class-result-page .md-search-field__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
  color: var(--md-text-primary);
}

.class-result-page .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.class-result-page .md-cr-list .dataTables_wrapper { width: 100%; }

.class-result-page .md-cr-list .dataTables_wrapper .dataTables_length,
.class-result-page .md-cr-list .dataTables_wrapper .dataTables_filter,
.class-result-page .md-cr-list .dataTables_wrapper .dataTables_info,
.class-result-page .md-cr-list .dataTables_processing {
  display: none !important;
}

.class-result-page .md-cr-list .dataTables_wrapper .dataTables_paginate {
  margin-top: 12px !important;
  text-align: center;
}

.class-result-page .md-cr-list table#student,
.class-result-page .md-cr-list table#sa-table {
  display: block !important;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.class-result-page .md-cr-list table#student thead,
.class-result-page .md-cr-list table#sa-table thead { display: none; }

.class-result-page .md-cr-list table#student tbody,
.class-result-page .md-cr-list table#sa-table tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.class-result-page .md-cr-list table#student tbody tr,
.class-result-page .md-cr-list table#student tbody td,
.class-result-page .md-cr-list table#sa-table tbody tr,
.class-result-page .md-cr-list table#sa-table tbody td {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.class-result-page .md-cr-list table#student tbody td.dataTables_empty,
.class-result-page .md-cr-list table#sa-table tbody td.dataTables_empty {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
}

.class-result-page .md-cr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  padding: 36px 20px 32px;
  text-align: center;
  border: 1px dashed rgba(21, 101, 192, 0.22);
  border-radius: 16px;
  background: linear-gradient(180deg, #e3f2fd 0%, #fff 72%);
  box-shadow: none;
}

/* Subject list boot loader — card-shaped skeletons while DataTables ajax runs */
.class-result-page .md-cr-loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 8px;
}

.class-result-page .md-cr-loading[hidden] {
  display: none !important;
}

.class-result-page .md-cr-loading__banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #e3f2fd 0%, #fff 68%);
  border: 1px solid rgba(21, 101, 192, 0.14);
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.06);
}

.class-result-page .md-cr-loading__pulse {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1565c0;
  animation: md-cr-loading-pulse 1.4s ease-out infinite;
}

.class-result-page .md-cr-loading__pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(21, 101, 192, 0.35);
  animation: md-cr-loading-ring 1.4s ease-out infinite;
}

.class-result-page .md-cr-loading__copy {
  min-width: 0;
}

.class-result-page .md-cr-loading__title {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0d47a1;
}

.class-result-page .md-cr-loading__text {
  margin: 2px 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #5f6368;
}

@keyframes md-cr-loading-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.85); opacity: 0.7; }
}

@keyframes md-cr-loading-ring {
  0% { transform: scale(0.7); opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 0; }
}

.class-result-page .md-cr-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.class-result-page .md-cr-skeleton__card {
  display: grid;
  grid-template-columns: 4px 44px minmax(0, 1fr);
  grid-template-areas:
    "rail avatar copy"
    "rail avatar copy"
    "rail btn btn";
  column-gap: 12px;
  row-gap: 10px;
  align-items: center;
  padding: 12px 12px 12px 0;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.class-result-page .md-cr-skeleton__rail {
  grid-area: rail;
  align-self: stretch;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #90caf9 0%, #e3f2fd 100%);
}

.class-result-page .md-cr-skeleton__avatar {
  grid-area: avatar;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(90deg, #e3f2fd 0%, #f5f9ff 50%, #e3f2fd 100%);
  background-size: 200% 100%;
  animation: md-cr-skeleton-shimmer 1.2s ease-in-out infinite;
}

.class-result-page .md-cr-skeleton__copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding-right: 8px;
}

.class-result-page .md-cr-skeleton__line {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8eef5 0%, #f5f8fc 50%, #e8eef5 100%);
  background-size: 200% 100%;
  animation: md-cr-skeleton-shimmer 1.2s ease-in-out infinite;
}

.class-result-page .md-cr-skeleton__line--title {
  width: 62%;
  height: 15px;
}

.class-result-page .md-cr-skeleton__line--meta {
  width: 48%;
  height: 10px;
  animation-delay: 0.1s;
}

.class-result-page .md-cr-skeleton__line--btn {
  grid-area: btn;
  width: 100%;
  height: 40px;
  margin: 0 12px 0 0;
  border-radius: 10px;
  animation-delay: 0.18s;
}

.class-result-page .md-cr-skeleton__card:nth-child(2) .md-cr-skeleton__line,
.class-result-page .md-cr-skeleton__card:nth-child(2) .md-cr-skeleton__avatar {
  animation-delay: 0.12s;
}

.class-result-page .md-cr-skeleton__card:nth-child(3) .md-cr-skeleton__line,
.class-result-page .md-cr-skeleton__card:nth-child(3) .md-cr-skeleton__avatar {
  animation-delay: 0.24s;
}

@keyframes md-cr-skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.class-result-page .md-cr-list table#student.is-booting,
.class-result-page .md-cr-list table#sa-table.is-booting,
.class-result-page .md-cr-list #student_wrapper.is-booting,
.class-result-page .md-cr-list #sa-table_wrapper.is-booting,
.class-result-page .md-cr-list:has(table#student.is-booting) #student_wrapper,
.class-result-page .md-cr-list:has(table#sa-table.is-booting) #sa-table_wrapper {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .class-result-page .md-cr-loading__pulse,
  .class-result-page .md-cr-loading__pulse::after {
    animation: none;
  }

  .class-result-page .md-cr-skeleton__avatar,
  .class-result-page .md-cr-skeleton__line {
    animation: none;
    background: #e8eef5;
  }
}

.class-result-page .md-cr-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 4px;
  border-radius: 50%;
  background: #fff;
  color: var(--cr-primary, #1565c0);
  font-size: 1.25rem;
  box-shadow: 0 2px 6px rgba(13, 71, 161, 0.14);
}

.class-result-page .md-cr-empty__title {
  margin: 4px 0 0;
  font-family: "Jost", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(0, 0, 0, 0.87);
}

.class-result-page .md-cr-empty__text {
  margin: 0;
  max-width: 280px;
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  color: #5f6368;
}

.class-result-page .md-cr-empty--loading {
  padding: 28px 20px;
}

.class-result-page .md-cr-empty__spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid rgba(21, 101, 192, 0.18);
  border-top-color: var(--cr-primary, #1565c0);
  border-radius: 50%;
  animation: md-cr-empty-spin 0.7s linear infinite;
}

@keyframes md-cr-empty-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .class-result-page .md-cr-empty__spinner {
    animation: none;
    border-top-color: rgba(21, 101, 192, 0.45);
  }
}

/* Google Material list card — outlined surface + status rail + CardActions */
.class-result-page .md-class-result-card {
  position: relative;
  display: flex;
  overflow: hidden;
  border: 1px solid #dadce0 !important;
  border-radius: 12px !important;
  background: #fff;
  box-shadow: none !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.class-result-page .md-class-result-card:hover {
  border-color: #c0c4c8 !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15) !important;
}

.class-result-page .md-class-result-card__rail {
  width: 4px;
  flex-shrink: 0;
  background: #dadce0;
}

.class-result-page .md-class-result-card--success .md-class-result-card__rail {
  background: #34a853;
}

.extra-result-cat-page .md-class-result-card--success .md-class-result-card__rail {
  background: #1565c0;
}

.class-result-page .md-class-result-card--warning .md-class-result-card__rail {
  background: #f9ab00;
}

.class-result-page .md-class-result-card--error .md-class-result-card__rail {
  background: #ea4335;
}

.class-result-page .md-class-result-card__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.class-result-page .md-class-result-card__content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 16px 12px;
}

.class-result-page .md-class-result-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e8f0fe;
  color: #1967d2;
  font-size: 1rem;
  flex-shrink: 0;
}

.class-result-page .md-class-result-card__monogram {
  font-family: "Jost", Roboto, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.class-result-page .md-class-result-card--success .md-class-result-card__avatar {
  background: #e6f4ea;
  color: #137333;
}

.class-result-page .md-class-result-card--warning .md-class-result-card__avatar {
  background: #fef7e0;
  color: #b06000;
}

.class-result-page .md-class-result-card--error .md-class-result-card__avatar {
  background: #fce8e6;
  color: #c5221f;
}

.class-result-page .md-class-result-card__copy {
  min-width: 0;
  flex: 1;
}

.class-result-page .md-class-result-card__title {
  margin: 0;
  font-family: "Jost", Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  color: #202124;
  letter-spacing: 0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.class-result-page .md-class-result-card--long .md-class-result-card__title {
  font-size: 0.9375rem;
}

.class-result-page .md-class-result-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 4px;
  min-width: 0;
}

.class-result-page .md-class-result-card__class {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
  color: #5f6368;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.class-result-page .md-class-result-card__sep {
  color: #9aa0a6;
  font-size: 0.8125rem;
  line-height: 1;
}

.class-result-page .md-class-result-card__status {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.class-result-page .md-class-result-card__status--success {
  color: #137333;
}

.class-result-page .md-class-result-card__status--warning {
  color: #b06000;
}

.class-result-page .md-class-result-card__status--error {
  color: #c5221f;
}

.class-result-page .md-class-result-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 8px;
  margin: 0;
  padding: 12px 14px 14px;
  border-top: 1px solid #f1f3f4;
  background: #fafbfc;
}

.class-result-page .md-class-result-card__actions:has(> :only-child) {
  grid-template-columns: 1fr;
}

.class-result-page .md-class-result-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 8px;
  font-family: "Jost", Roboto, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.class-result-page .md-class-result-card__btn--primary.md-btn-contained {
  background: #1a73e8;
  color: #fff;
  border: none;
}

.class-result-page .md-class-result-card__btn--primary.md-btn-contained:hover,
.class-result-page .md-class-result-card__btn--primary.md-btn-contained:focus-visible {
  background: #1765cc;
  color: #fff;
  box-shadow: 0 1px 2px rgba(26, 115, 232, 0.35);
}

.class-result-page .md-class-result-card__btn--view.md-btn-outlined {
  background: #fff;
  color: #1967d2;
  border: 1px solid #dadce0;
}

.class-result-page .md-class-result-card__btn--view.md-btn-outlined:hover,
.class-result-page .md-class-result-card__btn--view.md-btn-outlined:focus-visible {
  background: #e8f0fe;
  color: #174ea6;
  border-color: #aecbfa;
  box-shadow: none;
}

/* Term picker sheet — Material list (View → choose term) */
#crTermSheet.md-cr-term-sheet-shell.md-sl-sheet {
  max-height: min(88vh, 720px) !important;
}

#crTermSheet.md-cr-term-sheet-shell .md-sl-sheet__panel {
  max-height: min(88vh, 720px);
  background:
    linear-gradient(180deg, #e8f0fe 0%, #fff 120px),
    #fff;
}

#crTermSheet .md-cr-term-sheet__header {
  padding: 2px 10px 12px 20px;
  border-bottom: 1px solid rgba(218, 220, 224, 0.9);
}

#crTermSheet .md-cr-term-sheet__heading {
  gap: 3px;
}

#crTermSheet .md-sl-sheet__overline {
  color: #1565c0;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.6875rem;
}

#crTermSheet .md-sl-sheet__title {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.87);
}

#crTermSheet .md-sl-sheet__lead {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(32, 33, 36, 0.62);
}

#crTermSheet .md-cr-term-sheet__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 calc(12px + env(safe-area-inset-bottom, 0px));
}

.md-cr-term-sheet {
  padding: 12px 12px 8px;
}

.md-cr-term-sheet__context {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 4px 14px;
}

.md-cr-term-sheet__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  font-family: "Jost", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #174ea6;
  background: rgba(232, 240, 254, 0.95);
  border: 1px solid rgba(174, 203, 250, 0.7);
}

.md-cr-term-sheet__pill .fa {
  font-size: 0.6875rem;
  opacity: 0.85;
}

.md-cr-term-sheet__empty {
  margin: 4px 0;
  padding: 28px 16px;
  text-align: center;
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
  color: rgba(32, 33, 36, 0.65);
  border-radius: 16px;
  background: #f8fbff;
  border: 1px dashed rgba(21, 101, 192, 0.22);
}

.md-cr-term-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.md-cr-term-row {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 72px;
  padding: 0;
  text-decoration: none !important;
  color: inherit;
  border-radius: 16px;
  border: 1px solid #e0e3e7;
  background: #fff;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
  overflow: hidden;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.md-cr-term-row:hover,
.md-cr-term-row:focus-visible {
  background: #f8fbff;
  border-color: #aecbfa;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.12);
  outline: none;
}

.md-cr-term-row.is-active {
  border-color: #8ab4f8;
  background: linear-gradient(90deg, #e8f0fe 0%, #fff 42%);
  box-shadow: 0 1px 3px rgba(26, 115, 232, 0.16);
}

.md-cr-term-row.is-empty {
  opacity: 0.72;
}

.md-cr-term-row.is-empty .md-cr-term-row__cta,
.md-cr-term-row.is-empty .md-cr-term-row__trail {
  color: rgba(32, 33, 36, 0.4);
}

.md-cr-term-row__rail {
  flex: 0 0 4px;
  width: 4px;
  align-self: stretch;
  background: transparent;
}

.md-cr-term-row.is-active .md-cr-term-row__rail {
  background: #1565c0;
}

.md-cr-term-row__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 12px 8px 12px 12px;
}

.md-cr-term-row__line1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.md-cr-term-row__title {
  font-family: "Jost", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.87);
}

.md-cr-term-row__badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-family: "Jost", sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #174ea6;
  background: #d2e3fc;
}

.md-cr-term-row__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.md-cr-term-metric {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 10px;
  background: #f8f9fa;
}

.md-cr-term-row.is-active .md-cr-term-metric {
  background: rgba(255, 255, 255, 0.78);
}

.md-cr-term-metric__value {
  font-family: "Jost", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.87);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-cr-term-metric__value--success { color: #137333; }
.md-cr-term-metric__value--warning { color: #b06000; }
.md-cr-term-metric__value--neutral,
.md-cr-term-metric__value--muted { color: rgba(32, 33, 36, 0.45); }

.md-cr-term-metric__label {
  font-family: "Jost", sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(32, 33, 36, 0.5);
}

.md-cr-term-row__trail {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 14px 12px 6px;
  color: #1967d2;
}

.md-cr-term-row__cta {
  font-family: "Jost", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.md-cr-term-row__trail .fa {
  font-size: 0.75rem;
  opacity: 0.85;
}

@media (max-width: 360px) {
  .md-cr-term-row__metrics {
    grid-template-columns: 1fr 1fr;
  }
  .md-cr-term-metric:last-child {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .class-result-page .md-animate-in {
    animation: none !important;
  }
  .md-cr-term-row {
    transition: none;
  }
}

/* ── zap-app: edit-class-result-page ── */

html.edit-class-result-app .header.header-fixed,
body.edit-class-result-app .header.header-fixed,
.is-webview.edit-class-result-app .header.header-fixed,
.is-webview body.edit-class-result-app .header.header-fixed,
html.edit-class-result-app .page-title-clear,
body.edit-class-result-app .page-title-clear {
  display: none !important;
}

html.edit-class-result-app body,
body.edit-class-result-app {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html.edit-class-result-app #page,
body.edit-class-result-app #page,
body.edit-class-result-app .md-page.edit-class-result-page,
body.edit-class-result-app .md-page.edit-class-result-page .edit-class-result-feed.page-content,
body.edit-class-result-app .md-page.edit-class-result-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.edit-class-result-page {
  --ecr-primary: #1565c0;
  --ecr-primary-dark: #0d47a1;
  --ecr-soft: #e3f2fd;
  --ecr-ink: #0d47a1;
  --ecr-bg: #f5f7fb;
  --ecr-surface: #ffffff;
  --ecr-cover: linear-gradient(135deg, #0d47a1 0%, #1565c0 52%, #42a5f5 100%);
  --md-header-offset: 0px;
  --md-edit-class-result-toolbar-offset: 132px;
  --mui-primary: var(--ecr-primary);
  --mui-primary-dark: var(--ecr-primary-dark);
  --mui-primary-container: var(--ecr-soft);
  --mui-font: "Jost", sans-serif;
  --md-font: "Jost", sans-serif;
  font-family: "Jost", sans-serif !important;
  background: var(--ecr-bg);
  min-height: 100vh;
}

.edit-class-result-page .page-title-clear { display: none !important; }

.edit-class-result-page .edit-class-result-feed.page-content,
.edit-class-result-page .page-content,
.edit-class-result-page .edit-class-result-feed.md-feed {
  --md-ecr-score-footer-height: 64px;
  max-width: 960px;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--md-edit-class-result-toolbar-offset, 132px) + 8px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--md-ecr-score-footer-height, 64px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 16px) !important;
  background: var(--ecr-bg) !important;
  overflow: visible !important;
}

.edit-class-result-page .md-ecr-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  background: #fff !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none !important;
}

.edit-class-result-page .md-ecr-toolbar .content,
.edit-class-result-page .md-ecr-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100% !important;
  max-width: 960px;
  margin: 0 auto !important;
  padding: 8px 12px 10px !important;
  box-sizing: border-box;
}

.edit-class-result-page .md-ecr-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.edit-class-result-page .md-ecr-toolbar__back,
.edit-class-result-page .md-ecr-toolbar__help,
.edit-class-result-page .md-ecr-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ecr-ink);
  text-decoration: none;
  cursor: pointer;
}

.edit-class-result-page .md-ecr-toolbar__back:hover,
.edit-class-result-page .md-ecr-toolbar__help:hover,
.edit-class-result-page .md-ecr-toolbar__reload:hover,
.edit-class-result-page .md-ecr-toolbar__back:focus-visible,
.edit-class-result-page .md-ecr-toolbar__help:focus-visible,
.edit-class-result-page .md-ecr-toolbar__reload:focus-visible {
  background: var(--ecr-soft);
}

.edit-class-result-page .md-ecr-toolbar__title {
  flex: 1;
  margin: 0;
  min-width: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ecr-ink);
}

.edit-class-result-page .md-ecr-toolbar__chip {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 32px;
  padding: 2px 8px 2px 4px;
  box-sizing: border-box;
  border: 1px solid var(--md-soft-pill-border, rgba(21, 101, 192, 0.18));
  border-radius: 16px;
  background: var(--md-soft-pill-bg, var(--ecr-soft, #e3f2fd));
  color: var(--md-soft-pill-primary, var(--ecr-ink, #1565c0));
  pointer-events: none;
  box-shadow: none;
}

.edit-class-result-page .md-ecr-toolbar__chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ecr-primary);
  color: #fff;
  font-size: 0.5625rem;
  flex-shrink: 0;
}

.edit-class-result-page .md-ecr-toolbar__chip-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0;
  flex: 1;
}

.edit-class-result-page .md-ecr-toolbar__chip-overline {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
  color: rgba(13, 71, 161, 0.72);
}

.edit-class-result-page .md-ecr-toolbar__chip-name {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ecr-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-class-result-page .md-ecr-toolbar__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.edit-class-result-page .md-ecr-toolbar__actions .md-btn-contained {
  width: 100%;
  min-height: 42px;
  text-transform: none;
  box-shadow: none;
}

.edit-class-result-page .md-class-result-hero {
  overflow: hidden;
  margin-top: 4px;
  margin-bottom: 12px;
  border: 1px solid #174ea6;
  border-radius: 12px;
  background: #1967d2;
  box-shadow: 0 1px 2px rgba(26, 115, 232, 0.24);
}

.edit-class-result-page .md-class-result-hero__band {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #0d47a1 0%, #1967d2 48%, #1a73e8 100%);
  color: #fff;
}

.edit-class-result-page .md-class-result-hero__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.edit-class-result-page .md-class-result-hero__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.edit-class-result-page .md-class-result-hero__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #174ea6;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.2);
}

.edit-class-result-page .md-class-result-hero__copy {
  min-width: 0;
  flex: 1;
}

.edit-class-result-page .md-class-result-hero__overline {
  margin: 0 0 2px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #fdd663;
}

.edit-class-result-page .md-class-result-hero__title {
  margin: 0;
  font-family: "Jost", Roboto, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
}

.edit-class-result-page .md-class-result-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.edit-class-result-page .md-class-result-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: none;
}

.edit-class-result-page .md-class-result-hero__meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #fdd663;
  font-size: 0.6875rem;
  flex-shrink: 0;
}

.edit-class-result-page .md-class-result-hero__meta-text {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
}

.edit-class-result-page .md-class-result-hero__meta-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.78);
}

.edit-class-result-page .md-class-result-hero__meta-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.edit-class-result-page .md-class-result-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 64px;
  padding: 0;
  background: transparent;
  text-align: right;
  flex-shrink: 0;
}

.edit-class-result-page .md-class-result-hero__stat-value {
  font-size: 1.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: #fff;
}

.edit-class-result-page .md-class-result-hero__stat-label {
  margin-top: 2px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #fdd663;
}

.edit-class-result-page .md-ecr-notice {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0 0 12px;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #fff8e1;
  border: 1px solid rgba(237, 108, 2, 0.25);
  color: #5d4037;
}

.edit-class-result-page .md-ecr-notice > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: stretch;
  width: 44px;
  margin: 0;
  padding: 12px 0;
  background: rgba(237, 108, 2, 0.14);
  color: var(--md-warning);
  font-size: 1rem;
}

.edit-class-result-page .md-ecr-notice p {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.edit-class-result-page .md-ecr-score-wrap {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: none;
}

.edit-class-result-page .edit_result_div,
.edit-class-result-page #subject_submit_form {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  max-width: none;
}

.edit-class-result-page .md-ecr-score {
  width: 100%;
  max-width: none;
  margin: 0;
  background: #fff;
  border: none;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0;
  padding: 0;
  overflow: visible;
  box-sizing: border-box;
}

.edit-class-result-page .md-ecr-score .dataTables_wrapper {
  width: 100% !important;
  max-width: none;
  display: block;
}

/* Full-width search stays outside the table scroller */
.edit-class-result-page .md-ecr-score .dataTables_filter,
.edit-class-result-page .md-ecr-score .dataTables_wrapper .dataTables_filter {
  float: none !important;
  position: static;
  text-align: left;
  width: 100%;
  margin: 0;
  padding: 12px 12px 10px;
  background: #fff;
  box-sizing: border-box;
}

.edit-class-result-page .md-ecr-score .dataTables_filter label,
.edit-class-result-page .md-ecr-score .dataTables_wrapper .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0;
  color: transparent;
  line-height: 0;
}

.edit-class-result-page .md-ecr-score .dataTables_filter input,
.edit-class-result-page .md-ecr-score .dataTables_filter input[type="search"],
.edit-class-result-page .md-ecr-score .dataTables_wrapper .dataTables_filter input,
.edit-class-result-page .md-ecr-score .dataTables_wrapper .dataTables_filter input[type="search"] {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 12px 14px 12px 44px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 12px !important;
  background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center / 16px 16px !important;
  color: #202124 !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box !important;
}

.edit-class-result-page .md-ecr-score .dataTables_filter input:focus,
.edit-class-result-page .md-ecr-score .dataTables_filter input[type="search"]:focus,
.edit-class-result-page .md-ecr-score .dataTables_wrapper .dataTables_filter input:focus,
.edit-class-result-page .md-ecr-score .dataTables_wrapper .dataTables_filter input[type="search"]:focus {
  outline: none !important;
  border-color: #1565c0 !important;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16) !important;
}

.edit-class-result-page .md-ecr-score__scroller {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.edit-class-result-page .md-ecr-score table,
.edit-class-result-page .md-ecr-score table#datatable,
.edit-class-result-page .md-ecr-score table.dataTable,
.edit-class-result-page .md-ecr-score .md-ecr-score__table {
  width: auto !important;
  min-width: 100%;
  max-width: none !important;
  table-layout: auto;
  margin: 0 !important;
}

.edit-class-result-page .md-ecr-score table#datatable th,
.edit-class-result-page .md-ecr-score table#datatable td,
.edit-class-result-page .md-ecr-score .md-ecr-score__table th,
.edit-class-result-page .md-ecr-score .md-ecr-score__table td {
  white-space: nowrap;
}

.edit-class-result-page .md-ecr-score table#datatable th:first-child,
.edit-class-result-page .md-ecr-score table#datatable td:first-child,
.edit-class-result-page .md-ecr-score .md-ecr-score__table th:first-child,
.edit-class-result-page .md-ecr-score .md-ecr-score__table td.student_names {
  width: 96px !important;
  min-width: 96px !important;
  max-width: 112px !important;
  white-space: normal;
  text-align: left;
  vertical-align: middle;
}

.edit-class-result-page .md-ecr-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.25;
}

.edit-class-result-page .md-ecr-name__surname {
  font-family: "Jost", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #202124;
}

.edit-class-result-page .md-ecr-name__given {
  font-family: "Jost", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: #5f6368;
}

.edit-class-result-page .md-ecr-score thead th {
  border-color: rgba(15, 23, 42, 0.08) !important;
  background: #f8fafc !important;
}

.edit-class-result-page .md-ecr-name-head {
  font-family: "Jost", sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5f6368 !important;
  vertical-align: bottom !important;
  padding: 12px 8px !important;
  background: #fff !important;
  background-image: none !important;
}

.edit-class-result-page table.dataTable thead th.md-ecr-name-head.sorting,
.edit-class-result-page table.dataTable thead th.md-ecr-name-head.sorting_asc,
.edit-class-result-page table.dataTable thead th.md-ecr-name-head.sorting_desc,
.edit-class-result-page table.dataTable thead th.md-ecr-name-head.sorting_asc_disabled,
.edit-class-result-page table.dataTable thead th.md-ecr-name-head.sorting_desc_disabled {
  background-color: #fff !important;
  background-image: none !important;
}

.edit-class-result-page .md-ecr-col-head {
  vertical-align: bottom !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 64px !important;
  height: auto !important;
  padding: 10px 4px 12px !important;
  background: #f8fafc !important;
  border-bottom: 2px solid #1565c0 !important;
}

.edit-class-result-page .md-ecr-col-head__inner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 108px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "Jost", sans-serif;
}

.edit-class-result-page .md-ecr-col-head__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: #202124;
}

.edit-class-result-page .md-ecr-col-head__max {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e3f2fd;
  color: #1565c0;
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  writing-mode: horizontal-tb;
  transform: rotate(180deg);
}

.edit-class-result-page .md-ecr-score table#datatable td.text-center,
.edit-class-result-page .md-ecr-score .md-ecr-score__table td.text-center {
  width: 56px;
  min-width: 56px;
  padding: 8px 4px !important;
  vertical-align: middle;
  white-space: normal;
  text-align: center;
}

.edit-class-result-page .md-ecr-score table#datatable td.text-center > input.inputs,
.edit-class-result-page .md-ecr-score .md-ecr-score__table td.text-center > input.inputs {
  display: block;
  margin: 0 auto 4px !important;
  width: 53px !important;
}

.edit-class-result-page .md-ecr-score table#datatable td.text-center > span.badge,
.edit-class-result-page .md-ecr-score .md-ecr-score__table td.text-center > span.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  margin: 0;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.6875rem !important;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* View-class-result: read-only score sheet + bottom nav */
.edit-class-result-page.view-class-result-page .edit-class-result-feed.page-content,
.edit-class-result-page.view-class-result-page .page-content,
.edit-class-result-page.view-class-result-page .view-class-result-feed.md-feed {
  --md-ecr-score-footer-height: 0px;
  padding-bottom: calc(var(--md-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 24px) !important;
}

body.view-class-result-app #footer-bar.footer-bar-6.md-bottom-nav,
html.view-class-result-app #footer-bar.footer-bar-6.md-bottom-nav {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 200 !important;
}

.edit-class-result-page .md-ecr-score--view {
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);
}

.edit-class-result-page .md-ecr-score--view .dataTables_filter,
.edit-class-result-page .md-ecr-score--view .dataTables_wrapper .dataTables_filter {
  padding: 14px 14px 8px;
  background: transparent;
  border-bottom: none;
}

/* Search + sideways-scroll cue (view result) */
.edit-class-result-page .md-ecr-score--view .md-ecr-score__tools {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.edit-class-result-page .md-ecr-score--view .md-ecr-score__scroll-hint {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0 14px 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #e8f0fe;
  color: #1565c0;
  font-family: "Jost", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.edit-class-result-page .md-ecr-score--view .md-ecr-score__scroll-hint[hidden] {
  display: none !important;
}

.edit-class-result-page .md-ecr-score--view .md-ecr-score__scroll-hint__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: #1565c0;
}

.edit-class-result-page .md-ecr-score--view .md-ecr-score__scroll-hint__text {
  flex: 1 1 auto;
  min-width: 0;
}

.edit-class-result-page .md-ecr-score--view .md-ecr-score__scroll-hint__chevrons {
  flex-shrink: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.12em;
  animation: md-ecr-scroll-nudge 1.4s ease-in-out infinite;
}

@keyframes md-ecr-scroll-nudge {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.55;
  }
  50% {
    transform: translateX(4px);
    opacity: 1;
  }
}

.edit-class-result-page .md-ecr-score--view .md-ecr-score__scroller-shell {
  position: relative;
}

.edit-class-result-page .md-ecr-score--view .md-ecr-score__scroller-shell.has-more-right::after,
.edit-class-result-page .md-ecr-score--view .md-ecr-score__scroller-shell.has-more-left::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  pointer-events: none;
  z-index: 3;
}

.edit-class-result-page .md-ecr-score--view .md-ecr-score__scroller-shell.has-more-right::after {
  right: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.88) 45%, #fff);
}

.edit-class-result-page .md-ecr-score--view .md-ecr-score__scroller-shell.has-more-left::before {
  left: 0;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.88) 45%, #fff);
}

@media (prefers-reduced-motion: reduce) {
  .edit-class-result-page .md-ecr-score--view .md-ecr-score__scroll-hint__chevrons {
    animation: none;
  }
}

.edit-class-result-page .md-ecr-score--view table.table,
.edit-class-result-page .md-ecr-score--view table.md-ecr-score__table {
  border: none !important;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}

.edit-class-result-page .md-ecr-score--view table.table > :not(caption) > * > *,
.edit-class-result-page .md-ecr-score--view .table-bordered > :not(caption) > * > * {
  border-width: 0;
}

.edit-class-result-page .md-ecr-score--view tbody tr {
  transition: background 0.15s ease;
}

.edit-class-result-page .md-ecr-score--view tbody tr:nth-child(even) {
  background: #fafbfc;
}

.edit-class-result-page .md-ecr-score--view tbody tr:hover {
  background: #eef5ff;
}

.edit-class-result-page .md-ecr-score--view tbody td {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.edit-class-result-page .md-ecr-score--view tbody tr:last-child td {
  border-bottom: none !important;
}

.edit-class-result-page .md-ecr-col-head--accent {
  background: #e3f2fd !important;
  border-bottom-color: #0d47a1 !important;
}

.edit-class-result-page .md-ecr-col-head--wide {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 160px !important;
}

.edit-class-result-page .md-ecr-score-val {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 32px;
  padding: 4px 8px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #202124;
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.edit-class-result-page .md-ecr-score-val--total {
  background: #e3f2fd;
  color: #0d47a1;
  min-width: 40px;
  font-size: 0.9375rem;
  font-weight: 800;
}

.edit-class-result-page .md-ecr-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 28px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff7e6;
  color: #b06000;
  font-family: "Jost", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.edit-class-result-page .md-ecr-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 28px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eceff1;
  color: #455a64;
  font-family: "Jost", sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.edit-class-result-page .md-ecr-grade--excellent {
  background: #e6f4ea;
  color: #137333;
}

.edit-class-result-page .md-ecr-grade--good {
  background: #e8f0fe;
  color: #1967d2;
}

.edit-class-result-page .md-ecr-grade--fair {
  background: #fef7e0;
  color: #b06000;
}

.edit-class-result-page .md-ecr-grade--poor {
  background: #fce8e6;
  color: #c5221f;
}

.edit-class-result-page .md-ecr-comment-cell {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 160px !important;
  text-align: left !important;
  white-space: normal !important;
  vertical-align: middle !important;
  padding-left: 8px !important;
  padding-right: 10px !important;
}

.edit-class-result-page .md-ecr-comment {
  display: block;
  font-family: "Jost", sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #5f6368;
}

/* Viewport-fixed action dock (moved to body; outside transformed ancestors) */
.md-ecr-score-footer-dock,
#ecr-score-footer-dock.md-ecr-score-footer-dock,
body > #ecr-score-footer-dock {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 1100 !important;
  display: block !important;
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border-top: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.12);
  transform: none !important;
  filter: none !important;
  pointer-events: auto;
}

.md-ecr-score-footer-dock[hidden],
#ecr-score-footer-dock[hidden],
body > #ecr-score-footer-dock[hidden] {
  display: none !important;
}

#ecr-score-footer-dock .md-ecr-score__footer,
.md-ecr-score-footer-dock .md-ecr-score__footer {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 960px !important;
  height: auto !important;
  min-height: 64px !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 10px 12px calc(10px + var(--md-sheet-footer-safe, 0px)) !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Float like page .md-fab-back — above the score action dock */
#ecr-score-footer-dock .md-ecr-score__back,
.md-ecr-score-footer-dock .md-ecr-score__back,
body > .md-ecr-score__back {
  --fab-size: 52px;
  position: fixed !important;
  right: 16px !important;
  left: auto !important;
  /* Score dock ~64px + 10px gap (same as bottom-nav FAB) */
  bottom: 74px !important;
  top: auto !important;
  z-index: 1101 !important;
  flex: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: var(--fab-size);
  height: var(--fab-size);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  text-decoration: none;
  color: #fff !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.4) 0%, transparent 42%),
    linear-gradient(160deg, #42a5f5 0%, #1976d2 45%, #1565c0 100%);
  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 2px rgba(0, 0, 0, 0.12);
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#ecr-score-footer-dock .md-ecr-score__back::before,
.md-ecr-score-footer-dock .md-ecr-score__back::before,
body > .md-ecr-score__back::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 55%);
  pointer-events: none;
}

#ecr-score-footer-dock .md-ecr-score__back i,
.md-ecr-score-footer-dock .md-ecr-score__back i,
body > .md-ecr-score__back i {
  position: relative;
  z-index: 1;
  font-size: 1.125rem;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  transform: translateX(-1px);
}

#ecr-score-footer-dock .md-ecr-score__back:hover,
.md-ecr-score-footer-dock .md-ecr-score__back:hover,
body > .md-ecr-score__back:hover {
  color: #fff !important;
  transform: translate3d(0, -1px, 0);
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

#ecr-score-footer-dock .md-ecr-score__back:active,
#ecr-score-footer-dock .md-ecr-score__back.is-pressed,
.md-ecr-score-footer-dock .md-ecr-score__back:active,
body > .md-ecr-score__back:active {
  color: #fff !important;
  transform: translate3d(0, 1px, 0);
  box-shadow:
    0 1px 4px rgba(15, 23, 42, 0.16),
    inset 0 2px 4px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#ecr-score-footer-dock .md-ecr-score__back:focus-visible,
.md-ecr-score-footer-dock .md-ecr-score__back:focus-visible,
body > .md-ecr-score__back:focus-visible {
  outline: 2px solid #90caf9;
  outline-offset: 3px;
}

#ecr-score-footer-dock .md-ecr-score__footer-actions,
.md-ecr-score-footer-dock .md-ecr-score__footer-actions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  align-items: center;
  gap: 8px;
  width: 100%;
}

html.is-webview #ecr-score-footer-dock,
html.is-webview .md-ecr-score-footer-dock,
body.is-webview #ecr-score-footer-dock,
body.is-webview .md-ecr-score-footer-dock,
html.is-webview body > #ecr-score-footer-dock,
body.is-webview > #ecr-score-footer-dock {
  bottom: 0 !important;
  padding-bottom: 0 !important;
}

#ecr-score-footer-dock .md-ecr-score__footer .md-btn-contained,
.md-ecr-score-footer-dock .md-ecr-score__footer .md-btn-contained {
  width: 100%;
  min-height: 44px;
  text-transform: none;
  box-shadow: none;
}

/* Hide floating page FAB while the score dock owns the back control */
body:has(#ecr-score-footer-dock:not([hidden]) .md-ecr-score__footer) .md-fab-back,
html:has(#ecr-score-footer-dock:not([hidden]) .md-ecr-score__footer) .md-fab-back {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html:has(#menu_nav.menu-active) .md-ecr-score__back,
html:has(.menu-box-modal.menu-active) .md-ecr-score__back,
html:has(.menu-box-bottom.menu-active) .md-ecr-score__back,
html:has(#assign_student_to_subject_modal.menu-active) .md-ecr-score__back {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #ecr-score-footer-dock .md-ecr-score__back,
  .md-ecr-score-footer-dock .md-ecr-score__back,
  body > .md-ecr-score__back {
    transition: none;
  }
}

/* Cumulate CA / assign sheet — full-screen cover.
   Bootstrap .menu uses overflow:scroll. Even with overflow:hidden, focusing a
   checkbox still scrollIntoViews the shell and drags the footer up mid-screen.
   Footer is position:fixed to the viewport so it cannot move with shell scroll. */
#assign_student_to_subject_modal.md-ecr-sheet {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #f5f7fb !important;
  box-shadow: none !important;
  z-index: 1300 !important;
  overflow: hidden !important;
  overflow: clip !important;
  overscroll-behavior: none !important;
  -webkit-overflow-scrolling: auto !important;
  /* backdrop-filter on .menu makes it a containing block for position:fixed
     descendants — disable so the footer can pin to the real viewport. */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 0;
  pointer-events: none;
  font-family: "Jost", sans-serif;
}

#assign_student_to_subject_modal.md-ecr-sheet.menu-active {
  display: flex !important;
  flex-direction: column !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overflow: clip !important;
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 1 !important;
  pointer-events: all !important;
}

#assign_student_to_subject_modal.md-ecr-sheet .md-timeline-sheet__panel {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  background: #f5f7fb;
  overflow: hidden !important;
  overflow: clip !important;
}

#assign_student_to_subject_modal.md-ecr-sheet .md-timeline-sheet__handle {
  display: none;
}

#assign_student_to_subject_modal.md-ecr-sheet .md-ecr-sheet__header,
#assign_student_to_subject_modal.md-ecr-sheet .md-timeline-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  flex-shrink: 0;
  padding: calc(12px + var(--app-safe-top, 0px)) 16px 14px;
  border-bottom: none;
  background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1e88e5 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(13, 71, 161, 0.28);
}

#assign_student_to_subject_modal.md-ecr-sheet .md-timeline-sheet__overline {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

#assign_student_to_subject_modal.md-ecr-sheet .md-timeline-sheet__title {
  margin: 2px 0 0;
  font-size: 1.375rem;
  font-weight: 600;
  color: #fff;
}

#assign_student_to_subject_modal.md-ecr-sheet .md-timeline-sheet__lead,
#assign_student_to_subject_modal.md-ecr-sheet .md-ecr-sheet__context {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 10px 0 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#assign_student_to_subject_modal.md-ecr-sheet .md-timeline-sheet__lead:empty,
#assign_student_to_subject_modal.md-ecr-sheet .md-ecr-sheet__context:empty {
  display: none;
}

#assign_student_to_subject_modal.md-ecr-sheet .md-timeline-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
}

#assign_student_to_subject_modal.md-ecr-sheet .md-timeline-sheet__close:hover,
#assign_student_to_subject_modal.md-ecr-sheet .md-timeline-sheet__close:focus-visible {
  background: rgba(255, 255, 255, 0.24);
}

#assign_student_to_subject_modal.md-ecr-sheet .md-timeline-sheet__loader {
  padding: 32px;
}

#assign_student_to_subject_modal.md-ecr-sheet .md-timeline-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 12px 20px;
  padding-bottom: calc(20px + 96px + env(safe-area-inset-bottom, 0px) + var(--md-sheet-footer-safe, 0px));
  background: #f5f7fb;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

/* Viewport-fixed footer — survives shell scrollIntoView from checkbox focus */
#assign_student_to_subject_modal.md-ecr-sheet.menu-active .md-timeline-sheet__footer,
#assign_student_to_subject_modal.md-ecr-sheet.menu-active .md-timeline-sheet__footer.modal-footer,
#assign_student_to_subject_modal.md-ecr-sheet.menu-active footer.md-sheet-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 1400 !important;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0;
  flex: none !important;
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--md-sheet-footer-safe, 0px));
  background: #fff !important;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
}

html.is-webview #assign_student_to_subject_modal.md-ecr-sheet .md-timeline-sheet__footer,
body.is-webview #assign_student_to_subject_modal.md-ecr-sheet .md-timeline-sheet__footer {
  padding-bottom: 12px !important;
}

#assign_student_to_subject_modal.md-ecr-sheet .md-timeline-sheet__footer .md-sl-form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

#assign_student_to_subject_modal.md-ecr-sheet .md-timeline-sheet__footer .md-sl-form-actions--single {
  grid-template-columns: 1fr;
}

#assign_student_to_subject_modal.md-ecr-sheet .md-timeline-sheet__footer .md-btn-contained {
  width: 100%;
  min-height: 44px;
  text-transform: none;
  box-shadow: none;
}

.md-ecr-assign__toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.md-ecr-assign__toolbar .md-btn-contained {
  width: 100%;
  min-height: 40px;
  text-transform: none;
  box-shadow: none;
}

.md-ecr-assign__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.md-ecr-assign-table,
.md-ecr-comment-table {
  width: 100% !important;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.md-ecr-assign .dataTables_wrapper .dataTables_filter {
  float: none !important;
  text-align: left;
  width: 100%;
  margin: 0 0 12px;
}

.md-ecr-assign .dataTables_wrapper .dataTables_filter label {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 0;
  color: transparent;
}

.md-ecr-assign .dataTables_wrapper .dataTables_filter input {
  display: block !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 14px 10px 40px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 12px !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center / 16px 16px !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.9375rem !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.md-ecr-assign .dataTables_wrapper .dataTables_filter input:focus {
  border-color: #1565c0 !important;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16) !important;
  outline: none !important;
}

.md-ecr-assign-table thead {
  display: none;
}

.md-ecr-assign-table tbody tr,
.md-ecr-assign-table tbody td {
  display: block;
  width: 100%;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.md-ecr-assign-table tbody tr + tr {
  border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
}

.md-ecr-check {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s ease;
}

.md-ecr-check:hover {
  background: rgba(21, 101, 192, 0.04);
}

.md-ecr-check__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.md-ecr-check__box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #9aa0a6;
  background: #fff;
  flex-shrink: 0;
  position: relative;
}

.md-ecr-check--radio .md-ecr-check__box {
  border-radius: 50%;
}

.md-ecr-check__input:checked + .md-ecr-check__box {
  border-color: #1565c0;
  background: #1565c0;
}

.md-ecr-check__input:checked + .md-ecr-check__box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.md-ecr-check--radio .md-ecr-check__input:checked + .md-ecr-check__box::after {
  left: 5px;
  top: 5px;
  width: 8px;
  height: 8px;
  border: none;
  border-radius: 50%;
  background: #fff;
  transform: none;
}

.md-ecr-check__label {
  flex: 1;
  min-width: 0;
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #202124;
}

.md-ecr-cumulate {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.md-ecr-guide {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0 0 2px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #e8f0fe;
  border: 1px solid rgba(21, 101, 192, 0.18);
  color: #0d47a1;
}

.md-ecr-guide__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.md-ecr-guide__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #fff;
  color: #1565c0;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.08);
}

.md-ecr-guide__title {
  display: block;
  margin: 0;
  min-width: 0;
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: #0d47a1;
}

.md-ecr-guide__steps {
  width: 100%;
  margin: 0;
  padding-left: 1.15rem;
  font-family: "Jost", sans-serif;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #1565c0;
}

.md-ecr-guide__steps li + li {
  margin-top: 4px;
}

.md-ecr-guide__steps em {
  font-style: normal;
  font-weight: 700;
}

.md-ecr-assign .md-ecr-guide,
.md-ecr-comment .md-ecr-guide {
  margin-bottom: 12px;
}

.md-ecr-cumulate__card {
  margin: 0;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.md-ecr-cumulate__card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.md-ecr-cumulate__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e3f2fd;
  color: #1565c0;
  font-size: 0.8125rem;
  font-weight: 700;
  flex-shrink: 0;
}

.md-ecr-cumulate__card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #202124;
}

.md-ecr-cumulate__hint {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #5f6368;
}

.md-ecr-cumulate__list {
  display: flex;
  flex-direction: column;
}

.md-ecr-cumulate__group {
  padding: 8px 14px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1565c0;
  background: #eef3fb;
}

.md-ecr-cumulate__row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  cursor: pointer;
}

.md-ecr-cumulate__row:last-child {
  border-bottom: none;
}

.md-ecr-cumulate__row:has(.md-ecr-check__input:checked) {
  background: rgba(21, 101, 192, 0.06);
}

.md-ecr-cumulate__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.md-ecr-cumulate__copy .md-ecr-check__label {
  flex: none;
  width: 100%;
}

.md-ecr-cumulate__participants {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef3fb;
  border: 1px solid rgba(21, 101, 192, 0.14);
  color: #1565c0;
  font-family: "Jost", sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.md-ecr-cumulate__participants > i {
  font-size: 0.625rem;
  opacity: 0.9;
}

.md-ecr-cumulate__participants-n {
  font-weight: 700;
}

.md-ecr-cumulate__participants-l {
  font-weight: 500;
  color: #5f6368;
}

.md-ecr-cumulate__participants--empty {
  background: #fff8e1;
  border-color: rgba(230, 81, 0, 0.18);
  color: #e65100;
}

.md-ecr-cumulate__participants--empty .md-ecr-cumulate__participants-l {
  color: #ef6c00;
}

.md-ecr-cumulate__row:has(.md-ecr-check__input:checked) .md-ecr-cumulate__participants {
  background: #e3f2fd;
  border-color: rgba(21, 101, 192, 0.22);
}

.md-ecr-cumulate__total {
  margin-left: auto;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.875rem;
  color: #5f6368;
}

.md-ecr-cumulate__total--chip {
  min-width: 40px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e3f2fd;
  color: #1565c0;
  font-size: 0.75rem;
  text-align: center;
}

.md-ecr-cumulate__target {
  margin-top: 0;
}

.md-ecr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 28px 20px;
  text-align: center;
  color: #5f6368;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.md-ecr-empty > i {
  font-size: 1.75rem;
  color: #9aa0a6;
}

.md-ecr-empty p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.md-ecr-comment__notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #e3f2fd;
  color: #0d47a1;
  font-size: 0.8125rem;
}

.md-ecr-comment__input {
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 0.8125rem;
  resize: vertical;
}

.md-ecr-comment__total {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.md-ecr-comment__text {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #3c4043;
  white-space: pre-wrap;
}

.md-ecr-comment__blank {
  color: #9aa0a6;
  font-style: italic;
}

.md-ecr-comment .dataTables_wrapper .dataTables_filter {
  float: none !important;
  text-align: left;
  width: 100%;
  margin: 0 0 12px;
}

.md-ecr-comment .dataTables_wrapper .dataTables_filter label {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 0;
  color: transparent;
}

.md-ecr-comment .dataTables_wrapper .dataTables_filter input {
  display: block !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 14px 10px 40px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 12px !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center / 16px 16px !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.9375rem !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.md-ecr-comment .dataTables_wrapper .dataTables_filter input:focus {
  border-color: #1565c0 !important;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16) !important;
  outline: none !important;
}

.md-ecr-comment-table thead th {
  padding: 10px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5f6368;
  background: #f8fafc;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.md-ecr-comment-table tbody td {
  padding: 12px;
  vertical-align: top;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
}

/* View subject comments — card list */
.md-ecr-comment--view .md-ecr-comment-sheet {
  margin: 0;
}

.md-ecr-comment--view .dataTables_wrapper {
  width: 100%;
}

.md-ecr-comment--view .dataTables_wrapper .dataTables_filter {
  margin: 0 0 14px;
  padding: 0;
}

.md-ecr-comment--view .dataTables_wrapper .dataTables_filter input {
  min-height: 48px !important;
  background-color: #f8fafc !important;
}

.md-ecr-comment--view .md-ecr-comment-table--view {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

.md-ecr-comment--view .md-ecr-comment-table--view thead {
  display: none;
}

.md-ecr-comment--view .md-ecr-comment-table--view tbody {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.md-ecr-comment--view .md-ecr-comment-table--view tbody tr.md-ecr-comment-row,
.md-ecr-comment--view .md-ecr-comment-table--view tbody tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name total"
    "body body";
  gap: 8px 12px;
  width: 100%;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 16px;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.md-ecr-comment--view .md-ecr-comment-table--view tbody tr:hover {
  border-color: rgba(21, 101, 192, 0.22) !important;
  box-shadow: 0 2px 10px rgba(21, 101, 192, 0.08);
  background: #fbfdff !important;
}

.md-ecr-comment--view .md-ecr-comment-table--view tbody td {
  display: block;
  width: auto !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  vertical-align: middle;
  font-size: inherit;
}

.md-ecr-comment--view .md-ecr-comment-row__name {
  grid-area: name;
  min-width: 0;
}

.md-ecr-comment--view .md-ecr-comment-row__total {
  grid-area: total;
  justify-self: end;
  align-self: start;
}

.md-ecr-comment--view .md-ecr-comment-row__body {
  grid-area: body;
  min-width: 0;
  padding-top: 2px !important;
}

.md-ecr-comment--view .md-ecr-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.25;
}

.md-ecr-comment--view .md-ecr-name__surname {
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #202124;
}

.md-ecr-comment--view .md-ecr-name__given {
  font-family: "Jost", sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #5f6368;
}

.md-ecr-comment--view .md-ecr-score-val,
.md-ecr-comment--view .md-ecr-score-val--total {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e3f2fd;
  color: #0d47a1;
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.md-ecr-comment--view .md-ecr-comment__text {
  display: block;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  color: #3c4043;
  white-space: pre-wrap;
}

.md-ecr-comment--view .md-ecr-comment__blank {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f1f3f4;
  color: #80868b;
  font-size: 0.75rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.02em;
}

.md-ecr-comment--view .dataTables_wrapper .dataTables_paginate,
.md-ecr-comment--view .dataTables_wrapper .dataTables_info,
.md-ecr-comment--view .dataTables_wrapper .dataTables_length,
.md-ecr-comment--view .dataTables_wrapper .dataTables_processing {
  display: none !important;
}

/* Edit subject comments — same card list, with textareas */
.md-ecr-comment--edit .md-ecr-comment-sheet {
  margin: 0;
}

.md-ecr-comment--edit .dataTables_wrapper {
  width: 100%;
}

.md-ecr-comment--edit .dataTables_wrapper .dataTables_filter {
  margin: 0 0 14px;
  padding: 0;
}

.md-ecr-comment--edit .dataTables_wrapper .dataTables_filter input {
  min-height: 48px !important;
  background-color: #f8fafc !important;
}

.md-ecr-comment--edit .md-ecr-comment-table--edit {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

.md-ecr-comment--edit .md-ecr-comment-table--edit thead {
  display: none;
}

.md-ecr-comment--edit .md-ecr-comment-table--edit tbody {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.md-ecr-comment--edit .md-ecr-comment-table--edit tbody tr.md-ecr-comment-row,
.md-ecr-comment--edit .md-ecr-comment-table--edit tbody tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name total"
    "body body";
  gap: 8px 12px;
  width: 100%;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 16px;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.md-ecr-comment--edit .md-ecr-comment-table--edit tbody tr:hover,
.md-ecr-comment--edit .md-ecr-comment-table--edit tbody tr:focus-within {
  border-color: rgba(21, 101, 192, 0.22) !important;
  box-shadow: 0 2px 10px rgba(21, 101, 192, 0.08);
  background: #fbfdff !important;
}

.md-ecr-comment--edit .md-ecr-comment-table--edit tbody td {
  display: block;
  width: auto !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  vertical-align: middle;
  font-size: inherit;
}

.md-ecr-comment--edit .md-ecr-comment-row__name {
  grid-area: name;
  min-width: 0;
}

.md-ecr-comment--edit .md-ecr-comment-row__total {
  grid-area: total;
  justify-self: end;
  align-self: start;
}

.md-ecr-comment--edit .md-ecr-comment-row__body {
  grid-area: body;
  min-width: 0;
  padding-top: 2px !important;
}

.md-ecr-comment--edit .md-ecr-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.25;
}

.md-ecr-comment--edit .md-ecr-name__surname {
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #202124;
}

.md-ecr-comment--edit .md-ecr-name__given {
  font-family: "Jost", sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #5f6368;
}

.md-ecr-comment--edit .md-ecr-score-val,
.md-ecr-comment--edit .md-ecr-score-val--total {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e3f2fd;
  color: #0d47a1;
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.md-ecr-comment--edit .md-ecr-comment__input {
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  background: #f8fafc;
  color: #202124;
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.md-ecr-comment--edit .md-ecr-comment__input::placeholder {
  color: #9aa0a6;
  font-weight: 500;
}

.md-ecr-comment--edit .md-ecr-comment__input:hover {
  background: #fff;
  border-color: rgba(21, 101, 192, 0.28);
}

.md-ecr-comment--edit .md-ecr-comment__input:focus {
  outline: none;
  background: #fff;
  border-color: #1565c0;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16);
}

.md-ecr-comment--edit .dataTables_wrapper .dataTables_paginate,
.md-ecr-comment--edit .dataTables_wrapper .dataTables_info,
.md-ecr-comment--edit .dataTables_wrapper .dataTables_length,
.md-ecr-comment--edit .dataTables_wrapper .dataTables_processing {
  display: none !important;
}

#change_subject_modal.md-ecr-dialog,
#help_instructions_modal.md-ecr-dialog {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(400px, calc(100vw - 24px)) !important;
  max-width: min(400px, calc(100vw - 24px)) !important;
  height: auto !important;
  max-height: min(85svh, 640px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: var(--md-elevation-3) !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1300 !important;
  overflow: hidden !important;
}

#change_subject_modal.md-ecr-dialog.menu-active,
#help_instructions_modal.md-ecr-dialog.menu-active {
  display: flex !important;
  flex-direction: column !important;
}

.md-ecr-dialog__panel {
  display: flex;
  flex-direction: column;
  max-height: min(85svh, 640px);
  background: #fff;
}

.md-ecr-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 8px;
}

.md-ecr-dialog__overline {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5f6368;
}

.md-ecr-dialog__title {
  margin: 2px 0 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #202124;
}

.md-ecr-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #5f6368;
  cursor: pointer;
}

.md-ecr-dialog__body {
  padding: 8px 16px 16px;
  overflow: auto;
}

.md-ecr-dialog__body .md-btn-contained {
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  text-transform: none;
  box-shadow: none;
}

.md-ecr-dialog__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.md-ecr-dialog__actions .md-btn-contained {
  margin-top: 0;
}

.md-ecr-dialog__loader {
  display: flex;
  justify-content: center;
  padding: 12px 0;
}

/* Change subject — Material dialog body */
.md-ecr-change__lead {
  margin: 0 0 14px;
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #5f6368;
}

.md-ecr-change__field {
  margin: 0;
}

.md-ecr-change__field .mui-field__label {
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5f6368;
}

.md-ecr-change__select .bootstrap-select {
  width: 100% !important;
}

.md-ecr-change__select .bootstrap-select > .dropdown-toggle,
.md-ecr-change__select .bootstrap-select > .dropdown-toggle.md-ecr-change__btn,
.btn.md-ecr-change__btn {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100% !important;
  min-height: 48px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(15, 23, 42, 0.16) !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  color: #202124 !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  text-align: left !important;
  box-shadow: none !important;
}

.md-ecr-change__select .bootstrap-select > .dropdown-toggle:focus,
.md-ecr-change__select .bootstrap-select > .dropdown-toggle:active,
.md-ecr-change__select .bootstrap-select.show > .dropdown-toggle {
  border-color: #1565c0 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16) !important;
  outline: none !important;
}

.md-ecr-change__select .bootstrap-select .filter-option-inner-inner,
.md-ecr-change__select .bootstrap-select .data_subject {
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #202124;
}

.md-ecr-change__select .bootstrap-select .dropdown-menu {
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16) !important;
  padding: 6px !important;
  overflow: hidden;
}

.md-ecr-change__select .bootstrap-select .dropdown-menu .bs-searchbox {
  padding: 6px 6px 8px;
}

.md-ecr-change__select .bootstrap-select .dropdown-menu .bs-searchbox .form-control {
  min-height: 40px;
  border-radius: 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  font-family: "Jost", sans-serif;
  box-shadow: none !important;
}

.md-ecr-change__select .bootstrap-select .dropdown-menu li a,
.md-ecr-change__select .bootstrap-select .dropdown-menu .dropdown-item {
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
}

.md-ecr-change__select .bootstrap-select .dropdown-menu li.selected a,
.md-ecr-change__select .bootstrap-select .dropdown-menu .dropdown-item.active,
.md-ecr-change__select .bootstrap-select .dropdown-menu .dropdown-item:active {
  background: #e3f2fd !important;
  color: #0d47a1 !important;
}

.md-ecr-change__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 12px;
}

.md-ecr-change__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Jost", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: #5f6368;
}

.md-ecr-change__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.md-ecr-change__dot--ok { background: #2e7d32; }
.md-ecr-change__dot--save { background: #ef6c00; }
.md-ecr-change__dot--empty { background: #c62828; }

.md-ecr-help__item {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.md-ecr-help__item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.md-ecr-help__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #202124;
}

.md-ecr-help__title > i {
  color: var(--md-primary);
}

.md-ecr-help__item p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #5f6368;
}

/* Help guide dialog */
#help_instructions_modal.md-ecr-dialog--help {
  width: min(420px, calc(100vw - 24px)) !important;
  max-width: min(420px, calc(100vw - 24px)) !important;
  max-height: min(88svh, 720px) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.22) !important;
}

#help_instructions_modal.md-ecr-dialog--help .md-ecr-dialog__panel {
  max-height: min(88svh, 720px);
  background: #f5f7fb;
}

#help_instructions_modal .md-ecr-help__header {
  align-items: center;
  gap: 12px;
  padding: 18px 16px 16px;
  background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1e88e5 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(13, 71, 161, 0.28);
}

#help_instructions_modal .md-ecr-help__hero {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

#help_instructions_modal .md-ecr-help__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  font-size: 1.125rem;
  flex-shrink: 0;
}

#help_instructions_modal .md-ecr-help__header .md-ecr-dialog__overline {
  color: rgba(255, 255, 255, 0.78);
}

#help_instructions_modal .md-ecr-help__header .md-ecr-dialog__title {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#help_instructions_modal .md-ecr-help__header .md-ecr-dialog__close {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

#help_instructions_modal .md-ecr-help__header .md-ecr-dialog__close:hover,
#help_instructions_modal .md-ecr-help__header .md-ecr-dialog__close:focus-visible {
  background: rgba(255, 255, 255, 0.24);
}

#help_instructions_modal .md-ecr-dialog__body.md-ecr-help {
  padding: 14px 14px 8px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#help_instructions_modal .md-ecr-help__lead {
  margin: 0 0 12px;
  padding: 0 2px;
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  color: #5f6368;
}

#help_instructions_modal .md-ecr-help__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#help_instructions_modal .md-ecr-help__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#help_instructions_modal .md-ecr-help__item--danger {
  background: #fff8f7;
  border-color: #f6aea9;
}

#help_instructions_modal .md-ecr-help__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #e3f2fd;
  color: #1565c0;
  font-size: 0.875rem;
  flex-shrink: 0;
}

#help_instructions_modal .md-ecr-help__icon--ok {
  background: #e6f4ea;
  color: #137333;
}

#help_instructions_modal .md-ecr-help__icon--warn {
  background: #fef7e0;
  color: #b06000;
}

#help_instructions_modal .md-ecr-help__icon--danger {
  background: #fce8e6;
  color: #c5221f;
}

#help_instructions_modal .md-ecr-help__copy {
  min-width: 0;
  flex: 1;
}

#help_instructions_modal .md-ecr-help__title {
  display: block;
  margin: 0 0 4px;
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #202124;
  letter-spacing: 0.01em;
}

#help_instructions_modal .md-ecr-help__item p {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: #5f6368;
}

#help_instructions_modal .md-ecr-help__item p strong {
  color: #202124;
  font-weight: 700;
}

#help_instructions_modal .md-ecr-help__footer {
  flex-shrink: 0;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

#help_instructions_modal .md-ecr-help__footer .md-btn-contained {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  margin: 0;
  text-transform: none;
  box-shadow: none;
  font-family: "Jost", sans-serif;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .edit-class-result-page .md-animate-in {
    animation: none !important;
  }
}

/* ── zap-app: generate-page (Monitor / generate class results) ── */

.generate-page {
  --gen-accent: #0f766e;
  --gen-accent-dark: #115e59;
  --gen-soft: #ccfbf1;
  --gen-warning: #b45309;
  --gen-warning-soft: #ffedd5;
}

/* Extra-result monitor: toolbar is brand-only (no publish / adjust row) */
.generate-page.generate-extra-page .md-gen-toolbar__inner {
  gap: 0;
}

.generate-page .md-class-result-hero__meta {
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.generate-page .md-class-result-hero__meta::-webkit-scrollbar {
  display: none;
}

.generate-page .md-class-result-hero__meta-item {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  justify-content: center;
  gap: 4px;
  padding: 4px 6px;
}

.generate-page .md-class-result-hero__meta-icon {
  display: none;
}

.generate-page .md-class-result-hero__meta-text {
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.generate-page .md-class-result-hero__meta-label {
  font-size: 0.5625rem;
  line-height: 1.2;
}

.generate-page .md-class-result-hero__meta-value {
  font-size: 0.6875rem;
  max-width: 100%;
}

.generate-page .md-gen-toolbar__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.generate-page .md-gen-toolbar__actions--solo {
  grid-template-columns: 1fr;
}

.generate-page .md-gen-toolbar__actions .md-btn-contained,
.generate-page .md-gen-toolbar__btn {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  gap: 8px;
}

.summary-student-page .md-gen-toolbar__btn--ai,
.generate-page.summary-student-page .md-gen-toolbar__btn--ai {
  background: #e3f2fd !important;
  color: #1565c0 !important;
  border: 1px solid #90caf9;
  box-shadow: none;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.summary-student-page .md-gen-toolbar__btn--ai:hover,
.summary-student-page .md-gen-toolbar__btn--ai:focus-visible,
.generate-page.summary-student-page .md-gen-toolbar__btn--ai:hover,
.generate-page.summary-student-page .md-gen-toolbar__btn--ai:focus-visible {
  background: #bbdefb !important;
  color: #0d47a1 !important;
  border-color: #64b5f6;
}

.generate-page .md-gen-toolbar__actions .md-btn-contained:disabled,
.generate-page .md-gen-toolbar__actions .md-btn-contained[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.generate-page .md-gen-next-term {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  font-family: "Jost", sans-serif;
  color: #202124;
}

.generate-page .md-gen-next-term > i {
  color: var(--gen-accent);
  font-size: 1rem;
}

.generate-page .md-gen-next-term__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5f6368;
}

.generate-page .md-gen-next-term__value {
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: 700;
  color: #202124;
}

.generate-page .md-gen-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.generate-page .md-gen-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #c0c4c8;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  transition: border-color 0.2s ease;
}

.generate-page .md-gen-card:hover {
  border-color: #9aa0a6;
  box-shadow: none;
}

.generate-page .md-gen-card__rail {
  width: 4px;
  flex-shrink: 0;
  align-self: stretch;
  background: #dadce0;
}

.generate-page .md-gen-card--success .md-gen-card__rail {
  background: #34a853;
}

.generate-page .md-gen-card--warning .md-gen-card__rail {
  background: #f9ab00;
}

.generate-page .md-gen-card--error .md-gen-card__rail {
  background: #ea4335;
}

.generate-page .md-gen-card__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.generate-page .md-gen-card__head {
  min-width: 0;
  padding: 0;
  background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%);
}

.generate-page .md-gen-card__content {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px 6px 10px;
}

.generate-page .md-gen-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.generate-page .md-gen-card--success .md-gen-card__avatar,
.generate-page .md-gen-card--warning .md-gen-card__avatar,
.generate-page .md-gen-card--error .md-gen-card__avatar,
.generate-page .md-gen-card__avatar--remark,
.generate-page .md-gen-card--remark.md-gen-card--success .md-gen-card__avatar--remark {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.generate-page .md-gen-card__monogram {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  font-family: "Jost", sans-serif;
}

.generate-page .md-gen-card__copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.generate-page .md-gen-card__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.generate-page .md-gen-card__meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}

.generate-page .md-gen-card__meta .md-chip {
  margin: 0;
  padding: 1px 7px;
  height: auto;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  border-radius: 6px;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.14);
  color: #e8f0fe;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.generate-page .md-gen-card__meta .md-chip--success {
  background: rgba(129, 201, 149, 0.22);
  color: #ceead6;
  box-shadow: inset 0 0 0 1px rgba(129, 201, 149, 0.45);
}

.generate-page .md-gen-card__meta .md-chip--error {
  background: rgba(242, 139, 130, 0.22);
  color: #fce8e6;
  box-shadow: inset 0 0 0 1px rgba(242, 139, 130, 0.45);
}

.generate-page .md-gen-card__meta .md-chip--warning {
  background: rgba(253, 214, 99, 0.22);
  color: #feefc3;
  box-shadow: inset 0 0 0 1px rgba(253, 214, 99, 0.45);
}

.generate-page .md-gen-card__meta .md-chip--info {
  background: rgba(255, 255, 255, 0.14);
  color: #e8f0fe;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.generate-page .md-gen-card__score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
  min-width: 52px;
  padding-left: 4px;
  text-align: right;
}

.generate-page .md-gen-card__score-value {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #fdd663;
  letter-spacing: -0.02em;
}

.generate-page .md-gen-card__score-label {
  margin-top: 2px;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.generate-page .md-gen-card__progress-wrap {
  margin: 0;
  padding: 2px 12px 10px 10px;
}

.generate-page .md-gen-card__progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 4px;
}

.generate-page .md-gen-card__progress-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.generate-page .md-gen-card__progress-value {
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #e8f0fe;
}

.generate-page .md-gen-card__progress {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.generate-page .md-gen-card__progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  min-width: 0;
  transition: width 0.35s ease;
  background: #fdd663;
}

.generate-page .md-gen-card__progress-bar--ok {
  background: #81c995;
}

.generate-page .md-gen-card__progress-bar--mid {
  background: #fdd663;
}

.generate-page .md-gen-card__progress-bar--low,
.generate-page .md-gen-card__progress-bar--empty {
  background: #f28b82;
}

.generate-page .md-gen-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: #fff;
}

.generate-page .md-gen-card__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  border: 1px solid #d2e3fc;
  border-radius: 10px;
  background: #f8fbff;
  overflow: hidden;
}

.generate-page .md-gen-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  padding: 8px 6px 7px;
  text-align: center;
  border-radius: 0;
  border: none;
  border-right: 1px solid #d2e3fc;
  background: transparent;
}

.generate-page .md-gen-kpi:last-child {
  border-right: none;
}

.generate-page .md-gen-kpi--pass,
.generate-page .md-gen-kpi--error,
.generate-page .md-gen-kpi--success {
  background: transparent;
  border-color: #d2e3fc;
}

.generate-page .md-gen-kpi__value {
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  color: #174ea6;
  letter-spacing: -0.02em;
}

.generate-page .md-gen-kpi--pass .md-gen-kpi__value {
  color: #137333;
}

.generate-page .md-gen-kpi--error .md-gen-kpi__value {
  color: #c5221f;
}

.generate-page .md-gen-kpi--success .md-gen-kpi__value {
  color: #137333;
}

.generate-page .md-gen-kpi__label {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5f82c7;
}

.generate-page .md-gen-kpi__hint {
  font-size: 0.5625rem;
  font-weight: 500;
  line-height: 1.25;
  color: #80868b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.generate-page .md-gen-card__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  gap: 0;
  border: 1px solid #d2e3fc;
  border-radius: 10px;
  background: #f8fbff;
  overflow: hidden;
}

.generate-page .md-gen-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100%;
  min-width: 0;
  padding: 7px 6px 6px;
  text-align: center;
  border-right: 1px solid #d2e3fc;
  background: transparent;
}

.generate-page .md-gen-stat:last-child {
  border-right: none;
}

.generate-page .md-gen-stat__label {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5f82c7;
  line-height: 1.2;
}

.generate-page .md-gen-stat__value {
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #174ea6;
  line-height: 1.2;
}

.generate-page .md-gen-stat:nth-child(3) .md-gen-stat__value {
  color: #137333;
}

.generate-page .md-gen-stat:nth-child(4) .md-gen-stat__value {
  color: #c5221f;
}

.generate-page .md-gen-card__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid #c0c4c8;
  background: #fff;
}

.generate-page .md-gen-card__actions--solo {
  grid-template-columns: 1fr;
}

.generate-page .md-gen-card__actions--2 {
  grid-template-columns: 1fr 1fr;
}

.generate-page .md-gen-card__actions .md-btn-contained {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid #c0c4c8;
  background: #fff;
  color: #5f6368;
  box-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.generate-page .md-gen-card__actions .md-btn-contained:hover,
.generate-page .md-gen-card__actions .md-btn-contained:focus-visible {
  background: #f8f9fa;
  border-color: #9aa0a6;
  color: #202124;
}

.generate-page .md-gen-card__actions .md-btn-contained--success {
  background: #fff;
  border-color: #c0c4c8;
  color: #137333;
}

.generate-page .md-gen-card__actions .md-btn-contained--success:hover,
.generate-page .md-gen-card__actions .md-btn-contained--success:focus-visible {
  background: #f0f7f2;
  border-color: #81c995;
  color: #0d652d;
}

.generate-page .md-gen-card__actions .md-btn-contained--tonal {
  background: #fff;
  border-color: #c0c4c8;
  color: #5f6368;
}

.generate-page .md-gen-card__actions .md-btn-contained--tonal:hover,
.generate-page .md-gen-card__actions .md-btn-contained--tonal:focus-visible {
  background: #f8f9fa;
  border-color: #9aa0a6;
  color: #3c4043;
}

.generate-page .md-gen-card__actions .md-btn-contained:disabled,
.generate-page .md-gen-card__actions .md-btn-contained[disabled] {
  background: #f8f9fa;
  border-color: #dadce0;
  color: #9aa0a6;
  opacity: 1;
}

.generate-page .md-gen-card__actions .reverse_generate_result_class {
  background: #fff;
  border-color: #c0c4c8;
  color: #b06000;
}

.generate-page .md-gen-card__actions .reverse_generate_result_class:hover,
.generate-page .md-gen-card__actions .reverse_generate_result_class:focus-visible {
  background: #fef7e0;
  border-color: #f9ab00;
  color: #8a4500;
}

.generate-page .md-gen-card__actions .get_generate_result_subclass:not(.collapsed),
.generate-page .md-gen-card__actions .get_generate_result_subclass[aria-expanded="true"] {
  background: #e8f0fe;
  border-color: #8ab4f8;
  color: #174ea6;
}

.generate-page .md-gen-card__collapse {
  border-top: 0;
}

.generate-page .md-gen-card__collapse-inner {
  padding: 0 12px 12px;
}

.generate-page .md-gen-subclass-loader {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}

.generate-page .md-gen-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 36px 20px 32px;
  text-align: center;
  border: 1px dashed rgba(21, 101, 192, 0.22);
  border-radius: 16px;
  background: linear-gradient(180deg, #e3f2fd 0%, #fff 72%);
  box-shadow: none;
  color: #5f6368;
  font-size: 0.875rem;
  font-family: "Jost", sans-serif;
  font-weight: 500;
  line-height: 1.45;
}

.generate-page .md-gen-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 4px;
  border-radius: 50%;
  background: #fff;
  color: #1565c0;
  font-size: 1.25rem;
  box-shadow: 0 2px 6px rgba(13, 71, 161, 0.14);
}

.generate-page .md-gen-empty__title {
  margin: 4px 0 0;
  font-family: "Jost", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(0, 0, 0, 0.87);
}

.generate-page .md-gen-empty__text {
  margin: 0;
  max-width: 300px;
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  color: #5f6368;
}

/* Subclass accordion items — timeline bordered rows */
.generate-page .md-gen-subclass-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.generate-page .md-gen-subclass-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #c0c4c8;
  background: #fff;
  box-shadow: none;
  text-decoration: none !important;
  color: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.generate-page .md-gen-subclass-item:hover,
.generate-page .md-gen-subclass-item:focus-visible {
  background: #f8f9fa;
  border-color: #9aa0a6;
}

.generate-page .md-gen-subclass-item__main {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.generate-page .md-gen-subclass-item__title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  color: #202124;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.generate-page .md-gen-subclass-item__progress {
  height: 4px;
  border-radius: 999px;
  background: #eef0f3;
  overflow: hidden;
}

.generate-page .md-gen-subclass-item__progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1a73e8;
}

.generate-page .md-gen-subclass-item__meta {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #5f6368;
}

.generate-page .md-gen-subclass-item .md-chip {
  margin: 0;
  padding: 1px 7px;
  height: auto;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.35;
  border-radius: 6px;
  white-space: nowrap;
}

.generate-page .md-gen-subclass-item__chevron {
  color: #9aa0a6;
  font-size: 0.6875rem;
  justify-self: end;
}

/* Subject sheet (fullEmptyModal) */
#fullEmptyModal:has(.md-gen-subject-sheet) .md-timeline-sheet__body.modal-div {
  padding: 12px 12px 8px;
  background: #f3f5f8;
}

.md-gen-subject-sheet {
  gap: 12px;
}

.md-gen-subject-search {
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0 0 2px;
  background: #f3f5f8;
}

.md-gen-subject-search__shell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #c0c4c8;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.md-gen-subject-search__shell:focus-within {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.16);
}

.md-gen-subject-search__icon {
  flex-shrink: 0;
  font-size: 0.875rem;
  color: #5f6368;
}

.md-gen-subject-search__shell:focus-within .md-gen-subject-search__icon {
  color: #1a73e8;
}

.md-gen-subject-search__input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: none;
  outline: none;
  background: transparent;
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #202124;
  -webkit-appearance: none;
  appearance: none;
}

.md-gen-subject-search__input::placeholder {
  color: #9aa0a6;
  font-weight: 400;
}

.md-gen-subject-search__input::-webkit-search-decoration,
.md-gen-subject-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.md-gen-subject-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.md-gen-subject-card {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
}

.md-gen-subject-card__head {
  padding: 12px 12px 8px;
}

.md-gen-subject-card__identity {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.md-gen-subject-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #e0f2fe;
  color: #0369a1;
  flex-shrink: 0;
}

.md-gen-subject-card__copy {
  min-width: 0;
  flex: 1;
}

.md-gen-subject-card__title {
  margin: 0 0 6px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #202124;
}

.md-gen-subject-card__metrics {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px 12px;
}

.md-gen-subject-card__actions {
  padding: 0 12px 12px;
}

.md-gen-subject-card__actions .md-btn-contained {
  width: 100%;
  justify-content: center;
}

.md-gen-empty {
  margin: 12px 0;
  text-align: center;
  color: #5f6368;
  font-size: 0.875rem;
  font-family: "Jost", sans-serif;
}

@media (max-width: 420px) {
  .generate-page .md-gen-card__actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 10px 10px 12px;
  }

  .generate-page .md-gen-card__actions--solo {
    grid-template-columns: 1fr;
  }

  .generate-page .md-gen-card__actions--2 {
    grid-template-columns: 1fr 1fr;
  }

  .generate-page .md-gen-card__actions .md-btn-contained {
    min-height: 40px;
    padding: 8px 4px;
    font-size: 0.625rem;
    letter-spacing: 0.03em;
  }

  .generate-page .md-gen-card__kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .generate-page .md-gen-card__score-value {
    font-size: 1.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .generate-page .md-animate-in {
    animation: none !important;
  }
}

/* Extra-result summary pages: solo toolbar / card actions already covered above.
   Keep check-result sheet content readable inside fullEmptyModal. */
#fullEmptyModal:has(.md-ers-check-form) .modal-div {
  padding: 12px 14px 8px;
}

#fullEmptyModal:has(.md-ers-check-form) .md-ers-check-form .nav-pills .nav-link {
  font-family: "Jost", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ── zap-app: events-page (clock-in events directory) ── */
html.events-app .header.header-fixed,
body.events-app .header.header-fixed,
.is-webview.events-app .header.header-fixed,
.is-webview body.events-app .header.header-fixed,
html.events-app .page-title-clear,
body.events-app .page-title-clear {
  display: none !important;
}

html.events-app body,
body.events-app {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html.events-app #page,
body.events-app #page,
body.events-app .md-page.events-page,
body.events-app .md-page.events-page .events-feed.page-content,
body.events-app .md-page.events-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.events-page {
  --evt-primary: #1976d2;
  --evt-primary-dark: #1565c0;
  --evt-soft: #e3f2fd;
  --evt-ink: #0d47a1;
  --evt-bg: #f5f8fc;
  --evt-parents: #ef6c00;
  --evt-parents-soft: #fff3e0;
  --md-events-toolbar-offset: 168px;
  --mui-primary: var(--evt-primary);
  --mui-font: "Jost", sans-serif;
  --md-font: "Jost", sans-serif;
  font-family: "Jost", sans-serif !important;
  background: var(--evt-bg);
  min-height: 100vh;
}

.events-page .page-title-clear { display: none !important; }

.events-page .events-feed.page-content,
.events-page .page-content,
.events-page .events-feed.md-feed {
  max-width: 680px;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--md-events-toolbar-offset, 168px) + 8px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 24px) !important;
  background: var(--evt-bg) !important;
  overflow: visible !important;
}

.events-page .md-evt-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--mui-elevation-1) !important;
  background: #fff !important;
  transform: none !important;
  overflow: visible !important;
}

.events-page .md-evt-toolbar .content,
.events-page .md-evt-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 10px 12px 12px !important;
  box-sizing: border-box;
}

.events-page .md-evt-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.events-page .md-evt-toolbar__back,
.events-page .md-evt-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--evt-ink);
  cursor: pointer;
  text-decoration: none;
}

.events-page .md-evt-toolbar__reload { margin-left: auto; }

.events-page .md-evt-toolbar__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #202124;
  line-height: 1.2;
}

.events-page .md-evt-toolbar__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--evt-soft);
  border: 1px solid rgba(0, 137, 123, 0.18);
  box-sizing: border-box;
}

.events-page .md-evt-toolbar__chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--evt-primary);
  flex-shrink: 0;
}

.events-page .md-evt-toolbar__chip-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.events-page .md-evt-toolbar__chip-overline {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 77, 64, 0.72);
}

.events-page .md-evt-toolbar__chip-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--evt-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.events-page .md-evt-toolbar__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
}

.events-page .md-evt-toolbar__actions .md-btn-contained {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  background: var(--evt-primary) !important;
  color: #fff !important;
}

.events-page .md-event-dash {
  margin: 0 0 12px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 137, 123, 0.12);
  box-shadow: var(--mui-elevation-1, 0 1px 2px rgba(0,0,0,.08));
}

.events-page .md-event-dash__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, var(--evt-soft) 0%, #fff 70%);
}

.events-page .md-event-dash__overline {
  margin: 0 0 2px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 77, 64, 0.72);
}

.events-page .md-event-dash__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--evt-ink);
}

.events-page .md-event-dash__stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--evt-primary);
  color: #fff;
}

.events-page .md-event-dash__stamp-value {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
}

.events-page .md-event-dash__stamp-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.9;
}

.events-page .md-search-field,
.events-page .md-search-field--event {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  margin: 0 0 14px;
  padding: 10px 12px 10px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(25, 118, 210, 0.16);
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.06);
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.events-page .md-search-field:focus-within,
.events-page .md-search-field--event:focus-within {
  border-color: rgba(25, 118, 210, 0.45);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.16);
}

.events-page .md-search-field__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--evt-soft);
  color: var(--evt-primary);
  font-size: 0.875rem;
}

.events-page .md-search-field:focus-within .md-search-field__avatar {
  background: var(--evt-primary);
  color: #fff;
}

.events-page .md-search-field__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  color: #202124;
  -webkit-appearance: none;
  appearance: none;
}

.events-page .md-search-field__input::placeholder {
  color: #5f6368;
  font-weight: 500;
}

.events-page .md-search-field__input::-webkit-search-decoration,
.events-page .md-search-field__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.events-page .md-search-field__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f1f3f4;
  color: #5f6368;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.events-page .md-search-field__clear[hidden] {
  display: none !important;
}

.events-page .md-search-field__clear:hover,
.events-page .md-search-field__clear:focus-visible {
  background: var(--evt-soft);
  color: var(--evt-primary-dark);
  outline: none;
}

.events-page .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.events-page .md-event-list .dataTables_wrapper { width: 100%; }

.events-page .md-event-list .dataTables_wrapper .dataTables_length,
.events-page .md-event-list .dataTables_wrapper .dataTables_filter,
.events-page .md-event-list .dataTables_wrapper .dataTables_info,
.events-page .md-event-list .dataTables_wrapper .dataTables_paginate,
.events-page .md-event-list .dataTables_processing {
  display: none !important;
}

.events-page .md-event-list table#student {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.events-page .md-event-list table#student thead { display: none; }

.events-page .md-event-list table#student tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.events-page .md-event-list table#student tbody tr,
.events-page .md-event-list table#student tbody td {
  display: block;
  width: 100%;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

.events-page .md-event-list table#student tbody td.dataTables_empty {
  padding: 0 !important;
}

.events-page .md-event-card {
  margin: 0;
  padding: 14px 14px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--mui-elevation-1, 0 1px 2px rgba(0,0,0,.06));
}

.events-page .md-event-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.events-page .md-event-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  font-size: 1.125rem;
}

.events-page .md-event-card__avatar--students {
  background: var(--evt-soft);
  color: var(--evt-primary-dark);
}

.events-page .md-event-card__avatar--parents {
  background: var(--evt-parents-soft);
  color: var(--evt-parents);
}

.events-page .md-event-card__who {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.events-page .md-event-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #202124;
  line-height: 1.3;
  word-break: break-word;
}

.events-page .md-event-card__who .md-chip {
  font-size: 0.6875rem;
}

.events-page .md-event-card__menu {
  flex-shrink: 0;
}

.events-page .md-event-card__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #5f6368;
  cursor: pointer;
}

.events-page .md-event-card__dropdown {
  font-family: "Jost", sans-serif;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--mui-elevation-2, 0 4px 12px rgba(0,0,0,.12));
  padding: 6px 0;
  min-width: 160px;
}

.events-page .md-event-card__dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 0.875rem;
  font-weight: 500;
}

.events-page .md-event-card__dropdown .dropdown-item i {
  width: 1em;
  text-align: center;
  opacity: 0.8;
}

.events-page .md-event-card__actions {
  display: grid;
  grid-template-columns: 1fr;
}

.events-page .md-event-card__actions .md-btn-contained {
  width: 100%;
  min-height: 42px;
  justify-content: center;
  gap: 8px;
  background: var(--evt-soft, #e3f2fd) !important;
  color: var(--evt-primary-dark, #1565c0) !important;
  text-transform: none;
  box-shadow: none;
}

.events-page .md-event-card__actions .md-btn-contained:hover,
.events-page .md-event-card__actions .md-btn-contained:focus-visible {
  background: #bbdefb !important;
  color: var(--evt-ink, #0d47a1) !important;
}

.events-page .md-event-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 36px 20px;
  color: rgba(0, 0, 0, 0.54);
}

.events-page .md-event-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--evt-soft);
  color: var(--evt-primary);
  font-size: 1.375rem;
  margin-bottom: 4px;
}

.events-page .md-event-empty__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #202124;
}

.events-page .md-event-empty__text {
  margin: 0;
  font-size: 0.875rem;
  max-width: 260px;
}

.events-page .md-event-empty--loading .md-loading {
  margin-bottom: 8px;
}

.md-event-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.md-event-form .select2-container {
  width: 100% !important;
}

.md-event-form .select2-container .select2-selection--multiple {
  min-height: 48px;
  border-radius: 12px;
  border-color: rgba(15, 23, 42, 0.16);
  padding: 4px 8px;
}

.md-event-form__audience {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.md-event-form__audience-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #5f6368;
  font-family: "Jost", sans-serif;
}

.md-event-form__audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.md-event-form__audience-grid--3 {
  grid-template-columns: 1fr;
}
@media (min-width: 480px) {
  .md-event-form__audience-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.md-event-form__choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.md-event-form__choice-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.md-event-form__choice.is-selected,
.md-event-form__choice:has(.md-event-form__choice-input:checked) {
  border-color: rgba(25, 118, 210, 0.45);
  background: #e3f2fd;
  box-shadow: 0 0 0 1px rgba(25, 118, 210, 0.2);
}

.md-event-form__choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e8f1fb;
  color: #1565c0;
  flex-shrink: 0;
}

.md-event-form__choice-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.md-event-form__choice-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #202124;
  font-family: "Jost", sans-serif;
}

.md-event-form__choice-sub {
  font-size: 0.75rem;
  color: #5f6368;
}

.md-event-form__staff-field .md-event-form__staff-count {
  float: right;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1976d2;
}

.md-event-staff-sheet__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.md-event-staff-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.md-event-staff-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.md-event-staff-list__item:last-child {
  border-bottom: none;
}

.md-event-staff-list__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1565c0 0%, #42a5f5 100%);
  color: #fff;
  flex-shrink: 0;
}

.md-event-staff-list__monogram {
  font-size: 0.875rem;
  font-weight: 700;
  font-family: "Jost", sans-serif;
  line-height: 1;
}

.md-event-staff-list__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.md-event-staff-list__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #202124;
  font-family: "Jost", sans-serif;
}

.md-event-staff-list__role {
  font-size: 0.75rem;
  color: #5f6368;
}

.md-event-staff-list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px 16px;
  text-align: center;
  border-radius: 14px;
  background: #fff;
  border: 1px dashed rgba(15, 23, 42, 0.14);
  color: rgba(0, 0, 0, 0.54);
}

.md-event-staff-list__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: #f1f3f4;
  color: #5f6368;
  font-size: 1.125rem;
}

.md-event-staff-list__empty-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #202124;
  font-family: "Jost", sans-serif;
}

.md-event-staff-list__empty-text {
  margin: 0;
  font-size: 0.8125rem;
  color: #5f6368;
}

.md-event-sheet-footer {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.md-event-sheet-footer--solo {
  grid-template-columns: 1fr;
}

.md-event-sheet-footer .md-btn-contained {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  text-transform: none;
}

#fullEmptyModal:has(.md-event-edit-form) .md-timeline-sheet__body.modal-div,
#fullEmptyModal:has(.md-event-staff-sheet) .md-timeline-sheet__body.modal-div {
  padding: 14px 14px 8px;
  background: #f5f7fb;
}

#fullEmptyModal:has(.md-event-edit-form) .md-admit-section,
#fullEmptyModal:has(.md-event-staff-sheet) .md-admit-section {
  margin: 0;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

@media (max-width: 380px) {
  .md-event-form__audience-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .events-page .md-animate-in {
    animation: none !important;
  }
}

#fullEmptyModal .md-gen-subject-sheet .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ── zap-app: summary-page / summary-student-page ── */
.summary-page.generate-page .md-gen-toolbar__actions {
  grid-template-columns: 1fr;
}

.summary-page.generate-page .md-gen-card__actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.summary-page.generate-page .md-gen-card__actions .md-btn-contained {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-student-page .md-summary-student-dash {
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid rgba(21, 101, 192, 0.12);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.05);
}

.summary-student-page .md-summary-student-dash__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}

.summary-student-page .md-summary-student-dash__tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #e8f0fe;
  border: 1px solid rgba(21, 101, 192, 0.12);
  text-align: left;
}

.summary-student-page .md-summary-student-dash__tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fff;
  color: #1565c0;
  font-size: 0.75rem;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.08);
}

.summary-student-page .md-summary-student-dash__tile-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.summary-student-page .md-summary-student-dash__value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0d47a1;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.summary-student-page .md-summary-student-dash__label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5f6368;
  line-height: 1.2;
}

.summary-student-page .md-summary-student-dash__tile--action {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #e3f2fd 0%, #fff 72%);
  border: 1px solid rgba(25, 118, 210, 0.16);
  gap: 12px;
  padding: 10px 12px;
}

.summary-student-page .md-summary-student-dash__action-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.summary-student-page .md-summary-student-dash__action-overline {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(21, 101, 192, 0.72);
}

.summary-student-page .md-summary-student-dash__tile--action .md-btn-contained {
  flex: 0 1 auto;
  width: auto;
  min-height: 40px;
  gap: 8px;
  padding-inline: 14px;
  font-size: 0.875rem;
  text-transform: none;
  background: #1976d2 !important;
  color: #fff !important;
}

.summary-student-page .md-summary-student-dash__stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 72px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #e3f2fd;
  color: #0d47a1;
  border: 1px solid rgba(25, 118, 210, 0.18);
  box-shadow: none;
}

.summary-student-page .md-summary-student-dash__stamp-value {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: #1565c0;
}

.summary-student-page .md-summary-student-dash__stamp-label {
  margin-top: 2px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(13, 71, 161, 0.72);
}

.summary-student-page .md-gen-card__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px;
}

.summary-student-page .md-gen-card__actions .md-btn-contained {
  min-height: 36px;
  padding-inline: 4px;
  font-size: 0.625rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.summary-student-page .md-summary-student-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 36px 20px;
  border: 1px dashed rgba(21, 101, 192, 0.22);
  border-radius: 16px;
  background: linear-gradient(180deg, #e3f2fd 0%, #fff 72%);
  text-align: center;
  font-family: "Jost", sans-serif;
}

.summary-student-page .md-summary-student-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  color: #1565c0;
  font-size: 1.375rem;
  box-shadow: 0 2px 8px rgba(13, 71, 161, 0.14);
  margin-bottom: 4px;
}

.summary-student-page .md-summary-student-empty__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0d47a1;
}

.summary-student-page .md-summary-student-empty__text {
  margin: 0;
  max-width: 280px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #5f6368;
}

@media (max-width: 420px) {
  .summary-student-page .md-gen-card__actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Summary check-result modal (fullEmptyModal) */
#fullEmptyModal:has(.md-summary-check-sheet) .md-timeline-sheet__body.modal-div {
  padding: 12px 14px 8px;
}

#fullEmptyModal:has(.md-summary-check-sheet) .md-timeline-sheet__overline {
  color: #1565c0;
}

.md-summary-check-sheet {
  max-width: 680px;
  margin: 0 auto;
  font-family: "Jost", sans-serif;
}

.md-check-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 16px;
  padding: 4px;
  border-radius: 14px;
  background: #f1f3f4;
}

.md-check-pick__tab {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #5f6368;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.md-check-pick__tab:hover,
.md-check-pick__tab:focus-visible {
  background: rgba(255, 255, 255, 0.7);
  outline: none;
}

.md-check-pick__tab.active {
  background: #fff;
  color: #0d47a1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.md-check-pick__tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #e8eaed;
  color: #5f6368;
  font-size: 0.875rem;
}

.md-check-pick__tab.active .md-check-pick__tab-icon {
  background: #e3f2fd;
  color: #1565c0;
}

.md-check-pick__tab-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.md-check-pick__tab-title {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
}

.md-check-pick__tab-sub {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #80868b;
}

.md-check-pick__tab.active .md-check-pick__tab-sub {
  color: rgba(13, 71, 161, 0.72);
}

.md-check-pick__intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, #e3f2fd 0%, #fff 72%);
  border: 1px solid rgba(25, 118, 210, 0.12);
}

.md-check-pick__intro-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  color: #1565c0;
  font-size: 1rem;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.08);
}

.md-check-pick__intro-icon--class {
  color: #00796b;
  background: #e0f2f1;
}

.md-check-pick__intro-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #202124;
}

.md-check-pick__intro-lead {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #5f6368;
}

.md-check-pick__panels > .tab-pane {
  display: none;
}

.md-check-pick__panels > .tab-pane.show.active {
  display: block;
}

.md-summary-check-sheet .md-check-pick-field {
  margin-bottom: 12px;
}

.md-summary-check-sheet .md-check-pick-field .bootstrap-select {
  width: 100% !important;
}

/* Outlined Material select toggle */
.md-summary-check-sheet .bootstrap-select > .dropdown-toggle.md-check-pick-select__btn,
.md-summary-check-sheet .bootstrap-select.md-check-pick-select > .dropdown-toggle,
#fullEmptyModal .md-summary-check-sheet .bootstrap-select > .dropdown-toggle,
#fullEmptyModal .md-summary-check-sheet .bootstrap-select > .dropdown-toggle.bg-dark-dark {
  min-height: 52px !important;
  padding: 12px 40px 12px 14px !important;
  border: 1px solid #c0c4c8 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #202124 !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  text-align: left !important;
  text-transform: none !important;
  outline: none !important;
}

.md-summary-check-sheet .bootstrap-select > .dropdown-toggle.md-check-pick-select__btn:hover,
.md-summary-check-sheet .bootstrap-select.md-check-pick-select > .dropdown-toggle:hover {
  border-color: #5f6368 !important;
  background: #fff !important;
}

.md-summary-check-sheet .bootstrap-select > .dropdown-toggle.md-check-pick-select__btn:focus,
.md-summary-check-sheet .bootstrap-select.show > .dropdown-toggle.md-check-pick-select__btn,
.md-summary-check-sheet .bootstrap-select.md-check-pick-select.show > .dropdown-toggle {
  border-color: #1a73e8 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.16) !important;
}

.md-summary-check-sheet .bootstrap-select .filter-option-inner-inner {
  color: #202124 !important;
}

.md-summary-check-sheet .bootstrap-select .dropdown-toggle .bs-caret,
.md-summary-check-sheet .bootstrap-select .dropdown-toggle::after {
  color: #5f6368 !important;
}

.md-summary-check-sheet .bootstrap-select.show .dropdown-toggle .bs-caret,
.md-summary-check-sheet .bootstrap-select.show .dropdown-toggle::after {
  color: #1a73e8 !important;
}

.md-check-pick__submit {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  gap: 8px;
  text-transform: none;
  background: #1565c0 !important;
  color: #fff !important;
}

.md-check-pick__submit:hover,
.md-check-pick__submit:focus-visible {
  background: #0d47a1 !important;
}

/* Material dropdown menu for check-result selects */
#fullEmptyModal .md-check-pick-select .dropdown-menu,
#fullEmptyModal .bootstrap-select.md-check-pick-select .dropdown-menu {
  margin: 6px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 14px !important;
  background: #fff !important;
  font-family: "Jost", sans-serif !important;
  box-shadow:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden !important;
  z-index: 2100 !important;
}

#fullEmptyModal .md-check-pick-select .bs-searchbox {
  position: relative;
  padding: 12px 12px 10px !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: #f8fbff;
}

#fullEmptyModal .md-check-pick-select .bs-searchbox::before {
  content: "\f002";
  font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
  font-weight: 900;
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: #1a73e8;
  font-size: 0.8125rem;
  pointer-events: none;
  z-index: 1;
}

#fullEmptyModal .md-check-pick-select .bs-searchbox .form-control {
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 14px 10px 40px !important;
  border: 1.5px solid rgba(26, 115, 232, 0.28) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #202124 !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

#fullEmptyModal .md-check-pick-select .bs-searchbox .form-control:focus {
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.16) !important;
}

#fullEmptyModal .md-check-pick-select .dropdown-menu .inner.show {
  max-height: min(280px, 42vh) !important;
}

#fullEmptyModal .md-check-pick-select .dropdown-menu li a,
#fullEmptyModal .md-check-pick-select .dropdown-menu li a.dropdown-item {
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  margin: 0 6px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  color: #202124 !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  background: transparent !important;
}

#fullEmptyModal .md-check-pick-select .dropdown-menu li a:hover,
#fullEmptyModal .md-check-pick-select .dropdown-menu li a:focus,
#fullEmptyModal .md-check-pick-select .dropdown-menu li.active:not(.selected) a {
  background: #f1f3f4 !important;
  color: #202124 !important;
}

#fullEmptyModal .md-check-pick-select .dropdown-menu li.selected a,
#fullEmptyModal .md-check-pick-select .dropdown-menu li.selected.active a {
  background: #e8f0fe !important;
  color: #1557b0 !important;
  font-weight: 600 !important;
}

#fullEmptyModal .md-check-pick-select .dropdown-menu li a span.check-mark {
  display: none !important;
}

#fullEmptyModal:has(.md-summary-check-sheet):has(.bootstrap-select.show),
#fullEmptyModal:has(.md-summary-check-sheet):has(.bootstrap-select.open) {
  overflow: visible;
}

/* Import class attendance sheet */
#fullEmptyModal:has(.md-import-att) .md-timeline-sheet__body.modal-div {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden !important;
  padding: 14px 14px 8px;
  background: #f3f5f8;
  -webkit-overflow-scrolling: touch;
}

#fullEmptyModal:has(.md-import-att) .md-timeline-sheet__footer.modal-footer {
  display: block !important;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px) + var(--md-sheet-footer-safe, 0px));
  background: #fff;
  border-top: 1px solid rgba(21, 101, 192, 0.12);
  box-shadow: 0 -8px 24px rgba(13, 71, 161, 0.1);
  z-index: 30;
}

#fullEmptyModal:has(.md-import-att) .md-timeline-sheet__footer .md-sl-form-actions,
#fullEmptyModal:has(.md-import-att) .md-import-att__actions {
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
  gap: 8px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  position: relative;
  box-sizing: border-box;
}

#fullEmptyModal:has(.md-import-att) .md-import-att__actions .attend-loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
}

#fullEmptyModal:has(.md-import-att) .md-import-att__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  max-width: 100%;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: none;
  box-sizing: border-box;
}

#fullEmptyModal:has(.md-import-att) .md-import-att__btn > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

#fullEmptyModal:has(.md-import-att) .md-import-att__btn > i {
  flex-shrink: 0;
  font-size: 0.875rem;
  margin: 0;
}

#fullEmptyModal:has(.md-import-att) .md-import-att__btn--close {
  background: #e8f0fe !important;
  color: #1565c0 !important;
}

#fullEmptyModal:has(.md-import-att) .md-import-att__btn--close:hover,
#fullEmptyModal:has(.md-import-att) .md-import-att__btn--close:focus-visible {
  background: #d2e3fc !important;
  color: #0d47a1 !important;
}

#fullEmptyModal:has(.md-import-att) .md-import-att__btn--apply {
  background: #1565c0 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(13, 71, 161, 0.24);
}

#fullEmptyModal:has(.md-import-att) .md-import-att__btn--apply:hover,
#fullEmptyModal:has(.md-import-att) .md-import-att__btn--apply:focus-visible {
  background: #0d47a1 !important;
  color: #fff !important;
}

@media (max-width: 360px) {
  #fullEmptyModal:has(.md-import-att) .md-import-att__actions {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.4fr);
    gap: 6px;
  }

  #fullEmptyModal:has(.md-import-att) .md-import-att__btn {
    min-height: 44px;
    padding: 0 8px;
    font-size: 0.75rem;
  }

  #fullEmptyModal:has(.md-import-att) .md-import-att__btn--apply > i {
    display: none;
  }
}

#fullEmptyModal:has(.md-import-att) .md-timeline-sheet__title .md-sl-form-heading__overline {
  color: #1565c0;
}

.md-import-att {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  font-family: "Jost", sans-serif;
}

.md-import-att__hint {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #e8f0fe;
  color: #174ea6;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.md-import-att__hint > i {
  margin-top: 2px;
  flex-shrink: 0;
}

.md-import-att__stats {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(21, 101, 192, 0.16);
  background:
    linear-gradient(135deg, #0d47a1 0%, #1565c0 48%, #1976d2 100%);
  box-shadow: 0 4px 14px rgba(13, 71, 161, 0.18);
}

.md-import-att__stat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  box-sizing: border-box;
}

.md-import-att__stat + .md-import-att__stat {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.md-import-att__stat-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #e3f2fd;
  font-size: 0.8125rem;
}

.md-import-att__stat-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.md-import-att__stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.md-import-att__stat-label {
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(227, 242, 253, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-import-att__panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(21, 101, 192, 0.12);
  box-shadow: 0 2px 8px rgba(13, 71, 161, 0.06);
  overflow: hidden;
}

.md-import-att__legend {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  background: linear-gradient(180deg, #eef5fc 0%, #f7fafc 100%);
  border-bottom: 1px solid rgba(21, 101, 192, 0.1);
  position: relative;
  top: auto;
  z-index: 1;
}

.md-import-att__legend-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1565c0;
}

.md-import-att__legend-nums {
  display: grid;
  grid-template-columns: 36px 36px 36px;
  gap: 6px;
  text-align: center;
}

.md-import-att__legend-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border-radius: 6px;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.md-import-att__legend-item--present {
  background: #e8f5e9;
  color: #2e7d32;
}

.md-import-att__legend-item--late {
  background: #fff8e1;
  color: #ef6c00;
}

.md-import-att__legend-item--absent {
  background: #ffebee;
  color: #c62828;
}

.md-import-att__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  flex: 1 1 auto;
  min-height: 0;
  /* Cap height so touch scroll works even if flex chain fails */
  max-height: min(52vh, 420px);
  max-height: min(52dvh, 420px);
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  /* Promote scroll layer — required for nested scroll in RN WebView */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

html.is-webview .md-import-att__list,
body.is-webview .md-import-att__list,
.is-webview .md-import-att__list {
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
}

/* Inside the cover sheet: fill remaining height via flex (height:0 trick) */
#fullEmptyModal:has(.md-import-att) .md-import-att__panel {
  flex: 1 1 auto;
  min-height: 0;
}

#fullEmptyModal:has(.md-import-att) .md-import-att__list {
  flex: 1 1 auto;
  min-height: 0;
  height: 0;
  max-height: none;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

.md-import-att__row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 0 6px;
  padding: 8px 8px;
  border-radius: 12px;
  border-bottom: none;
  transition: background-color 0.15s ease;
}

.md-import-att__row:nth-child(odd) {
  background: rgba(21, 101, 192, 0.03);
}

.md-import-att__row:last-child {
  border-bottom: none;
}

.md-import-att__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: hsl(var(--att-hue, 210), 58%, 46%);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.md-import-att__name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.2;
}

.md-import-att__surname {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #0d47a1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-import-att__given {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #5f6368;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-import-att__nums {
  display: grid;
  grid-template-columns: 36px 36px 36px;
  gap: 6px;
}

.md-import-att__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0;
  border-radius: 9px;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}

.md-import-att__chip-val {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}

.md-import-att__chip-lab {
  display: none;
}

.md-import-att__chip--present {
  background: #e8f5e9;
  border-color: rgba(46, 125, 50, 0.16);
  color: #2e7d32;
}

.md-import-att__chip--late {
  background: #fff8e1;
  border-color: rgba(245, 127, 23, 0.2);
  color: #e65100;
}

.md-import-att__chip--late .md-import-att__chip-val {
  color: #e65100;
}

.md-import-att__chip--absent {
  background: #ffebee;
  border-color: rgba(198, 40, 40, 0.16);
  color: #c62828;
}

.md-import-att__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 16px;
  text-align: center;
}

.md-import-att__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e3f2fd;
  color: #1565c0;
  font-size: 1.125rem;
}

.md-import-att__empty-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #202124;
}

.md-import-att__empty-text {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #5f6368;
  max-width: 240px;
}

/* Summary student modals — Attendance / Behaviour (empty_modal) + Comments (fullEmptyModal) */
#empty_modal:has(.md-behaviour) .modal-div,
#empty_modal:has(.md-ss-attend) .modal-div {
  background: #f8fafc;
}

#empty_modal:has(.md-behaviour) .md-behaviour__group {
  background: #fff;
}

#fullEmptyModal:has(.md-ss-comment) .md-timeline-sheet__body.modal-div {
  padding: 14px 14px 8px;
  background: #f3f5f8;
}

#fullEmptyModal:has(.md-ss-comment) .md-timeline-sheet__footer.modal-footer {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px) + var(--md-sheet-footer-safe, 0px));
  background: #fff;
  box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
  z-index: 30;
}

#fullEmptyModal:has(.md-ss-comment) .md-timeline-sheet__footer .md-sl-form-actions,
#empty_modal:has(.md-behaviour) .modal-footer .md-sl-form-actions,
#empty_modal:has(.md-ss-attend) .modal-footer .md-sl-form-actions {
  width: 100%;
}

#fullEmptyModal:has(.md-ss-comment) .md-timeline-sheet__title .md-sl-form-heading__overline,
#empty_modal:has(.md-sl-form) .modal-title .md-sl-form-heading__overline {
  color: rgba(255, 255, 255, 0.78);
}

.md-ss-comment {
  gap: 12px;
}

.md-ss-comment__hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #e8f0fe;
  color: #174ea6;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.md-ss-comment__hint > i {
  margin-top: 2px;
  flex-shrink: 0;
}

.md-ss-comment__block {
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.md-ss-comment__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}

.md-ss-comment__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e3f2fd;
  color: #1565c0;
  flex-shrink: 0;
}

.md-ss-comment__head-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.md-ss-comment__overline {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1565c0;
}

.md-ss-comment__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: #202124;
  text-transform: none;
}

.md-ss-comment__field {
  margin-bottom: 10px;
}

.md-ss-comment__field .mui-field__input,
.md-ss-comment textarea.mui-field__input {
  min-height: 120px;
  resize: vertical;
  line-height: 1.45;
  font-family: inherit;
  text-transform: uppercase;
}

.md-ss-comment__ai-btn,
.md-ss-comment__use-btn {
  width: 100%;
  min-height: 42px;
  justify-content: center;
  text-transform: none;
  box-shadow: none;
}

.md-ss-comment__ai {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px dashed rgba(21, 101, 192, 0.28);
}

.md-ss-comment__ai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
}

.md-ss-comment__ai-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5f6368;
}

.md-ss-comment__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(21, 101, 192, 0.2);
  border-top-color: #1565c0;
  border-radius: 50%;
  animation: md-ss-comment-spin 0.7s linear infinite;
}

.md-ss-comment__spinner[style*="display: none"],
.form_staff_ai_progress[style*="display: none"],
.principal_ai_progress[style*="display: none"] {
  display: none !important;
}

@keyframes md-ss-comment-spin {
  to { transform: rotate(360deg); }
}

.md-ss-comment__ai-body {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  color: #202124;
  font-size: 0.875rem;
  line-height: 1.5;
  min-height: 48px;
  white-space: pre-wrap;
}

#empty_modal:has(.md-behaviour) .mui-field--outlined .mui-field__select,
#empty_modal:has(.md-ss-attend) .mui-field--outlined .mui-field__input {
  background: #fff;
}

#generateWithAIModal.md-sl-admit-sheet .spinnerAssign.md-timeline-sheet__loader,
#create_topic.md-sl-admit-sheet .spinnerAssign.md-timeline-sheet__loader {
  display: none;
}
#generateWithAIModal.md-sl-admit-sheet .spinnerAssign.md-timeline-sheet__loader.is-loading,
#create_topic.md-sl-admit-sheet .spinnerAssign.md-timeline-sheet__loader.is-loading,
#generateWithAIModal.md-sl-admit-sheet .spinnerAssign:not(.d-none):not([style*="display: none"]),
#create_topic.md-sl-admit-sheet .spinnerAssign:not(.d-none):not([style*="display: none"]) {
  display: flex;
}

/* AI comment picker sheet */
#generateAction.md-ai-pick-sheet .md-sl-sheet__overline {
  color: #1565c0;
}

#generateAction.md-ai-pick-sheet .md-ai-pick-sheet__lead {
  margin: 0 16px 12px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #5f6368;
}

#generateAction.md-ai-pick-sheet .md-sl-sheet-list {
  padding: 0 8px 16px;
}

/* AI comment full-screen sheet — blue system */
#generateWithAIModal.md-sl-admit-sheet {
  --ai-blue: #1565c0;
  --ai-blue-dark: #0d47a1;
  --ai-blue-soft: #e3f2fd;
}

#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__header {
  background: linear-gradient(135deg, #0d47a1 0%, #1565c0 48%, #1e88e5 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 4px 14px rgba(13, 71, 161, 0.28);
}

#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__overline {
  color: rgba(227, 242, 253, 0.92) !important;
}

#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__title {
  color: #fff !important;
}

#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__close {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}

#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__close:hover,
#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__close:focus-visible {
  background: rgba(255, 255, 255, 0.26) !important;
  color: #fff !important;
}

#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__body {
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(30, 136, 229, 0.12), transparent 55%),
    linear-gradient(180deg, #e8f1fb 0%, #eef3f9 40%, #f5f7fb 100%) !important;
}

#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__footer {
  border-top-color: rgba(21, 101, 192, 0.14) !important;
  background: #fff !important;
}

#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__footer .md-btn-contained:not(.md-btn-contained--tonal) {
  background: #1565c0;
  color: #fff;
}

#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__footer .md-btn-contained:not(.md-btn-contained--tonal):hover,
#generateWithAIModal.md-sl-admit-sheet .md-timeline-sheet__footer .md-btn-contained:not(.md-btn-contained--tonal):focus-visible {
  background: #0d47a1;
  color: #fff;
}

.md-ai-comment {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.md-ai-comment .md-ecr-guide {
  margin: 0;
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(21, 101, 192, 0.18);
  background: linear-gradient(180deg, #e3f2fd 0%, #ffffff 70%);
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.06);
}

.md-ai-comment .md-ecr-guide__icon {
  background: rgba(21, 101, 192, 0.12);
  color: #1565c0;
}

.md-ai-comment .md-ecr-guide__title {
  color: #0d47a1;
}

.md-ai-comment .md-ecr-guide__steps {
  color: #37474f;
}

.md-ai-comment .md-ecr-guide__steps em {
  color: #1565c0;
  font-style: normal;
  font-weight: 700;
}

.md-ai-comment__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.md-ai-comment__meta .md-chip--info {
  background: #e3f2fd !important;
  color: #0d47a1 !important;
}

.md-ai-comment__toolbar {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 6px;
  border: 1px solid rgba(21, 101, 192, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 14px rgba(13, 71, 161, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-sizing: border-box;
  max-width: 100%;
}

.md-ai-comment__toolbar .md-ai-comment__btn,
.md-ai-comment__toolbar .md-ai-comment__generate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: none;
  box-sizing: border-box;
}

.md-ai-comment__toolbar .md-ai-comment__btn > i,
.md-ai-comment__toolbar .md-ai-comment__generate > i {
  flex-shrink: 0;
  font-size: 0.8125rem;
  margin: 0;
}

.md-ai-comment__toolbar .md-ai-comment__btn > span,
.md-ai-comment__toolbar .md-ai-comment__generate > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-ai-comment__toolbar .md-ai-comment__btn--check {
  background: #e3f2fd !important;
  color: #0d47a1 !important;
  border: 1px solid #90caf9;
  padding: 0 8px;
}

.md-ai-comment__toolbar .md-ai-comment__btn--check:hover,
.md-ai-comment__toolbar .md-ai-comment__btn--check:focus-visible {
  background: #bbdefb !important;
  color: #0d47a1 !important;
}

.md-ai-comment__toolbar .md-ai-comment__btn--uncheck {
  background: #fff !important;
  color: #1565c0 !important;
  border: 1px solid #90caf9;
  padding: 0 8px;
}

.md-ai-comment__toolbar .md-ai-comment__btn--uncheck:hover,
.md-ai-comment__toolbar .md-ai-comment__btn--uncheck:focus-visible {
  background: #e8f0fe !important;
  color: #0d47a1 !important;
}

.md-ai-comment__toolbar .md-ai-comment__generate {
  grid-column: auto;
  background: linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1e88e5 100%) !important;
  color: #fff !important;
  border: none;
  box-shadow: 0 2px 8px rgba(13, 71, 161, 0.28);
}

.md-ai-comment__toolbar .md-ai-comment__generate:hover,
.md-ai-comment__toolbar .md-ai-comment__generate:focus-visible {
  background: linear-gradient(135deg, #0b3d8c 0%, #0d47a1 55%, #1565c0 100%) !important;
  color: #fff !important;
}

@media (max-width: 360px) {
  .md-ai-comment__toolbar {
    gap: 4px;
    padding: 5px;
  }

  .md-ai-comment__toolbar .md-ai-comment__btn,
  .md-ai-comment__toolbar .md-ai-comment__generate {
    min-height: 42px;
    padding: 0 6px;
    font-size: 0.6875rem;
  }

  .md-ai-comment__toolbar .md-ai-comment__btn > span {
    display: none;
  }

  .md-ai-comment__toolbar .md-ai-comment__btn {
    min-width: 42px;
    width: 42px;
    padding: 0;
  }
}

.md-ai-comment-table,
.md-ai-comment-table thead,
.md-ai-comment-table tbody,
.md-ai-comment-table tr,
.md-ai-comment-table th,
.md-ai-comment-table td {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
}

.md-ai-comment-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.md-ai-comment-table tbody tr + tr {
  margin-top: 8px;
}

.md-ai-comment .dataTables_wrapper {
  margin: 0;
}

.md-ai-comment .dataTables_wrapper .dataTables_filter {
  float: none !important;
  text-align: left;
  width: 100%;
  margin: 0 0 10px;
}

.md-ai-comment .dataTables_wrapper .dataTables_filter label {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 0;
  color: transparent;
}

.md-ai-comment .dataTables_wrapper .dataTables_filter input,
.md-ai-comment .dataTables_wrapper .dataTables_filter input[type="search"] {
  display: block !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 14px 10px 40px !important;
  border: 1px solid rgba(21, 101, 192, 0.16) !important;
  border-radius: 12px !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231565c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center / 16px 16px !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #202124 !important;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.05) !important;
  box-sizing: border-box !important;
}

.md-ai-comment .dataTables_wrapper .dataTables_filter input:focus,
.md-ai-comment .dataTables_wrapper .dataTables_filter input[type="search"]:focus {
  outline: none !important;
  border-color: #1565c0 !important;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16) !important;
}

.md-ai-comment .dataTables_wrapper .dataTables_filter input::placeholder {
  color: #80868b;
  opacity: 1;
}

.md-ai-comment__card {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(21, 101, 192, 0.12);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.05);
}

.md-ai-comment__card.is-filled {
  border-color: rgba(21, 101, 192, 0.22);
  box-shadow: 0 2px 8px rgba(13, 71, 161, 0.08);
}

.md-ai-comment__check {
  margin: 0;
  padding: 10px 12px;
  gap: 10px;
  border-bottom: 1px solid rgba(21, 101, 192, 0.08);
  background: linear-gradient(180deg, #f5f9ff 0%, #fff 100%);
  border-radius: 0;
}

.md-ai-comment__check:hover {
  background: #eef5ff;
}

.md-ai-comment__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.md-ai-comment__identity .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.md-ai-comment__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: hsl(var(--ai-hue, 210), 58%, 46%);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.md-ai-comment__name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.2;
}

.md-ai-comment__surname {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #0d47a1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-ai-comment__given {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #5f6368;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-ai-comment__field {
  margin: 0;
  padding: 10px 12px 12px;
}

.md-ai-comment__field .mui-field__label {
  color: #1565c0;
}

.md-ai-comment__input {
  min-height: 140px;
  resize: vertical;
  text-transform: uppercase;
  line-height: 1.45;
  font-size: 0.8125rem;
  background: #fafcff;
}

.md-ai-comment__card.is-filled .md-ai-comment__input {
  background: #fff;
  border-color: rgba(21, 101, 192, 0.2);
}

.md-ai-comment .md-ecr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 48px 12px;
  padding: 24px 16px;
  text-align: center;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  color: #5f6368;
}

.md-ai-comment .md-ecr-empty i {
  font-size: 1.5rem;
  color: #c62828;
}

.md-ai-comment .md-ecr-empty p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.md-ai-comment .md-ecr-empty em {
  font-style: normal;
  font-weight: 700;
  color: #202124;
}

/* ═══════════════════════════════════════════════════════════
   Event clock — Material (MUI-inspired) page
   ═══════════════════════════════════════════════════════════ */

html.event-clock-app .header.header-fixed,
body.event-clock-app .header.header-fixed,
.is-webview.event-clock-app .header.header-fixed,
.is-webview body.event-clock-app .header.header-fixed,
html.event-clock-app .page-title-clear,
body.event-clock-app .page-title-clear {
  display: none !important;
}

.event-clock-page {
  --ec-primary: #1565c0;
  --ec-primary-dark: #0d47a1;
  --ec-soft: #e3f2fd;
  --ec-ink: #0d47a1;
  --ec-bg: #f5f8fc;
  --ec-in: #2e7d32;
  --ec-in-soft: #e8f5e9;
  --ec-out: #c62828;
  --ec-out-soft: #ffebee;
  --ec-dock-height: 92px;
  --md-ec-toolbar-offset: 188px;
  --mui-primary: var(--ec-primary);
  --mui-primary-dark: var(--ec-primary-dark);
  --mui-primary-container: var(--ec-soft);
  --mui-font: "Jost", sans-serif;
  --md-font: "Jost", sans-serif;
  font-family: "Jost", sans-serif !important;
  background: var(--ec-bg);
  min-height: 100vh;
}

.event-clock-page .page-title-clear { display: none !important; }

.event-clock-page .event-clock-feed.page-content,
.event-clock-page .page-content,
.event-clock-page .event-clock-feed.md-feed {
  max-width: 680px;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--md-ec-toolbar-offset, 188px) + 8px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--ec-dock-height, 72px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 20px) !important;
  background: var(--ec-bg) !important;
  overflow: visible !important;
}

.event-clock-page .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Toolbar */
.event-clock-page .md-ec-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(21, 101, 192, 0.12) !important;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.06), 0 4px 12px rgba(13, 71, 161, 0.04) !important;
  background: linear-gradient(180deg, #e8f1fb 0%, #ffffff 64%) !important;
  transform: none !important;
  overflow: visible !important;
}

.event-clock-page .md-ec-toolbar .content,
.event-clock-page .md-ec-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 10px 12px 12px !important;
  box-sizing: border-box;
}

.event-clock-page .md-ec-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.event-clock-page .md-ec-toolbar__back,
.event-clock-page .md-ec-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(21, 101, 192, 0.14);
  border-radius: 50%;
  background: #fff;
  color: var(--ec-ink);
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.event-clock-page .md-ec-toolbar__reload { margin-left: auto; }

.event-clock-page .md-ec-toolbar__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ec-ink);
  text-transform: none;
}

.event-clock-page .md-ec-toolbar__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--ec-soft);
  border: 1px solid rgba(21, 101, 192, 0.2);
}

.event-clock-page .md-ec-toolbar__chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--ec-primary);
  font-size: 0.9375rem;
  box-shadow: 0 1px 3px rgba(13, 71, 161, 0.12);
}

.event-clock-page .md-ec-toolbar__chip-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.event-clock-page .md-ec-toolbar__chip-overline {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(13, 71, 161, 0.72);
}

.event-clock-page .md-ec-toolbar__chip-text {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ec-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-clock-page .md-ec-toolbar__date {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(21, 101, 192, 0.16);
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.05);
}

.event-clock-page .md-ec-toolbar__date-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  color: var(--ec-primary);
  background: var(--ec-soft);
}

.event-clock-page .md-ec-toolbar__date-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: #202124 !important;
  text-align: left !important;
  box-shadow: none !important;
}

.event-clock-page .md-ec-toolbar__search {
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 108px;
  margin: 0 !important;
  border-radius: 0 !important;
  height: auto !important;
  align-self: stretch;
}

/* Tabs */
.event-clock-page .md-ec-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 0 14px;
  padding: 6px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(21, 101, 192, 0.12);
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.04);
}

.event-clock-page .md-ec-tabs__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #5f6368;
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.event-clock-page .md-ec-tabs__btn.active,
.event-clock-page .md-ec-tabs__btn[aria-selected="true"] {
  background: var(--ec-soft);
  color: var(--ec-ink);
  box-shadow: inset 0 0 0 1px rgba(21, 101, 192, 0.18);
}

.event-clock-page .md-ec-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  font-size: 0.75rem;
  font-weight: 700;
}

.event-clock-page .md-ec-tabs__btn.active .md-ec-tabs__count,
.event-clock-page .md-ec-tabs__btn[aria-selected="true"] .md-ec-tabs__count {
  background: var(--ec-primary);
  color: #fff;
}

.event-clock-page .md-ec-tab-content {
  width: 100%;
}

.event-clock-page .md-ec-pane {
  display: none;
}

.event-clock-page .md-ec-pane.show.active,
.event-clock-page .md-ec-pane.active {
  display: block;
}

.event-clock-page .md-ec-pane.fade {
  opacity: 1;
  transition: none;
}

/* DataTables list */
.event-clock-page .md-ec-list .dataTables_wrapper { width: 100%; }

.event-clock-page .md-ec-list .dataTables_wrapper .dataTables_length,
.event-clock-page .md-ec-list .dataTables_wrapper .dataTables_info,
.event-clock-page .md-ec-list .dataTables_wrapper .dataTables_paginate {
  display: none !important;
}

.event-clock-page .md-ec-list .dataTables_wrapper .dataTables_filter {
  float: none !important;
  text-align: left !important;
  margin: 0 0 12px !important;
  width: 100%;
}

.event-clock-page .md-ec-list .dataTables_wrapper .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(21, 101, 192, 0.14);
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.05);
  font-size: 0 !important;
  color: transparent;
}

.event-clock-page .md-ec-list .dataTables_wrapper .dataTables_filter label::before {
  content: "\f002";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.9375rem;
  color: var(--ec-primary);
  opacity: 0.85;
}

.event-clock-page .md-ec-list .dataTables_wrapper .dataTables_filter input {
  flex: 1 1 auto;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: "Jost", sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  color: #202124 !important;
}

.event-clock-page .md-ec-list .dataTables_wrapper .dataTables_processing {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.event-clock-page .md-ec-list table#clock_in_table,
.event-clock-page .md-ec-list table#clock_out_table {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.event-clock-page .md-ec-list table thead { display: none; }

.event-clock-page .md-ec-list table tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.event-clock-page .md-ec-list table tbody tr,
.event-clock-page .md-ec-list table tbody td {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.event-clock-page .md-ec-list table tbody td.dataTables_empty {
  display: block !important;
  padding: 0 !important;
}

/* Cards — scan-log composition: identity + time stamp + quiet foot */
.event-clock-page .md-ec-card {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(21, 101, 192, 0.12);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.04);
}

.event-clock-page .md-ec-card--in {
  border-left: 3px solid var(--ec-in);
  background:
    linear-gradient(135deg, rgba(46, 125, 50, 0.06) 0%, transparent 42%),
    #fff;
}

.event-clock-page .md-ec-card--out {
  border-left: 3px solid var(--ec-out);
  background:
    linear-gradient(135deg, rgba(198, 40, 40, 0.06) 0%, transparent 42%),
    #fff;
}

.event-clock-page .md-ec-card__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding: 0;
}

.event-clock-page .md-ec-card__identity {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 12px 12px 10px;
}

.event-clock-page .md-ec-card__avatar {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 1px;
}

.event-clock-page .md-ec-card__photo {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
  background: var(--ec-soft);
}

.event-clock-page .md-ec-card__who {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.event-clock-page .md-ec-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.event-clock-page .md-ec-card__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #1a2332;
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-clock-page .md-ec-card__status.md-chip {
  flex-shrink: 0;
  margin: 0;
  padding: 3px 8px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.event-clock-page .md-ec-card__context {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: #5f6b7a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-clock-page .md-ec-card__dot {
  margin: 0 0.35em;
  opacity: 0.55;
}

.event-clock-page .md-ec-card__time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  min-width: 4.5rem;
  padding: 4px 0 0;
  text-align: right;
}

.event-clock-page .md-ec-card__time-value {
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #1a2332;
}

.event-clock-page .md-ec-card--in .md-ec-card__time-value {
  color: var(--ec-in);
}

.event-clock-page .md-ec-card--out .md-ec-card__time-value {
  color: var(--ec-out);
}

.event-clock-page .md-ec-card__time-label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #80868b;
  line-height: 1.2;
}

.event-clock-page .md-ec-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 10px 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(248, 250, 252, 0.9);
}

.event-clock-page .md-ec-card__scan {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
}

.event-clock-page .md-ec-card__scan-label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #80868b;
}

.event-clock-page .md-ec-card__scan-name {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: #3c4043;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-clock-page .md-ec-card__delete {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 32px !important;
  padding: 5px 12px !important;
  border: 1px solid rgba(198, 40, 40, 0.28) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--ec-out) !important;
  box-shadow: none !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
}

.event-clock-page .md-ec-card__delete i {
  font-size: 0.6875rem;
}

.event-clock-page .md-ec-card__delete:hover,
.event-clock-page .md-ec-card__delete:focus-visible {
  background: var(--ec-out-soft) !important;
  border-color: rgba(198, 40, 40, 0.45) !important;
  color: #b71c1c !important;
}

/* Legacy selectors kept inert so old markup remnants don't break layout */
.event-clock-page .md-ec-card__main,
.event-clock-page .md-ec-card__tags,
.event-clock-page .md-ec-card__meta,
.event-clock-page .md-ec-card__actions {
  display: contents;
}

/* Empty */
.event-clock-page .md-ec-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  padding: 28px 20px;
  border: 1px dashed rgba(21, 101, 192, 0.22);
  border-radius: var(--md-shape-lg, 12px);
  background: linear-gradient(180deg, #e3f2fd 0%, #fff 72%);
  text-align: center;
}

.event-clock-page .md-ec-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: #1565c0;
  font-size: 1.25rem;
  box-shadow: 0 2px 6px rgba(13, 71, 161, 0.16);
}

.event-clock-page .md-ec-empty__title {
  margin: 4px 0 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.event-clock-page .md-ec-empty__text {
  margin: 0;
  max-width: 280px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--md-text-secondary, #5f6368);
}

.event-clock-page .md-ec-empty--loading {
  border-style: solid;
  border-color: rgba(21, 101, 192, 0.12);
}

.event-clock-page .md-ec-empty__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(21, 101, 192, 0.18);
  border-top-color: #1565c0;
  border-radius: 50%;
  animation: md-ec-spin 0.7s linear infinite;
}

@keyframes md-ec-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .event-clock-page .md-ec-empty__spinner {
    animation: none;
  }
}

/* Sticky Clock in / out dock — MUI BottomAppBar + Contained Button */
.event-clock-page .md-ec-dock,
#event-clock-dock.md-ec-dock {
  --ec-dock-height: 92px;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 110;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
  pointer-events: none;
}

.event-clock-page .md-ec-dock__paper {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px));
  box-sizing: border-box;
  background: var(--mui-surface, #ffffff);
  border-top: 1px solid var(--md-outline, rgba(0, 0, 0, 0.12));
  /* MUI elevation 8 (BottomAppBar) */
  box-shadow:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.event-clock-page .md-ec-dock__btn,
#event-clock-dock.md-ec-dock .md-ec-dock__btn {
  position: relative;
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  border: none !important;
  border-radius: var(--mui-shape, 4px) !important;
  font-family: var(--mui-font, "Jost", "Roboto", sans-serif) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02857em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: #fff !important;
  box-shadow: var(--mui-elevation-2) !important;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.event-clock-page .md-ec-dock__start-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  margin-left: -2px;
}

.event-clock-page .md-ec-dock__label-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  text-align: left;
}

.event-clock-page .md-ec-dock__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.02857em;
  text-transform: uppercase;
  color: inherit;
}

.event-clock-page .md-ec-dock__caption {
  display: block;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: none;
  color: inherit;
  opacity: 0.84;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.event-clock-page .md-ec-dock__btn--in,
#event-clock-dock.md-ec-dock .md-ec-dock__btn--in {
  background: var(--mui-success, #2e7d32) !important;
  color: #fff !important;
}

.event-clock-page .md-ec-dock__btn--in:hover,
.event-clock-page .md-ec-dock__btn--in:focus-visible {
  background: #1b5e20 !important;
  box-shadow:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;
  outline: none;
}

.event-clock-page .md-ec-dock__btn--out,
#event-clock-dock.md-ec-dock .md-ec-dock__btn--out {
  background: var(--mui-error, #d32f2f) !important;
  color: #fff !important;
}

.event-clock-page .md-ec-dock__btn--out:hover,
.event-clock-page .md-ec-dock__btn--out:focus-visible {
  background: #c62828 !important;
  box-shadow:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;
  outline: none;
}

.event-clock-page .md-ec-dock__btn:active {
  box-shadow: var(--mui-elevation-1) !important;
}

/* RN WebView already clears system nav — don't double-pad the dock */
html.is-webview .event-clock-page .md-ec-dock,
html.is-webview #event-clock-dock.md-ec-dock,
body.is-webview .event-clock-page .md-ec-dock,
body.is-webview #event-clock-dock.md-ec-dock {
  bottom: 0 !important;
  padding-bottom: 0 !important;
}

html.is-webview .event-clock-page .md-ec-dock__paper,
body.is-webview .event-clock-page .md-ec-dock__paper,
html.is-webview #event-clock-dock .md-ec-dock__paper,
body.is-webview #event-clock-dock .md-ec-dock__paper {
  padding-bottom: 12px !important;
}

html.is-webview .event-clock-page .event-clock-feed.page-content,
html.is-webview .event-clock-page .page-content,
html.is-webview .event-clock-page .event-clock-feed.md-feed,
body.is-webview .event-clock-page .event-clock-feed.page-content,
body.is-webview .event-clock-page .page-content,
body.is-webview .event-clock-page .event-clock-feed.md-feed {
  padding-bottom: calc(var(--ec-dock-height, 92px) + 20px) !important;
}

@media (max-width: 360px) {
  .event-clock-page .md-ec-dock__paper {
    gap: 8px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .event-clock-page .md-ec-dock__btn,
  #event-clock-dock.md-ec-dock .md-ec-dock__btn {
    gap: 8px;
    min-height: 52px !important;
    padding: 8px 10px !important;
  }

  .event-clock-page .md-ec-dock__start-icon {
    font-size: 1.125rem;
  }

  .event-clock-page .md-ec-dock__label {
    font-size: 0.8125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .event-clock-page .md-ec-dock__btn,
  #event-clock-dock.md-ec-dock .md-ec-dock__btn {
    transition: none;
  }
}

/* Scanner sheets */
#clock_in_scanner.event-clock-sheet,
#clock_out_scanner.event-clock-sheet {
  --ec-primary: #1565c0;
  --ec-in: #2e7d32;
  --ec-in-soft: #e8f5e9;
  --ec-out: #c62828;
  --ec-out-soft: #ffebee;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 1300 !important;
  transform: none !important;
  display: none !important;
}

#clock_in_scanner.event-clock-sheet.menu-active,
#clock_out_scanner.event-clock-sheet.menu-active {
  display: flex !important;
  flex-direction: column !important;
}

#clock_in_scanner.event-clock-sheet .md-timeline-sheet__panel,
#clock_out_scanner.event-clock-sheet .md-timeline-sheet__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 680px;
  margin: 0 auto;
  background: #fff;
  font-family: "Jost", sans-serif;
  overflow: hidden;
}

#clock_in_scanner.event-clock-sheet .md-timeline-sheet__handle,
#clock_out_scanner.event-clock-sheet .md-timeline-sheet__handle {
  display: none;
}

#clock_in_scanner.event-clock-sheet .md-timeline-sheet__header,
#clock_out_scanner.event-clock-sheet .md-timeline-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 10px 14px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, #e3f2fd 0%, #ffffff 72%);
}

#clock_out_scanner.event-clock-sheet .md-timeline-sheet__header {
  background: linear-gradient(180deg, #ffebee 0%, #ffffff 72%);
}

#clock_in_scanner.event-clock-sheet .md-timeline-sheet__heading,
#clock_out_scanner.event-clock-sheet .md-timeline-sheet__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

#clock_in_scanner.event-clock-sheet .md-timeline-sheet__overline,
#clock_out_scanner.event-clock-sheet .md-timeline-sheet__overline {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ec-primary);
}

#clock_out_scanner.event-clock-sheet .md-timeline-sheet__overline {
  color: var(--ec-out);
}

#clock_in_scanner.event-clock-sheet .md-timeline-sheet__title,
#clock_out_scanner.event-clock-sheet .md-timeline-sheet__title {
  margin: 0 !important;
  font-family: "Jost", sans-serif !important;
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.03em;
  color: #202124 !important;
  text-transform: none !important;
}

#clock_in_scanner.event-clock-sheet .md-timeline-sheet__lead,
#clock_out_scanner.event-clock-sheet .md-timeline-sheet__lead {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #5f6368;
}

#clock_in_scanner.event-clock-sheet .md-timeline-sheet__close,
#clock_out_scanner.event-clock-sheet .md-timeline-sheet__close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: #f1f3f4 !important;
  color: #5f6368 !important;
  cursor: pointer;
}

#clock_in_scanner.event-clock-sheet .md-timeline-sheet__body,
#clock_out_scanner.event-clock-sheet .md-timeline-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px;
}

#clock_in_scanner.event-clock-sheet .md-timeline-sheet__loader,
#clock_out_scanner.event-clock-sheet .md-timeline-sheet__loader {
  flex-shrink: 0;
}

#clock_in_scanner.event-clock-sheet .md-ec-scan,
#clock_out_scanner.event-clock-sheet .md-ec-scan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 4px 24px;
}

#clock_in_scanner.event-clock-sheet .md-ec-scan__preview,
#clock_out_scanner.event-clock-sheet .md-ec-scan__preview {
  position: relative;
  width: 100%;
  max-width: 420px;
  min-height: 280px;
  overflow: hidden;
  border-radius: 16px;
  background: #0f172a;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

#clock_in_scanner.event-clock-sheet .md-ec-scan__preview video,
#clock_out_scanner.event-clock-sheet .md-ec-scan__preview video,
#clock_in_scanner.event-clock-sheet .md-ec-scan__preview canvas,
#clock_out_scanner.event-clock-sheet .md-ec-scan__preview canvas {
  width: 100% !important;
  border-radius: 16px;
}

#clock_in_scanner.event-clock-sheet .md-ec-scan__hint,
#clock_out_scanner.event-clock-sheet .md-ec-scan__hint {
  margin: 0;
  width: 100%;
  max-width: 420px;
  padding: 12px 14px;
  border-radius: 12px;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
}

#clock_in_scanner.event-clock-sheet .md-ec-scan__hint--in {
  background: var(--ec-in-soft);
  color: var(--ec-in);
  border: 1px solid rgba(46, 125, 50, 0.22);
}

#clock_out_scanner.event-clock-sheet .md-ec-scan__hint--out {
  background: var(--ec-out-soft);
  color: var(--ec-out);
  border: 1px solid rgba(198, 40, 40, 0.22);
}

#clock_in_scanner.event-clock-sheet .md-ec-scan__footer,
#clock_out_scanner.event-clock-sheet .md-ec-scan__footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  flex-shrink: 0;
  padding: 12px 16px calc(12px + var(--md-sheet-footer-safe, 0px));
  background: #fff;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

#clock_in_scanner.event-clock-sheet .md-ec-scan__close,
#clock_out_scanner.event-clock-sheet .md-ec-scan__close {
  width: 100%;
  min-height: 44px !important;
  background: #0d47a1 !important;
  color: #fff !important;
  box-shadow:
    0px 3px 1px -2px rgba(13, 71, 161, 0.28),
    0px 2px 2px 0px rgba(13, 71, 161, 0.18),
    0px 1px 5px 0px rgba(13, 71, 161, 0.14) !important;
}

#clock_in_scanner.event-clock-sheet .md-ec-scan__close:hover,
#clock_in_scanner.event-clock-sheet .md-ec-scan__close:focus-visible,
#clock_out_scanner.event-clock-sheet .md-ec-scan__close:hover,
#clock_out_scanner.event-clock-sheet .md-ec-scan__close:focus-visible {
  background: #002171 !important;
  color: #fff !important;
  outline: none;
}

#clock_in_scanner.event-clock-sheet .scanner-overlay,
#clock_out_scanner.event-clock-sheet .scanner-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
  z-index: 5;
  border-radius: 16px;
}

@media (max-width: 360px) {
  .event-clock-page .md-ec-toolbar__title { font-size: 1.125rem; }
  .event-clock-page .md-ec-toolbar__search { min-width: 92px; }
  .event-clock-page .md-ec-card__body { grid-template-columns: 52px minmax(0, 1fr); }
  .event-clock-page .md-ec-card__photo { width: 48px; height: 48px; }
}

/* ── zap-app: cas-page (class-activity-submission) ── */
html.cas-app .header.header-fixed,
body.cas-app .header.header-fixed,
.is-webview.cas-app .header.header-fixed,
.is-webview body.cas-app .header.header-fixed,
html.cas-app .page-title-clear,
body.cas-app .page-title-clear {
  display: none !important;
}

.cas-page {
  --cas-primary: #1565c0;
  --cas-soft: #e3f2fd;
  --cas-ink: #0d47a1;
  --cas-bg: #f5f8fc;
  font-family: "Jost", sans-serif !important;
  background: var(--cas-bg);
  min-height: 100vh;
}

.cas-page .md-class-result-hero__title {
  font-size: 0.9375rem;
  line-height: 1.3;
}

.cas-page .md-class-result-hero__stat-value {
  font-size: 1rem;
  line-height: 1.2;
}

.cas-page .page-title-clear { display: none !important; }

.cas-page.cas-feed.page-content,
.cas-page .cas-feed.page-content,
.cas-page .page-content {
  max-width: 680px;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--md-class-result-toolbar-offset, 72px) + 8px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 24px) !important;
  background: var(--cas-bg) !important;
}

.cas-page .md-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.cas-page .md-search-field:focus-within {
  border-color: var(--cas-primary);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16);
}

.cas-page .md-search-field__icon { color: rgba(0,0,0,.54); }

.cas-page .md-search-field__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
}

.cas-page .md-cas-list .dataTables_wrapper { width: 100%; }
.cas-page .md-cas-list .dataTables_wrapper .dataTables_length,
.cas-page .md-cas-list .dataTables_wrapper .dataTables_filter,
.cas-page .md-cas-list .dataTables_wrapper .dataTables_info,
.cas-page .md-cas-list .dataTables_wrapper .dataTables_paginate,
.cas-page .md-cas-list .dataTables_processing { display: none !important; }

.cas-page .md-cas-list table#student {
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
}

.cas-page .md-cas-list table#student thead { display: none; }

.cas-page .md-cas-list table#student tbody,
.cas-page .md-cas-list table#student tbody tr,
.cas-page .md-cas-list table#student tbody td {
  display: block;
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.cas-page .md-cas-list table#student tbody tr + tr { margin-top: 12px; }

.md-cas-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 1px solid var(--mui-outline, rgba(0, 0, 0, 0.23));
  border-radius: 12px;
  background: var(--mui-surface, #fff);
  box-shadow: none;
  overflow: hidden;
  font-family: var(--mui-font, "Jost", sans-serif);
}

.md-cas-card__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 12px;
}

.md-cas-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.md-cas-card__title {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--mui-on-surface, rgba(0, 0, 0, 0.87));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.md-cas-card__score {
  display: inline-flex;
  align-items: baseline;
  flex-shrink: 0;
  padding: 4px 0 0;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--mui-primary, #1976d2);
}

.md-cas-card--graded .md-cas-card__score { color: var(--mui-success, #2e7d32); }
.md-cas-card--saved .md-cas-card__score { color: #ef6c00; }
.md-cas-card--pending .md-cas-card__score { color: rgba(0, 0, 0, 0.38); }

.md-cas-card__score-value {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.md-cas-card__score-total {
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.72;
}

.md-cas-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.md-cas-card__meta .md-chip,
.md-cas-card__date.md-chip {
  height: 22px;
  padding: 0 8px;
  border-radius: 16px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.md-cas-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 14px 14px;
}

.md-cas-card__expand.md-btn-outlined,
.md-cas-card__actions .md-btn-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--mui-outline, rgba(0, 0, 0, 0.23));
  border-radius: var(--mui-shape, 4px);
  background: transparent;
  color: var(--mui-primary, #1976d2);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
  box-shadow: none;
}

.md-cas-card__expand.md-btn-outlined:hover,
.md-cas-card__actions .md-btn-outlined:hover,
.md-cas-card__expand.md-btn-outlined:focus-visible {
  background: rgba(25, 118, 210, 0.04);
  border-color: var(--mui-primary, #1976d2);
  outline: none;
}

.md-cas-card__assess.md-btn-contained,
.md-cas-card__actions .md-btn-contained {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 6px 12px;
  border: none;
  border-radius: var(--mui-shape, 4px);
  background: var(--mui-primary, #1976d2);
  color: #fff;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
}

.md-cas-card__assess.md-btn-contained:hover,
.md-cas-card__actions .md-btn-contained:hover,
.md-cas-card__assess.md-btn-contained:focus-visible {
  background: var(--mui-primary-dark, #1565c0);
  color: #fff;
  outline: none;
}

.md-cas-card__expand-chevron {
  font-size: 0.625rem;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.md-cas-card__expand:not(.collapsed) .md-cas-card__expand-chevron {
  transform: rotate(180deg);
}

.md-cas-card__details {
  padding: 0 14px 14px;
}

.md-cas-card__files {
  margin-bottom: 12px;
}

.md-cas-card__files-label {
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mui-on-surface-variant, rgba(0, 0, 0, 0.6));
}

.md-cas-card__file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.md-cas-card__file-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--mui-shape, 4px);
  border: 1px solid var(--mui-outline, rgba(0, 0, 0, 0.23));
  background: #fff;
  color: var(--mui-primary, #1976d2);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
}

.md-cas-card__file-link:hover,
.md-cas-card__file-link:focus-visible {
  background: var(--mui-primary-container, #e3f2fd);
}

.md-cas-card__script-text { margin-bottom: 0; }

.md-cas-card__script-body {
  padding: 12px;
  border-radius: var(--mui-shape, 4px);
  border: 1px solid var(--mui-outline, rgba(0, 0, 0, 0.23));
  background: var(--mui-surface-dim, #f5f5f5);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--mui-on-surface, rgba(0, 0, 0, 0.87));
  max-height: 220px;
  overflow: auto;
}

.md-cas-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  padding: 36px 20px;
  text-align: center;
  border: 1px dashed rgba(21, 101, 192, 0.22);
  border-radius: 16px;
  background: linear-gradient(180deg, #e3f2fd 0%, #fff 72%);
}

.md-cas-empty__icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--cas-primary);
  font-size: 1.25rem;
  box-shadow: 0 2px 6px rgba(13, 71, 161, 0.14);
}

.md-cas-empty__title {
  margin: 4px 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--cas-ink);
}

.md-cas-empty__text {
  margin: 0;
  max-width: 260px;
  font-size: 0.875rem;
  color: #5f6368;
}

/* Assess modal — match activity sheet */
#fullEmptyModal.md-activity-sheet .md-cas-assess {
  max-width: 560px;
  margin: 0 auto;
}

#fullEmptyModal.md-activity-sheet .md-cas-assess__score {
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(13, 71, 161, 0.1);
  border-radius: 16px;
  background: #fff;
}

#fullEmptyModal.md-activity-sheet .md-cas-assess__score .mui-field__label {
  color: #0d47a1;
  font-weight: 650;
}

#fullEmptyModal.md-activity-sheet .md-cas-assess__score .mui-field__input {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#fullEmptyModal.md-activity-sheet .md-cas-assess .md-sheet-submit__file {
  margin: 0;
}

/* ── zap-app: pay-invoice-page (student-pay-all-invoice.php) ── */
.pay-invoice-page {
  --pay-inv-primary: #1976d2;
  --pay-inv-ink: #0d47a1;
  --pay-inv-soft: #e3f2fd;
  --pay-inv-success: #2e7d32;
  --pay-inv-danger: #c62828;
  --pay-inv-bg: #eef1f4;
  --md-soft-pill-bg: #e3f2fd;
  --md-soft-pill-primary: #1976d2;
  --md-soft-pill-ink: #0d47a1;
  --md-soft-pill-overline: rgba(25, 118, 210, 0.72);
  --md-soft-pill-border: rgba(25, 118, 210, 0.18);
  --md-pay-inv-toolbar-offset: 168px;
  font-family: "Jost", sans-serif !important;
  background: var(--pay-inv-bg);
  min-height: 100vh;
}

.pay-invoice-page .page-title-clear { display: none !important; }

.pay-invoice-page .pay-invoice-feed.page-content,
.pay-invoice-page .page-content.pay-invoice-feed {
  max-width: 680px;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--md-pay-inv-toolbar-offset, 168px) + 8px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  background: var(--pay-inv-bg) !important;
}

.pay-invoice-page .md-pay-inv-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--mui-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)) !important;
  background: #fff !important;
  background-image: none !important;
  transform: none !important;
  overflow: visible !important;
}

.pay-invoice-page .md-pay-inv-toolbar .content,
.pay-invoice-page .md-pay-inv-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 10px 12px 12px !important;
  box-sizing: border-box;
}

.pay-invoice-page .md-pay-inv-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.pay-invoice-page .md-pay-inv-toolbar__back,
.pay-invoice-page .md-pay-inv-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #202124;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.pay-invoice-page .md-pay-inv-toolbar__reload { margin-left: auto; }

.pay-invoice-page .md-pay-inv-toolbar__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #202124;
  text-transform: none;
  text-align: left;
}

.pay-invoice-page .md-pay-inv-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 100%;
  padding: 3px;
  border-radius: 12px;
  background: #eef1f4;
  box-sizing: border-box;
}

.pay-invoice-page .md-pay-inv-tabs__tab {
  appearance: none;
  border: none;
  border-radius: 10px;
  min-height: 40px;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: #5f6368;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.pay-invoice-page .md-pay-inv-tabs__icon {
  font-size: 0.8125rem;
  opacity: 0.85;
}

.pay-invoice-page .md-pay-inv-tabs__tab.active {
  background: #fff;
  color: var(--pay-inv-ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.pay-invoice-page .md-pay-inv-tabs__tab.active .md-pay-inv-tabs__icon {
  color: var(--pay-inv-primary);
  opacity: 1;
}

.pay-invoice-page #pills-tabContent > .tab-pane {
  display: none;
}

.pay-invoice-page #pills-tabContent > .tab-pane.show.active {
  display: block;
}

.pay-invoice-page .md-pay-inv-email {
  margin: 0 0 12px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.pay-invoice-page .md-pay-inv-email__field { margin: 0; }

.pay-invoice-page .md-pay-inv-email .mui-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #5f6368;
}

.pay-invoice-page .md-pay-inv-email .mui-field__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
  color: #202124;
  box-shadow: none;
}

.pay-invoice-page .md-pay-inv-email .mui-field__input:focus {
  outline: none;
  border-color: var(--pay-inv-primary);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16);
}

.pay-invoice-page .md-pay-inv-email .mui-field__helper {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: #5f6368;
}

.pay-invoice-page .md-pay-inv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 40px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px dashed rgba(15, 23, 42, 0.14);
}

.pay-invoice-page .md-pay-inv-empty__icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--pay-inv-soft);
  color: var(--pay-inv-primary);
  font-size: 1.35rem;
}

.pay-invoice-page .md-pay-inv-empty__title {
  margin: 8px 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #202124;
}

.pay-invoice-page .md-pay-inv-empty__text {
  margin: 0;
  max-width: 280px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #5f6368;
}

.pay-invoice-page .md-pay-inv-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pay-invoice-page .pay-all-pending-content {
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

.pay-invoice-page .md-pay-inv-group {
  margin: 0;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.pay-invoice-page .md-pay-inv-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(21, 101, 192, 0.08) 0%, rgba(21, 101, 192, 0.02) 100%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.pay-invoice-page .md-pay-inv-group--paid .md-pay-inv-group__head {
  background: linear-gradient(135deg, rgba(46, 125, 50, 0.1) 0%, rgba(46, 125, 50, 0.02) 100%);
}

.pay-invoice-page .md-pay-inv-group__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pay-invoice-page .md-pay-inv-group__avatar {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(21, 101, 192, 0.14);
  color: var(--pay-inv-primary);
  flex-shrink: 0;
}

.pay-invoice-page .md-pay-inv-group__avatar--paid {
  background: rgba(46, 125, 50, 0.16);
  color: var(--pay-inv-success);
}

.pay-invoice-page .md-pay-inv-group__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pay-invoice-page .md-pay-inv-group__overline {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #80868b;
}

.pay-invoice-page .md-pay-inv-group__name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #202124;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pay-invoice-page .md-pay-inv-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  font-size: 0.75rem;
  font-weight: 700;
  color: #3c4043;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.pay-invoice-page .md-pay-inv-select-all__input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--pay-inv-primary);
}

.pay-invoice-page .md-pay-inv-group__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.pay-invoice-page .md-pay-inv-card {
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pay-invoice-page .md-pay-inv-card:has(.invoice-selector:checked:not(:disabled)) {
  border-color: rgba(46, 125, 50, 0.4);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
}

.pay-invoice-page .md-pay-inv-card--paid {
  opacity: 0.72;
  background: #f8fafc;
}

.pay-invoice-page .md-pay-inv-card--settled {
  border-color: rgba(46, 125, 50, 0.22);
  background: linear-gradient(180deg, #fff 0%, rgba(46, 125, 50, 0.03) 100%);
}

.pay-invoice-page .md-pay-inv-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 0;
}

.pay-invoice-page .md-pay-inv-card__select {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.pay-invoice-page .md-pay-inv-card__check {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--pay-inv-primary);
}

.pay-invoice-page .md-pay-inv-card__label {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  cursor: pointer;
  min-width: 0;
}

.pay-invoice-page .md-pay-inv-card__hint {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #80868b;
}

.pay-invoice-page .md-pay-inv-card__settled-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.pay-invoice-page .md-pay-inv-card__class {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #5f6368;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pay-invoice-page .md-pay-inv-card__body {
  padding: 10px 12px 12px;
}

.pay-invoice-page .md-pay-inv-card__metrics {
  margin-bottom: 10px;
}

.pay-invoice-page .md-pay-inv-card__metrics--solo {
  grid-template-columns: 1fr;
}

.pay-invoice-page .md-pay-inv-card .md-summary-metric {
  align-items: flex-start;
  text-align: left;
  padding: 10px 12px;
}

.pay-invoice-page .md-pay-inv-card .invoice-amount-cell__value--success {
  color: var(--pay-inv-success) !important;
}

.pay-invoice-page .md-pay-inv-card .invoice-amount-cell__value--danger {
  color: var(--pay-inv-danger) !important;
}

.pay-invoice-page .md-pay-inv-progress__label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #80868b;
}

.pay-invoice-page .md-pay-inv-progress__track {
  height: 8px;
  border-radius: 999px;
  background: #e8eaed;
  overflow: hidden;
}

.pay-invoice-page .md-pay-inv-progress__bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #43a047, #2e7d32);
}

.pay-invoice-page .md-pay-inv-card__actions {
  padding: 0 12px 12px;
}

.pay-invoice-page .md-pay-inv-card__actions .md-btn-contained {
  width: 100%;
  min-height: 40px;
}

.pay-invoice-page .md-pay-inv-dock {
  position: fixed;
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(70px + env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 95;
  max-width: 656px;
  margin: 0 auto !important;
  padding: 10px 12px !important;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
}

html.is-webview .pay-invoice-page .md-pay-inv-dock,
body.is-webview .pay-invoice-page .md-pay-inv-dock {
  bottom: calc(70px + 10px);
}

.pay-invoice-page .md-pay-inv-dock__inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pay-invoice-page .md-pay-inv-dock__copy {
  flex: 1;
  min-width: 0;
}

.pay-invoice-page .md-pay-inv-dock__amount {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--pay-inv-danger);
}

.pay-invoice-page .md-pay-inv-dock__meta {
  margin-top: 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #80868b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pay-invoice-page .md-pay-inv-dock .pay_selected_invoices_btn {
  flex-shrink: 0;
  min-width: 96px;
  min-height: 42px;
  text-transform: none;
}

.pay-invoice-page .md-pay-inv-dock .pay_selected_invoices_btn:disabled {
  opacity: 0.55;
}

/* ── zap-app: fpop-mobile-page (finance-parent-online-payment-mobile.php) ── */

/* Document is the only scroller (same pattern as timeline/mail).
   Flex #page + min-height:0 was clipping invoice cards under the first student header. */
body.fpop-mobile-app {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  min-height: 100% !important;
  overflow: visible !important;
  -webkit-overflow-scrolling: touch;
}

body.fpop-mobile-app #page,
body.fpop-mobile-app .md-page.fpop-mobile-page,
body.fpop-mobile-app .md-page.fpop-mobile-page .fpop-mobile-feed.page-content,
body.fpop-mobile-app .md-page.fpop-mobile-page .page-content {
  display: block !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.fpop-mobile-page {
  --fpop-primary: #1976d2;
  --fpop-ink: #0d47a1;
  --fpop-soft: #e8f3fc;
  --fpop-soft-2: #dff0fb;
  --fpop-ice: #f3f9fd;
  --fpop-sky: #64b5f6;
  --fpop-bg: #eef1f4;
  --md-fpop-toolbar-offset: 168px;
  font-family: var(--md-font, "Jost", sans-serif) !important;
  background: var(--fpop-bg);
  min-height: 100vh;
}

.fpop-mobile-page .page-title-clear,
.fpop-mobile-page .header.header-fixed {
  display: none !important;
}

.fpop-mobile-page .fpop-mobile-feed.page-content,
.fpop-mobile-page .page-content.fpop-mobile-feed {
  max-width: 680px;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--md-fpop-toolbar-offset, 168px) + 10px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  background: var(--fpop-bg) !important;
}

.fpop-mobile-page .md-fpop-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--mui-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)) !important;
  background: #fff !important;
  background-image: none !important;
  transform: none !important;
  overflow: visible !important;
}

.fpop-mobile-page .md-fpop-toolbar .content,
.fpop-mobile-page .md-fpop-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 10px 12px 12px !important;
  box-sizing: border-box;
}

.fpop-mobile-page .md-fpop-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.fpop-mobile-page .md-fpop-toolbar__back,
.fpop-mobile-page .md-fpop-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--fpop-ink);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fpop-mobile-page .md-fpop-toolbar__reload { margin-left: auto; }

.fpop-mobile-page .md-fpop-toolbar__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: var(--fpop-ink);
  text-transform: none;
  text-align: left;
}

.fpop-mobile-page .md-fpop-toolbar__actions {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 6px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--fpop-ice) 0%, var(--fpop-soft) 100%);
  border: 1px solid rgba(100, 181, 246, 0.28);
  box-sizing: border-box;
}

.fpop-mobile-page .md-fpop-toolbar__actions--2 {
  grid-template-columns: 1fr 1fr;
}

.fpop-mobile-page .md-fpop-toolbar__actions--solo {
  grid-template-columns: 1fr;
}

.fpop-mobile-page .md-fpop-action {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.55rem 0.45rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 11px;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.12s ease;
}

.fpop-mobile-page .md-fpop-action--buy {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(144, 202, 249, 0.55);
  color: #1565c0;
  box-shadow: 0 1px 2px rgba(25, 118, 210, 0.06);
}

.fpop-mobile-page .md-fpop-action--handover {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-color: rgba(66, 165, 245, 0.45);
  color: #0d47a1;
  box-shadow: 0 1px 3px rgba(25, 118, 210, 0.1);
}

.fpop-mobile-page .md-fpop-action:hover {
  transform: translateY(-1px);
}

.fpop-mobile-page .md-fpop-action:active {
  transform: translateY(0);
}

.fpop-mobile-page .md-fpop-action__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1;
}

.fpop-mobile-page .md-fpop-action--buy .md-fpop-action__icon {
  background: rgba(100, 181, 246, 0.22);
  color: #1976d2;
}

.fpop-mobile-page .md-fpop-action--handover .md-fpop-action__icon {
  background: rgba(255, 255, 255, 0.72);
  color: #1565c0;
  box-shadow: inset 0 0 0 1px rgba(66, 165, 245, 0.28);
}

.fpop-mobile-page .md-fpop-action__copy {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
  flex: 1 1 auto;
}

.fpop-mobile-page .md-fpop-action__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: inherit;
}

.fpop-mobile-page .md-fpop-action__hint {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: rgba(13, 71, 161, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fpop-mobile-page .md-fpop-action__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.15rem;
  padding: 0 0.32rem;
  border-radius: 999px;
  background: #42a5f5;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(25, 118, 210, 0.25);
}

.fpop-mobile-page .md-fpop-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  padding: 5px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--fpop-ice) 0%, var(--fpop-soft) 100%);
  border: 1px solid rgba(100, 181, 246, 0.28);
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.fpop-mobile-page .md-fpop-tabs__tab {
  appearance: none;
  position: relative;
  border: 1px solid transparent;
  border-radius: 11px;
  min-height: 48px;
  padding: 0.4rem 0.45rem 0.4rem 0.4rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  background: transparent;
  color: #5f7a96;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
}

.fpop-mobile-page .md-fpop-tabs__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(100, 181, 246, 0.14);
  color: #64b5f6;
}

.fpop-mobile-page .md-fpop-tabs__icon {
  font-size: 0.78rem;
  opacity: 1;
  line-height: 1;
}

.fpop-mobile-page .md-fpop-tabs__copy {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  flex: 1 1 auto;
}

.fpop-mobile-page .md-fpop-tabs__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: inherit;
}

.fpop-mobile-page .md-fpop-tabs__meta {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: rgba(13, 71, 161, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fpop-mobile-page .md-fpop-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.32rem;
  border-radius: 999px;
  background: rgba(100, 181, 246, 0.18);
  color: #1565c0;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1;
}

.fpop-mobile-page .md-fpop-tabs__tab.active,
.fpop-mobile-page .md-fpop-tabs__tab.nav-link.active {
  background: linear-gradient(135deg, #ffffff 0%, #eaf5fc 100%);
  border-color: rgba(66, 165, 245, 0.42);
  color: var(--fpop-ink);
  box-shadow:
    0 2px 8px rgba(25, 118, 210, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.fpop-mobile-page .md-fpop-tabs__tab.active .md-fpop-tabs__icon-wrap,
.fpop-mobile-page .md-fpop-tabs__tab.nav-link.active .md-fpop-tabs__icon-wrap {
  background: rgba(66, 165, 245, 0.22);
  color: #1976d2;
  box-shadow: inset 0 0 0 1px rgba(66, 165, 245, 0.22);
}

.fpop-mobile-page .md-fpop-tabs__tab.active .md-fpop-tabs__icon,
.fpop-mobile-page .md-fpop-tabs__tab.nav-link.active .md-fpop-tabs__icon {
  color: #1976d2;
  opacity: 1;
}

.fpop-mobile-page .md-fpop-tabs__tab.active .md-fpop-tabs__meta,
.fpop-mobile-page .md-fpop-tabs__tab.nav-link.active .md-fpop-tabs__meta {
  color: rgba(13, 71, 161, 0.62);
}

.fpop-mobile-page .md-fpop-tabs__tab.active .md-fpop-tabs__count,
.fpop-mobile-page .md-fpop-tabs__tab.nav-link.active .md-fpop-tabs__count {
  background: #42a5f5;
  color: #fff;
  box-shadow: 0 1px 3px rgba(25, 118, 210, 0.22);
}

.fpop-mobile-page .md-fpop-tabs__tab:active {
  transform: scale(0.985);
}

.fpop-mobile-page #pills-tabContent > .tab-pane {
  display: none !important;
}

.fpop-mobile-page #pills-tabContent > .tab-pane.active,
.fpop-mobile-page #pills-tabContent > .tab-pane.show.active {
  display: block !important;
}

.fpop-mobile-page .md-fpop-tabs__tab {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
}

.fpop-mobile-page .md-fpop-empty {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  margin: 4px 0 12px;
  padding: 2rem 1.15rem 1.35rem;
  border-radius: 18px;
  border: 1px solid rgba(100, 181, 246, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(232, 243, 252, 0.94) 100%);
  box-shadow:
    0 8px 24px rgba(25, 118, 210, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.fpop-mobile-page .md-fpop-empty__glow {
  position: absolute;
  inset: auto 12% -35% 12%;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 181, 246, 0.28) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.fpop-mobile-page .md-fpop-empty__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 0.35rem;
  border-radius: 16px;
  background: linear-gradient(145deg, #e3f2fd 0%, #bbdefb 100%);
  color: #1976d2;
  font-size: 1.35rem;
  box-shadow:
    0 4px 12px rgba(25, 118, 210, 0.14),
    inset 0 0 0 1px rgba(66, 165, 245, 0.28);
}

.fpop-mobile-page .md-fpop-empty__eyebrow {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(25, 118, 210, 0.72);
}

.fpop-mobile-page .md-fpop-empty__title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: #0d47a1;
}

.fpop-mobile-page .md-fpop-empty__text {
  position: relative;
  z-index: 1;
  margin: 0.15rem 0 0.55rem;
  max-width: 280px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(13, 71, 161, 0.68);
}

.fpop-mobile-page .md-fpop-empty__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  margin-top: 0.25rem;
}

.fpop-mobile-page .md-fpop-empty__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #64b5f6 0%, #1976d2 100%);
  color: #fff;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.24);
  -webkit-tap-highlight-color: transparent;
}

.fpop-mobile-page .md-fpop-empty__cta--ghost {
  background: rgba(255, 255, 255, 0.85);
  color: #1565c0;
  border: 1px solid rgba(100, 181, 246, 0.45);
  box-shadow: none;
}

/* Checkout dock — sits left of .md-fab-back so Pay stays tappable.
   Mounted on body (see finance-parent-online-payment-mobile.php) so sheet/scroll-lock
   cannot yank position:fixed out of the viewport. */
.fpop-mobile-page .md-fpop-pay-dock.pay-summary-card--floating,
.fpop-mobile-page .pay-summary-card.pay-summary-card--floating.md-fpop-pay-dock,
body.fpop-mobile-app > .md-fpop-pay-dock.pay-summary-card--floating,
body.fpop-mobile-app > .pay-summary-card.pay-summary-card--floating.md-fpop-pay-dock {
  --fpop-dock-fab-clear: calc(16px + 52px + 14px);
  position: fixed;
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, calc(var(--fpop-dock-fab-clear) + env(safe-area-inset-right, 0px)));
  bottom: calc(70px + env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 95;
  max-width: 420px;
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 16px;
  border: 1px solid rgba(25, 118, 210, 0.14);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(232, 243, 252, 0.96) 100%);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow:
    0 10px 28px rgba(13, 71, 161, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

html.is-webview .fpop-mobile-page .md-fpop-pay-dock.pay-summary-card--floating,
html.is-webview .fpop-mobile-page .pay-summary-card.pay-summary-card--floating.md-fpop-pay-dock,
html.is-webview body.fpop-mobile-app > .md-fpop-pay-dock.pay-summary-card--floating,
body.is-webview .fpop-mobile-page .md-fpop-pay-dock.pay-summary-card--floating,
body.is-webview .fpop-mobile-page .pay-summary-card.pay-summary-card--floating.md-fpop-pay-dock,
body.is-webview.fpop-mobile-app > .md-fpop-pay-dock.pay-summary-card--floating {
  bottom: calc(70px + 10px);
  right: max(12px, var(--fpop-dock-fab-clear));
}

html.fpop-on-paid .md-fpop-pay-dock,
body.fpop-on-paid .md-fpop-pay-dock,
.fpop-mobile-page .md-fpop-pay-dock[hidden],
body.fpop-mobile-app > .md-fpop-pay-dock[hidden] {
  display: none !important;
}

/* Sheet open: keep dock at its normal bottom position (covered by the sheet is fine).
   Do not relocate it under the toolbar. */

/* Backdrop without #logger — keeps the fixed pay dock from being swallowed. */
#fpopPayUnavailableSheet.md-fpop-pay-unavail.menu-active::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 0;
  pointer-events: auto;
}

#fpopPayUnavailableSheet.md-fpop-pay-unavail.menu-active .md-sl-sheet__panel {
  position: relative;
  z-index: 1;
}

.fpop-mobile-page .md-fpop-pay-dock__inner,
body.fpop-mobile-app > .md-fpop-pay-dock .md-fpop-pay-dock__inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fpop-mobile-page .md-fpop-pay-dock--howto-only .md-fpop-pay-dock__inner,
body.fpop-mobile-app > .md-fpop-pay-dock.md-fpop-pay-dock--howto-only .md-fpop-pay-dock__inner {
  gap: 0;
}

.fpop-mobile-page .md-fpop-pay-dock--howto-only .fpop-pay-btn,
body.fpop-mobile-app > .md-fpop-pay-dock.md-fpop-pay-dock--howto-only .fpop-pay-btn {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
}

.fpop-mobile-page .md-fpop-pay-dock__copy,
body.fpop-mobile-app > .md-fpop-pay-dock .md-fpop-pay-dock__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.fpop-mobile-page .md-fpop-pay-dock__label,
body.fpop-mobile-app > .md-fpop-pay-dock .md-fpop-pay-dock__label {
  display: block;
  margin: 0 0 2px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5f6368;
  line-height: 1.2;
}

.fpop-mobile-page .md-fpop-pay-dock__amount,
.fpop-mobile-page .pay-summary-compact__amount.md-fpop-pay-dock__amount,
body.fpop-mobile-app > .md-fpop-pay-dock .md-fpop-pay-dock__amount {
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #c62828;
}

.fpop-mobile-page .md-fpop-pay-dock__meta,
.fpop-mobile-page .pay-summary-compact__meta.md-fpop-pay-dock__meta,
body.fpop-mobile-app > .md-fpop-pay-dock .md-fpop-pay-dock__meta {
  margin-top: 3px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #80868b;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fpop-mobile-page .md-fpop-pay-dock .fpop-pay-btn,
body.fpop-mobile-app > .md-fpop-pay-dock .fpop-pay-btn {
  flex-shrink: 0;
  min-width: 88px;
  min-height: 42px;
  margin: 0;
  padding: 0 16px;
  border: none;
  border-radius: 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.28);
}

.fpop-mobile-page .md-fpop-pay-dock .fpop-pay-btn:disabled,
body.fpop-mobile-app > .md-fpop-pay-dock .fpop-pay-btn:disabled {
  box-shadow: none;
  opacity: 0.55;
}

/* While How-to-pay sheet is open, disable the dock CTA (sheet owns the action).
   Require the sheet to actually be menu-active so a stuck html class cannot
   leave the button permanently unclickable. */
html.fpop-pay-unavail-open:has(#fpopPayUnavailableSheet.menu-active) .md-fpop-pay-dock .fpop-pay-btn,
body.fpop-pay-unavail-open:has(#fpopPayUnavailableSheet.menu-active) .md-fpop-pay-dock .fpop-pay-btn {
  pointer-events: none;
  opacity: 0.55;
}

/* Online payment unavailable — call school sheet */
#fpopPayUnavailableSheet.md-fpop-pay-unavail .md-fpop-pay-unavail__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 16px 8px !important;
}

#fpopPayUnavailableSheet .md-fpop-pay-unavail__msg {
  margin: 0;
  font-family: var(--md-font, "Jost", sans-serif);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: #3c4043;
  white-space: pre-wrap;
}

#fpopPayUnavailableSheet .md-fpop-pay-unavail__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(25, 118, 210, 0.16);
  background: linear-gradient(160deg, #ffffff 0%, #eef6fc 100%);
}

#fpopPayUnavailableSheet .md-fpop-pay-unavail__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(25, 118, 210, 0.12);
  color: #1565c0;
  font-size: 1rem;
}

#fpopPayUnavailableSheet .md-fpop-pay-unavail__card-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#fpopPayUnavailableSheet .md-fpop-pay-unavail__card-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0d47a1;
  line-height: 1.25;
}

#fpopPayUnavailableSheet .md-fpop-pay-unavail__card-phone {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #5f6368;
  font-variant-numeric: tabular-nums;
}

#fpopPayUnavailableSheet .md-fpop-pay-unavail__card-phone--muted {
  font-weight: 500;
  color: #80868b;
}

#fpopPayUnavailableSheet .md-fpop-pay-unavail__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px calc(12px + var(--md-sheet-footer-safe, 0px)) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

#fpopPayUnavailableSheet .md-fpop-pay-unavail__call,
#fpopPayUnavailableSheet .md-fpop-pay-unavail__close {
  width: 100%;
  min-height: 44px;
  text-transform: none;
  justify-content: center;
}

#fpopPayUnavailableSheet .md-fpop-pay-unavail__call i {
  margin-right: 8px;
}

/* Pending: email + ward groups + invoice cards */
.fpop-mobile-page .md-fpop-email {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(25, 118, 210, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(160deg, #ffffff 0%, #f3f9fd 55%, #eaf4fc 100%);
  box-shadow: 0 1px 3px rgba(13, 71, 161, 0.06);
}

.fpop-mobile-page .md-fpop-email__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  border-radius: 12px;
  background: rgba(25, 118, 210, 0.12);
  color: #1565c0;
  font-size: 0.95rem;
}

.fpop-mobile-page .md-fpop-email__body {
  flex: 1 1 auto;
  min-width: 0;
}

.fpop-mobile-page .md-fpop-email__label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5f6368;
  line-height: 1.2;
}

.fpop-mobile-page .md-fpop-email__req {
  color: #c62828;
}

.fpop-mobile-page .md-fpop-email__input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1.5px solid rgba(25, 118, 210, 0.22);
  border-radius: 10px;
  background: #fff;
  color: #0d47a1;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fpop-mobile-page .md-fpop-email__input:focus {
  border-color: #1976d2;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.16);
}

.fpop-mobile-page .md-fpop-email__input::placeholder {
  color: #90a4ae;
  font-weight: 500;
}

.fpop-mobile-page .md-fpop-email__hint {
  margin: 6px 0 0;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #80868b;
  line-height: 1.35;
}

.fpop-mobile-page .student-invoice-group--pending {
  margin: 0 0 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  overflow: visible;
}

.fpop-mobile-page .student-invoice-group--pending .student-invoice-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(160deg, #e8f1fc 0%, #f5f9ff 100%);
  border-bottom: 1px solid rgba(21, 101, 192, 0.12);
}

.fpop-mobile-page .student-invoice-group--pending .student-invoice-group__identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.fpop-mobile-page .student-invoice-group--pending .student-invoice-group__avatar {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: hsl(var(--fpop-avatar-hue, 210), 55%, 42%);
  box-shadow: none;
}

.fpop-mobile-page .student-invoice-group--pending .student-invoice-group__copy {
  min-width: 0;
}

.fpop-mobile-page .student-invoice-group--pending .student-invoice-group__name {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0d47a1;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fpop-mobile-page .student-invoice-group--pending .student-invoice-group__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 2px 0 0;
  line-height: 1.2;
}

.fpop-mobile-page .student-invoice-group--pending .student-invoice-group__school {
  display: block;
  margin: 0;
  min-width: 0;
  font-size: 0.625rem;
  font-weight: 600;
  color: rgba(13, 71, 161, 0.65);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fpop-mobile-page .student-invoice-group--pending .student-invoice-group__dot {
  flex-shrink: 0;
  color: rgba(13, 71, 161, 0.35);
  font-size: 0.625rem;
  font-weight: 700;
}

.fpop-mobile-page .student-invoice-group--pending .student-invoice-group__count {
  flex-shrink: 0;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1565c0;
  white-space: nowrap;
}

.fpop-mobile-page .student-invoice-group--pending .select-all-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(25, 118, 210, 0.22);
  background: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  color: #1565c0;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.fpop-mobile-page .student-invoice-group--pending .select-all-pill input {
  margin: 0;
  width: 0.9rem;
  height: 0.9rem;
}

.fpop-mobile-page .student-invoice-group--pending .student-invoice-group__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background: #f7f9fc;
}

.fpop-mobile-page .invoice-card-slick--pending {
  margin: 0;
  padding: 0 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
}

.fpop-mobile-page .invoice-card-slick--pending:has(.fpop-check:checked) {
  border-color: rgba(46, 125, 50, 0.4);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
}

.fpop-mobile-page .invoice-card-slick--pending .invoice-card-slick__top {
  padding: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.fpop-mobile-page .invoice-card-slick--pending .invoice-card-slick__select {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  box-sizing: border-box;
}

.fpop-mobile-page .invoice-card-slick--pending .invoice-card-slick__select--toggle {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background 0.15s ease;
}

.fpop-mobile-page .invoice-card-slick--pending .invoice-card-slick__select--toggle::after {
  content: "Tap";
  flex-shrink: 0;
  margin-left: auto;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(25, 118, 210, 0.2);
  background: rgba(255, 255, 255, 0.9);
  color: #1565c0;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}

.fpop-mobile-page .invoice-card-slick--pending:has(.fpop-check:checked) .invoice-card-slick__top {
  background: linear-gradient(180deg, #edf7ee 0%, #f7fbf7 100%);
  border-bottom-color: rgba(46, 125, 50, 0.14);
}

.fpop-mobile-page .invoice-card-slick--pending:has(.fpop-check:checked) .invoice-card-slick__select--toggle::after {
  content: "On";
  border-color: rgba(46, 125, 50, 0.28);
  background: rgba(46, 125, 50, 0.1);
  color: #2e7d32;
}

.fpop-mobile-page .invoice-card-slick--pending .invoice-card-slick__select--toggle:active {
  background: rgba(25, 118, 210, 0.06);
}

.fpop-mobile-page .invoice-card-slick--pending:has(.fpop-check:checked) .invoice-card-slick__select--toggle:active {
  background: rgba(46, 125, 50, 0.08);
}

.fpop-mobile-page .invoice-card-slick--pending .invoice-card-slick__select .fpop-check {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  flex-shrink: 0;
  accent-color: #2e7d32;
  pointer-events: auto;
  border-radius: 4px;
}

.fpop-mobile-page .invoice-card-slick--pending .invoice-card-slick__id {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.fpop-mobile-page .invoice-card-slick--pending .invoice-badge {
  display: inline-flex;
  align-self: center;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid rgba(25, 118, 210, 0.16);
  background: #fff;
  color: #0d47a1;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: none;
}

.fpop-mobile-page .invoice-card-slick--pending:has(.fpop-check:checked) .invoice-badge {
  border-color: rgba(46, 125, 50, 0.28);
  color: #1b5e20;
  box-shadow: none;
}

.fpop-mobile-page .invoice-card-slick--pending .invoice-card-slick__open {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #80868b;
}

.fpop-mobile-page .md-fpop-inv-amounts {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 6px;
  padding: 8px 12px 0;
}

.fpop-mobile-page .md-fpop-inv-amounts--solo {
  grid-template-columns: 1fr;
}

.fpop-mobile-page .md-fpop-inv-pay,
.fpop-mobile-page .md-fpop-inv-balance {
  min-width: 0;
  padding: 6px 9px;
  border-radius: 10px;
}

.fpop-mobile-page .md-fpop-inv-pay {
  background: linear-gradient(160deg, #fff5f5 0%, #ffebee 100%);
  border: 1px solid rgba(198, 40, 40, 0.16);
}

.fpop-mobile-page .md-fpop-inv-balance {
  background: #f1f3f4;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.fpop-mobile-page .md-fpop-inv-pay__label,
.fpop-mobile-page .md-fpop-inv-balance__label {
  display: block;
  margin: 0 0 2px;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #80868b;
  line-height: 1.15;
}

.fpop-mobile-page .md-fpop-inv-pay__value,
.fpop-mobile-page .md-fpop-inv-balance__value {
  display: block;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  word-break: break-word;
}

.fpop-mobile-page .md-fpop-inv-pay__value {
  color: #c62828;
  font-size: 0.875rem;
}

.fpop-mobile-page .md-fpop-inv-balance__value {
  color: #5f6368;
  font-size: 0.75rem;
  font-weight: 700;
}

.fpop-mobile-page .invoice-card-slick--pending .fpop-amount-wrap {
  padding: 10px 12px 0;
}

.fpop-mobile-page .invoice-card-slick--pending .fpop-amount-wrap label {
  display: block;
  margin: 0 0 5px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #80868b;
}

.fpop-mobile-page .invoice-card-slick--pending .fpop-amount-input.form-control {
  border: 1.5px solid rgba(25, 118, 210, 0.2);
  border-radius: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #0d47a1;
}

.fpop-mobile-page .invoice-card-slick--pending .fpop-card-actions {
  padding: 10px 12px 0 !important;
}

.fpop-mobile-page .invoice-card-slick--pending .md-fpop-print {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: #fff;
  color: #37474f;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.fpop-mobile-page .invoice-card-slick--pending .md-fpop-print:hover,
.fpop-mobile-page .invoice-card-slick--pending .md-fpop-print:focus-visible {
  background: #f5f7fa;
  color: #0d47a1;
  border-color: rgba(25, 118, 210, 0.28);
}

.fpop-mobile-page .fpop-pending-view-only .md-fpop-inv-amounts {
  grid-template-columns: 1fr;
}

/* ── Stock Handover sheet (#empty_modal) ── */
#empty_modal:has(.fpid-m-sheet),
#empty_modal.fpid-m-modal:has(.fpid-m-sheet) {
  --fpid-ink: #0d47a1;
  --fpid-mid: #1565c0;
  --fpid-soft: #e8f1fc;
  --fpid-bg: #f0f4f8;
  --fpid-ok: #2e7d32;
  --fpid-danger: #c62828;
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: 0 !important;
  width: min(440px, calc(100vw - 20px)) !important;
  max-width: min(440px, calc(100vw - 20px)) !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  max-height: min(90dvh, 760px) !important;
  margin: auto !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 18px 48px rgba(13, 71, 161, 0.22) !important;
  overflow: hidden !important;
  transform: none !important;
  -webkit-transform: none !important;
  font-family: var(--md-font, "Jost", sans-serif) !important;
}

#empty_modal:has(.fpid-m-sheet) .menu-title {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  margin: 0 !important;
  padding: 14px 14px 12px !important;
  border-bottom: 1px solid rgba(21, 101, 192, 0.12) !important;
  background: linear-gradient(155deg, #e3f2fd 0%, #f5f9ff 55%, #fff 100%) !important;
}

#empty_modal:has(.fpid-m-sheet) .menu-title > a.close-menu {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--fpid-mid) !important;
  font-size: 1.1rem !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(13, 71, 161, 0.1) !important;
}

#empty_modal:has(.fpid-m-sheet) .menu-title > a.close-menu i {
  margin: 0 !important;
  line-height: 1 !important;
}

#empty_modal:has(.fpid-m-sheet) .modal-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-head {
  margin: 0;
  padding: 0;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-head__kicker,
#empty_modal:has(.fpid-m-sheet) .modal-title > p,
#empty_modal:has(.fpid-m-sheet) .modal-title .color-highlight {
  margin: 0 0 3px !important;
  padding: 0 !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: rgba(13, 71, 161, 0.72) !important;
  line-height: 1.2 !important;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-head__title,
#empty_modal:has(.fpid-m-sheet) .modal-title > h4,
#empty_modal:has(.fpid-m-sheet) .modal-title .font-800 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--fpid-ink) !important;
  line-height: 1.2 !important;
}

#empty_modal:has(.fpid-m-sheet) .content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px !important;
  background: var(--fpid-bg) !important;
  overflow: hidden !important;
}

#empty_modal:has(.fpid-m-sheet) .content > .divider,
#empty_modal:has(.fpid-m-sheet) .spinnerContent {
  display: none !important;
}

#empty_modal:has(.fpid-m-sheet) .modal-div {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  padding: 0 !important;
  margin: 0 !important;
}

#empty_modal:has(.fpid-m-sheet),
#empty_modal:has(.fpid-m-sheet) .content {
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

#empty_modal:has(.fpid-m-sheet) .modal-footer,
#empty_modal:has(.fpid-m-sheet) .modal-footer.author-wrapper,
#empty_modal:has(.fpid-m-sheet) .modal-footer.p-0,
#empty_modal:has(.fpid-m-sheet) .modal-footer.mb-3 {
  flex-shrink: 0 !important;
  display: block !important;
  width: 100% !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-sheet {
  padding: 0;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 0 12px;
  padding: 4px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-tabs__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 10px 8px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #5f6368;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-tabs__tab.active {
  background: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.28);
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(25, 118, 210, 0.12);
  color: var(--fpid-mid);
  font-size: 0.6875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-tabs__count--ok {
  background: rgba(46, 125, 50, 0.14);
  color: var(--fpid-ok);
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-tabs__tab.active .fpid-m-tabs__count,
#empty_modal:has(.fpid-m-sheet) .fpid-m-tabs__tab.active .fpid-m-tabs__count--ok {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-panes > .tab-pane {
  display: none;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-panes > .tab-pane.active,
#empty_modal:has(.fpid-m-sheet) .fpid-m-panes > .tab-pane.show.active {
  display: block;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-group {
  margin: 0 0 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: none;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-group:last-child {
  margin-bottom: 0;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-group__head,
#empty_modal:has(.fpid-m-sheet) .fpid-m-detail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  background: #f5f9ff;
  border-bottom: 1px solid rgba(21, 101, 192, 0.1);
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-group__identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-group__avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 800;
  color: #fff;
  background: #1976d2;
  box-shadow: none;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-group__avatar--issued {
  background: #2e7d32;
  box-shadow: none;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-group__copy {
  min-width: 0;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-group__name {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--fpid-ink);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-group__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 1px 0 0;
  line-height: 1.2;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-group__school {
  min-width: 0;
  font-size: 0.625rem;
  font-weight: 600;
  color: rgba(13, 71, 161, 0.65);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-group__dot {
  color: rgba(13, 71, 161, 0.35);
  font-size: 0.625rem;
  flex-shrink: 0;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-group__count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(25, 118, 210, 0.12);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fpid-mid);
  font-variant-numeric: tabular-nums;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-group__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  background: #f7f9fc;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card,
#empty_modal:has(.fpid-m-sheet) .fpid-m-line {
  margin: 0;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  box-shadow: none;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card--settled {
  border-color: rgba(46, 125, 50, 0.22);
  background: linear-gradient(180deg, #f7fbf7 0%, #fff 48%);
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 10px;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card--settled .fpid-m-card__top {
  background: transparent;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__badge {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(25, 118, 210, 0.16);
  background: #f8fbff;
  color: var(--fpid-ink);
  font-size: 0.6875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 0.625rem;
  font-weight: 600;
  color: #5f6368;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__inv {
  color: #37474f;
  font-weight: 700;
  flex-shrink: 0;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__store {
  color: #80868b;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__sep {
  color: #b0b4b8;
  flex-shrink: 0;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__owed {
  color: var(--fpid-danger);
  font-weight: 800;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  max-width: 46%;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(25, 118, 210, 0.12);
  color: var(--fpid-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__acts .fpid-m-status {
  align-self: stretch;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 2px;
  padding: 3px 5px;
  text-align: center;
  line-height: 1.15;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  hyphens: auto;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-status--awaiting {
  background: rgba(25, 118, 210, 0.12);
  color: var(--fpid-mid);
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-status--partial,
#empty_modal:has(.fpid-m-sheet) .fpid-m-status--pending {
  background: rgba(198, 40, 40, 0.1);
  color: var(--fpid-danger);
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-status--issued,
#empty_modal:has(.fpid-m-sheet) .fpid-m-status--completed,
#empty_modal:has(.fpid-m-sheet) .fpid-m-status--paid {
  background: rgba(46, 125, 50, 0.12);
  color: var(--fpid-ok);
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-status--closed,
#empty_modal:has(.fpid-m-sheet) .fpid-m-status--voided,
#empty_modal:has(.fpid-m-sheet) .fpid-m-status--returned {
  background: rgba(0, 0, 0, 0.06);
  color: #5f6368;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__stats {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  margin: 0;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-detail__stats {
  display: grid;
  margin: 0 0 10px;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.06);
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__stats--line {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  margin: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.06);
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__stats--line .fpid-m-stat {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  width: 100%;
  padding: 8px 6px;
  border: none;
  border-radius: 0;
  background: #fff;
  text-align: center;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__stats--line .fpid-m-stat--owed {
  background: #fff8f8;
  border: none;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__stats--line .fpid-m-stat__label {
  display: block;
  margin: 0;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #80868b;
  line-height: 1.2;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__stats--line .fpid-m-stat__value {
  display: block;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #202124;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__stats--line .fpid-m-stat__value--muted {
  color: #5f6368;
  font-weight: 700;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__stats--line .fpid-m-stat--owed .fpid-m-stat__value {
  color: var(--fpid-danger);
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__stats .fpid-m-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #f8fafc;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__stats .fpid-m-stat--owed {
  background: #fff5f5;
  border-color: rgba(198, 40, 40, 0.14);
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__stats .fpid-m-stat__label {
  display: inline;
  margin: 0;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #80868b;
  line-height: 1.2;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__stats .fpid-m-stat__value {
  display: inline;
  font-size: 0.75rem;
  font-weight: 800;
  color: #202124;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__stats .fpid-m-stat--owed .fpid-m-stat__value {
  color: var(--fpid-danger);
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-detail__stats .fpid-m-stat {
  min-width: 0;
  padding: 8px 10px;
  background: #fff;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-detail__stats .fpid-m-stat--owed {
  background: #fff8f8;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-detail__stats .fpid-m-stat__label {
  display: block;
  margin: 0 0 3px;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #80868b;
  line-height: 1.2;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-detail__stats .fpid-m-stat__value {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: #202124;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-detail__stats .fpid-m-stat__value--muted {
  color: #5f6368;
  font-weight: 600;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-detail__stats .fpid-m-stat--owed .fpid-m-stat__value {
  color: var(--fpid-danger);
  font-weight: 800;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__acts {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  padding: 0;
  background: transparent;
  flex-shrink: 0;
  min-width: 72px;
  max-width: 104px;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__acts .fpid-m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
  min-height: 32px;
  min-width: 0;
  margin: 0;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.2;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__acts .fpid-m-btn--primary {
  flex: 0 0 auto;
  background: #1976d2;
  color: #fff !important;
  box-shadow: none;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-card__acts .fpid-m-btn--ghost {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.12);
  color: #37474f !important;
  min-width: 32px;
  padding: 5px 8px;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 40px;
  min-width: 72px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.2;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-btn--primary {
  flex: 1 1 auto;
  background: #1976d2;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(25, 118, 210, 0.22);
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-btn--ghost {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.12);
  color: #37474f !important;
  min-width: 40px;
  padding: 8px 12px;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-btn--close {
  background: #fff;
  border-color: rgba(198, 40, 40, 0.22);
  color: var(--fpid-danger) !important;
  min-height: 48px;
  padding: 12px 16px;
  font-size: 0.9375rem;
  border-radius: 12px;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-print {
  display: flex;
  width: auto;
  margin: 0 0 10px;
  flex: none;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-line__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 8px 10px 0;
  margin: 0;
  background: transparent;
  border: none;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-line__name {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--fpid-ink);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-line__top > .fpid-m-status {
  flex: 0 0 auto;
  align-self: center;
  max-width: none;
  margin: 0;
  padding: 2px 7px;
  min-height: 0;
  height: auto;
  border-radius: 999px;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px dashed rgba(25, 118, 210, 0.28);
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: linear-gradient(145deg, #e3f2fd 0%, #bbdefb 100%);
  color: var(--fpid-mid);
  font-size: 1.25rem;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-empty__title {
  margin: 0 0 6px;
  font-size: 0.9375rem;
  font-weight: 750;
  color: var(--fpid-ink);
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-empty__text {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #80868b;
  line-height: 1.45;
  max-width: 260px;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-footer {
  display: flex;
  gap: 8px;
  width: 100%;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-footer .fpid-m-btn {
  flex: 1 1 0;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-footer .fpid-m-btn--close {
  min-height: 48px;
  font-size: 0.9375rem;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-detail__head {
  margin: 0 0 10px;
  border: 1px solid rgba(21, 101, 192, 0.14);
  border-radius: 14px;
  overflow: hidden;
}

#empty_modal:has(.fpid-m-sheet) .fpid-m-detail .fpid-m-card__stats.fpid-m-detail__stats .fpid-m-stat {
  text-align: center;
}

/* ── Learners Center ── */
html.learners-center-app,
body.learners-center-app,
.learners-center-page,
.md-lc-sheet {
  --lc-accent: #1a73e8;
  --lc-accent-deep: #0d47a1;
  --lc-accent-mid: #1565c0;
  --lc-accent-soft: #e8f0fe;
  --lc-well: #1e8e3e;
  --lc-watch: #f9ab00;
  --lc-needs: #d93025;
  --lc-pending: #5f6368;
  --lc-cover: linear-gradient(135deg, #0d47a1 0%, #1565c0 48%, #42a5f5 100%);
}

.learners-center-page .md-lc-dash {
  margin: 0 0 12px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(21, 101, 192, 0.18);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(13, 71, 161, 0.08);
}

.learners-center-page .md-lc-dash__band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 16px;
  background: linear-gradient(135deg, #0d47a1 0%, #1565c0 42%, #1e88e5 78%, #42a5f5 100%);
  color: #fff;
  overflow: hidden;
}

.learners-center-page .md-lc-dash__band::before {
  content: "";
  position: absolute;
  inset: auto -20% -60% auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.learners-center-page .md-lc-dash__band::after {
  content: "";
  position: absolute;
  top: -40px;
  left: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.learners-center-page .md-lc-dash__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.learners-center-page .md-lc-dash__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.learners-center-page .md-lc-dash__brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 0.8125rem;
}

.learners-center-page .md-lc-dash__overline {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learners-center-page .md-lc-dash__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.25;
}

.learners-center-page .md-lc-dash__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 0;
}

.learners-center-page .md-lc-dash__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}

.learners-center-page .md-lc-dash__pill i {
  opacity: 0.85;
  font-size: 0.6875rem;
}

.learners-center-page .md-lc-dash__pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learners-center-page .md-lc-dash__meta,
.learners-center-page .md-lc-dash__meta-strong,
.learners-center-page .md-lc-dash__meta-sep {
  display: none;
}

.learners-center-page .md-lc-dash__stamp {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 84px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  text-align: center;
  animation: md-lc-stamp-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.1s;
}

.learners-center-page .md-lc-dash__stamp-value {
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  color: #fff;
}

.learners-center-page .md-lc-dash__stamp-label {
  margin-top: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

@keyframes md-lc-stamp-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .learners-center-page .md-lc-dash__stamp {
    animation: none;
  }
}

.learners-center-page .md-lc-dash__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

.learners-center-page .md-lc-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.learners-center-page .md-lc-filters__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.learners-center-page .md-lc-filters__label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-text-secondary);
}

.learners-center-page .md-lc-filters__control {
  position: relative;
  display: block;
}

.learners-center-page .md-lc-filters__select {
  width: 100%;
  min-height: 42px;
  padding: 8px 32px 8px 12px;
  border: 1px solid rgba(26, 115, 232, 0.2);
  border-radius: 10px;
  background: var(--lc-accent-soft, #e8f0fe);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lc-accent-deep, #0d47a1);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.learners-center-page .md-lc-filters__select:focus {
  outline: none;
  border-color: var(--lc-accent, #1a73e8);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.18);
}

.learners-center-page .md-lc-filters__icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6875rem;
  color: var(--lc-accent, #1a73e8);
  pointer-events: none;
}

.learners-center-page .md-lc-dash__banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fef7e0;
  color: #7a4f00;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.learners-center-page .md-lc-dash__banner i {
  margin-top: 2px;
  color: #b06000;
}

.learners-center-page .md-lc-dash__banner-lead {
  font-weight: 700;
}

.learners-center-page .md-lc-dash__banner-sep {
  margin: 0 4px;
  opacity: 0.55;
}

.learners-center-page .md-lc-legend {
  margin: 0 0 12px;
  padding: 0;
  border-radius: var(--md-shape-lg);
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}

.learners-center-page .md-lc-legend__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.learners-center-page .md-lc-legend__summary::-webkit-details-marker {
  display: none;
}

.learners-center-page .md-lc-legend__summary-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.learners-center-page .md-lc-legend__summary-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--md-text-primary);
}

.learners-center-page .md-lc-legend__summary-lead {
  font-size: 0.75rem;
  color: var(--md-text-secondary);
}

.learners-center-page .md-lc-legend__chevron {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--lc-accent);
  transition: transform 0.2s ease;
}

.learners-center-page .md-lc-legend[open] .md-lc-legend__chevron {
  transform: rotate(180deg);
}

.learners-center-page .md-lc-legend__panel {
  padding: 0 14px 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.learners-center-page .md-lc-legend__lead {
  margin: 12px 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--md-text-secondary);
}

.learners-center-page .md-lc-legend__section-title {
  margin: 14px 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--md-text-primary);
}

.learners-center-page .md-lc-legend__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 0;
}

.learners-center-page .md-lc-legend__grid--attendance {
  margin-bottom: 2px;
}

.learners-center-page .md-lc-legend__item {
  display: grid;
  grid-template-columns: 8px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 1px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f5f7fb;
}

.learners-center-page .md-lc-legend__swatch {
  grid-row: 1 / span 2;
  width: 8px;
  height: 100%;
  min-height: 28px;
  border-radius: 99px;
  background: currentColor;
}

.learners-center-page .md-lc-legend__item--strong {
  background: #e6f4ea;
  color: var(--lc-well);
}

.learners-center-page .md-lc-legend__item--good {
  background: #e8f0fe;
  color: #1a73e8;
}

.learners-center-page .md-lc-legend__item--watch {
  background: #fef7e0;
  color: #b06000;
}

.learners-center-page .md-lc-legend__item--needs {
  background: #fce8e6;
  color: var(--lc-needs);
}

.learners-center-page .md-lc-legend__name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--md-text-primary);
}

.learners-center-page .md-lc-legend__range {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--md-text-secondary);
  font-variant-numeric: tabular-nums;
}

.learners-center-page .md-lc-legend__sub {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--md-text-secondary);
}

.learners-center-page .md-lc-card {
  position: relative;
  margin: 0;
  padding: 14px;
  border: 1px solid #c0c4c8 !important;
  border-radius: 12px !important;
  background: #fff;
  box-shadow: none !important;
  overflow: hidden;
}

.learners-center-page .md-lc-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--lc-pending);
}

.learners-center-page .md-lc-card--well::before { background: var(--lc-well); }
.learners-center-page .md-lc-card--watch::before { background: var(--lc-watch); }
.learners-center-page .md-lc-card--needs::before { background: var(--lc-needs); }
.learners-center-page .md-lc-card--pending::before { background: var(--lc-pending); }

.learners-center-page .md-lc-card__school {
  margin: 0 0 10px;
  padding-left: 6px;
}

.learners-center-page .md-lc-card__school-badge {
  display: inline-block;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e8eaed;
  color: #5f6368;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.learners-center-page .md-lc-card__head {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  padding-left: 6px;
  margin-bottom: 12px;
}

.learners-center-page .md-lc-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: #e8eaed;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(26, 115, 232, 0.2);
}

.learners-center-page .md-lc-card__name {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--md-text-primary);
}

.learners-center-page .md-lc-card__meta {
  margin: 6px 0 0;
}

.learners-center-page .md-lc-card__class-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--lc-accent-soft, #e8f0fe);
  color: var(--lc-accent-deep, #0d47a1);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
}

.learners-center-page .md-lc-status {
  align-self: start;
  height: 20px;
  padding: 0 8px;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}

.learners-center-page .md-lc-status--well,
.learners-center-page .md-chip.md-lc-status--well,
.md-lc-sheet .md-chip.md-lc-status--well {
  background: #e6f4ea;
  color: var(--lc-well, #1e8e3e);
}

.learners-center-page .md-lc-status--strong,
.learners-center-page .md-chip.md-lc-status--strong,
.md-lc-sheet .md-chip.md-lc-status--strong {
  background: #e6f4ea;
  color: #0d652d;
}

.learners-center-page .md-lc-status--good,
.learners-center-page .md-chip.md-lc-status--good,
.md-lc-sheet .md-chip.md-lc-status--good {
  background: #e8f0fe;
  color: #174ea6;
}

.learners-center-page .md-lc-status--watch,
.learners-center-page .md-chip.md-lc-status--watch,
.md-lc-sheet .md-chip.md-lc-status--watch {
  background: #fef7e0;
  color: #b06000;
}

.learners-center-page .md-lc-status--needs,
.learners-center-page .md-chip.md-lc-status--needs,
.md-lc-sheet .md-chip.md-lc-status--needs {
  background: #fce8e6;
  color: var(--lc-needs, #c5221f);
}

.learners-center-page .md-lc-status--pending,
.learners-center-page .md-chip.md-lc-status--pending,
.md-lc-sheet .md-chip.md-lc-status--pending {
  background: #f1f3f4;
  color: var(--lc-pending, #5f6368);
}

.learners-center-page .md-lc-status--setup,
.learners-center-page .md-chip.md-lc-status--setup,
.md-lc-sheet .md-chip.md-lc-status--setup {
  background: #e8f0fe;
  color: #174ea6;
}

.learners-center-page .md-lc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-left: 6px;
}

.learners-center-page .md-lc-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-height: 118px;
  padding: 12px;
  border: 1px solid #c0c4c8 !important;
  border-radius: 12px !important;
  background: #fff;
  box-shadow: none !important;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.learners-center-page .md-lc-tile--ready {
  background: #e8f0fe;
  border-color: #c0c4c8 !important;
}

.learners-center-page .md-lc-tile--watch {
  background: #fef7e0;
  border-color: #f0d78c !important;
}

.learners-center-page .md-lc-tile--needs {
  background: #fce8e6;
  border-color: #f0b8b2 !important;
}

.learners-center-page .md-lc-tile--pending {
  background: #f1f3f4;
  border-color: #c0c4c8 !important;
}

.learners-center-page .md-lc-tile:hover,
.learners-center-page .md-lc-tile:focus-visible {
  border-color: var(--lc-accent) !important;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.14) !important;
  outline: none;
}

.learners-center-page .md-lc-tile--ready:hover,
.learners-center-page .md-lc-tile--ready:focus-visible {
  background: #dce9fc;
}

.learners-center-page .md-lc-tile--watch:hover,
.learners-center-page .md-lc-tile--watch:focus-visible {
  background: #fcefc3;
  border-color: #e6c35c !important;
  box-shadow: 0 0 0 2px rgba(176, 96, 0, 0.14) !important;
}

.learners-center-page .md-lc-tile--needs:hover,
.learners-center-page .md-lc-tile--needs:focus-visible {
  background: #f9d7d4;
  border-color: #e8a39c !important;
  box-shadow: 0 0 0 2px rgba(197, 34, 31, 0.14) !important;
}

.learners-center-page .md-lc-tile--pending:hover,
.learners-center-page .md-lc-tile--pending:focus-visible {
  background: #e8eaed;
  border-color: #9aa0a6 !important;
  box-shadow: 0 0 0 2px rgba(95, 99, 104, 0.12) !important;
}

.learners-center-page .md-lc-tile__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.learners-center-page .md-lc-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--lc-accent);
  font-size: 0.75rem;
}

.learners-center-page .md-lc-tile--pending .md-lc-tile__icon {
  color: var(--lc-pending, #5f6368);
}

.learners-center-page .md-lc-tile--watch .md-lc-tile__icon {
  color: #b06000;
}

.learners-center-page .md-lc-tile--needs .md-lc-tile__icon {
  color: var(--lc-needs, #c5221f);
}

.learners-center-page .md-lc-tile__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-text-secondary);
}

.learners-center-page .md-lc-tile__value {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--md-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.learners-center-page .md-lc-tile__sub {
  font-size: 0.75rem;
  color: var(--md-text-secondary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1 1 auto;
}

.learners-center-page .md-lc-tile__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(192, 196, 200, 0.75);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--lc-accent);
  line-height: 1;
}

.learners-center-page .md-lc-tile--pending .md-lc-tile__cta {
  color: var(--lc-pending, #5f6368);
}

.learners-center-page .md-lc-tile--watch .md-lc-tile__cta {
  color: #b06000;
}

.learners-center-page .md-lc-tile--needs .md-lc-tile__cta {
  color: var(--lc-needs, #c5221f);
}

.learners-center-page .md-lc-tile__cta i {
  font-size: 0.625rem;
}

@media (prefers-reduced-motion: reduce) {
  .learners-center-page .md-lc-dash__stamp,
  .learners-center-page .md-lc-tile {
    animation: none;
    transition: none;
  }
}

/* Learners Center detail sheet — full-screen cover (do NOT use menu-box-modal;
   bootstrap centers those with translate(-50%,-50%) and breaks cover layouts) */
#lcDetailSheet.menu.md-lc-sheet, #ccDetailSheet.menu.md-lc-sheet,
#lcDetailSheet.md-timeline-sheet.md-lc-sheet, #ccDetailSheet.md-timeline-sheet.md-lc-sheet {
  --lc-sheet-height: 100vh;
  --lc-sheet-height: 100dvh;
  display: none !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--lc-sheet-height) !important;
  min-height: var(--lc-sheet-height) !important;
  max-height: var(--lc-sheet-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 1300 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#lcDetailSheet.menu.md-lc-sheet.menu-active, #ccDetailSheet.menu.md-lc-sheet.menu-active,
#lcDetailSheet.md-timeline-sheet.md-lc-sheet.menu-active, #ccDetailSheet.md-timeline-sheet.md-lc-sheet.menu-active {
  display: flex !important;
  flex-direction: column !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: var(--lc-sheet-height) !important;
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 1 !important;
  pointer-events: all !important;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__panel, #ccDetailSheet.md-lc-sheet .md-lc-sheet__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  background: #f5f7fb;
  overflow: hidden;
  overscroll-behavior: none;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__header, #ccDetailSheet.md-lc-sheet .md-lc-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 18px 16px 16px;
  background: var(--lc-cover, linear-gradient(135deg, #0d47a1 0%, #1565c0 48%, #42a5f5 100%));
  color: #fff;
  border-bottom: 0;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__header-main, #ccDetailSheet.md-lc-sheet .md-lc-sheet__header-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__kind-icon, #ccDetailSheet.md-lc-sheet .md-lc-sheet__kind-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 1.0625rem;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__heading, #ccDetailSheet.md-lc-sheet .md-lc-sheet__heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__overline, #ccDetailSheet.md-lc-sheet .md-lc-sheet__overline {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.2;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__title, #ccDetailSheet.md-lc-sheet .md-lc-sheet__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.25;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__lead, #ccDetailSheet.md-lc-sheet .md-lc-sheet__lead {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.35;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__close, #ccDetailSheet.md-lc-sheet .md-lc-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__close:hover, #ccDetailSheet.md-lc-sheet .md-lc-sheet__close:hover,
#lcDetailSheet.md-lc-sheet .md-lc-sheet__close:focus-visible, #ccDetailSheet.md-lc-sheet .md-lc-sheet__close:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  outline: none;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__body, #ccDetailSheet.md-lc-sheet .md-lc-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  padding: 14px 12px 16px;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__footer, #ccDetailSheet.md-lc-sheet .md-lc-sheet__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #c0c4c8;
  background: #fff;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__footer-actions, #ccDetailSheet.md-lc-sheet .md-lc-sheet__footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__footer-actions[hidden], #ccDetailSheet.md-lc-sheet .md-lc-sheet__footer-actions[hidden] {
  display: none !important;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__footer-actions .md-btn-contained, #ccDetailSheet.md-lc-sheet .md-lc-sheet__footer-actions .md-btn-contained,
#lcDetailSheet.md-lc-sheet .md-lc-sheet__close-btn, #ccDetailSheet.md-lc-sheet .md-lc-sheet__close-btn {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 44px;
  width: 100%;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__result-actions, #ccDetailSheet.md-lc-sheet .md-lc-sheet__result-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn, #ccDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn__icon, #ccDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 1rem;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn__copy, #ccDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn__label, #ccDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn__label {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn__hint, #ccDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn__hint {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.78;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn__chev, #ccDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn__chev {
  flex-shrink: 0;
  font-size: 0.75rem;
  opacity: 0.55;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--eot, #ccDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--eot {
  background: #e3f2fd;
  border-color: #90caf9;
  color: #0d47a1;
  box-shadow: none;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--eot .md-lc-result-btn__icon, #ccDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--eot .md-lc-result-btn__icon {
  background: #bbdefb;
  color: #1565c0;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--eot:hover, #ccDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--eot:hover,
#lcDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--eot:focus-visible, #ccDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--eot:focus-visible {
  background: #d6eafc;
  border-color: #64b5f6;
  color: #0d47a1;
  box-shadow: 0 2px 10px rgba(21, 101, 192, 0.14);
  outline: none;
  transform: translateY(-1px);
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--eot:hover .md-lc-result-btn__chev, #ccDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--eot:hover .md-lc-result-btn__chev,
#lcDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--eot:focus-visible .md-lc-result-btn__chev, #ccDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--eot:focus-visible .md-lc-result-btn__chev {
  opacity: 0.9;
  transform: translateX(2px);
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--mid, #ccDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--mid {
  background: #e0f7fa;
  border-color: #80deea;
  color: #006064;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--mid .md-lc-result-btn__icon, #ccDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--mid .md-lc-result-btn__icon {
  background: #b2ebf2;
  color: #00838f;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--mid:hover, #ccDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--mid:hover,
#lcDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--mid:focus-visible, #ccDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--mid:focus-visible {
  background: #d0f1f5;
  border-color: #4dd0e1;
  color: #006064;
  box-shadow: 0 2px 10px rgba(0, 131, 143, 0.14);
  outline: none;
  transform: translateY(-1px);
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--mid:hover .md-lc-result-btn__chev, #ccDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--mid:hover .md-lc-result-btn__chev,
#lcDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--mid:focus-visible .md-lc-result-btn__chev, #ccDetailSheet.md-lc-sheet .md-lc-sheet__result-actions .md-lc-result-btn--mid:focus-visible .md-lc-result-btn__chev {
  opacity: 0.85;
  transform: translateX(2px);
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__close-btn, #ccDetailSheet.md-lc-sheet .md-lc-sheet__close-btn {
  background: var(--lc-accent, #1a73e8);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

#lcDetailSheet.md-lc-sheet .md-lc-sheet__close-btn:hover, #ccDetailSheet.md-lc-sheet .md-lc-sheet__close-btn:hover,
#lcDetailSheet.md-lc-sheet .md-lc-sheet__close-btn:focus-visible, #ccDetailSheet.md-lc-sheet .md-lc-sheet__close-btn:focus-visible {
  background: var(--lc-accent-deep, #0d47a1);
  outline: none;
}

.md-lc-sheet .md-lc-modal-summary {
  display: none;
}

.md-lc-sheet .md-lc-summary-card {
  margin: 0 0 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.md-lc-sheet .md-lc-summary-card__hero {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 16px 14px;
  background: linear-gradient(135deg, #e3f2fd 0%, #f5f9ff 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.md-lc-sheet .md-lc-summary-card__hero.is-pending {
  background: #fafafa;
}

.md-lc-sheet .md-lc-summary-card__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}

.md-lc-sheet .md-lc-summary-card__value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: #0d47a1;
}

.md-lc-sheet .md-lc-summary-card__hero.is-pending .md-lc-summary-card__value {
  font-size: 1.375rem;
  color: rgba(0, 0, 0, 0.45);
}

.md-lc-sheet .md-lc-summary-card__meta {
  display: flex;
  align-items: stretch;
  min-height: 64px;
}

.md-lc-sheet .md-lc-summary-card__cell {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 12px 16px;
  min-width: 0;
}

.md-lc-sheet .md-lc-summary-card__divider {
  width: 1px;
  align-self: stretch;
  background: rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.md-lc-sheet .md-lc-summary-card__text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.87);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Strongest / Needs attention jump chips */
.md-lc-sheet .md-lc-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 12px;
}

.md-lc-sheet .md-lc-highlight {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  box-shadow: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.md-lc-sheet .md-lc-highlight--strong {
  border-color: rgba(46, 125, 50, 0.28);
  background: linear-gradient(180deg, #f1f8f2 0%, #fff 70%);
}

.md-lc-sheet .md-lc-highlight--needs {
  border-color: rgba(230, 81, 0, 0.28);
  background: linear-gradient(180deg, #fff8f1 0%, #fff 70%);
}

.md-lc-sheet .md-lc-highlight:hover,
.md-lc-sheet .md-lc-highlight:focus-visible {
  outline: none;
  border-color: #1565c0;
}

.md-lc-sheet .md-lc-highlight__eyebrow {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
}

.md-lc-sheet .md-lc-highlight--strong .md-lc-highlight__eyebrow {
  color: #2e7d32;
}

.md-lc-sheet .md-lc-highlight--needs .md-lc-highlight__eyebrow {
  color: #e65100;
}

.md-lc-sheet .md-lc-highlight__name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.87);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.md-lc-sheet .md-lc-highlight__score {
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #0d47a1;
}

@media (max-width: 360px) {
  .md-lc-sheet .md-lc-highlights {
    grid-template-columns: 1fr;
  }
}

/* Practice snapshot */
.md-lc-sheet .md-lc-classwork {
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid rgba(21, 101, 192, 0.14);
  border-radius: 12px;
  background: #f7faff;
}

.md-lc-sheet .md-lc-explain {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(21, 101, 192, 0.18);
  background: #e8f0fe;
}

.md-lc-sheet .md-lc-explain__icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: #0d47a1;
  font-size: 0.875rem;
}

.md-lc-sheet .md-lc-explain__prose {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #174ea6;
}

.md-lc-sheet .md-lc-classwork__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.md-lc-sheet .md-lc-classwork__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0d47a1;
  line-height: 1.25;
}

.md-lc-sheet .md-lc-classwork__explain {
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.55);
}

.md-lc-sheet .md-lc-classwork__explain strong {
  font-weight: 700;
  color: rgba(0, 0, 0, 0.72);
}

.md-lc-sheet .md-lc-classwork__hint {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}

.md-lc-sheet .md-lc-classwork__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.md-lc-sheet .md-lc-classwork__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 6px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(21, 101, 192, 0.1);
  text-align: center;
}

.md-lc-sheet .md-lc-classwork__cell.is-empty {
  opacity: 0.55;
}

.md-lc-sheet .md-lc-classwork__label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
}

.md-lc-sheet .md-lc-classwork__value {
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #0d47a1;
  line-height: 1.2;
}

.md-lc-sheet .md-lc-classwork__used {
  font-size: 0.625rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.45);
  line-height: 1.2;
}

.md-lc-sheet .md-lc-subject.is-flash {
  box-shadow: 0 0 0 2px #1565c0;
  transition: box-shadow 0.2s ease;
}

.md-lc-sheet .md-lc-modal-stat {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
}

.md-lc-sheet .md-lc-modal-stat--hero {
  background: #e3f2fd;
}

.md-lc-sheet .md-lc-modal-stat__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}

.md-lc-sheet .md-lc-modal-stat__value {
  display: block;
  margin-top: 4px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(0, 0, 0, 0.87);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.md-lc-sheet .md-lc-modal-stat--hero .md-lc-modal-stat__value {
  font-size: 1.375rem;
  color: #0d47a1;
}

.md-lc-sheet .md-lc-modal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin: 8px 0 0;
  padding: 28px 18px;
  border-radius: 12px;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  background: #fff;
  color: rgba(0, 0, 0, 0.6);
}

.md-lc-sheet .md-lc-modal-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: #e3f2fd;
  color: #1565c0;
  font-size: 1.125rem;
}

.md-lc-sheet .md-lc-modal-empty__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.87);
}

.md-lc-sheet .md-lc-modal-empty__hint {
  margin: 0;
  max-width: 28ch;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.md-lc-sheet .md-lc-modal-note {
  display: none;
}

.md-lc-sheet .md-lc-att-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #90caf9;
  background: linear-gradient(180deg, #e8f4fd 0%, #e3f2fd 100%);
  color: #0d47a1;
}

.md-lc-sheet .md-lc-att-notice--muted {
  margin-top: 14px;
  margin-bottom: 0;
  border-color: #cfd8dc;
  background: linear-gradient(180deg, #f7f9fb 0%, #eceff1 100%);
  color: #37474f;
}

.md-lc-sheet .md-lc-att-notice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: #1565c0;
  font-size: 0.9375rem;
}

.md-lc-sheet .md-lc-att-notice--muted .md-lc-att-notice__icon {
  color: #546e7a;
}

.md-lc-sheet .md-lc-att-notice__body {
  min-width: 0;
  flex: 1 1 auto;
}

.md-lc-sheet .md-lc-att-notice__title {
  display: block;
  margin: 0 0 2px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.md-lc-sheet .md-lc-att-notice__copy {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.45;
  opacity: 0.88;
}

.md-lc-sheet .md-lc-guide {
  margin: 0 0 14px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(25, 118, 210, 0.28);
  background: #e3f2fd;
  overflow: hidden;
}

.md-lc-sheet .md-lc-guide__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 8px;
}

.md-lc-sheet .md-lc-guide__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(25, 118, 210, 0.12);
  color: #1565c0;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.md-lc-sheet .md-lc-guide__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #0d47a1;
}

.md-lc-sheet .md-lc-guide__list {
  list-style: none;
  margin: 0;
  padding: 0 8px 8px;
}

.md-lc-sheet .md-lc-guide__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 12px;
  margin-bottom: 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.md-lc-sheet .md-lc-guide__item:last-child {
  margin-bottom: 0;
}

.md-lc-sheet .md-lc-guide__chip {
  font-size: 0.6875rem;
  font-weight: 700;
  height: auto;
  padding: 3px 8px;
  border-radius: 16px;
}

.md-lc-sheet .md-lc-guide__chip--in {
  background: #c8e6c9;
  color: #1b5e20;
}

.md-lc-sheet .md-lc-guide__chip--out {
  background: #bbdefb;
  color: #0d47a1;
}

.md-lc-sheet .md-lc-guide__copy {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.75);
}

.md-lc-sheet .md-lc-modal-section {
  margin: 4px 0 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}

.md-lc-sheet .md-lc-subject-list,
.md-lc-sheet .md-lc-result-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.md-lc-sheet .md-lc-subject {
  padding: 0;
  border-radius: 12px;
  border: 1px solid #c0c4c8;
  background: #fff;
  overflow: hidden;
  box-shadow: none;
}

#ccDetailSheet.md-lc-sheet .md-lc-subject,
#lcDetailSheet.md-lc-sheet .md-lc-subject {
  border: 1px solid #c0c4c8;
  border-radius: 12px;
  box-shadow: none;
}

.md-lc-sheet .md-lc-subject__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 12px;
  background: #fafafa;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.md-lc-sheet .md-lc-subject__title-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.md-lc-sheet .md-lc-subject__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(0, 0, 0, 0.87);
  line-height: 1.3;
}

.md-lc-sheet .md-lc-subject__score {
  flex-shrink: 0;
  min-width: 56px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #e3f2fd;
  color: #0d47a1;
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1.2;
}

.md-lc-sheet .md-lc-subject__score.is-pending {
  background: #f5f5f5;
  color: rgba(0, 0, 0, 0.45);
}

.md-lc-sheet .md-lc-subject .md-chip.md-lc-status {
  margin: 0;
}

.md-lc-sheet .md-lc-subject__sources {
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-lc-sheet .md-lc-subject__source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.875rem;
}

.md-lc-sheet .md-lc-subject__source:first-child {
  border-top: 0;
}

.md-lc-sheet .md-lc-subject__source-name {
  color: rgba(0, 0, 0, 0.7);
  font-weight: 500;
}

.md-lc-sheet .md-lc-subject__source-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.md-lc-sheet .md-lc-subject__source-count {
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.45);
  line-height: 1.2;
}

.md-lc-sheet .md-lc-subject__source-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(0, 0, 0, 0.87);
}

.md-lc-sheet .md-lc-subject__source.is-na .md-lc-subject__source-name {
  color: rgba(0, 0, 0, 0.45);
}

.md-lc-sheet .md-lc-subject__source.is-na .md-lc-subject__source-count {
  color: rgba(0, 0, 0, 0.35);
}

.md-lc-sheet .md-lc-subject__na-chip {
  background: #f5f5f5;
  color: rgba(0, 0, 0, 0.55);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 16px;
}

.md-lc-sheet .md-lc-subject__na {
  color: rgba(0, 0, 0, 0.45);
  font-size: 0.8125rem;
}

.md-lc-sheet .md-lc-subject__sources li.is-na {
  opacity: 0.72;
}

.md-lc-sheet .md-lc-subject__na {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--md-text-disabled, rgba(0, 0, 0, 0.38));
}

.md-lc-sheet .md-lc-history {
  list-style: none;
  margin: 0;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
}

.md-lc-sheet .md-lc-history li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 8px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.8125rem;
  color: rgba(0, 0, 0, 0.7);
}

.md-lc-sheet .md-lc-history li:first-child {
  border-top: 0;
}

.md-lc-sheet .md-lc-history__date {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.md-lc-sheet .md-lc-history--present strong { color: var(--lc-well, #1e8e3e); }
.md-lc-sheet .md-lc-history--absent strong { color: var(--lc-needs, #d93025); }
.md-lc-sheet .md-lc-history--late strong { color: #b06000; }

.md-lc-sheet .md-lc-comment {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--lc-accent, #1a73e8);
  border-radius: 0 12px 12px 0;
  background: #fff;
  border-top: 1px solid #c0c4c8;
  border-right: 1px solid #c0c4c8;
  border-bottom: 1px solid #c0c4c8;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--md-text-primary);
}

.md-lc-sheet .md-lc-comment__label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-text-secondary);
}

.md-lc-sheet .md-lc-counts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 14px;
}

.md-lc-sheet .md-lc-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid #c0c4c8;
  background: #fff;
  text-align: center;
}

.md-lc-sheet .md-lc-count__label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-text-secondary);
}

.md-lc-sheet .md-lc-count strong {
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--md-text-primary);
}

.md-lc-sheet .md-lc-count--present { background: #e6f4ea; }
.md-lc-sheet .md-lc-count--absent { background: #fce8e6; }
.md-lc-sheet .md-lc-count--late { background: #fef7e0; }

.md-lc-sheet .md-lc-breakdown {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #c0c4c8;
  background: #fff;
}

.md-lc-sheet .md-lc-breakdown summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--lc-accent, #1a73e8);
  font-size: 0.875rem;
}

.md-lc-sheet .md-lc-breakdown .md-lc-history {
  margin-top: 8px;
  border: 0;
  padding: 0;
}

.md-lc-sheet .md-lc-result-card {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #c0c4c8;
  background: #fff;
}

.md-lc-sheet .md-lc-result-card--ready {
  background: #e8f0fe;
}

.md-lc-sheet .md-lc-result-card--pending {
  background: #f1f3f4;
}

.md-lc-sheet .md-lc-result-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.md-lc-sheet .md-lc-result-card h3 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--md-text-primary);
}

.md-lc-sheet .md-lc-result-card__badge {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.7);
  color: var(--lc-well, #1e8e3e);
}

.md-lc-sheet .md-lc-result-card--pending .md-lc-result-card__badge {
  color: var(--lc-pending, #5f6368);
}

.md-lc-sheet .md-lc-result-card__avg {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--lc-accent-deep, #0d47a1);
  line-height: 1.1;
}

.md-lc-sheet .md-lc-result-card__meta {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--md-text-secondary);
}

@media (max-width: 360px) {
  .md-lc-sheet .md-lc-modal-summary--3 {
    grid-template-columns: 1fr 1fr;
  }

  .md-lc-sheet .md-lc-modal-summary--3 .md-lc-modal-stat--hero {
    grid-column: 1 / -1;
  }
}

/* Timeline home entry card — Learners / Classroom Center */
.timeline-page .md-lc-home-card {
  --lc-home-blue: var(--tl-google-blue, #1a73e8);
  --lc-home-blue-dark: var(--tl-google-blue-dark, #1557b0);
  --lc-home-blue-deep: #0d47a1;
  --lc-home-blue-soft: #90caf9;
  --lc-home-teal: #7dd3c7;
  --lc-home-teal-deep: var(--tl-toolbar-teal, #0f766e);
  --lc-home-alert: #ffb74d;
  --lc-home-ice: rgba(255, 255, 255, 0.14);
  position: relative;
  isolation: isolate;
  display: block;
  margin: 0 0 12px;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  border: 1px solid rgba(26, 115, 232, 0.35);
  background: var(--lc-home-blue-deep);
  box-shadow: 0 6px 18px rgba(13, 71, 161, 0.28);
  text-decoration: none;
  color: #e8eefc;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.timeline-page .md-lc-home-card:has(+ .md-tl-week) {
  margin-bottom: 0;
  border-bottom: none;
  box-shadow: none;
}

.timeline-page .md-lc-home-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    125deg,
    var(--lc-home-blue-deep) 0%,
    var(--lc-home-blue-dark) 22%,
    var(--lc-home-blue) 48%,
    var(--lc-home-teal-deep) 72%,
    var(--lc-home-blue-dark) 88%,
    var(--lc-home-blue-deep) 100%
  );
  background-size: 280% 280%;
  animation: md-lc-home-gradient 14s ease-in-out infinite;
  pointer-events: none;
}

.timeline-page .md-lc-home-card::after {
  content: "";
  position: absolute;
  inset: -40% -20%;
  z-index: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(66, 133, 244, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(15, 118, 110, 0.35) 0%, transparent 50%);
  animation: md-lc-home-sheen 10s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes md-lc-home-gradient {
  0% { background-position: 0% 40%; }
  50% { background-position: 100% 60%; }
  100% { background-position: 0% 40%; }
}

@keyframes md-lc-home-sheen {
  0% { transform: translate3d(-4%, -2%, 0) scale(1); opacity: 0.85; }
  100% { transform: translate3d(6%, 4%, 0) scale(1.08); opacity: 1; }
}

.timeline-page .md-lc-home-card:hover,
.timeline-page .md-lc-home-card:focus-visible {
  border-color: rgba(144, 202, 249, 0.55);
  box-shadow: 0 8px 22px rgba(13, 71, 161, 0.36);
  transform: translateY(-1px);
}

.timeline-page .md-lc-home-card:focus-visible {
  outline: 2px solid var(--lc-home-blue-soft);
  outline-offset: 2px;
}

.timeline-page .md-lc-home-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.timeline-page .md-lc-home-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 8px;
}

.timeline-page .md-lc-home-card__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-top: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, rgba(26, 115, 232, 0.35) 100%);
  color: #f5f8ff;
  font-size: 0.9375rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.timeline-page .md-lc-home-card__top {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.timeline-page .md-lc-home-card__overline {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lc-home-blue-soft);
}

.timeline-page .md-lc-home-card__title {
  margin: 2px 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #f5f8ff;
}

.timeline-page .md-lc-home-card__count {
  color: #bbdefb;
}

.timeline-page .md-lc-home-card__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-top: 0;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: var(--lc-home-ice);
  font-size: 0;
  font-weight: 700;
  color: #f5f8ff;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.timeline-page .md-lc-home-card__cta i {
  font-size: 0.75rem;
}

.timeline-page .md-lc-home-card:hover .md-lc-home-card__cta,
.timeline-page .md-lc-home-card:focus-visible .md-lc-home-card__cta {
  background: #f5f8ff;
  border-color: #f5f8ff;
  color: var(--lc-home-blue-deep);
}

.timeline-page .md-lc-home-card__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap: 0;
  margin: 0;
  padding: 6px 0 8px;
  border-top: 1px solid rgba(187, 222, 251, 0.28);
  box-sizing: border-box;
}

.timeline-page .md-lc-home-card__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  padding: 2px 6px 0;
  text-align: center;
  box-sizing: border-box;
}

.timeline-page .md-lc-home-card__stat + .md-lc-home-card__stat {
  padding-left: 6px;
  border-left: 1px solid rgba(187, 222, 251, 0.28);
}

.timeline-page .md-lc-home-card__stat-value {
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  color: #f5f8ff;
}

.timeline-page .md-lc-home-card__stat--attendance .md-lc-home-card__stat-value {
  color: var(--lc-home-teal);
}

.timeline-page .md-lc-home-card__stat--eot .md-lc-home-card__stat-value {
  color: var(--lc-home-blue-soft);
}

.timeline-page .md-lc-home-card__stat--alert .md-lc-home-card__stat-value {
  color: var(--lc-home-alert);
}

.timeline-page .md-lc-home-card__stat--alert {
  border-radius: 0;
  background: transparent;
}

.timeline-page .md-lc-home-card__stat-label {
  max-width: 100%;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
  color: rgba(232, 238, 252, 0.72);
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .timeline-page .md-lc-home-card__stats {
    gap: 4px;
    padding: 6px 8px 8px;
    border-top-color: rgba(187, 222, 251, 0.22);
  }

  .timeline-page .md-lc-home-card__stat {
    gap: 2px;
    padding: 6px 4px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

  .timeline-page .md-lc-home-card__stat + .md-lc-home-card__stat {
    padding-left: 4px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  .timeline-page .md-lc-home-card__stat--alert {
    background: rgba(255, 183, 77, 0.16);
    border-color: rgba(255, 183, 77, 0.28);
  }

  .timeline-page .md-lc-home-card__stat-value {
    font-size: 0.875rem;
  }

  .timeline-page .md-lc-home-card__stat-label {
    font-size: 0.5rem;
    letter-spacing: 0.02em;
    line-height: 1.15;
  }
}

@media (max-width: 360px) {
  .timeline-page .md-lc-home-card__cta {
    padding: 5px 7px;
  }

  .timeline-page .md-lc-home-card__stats {
    gap: 4px;
    padding: 5px 6px 7px;
  }

  .timeline-page .md-lc-home-card__stat {
    padding: 5px 3px;
  }

  .timeline-page .md-lc-home-card__stat-value {
    font-size: 0.875rem;
  }
}

/* ── Timeline: compressed school-calendar week (signed-in roles) ── */
.timeline-page .md-tl-week {
  --tl-week-blue: #1a73e8;
  --tl-week-ink: #202124;
  --tl-week-muted: #80868b;
  --tl-week-line: rgba(0, 0, 0, 0.08);
  --tl-week-soft: #e8f0fe;
  --tl-week-active: #d2e3fc;
  margin: 0 0 8px;
  padding: 4px 6px 5px;
  border-radius: 0;
  border: 1px solid var(--tl-card-border, #c0c4c8);
  border-left: none;
  border-right: none;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
  font-family: "Jost", sans-serif;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}

.timeline-page .md-tl-week[hidden] {
  display: none !important;
}

.timeline-page .md-tl-week:not([hidden]) {
  display: block;
}

.timeline-page .md-lc-home-card + .md-tl-week {
  margin: 0 0 8px;
  width: 100%;
  max-width: none;
  border-radius: 0 0 var(--tl-card-radius, 12px) var(--tl-card-radius, 12px);
  border-color: var(--tl-card-border, #c0c4c8);
  border-top: none;
}
.timeline-page .md-tl-week__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
  padding: 0 1px;
  min-height: 16px;
}
.timeline-page .md-tl-week__title {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tl-week-muted);
  line-height: 1;
}
.timeline-page .md-tl-week__title i {
  display: none;
}
.timeline-page .md-tl-week__more {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 16px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--tl-week-blue);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
.timeline-page .md-tl-week__more:hover,
.timeline-page .md-tl-week__more:focus-visible {
  background: transparent;
  text-decoration: underline;
  outline: none;
}
.timeline-page .md-tl-week__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 0;
}
.timeline-page .md-tl-week__skeleton {
  grid-column: 1 / -1;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f1f3f4 25%, #f8f9fa 50%, #f1f3f4 75%);
  background-size: 200% 100%;
  animation: md-tl-week-shimmer 1.2s ease-in-out infinite;
}
@keyframes md-tl-week-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.timeline-page .md-tl-week__day {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-height: 0;
  padding: 2px 0 1px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--tl-week-ink);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.timeline-page .md-tl-week__day:active {
  background: rgba(26, 115, 232, 0.06);
}
.timeline-page .md-tl-week__day.is-today:not(.is-active) .md-tl-week__dom {
  color: var(--tl-week-blue);
}
.timeline-page .md-tl-week__day.is-today:not(.is-active) .md-tl-week__dow {
  color: var(--tl-week-blue);
  opacity: 1;
}
.timeline-page .md-tl-week__day.has-events:not(.is-active) {
  background: transparent;
}
.timeline-page .md-tl-week__day.has-events::after {
  display: none;
}
.timeline-page .md-tl-week__day.is-active {
  background: var(--tl-week-soft);
  color: var(--tl-week-blue);
}
.timeline-page .md-tl-week__day.is-active .md-tl-week__dow,
.timeline-page .md-tl-week__day.is-active .md-tl-week__dom {
  color: var(--tl-week-blue);
  opacity: 1;
}
.timeline-page .md-tl-week__day:focus-visible {
  outline: 2px solid var(--tl-week-blue);
  outline-offset: 0;
}
.timeline-page .md-tl-week__dow {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tl-week-muted);
  opacity: 1;
  line-height: 1;
}
.timeline-page .md-tl-week__dom {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.timeline-page .md-tl-week__day.is-active .md-tl-week__dom {
  background: var(--tl-week-active);
  color: var(--tl-week-blue);
}
.timeline-page .md-tl-week__badge {
  position: absolute;
  top: -3px;
  right: -5px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12px;
  height: 12px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--tl-week-soft);
  color: var(--tl-week-blue);
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
  box-shadow: 0 0 0 1px #fff;
}
.timeline-page .md-tl-week__day.is-active .md-tl-week__badge {
  background: #fff;
  color: var(--tl-week-blue);
  box-shadow: 0 0 0 1px rgba(26, 115, 232, 0.18);
}

/* ── Timeline: phone + tablet harden (tablet = 600px — Fold inner ~700px) ── */
@media (min-width: 600px) {
  .timeline-page {
    --tl-gutter: 16px;
  }

  .timeline-page .md-lc-home-card,
  .timeline-page .md-timeline-login-card {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    box-sizing: border-box;
  }

  .timeline-page .md-lc-home-card:has(+ .md-tl-week) {
    border-radius: 0;
  }

  .timeline-page .md-tl-week {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 8px;
    box-sizing: border-box;
  }

  .timeline-page .md-lc-home-card + .md-tl-week {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: none;
    border-radius: 0 0 var(--tl-card-radius, 12px) var(--tl-card-radius, 12px);
  }

  .timeline-page .md-timeline-sort-stat {
    min-height: 44px;
    padding: 8px 6px;
  }

  .timeline-page .md-timeline-card__action-bar .mui-btn-text,
  .timeline-page .md-timeline-card__action-bar .md-timeline-action-btn {
    min-height: 44px;
  }
}

html.is-vp-tablet .timeline-page {
  --tl-gutter: 16px;
}

html.is-vp-tablet .timeline-page .md-lc-home-card,
html.is-vp-tablet .timeline-page .md-timeline-login-card {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  box-sizing: border-box;
}

html.is-vp-tablet .timeline-page .md-lc-home-card:has(+ .md-tl-week) {
  border-radius: 0;
}

html.is-vp-tablet .timeline-page .md-tl-week {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 8px;
  box-sizing: border-box;
}

html.is-vp-tablet .timeline-page .md-lc-home-card + .md-tl-week {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: none;
  border-radius: 0 0 var(--tl-card-radius, 12px) var(--tl-card-radius, 12px);
}

@media (max-width: 599px) {
  .timeline-page {
    --tl-gutter: 8px;
  }

  .timeline-page .md-timeline-sort {
    margin: 0 auto 6px;
  }

  .timeline-page .md-tl-week {
    margin: 0 0 6px;
    padding: 3px 4px 4px;
    width: 100%;
    max-width: none;
  }

  .timeline-page .md-lc-home-card + .md-tl-week {
    margin: 0 0 6px;
    width: 100%;
    max-width: none;
  }

  .timeline-page .md-timeline-date__chip,
  .timeline-page .md-timeline-date > span.md-timeline-date__chip {
    font-size: 0.75rem;
    padding: 4px 10px;
  }
}

@media (max-width: 480px) {
  .timeline-page .md-timeline-toolbar__actions {
    gap: 6px;
  }

  .timeline-page .md-timeline-toolbar__actions .mui-btn,
  .timeline-page .md-timeline-toolbar__actions .md-btn-contained {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 0.8125rem;
  }

  .timeline-page .md-timeline-sort-strip {
    gap: 3px;
    padding: 4px;
  }

  .timeline-page .md-timeline-sort-stat {
    padding: 5px 3px;
  }

  .timeline-page .md-timeline-card__author {
    font-size: 0.875rem;
  }

  .timeline-page .md-timeline-card__title {
    font-size: 0.8125rem;
  }

  #timelineReadSheet.md-timeline-read-sheet.is-open {
    --tl-read-height: calc(var(--vh, 1vh) * 78);
    border-radius: 20px 20px 0 0 !important;
  }

  #timelineReadSheet .md-timeline-read-sheet__title {
    font-size: 1.0625rem;
  }

  #timelineReadSheet .md-tl-week-read {
    padding: 12px;
    gap: 10px;
  }

  #timelineReadSheet .md-tl-week-read__fact {
    padding: 8px 10px;
  }
}

@media (max-width: 360px) {
  .timeline-page {
    --tl-gutter: 6px;
  }

  .timeline-page .md-tl-week__dow {
    font-size: 0.4375rem;
  }

  .timeline-page .md-tl-week__dom {
    width: 20px;
    height: 20px;
    font-size: 0.6875rem;
  }

  .timeline-page .md-timeline-sort-stat__value {
    font-size: 0.875rem;
  }

  .timeline-page .md-timeline-sort-stat__label {
    font-size: 0.5rem;
  }

  .timeline-page .md-lc-home-card__title {
    font-size: 0.9375rem;
  }
}

@media (max-height: 480px) and (orientation: landscape) {
  #timelineReadSheet.md-timeline-read-sheet.is-open {
    --tl-read-height: calc(var(--vh, 1vh) * 94);
    border-radius: 16px 16px 0 0 !important;
  }

  .timeline-page .md-timeline-toolbar .content,
  .timeline-page .md-timeline-toolbar__inner {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    gap: 4px;
  }
}

/* Event detail inside timeline read sheet */
#timelineReadSheet .md-timeline-read-sheet__paper--event {
  padding: 16px;
  background: transparent;
  border: none;
  box-shadow: none;
}
#timelineReadSheet .md-timeline-read-sheet__message--event {
  font-size: 1rem;
  line-height: 1.45;
  letter-spacing: 0;
  color: #1c1b1f;
}
#timelineReadSheet .md-tl-week-read {
  --tl-read-accent: #1a73e8;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(26, 115, 232, 0.14);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
#timelineReadSheet .md-tl-week-read--class {
  --tl-read-accent: #ef6c00;
  border-color: rgba(239, 108, 0, 0.18);
}
#timelineReadSheet .md-tl-week-read--next {
  margin-top: 12px;
  padding-top: 14px;
  border-top: none;
}
#timelineReadSheet .md-tl-week-read__media {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #e8eaed;
}
#timelineReadSheet .md-tl-week-read__media img {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}
#timelineReadSheet .md-tl-week-read__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
#timelineReadSheet .md-tl-week-read__head .md-chip {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 8px;
  line-height: 1.3;
}
#timelineReadSheet .md-tl-week-read__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #1c1b1f;
  text-transform: uppercase;
}
#timelineReadSheet .md-tl-week-read__facts {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #f8fafc;
  overflow: hidden;
}
#timelineReadSheet .md-tl-week-read__fact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
}
#timelineReadSheet .md-tl-week-read__fact + .md-tl-week-read__fact {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}
#timelineReadSheet .md-tl-week-read__fact-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(26, 115, 232, 0.1);
  color: var(--tl-read-accent);
  font-size: 0.75rem;
}
#timelineReadSheet .md-tl-week-read--class .md-tl-week-read__fact-icon {
  background: rgba(239, 108, 0, 0.12);
}
#timelineReadSheet .md-tl-week-read__fact-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#timelineReadSheet .md-tl-week-read__fact-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #79747e;
}
#timelineReadSheet .md-tl-week-read__fact-value {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1c1b1f;
  overflow-wrap: anywhere;
}
#timelineReadSheet .md-tl-week-read__desc {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: #fff;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.55;
  color: #444746;
}
#timelineReadSheet .md-tl-week-read__desc p {
  margin: 0 0 0.75em;
}
#timelineReadSheet .md-tl-week-read__desc p:last-child {
  margin-bottom: 0;
}
#timelineReadSheet .md-tl-week-read__muted {
  color: #80868b;
}

#timelineReadSheet .md-tl-week-read-add {
  margin-top: 14px;
  padding-top: 4px;
}

#timelineReadSheet .md-tl-week-read-add__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px dashed rgba(26, 115, 232, 0.4);
  border-radius: 12px;
  background: #f8fbff;
  color: #1a73e8;
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
}

#timelineReadSheet .md-tl-week-read-add__btn:hover,
#timelineReadSheet .md-tl-week-read-add__btn:focus-visible {
  background: #e8f0fe;
  outline: none;
}

#timelineReadSheet .md-timeline-read-sheet__paper--event-empty,
#timelineReadSheet .md-timeline-read-sheet__message--event-empty {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
  margin: 0;
}

/* Empty calendar day: hug content instead of 68vh sheet */
#timelineReadSheet.md-timeline-read-sheet.is-open.is-event-empty {
  height: auto !important;
  max-height: min(48vh, 320px) !important;
}

#timelineReadSheet.is-event-empty .md-timeline-read-sheet__panel {
  height: auto;
}

#timelineReadSheet.is-event-empty .md-timeline-read-sheet__handle {
  margin: 10px auto 2px;
}

#timelineReadSheet.is-event-empty .md-timeline-read-sheet__header {
  padding: 2px 8px 10px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#timelineReadSheet.is-event-empty .md-timeline-read-sheet__title {
  font-size: 1.0625rem;
  -webkit-line-clamp: 1;
}

#timelineReadSheet.is-event-empty .md-timeline-read-sheet__body {
  flex: 0 0 auto;
  overflow: visible;
  padding: 12px 16px 8px;
  background: #fff;
}

#timelineReadSheet.is-event-empty .md-timeline-read-sheet__footer {
  padding: 8px 16px calc(10px + var(--md-sheet-footer-safe, 0px));
}

#timelineReadSheet .md-tl-week-read-empty {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 12px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(232, 240, 254, 0.95) 0%, rgba(248, 250, 252, 0.98) 55%, #fff 100%);
  border: 1px solid rgba(26, 115, 232, 0.12);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  animation: md-tl-week-empty-in 0.28s cubic-bezier(0.2, 0, 0, 1) both;
}

@keyframes md-tl-week-empty-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#timelineReadSheet .md-tl-week-read-empty__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  color: #1a73e8;
  font-size: 1rem;
  box-shadow:
    0 0 0 1px rgba(26, 115, 232, 0.1),
    0 1px 3px rgba(26, 115, 232, 0.12);
}

#timelineReadSheet .md-tl-week-read-empty__copy {
  flex: 1 1 auto;
  min-width: 0;
}

#timelineReadSheet .md-tl-week-read-empty__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: #1a1c1e;
}

#timelineReadSheet .md-tl-week-read-empty__text {
  margin: 2px 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: #5f6368;
}

#timelineReadSheet .md-tl-week-read-empty__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border: none;
  border-radius: 17px;
  background: #1a73e8;
  color: #fff;
  font-family: "Jost", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(26, 115, 232, 0.28);
}

#timelineReadSheet .md-tl-week-read-empty__cta:hover,
#timelineReadSheet .md-tl-week-read-empty__cta:focus-visible {
  background: #1557b0;
  color: #fff;
  outline: none;
}

#timelineReadSheet .md-tl-week-read-empty__cta i {
  font-size: 0.6875rem;
}

@media (max-width: 360px) {
  #timelineReadSheet .md-tl-week-read-empty {
    flex-wrap: wrap;
  }

  #timelineReadSheet .md-tl-week-read-empty__cta {
    width: 100%;
  }
}

/* Guest timeline login invite — fixed top chrome (replaces toolbar for guests) */
.timeline-page {
  --md-timeline-login-offset: 0px;
}

.timeline-page .md-timeline-login-card {
  position: sticky;
  top: var(--md-timeline-toolbar-offset, 148px);
  z-index: 25;
  margin: 0 0 12px;
  cursor: default;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(13, 71, 161, 0.28), 0 8px 20px rgba(15, 23, 42, 0.08);
}

.timeline-page .md-timeline-login-card--chrome,
.timeline-page--guest .md-timeline-login-card {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 100 !important;
  padding-top: var(--app-safe-top, 0px);
  box-sizing: border-box;
  box-shadow:
    0 2px 8px rgba(13, 71, 161, 0.22),
    0 8px 20px rgba(15, 23, 42, 0.1);
}

.timeline-page .md-timeline-login-card__chrome-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.timeline-page .md-timeline-login-card__chrome-row .md-lc-home-card__head {
  flex: 1 1 auto;
  min-width: 0;
}

.timeline-page .md-timeline-login-card__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.timeline-page .md-timeline-login-card__reload:active {
  background: rgba(255, 255, 255, 0.24);
}

.timeline-page .md-timeline-login-card:hover,
.timeline-page .md-timeline-login-card:focus-visible {
  transform: none;
}

.timeline-page .md-timeline-login-card--chrome .md-lc-home-card__body,
.timeline-page--guest .md-timeline-login-card .md-lc-home-card__body {
  padding: 8px 12px 12px;
}

.timeline-page .md-timeline-login-card--chrome .md-lc-home-card__head,
.timeline-page--guest .md-timeline-login-card .md-lc-home-card__head {
  padding: 0;
}

.timeline-page .md-timeline-login-card--chrome .md-timeline-login-card__text,
.timeline-page--guest .md-timeline-login-card .md-timeline-login-card__text {
  margin-top: 8px;
}

.timeline-page .md-timeline-login-card .md-lc-home-card__head {
  align-items: center;
}

.timeline-page .md-timeline-login-card__logo-wrap {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 12px rgba(13, 71, 161, 0.25);
  overflow: hidden;
}

.timeline-page .md-timeline-login-card__logo {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.timeline-page .md-timeline-login-card .md-lc-home-card__title {
  font-size: 0.9375rem;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.timeline-page .md-timeline-login-card__text {
  margin: 0;
  padding: 0 16px 4px;
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(232, 238, 252, 0.9);
}

.timeline-page .md-timeline-login-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: stretch;
  margin: 8px 16px 16px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(13, 71, 161, 0.28);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.timeline-page .md-timeline-login-card__btn:hover,
.timeline-page .md-timeline-login-card__btn:focus-visible {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
  color: #fff;
}

.timeline-page .md-timeline-login-card__btn:focus-visible {
  outline: 2px solid var(--lc-home-blue-soft, #90caf9);
  outline-offset: 2px;
}

.timeline-page .md-timeline-login-card__btn i {
  font-size: 0.8125rem;
}

@media (max-width: 480px) {
  .timeline-page .md-timeline-login-card__logo-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .timeline-page .md-timeline-login-card__logo {
    width: 38px;
    height: 38px;
  }

  .timeline-page .md-timeline-login-card__text,
  .timeline-page .md-timeline-login-card__btn {
    margin-left: 12px;
    margin-right: 12px;
  }

  .timeline-page .md-timeline-login-card__text {
    padding-left: 0;
    padding-right: 0;
    font-size: 0.875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-page .md-lc-home-card::before,
  .timeline-page .md-lc-home-card::after {
    animation: none;
  }

  .timeline-page .md-lc-home-card:hover,
  .timeline-page .md-lc-home-card:focus-visible {
    transform: none;
  }
}

/* ── Classroom Center (shares Learners Center tokens via .learners-center-page) ── */

.classroom-center-page {
  --cc-ink: #0f172a;
  --cc-ink-soft: #334155;
  --cc-muted: #64748b;
  --cc-blue: #1565c0;
  --cc-blue-deep: #0d47a1;
  --cc-blue-mid: #1e88e5;
  --cc-blue-soft: #e3f2fd;
  --cc-blue-wash: #eef5ff;
  --cc-accent: #f59e0b;
  --cc-accent-deep: #b45309;
  --cc-accent-soft: #fff8e1;
  --cc-accent-border: #fcd34d;
  --cc-border: rgba(0, 0, 0, 0.08);
  --cc-border-strong: #c0c4c8;
  --cc-border-panel: #c0c4c8;
  --cc-card-border: #c0c4c8;
  --cc-card-radius: 12px;
  --cc-surface: #ffffff;
  --cc-alert-soft: #fdecea;
  --cc-alert-border: rgba(198, 40, 40, 0.2);
  --cc-alert: #c62828;
}

.classroom-center-class-page #classroom-center-class-toolbar.md-cc-toolbar {
  --cc-tb-blue: #0d47a1;
  --cc-tb-blue-deep: #062a5e;
  --cc-tb-blue-mid: #093a7d;
  --cc-tb-blue-soft: #e3f2fd;
  position: relative;
  isolation: isolate;
  border-bottom: none !important;
  background:
    linear-gradient(
      180deg,
      #1565c0 0%,
      var(--cc-tb-blue) 32%,
      var(--cc-tb-blue-mid) 68%,
      var(--cc-tb-blue-deep) 100%
    ) !important;
  box-shadow:
    0 2px 10px rgba(6, 42, 94, 0.28),
    0 1px 2px rgba(15, 23, 42, 0.1) !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: visible !important;
}

.classroom-center-class-page {
  --md-check-result-toolbar-offset: 220px;
}

.classroom-center-class-page .md-cc-toolbar__inner {
  padding: 10px 12px 8px !important;
  gap: 0;
  background: transparent;
  border-bottom: none;
}

.classroom-center-class-page #classroom-center-class-toolbar .md-cc-toolbar__filters,
.classroom-center-class-page #classroom-center-class-toolbar .md-lc-dash--filters-only {
  margin: 0;
  padding: 0 12px 8px;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

.classroom-center-class-page #classroom-center-class-toolbar .md-lc-dash--filters-only .md-lc-dash__body {
  gap: 0;
  padding: 0;
}

.classroom-center-class-page .md-lc-dash--filters-only .md-lc-filters {
  display: grid;
  gap: 8px;
  width: 100%;
  grid-template-columns: 1fr 1fr;
}

.classroom-center-class-page .md-lc-dash--filters-only .md-lc-filters__field {
  position: relative;
  display: block;
  gap: 0;
  min-width: 0;
  margin: 0;
}

.classroom-center-class-page .md-lc-dash--filters-only .md-lc-filters__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.classroom-center-class-page .md-lc-dash--filters-only .md-lc-filters__control {
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
}

.classroom-center-class-page .md-lc-dash--filters-only .md-lc-filters__select {
  display: block;
  width: 100%;
  min-height: 42px;
  height: 42px;
  margin: 0;
  padding: 8px 32px 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 12px;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.14) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-family: "Jost", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 8px rgba(3, 20, 48, 0.18);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.classroom-center-class-page .md-lc-dash--filters-only .md-lc-filters__field + .md-lc-filters__field .md-lc-filters__select {
  border-color: rgba(255, 224, 178, 0.45);
  background:
    linear-gradient(165deg, rgba(255, 236, 210, 0.38) 0%, rgba(255, 204, 128, 0.16) 100%);
  color: #fff8e7;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 225, 0.4),
    0 2px 8px rgba(3, 20, 48, 0.16);
}

.classroom-center-class-page .md-lc-dash--filters-only .md-lc-filters__select:hover,
.classroom-center-class-page .md-lc-dash--filters-only .md-lc-filters__select:focus {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.2) 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 3px rgba(255, 255, 255, 0.16),
    0 4px 14px rgba(3, 20, 48, 0.22);
  transform: translateY(-1px);
}

.classroom-center-class-page .md-lc-dash--filters-only .md-lc-filters__field + .md-lc-filters__field .md-lc-filters__select:hover,
.classroom-center-class-page .md-lc-dash--filters-only .md-lc-filters__field + .md-lc-filters__field .md-lc-filters__select:focus {
  background:
    linear-gradient(165deg, rgba(255, 243, 224, 0.5) 0%, rgba(255, 183, 77, 0.22) 100%);
  color: #fff8e7;
  border-color: rgba(255, 224, 178, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 225, 0.55),
    0 0 0 3px rgba(255, 183, 77, 0.2),
    0 4px 14px rgba(3, 20, 48, 0.2);
}

.classroom-center-class-page .md-lc-dash--filters-only .md-lc-filters__icon {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.85);
}

.classroom-center-class-page .md-lc-dash--filters-only .md-lc-filters__field + .md-lc-filters__field .md-lc-filters__icon {
  color: rgba(255, 236, 179, 0.95);
}

@media (max-width: 380px) {
  .classroom-center-class-page .md-lc-dash--filters-only .md-lc-filters__select {
    font-size: 0.6875rem;
    padding: 8px 28px 8px 10px;
  }
}

#classroom-center-class-toolbar.md-cc-toolbar,
#student-list-toolbar.md-sl-toolbar,
#assessment-class-toolbar.md-assess-toolbar,
#attendance-classlist-toolbar.md-att-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Shared Class Center tabs strip — matches student-list toolbar popout */
#classroom-center-class-toolbar .md-cc-tabs,
#student-list-toolbar .md-cc-tabs,
#assessment-class-toolbar .md-cc-tabs,
#attendance-classlist-toolbar .md-cc-tabs {
  position: relative;
  top: auto;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 6px 6px 12px;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  overflow: visible;
  overflow-x: auto;
  gap: 2px;
}

#classroom-center-class-toolbar .md-cc-tabs:hover,
#student-list-toolbar .md-cc-tabs:hover,
#assessment-class-toolbar .md-cc-tabs:hover,
#attendance-classlist-toolbar .md-cc-tabs:hover {
  box-shadow: none !important;
}

/* Active icon pop-out (MUI NavigationBar) — same on classroom + student list */
#classroom-center-class-toolbar .md-cc-tabs__item.is-active .md-cc-tabs__icon,
#student-list-toolbar .md-cc-tabs__item.is-active .md-cc-tabs__icon,
#assessment-class-toolbar .md-cc-tabs__item.is-active .md-cc-tabs__icon,
#attendance-classlist-toolbar .md-cc-tabs__item.is-active .md-cc-tabs__icon {
  background: #d2e3fc;
  color: #0d47a1;
  box-shadow:
    0 1px 2px rgba(13, 71, 161, 0.12),
    0 2px 6px rgba(25, 118, 210, 0.18);
  transform: translateY(-1px);
}

#classroom-center-class-toolbar .md-cc-tabs__item.is-active .md-cc-tabs__label,
#student-list-toolbar .md-cc-tabs__item.is-active .md-cc-tabs__label,
#assessment-class-toolbar .md-cc-tabs__item.is-active .md-cc-tabs__label,
#attendance-classlist-toolbar .md-cc-tabs__item.is-active .md-cc-tabs__label {
  font-weight: 700;
  color: #0d47a1;
}

/* Class Center tabs — glass rail on navy wash */
#classroom-center-class-toolbar .md-cc-tabs,
#student-list-toolbar .md-cc-tabs,
#assessment-class-toolbar .md-cc-tabs,
#attendance-classlist-toolbar .md-cc-tabs {
  padding: 8px 8px 14px;
  border-top: 1px solid rgba(255, 236, 179, 0.18);
  background: transparent;
}

#classroom-center-class-toolbar .md-cc-tabs__item,
#student-list-toolbar .md-cc-tabs__item,
#assessment-class-toolbar .md-cc-tabs__item,
#attendance-classlist-toolbar .md-cc-tabs__item {
  color: rgba(255, 255, 255, 0.7);
}

#classroom-center-class-toolbar .md-cc-tabs__item .md-cc-tabs__icon,
#student-list-toolbar .md-cc-tabs__item .md-cc-tabs__icon,
#assessment-class-toolbar .md-cc-tabs__item .md-cc-tabs__icon,
#attendance-classlist-toolbar .md-cc-tabs__item .md-cc-tabs__icon {
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid transparent;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

#classroom-center-class-toolbar .md-cc-tabs__item:hover,
#student-list-toolbar .md-cc-tabs__item:hover,
#assessment-class-toolbar .md-cc-tabs__item:hover,
#attendance-classlist-toolbar .md-cc-tabs__item:hover {
  color: #fff8e7;
}

#classroom-center-class-toolbar .md-cc-tabs__item:hover .md-cc-tabs__icon,
#student-list-toolbar .md-cc-tabs__item:hover .md-cc-tabs__icon,
#assessment-class-toolbar .md-cc-tabs__item:hover .md-cc-tabs__icon,
#attendance-classlist-toolbar .md-cc-tabs__item:hover .md-cc-tabs__icon {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

#classroom-center-class-toolbar .md-cc-tabs__item.is-active .md-cc-tabs__label,
#student-list-toolbar .md-cc-tabs__item.is-active .md-cc-tabs__label,
#assessment-class-toolbar .md-cc-tabs__item.is-active .md-cc-tabs__label,
#attendance-classlist-toolbar .md-cc-tabs__item.is-active .md-cc-tabs__label {
  color: #fff8e7;
  text-shadow: 0 1px 2px rgba(3, 20, 48, 0.25);
}

#classroom-center-class-toolbar .md-cc-tabs__item.is-active .md-cc-tabs__icon,
#student-list-toolbar .md-cc-tabs__item.is-active .md-cc-tabs__icon,
#assessment-class-toolbar .md-cc-tabs__item.is-active .md-cc-tabs__icon,
#attendance-classlist-toolbar .md-cc-tabs__item.is-active .md-cc-tabs__icon {
  background: linear-gradient(165deg, #fffdf7 0%, #ffe0b2 100%);
  border-color: rgba(255, 224, 178, 0.65);
  color: #5d4037;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 2px 10px rgba(255, 183, 77, 0.28),
    0 0 16px rgba(255, 183, 77, 0.18);
  transform: translateY(-1px);
}

#classroom-center-class-toolbar .md-cc-tabs__item--overview.is-active .md-cc-tabs__label,
#student-list-toolbar .md-cc-tabs__item--overview.is-active .md-cc-tabs__label,
#assessment-class-toolbar .md-cc-tabs__item--overview.is-active .md-cc-tabs__label,
#attendance-classlist-toolbar .md-cc-tabs__item--overview.is-active .md-cc-tabs__label,
#classroom-center-class-toolbar .md-cc-tabs__item--insights.is-active .md-cc-tabs__label,
#student-list-toolbar .md-cc-tabs__item--insights.is-active .md-cc-tabs__label,
#assessment-class-toolbar .md-cc-tabs__item--insights.is-active .md-cc-tabs__label,
#attendance-classlist-toolbar .md-cc-tabs__item--insights.is-active .md-cc-tabs__label,
#classroom-center-class-toolbar .md-cc-tabs__item--students.is-active .md-cc-tabs__label,
#student-list-toolbar .md-cc-tabs__item--students.is-active .md-cc-tabs__label,
#assessment-class-toolbar .md-cc-tabs__item--students.is-active .md-cc-tabs__label,
#attendance-classlist-toolbar .md-cc-tabs__item--students.is-active .md-cc-tabs__label,
#classroom-center-class-toolbar .md-cc-tabs__item--assess.is-active .md-cc-tabs__label,
#student-list-toolbar .md-cc-tabs__item--assess.is-active .md-cc-tabs__label,
#assessment-class-toolbar .md-cc-tabs__item--assess.is-active .md-cc-tabs__label,
#attendance-classlist-toolbar .md-cc-tabs__item--assess.is-active .md-cc-tabs__label,
#classroom-center-class-toolbar .md-cc-tabs__item--attendance.is-active .md-cc-tabs__label,
#student-list-toolbar .md-cc-tabs__item--attendance.is-active .md-cc-tabs__label,
#assessment-class-toolbar .md-cc-tabs__item--attendance.is-active .md-cc-tabs__label,
#attendance-classlist-toolbar .md-cc-tabs__item--attendance.is-active .md-cc-tabs__label {
  color: #fff8e7;
}

#classroom-center-class-toolbar .md-cc-tabs__item--overview.is-active .md-cc-tabs__icon,
#student-list-toolbar .md-cc-tabs__item--overview.is-active .md-cc-tabs__icon,
#assessment-class-toolbar .md-cc-tabs__item--overview.is-active .md-cc-tabs__icon,
#attendance-classlist-toolbar .md-cc-tabs__item--overview.is-active .md-cc-tabs__icon {
  background: linear-gradient(165deg, #fffdf7 0%, #ffe0b2 100%);
  color: #5d4037;
}

#classroom-center-class-toolbar .md-cc-tabs__item--insights:hover,
#student-list-toolbar .md-cc-tabs__item--insights:hover,
#assessment-class-toolbar .md-cc-tabs__item--insights:hover,
#attendance-classlist-toolbar .md-cc-tabs__item--insights:hover,
#classroom-center-class-toolbar .md-cc-tabs__item--insights.is-active,
#student-list-toolbar .md-cc-tabs__item--insights.is-active,
#assessment-class-toolbar .md-cc-tabs__item--insights.is-active,
#attendance-classlist-toolbar .md-cc-tabs__item--insights.is-active {
  color: #ffe0b2;
}

#classroom-center-class-toolbar .md-cc-tabs__item--insights:hover .md-cc-tabs__icon,
#student-list-toolbar .md-cc-tabs__item--insights:hover .md-cc-tabs__icon,
#assessment-class-toolbar .md-cc-tabs__item--insights:hover .md-cc-tabs__icon,
#attendance-classlist-toolbar .md-cc-tabs__item--insights:hover .md-cc-tabs__icon,
#classroom-center-class-toolbar .md-cc-tabs__item--insights.is-active .md-cc-tabs__icon,
#student-list-toolbar .md-cc-tabs__item--insights.is-active .md-cc-tabs__icon,
#assessment-class-toolbar .md-cc-tabs__item--insights.is-active .md-cc-tabs__icon,
#attendance-classlist-toolbar .md-cc-tabs__item--insights.is-active .md-cc-tabs__icon {
  background: linear-gradient(165deg, #fff3e0 0%, #ffcc80 100%);
  border-color: rgba(255, 183, 77, 0.55);
  color: #e65100;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 10px rgba(239, 108, 0, 0.28),
    0 0 16px rgba(239, 108, 0, 0.16);
}

#classroom-center-class-toolbar .md-cc-tabs__item--students:hover,
#student-list-toolbar .md-cc-tabs__item--students:hover,
#assessment-class-toolbar .md-cc-tabs__item--students:hover,
#attendance-classlist-toolbar .md-cc-tabs__item--students:hover,
#classroom-center-class-toolbar .md-cc-tabs__item--students.is-active,
#student-list-toolbar .md-cc-tabs__item--students.is-active,
#assessment-class-toolbar .md-cc-tabs__item--students.is-active,
#attendance-classlist-toolbar .md-cc-tabs__item--students.is-active {
  color: #e1f5fe;
}

#classroom-center-class-toolbar .md-cc-tabs__item--students:hover .md-cc-tabs__icon,
#student-list-toolbar .md-cc-tabs__item--students:hover .md-cc-tabs__icon,
#assessment-class-toolbar .md-cc-tabs__item--students:hover .md-cc-tabs__icon,
#attendance-classlist-toolbar .md-cc-tabs__item--students:hover .md-cc-tabs__icon,
#classroom-center-class-toolbar .md-cc-tabs__item--students.is-active .md-cc-tabs__icon,
#student-list-toolbar .md-cc-tabs__item--students.is-active .md-cc-tabs__icon,
#assessment-class-toolbar .md-cc-tabs__item--students.is-active .md-cc-tabs__icon,
#attendance-classlist-toolbar .md-cc-tabs__item--students.is-active .md-cc-tabs__icon {
  background: linear-gradient(165deg, #e1f5fe 0%, #81d4fa 100%);
  border-color: rgba(3, 169, 244, 0.45);
  color: #01579b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 10px rgba(3, 169, 244, 0.25),
    0 0 16px rgba(3, 169, 244, 0.14);
}

#classroom-center-class-toolbar .md-cc-tabs__item--assess:hover,
#student-list-toolbar .md-cc-tabs__item--assess:hover,
#assessment-class-toolbar .md-cc-tabs__item--assess:hover,
#attendance-classlist-toolbar .md-cc-tabs__item--assess:hover,
#classroom-center-class-toolbar .md-cc-tabs__item--assess.is-active,
#student-list-toolbar .md-cc-tabs__item--assess.is-active,
#assessment-class-toolbar .md-cc-tabs__item--assess.is-active,
#attendance-classlist-toolbar .md-cc-tabs__item--assess.is-active {
  color: #e8eaf6;
}

#classroom-center-class-toolbar .md-cc-tabs__item--assess:hover .md-cc-tabs__icon,
#student-list-toolbar .md-cc-tabs__item--assess:hover .md-cc-tabs__icon,
#assessment-class-toolbar .md-cc-tabs__item--assess:hover .md-cc-tabs__icon,
#attendance-classlist-toolbar .md-cc-tabs__item--assess:hover .md-cc-tabs__icon,
#classroom-center-class-toolbar .md-cc-tabs__item--assess.is-active .md-cc-tabs__icon,
#student-list-toolbar .md-cc-tabs__item--assess.is-active .md-cc-tabs__icon,
#assessment-class-toolbar .md-cc-tabs__item--assess.is-active .md-cc-tabs__icon,
#attendance-classlist-toolbar .md-cc-tabs__item--assess.is-active .md-cc-tabs__icon {
  background: linear-gradient(165deg, #e8eaf6 0%, #9fa8da 100%);
  border-color: rgba(92, 107, 192, 0.45);
  color: #283593;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 10px rgba(57, 73, 171, 0.22),
    0 0 16px rgba(57, 73, 171, 0.12);
}

#classroom-center-class-toolbar .md-cc-tabs__item--attendance:hover,
#student-list-toolbar .md-cc-tabs__item--attendance:hover,
#assessment-class-toolbar .md-cc-tabs__item--attendance:hover,
#attendance-classlist-toolbar .md-cc-tabs__item--attendance:hover,
#classroom-center-class-toolbar .md-cc-tabs__item--attendance.is-active,
#student-list-toolbar .md-cc-tabs__item--attendance.is-active,
#assessment-class-toolbar .md-cc-tabs__item--attendance.is-active,
#attendance-classlist-toolbar .md-cc-tabs__item--attendance.is-active {
  color: #e0f2f1;
}

#classroom-center-class-toolbar .md-cc-tabs__item--attendance:hover .md-cc-tabs__icon,
#student-list-toolbar .md-cc-tabs__item--attendance:hover .md-cc-tabs__icon,
#assessment-class-toolbar .md-cc-tabs__item--attendance:hover .md-cc-tabs__icon,
#attendance-classlist-toolbar .md-cc-tabs__item--attendance:hover .md-cc-tabs__icon,
#classroom-center-class-toolbar .md-cc-tabs__item--attendance.is-active .md-cc-tabs__icon,
#student-list-toolbar .md-cc-tabs__item--attendance.is-active .md-cc-tabs__icon,
#assessment-class-toolbar .md-cc-tabs__item--attendance.is-active .md-cc-tabs__icon,
#attendance-classlist-toolbar .md-cc-tabs__item--attendance.is-active .md-cc-tabs__icon {
  background: linear-gradient(165deg, #e0f2f1 0%, #80cbc4 100%);
  border-color: rgba(0, 150, 136, 0.4);
  color: #004d40;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 10px rgba(0, 150, 136, 0.22),
    0 0 16px rgba(0, 150, 136, 0.12);
}

#classroom-center-class-toolbar .md-cc-tabs.md-animate-in,
#student-list-toolbar .md-cc-tabs.md-animate-in,
#assessment-class-toolbar .md-cc-tabs.md-animate-in,
#attendance-classlist-toolbar .md-cc-tabs.md-animate-in {
  animation: none;
  opacity: 1;
  transform: none;
}

#classroom-center-class-toolbar .md-cc-tabs__item.md-ripple,
#student-list-toolbar .md-cc-tabs__item.md-ripple,
#assessment-class-toolbar .md-cc-tabs__item.md-ripple,
#attendance-classlist-toolbar .md-cc-tabs__item.md-ripple {
  overflow: visible;
}

.classroom-center-class-page .md-cc-toolbar__brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.classroom-center-class-page .md-cc-toolbar__back,
.classroom-center-class-page .md-cc-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 12px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.1) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.classroom-center-class-page .md-cc-toolbar__back:hover,
.classroom-center-class-page .md-cc-toolbar__back:focus-visible,
.classroom-center-class-page .md-cc-toolbar__reload:hover,
.classroom-center-class-page .md-cc-toolbar__reload:focus-visible {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.18) 100%);
  border-color: rgba(255, 255, 255, 0.55);
  outline: none;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 10px rgba(3, 20, 48, 0.2);
  transform: translateY(-1px);
}

.classroom-center-class-page .md-cc-toolbar__context {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.classroom-center-class-page .md-cc-toolbar__overline {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 236, 179, 0.88);
  line-height: 1.2;
}

.classroom-center-class-page .md-cc-toolbar__title {
  margin: 0;
  min-width: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(3, 20, 48, 0.25);
}

/* Shared Class Center blue wash — Students / Assess / Attend match Overview */
.student-list-page #student-list-toolbar.md-sl-toolbar,
.assessment-class-page #assessment-class-toolbar.md-assess-toolbar,
.attendance-classlist-page #attendance-classlist-toolbar.md-att-toolbar {
  --cc-tb-blue: #0d47a1;
  --cc-tb-blue-deep: #062a5e;
  --cc-tb-blue-mid: #093a7d;
  position: relative;
  isolation: isolate;
  border-bottom: none !important;
  background:
    linear-gradient(
      180deg,
      #1565c0 0%,
      var(--cc-tb-blue) 32%,
      var(--cc-tb-blue-mid) 68%,
      var(--cc-tb-blue-deep) 100%
    ) !important;
  box-shadow:
    0 2px 10px rgba(6, 42, 94, 0.28),
    0 1px 2px rgba(15, 23, 42, 0.1) !important;
}

/* Soft light sheen + glow across Class Center toolbars */
.classroom-center-class-page #classroom-center-class-toolbar.md-cc-toolbar::before,
.student-list-page #student-list-toolbar.md-sl-toolbar::before,
.assessment-class-page #assessment-class-toolbar.md-assess-toolbar::before,
.attendance-classlist-page #attendance-classlist-toolbar.md-att-toolbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 38%,
      rgba(255, 255, 255, 0.16) 50%,
      transparent 62%,
      transparent 100%
    );
  background-size: 220% 100%;
  animation: md-cc-tb-sheen 8s ease-in-out infinite;
}

.classroom-center-class-page #classroom-center-class-toolbar.md-cc-toolbar::after,
.student-list-page #student-list-toolbar.md-sl-toolbar::after,
.assessment-class-page #assessment-class-toolbar.md-assess-toolbar::after,
.attendance-classlist-page #attendance-classlist-toolbar.md-att-toolbar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 12% -8%, rgba(255, 255, 255, 0.2), transparent 42%),
    radial-gradient(90% 55% at 88% 112%, rgba(66, 165, 245, 0.28), transparent 48%);
  animation: md-cc-tb-glow 6.5s ease-in-out infinite alternate;
}

.classroom-center-class-page #classroom-center-class-toolbar.md-cc-toolbar > *,
.student-list-page #student-list-toolbar.md-sl-toolbar > *,
.assessment-class-page #assessment-class-toolbar.md-assess-toolbar > *,
.attendance-classlist-page #attendance-classlist-toolbar.md-att-toolbar > * {
  position: relative;
  z-index: 1;
}

@keyframes md-cc-tb-sheen {
  0% { background-position: 120% 0; opacity: 0.55; }
  45% { opacity: 0.95; }
  100% { background-position: -40% 0; opacity: 0.55; }
}

@keyframes md-cc-tb-glow {
  0% { opacity: 0.65; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .classroom-center-class-page #classroom-center-class-toolbar.md-cc-toolbar::before,
  .student-list-page #student-list-toolbar.md-sl-toolbar::before,
  .assessment-class-page #assessment-class-toolbar.md-assess-toolbar::before,
  .attendance-classlist-page #attendance-classlist-toolbar.md-att-toolbar::before,
  .classroom-center-class-page #classroom-center-class-toolbar.md-cc-toolbar::after,
  .student-list-page #student-list-toolbar.md-sl-toolbar::after,
  .assessment-class-page #assessment-class-toolbar.md-assess-toolbar::after,
  .attendance-classlist-page #attendance-classlist-toolbar.md-att-toolbar::after {
    animation: none;
  }
}

.student-list-page #student-list-toolbar .md-sl-toolbar__inner,
.assessment-class-page #assessment-class-toolbar .md-assess-toolbar__inner,
.attendance-classlist-page #attendance-classlist-toolbar .md-att-toolbar__inner {
  background: transparent;
}

.student-list-page #student-list-toolbar .md-sl-toolbar__back,
.student-list-page #student-list-toolbar .md-sl-toolbar__reload,
.assessment-class-page #assessment-class-toolbar .md-assess-toolbar__back,
.assessment-class-page #assessment-class-toolbar .md-assess-toolbar__reload,
.attendance-classlist-page #attendance-classlist-toolbar .md-att-toolbar__back,
.attendance-classlist-page #attendance-classlist-toolbar .md-att-toolbar__reload {
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 12px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.1) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #fff;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.student-list-page #student-list-toolbar .md-sl-toolbar__back:hover,
.student-list-page #student-list-toolbar .md-sl-toolbar__back:focus-visible,
.student-list-page #student-list-toolbar .md-sl-toolbar__reload:hover,
.student-list-page #student-list-toolbar .md-sl-toolbar__reload:focus-visible,
.assessment-class-page #assessment-class-toolbar .md-assess-toolbar__back:hover,
.assessment-class-page #assessment-class-toolbar .md-assess-toolbar__back:focus-visible,
.assessment-class-page #assessment-class-toolbar .md-assess-toolbar__reload:hover,
.assessment-class-page #assessment-class-toolbar .md-assess-toolbar__reload:focus-visible,
.attendance-classlist-page #attendance-classlist-toolbar .md-att-toolbar__back:hover,
.attendance-classlist-page #attendance-classlist-toolbar .md-att-toolbar__back:focus-visible,
.attendance-classlist-page #attendance-classlist-toolbar .md-att-toolbar__reload:hover,
.attendance-classlist-page #attendance-classlist-toolbar .md-att-toolbar__reload:focus-visible {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.18) 100%);
  border-color: rgba(255, 255, 255, 0.55);
  outline: none;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 10px rgba(3, 20, 48, 0.2);
  transform: translateY(-1px);
}

.student-list-page #student-list-toolbar .md-sl-toolbar__overline,
.assessment-class-page #assessment-class-toolbar .md-assess-toolbar__overline,
.attendance-classlist-page #attendance-classlist-toolbar .md-att-toolbar__overline {
  color: rgba(255, 236, 179, 0.88);
}

.student-list-page #student-list-toolbar .md-sl-toolbar__title,
.student-list-page #student-list-toolbar .md-sl-toolbar__heading .md-sl-toolbar__title,
.assessment-class-page #assessment-class-toolbar .md-assess-toolbar__title,
.assessment-class-page #assessment-class-toolbar .md-assess-toolbar__heading .md-assess-toolbar__title,
.attendance-classlist-page #attendance-classlist-toolbar .md-att-toolbar__title,
.attendance-classlist-page #attendance-classlist-toolbar .md-att-toolbar__heading .md-att-toolbar__title {
  color: #fff;
  text-shadow: 0 1px 2px rgba(3, 20, 48, 0.25);
}

.student-list-page #student-list-toolbar .md-sl-toolbar__actions .md-btn-contained,
.assessment-class-page #assessment-class-toolbar .md-assess-toolbar__actions .md-btn-contained,
.attendance-classlist-page #attendance-classlist-toolbar .md-att-toolbar__actions .md-btn-contained {
  border: 1px solid rgba(255, 224, 178, 0.55);
  border-radius: 12px;
  background:
    linear-gradient(165deg, #fff8e7 0%, #ffe0b2 100%);
  color: #5d4037;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 8px rgba(3, 20, 48, 0.18);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.student-list-page #student-list-toolbar .md-sl-toolbar__actions .md-btn-contained:hover,
.student-list-page #student-list-toolbar .md-sl-toolbar__actions .md-btn-contained:focus-visible,
.assessment-class-page #assessment-class-toolbar .md-assess-toolbar__actions .md-btn-contained:hover,
.assessment-class-page #assessment-class-toolbar .md-assess-toolbar__actions .md-btn-contained:focus-visible,
.attendance-classlist-page #attendance-classlist-toolbar .md-att-toolbar__actions .md-btn-contained:hover,
.attendance-classlist-page #attendance-classlist-toolbar .md-att-toolbar__actions .md-btn-contained:focus-visible {
  background:
    linear-gradient(165deg, #fffdf7 0%, #ffcc80 100%);
  border-color: rgba(255, 204, 128, 0.85);
  color: #4e342e;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 0 0 3px rgba(255, 183, 77, 0.22),
    0 4px 14px rgba(3, 20, 48, 0.22);
  transform: translateY(-1px);
}

.student-list-page #student-list-toolbar .md-sl-toolbar__actions .md-btn-contained--tonal,
.student-list-page #student-list-toolbar .md-sl-toolbar__actions .md-btn-contained--success,
.assessment-class-page #assessment-class-toolbar .md-assess-toolbar__actions .md-btn-contained--tonal,
.attendance-classlist-page #attendance-classlist-toolbar .md-att-toolbar__actions .md-btn-contained--tonal {
  border-color: rgba(255, 255, 255, 0.42);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.16) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 8px rgba(3, 20, 48, 0.16);
}

.student-list-page #student-list-toolbar .md-sl-toolbar__actions .md-btn-contained--tonal:hover,
.student-list-page #student-list-toolbar .md-sl-toolbar__actions .md-btn-contained--tonal:focus-visible,
.student-list-page #student-list-toolbar .md-sl-toolbar__actions .md-btn-contained--success:hover,
.student-list-page #student-list-toolbar .md-sl-toolbar__actions .md-btn-contained--success:focus-visible,
.assessment-class-page #assessment-class-toolbar .md-assess-toolbar__actions .md-btn-contained--tonal:hover,
.assessment-class-page #assessment-class-toolbar .md-assess-toolbar__actions .md-btn-contained--tonal:focus-visible {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.24) 100%);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 3px rgba(255, 255, 255, 0.16),
    0 4px 14px rgba(3, 20, 48, 0.2);
  transform: translateY(-1px);
}

.student-list-page #student-list-toolbar .md-sl-toolbar__actions .md-btn-contained--tonal:hover,
.student-list-page #student-list-toolbar .md-sl-toolbar__actions .md-btn-contained--tonal:focus-visible,
.student-list-page #student-list-toolbar .md-sl-toolbar__actions .md-btn-contained--success:hover,
.student-list-page #student-list-toolbar .md-sl-toolbar__actions .md-btn-contained--success:focus-visible,
.assessment-class-page #assessment-class-toolbar .md-assess-toolbar__actions .md-btn-contained--tonal:hover,
.assessment-class-page #assessment-class-toolbar .md-assess-toolbar__actions .md-btn-contained--tonal:focus-visible {
  background: #e8f4ff;
  border-color: rgba(255, 255, 255, 0.65);
  color: #0d47a1;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}


.classroom-center-page .md-cc-arm-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}

.classroom-center-page .md-cc-arm-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--lc-accent-soft, #e8f0fe);
  color: var(--lc-accent, #1a73e8);
  font-size: 1.125rem;
  flex-shrink: 0;
}

.classroom-center-page .md-cc-arm-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.classroom-center-page .md-cc-arm-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 10px;
  background: #f8fafc;
  text-align: center;
}

.classroom-center-page .md-cc-arm-stat--alert {
  background: #fce8e6;
}

.classroom-center-page .md-cc-arm-stat__value {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--lc-accent-deep, #0d47a1);
}

.classroom-center-page .md-cc-arm-stat--alert .md-cc-arm-stat__value {
  color: var(--lc-needs, #d93025);
}

.classroom-center-page .md-cc-arm-stat__label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-text-secondary, #5f6368);
}

.classroom-center-page .md-cc-enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  text-decoration: none;
}

.md-cc-tabs {
  position: sticky;
  top: var(--md-cc-tabs-sticky-top, 108px);
  z-index: 90;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: none;
  margin: 10px 0 18px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--tl-card-border, #c0c4c8);
  background: var(--mui-surface, #fff);
  box-shadow: var(--mui-elevation-2) !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.2s ease;
}

.md-cc-tabs:hover {
  box-shadow:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important; /* MUI elevation 4 */
}

.student-list-page .md-cc-tabs,
.classroom-center-class-page .md-cc-tabs,
.assessment-class-page .md-cc-tabs,
.attendance-classlist-page .md-cc-tabs {
  /* tabs mount inside the fixed page toolbar */
  top: auto;
}

.md-cc-tabs::-webkit-scrollbar {
  display: none;
}

.md-cc-tabs__item {
  flex: 1 1 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 56px;
  padding: 4px 2px 2px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #5f6368;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  transition: color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

/* MUI NavigationBar-style pop-out indicator behind the icon */
.md-cc-tabs__icon {
  position: relative;
  z-index: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 28px;
  border-radius: 14px;
  background: transparent;
  color: #5f6368;
  font-size: 0.875rem;
  line-height: 1;
  transition:
    background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-cc-tabs__item--overview .md-cc-tabs__icon,
.md-cc-tabs__item--insights .md-cc-tabs__icon,
.md-cc-tabs__item--students .md-cc-tabs__icon,
.md-cc-tabs__item--assess .md-cc-tabs__icon,
.md-cc-tabs__item--attendance .md-cc-tabs__icon {
  background: transparent;
  color: #5f6368;
}

.md-cc-tabs__label {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
  font-weight: 500;
}

.md-cc-tabs__item:hover {
  color: #1565c0;
  background: transparent;
}

.md-cc-tabs__item:hover .md-cc-tabs__icon {
  background: rgba(25, 118, 210, 0.08);
  color: #1565c0;
  box-shadow: none;
  transform: none;
}

.md-cc-tabs__item:focus-visible {
  outline: 2px solid var(--lc-accent, #1a73e8);
  outline-offset: 1px;
  border-radius: 12px;
}

.md-cc-tabs__item.is-active {
  color: #0d47a1;
  font-weight: 700;
  background: transparent;
  box-shadow: none;
}

.md-cc-tabs__item.is-active .md-cc-tabs__icon {
  background: #d2e3fc;
  color: #0d47a1;
  box-shadow:
    0 1px 2px rgba(13, 71, 161, 0.12),
    0 2px 6px rgba(25, 118, 210, 0.18);
  transform: translateY(-1px);
}

.md-cc-tabs__item.is-active .md-cc-tabs__label {
  font-weight: 700;
  color: #0d47a1;
}

.md-cc-tabs__item.is-active:hover {
  color: #0d47a1;
  background: transparent;
}

.md-cc-tabs__item.is-active:hover .md-cc-tabs__icon {
  background: #c2d7f7;
  color: #0d47a1;
  box-shadow:
    0 1px 3px rgba(13, 71, 161, 0.14),
    0 3px 8px rgba(25, 118, 210, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .md-cc-tabs__item,
  .md-cc-tabs__icon {
    transition: none;
  }

  .md-cc-tabs__item.is-active .md-cc-tabs__icon {
    transform: none;
  }
}

.classroom-center-page .md-cc-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 12px;
}

.classroom-center-page .md-cc-kpi {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--cc-card-border) !important;
  border-radius: var(--cc-card-radius);
  background: #fff;
  box-shadow: none !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.classroom-center-page .md-cc-kpi:hover,
.classroom-center-page .md-cc-kpi:focus-visible {
  border-color: #9aa0a6;
  background: #f8f9fa;
  box-shadow: none;
  transform: none;
  outline: none;
}

.classroom-center-page .md-cc-kpi__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.54);
  font-size: 0.875rem;
}

.classroom-center-page .md-cc-kpi--students .md-cc-kpi__icon,
.classroom-center-page .md-cc-kpi--records .md-cc-kpi__icon,
.classroom-center-page .md-cc-kpi--attendance .md-cc-kpi__icon {
  background: rgba(25, 118, 210, 0.1);
  color: #1565c0;
}

.classroom-center-page .md-cc-kpi--attention .md-cc-kpi__icon {
  background: #fdecea;
  color: #c62828;
}

.classroom-center-page .md-cc-kpi--alert {
  border-color: var(--cc-card-border);
  background: #fff;
}

.classroom-center-page .md-cc-kpi--alert .md-cc-kpi__icon {
  background: #fdecea;
  color: #c62828;
}

.classroom-center-page .md-cc-kpi__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.classroom-center-page .md-cc-kpi__label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}

.classroom-center-page .md-cc-kpi__value {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: rgba(0, 0, 0, 0.87);
  line-height: 1.15;
}

.classroom-center-page .md-cc-kpi--attendance .md-cc-kpi__value {
  color: rgba(0, 0, 0, 0.87);
}

.classroom-center-page .md-cc-kpi--alert .md-cc-kpi__value {
  color: #c62828;
}

.classroom-center-page .md-cc-kpi__sub {
  font-size: 0.6875rem;
  color: rgba(0, 0, 0, 0.6);
}

@media (max-width: 560px) {
  .classroom-center-page .md-cc-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin: 0 0 10px;
    padding: 5px;
    border-radius: var(--cc-card-radius);
    border: 1px solid var(--cc-card-border);
    background: #fff;
    box-shadow: none;
  }

  .classroom-center-page .md-cc-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 8px 2px 7px;
    border-radius: 8px;
    border: 1px solid transparent !important;
    background: #f8f9fa;
    box-shadow: none !important;
    text-align: center;
    transform: none;
  }

  .classroom-center-page .md-cc-kpi:hover,
  .classroom-center-page .md-cc-kpi:focus-visible {
    transform: none;
    border-color: #9aa0a6 !important;
    background: #f1f3f4;
    box-shadow: none;
  }

  .classroom-center-page .md-cc-kpi__icon {
    display: none;
  }

  .classroom-center-page .md-cc-kpi__body {
    align-items: center;
    gap: 1px;
    width: 100%;
  }

  .classroom-center-page .md-cc-kpi__label {
    order: 2;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.15;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .classroom-center-page .md-cc-kpi__value {
    order: 1;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }

  .classroom-center-page .md-cc-kpi__sub {
    display: none;
  }

  .classroom-center-page .md-cc-kpi--attendance .md-cc-kpi__value {
    color: rgba(0, 0, 0, 0.87);
  }

  .classroom-center-page .md-cc-kpi--alert {
    background: #fdecea;
    border-color: transparent;
  }

  .classroom-center-page .md-cc-kpi--alert:hover,
  .classroom-center-page .md-cc-kpi--alert:focus-visible {
    background: #f9dedc;
    border-color: rgba(198, 40, 40, 0.25);
  }

  .classroom-center-page .md-cc-kpi--alert .md-cc-kpi__value {
    color: #c62828;
  }
}

@media (max-width: 360px) {
  .classroom-center-page .md-cc-kpi-grid {
    gap: 3px;
    padding: 4px;
  }

  .classroom-center-page .md-cc-kpi {
    padding: 7px 1px 6px;
  }

  .classroom-center-page .md-cc-kpi__value {
    font-size: 0.9375rem;
  }

  .classroom-center-page .md-cc-kpi__label {
    font-size: 0.5rem;
    letter-spacing: 0;
  }
}

.classroom-center-page .md-cc-panel {
  margin: 0 0 10px;
  padding: 16px;
  border: 1px solid var(--cc-card-border) !important;
  border-radius: var(--cc-card-radius);
  background: #fff;
  box-shadow: none !important;
}

/* Shared section cards — timeline border + raised surface */
.classroom-center-page .md-cc-panel--attention,
.classroom-center-page .md-cc-panel--assess,
.classroom-center-page .md-cc-panel--attendance,
.classroom-center-page .md-cc-panel--comms,
.classroom-center-page .md-cc-panel--eot {
  --cc-panel-head-bg: #f7f9fc;
  position: relative;
  overflow: hidden;
  margin: 0 0 14px;
  padding: 0;
  border-radius: var(--cc-card-radius, 12px) !important;
  border: 1px solid var(--cc-card-border, #c0c4c8) !important;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 12px rgba(15, 23, 42, 0.08) !important;
  transition: box-shadow 0.2s ease, border-color 0.15s ease;
}

.classroom-center-page .md-cc-panel--attention:hover,
.classroom-center-page .md-cc-panel--assess:hover,
.classroom-center-page .md-cc-panel--attendance:hover,
.classroom-center-page .md-cc-panel--comms:hover,
.classroom-center-page .md-cc-panel--eot:hover {
  border-color: #9aa0a6 !important;
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.08),
    0 8px 18px rgba(15, 23, 42, 0.12) !important;
  transform: none;
}

.classroom-center-page .md-cc-panel--attention::before,
.classroom-center-page .md-cc-panel--assess::before,
.classroom-center-page .md-cc-panel--attendance::before,
.classroom-center-page .md-cc-panel--comms::before,
.classroom-center-page .md-cc-panel--eot::before {
  display: none;
}

.classroom-center-page .md-cc-panel--attention .md-cc-panel__head,
.classroom-center-page .md-cc-panel--attendance .md-cc-panel__head,
.classroom-center-page .md-cc-panel--comms .md-cc-panel__head,
.classroom-center-page .md-cc-panel--assess .md-cc-assess__head,
.classroom-center-page .md-cc-panel--eot .md-cc-eot__head {
  margin: 0;
  margin-bottom: 0;
  padding: 12px 16px 10px;
  background: var(--cc-panel-head-bg);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.classroom-center-page .md-cc-panel--attention .md-cc-panel__icon,
.classroom-center-page .md-cc-panel--attendance .md-cc-panel__icon,
.classroom-center-page .md-cc-panel--comms .md-cc-panel__icon,
.classroom-center-page .md-cc-panel--assess .md-cc-assess__icon,
.classroom-center-page .md-cc-panel--eot .md-cc-eot__icon,
.classroom-center-page .md-cc-panel--eot .md-cc-panel__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(25, 118, 210, 0.1);
  color: #1565c0;
  border: none;
  box-shadow: none;
}

.classroom-center-page .md-cc-panel--attention .md-cc-panel__icon {
  background: #fdecea;
  color: #c62828;
}

.classroom-center-page .md-cc-panel--attention .md-cc-panel__title,
.classroom-center-page .md-cc-panel--attendance .md-cc-panel__title,
.classroom-center-page .md-cc-panel--comms .md-cc-panel__title,
.classroom-center-page .md-cc-panel--assess .md-cc-assess__title,
.classroom-center-page .md-cc-panel--eot .md-cc-eot__title {
  color: rgba(0, 0, 0, 0.87);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.classroom-center-page .md-cc-panel--attention .md-cc-panel__eyebrow,
.classroom-center-page .md-cc-panel--attendance .md-cc-panel__eyebrow,
.classroom-center-page .md-cc-panel--comms .md-cc-panel__eyebrow,
.classroom-center-page .md-cc-panel--assess .md-cc-assess__eyebrow,
.classroom-center-page .md-cc-panel--eot .md-cc-eot__eyebrow {
  color: rgba(0, 0, 0, 0.6);
  font-weight: 500;
}

.classroom-center-page .md-cc-panel--attention .md-chip.md-lc-status--needs,
.classroom-center-page .md-cc-panel--attention .md-lc-status--needs {
  background: #fdecea;
  color: #c62828;
  border: none;
  font-weight: 700;
  border-radius: 16px;
  min-width: 28px;
  justify-content: center;
}

.classroom-center-page .md-cc-panel--assess .md-cc-assess__status,
.classroom-center-page .md-cc-panel--eot .md-cc-eot__badge {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.87);
  border: none;
  font-weight: 700;
}

.classroom-center-page .md-cc-panel--assess .md-cc-assess__status--pending {
  background: rgba(237, 108, 2, 0.12);
  color: #ed6c02;
  border: none;
}

.classroom-center-page .md-cc-panel--attention .md-cc-panel__empty,
.classroom-center-page .md-cc-panel--attendance .md-cc-panel__empty,
.classroom-center-page .md-cc-panel--comms .md-cc-panel__empty {
  margin: 0;
  padding: 12px 0 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.6);
}

.classroom-center-page .md-cc-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  border-radius: 0;
  background: transparent;
  border: none;
  overflow: visible;
}

.classroom-center-page .md-cc-breakdown__item,
.classroom-center-page .md-cc-breakdown__item--low_attendance,
.classroom-center-page .md-cc-breakdown__item--incomplete_record,
.classroom-center-page .md-cc-breakdown__item--declining,
.classroom-center-page .md-cc-breakdown__item--poor_performance,
.classroom-center-page .md-cc-breakdown__item--assessment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-radius: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}

.classroom-center-page .md-cc-breakdown__item:last-child {
  border-bottom: none;
}

.classroom-center-page a.md-cc-breakdown__item:hover,
.classroom-center-page a.md-cc-breakdown__item:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

.classroom-center-page .md-cc-breakdown__item + .md-cc-breakdown__item {
  border-radius: 0;
}

.classroom-center-page .md-cc-panel--attention,
.classroom-center-page .md-cc-panel--attendance,
.classroom-center-page .md-cc-panel--comms {
  display: flex;
  flex-direction: column;
}

.classroom-center-page .md-cc-panel--attention > :not(.md-cc-panel__head),
.classroom-center-page .md-cc-panel--comms > :not(.md-cc-panel__head) {
  margin-left: 16px;
  margin-right: 16px;
}

.classroom-center-page .md-cc-panel--attention > .md-cc-panel__head + *,
.classroom-center-page .md-cc-panel--comms > .md-cc-panel__head + * {
  margin-top: 12px;
}

.classroom-center-page .md-cc-panel--attention > :last-child,
.classroom-center-page .md-cc-panel--comms > :last-child {
  margin-bottom: 16px;
}

.classroom-center-page .md-cc-panel--attention .md-cc-breakdown,
.classroom-center-page .md-cc-panel--comms .md-cc-comm {
  margin-top: 12px;
}

.classroom-center-page .md-cc-assess {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 16px;
}

.classroom-center-page .md-cc-assess__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.classroom-center-page .md-cc-assess__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(25, 118, 210, 0.1);
  border: none;
  color: #1565c0;
  font-size: 0.9375rem;
  box-shadow: none;
}

.classroom-center-page .md-cc-assess__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.classroom-center-page .md-cc-assess__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.87);
}

.classroom-center-page .md-cc-assess__eyebrow {
  margin: 2px 0 0;
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.3;
}

.classroom-center-page .md-cc-assess__status {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 16px;
  background: rgba(46, 125, 50, 0.12);
  border: none;
  color: #2e7d32;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

.classroom-center-page .md-cc-assess__status--pending {
  color: #ed6c02;
  border: none;
  background: rgba(237, 108, 2, 0.12);
}

.classroom-center-page .md-cc-assess__body,
.classroom-center-page .md-cc-assess__empty-card {
  margin-left: 16px;
  margin-right: 16px;
}

.classroom-center-page .md-cc-assess__body {
  margin-top: 12px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
}

.classroom-center-page .md-cc-assess__summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f7f9fc;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.classroom-center-page .md-cc-assess__name {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(0, 0, 0, 0.87);
  line-height: 1.35;
}

.classroom-center-page .md-cc-assess__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.classroom-center-page .md-cc-assess__chip,
.classroom-center-page .md-cc-assess__chip--rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.06);
  border: none;
  color: rgba(0, 0, 0, 0.7);
  font-size: 0.6875rem;
  font-weight: 600;
}

.classroom-center-page .md-cc-assess__chip--rating {
  background: rgba(25, 118, 210, 0.1);
  border: none;
  color: #1565c0;
}

.classroom-center-page .md-cc-assess__chip i {
  font-size: 0.625rem;
  opacity: 0.8;
}

.classroom-center-page .md-cc-assess__empty-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 12px;
  padding: 14px;
  border-radius: 12px;
  background: #f7f9fc;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.classroom-center-page .md-cc-assess__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: rgba(25, 118, 210, 0.1);
  color: #1565c0;
  font-size: 0.875rem;
}

.classroom-center-page .md-cc-assess__empty-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.87);
}

.classroom-center-page .md-cc-assess__empty-hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.6);
}

.classroom-center-page .md-cc-assess .md-cc-panel__links {
  margin: 12px 16px 0;
}

.classroom-center-page .md-cc-panel--assess,
.classroom-center-page .md-cc-panel--eot {
  padding: 0;
}

.classroom-center-page .md-cc-eot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 0 16px;
}

.classroom-center-page .md-cc-eot__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

.classroom-center-page .md-cc-eot__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(25, 118, 210, 0.1);
  border: none;
  color: #1565c0;
  font-size: 0.9375rem;
  box-shadow: none;
}

.classroom-center-page .md-cc-eot__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.classroom-center-page .md-cc-eot__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.87);
}

.classroom-center-page .md-cc-eot__eyebrow {
  margin: 2px 0 0;
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.3;
}

.classroom-center-page .md-cc-eot__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 32px;
  padding: 0 10px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.06);
  border: none;
  color: rgba(0, 0, 0, 0.87);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.classroom-center-page .md-cc-eot__progress {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.classroom-center-page .md-cc-eot__progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1976d2;
  min-width: 0;
  transition: width 0.35s ease;
}

.classroom-center-page .md-cc-eot__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.classroom-center-page .md-cc-eot__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 6px;
  text-align: center;
}

.classroom-center-page .md-cc-eot__stat + .md-cc-eot__stat {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.classroom-center-page .md-cc-eot__stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: rgba(0, 0, 0, 0.87);
  line-height: 1.1;
}

.classroom-center-page .md-cc-eot__stat-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}

.classroom-center-page .md-cc-eot__empty {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  font-size: 0.8125rem;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.4;
}

.classroom-center-page .md-cc-eot__progress,
.classroom-center-page .md-cc-eot__stats,
.classroom-center-page .md-cc-eot__empty {
  margin-left: 16px;
  margin-right: 16px;
}

.classroom-center-page .md-cc-eot .md-cc-panel__links {
  margin: 0 16px;
}

.classroom-center-page .md-cc-panel__cta,
.classroom-center-page .md-cc-eot__cta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--cc-card-border);
  color: #1976d2;
  text-decoration: none;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.classroom-center-page .md-cc-panel__cta:hover,
.classroom-center-page .md-cc-panel__cta:focus-visible,
.classroom-center-page .md-cc-eot__cta:hover,
.classroom-center-page .md-cc-eot__cta:focus-visible {
  background: rgba(25, 118, 210, 0.06);
  border-color: #9aa0a6;
  color: #1565c0;
  box-shadow: none;
  outline: none;
}

.classroom-center-page .md-cc-panel__cta--secondary {
  color: rgba(0, 0, 0, 0.7);
  border-color: var(--cc-card-border);
}

.classroom-center-page .md-cc-panel__cta--secondary:hover,
.classroom-center-page .md-cc-panel__cta--secondary:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  border-color: #9aa0a6;
  color: rgba(0, 0, 0, 0.87);
}

.classroom-center-page .md-cc-panel__cta-copy,
.classroom-center-page .md-cc-eot__cta-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.classroom-center-page .md-cc-panel__cta-label,
.classroom-center-page .md-cc-eot__cta-label {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  color: inherit;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.classroom-center-page .md-cc-panel__cta-hint,
.classroom-center-page .md-cc-eot__cta-hint {
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
}

.classroom-center-page .md-cc-panel__cta > .fa,
.classroom-center-page .md-cc-eot__cta > .fa {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: inherit;
  opacity: 0.9;
}

.classroom-center-page .md-cc-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.classroom-center-page .md-cc-panel__head--link {
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.classroom-center-page .md-cc-panel__head--link:hover,
.classroom-center-page .md-cc-panel__head--link:focus-visible {
  outline: none;
  background: #f0f3f7;
}

.classroom-center-page .md-cc-panel__head-chevron {
  flex-shrink: 0;
  margin-left: 2px;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.4);
}

.classroom-center-page .md-cc-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(25, 118, 210, 0.1);
  color: #1565c0;
  border: none;
  box-shadow: none;
  font-size: 0.875rem;
}

.classroom-center-page .md-cc-panel__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.classroom-center-page .md-cc-panel__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.87);
}

.classroom-center-page .md-cc-panel__eyebrow {
  margin: 2px 0 0;
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.3;
}

.classroom-center-page .md-cc-panel__lead {
  margin: 0 0 4px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(0, 0, 0, 0.87);
}

.classroom-center-page .md-cc-panel__meta,
.classroom-center-page .md-cc-panel__empty {
  margin: 0 0 12px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  font-size: 0.8125rem;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.45;
}

.classroom-center-page .md-cc-panel__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  background: #fafbfc;
}

.classroom-center-page .md-cc-panel__links--single {
  grid-template-columns: 1fr;
}

.classroom-center-page .md-cc-panel__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--cc-card-border, #c0c4c8);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.classroom-center-page .md-cc-panel__link:hover,
.classroom-center-page .md-cc-panel__link:focus-visible {
  background: #f8fbff;
  border-color: #90caf9;
  box-shadow: 0 2px 6px rgba(21, 101, 192, 0.1);
  outline: none;
  color: inherit;
}

.classroom-center-page .md-cc-panel__link--insights {
  border-color: rgba(21, 101, 192, 0.28);
}

.classroom-center-page .md-cc-panel__link--records {
  border-color: rgba(230, 81, 0, 0.28);
}

.classroom-center-page .md-cc-panel__link--insights:hover,
.classroom-center-page .md-cc-panel__link--insights:focus-visible {
  border-color: #1565c0;
  background: #eef5ff;
}

.classroom-center-page .md-cc-panel__link--records:hover,
.classroom-center-page .md-cc-panel__link--records:focus-visible {
  border-color: #e65100;
  background: #fff8f1;
}

.classroom-center-page .md-cc-panel__link-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.8125rem;
}

.classroom-center-page .md-cc-panel__link--insights .md-cc-panel__link-icon {
  background: #e3f2fd;
  color: #1565c0;
}

.classroom-center-page .md-cc-panel__link--records .md-cc-panel__link-icon {
  background: #fff3e0;
  color: #e65100;
}

.classroom-center-page .md-cc-panel__link-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.classroom-center-page .md-cc-panel__link-label {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.87);
}

.classroom-center-page .md-cc-panel__link-hint {
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.25;
  color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.classroom-center-page .md-cc-panel__link-chev {
  flex-shrink: 0;
  font-size: 0.6875rem;
  color: rgba(0, 0, 0, 0.35);
}

.classroom-center-page .md-cc-panel__link--insights .md-cc-panel__link-chev {
  color: #1565c0;
}

.classroom-center-page .md-cc-panel__link--records .md-cc-panel__link-chev {
  color: #e65100;
}

.classroom-center-page .md-cc-panel__links .md-cc-panel__link {
  flex: unset;
  justify-content: flex-start;
}

@media (max-width: 360px) {
  .classroom-center-page .md-cc-panel__links {
    grid-template-columns: 1fr;
  }
}

.classroom-center-page .md-cc-panel__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.classroom-center-page .md-cc-panel__actions .md-btn-contained {
  min-height: 40px;
  border-radius: 12px;
  font-size: 0.8125rem;
  text-transform: none;
  justify-content: center;
}

.classroom-center-page .md-cc-panel__actions .md-btn-contained--tonal {
  background: rgba(25, 118, 210, 0.08) !important;
  color: #1565c0 !important;
  border: 1px solid var(--cc-card-border);
  box-shadow: none;
}

.classroom-center-page .md-cc-panel__actions .md-btn-contained--tonal:hover,
.classroom-center-page .md-cc-panel__actions .md-btn-contained--tonal:focus-visible {
  background: rgba(25, 118, 210, 0.12) !important;
  color: #0d47a1 !important;
}

.classroom-center-page .md-cc-breakdown__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  border: none;
  color: rgba(0, 0, 0, 0.54);
  font-size: 0.8125rem;
  box-shadow: none;
}

.classroom-center-page .md-cc-breakdown__item--low_attendance .md-cc-breakdown__icon,
.classroom-center-page .md-cc-breakdown__item--incomplete_record .md-cc-breakdown__icon,
.classroom-center-page .md-cc-breakdown__item--declining .md-cc-breakdown__icon,
.classroom-center-page .md-cc-breakdown__item--poor_performance .md-cc-breakdown__icon,
.classroom-center-page .md-cc-breakdown__item--assessment .md-cc-breakdown__icon {
  color: rgba(0, 0, 0, 0.54);
  border: none;
  background: rgba(0, 0, 0, 0.06);
}

.classroom-center-page .md-cc-breakdown__copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.classroom-center-page .md-cc-breakdown__label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(0, 0, 0, 0.87);
  line-height: 1.25;
}

.classroom-center-page .md-cc-breakdown__hint {
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.3;
}

.classroom-center-page .md-cc-breakdown__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
  min-height: 28px;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.87);
  border: none;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  box-shadow: none;
}

.classroom-center-page .md-cc-breakdown__item--low_attendance .md-cc-breakdown__count,
.classroom-center-page .md-cc-breakdown__item--incomplete_record .md-cc-breakdown__count,
.classroom-center-page .md-cc-breakdown__item--assessment .md-cc-breakdown__count {
  background: transparent;
  color: rgba(0, 0, 0, 0.87);
  border: none;
  box-shadow: none;
}

.classroom-center-page .md-cc-att {
  display: flex;
  flex-direction: column;
  padding: 0 0 16px;
}

.classroom-center-page .md-cc-att .md-cc-panel__head {
  margin-bottom: 0;
}

.classroom-center-page .md-cc-att__status {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 16px;
  border: none;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.classroom-center-page .md-cc-att__status--taken {
  background: rgba(46, 125, 50, 0.12);
  color: #2e7d32;
}

.classroom-center-page .md-cc-att__status--pending {
  background: rgba(237, 108, 2, 0.12);
  color: #ed6c02;
}

.classroom-center-page .md-cc-att-stats,
.classroom-center-page .md-cc-att__empty {
  margin-left: 16px;
  margin-right: 16px;
  margin-top: 12px;
}

.classroom-center-page .md-cc-att .md-cc-panel__links {
  margin: 12px 16px 0;
}

.classroom-center-page .md-cc-att-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.classroom-center-page .md-cc-att-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 10px 8px;
  border-radius: 12px;
  background: #f7f9fc;
  border: 1px solid rgba(15, 23, 42, 0.06);
  text-align: center;
}

.classroom-center-page .md-cc-att-stat__value {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: rgba(0, 0, 0, 0.87);
}

.classroom-center-page .md-cc-att-stat__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}

.classroom-center-page .md-cc-att-stat--present .md-cc-att-stat__value {
  color: #2e7d32;
}

.classroom-center-page .md-cc-att-stat--absent .md-cc-att-stat__value {
  color: #c62828;
}

.classroom-center-page .md-cc-att-stat--late .md-cc-att-stat__value {
  color: #ed6c02;
}

.classroom-center-page .md-cc-att__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  border-radius: 12px;
  background: #f7f9fc;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.classroom-center-page .md-cc-att__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: rgba(237, 108, 2, 0.12);
  color: #ed6c02;
  font-size: 0.875rem;
}

.classroom-center-page .md-cc-att__empty-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.87);
}

.classroom-center-page .md-cc-att__empty-hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.6);
}

/* legacy pills kept for safety if rendered elsewhere */
.classroom-center-page .md-cc-att-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.classroom-center-page .md-cc-att-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.87);
  background: #fff;
  border: 1px solid var(--cc-card-border);
}

.classroom-center-page .md-cc-att-pill strong {
  font-size: 0.9375rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgba(0, 0, 0, 0.87);
}

.classroom-center-page .md-cc-comm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.classroom-center-page .md-cc-comm__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--cc-card-border);
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.classroom-center-page a.md-cc-comm__item:hover,
.classroom-center-page a.md-cc-comm__item:focus-visible {
  border-color: #9aa0a6;
  background: #f8f9fa;
  box-shadow: none;
  outline: none;
}

.classroom-center-page .md-cc-comm__value {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--cc-blue-deep);
}

.classroom-center-page .md-cc-comm__label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--cc-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.classroom-center-page .md-cc-comm__meta {
  margin-top: 4px;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.25;
  color: rgba(0, 0, 0, 0.55);
  letter-spacing: 0.01em;
  text-transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .classroom-center-page .md-cc-kpi,
  .classroom-center-page .md-cc-panel__link {
    transition: none;
  }

  .classroom-center-page .md-cc-kpi:hover,
  .classroom-center-page .md-cc-kpi:focus-visible {
    transform: none;
  }
}

.classroom-center-page .md-cc-insight-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 10px;
}

.classroom-center-page .md-cc-band-legends,
.learners-center-page .md-cc-band-legends {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 10px;
}

.classroom-center-page .md-cc-band-legend,
.learners-center-page .md-cc-band-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(21, 101, 192, 0.12);
  background: #f8fbff;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: #5f6368;
}

.classroom-center-page .md-cc-band-legend--attendance,
.learners-center-page .md-cc-band-legend--attendance {
  border-color: rgba(19, 115, 51, 0.14);
  background: #f6fbf7;
}

.classroom-center-page .md-cc-band-legend__label,
.learners-center-page .md-cc-band-legend__label {
  font-weight: 700;
  color: #0d47a1;
  margin-right: 2px;
}

.classroom-center-page .md-cc-band-legend--attendance .md-cc-band-legend__label,
.learners-center-page .md-cc-band-legend--attendance .md-cc-band-legend__label {
  color: #137333;
}

.classroom-center-page .md-cc-band-legend__sep,
.learners-center-page .md-cc-band-legend__sep {
  color: #bdc1c6;
}

.classroom-center-page .md-cc-band-legend__item strong,
.learners-center-page .md-cc-band-legend__item strong {
  font-weight: 700;
  margin-right: 2px;
}

.classroom-center-page .md-cc-band-legend__item--strong strong,
.learners-center-page .md-cc-band-legend__item--strong strong { color: #137333; }
.classroom-center-page .md-cc-band-legend__item--good strong,
.learners-center-page .md-cc-band-legend__item--good strong { color: #0d47a1; }
.classroom-center-page .md-cc-band-legend__item--watch strong,
.learners-center-page .md-cc-band-legend__item--watch strong { color: #b06000; }
.classroom-center-page .md-cc-band-legend__item--needs strong,
.learners-center-page .md-cc-band-legend__item--needs strong { color: #c5221f; }

.classroom-center-page .md-cc-insight-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(21, 101, 192, 0.16);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.classroom-center-page .md-cc-insight-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  padding: 6px 4px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f8fbff;
  text-align: center;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.classroom-center-page .md-cc-insight-stat:hover {
  background: #eef5ff;
  border-color: rgba(26, 115, 232, 0.22);
}

.classroom-center-page .md-cc-insight-stat:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
}

.classroom-center-page .md-cc-insight-stat.is-active {
  background: #e3f2fd;
  border-color: #90caf9;
  box-shadow: inset 0 0 0 1px rgba(21, 101, 192, 0.08);
}

.classroom-center-page .md-cc-insight-stat.is-alert {
  background: #fce8e6;
}

.classroom-center-page .md-cc-insight-stat.is-alert.is-active {
  background: #fce8e6;
  border-color: #f6aea9;
}

.classroom-center-page .md-cc-insight-stat__value {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  color: var(--lc-accent-deep, #0d47a1);
}

.classroom-center-page .md-cc-insight-stat.is-alert .md-cc-insight-stat__value {
  color: var(--lc-needs, #d93025);
}

.classroom-center-page .md-cc-insight-stat__label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--md-text-secondary, #5f6368);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.classroom-center-page .md-cc-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.classroom-center-page .md-cc-search:focus-within {
  border-color: var(--lc-accent, #1a73e8);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.16);
}

.classroom-center-page .md-cc-search__icon {
  flex-shrink: 0;
  color: #80868b;
  font-size: 0.875rem;
}

.classroom-center-page .md-cc-search__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: #202124;
  line-height: 1.3;
}

.classroom-center-page .md-cc-search__input::placeholder {
  color: #9aa0a6;
  font-weight: 500;
}

.classroom-center-page #cc-insight-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.classroom-center-page .md-cc-insight-card {
  position: relative;
  margin: 0;
  padding: 10px 12px 10px 14px;
  border: 1px solid #c0c4c8 !important;
  border-radius: 12px !important;
  background: #fff;
  box-shadow: none !important;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.classroom-center-page .md-cc-insight-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--lc-pending, #9aa0a6);
}

.classroom-center-page .md-cc-insight-card--well::before { background: var(--lc-well, #188038); }
.classroom-center-page .md-cc-insight-card--watch::before { background: var(--lc-watch, #f9ab00); }
.classroom-center-page .md-cc-insight-card--needs::before { background: var(--lc-needs, #d93025); }
.classroom-center-page .md-cc-insight-card--pending::before { background: var(--lc-pending, #9aa0a6); }

.classroom-center-page .md-cc-insight-card:hover,
.classroom-center-page .md-cc-insight-card:focus-visible {
  border-color: rgba(26, 115, 232, 0.45) !important;
  background: #f8fbff;
  outline: none;
}

.classroom-center-page .md-cc-insight-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.classroom-center-page .md-cc-insight-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #e8eaed;
}

.classroom-center-page .md-cc-insight-card__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.classroom-center-page .md-cc-insight-card__name {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  color: #202124;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.classroom-center-page .md-cc-insight-card__identity .md-chip {
  font-size: 0.625rem;
  padding: 2px 8px;
  min-height: 0;
  line-height: 1.3;
}

.classroom-center-page .md-cc-insight-card__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.classroom-center-page .md-cc-insight-card .md-lc-grid {
  margin-top: 10px;
  padding-left: 0;
}

.classroom-center-page .md-cc-insight-card .md-lc-tile {
  min-height: 108px;
}

.timeline-page .md-cc-home-card .md-lc-home-card__icon {
  background: rgba(13, 71, 161, 0.12);
}


/* ── Unified blue modal headers (student_list + staff_list) ── */
#empty_modal .menu-title,
#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__header,
#admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__header,
#create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__header,
#employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__header,
#assign_student_to_subclass_modal.md-sl-assign-sheet .md-timeline-sheet__header {
  background:
    radial-gradient(ellipse 90% 140% at 100% -10%, rgba(255, 255, 255, 0.18), transparent 55%),
    linear-gradient(135deg, #0d47a1 0%, #1565c0 55%, #1976d2 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 10px rgba(13, 71, 161, 0.28);
}

#empty_modal .menu-title {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 18px 12px 16px 20px !important;
  color: #fff;
}

#empty_modal .menu-title > a.close-menu,
#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__close,
#admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__close,
#create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__close,
#employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__close,
#assign_student_to_subclass_modal.md-sl-assign-sheet .md-timeline-sheet__close {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

#empty_modal .menu-title > a.close-menu:hover,
#empty_modal .menu-title > a.close-menu:focus-visible,
#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__close:hover,
#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__close:focus-visible,
#admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__close:hover,
#admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__close:focus-visible,
#create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__close:hover,
#create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__close:focus-visible,
#employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__close:hover,
#employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__close:focus-visible,
#assign_student_to_subclass_modal.md-sl-assign-sheet .md-timeline-sheet__close:hover,
#assign_student_to_subclass_modal.md-sl-assign-sheet .md-timeline-sheet__close:focus-visible {
  background: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
}

#empty_modal .modal-title,
#empty_modal .modal-title p,
#empty_modal .modal-title h1,
#empty_modal .modal-title h2,
#empty_modal .modal-title h3,
#empty_modal .modal-title h4,
#empty_modal .modal-title .color-highlight,
#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__title,
#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__title.modal-title,
#admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__title,
#create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__title,
#employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__title,
#assign_student_to_subclass_modal.md-sl-assign-sheet .md-timeline-sheet__title {
  color: #ffffff !important;
}

#empty_modal .modal-title .md-sl-form-heading__overline,
#empty_modal .modal-title .md-passport-heading__overline,
#empty_modal .modal-title .md-profile-sheet-heading__overline,
#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__overline,
#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__title .md-sl-form-heading__overline,
#admit_student_modal.md-sl-admit-sheet .md-timeline-sheet__overline,
#create_parent_modal.md-sl-admit-sheet .md-timeline-sheet__overline,
#employ_staff_modal.md-sl-admit-sheet .md-timeline-sheet__overline,
#assign_student_to_subclass_modal.md-sl-assign-sheet .md-timeline-sheet__overline {
  color: rgba(255, 255, 255, 0.78) !important;
}

#empty_modal .modal-title .md-sl-form-heading__title,
#empty_modal .modal-title .md-passport-heading__title,
#empty_modal .modal-title .md-profile-sheet-heading__title,
#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__title .md-sl-form-heading__title,
#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__lead,
#fullEmptyModal.md-timeline-sheet .md-timeline-sheet__lead:not(:empty) {
  color: #ffffff !important;
}


/* ── zap-app: fpp-mobile-page (finance-parent-purchase-mobile.php) ── */
.fpp-mobile-page {
  --fpp-accent: #1976d2;
  --fpp-ink: #0d47a1;
  --fpp-soft: #e8f3fc;
  --fpp-ice: #f3f9fd;
  --fpp-line: rgba(25, 118, 210, 0.12);
}

.fpp-mobile-page.fpop-mobile-page .fpp-mobile-feed.page-content,
.fpp-mobile-page .fpp-mobile-feed.page-content {
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
}

body.fpp-cart-open .fpp-mobile-page .fpp-mobile-feed.page-content {
  padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Ward picker — compact toolbar strip */
.fpp-mobile-page .fpp-m-ward {
  position: relative;
  margin: 0;
  padding: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
  color: inherit;
}

.fpp-mobile-page .fpp-m-ward__glow {
  display: none;
}

.fpp-mobile-page .fpp-m-ward--toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--fpp-soft, #e8f3fc);
  border: 1px solid rgba(25, 118, 210, 0.12);
  box-sizing: border-box;
}

.fpp-mobile-page .fpp-m-ward--toolbar .fpp-m-ward__label {
  position: static;
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fpp-ink, #0d47a1);
  line-height: 1.2;
  white-space: nowrap;
}

.fpp-mobile-page .fpp-m-ward--toolbar .fpp-m-ward__field {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
}

.fpp-mobile-page .fpp-m-ward--toolbar .fpp-m-ward__select {
  display: block;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 6px 28px 6px 10px;
  border: 1px solid rgba(25, 118, 210, 0.18);
  border-radius: 9px;
  background: #fff;
  color: var(--fpp-ink, #0d47a1);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.fpp-mobile-page .fpp-m-ward--toolbar .fpp-m-ward__select:focus {
  outline: none;
  border-color: rgba(25, 118, 210, 0.45);
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.12);
}

.fpp-mobile-page .fpp-m-ward--toolbar .fpp-m-ward__select:disabled {
  cursor: default;
  opacity: 1;
  color: var(--fpp-ink, #0d47a1);
  background: #fff;
}

.fpp-mobile-page .fpp-m-ward--toolbar .fpp-m-ward__chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgba(25, 118, 210, 0.7);
  font-size: 0.625rem;
  line-height: 1;
}

.fpp-mobile-page .fpp-m-ward--toolbar .fpp-m-ward__select:disabled + .fpp-m-ward__chevron {
  opacity: 0.35;
}

.fpp-mobile-page .md-fpop-toolbar__inner {
  gap: 8px;
}

/* Search */
.fpp-mobile-page .fpp-m-search.md-search-field,
.fpp-mobile-page .md-search-field--fpp {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0 14px;
  min-height: 46px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--fpp-line);
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.04);
}

.fpp-mobile-page .fpp-m-search > i {
  color: rgba(25, 118, 210, 0.55);
  font-size: 0.85rem;
}

.fpp-mobile-page .fpp-m-search .form-control {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 10px 0;
  font-family: inherit;
  font-size: 0.9375rem;
  color: #202124;
}

.fpp-mobile-page .fpp-m-search .form-control:focus {
  outline: none;
  box-shadow: none;
}

/* Catalogue groups */
.fpp-mobile-page .fpp-m-catalogue {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fpp-mobile-page .fpp-m-cat {
  margin: 0;
  padding: 0;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(25, 118, 210, 0.1);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(13, 71, 161, 0.04);
}

.fpp-mobile-page .fpp-m-cat__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  background: transparent;
  border-bottom: 1px solid rgba(32, 33, 36, 0.06);
}

.fpp-mobile-page .fpp-m-cat__head::before {
  display: none;
}

.fpp-mobile-page .fpp-m-cat__kicker {
  display: none;
}

.fpp-mobile-page .fpp-m-cat__name {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fpp-ink);
}

.fpp-mobile-page .fpp-m-cat__count {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #80868b;
  white-space: nowrap;
}

.fpp-mobile-page .fpp-m-cat__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: #eef5fc;
}

.fpp-mobile-page .fpp-m-row {
  margin: 0;
  padding: 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(25, 118, 210, 0.1);
  background: #eef5fc;
  box-shadow: none;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
}

.fpp-mobile-page .fpp-m-row + .fpp-m-row {
  border-radius: 0;
  margin-top: 0;
}

.fpp-mobile-page .fpp-m-row:first-child,
.fpp-mobile-page .fpp-m-row:last-child {
  border-radius: 0;
}

.fpp-mobile-page .fpp-m-row:last-child {
  border-bottom: none;
}

/* Idle — soft light blue */
.fpp-mobile-page .fpp-m-row:not(.is-on-slip) .fpp-m-row__name {
  color: #0d47a1;
  font-weight: 700;
}

.fpp-mobile-page .fpp-m-row:not(.is-on-slip) .fpp-m-row__price {
  color: #1565c0;
}

.fpp-mobile-page .fpp-m-row:not(.is-on-slip) .fpp-m-row__media {
  background: rgba(255, 255, 255, 0.72);
  border-right-color: rgba(25, 118, 210, 0.14);
}

.fpp-mobile-page .fpp-m-row:not(.is-on-slip) .fpp-m-row__icon {
  background: #fff;
  border: 1px solid rgba(25, 118, 210, 0.18);
  color: #1976d2;
  box-shadow: none;
}

.fpp-mobile-page .fpp-m-row:not(.is-on-slip) .fpp-m-row__icon--bundle {
  background: #fff;
  border-color: rgba(14, 165, 233, 0.22);
  color: #0284c7;
}

.fpp-mobile-page .fpp-m-row:not(.is-on-slip) .fpp-m-qty {
  background: #fff;
  border-color: rgba(25, 118, 210, 0.18);
}

.fpp-mobile-page .fpp-m-row:not(.is-on-slip) .fpp-m-qty__btn {
  color: #1565c0;
}

.fpp-mobile-page .fpp-m-row:not(.is-on-slip) .fpp-m-qty__val {
  color: #0d47a1;
  border-color: rgba(25, 118, 210, 0.1);
}

/* Selected — deeper light blue */
.fpp-mobile-page .fpp-m-row.is-on-slip {
  background: #d4e6fa;
  border-color: rgba(25, 118, 210, 0.22);
  box-shadow: inset 0 0 0 1px rgba(25, 118, 210, 0.06);
  padding: 0;
  margin: 0;
  border-radius: 0;
  position: relative;
}

.fpp-mobile-page .fpp-m-row.is-on-slip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0;
  background: linear-gradient(180deg, #42a5f5 0%, #1565c0 100%);
  z-index: 1;
}

.fpp-mobile-page .fpp-m-row.is-on-slip + .fpp-m-row {
  border-top-color: rgba(25, 118, 210, 0.12);
}

.fpp-mobile-page .fpp-m-row__main {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 100%;
}

.fpp-mobile-page .fpp-m-row__media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: stretch;
  width: 48px;
  min-height: 100%;
  padding: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.55);
  border: none;
  border-right: 1px solid rgba(25, 118, 210, 0.12);
  box-sizing: border-box;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.fpp-mobile-page .fpp-m-row.is-on-slip .fpp-m-row__media {
  background: rgba(255, 255, 255, 0.78);
  border-right-color: rgba(25, 118, 210, 0.2);
  box-shadow: none;
}

.fpp-mobile-page .fpp-m-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: 9px;
  background: #fff;
  border: 1px solid rgba(25, 118, 210, 0.18);
  color: #1976d2;
  font-size: 0.875rem;
  line-height: 1;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.fpp-mobile-page .fpp-m-row__icon--bundle {
  background: #fff;
  border-color: rgba(14, 165, 233, 0.22);
  color: #0284c7;
}

.fpp-mobile-page .fpp-m-row.is-on-slip .fpp-m-row__icon {
  background: linear-gradient(145deg, #42a5f5 0%, #1565c0 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 10px rgba(25, 118, 210, 0.28);
}

.fpp-mobile-page .fpp-m-row.is-on-slip .fpp-m-row__icon--bundle {
  background: linear-gradient(145deg, #38bdf8 0%, #0284c7 100%);
  color: #fff;
}

.fpp-mobile-page .fpp-m-row__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
}

.fpp-mobile-page .fpp-m-row__name {
  margin: 0;
  width: 100%;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #0d47a1;
  word-break: break-word;
}

.fpp-mobile-page .fpp-m-row.is-on-slip .fpp-m-row__name {
  color: #0d47a1;
  font-weight: 800;
}

.fpp-mobile-page .fpp-m-row__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fpp-mobile-page .fpp-m-row__info {
  flex: 1 1 auto;
  min-width: 0;
}

.fpp-mobile-page .fpp-m-row__sub {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.fpp-mobile-page .fpp-m-row__price {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #1565c0;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.fpp-mobile-page .fpp-m-row.is-on-slip .fpp-m-row__price {
  color: #1565c0;
}

.fpp-mobile-page .fpp-m-kind {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  background: rgba(25, 118, 210, 0.1);
  color: #1565c0;
}

.fpp-mobile-page .fpp-m-row.is-on-slip .fpp-m-kind,
.fpp-mobile-page .fpp-m-kind--bundle {
  background: rgba(25, 118, 210, 0.16);
  color: #1565c0;
}

.fpp-mobile-page .fpp-m-line {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: #0d47a1;
  background: rgba(255, 255, 255, 0.72);
  padding: 1px 6px;
  border-radius: 6px;
  letter-spacing: -0.01em;
  line-height: 1.35;
  white-space: nowrap;
}

.fpp-mobile-page .fpp-m-qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  border-radius: 9px;
  border: 1px solid rgba(25, 118, 210, 0.2);
  background: #fff;
  overflow: hidden;
}

.fpp-mobile-page .fpp-m-row.is-on-slip .fpp-m-qty {
  background: #fff;
  border-color: rgba(25, 118, 210, 0.4);
  box-shadow: 0 1px 3px rgba(13, 71, 161, 0.08);
}

.fpp-mobile-page .fpp-m-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: #1565c0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fpp-mobile-page .fpp-m-row.is-on-slip .fpp-m-qty__btn {
  color: #1976d2;
}

.fpp-mobile-page .fpp-m-qty__btn:active {
  background: rgba(25, 118, 210, 0.1);
}

.fpp-mobile-page .fpp-m-qty__val {
  width: 1.85rem;
  height: 28px;
  margin: 0;
  padding: 0;
  border: none;
  border-left: 1px solid rgba(25, 118, 210, 0.12);
  border-right: 1px solid rgba(25, 118, 210, 0.12);
  background: transparent;
  text-align: center;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: #0d47a1;
}

.fpp-mobile-page .fpp-m-row.is-on-slip .fpp-m-qty__val {
  color: #0d47a1;
  border-left-color: rgba(25, 118, 210, 0.2);
  border-right-color: rgba(25, 118, 210, 0.2);
}

.fpp-mobile-page .fpp-m-qty__val:focus {
  outline: none;
  background: #e3f2fd;
}

.fpp-mobile-page .fpp-m-qty__val::-webkit-outer-spin-button,
.fpp-mobile-page .fpp-m-qty__val::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.fpp-mobile-page .fpp-m-line[hidden] {
  display: none !important;
}

/* Cart dock — compact amount + Cart CTA */
.fpp-mobile-page .fpp-m-bar,
body.fpp-mobile-app > .fpp-m-bar {
  --fpp-dock-fab-clear: calc(16px + 52px + 14px);
  position: fixed;
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, calc(var(--fpp-dock-fab-clear) + env(safe-area-inset-right, 0px)));
  bottom: calc(70px + env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 95;
  max-width: 420px;
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 18px;
  border: 1px solid rgba(25, 118, 210, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(232, 243, 252, 0.96) 100%);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow:
    0 10px 28px rgba(13, 71, 161, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.75) inset;
  font-family: var(--md-font, "Jost", sans-serif);
}

html.is-webview .fpp-mobile-page .fpp-m-bar,
html.is-webview body.fpp-mobile-app > .fpp-m-bar,
body.is-webview .fpp-mobile-page .fpp-m-bar,
body.is-webview.fpp-mobile-app > .fpp-m-bar {
  bottom: calc(70px + 10px);
  right: max(12px, var(--fpp-dock-fab-clear));
}

.fpp-mobile-page .fpp-m-bar[hidden],
body.fpp-mobile-app > .fpp-m-bar[hidden],
body.fpp-on-drafts .fpp-mobile-page .fpp-m-bar,
body.fpp-on-drafts.fpp-mobile-app > .fpp-m-bar {
  display: none !important;
}

.fpp-mobile-page .fpp-m-bar__inner,
body.fpp-mobile-app > .fpp-m-bar .fpp-m-bar__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.fpp-mobile-page .fpp-m-bar__copy,
body.fpp-mobile-app > .fpp-m-bar .fpp-m-bar__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.fpp-mobile-page .fpp-m-bar__total,
body.fpp-mobile-app > .fpp-m-bar .fpp-m-bar__total {
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #c62828;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fpp-mobile-page .fpp-m-bar__count,
body.fpp-mobile-app > .fpp-m-bar .fpp-m-bar__count {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #5f6368;
  line-height: 1.2;
  white-space: nowrap;
}

.fpp-mobile-page .fpp-m-bar__cart,
body.fpp-mobile-app > .fpp-m-bar .fpp-m-bar__cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 42px;
  margin: 0;
  padding: 0 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
  color: #fff;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(13, 71, 161, 0.28);
  -webkit-tap-highlight-color: transparent;
}

.fpp-mobile-page .fpp-m-bar__cart:active,
body.fpp-mobile-app > .fpp-m-bar .fpp-m-bar__cart:active {
  box-shadow: 0 1px 4px rgba(13, 71, 161, 0.22);
}

.fpp-mobile-page .fpp-m-bar__cart i,
body.fpp-mobile-app > .fpp-m-bar .fpp-m-bar__cart i {
  font-size: 0.8125rem;
  line-height: 1;
}

.fpp-mobile-page .fpp-m-bar__warn,
body.fpp-mobile-app > .fpp-m-bar .fpp-m-bar__warn {
  margin: 6px 0 0;
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1.25;
  color: #b45309;
}

.fpp-mobile-page .fpp-m-bar__warn[hidden],
body.fpp-mobile-app > .fpp-m-bar .fpp-m-bar__warn[hidden] {
  display: none !important;
}


/* Drafts */
.fpp-mobile-page .fpp-m-drafts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fpp-mobile-page .fpp-m-draft {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 18px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(25, 118, 210, 0.12);
  box-shadow: 0 1px 3px rgba(13, 71, 161, 0.05);
}

.fpp-mobile-page .fpp-m-draft__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.fpp-mobile-page .fpp-m-draft__ward {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #202124;
  line-height: 1.25;
}

.fpp-mobile-page .fpp-m-draft__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #5f6368;
  line-height: 1.35;
}

.fpp-mobile-page .fpp-m-draft__no {
  color: #1565c0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fpp-mobile-page .fpp-m-draft__sep {
  color: #c5c9ce;
}

.fpp-mobile-page .fpp-m-draft__date {
  color: #80868b;
  font-weight: 550;
}

.fpp-mobile-page .fpp-m-draft__school {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #80868b;
  line-height: 1.35;
}

.fpp-mobile-page .fpp-m-draft__amt {
  margin: 0;
  padding-top: 2px;
  font-size: 1.375rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #0d47a1;
}

.fpp-mobile-page .fpp-m-draft__acts {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding-top: 2px;
}

.fpp-mobile-page .fpp-m-draft__open,
.fpp-mobile-page .fpp-m-draft__cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fpp-mobile-page .fpp-m-draft__open {
  background: #1976d2;
  color: #fff;
}

.fpp-mobile-page .fpp-m-draft__open:active {
  background: #1565c0;
}

.fpp-mobile-page .fpp-m-draft__cancel {
  background: transparent;
  color: #c62828;
  border-color: rgba(198, 40, 40, 0.2);
  min-width: 96px;
}

.fpp-mobile-page .fpp-m-draft__cancel:active {
  background: #fff5f5;
}

.fpp-mobile-page .fpp-m-search-empty {
  padding: 1.25rem 1rem;
  text-align: center;
}

/* Cart modal — sheet */
#fpp-cart-modal {
  --fpp-accent: #1976d2;
  --fpp-ink: #0d47a1;
  --fpp-soft: #e8f3fc;
  --fpp-ice: #f3f9fd;
  --fpp-line: rgba(25, 118, 210, 0.12);
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

html.fpp-cart-modal-open,
html.fpp-cart-modal-open body,
body.fpp-cart-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
}

body.fpp-cart-modal-open {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

#fpp-cart-modal .fpp-cart-dialog,
#fpp-cart-modal .fpp-cart-sheet,
#fpp-cart-modal .fpp-cart-body,
#fpp-cart-modal .modal-body {
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

#fpp-cart-modal .fpp-cart-dialog {
  margin: 0 auto;
  max-width: 480px;
}

@media (max-width: 575.98px) {
  #fpp-cart-modal .fpp-cart-dialog {
    margin: 0;
    max-width: none;
    height: 100%;
  }

  #fpp-cart-modal .fpp-cart-dialog .modal-content {
    border-radius: 0;
    min-height: 100%;
  }
}

#fpp-cart-modal .fpp-cart-sheet {
  border: none;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #f3f9fd 0%, #f7f9fc 28%, #ffffff 100%);
  box-shadow: 0 18px 48px rgba(13, 71, 161, 0.18);
}

#fpp-cart-modal .fpp-cart-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  padding: 12px 14px 12px;
  border-bottom: 1px solid rgba(13, 71, 161, 0.28);
  background:
    linear-gradient(145deg, #0d47a1 0%, #1565c0 48%, #1976d2 100%);
  color: #fff;
}

#fpp-cart-modal .fpp-cart-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#fpp-cart-modal .fpp-cart-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#fpp-cart-modal .fpp-cart-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.875rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

#fpp-cart-modal .fpp-cart-header__copy {
  min-width: 0;
}

#fpp-cart-modal .fpp-cart-header .modal-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #fff;
}

#fpp-cart-modal .fpp-cart-header__sub {
  margin: 2px 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#fpp-cart-modal .fpp-cart-header__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#fpp-cart-modal .fpp-cart-header__close:active {
  background: rgba(255, 255, 255, 0.28);
}

#fpp-cart-modal .fpp-cart-header__email {
  width: 100%;
  min-width: 0;
}

#fpp-cart-modal .fpp-cart-body {
  padding: 10px 0 0;
  background:
    linear-gradient(180deg, #eef5fb 0%, #f7fafc 40%, #ffffff 100%);
}

#fpp-cart-modal .fpp-cart-lines {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(25, 118, 210, 0.12);
  background: #fff;
  box-shadow: 0 1px 3px rgba(13, 71, 161, 0.05);
  overflow: hidden;
}

#fpp-cart-modal .fpp-cart-line {
  margin: 0;
  padding: 10px 12px;
  border: none;
  border-radius: 0;
  border-left: 3px solid #1976d2;
  background: #fff;
  box-shadow: none;
}

#fpp-cart-modal .fpp-cart-line + .fpp-cart-line {
  border-top: 1px solid rgba(25, 118, 210, 0.08);
}

#fpp-cart-modal .fpp-cart-line__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

#fpp-cart-modal .fpp-cart-line__top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

#fpp-cart-modal .fpp-cart-line__info {
  flex: 1 1 auto;
  min-width: 0;
}

#fpp-cart-modal .fpp-cart-line__name {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #1a237e;
  text-transform: uppercase;
}

#fpp-cart-modal .fpp-cart-line__unit {
  margin: 2px 0 0;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.25;
  color: #78909c;
}

#fpp-cart-modal .fpp-cart-line__ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#fpp-cart-modal .fpp-cart-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(198, 40, 40, 0.16);
  border-radius: 9px;
  background: #fff5f5;
  color: #c62828;
  font-size: 0.8125rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#fpp-cart-modal .fpp-cart-remove > i {
  display: block;
  position: relative;
  z-index: 1;
  font-size: inherit;
  line-height: 1;
  color: inherit;
  pointer-events: none;
}

#fpp-cart-modal .fpp-cart-remove:active {
  background: #ffebee;
  color: #b71c1c;
}

#fpp-cart-modal .fpp-cart-line__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#fpp-cart-modal .fpp-cart-line__amt {
  flex: 0 0 auto;
  font-size: 0.875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: #0d47a1;
  line-height: 1.2;
}

#fpp-cart-modal .fpp-m-qty {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0;
  border-radius: 999px;
  background: #f3f8fd;
  border: 1px solid rgba(25, 118, 210, 0.18);
  overflow: hidden;
}

#fpp-cart-modal .fpp-m-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #1565c0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#fpp-cart-modal .fpp-m-qty__btn:active {
  background: #e3eef9;
}

#fpp-cart-modal .fpp-m-qty__val {
  width: 28px;
  min-width: 28px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: none;
  border-left: 1px solid rgba(25, 118, 210, 0.1);
  border-right: 1px solid rgba(25, 118, 210, 0.1);
  background: #fff;
  text-align: center;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #0d47a1;
  line-height: 30px;
  -moz-appearance: textfield;
}

#fpp-cart-modal .fpp-m-qty__val:focus {
  outline: none;
  background: #f8fbff;
}

#fpp-cart-modal .fpp-m-qty__val::-webkit-outer-spin-button,
#fpp-cart-modal .fpp-m-qty__val::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#fpp-cart-modal .fpp-cart-summary {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(25, 118, 210, 0.16);
  background:
    linear-gradient(135deg, rgba(232, 243, 252, 0.95) 0%, #ffffff 70%);
}

#fpp-cart-modal .fpp-cart-summary--footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 14px 8px;
  border-radius: 0;
  border: none;
  width: 100%;
  max-width: none;
  align-self: stretch;
  flex: 0 0 auto;
  box-sizing: border-box;
  background:
    linear-gradient(180deg, #0d47a1 0%, #1565c0 100%);
  color: #fff;
}

#fpp-cart-modal .fpp-cart-summary__due {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

#fpp-cart-modal .fpp-cart-summary__label {
  font-size: 0.5625rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

#fpp-cart-modal .fpp-cart-summary__amount {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

#fpp-cart-modal .fpp-cart-summary__meta {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

#fpp-cart-modal .fpp-cart-summary__chip {
  flex: 1 1 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 2px 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5f6368;
}

#fpp-cart-modal .fpp-cart-summary__chip strong {
  font-size: 0.8125rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
  color: #202124;
  font-variant-numeric: tabular-nums;
}

#fpp-cart-modal .fpp-cart-summary__chip--total {
  padding-left: 12px;
  border-left: 1px solid rgba(25, 118, 210, 0.18);
  color: #1565c0;
}

#fpp-cart-modal .fpp-cart-summary__chip--total strong {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0d47a1;
}

#fpp-cart-modal .fpp-cart-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #5f6368;
}

#fpp-cart-modal .fpp-cart-summary__row + .fpp-cart-summary__row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(25, 118, 210, 0.18);
}

#fpp-cart-modal .fpp-cart-summary__row strong {
  font-weight: 700;
  color: #202124;
  font-variant-numeric: tabular-nums;
}

#fpp-cart-modal .fpp-cart-summary__row--total {
  font-size: 0.9375rem;
  color: #202124;
}

#fpp-cart-modal .fpp-cart-summary__row--total strong {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fpp-ink);
}

#fpp-cart-modal .fpp-cart-email {
  margin: 14px 0 4px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

#fpp-cart-modal .fpp-cart-email__label {
  display: block;
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #202124;
}

#fpp-cart-modal .fpp-cart-email__label span {
  color: #c62828;
}

#fpp-cart-modal .fpp-cart-email__field {
  position: relative;
  display: block;
  width: 100%;
}

#fpp-cart-modal .fpp-cart-email__field > i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #80868b;
  font-size: 0.875rem;
  pointer-events: none;
}

#fpp-cart-modal .fpp-cart-email__field .form-control {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 10px 12px 10px 36px;
  border-radius: 12px;
  border: 1px solid rgba(25, 118, 210, 0.2);
  background: #fafcfe;
  font-size: 0.875rem;
  box-shadow: none;
}

#fpp-cart-modal .fpp-cart-email__field .form-control:focus {
  border-color: var(--fpp-accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.12);
}

#fpp-cart-modal .fpp-cart-email__hint {
  margin: 8px 0 0;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: #80868b;
}

#fpp-cart-modal .fpp-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 10px;
  padding: 36px 16px 28px;
  border-radius: 14px;
  border: 1px dashed rgba(25, 118, 210, 0.22);
  background: rgba(255, 255, 255, 0.82);
}

#fpp-cart-modal .fpp-cart-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
  border-radius: 16px;
  background: var(--fpp-soft);
  color: var(--fpp-accent);
  font-size: 1.25rem;
}

#fpp-cart-modal .fpp-cart-empty__title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 750;
  color: #202124;
}

#fpp-cart-modal .fpp-cart-empty__text {
  margin: 0;
  max-width: 240px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #80868b;
}

#fpp-cart-modal .fpp-cart-footer,
#fpp-cart-modal .modal-footer.fpp-cart-footer {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
  padding-bottom: var(--md-sheet-footer-safe, 0px);
  border-top: none;
  border-radius: 0;
  background: #0d47a1;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  box-shadow: 0 -8px 24px rgba(13, 71, 161, 0.18);
}

#fpp-cart-modal .fpp-cart-email--header {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  box-sizing: border-box;
}

#fpp-cart-modal .fpp-cart-email--header .fpp-cart-email__label {
  margin: 0 0 4px;
  font-size: 0.5625rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

#fpp-cart-modal .fpp-cart-email--header .fpp-cart-email__label span {
  color: #ffcdd2;
}

#fpp-cart-modal .fpp-cart-email--header .fpp-cart-email__field {
  display: block;
  width: 100%;
}

#fpp-cart-modal .fpp-cart-email--header .fpp-cart-email__field .form-control {
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  height: 36px;
  padding: 7px 10px 7px 32px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.96);
  color: #202124;
  font-size: 0.8125rem;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.12);
}

#fpp-cart-modal .fpp-cart-email--header .fpp-cart-email__field .form-control:focus {
  border-color: #fff;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

#fpp-cart-modal .fpp-cart-email--header .fpp-cart-email__field > i {
  left: 10px;
  font-size: 0.75rem;
  color: #5f6368;
}

#fpp-cart-modal .fpp-cart-footer__actions {
  display: grid;
  grid-template-columns: 0.78fr 1.05fr 1.17fr;
  gap: 6px;
  width: 100%;
  max-width: none;
  align-self: stretch;
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 10px 8px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
}

#fpp-cart-modal .fpp-cart-footer:not(.fpp-cart-footer--with-summary) .fpp-cart-footer__actions {
  padding-top: 10px;
}

/* RN WebView already insets the screen — keep cart actions flush to the bottom */
html.is-webview #fpp-cart-modal .fpp-cart-footer,
html.is-webview #fpp-cart-modal .modal-footer.fpp-cart-footer,
body.is-webview #fpp-cart-modal .fpp-cart-footer,
body.is-webview #fpp-cart-modal .modal-footer.fpp-cart-footer {
  padding-bottom: 0 !important;
}

html.is-webview #fpp-cart-modal .fpp-cart-footer__actions,
body.is-webview #fpp-cart-modal .fpp-cart-footer__actions {
  padding-bottom: 8px;
}

#fpp-cart-modal .fpp-cart-footer__secondary,
#fpp-cart-modal .fpp-cart-footer__primary {
  display: contents;
}

#fpp-cart-modal .fpp-cart-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 6px 6px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.12s ease;
}

#fpp-cart-modal .fpp-cart-btn > i {
  font-size: 0.875rem;
  line-height: 1;
  flex-shrink: 0;
}

#fpp-cart-modal .fpp-cart-btn > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#fpp-cart-modal .fpp-cart-btn:active:not(:disabled) {
  transform: scale(0.97);
}

#fpp-cart-modal .fpp-cart-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

#fpp-cart-modal .fpp-cart-btn[hidden] {
  display: none !important;
}

#fpp-cart-modal .fpp-cart-btn--ghost {
  background: #f1f3f4;
  color: #3c4043;
  border-color: transparent;
}

#fpp-cart-modal .fpp-cart-btn--ghost:active:not(:disabled) {
  background: #e8eaed;
}

#fpp-cart-modal .fpp-cart-btn--danger {
  background: #fff5f5;
  color: #c62828;
  border-color: rgba(198, 40, 40, 0.16);
}

#fpp-cart-modal .fpp-cart-btn--danger:active:not(:disabled) {
  background: #ffebee;
}

#fpp-cart-modal .fpp-cart-btn--cancel {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

#fpp-cart-modal .fpp-cart-btn--cancel:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

#fpp-cart-modal .fpp-cart-btn--later {
  background: rgba(255, 255, 255, 0.94);
  color: #0d47a1;
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

#fpp-cart-modal .fpp-cart-btn--later:active:not(:disabled) {
  background: #e8f1fb;
}

#fpp-cart-modal .fpp-cart-btn--now {
  background: linear-gradient(145deg, #66bb6a 0%, #2e7d32 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(46, 125, 50, 0.35);
}

#fpp-cart-modal .fpp-cart-btn--now:active:not(:disabled) {
  box-shadow: none;
}

#fpp-cart-modal .fpp-cart-btn i {
  font-size: 0.75rem;
  opacity: 0.92;
}

/* ── zap-app: school-events-page ── */
.school-events-page {
  --md-se-toolbar-offset: 168px;
  --se-primary: #1976d2;
  --se-primary-dark: #1565c0;
  --se-soft: #e3f2fd;
  --se-ink: #0d47a1;
  --se-muted: #5f6368;
  --se-line: rgba(25, 118, 210, 0.14);
  --se-paper: #f5f8fc;
  --se-card: #ffffff;
  --se-accent: var(--se-primary);
  --se-accent-soft: var(--se-soft);
  --se-school: #1565c0;
  --se-class: #ef6c00;
  --se-class-soft: #fff3e0;
  --se-staff: #2e7d32;
  --se-staff-soft: #e8f5e9;
  --se-rail: #1976d2;
  --mui-primary: var(--se-primary);
  --mui-font: "Jost", sans-serif;
  --md-font: "Jost", sans-serif;
  font-family: "Jost", sans-serif !important;
  background: var(--se-paper);
  min-height: 100vh;
}

.school-events-page .page-title-clear { display: none !important; }

.school-events-page .school-events-feed.md-feed,
.school-events-page .page-content {
  max-width: 680px;
  width: 100%;
  margin: 0 auto !important;
  padding-top: calc(var(--md-se-toolbar-offset, 168px) + 8px) !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-bottom: calc(var(--md-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px) + 24px) !important;
  background: var(--se-paper) !important;
  overflow: visible !important;
}

/* Toolbar — match Timeline / Events (white bar + blue accents) */
.school-events-page .md-se-toolbar.card-filter {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: var(--app-safe-top, 0px) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--mui-divider, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: var(--mui-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.06)) !important;
  background: #fff !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none !important;
  overflow: visible !important;
}
.school-events-page .md-se-toolbar .content,
.school-events-page .md-se-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 10px 12px 12px !important;
  box-sizing: border-box;
}
.school-events-page .md-se-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.school-events-page .md-se-toolbar__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #202124;
  text-transform: none;
}
.school-events-page .md-se-toolbar__back,
.school-events-page .md-se-toolbar__reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #202124;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.school-events-page .md-se-toolbar__reload {
  margin-left: auto;
  background: #f1f3f4;
}
.school-events-page .md-se-toolbar__reload:hover,
.school-events-page .md-se-toolbar__reload:focus-visible {
  background: #e8eaed;
}
.school-events-page .md-se-toolbar__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 4px 10px 4px 6px;
  border-radius: 14px;
  background: var(--se-soft);
  border: 1px solid rgba(25, 118, 210, 0.18);
  box-sizing: border-box;
}
.school-events-page .md-se-toolbar__chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--se-primary, #1565c0);
  color: #fff;
  font-size: 0.75rem;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.28);
}
.school-events-page .md-se-toolbar__chip-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1 1 auto;
  gap: 0;
  line-height: 1.15;
}
.school-events-page .md-se-toolbar__chip-overline {
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(13, 71, 161, 0.72);
}
.school-events-page .md-se-toolbar__chip-name {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--se-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.school-events-page .md-se-toolbar__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
}
.school-events-page .md-se-toolbar__actions .md-btn-contained {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  gap: 8px;
  background: var(--se-primary) !important;
  color: #fff !important;
  text-transform: none;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: none;
}
.school-events-page .md-se-toolbar__actions .md-btn-contained:hover,
.school-events-page .md-se-toolbar__actions .md-btn-contained:focus-visible {
  background: var(--se-primary-dark) !important;
}

/* Hero */
.school-events-page .md-se-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--se-line);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--se-soft) 0%, #fff 70%);
  color: var(--se-ink);
  box-shadow: 0 1px 2px rgba(13, 71, 161, 0.06);
}
.school-events-page .md-se-hero__glow {
  display: none;
}
.school-events-page .md-se-hero__band {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
}
.school-events-page .md-se-hero__overline {
  margin: 0 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.625rem;
  font-weight: 600;
  color: rgba(13, 71, 161, 0.72);
}
.school-events-page .md-se-hero__title {
  margin: 0 0 6px;
  font-size: 1.125rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--se-ink);
  letter-spacing: -0.01em;
}
.school-events-page .md-se-hero__lead {
  margin: 0;
  max-width: 28ch;
  color: var(--se-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}
.school-events-page .md-se-hero__stamp {
  flex: 0 0 auto;
  min-width: 64px;
  text-align: center;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--se-primary);
  color: #fff;
  border: none;
  backdrop-filter: none;
}
.school-events-page .md-se-hero__stamp-value {
  display: block;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
}
.school-events-page .md-se-hero__stamp-label {
  display: block;
  margin-top: 4px;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.9;
  font-weight: 600;
}

/* Week strip */
.school-events-page .md-se-month {
  margin: 14px 0 10px;
  padding: 14px 12px 12px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--se-line);
  box-shadow: 0 1px 2px rgba(16, 42, 67, 0.04);
}
.school-events-page .md-se-month__nav {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.school-events-page .md-se-month__btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
  border-radius: 12px;
}
.school-events-page .md-se-month__center {
  text-align: center;
}
.school-events-page .md-se-month__label {
  margin: 0;
  font-weight: 750;
  color: var(--se-ink);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.school-events-page .md-se-month__today {
  display: inline-block;
  margin-top: 2px;
  border: 0;
  background: transparent;
  color: var(--se-primary);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 2px 8px;
}
.school-events-page .md-se-month__weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 6px;
}
.school-events-page .md-se-month__weekdays span {
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--se-muted);
  padding: 4px 0;
}
.school-events-page .md-se-month__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.school-events-page .md-se-month__day {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  aspect-ratio: 1;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--se-paper);
  color: var(--se-ink);
  font-family: inherit;
  cursor: pointer;
  padding: 4px 2px;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.school-events-page .md-se-month__day:active {
  transform: scale(0.96);
}
.school-events-page .md-se-month__day.is-outside {
  opacity: 0.38;
  background: transparent;
}
.school-events-page .md-se-month__day.is-today:not(.is-active) {
  border-color: rgba(25, 118, 210, 0.55);
  background: var(--se-soft);
}
.school-events-page .md-se-month__day.has-events:not(.is-active):not(.is-outside) {
  background: #f8fbff;
  border-color: rgba(25, 118, 210, 0.18);
}
.school-events-page .md-se-month__day.is-active {
  background: var(--se-primary);
  border-color: var(--se-primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(25, 118, 210, 0.28);
  transform: translateY(-1px);
}
.school-events-page .md-se-month__day:focus-visible {
  outline: 2px solid var(--se-primary);
  outline-offset: 2px;
}
.school-events-page .md-se-month__day-num {
  font-size: 0.875rem;
  font-weight: 750;
  line-height: 1;
}
.school-events-page .md-se-month__dots {
  display: flex;
  justify-content: center;
  gap: 3px;
  min-height: 6px;
}
.school-events-page .md-se-month__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9fb3c8;
}
.school-events-page .md-se-month__dot--school { background: var(--se-primary); }
.school-events-page .md-se-month__dot--class { background: #fb8c00; }
.school-events-page .md-se-month__dot--staff { background: var(--se-staff); }
.school-events-page .md-se-month__dot--more { background: #90a4ae; }
.school-events-page .md-se-month__day.is-active .md-se-month__dot--school { background: #bbdefb; }
.school-events-page .md-se-month__day.is-active .md-se-month__dot--class { background: #ffe0b2; }
.school-events-page .md-se-month__day.is-active .md-se-month__dot--staff { background: #c8e6c9; }
.school-events-page .md-se-month__day.is-active .md-se-month__dot--more { background: rgba(255, 255, 255, 0.65); }
.school-events-page .md-se-month__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--se-line);
}
.school-events-page .md-se-month__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--se-muted);
}
.school-events-page .md-se-month__swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.school-events-page .md-se-month__swatch--school { background: var(--se-primary); }
.school-events-page .md-se-month__swatch--class { background: #fb8c00; }
.school-events-page .md-se-month__swatch--staff { background: var(--se-staff); }

/* Legacy week strip (unused) kept harmless */
.school-events-page .md-se-week {
  margin: 14px 0 10px;
  padding: 14px 12px 12px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--se-line);
  box-shadow: 0 1px 2px rgba(16, 42, 67, 0.04);
}
.school-events-page .md-se-week__nav {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.school-events-page .md-se-week__btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
  border-radius: 12px;
}
.school-events-page .md-se-week__center {
  text-align: center;
}
.school-events-page .md-se-week__range {
  margin: 0;
  font-weight: 750;
  color: var(--se-ink);
  font-size: 0.98rem;
}
.school-events-page .md-se-week__today {
  display: inline-block;
  margin-top: 2px;
  border: 0;
  background: transparent;
  color: var(--se-primary);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 2px 8px;
}
.school-events-page .md-se-week__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.school-events-page .md-se-day {
  position: relative;
  border: 1px solid var(--se-line);
  background: var(--se-paper);
  border-radius: 14px;
  padding: 10px 2px 8px;
  text-align: center;
  color: var(--se-ink);
  min-height: 88px;
  overflow: hidden;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.school-events-page .md-se-day__rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
}
.school-events-page .md-se-day.is-today .md-se-day__rail {
  background: var(--se-rail);
}
.school-events-page .md-se-day.is-today {
  border-color: rgba(25, 118, 210, 0.45);
  background: var(--se-soft);
}
.school-events-page .md-se-day.is-active {
  background: var(--se-primary);
  border-color: var(--se-primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(25, 118, 210, 0.28);
}
.school-events-page .md-se-day.is-active .md-se-day__rail {
  background: var(--se-rail);
}
.school-events-page .md-se-day__dow {
  display: block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  font-weight: 700;
}
.school-events-page .md-se-day__dom {
  display: block;
  font-size: 1.15rem;
  font-weight: 750;
  line-height: 1.15;
  margin: 2px 0;
}
.school-events-page .md-se-day__count {
  display: block;
  min-height: 1.1em;
  font-size: 0.58rem;
  font-weight: 650;
  opacity: 0.8;
  padding: 0 2px;
  line-height: 1.2;
}
.school-events-page .md-se-day__dots {
  display: flex;
  justify-content: center;
  gap: 3px;
  min-height: 8px;
  margin-top: 4px;
}
.school-events-page .md-se-day__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9fb3c8;
}
.school-events-page .md-se-day__dot--school { background: var(--se-primary); }
.school-events-page .md-se-day__dot--class { background: #fb8c00; }
.school-events-page .md-se-day.is-active .md-se-day__dot--school { background: #bbdefb; }
.school-events-page .md-se-day.is-active .md-se-day__dot--class { background: #ffe0b2; }

/* Day panel + cards */
.school-events-page .md-se-day-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 2px 12px;
}
.school-events-page .md-se-day-panel__overline {
  margin: 0 0 2px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--se-muted);
  font-weight: 700;
}
.school-events-page .md-se-day-panel__title {
  margin: 0;
  font-size: 1.2rem;
  color: var(--se-ink);
  letter-spacing: -0.015em;
}
.school-events-page .md-se-day-panel__add {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--se-primary);
  color: #fff;
  text-decoration: none;
}
.school-events-page .md-se-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  margin-bottom: 10px;
  overflow: visible;
  border: 1px solid var(--se-line);
  border-radius: 14px;
  background: var(--se-card);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 42, 67, 0.04);
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.school-events-page .md-se-card.md-ripple {
  overflow: visible;
}
.school-events-page .md-se-card:has(.md-se-menu.show),
.school-events-page .md-se-card:has(.dropdown-menu.show),
.school-events-page .md-se-card.is-menu-open {
  z-index: 8;
}
.school-events-page .md-se-card:hover,
.school-events-page .md-se-card:focus-visible {
  border-color: rgba(25, 118, 210, 0.28);
  box-shadow: 0 4px 14px rgba(16, 42, 67, 0.08);
}
.school-events-page .md-se-card:focus-visible {
  outline: 2px solid var(--se-primary);
  outline-offset: 2px;
}
.school-events-page .md-se-card__accent {
  flex: 0 0 4px;
  background: var(--se-primary);
}
.school-events-page .md-se-card--class .md-se-card__accent {
  background: var(--se-class);
}
.school-events-page .md-se-card--staff .md-se-card__accent {
  background: var(--se-staff);
}
.school-events-page .md-se-card--school,
.school-events-page .md-se-card--class,
.school-events-page .md-se-card--staff {
  border-left: none;
}
.school-events-page .md-se-card__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 12px 12px;
}
.school-events-page .md-se-card__row--top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}
.school-events-page .md-se-card__row--top .md-chip {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 8px;
  line-height: 1.3;
}
.school-events-page .md-se-card__title {
  margin: 0;
  font-size: 1rem;
  color: var(--se-ink);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.school-events-page .md-se-card__when {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--se-ink);
  line-height: 1.3;
}
.school-events-page .md-se-card__when > i {
  color: var(--se-primary);
  font-size: 0.75rem;
  width: 14px;
  text-align: center;
}
.school-events-page .md-se-card--class .md-se-card__when > i {
  color: var(--se-class);
}
.school-events-page .md-se-card--staff .md-se-card__when > i {
  color: var(--se-staff);
}
.school-events-page .md-se-card__time,
.school-events-page .md-se-card__time-end {
  display: inline;
  font-variant-numeric: tabular-nums;
}
.school-events-page .md-se-card__time-sep {
  color: var(--se-muted);
  font-weight: 500;
}
.school-events-page .md-se-card__loc {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--se-muted);
  line-height: 1.35;
}
.school-events-page .md-se-card__loc i {
  margin-top: 2px;
  width: 14px;
  text-align: center;
  color: #9fb3c8;
}
.school-events-page .md-se-card__loc span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.school-events-page .md-se-card__menu {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
  z-index: 2;
}
.school-events-page .md-se-card__menu-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--se-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.school-events-page .md-se-card__menu-btn:hover,
.school-events-page .md-se-card__menu-btn:focus-visible,
.school-events-page .md-se-card__menu-btn.show,
.school-events-page .md-se-card__menu-btn[aria-expanded="true"] {
  background: rgba(16, 42, 67, 0.08);
  color: var(--se-ink);
  outline: none;
}
.school-events-page .md-se-card__menu-btn i {
  font-size: 0.9375rem;
  line-height: 1;
}
.school-events-page .md-se-menu,
.school-events-page .md-se-card__dropdown {
  min-width: 188px;
  margin-top: 6px !important;
  padding: 8px 0;
  border-radius: 12px;
  border: 1px solid rgba(16, 42, 67, 0.1);
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 42, 67, 0.16);
  z-index: 30;
  font-family: "Jost", sans-serif;
}
.school-events-page .md-se-menu .dropdown-item,
.school-events-page .md-se-card__dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 11px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #202124;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.school-events-page .md-se-menu .dropdown-item:hover,
.school-events-page .md-se-menu .dropdown-item:focus,
.school-events-page .md-se-menu .dropdown-item:focus-visible,
.school-events-page .md-se-card__dropdown .dropdown-item:hover,
.school-events-page .md-se-card__dropdown .dropdown-item:focus {
  background: #f1f5f9;
  color: #202124;
  outline: none;
}
.school-events-page .md-se-menu .dropdown-item i,
.school-events-page .md-se-card__dropdown .dropdown-item i {
  width: 18px;
  flex-shrink: 0;
  text-align: center;
  font-size: 0.875rem;
  color: #64748b;
}
.school-events-page .md-se-menu .dropdown-item span,
.school-events-page .md-se-card__dropdown .dropdown-item span {
  min-width: 0;
}
.school-events-page .md-se-menu .md-se-menu__danger,
.school-events-page .md-se-menu .dropdown-item.md-se-menu__danger,
.school-events-page .md-se-card__dropdown .dropdown-item.text-danger {
  color: #c62828;
}
.school-events-page .md-se-menu .md-se-menu__danger i,
.school-events-page .md-se-menu .dropdown-item.md-se-menu__danger i,
.school-events-page .md-se-card__dropdown .dropdown-item.text-danger i {
  color: #c62828;
}
.school-events-page .md-se-menu .md-se-menu__danger:hover,
.school-events-page .md-se-menu .md-se-menu__danger:focus,
.school-events-page .md-se-menu .md-se-menu__danger:focus-visible {
  background: #fdecea;
  color: #b71c1c;
}
.school-events-page #se-list {
  position: relative;
  z-index: 1;
}
.school-events-page .md-se-day-panel {
  overflow: visible;
}

html.school-events-app .md-se-form__title-input,
html.school-events-app .md-se-form__title-input::placeholder {
  text-transform: uppercase;
}
html.school-events-app .md-admit-optional {
  font-weight: 500;
  color: var(--se-muted, #64748b);
  text-transform: none;
  letter-spacing: 0;
}

.school-events-page .md-se-empty {
  text-align: center;
  padding: 32px 18px;
  border: 1px dashed var(--se-line);
  border-radius: 18px;
  background: #fff;
}
.school-events-page .md-se-empty__icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--se-soft);
  color: var(--se-primary);
  font-size: 1.35rem;
}
.school-events-page .md-se-empty__title {
  margin: 0 0 6px;
  color: var(--se-ink);
}
.school-events-page .md-se-empty__text {
  margin: 0 0 14px;
  color: var(--se-muted);
}
.school-events-page .md-se-empty .md-btn-contained {
  background: var(--se-primary) !important;
  color: #fff !important;
  text-transform: none;
}

/* Detail + form sheets — match admit / create-event modal chrome */
#seCreateSheet.md-se-sheet,
#seEditSheet.md-se-sheet,
#seDetailSheet.md-se-sheet {
  --se-primary: #1976d2;
  --se-primary-dark: #1565c0;
  --se-soft: #e3f2fd;
  display: none !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  /* Stretch to viewport edges — avoid 100dvh which shrinks when the file picker opens */
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 1300 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 0;
  pointer-events: none;
}

#seCreateSheet.md-se-sheet.menu-active,
#seEditSheet.md-se-sheet.menu-active,
#seDetailSheet.md-se-sheet.menu-active {
  display: flex !important;
  flex-direction: column !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 1 !important;
  pointer-events: all !important;
}

#seCreateSheet.md-se-sheet .md-timeline-sheet__panel,
#seEditSheet.md-se-sheet .md-timeline-sheet__panel,
#seDetailSheet.md-se-sheet .md-timeline-sheet__panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  background: #fff;
  font-family: "Jost", sans-serif;
  overflow: hidden;
}

#seCreateSheet.md-se-sheet .md-timeline-sheet__handle,
#seEditSheet.md-se-sheet .md-timeline-sheet__handle,
#seDetailSheet.md-se-sheet .md-timeline-sheet__handle {
  display: none;
}

#seCreateSheet.md-se-sheet .md-timeline-sheet__header,
#seEditSheet.md-se-sheet .md-timeline-sheet__header,
#seDetailSheet.md-se-sheet .md-timeline-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 8px 12px 20px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

#seCreateSheet.md-se-sheet .md-timeline-sheet__overline,
#seEditSheet.md-se-sheet .md-timeline-sheet__overline,
#seDetailSheet.md-se-sheet .md-timeline-sheet__overline {
  display: block;
  margin: 0 0 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a73e8;
}

#seCreateSheet.md-se-sheet .md-timeline-sheet__title,
#seEditSheet.md-se-sheet .md-timeline-sheet__title,
#seDetailSheet.md-se-sheet .md-timeline-sheet__title {
  margin: 0 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #202124 !important;
  text-transform: none !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

#seCreateSheet.md-se-sheet .md-timeline-sheet__close,
#seEditSheet.md-se-sheet .md-timeline-sheet__close,
#seDetailSheet.md-se-sheet .md-timeline-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #5f6368;
  cursor: pointer;
}

#seCreateSheet.md-se-sheet .md-timeline-sheet__body,
#seEditSheet.md-se-sheet .md-timeline-sheet__body,
#seDetailSheet.md-se-sheet .md-timeline-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 16px 16px 8px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: #f3f5f8;
}

#seCreateSheet.md-se-sheet .md-timeline-sheet__footer,
#seEditSheet.md-se-sheet .md-timeline-sheet__footer,
#seDetailSheet.md-se-sheet .md-timeline-sheet__footer {
  flex-shrink: 0;
  margin-top: auto;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  padding-bottom: calc(12px + var(--md-sheet-footer-safe, 0px));
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

#seCreateSheet.md-se-sheet .md-timeline-sheet__footer .md-sl-form-actions,
#seEditSheet.md-se-sheet .md-timeline-sheet__footer .md-sl-form-actions,
#seDetailSheet.md-se-sheet .md-timeline-sheet__footer .md-sl-form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

#seCreateSheet.md-se-sheet .md-timeline-sheet__footer .md-btn-contained,
#seEditSheet.md-se-sheet .md-timeline-sheet__footer .md-btn-contained,
#seDetailSheet.md-se-sheet .md-timeline-sheet__footer .md-btn-contained {
  width: 100%;
  min-height: 48px;
  text-transform: none;
  box-shadow: none;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  border-radius: 12px;
}

#seCreateSheet.md-se-sheet .md-timeline-sheet__footer .md-btn-contained:not(.md-btn-contained--tonal),
#seEditSheet.md-se-sheet .md-timeline-sheet__footer .md-btn-contained:not(.md-btn-contained--tonal) {
  background: #1976d2 !important;
  color: #fff !important;
}

#seCreateSheet.md-se-sheet .md-timeline-sheet__footer .md-btn-contained:not(.md-btn-contained--tonal):hover,
#seEditSheet.md-se-sheet .md-timeline-sheet__footer .md-btn-contained:not(.md-btn-contained--tonal):hover {
  background: #1565c0 !important;
}

/* Detail sheet — MUI Dialog / List pattern */
#seDetailSheet.md-se-sheet .md-se-detail__body.md-timeline-sheet__body,
#seDetailSheet.md-se-sheet .md-timeline-sheet__body {
  padding: 12px 12px 16px;
  background: #f5f5f5;
}

#seDetailSheet.md-se-sheet .md-se-detail__header.md-timeline-sheet__header {
  align-items: center;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 10px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

#seDetailSheet.md-se-sheet .md-se-detail__chip.md-timeline-sheet__overline {
  display: inline-flex;
  align-items: center;
  margin: 0 0 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(25, 118, 210, 0.1);
  color: #1565c0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
}

#seDetailSheet.md-se-sheet .md-timeline-sheet__title {
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

#seDetailSheet.md-se-sheet .md-se-detail__footer {
  display: block;
  padding: 8px 10px;
  padding-bottom: calc(8px + var(--md-sheet-footer-safe, 0px));
}

#seDetailSheet.md-se-sheet .md-se-detail__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: 100%;
}

#seDetailSheet.md-se-sheet .md-se-detail__actions--manage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
}

#seDetailSheet.md-se-sheet .md-se-detail__actions .md-btn-text,
#seDetailSheet.md-se-sheet .md-se-detail__actions .md-btn-contained,
#seDetailSheet.md-se-sheet .md-se-detail__delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 6px 8px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  box-shadow: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

#seDetailSheet.md-se-sheet .md-se-detail__actions .md-btn-text i,
#seDetailSheet.md-se-sheet .md-se-detail__actions .md-btn-contained i,
#seDetailSheet.md-se-sheet .md-se-detail__delete i {
  font-size: 0.8125rem;
  flex-shrink: 0;
}

#seDetailSheet.md-se-sheet .md-se-detail__btn-close {
  color: #5f6368;
  background: #f1f3f4;
  border: none;
}

#seDetailSheet.md-se-sheet .md-se-detail__btn-close:hover,
#seDetailSheet.md-se-sheet .md-se-detail__btn-close:focus-visible {
  background: #e8eaed;
  color: #202124;
  outline: none;
}

#seDetailSheet.md-se-sheet .md-se-detail__btn-edit {
  background: #1976d2 !important;
  color: #fff !important;
  border: none;
}

#seDetailSheet.md-se-sheet .md-se-detail__btn-edit:hover,
#seDetailSheet.md-se-sheet .md-se-detail__btn-edit:focus-visible {
  background: #1565c0 !important;
  outline: none;
}

#seDetailSheet.md-se-sheet .md-se-detail__delete {
  color: #d32f2f !important;
  background: rgba(211, 47, 47, 0.08) !important;
  border: 1px solid rgba(211, 47, 47, 0.18) !important;
}

#seDetailSheet.md-se-sheet .md-se-detail__delete:hover,
#seDetailSheet.md-se-sheet .md-se-detail__delete:focus-visible {
  background: rgba(211, 47, 47, 0.14) !important;
  outline: none;
}

@media (max-width: 360px) {
  #seDetailSheet.md-se-sheet .md-se-detail__actions--manage {
    gap: 4px;
  }

  #seDetailSheet.md-se-sheet .md-se-detail__actions .md-btn-text,
  #seDetailSheet.md-se-sheet .md-se-detail__actions .md-btn-contained,
  #seDetailSheet.md-se-sheet .md-se-detail__delete {
    min-height: 38px;
    padding: 6px 4px;
    font-size: 0.75rem;
    gap: 4px;
  }
}

.md-se-detail {
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.md-se-detail__media {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #e8eaed;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--md-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.08));
}

.md-se-detail__media img {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}

.md-se-detail__list.md-mui-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--md-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.06));
  overflow: hidden;
}

.md-se-detail__item.md-mui-list-item {
  margin: 0;
  padding: 0;
}

.md-se-detail__item + .md-se-detail__item {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.md-se-detail__item .md-mui-list-item__btn {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  text-align: left;
  color: inherit;
  cursor: default;
}

.md-se-detail__item .md-mui-list-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(25, 118, 210, 0.1);
  color: #1976d2;
  flex-shrink: 0;
  font-size: 1rem;
}

.md-se-detail__item .md-mui-list-item__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  padding-top: 2px;
}

.md-se-detail__item .md-mui-list-item__primary {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
}

.md-se-detail__item .md-mui-list-item__secondary {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.87);
  white-space: normal;
  overflow-wrap: anywhere;
}

.md-se-detail__about {
  margin: 0;
  padding: 14px 16px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--md-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.06));
}

.md-se-detail__about-title {
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1976d2;
}

.md-se-detail__desc {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(0, 0, 0, 0.75);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.md-se-detail__desc p {
  margin: 0 0 0.75em;
}

.md-se-detail__desc p:last-child {
  margin-bottom: 0;
}

/* Create / edit form cards */
#seCreateSheet .md-se-form,
#seEditSheet .md-se-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
  margin: 0 auto;
  padding-bottom: 8px;
}
#seCreateSheet .md-se-form .md-admit-section,
#seEditSheet .md-se-form .md-admit-section {
  margin: 0;
}
.md-se-form__dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  width: 100%;
  min-width: 0;
}
.md-se-form__dates > .mui-field,
.md-se-form__dates > .md-admit-field {
  min-width: 0;
  max-width: 100%;
  margin-bottom: 0;
}
.md-se-form__dates .mui-field__input,
.md-se-form__dates input[type="datetime-local"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* Native datetime-local controls are wide; keep them from blowing the grid */
  font-size: 0.9375rem;
  padding-left: 8px;
  padding-right: 8px;
}
.md-se-form__textarea {
  min-height: 128px;
  resize: vertical;
  line-height: 1.45;
}
.md-se-form__notify {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0 0;
  padding: 14px 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #f8fafc;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.md-se-form__notify:hover,
.md-se-form__notify:focus-within {
  border-color: rgba(25, 118, 210, 0.35);
  background: #f5f9ff;
}
.md-se-form__notify input[type="checkbox"] {
  margin: 3px 0 0;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: #1565c0;
  cursor: pointer;
}
.md-se-form__notify-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.md-se-form__notify-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
}
.md-se-form__notify-hint {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #64748b;
}
.md-se-form__preview {
  margin-bottom: 10px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
}
.md-se-form__preview img {
  display: block;
  width: 100%;
  max-height: 160px;
  object-fit: cover;
}
.md-se-form__cat {
  margin-top: 14px;
}
.md-se-form__cat-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #5f6368;
}
.md-se-form__cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.md-se-form__cat-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 12px 8px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #202124;
  cursor: pointer;
}
.md-se-form__cat-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.md-se-form__cat-choice:has(input:checked) {
  border-color: rgba(25, 118, 210, 0.45);
  background: #e3f2fd;
  color: #0d47a1;
  box-shadow: 0 0 0 1px rgba(25, 118, 210, 0.18);
}

.md-se-upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed rgba(25, 118, 210, 0.35);
  background: #f8fbff;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.md-se-upload:hover,
.md-se-upload:focus-within {
  border-color: rgba(25, 118, 210, 0.6);
  background: #eef5fe;
}
.md-se-upload__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #e3f2fd;
  color: #1565c0;
  flex-shrink: 0;
  font-size: 1.125rem;
}
.md-se-upload__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.md-se-upload__title {
  font-size: 0.9375rem;
  font-weight: 650;
  color: #202124;
}
.md-se-upload__hint {
  font-size: 0.75rem;
  color: #5f6368;
}
.md-se-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

#seCreateSheet .md-se-audience .md-event-form__audience-grid,
#seEditSheet .md-se-audience .md-event-form__audience-grid {
  gap: 10px;
}
#seCreateSheet .md-se-audience .md-event-form__choice,
#seEditSheet .md-se-audience .md-event-form__choice {
  min-height: 72px;
}
#seCreateSheet .se-class-wrap,
#seEditSheet .se-class-wrap {
  margin-top: 12px;
}

@media (max-width: 560px) {
  .md-se-form__dates {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .md-se-form__dates .mui-field__input,
  .md-se-form__dates input[type="datetime-local"] {
    font-size: 1rem;
    padding-left: 12px;
    padding-right: 12px;
  }
  .md-se-form__cat-grid { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .school-events-page .md-se-day__count { font-size: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .school-events-page .md-se-day { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   zap-app: global phone + tablet harden (all md-page shells)
   ═══════════════════════════════════════════════════════════════ */

.md-page a,
.md-page button,
.md-page .md-btn-contained,
.md-page .md-btn-outlined,
.md-page .mui-btn,
.md-page .md-ripple {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.md-page .md-toolbar .content,
.md-page .md-sl-toolbar__inner,
.md-page .md-topic-toolbar__inner,
.md-page .md-se-toolbar__inner,
.md-page .md-mail-toolbar .content,
.md-page .md-at-toolbar__inner,
.md-page .md-cl-toolbar__inner,
.md-page .md-gm-toolbar__inner,
.md-page .md-check-toolbar__inner,
.md-page .zap-ward-toolbar__inner,
.md-page .md-lc-toolbar__inner {
  max-width: var(--md-content-max, 680px);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.md-page .md-topic-sort,
.md-page .md-topic-sort-strip,
.md-page .md-search-field,
.md-page .md-class-dash,
.md-page .md-lc-dash,
.md-page .md-se-hero,
.md-page .md-se-month,
.md-page .md-se-day-panel {
  max-width: var(--md-content-max, 680px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Student-list sort: edge-to-edge inside the feed (do not center/cap) */
.md-page.student-list-page .md-sl-sort,
.student-list-page .md-sl-sort {
  display: block;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

.md-page.student-list-page .md-sl-sort-strip,
.md-page.student-list-page .md-sl-sort-strip--row,
.student-list-page .md-sl-sort-strip,
.student-list-page .md-sl-sort-strip--row {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* ── Tablet (600px+ — Fold open inner screen is often ~700px, not 768) ── */
@media (min-width: 600px) {
  :root {
    --md-gutter: 20px;
  }

  .md-page .md-toolbar .content,
  .md-page .md-sl-toolbar__inner,
  .md-page .md-topic-toolbar__inner,
  .md-page .md-se-toolbar__inner,
  .md-page .md-mail-toolbar .content,
  .md-page .md-at-toolbar__inner,
  .md-page .md-cl-toolbar__inner,
  .md-page .md-gm-toolbar__inner,
  .md-page .md-check-toolbar__inner,
  .md-page .zap-ward-toolbar__inner,
  .md-page .md-lc-toolbar__inner {
    padding-left: var(--md-gutter) !important;
    padding-right: var(--md-gutter) !important;
  }

  .md-page .md-btn-contained,
  .md-page .md-toolbar__row .mui-btn,
  .md-page .md-toolbar__row .md-btn-contained,
  .md-page .md-sl-toolbar__actions .md-btn-contained,
  .md-page .md-topic-toolbar__actions .md-btn-contained,
  .md-page .md-se-toolbar__actions .md-btn-contained {
    min-height: 44px;
  }

  .learners-center-page .md-lc-grid,
  .classroom-center-page .md-lc-grid,
  .zap-ward-page .md-lc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .school-events-page .md-se-day {
    min-height: 64px;
  }

  .student-list-page .md-student-card,
  .staff-list-page .md-student-card,
  .topic-page .md-topic-lesson,
  .mail-page .md-mail-card,
  .alert-page .md-alert-card {
    border-radius: 14px;
  }
}

/* JS Fold class — applies even if a WebView reports a quirky width */
html.is-vp-tablet {
  --md-gutter: 20px;
}

html.is-vp-tablet .md-page .md-btn-contained,
html.is-vp-tablet .md-page .md-toolbar__row .md-btn-contained,
html.is-vp-tablet .md-page .md-sl-toolbar__actions .md-btn-contained,
html.is-vp-tablet .md-page .md-topic-toolbar__actions .md-btn-contained,
html.is-vp-tablet .md-page .md-se-toolbar__actions .md-btn-contained {
  min-height: 44px;
}

html.is-vp-tablet .learners-center-page .md-lc-grid,
html.is-vp-tablet .classroom-center-page .md-lc-grid,
html.is-vp-tablet .zap-ward-page .md-lc-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

html.is-vp-tablet .md-feed {
  max-width: var(--md-content-max, 680px);
  margin-left: auto;
  margin-right: auto;
}

/* ── Phone / cover screen ── */
@media (max-width: 599px) {
  :root {
    --md-gutter: 12px;
  }

  .md-feed {
    padding-left: var(--md-gutter);
    padding-right: var(--md-gutter);
  }

  .md-page .md-toolbar .content,
  .md-page .md-sl-toolbar__inner,
  .md-page .md-topic-toolbar__inner,
  .md-page .md-se-toolbar__inner,
  .md-page .md-mail-toolbar .content,
  .md-page .md-at-toolbar__inner,
  .md-page .md-cl-toolbar__inner,
  .md-page .md-gm-toolbar__inner,
  .md-page .md-check-toolbar__inner,
  .md-page .zap-ward-toolbar__inner,
  .md-page .md-lc-toolbar__inner {
    padding-left: var(--md-gutter) !important;
    padding-right: var(--md-gutter) !important;
  }

  .md-page .md-toolbar__title,
  .md-page .md-sl-toolbar__title,
  .md-page .md-topic-toolbar__title,
  .md-page .md-se-toolbar__title,
  .md-page .md-mail-toolbar__title,
  .md-page .md-lc-toolbar__title,
  .md-page .md-check-toolbar__title,
  .md-page .zap-ward-toolbar__title {
    font-size: 1.125rem;
  }

  .learners-center-page .md-lc-dash__band,
  .classroom-center-page .md-lc-dash__band {
    padding: 14px 12px;
    gap: 10px;
  }

  .learners-center-page .md-lc-dash__title,
  .classroom-center-page .md-lc-dash__title {
    font-size: 1.125rem;
  }

  .learners-center-page .md-lc-grid,
  .classroom-center-page .md-lc-grid,
  .zap-ward-page .md-lc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .school-events-page .md-se-month__grid {
    gap: 4px;
  }

  .topic-page .md-topic-sort-strip,
  .student-list-page .md-sl-sort-strip,
  .elibrary-page .md-topic-sort-strip {
    gap: 4px;
    padding: 4px;
  }
}

/* ── Phone ── */
@media (max-width: 480px) {
  :root {
    --md-gutter: 8px;
  }

  .md-page .md-toolbar__reload,
  .md-page .md-sl-toolbar__reload,
  .md-page .md-topic-toolbar__reload,
  .md-page .md-se-toolbar__reload,
  .md-page .md-check-toolbar__reload,
  .md-page .md-sl-toolbar__back,
  .md-page .md-topic-toolbar__back,
  .md-page .md-se-toolbar__back,
  .md-page .md-check-toolbar__back,
  .md-page .md-mail-toolbar__back,
  .md-page .zap-ward-toolbar__back {
    width: 36px;
    height: 36px;
  }

  .md-page .md-btn-contained,
  .md-page .md-toolbar__row .md-btn-contained,
  .md-page .md-sl-toolbar__actions .md-btn-contained,
  .md-page .md-topic-toolbar__actions .md-btn-contained,
  .md-page .md-se-toolbar__actions .md-btn-contained {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 0.8125rem;
  }

  .md-page .md-chip {
    font-size: 0.6875rem;
    padding: 2px 8px;
  }

  .md-page .md-search-field__input {
    font-size: 0.9375rem; /* avoid iOS zoom */
  }

  .learners-center-page .md-lc-dash__pills,
  .classroom-center-page .md-lc-dash__pills {
    gap: 6px;
  }

  .learners-center-page .md-lc-dash__pill,
  .classroom-center-page .md-lc-dash__pill {
    font-size: 0.6875rem;
    padding: 4px 8px;
  }

  .learners-center-page .md-lc-tile,
  .classroom-center-page .md-lc-tile,
  .zap-ward-page .md-lc-tile {
    min-height: 96px;
    padding: 10px;
  }

  .school-events-page .md-se-card {
    margin-bottom: 8px;
  }

  .school-events-page .md-se-card__title {
    font-size: 0.9375rem;
  }

  .school-events-page .md-se-day-panel__title {
    font-size: 1.0625rem;
  }

  .student-list-page .md-student-card__body,
  .staff-list-page .md-student-card__body {
    padding: 12px;
  }

  .topic-page .md-topic-lesson {
    margin-bottom: 8px;
  }

  .mail-page .md-mail-card {
    margin-bottom: 8px;
  }

  .md-timeline-sheet__panel,
  .md-sl-admit-sheet .md-timeline-sheet__panel,
  .md-se-sheet .md-timeline-sheet__panel {
    max-width: 100%;
  }

  .md-timeline-sheet__title,
  .md-sl-admit-sheet .md-timeline-sheet__title {
    font-size: 1.125rem;
  }

  .md-timeline-sheet__body,
  .md-sl-admit-sheet .md-timeline-sheet__body {
    padding-left: 12px;
    padding-right: 12px;
  }

  .md-admit-form .mui-field__input,
  .md-admit-form .mui-field__select,
  .md-se-form .mui-field__input,
  .md-se-form .mui-field__select {
    min-height: 44px;
    font-size: 1rem;
  }
}

/* ── Narrow phone ── */
@media (max-width: 360px) {
  :root {
    --md-gutter: 6px;
  }

  .learners-center-page .md-lc-grid,
  .classroom-center-page .md-lc-grid,
  .zap-ward-page .md-lc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .learners-center-page .md-lc-tile,
  .classroom-center-page .md-lc-tile {
    min-height: 88px;
    padding: 8px;
  }

  .md-page .md-toolbar__title,
  .md-page .md-sl-toolbar__title,
  .md-page .md-topic-toolbar__title,
  .md-page .md-se-toolbar__title {
    font-size: 1.0625rem;
  }

  .topic-page .md-topic-sort-stat__label,
  .student-list-page .md-sl-sort-stat__label {
    font-size: 0.5rem;
  }

  .school-events-page .md-se-card__main {
    padding: 10px 12px;
  }
}

/* ── Landscape phones / short viewports ── */
@media (max-height: 480px) and (orientation: landscape) {
  .md-page .md-toolbar .content,
  .md-page .md-sl-toolbar__inner,
  .md-page .md-topic-toolbar__inner,
  .md-page .md-se-toolbar__inner,
  .md-page .md-check-toolbar__inner,
  .md-page .md-mail-toolbar .content {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    gap: 4px;
  }

  .md-timeline-sheet__body,
  .md-sl-admit-sheet .md-timeline-sheet__body,
  .md-se-sheet .md-timeline-sheet__body {
    max-height: none;
  }
}

/* ── WebView safe touch targets ── */
.is-webview .md-page .md-btn-contained,
body.is-webview .md-page .md-btn-contained {
  min-height: 44px;
}

/* Soften inter-page white flash while splash is bridging */
html.zap-nav-bridging {
  background-color: #aeafb0 !important;
}
html.zap-nav-bridging body {
  background-color: #aeafb0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   zap-app: educational page splash (#preloader)
   Quiet academy glass — transparent, classy, modern.
   Keep #preloader + .preloader-hide for Appkit custom.js.
   ═══════════════════════════════════════════════════════════════ */

#preloader.md-preloader,
#preloader {
  --md-pre-ink: #f4f6f8;
  --md-pre-ink-soft: rgba(244, 246, 248, 0.62);
  --md-pre-line: rgba(255, 255, 255, 0.28);
  --md-pre-accent: #ffffff;
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 100000;
  margin: 0;
  padding:
    calc(28px + env(safe-area-inset-top, 0px) + var(--app-safe-top, 0px))
    28px
    calc(28px + env(safe-area-inset-bottom, 0px) + var(--app-safe-bottom, 0px));
  box-sizing: border-box;
  background: rgba(12, 14, 18, 0.32);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  backdrop-filter: blur(12px) saturate(1.05);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.35s ease;
  font-family: var(--md-font, "Jost", sans-serif);
  color: var(--md-pre-ink);
  overflow: hidden;
}

#preloader.preloader-hide[data-zap-splash-done="1"],
#preloader.md-preloader.preloader-hide[data-zap-splash-done="1"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Ignore Appkit's early .preloader-hide so the bar/orbit never freeze mid-load */
#preloader.preloader-hide:not([data-zap-splash-done="1"]),
#preloader.md-preloader.preloader-hide:not([data-zap-splash-done="1"]) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Click-nav bridge: snap dismiss; keep indeterminate progress moving */
#preloader.md-preloader--bridge {
  transition: opacity 0.1s ease, visibility 0.1s ease;
}

#preloader.md-preloader--bridge .md-preloader__stage,
#preloader.md-preloader--bridge .md-preloader__mark,
#preloader.md-preloader--bridge .md-preloader__eyebrow,
#preloader.md-preloader--bridge .md-preloader__line,
#preloader.md-preloader--bridge .md-preloader__bar {
  animation: none !important;
  opacity: 1;
  transform: none;
}

#preloader.md-preloader--bridge .md-preloader__orbit,
#preloader.md-preloader--bridge .md-preloader__bar-fill,
#preloader.md-preloader--bridge .md-preloader__glow {
  animation-play-state: running !important;
}

#preloader.md-preloader--hold,
#preloader.md-preloader.md-preloader--hold {
  transition: none !important;
}

#preloader .spinner-border {
  display: none !important;
}

.md-preloader__glow {
  position: absolute;
  width: min(72vw, 340px);
  height: min(72vw, 340px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.12) 0%, transparent 58%),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 55%);
  filter: blur(2px);
  pointer-events: none;
  animation: md-preloader-glow 4.5s ease-in-out infinite alternate;
}

#preloader.md-preloader .md-preloader__stage,
.md-preloader__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(100%, 268px);
  padding: 28px 26px 24px;
  border-radius: 28px;
  background:
    linear-gradient(165deg, rgba(32, 36, 42, 0.42) 0%, rgba(18, 20, 24, 0.28) 100%);
  border: 1px solid rgba(255, 255, 255, 0.17);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.1) inset;
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  backdrop-filter: blur(20px) saturate(1.1);
  animation: md-preloader-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.md-preloader__mark {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 0 18px;
  display: grid;
  place-items: center;
  animation: md-preloader-mark-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}

.md-preloader__orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.75);
  border-right-color: rgba(255, 255, 255, 0.16);
  animation: md-preloader-orbit 1.35s linear infinite;
}

.md-preloader__glyph {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 1.4rem;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

.md-preloader__glyph .fa {
  line-height: 1;
  transform: translateY(-1px);
}

.md-preloader__eyebrow {
  margin: 0 0 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--md-pre-ink-soft);
  animation: md-preloader-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.md-preloader__line {
  margin: 0 0 22px;
  min-height: 1.4em;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--md-pre-ink);
  transition: opacity 0.16s ease, transform 0.16s ease;
  animation: md-preloader-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}

.md-preloader__line.is-swap {
  opacity: 0;
  transform: translateY(4px);
}

.md-preloader__bar {
  width: 100%;
  max-width: 132px;
  height: 2px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
  animation: md-preloader-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.26s both;
}

.md-preloader__bar-fill {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), #ffffff, rgba(255, 255, 255, 0.2));
  background-size: 200% 100%;
  /* Linear loop — no ease-out stall at the end of each sweep */
  animation:
    md-preloader-bar 1.05s linear infinite,
    md-preloader-sheen 1.4s linear infinite;
}

#preloader.is-network-warn .md-preloader__orbit {
  animation: none;
  border-color: rgba(255, 180, 180, 0.35);
  border-top-color: #ff8a80;
}

#preloader.is-network-warn .md-preloader__eyebrow {
  color: rgba(255, 205, 210, 0.85);
}

#preloader.is-network-warn .md-preloader__line {
  color: #ffebee;
}

#preloader.is-network-warn .md-preloader__bar-fill {
  animation: none;
  width: 100%;
  transform: none;
  background: #ff8a80;
}

@keyframes md-preloader-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes md-preloader-mark-in {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes md-preloader-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes md-preloader-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes md-preloader-bar {
  0% {
    transform: translateX(-130%);
  }
  100% {
    transform: translateX(280%);
  }
}

@keyframes md-preloader-sheen {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes md-preloader-glow {
  from {
    transform: scale(0.94) translateY(6px);
    opacity: 0.75;
  }
  to {
    transform: scale(1.06) translateY(-4px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #preloader.md-preloader,
  #preloader {
    transition: none;
  }

  .md-preloader__stage,
  .md-preloader__mark,
  .md-preloader__eyebrow,
  .md-preloader__line,
  .md-preloader__bar,
  .md-preloader__glow {
    animation: none;
  }

  .md-preloader__orbit {
    animation: none;
    border-color: rgba(21, 101, 192, 0.22);
  }

  .md-preloader__bar-fill {
    animation: none;
    width: 52%;
    transform: none;
  }

  .md-preloader__line.is-swap {
    opacity: 1;
    transform: none;
  }
}

.is-webview .md-page .md-toolbar__reload,
.is-webview .md-page .md-sl-toolbar__back,
.is-webview .md-page .md-topic-toolbar__back,
.is-webview .md-page .md-se-toolbar__back,
body.is-webview .md-page .md-toolbar__reload {
  width: 40px;
  height: 40px;
}

/* ── zap-app: subject-assessment (Pattern C reuse) ── */
.subject-assessment-list-page .md-class-result-hero__meta {
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.subject-assessment-list-page .md-class-result-hero__meta::-webkit-scrollbar {
  display: none;
}

.subject-assessment-list-page .md-class-result-hero__meta-item {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  justify-content: center;
  gap: 4px;
  padding: 4px 6px;
}

.subject-assessment-list-page .md-class-result-hero__meta-icon {
  display: none;
}

.subject-assessment-list-page .md-class-result-hero__meta-text {
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.subject-assessment-list-page .md-class-result-hero__meta-label {
  font-size: 0.5625rem;
  line-height: 1.2;
}

.subject-assessment-list-page .md-class-result-hero__meta-value {
  font-size: 0.6875rem;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subject-assessment-list-page .md-cr-toolbar__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
}

.subject-assessment-list-page .md-cr-toolbar__actions--split {
  grid-template-columns: 1fr 1fr;
}

.subject-assessment-list-page .md-cr-toolbar__actions .sa-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 42px;
  max-height: 42px;
  padding: 8px 10px;
  border: 1px solid #c0c4c8;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: none;
  text-decoration: none;
}

.subject-assessment-list-page .md-cr-toolbar__actions .sa-toolbar-btn i {
  flex: 0 0 auto;
  font-size: 0.875rem;
}

.subject-assessment-list-page .md-cr-toolbar__actions .sa-toolbar-btn__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subject-assessment-list-page .md-cr-toolbar__actions .sa-toolbar-btn__full {
  display: none;
}

.subject-assessment-list-page .md-cr-toolbar__actions .sa-toolbar-btn:not(.md-btn-contained--tonal) {
  background: #d2e3fc;
  color: #0d47a1;
  border-color: #c0c4c8;
}

.subject-assessment-list-page .md-cr-toolbar__actions .sa-toolbar-btn:not(.md-btn-contained--tonal):hover,
.subject-assessment-list-page .md-cr-toolbar__actions .sa-toolbar-btn:not(.md-btn-contained--tonal):focus-visible {
  background: #c4daf9;
  color: #0d47a1;
  box-shadow: none;
}

.subject-assessment-list-page .md-cr-toolbar__actions .sa-toolbar-btn.md-btn-contained--tonal {
  background: #e8f0fe;
  color: #1557b0;
  border-color: #c0c4c8;
}

.subject-assessment-list-page .md-cr-toolbar__actions .sa-toolbar-btn.md-btn-contained--tonal:hover,
.subject-assessment-list-page .md-cr-toolbar__actions .sa-toolbar-btn.md-btn-contained--tonal:focus-visible {
  background: #dce8fb;
  color: #0d47a1;
  box-shadow: none;
}

@media (min-width: 420px) {
  .subject-assessment-list-page .md-cr-toolbar__actions .sa-toolbar-btn__short {
    display: none;
  }

  .subject-assessment-list-page .md-cr-toolbar__actions .sa-toolbar-btn__full {
    display: inline;
  }

  .subject-assessment-list-page .md-cr-toolbar__actions .sa-toolbar-btn {
    font-size: 0.875rem;
    padding: 8px 12px;
  }
}

.subject-assessment-list-page .md-topic-sort-strip--result {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.subject-assessment-page .md-topic-sort-strip--result {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.subject-assessment-list-page .md-class-result-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex-wrap: nowrap;
}

.subject-assessment-list-page .md-class-result-card__actions:has(> :only-child) {
  grid-template-columns: 1fr;
}

.subject-assessment-list-page .md-class-result-card__btn {
  width: 100%;
  min-width: 0;
}

.subject-assessment-list-page .md-class-result-card__content {
  align-items: flex-start;
}

.subject-assessment-list-page .md-class-result-card__icon-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -4px -4px 0 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5f6368;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.subject-assessment-list-page .md-class-result-card__icon-btn:hover,
.subject-assessment-list-page .md-class-result-card__icon-btn:focus-visible {
  background: #fce8e6;
  color: #c5221f;
}

.subject-assessment-list-page .md-class-result-card__icon-btn i {
  font-size: 0.9375rem;
}

#saNewAssessSheet .sa-new-title-input,
#sa-test-title.sa-new-title-input {
  text-transform: uppercase;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  min-height: 56px;
}

/* Assessment types sheet — Material list + compose footer */
#saTypesSheet.sa-types-sheet .md-sl-sheet__panel {
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 680px);
  background: #fff;
}

#saTypesSheet .sa-types-sheet__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 140px;
  margin: 0;
  padding: 0 12px 12px !important;
}

#saTypesSheet .sa-types-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 4px 0;
  padding: 28px 16px;
  border: 1px dashed #dadce0;
  border-radius: 16px;
  background: #f8f9fa;
  text-align: center;
}

#saTypesSheet .sa-types-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: #e8f0fe;
  color: #1557b0;
  font-size: 1.125rem;
}

#saTypesSheet .sa-types-empty__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #202124;
}

#saTypesSheet .sa-types-empty__text {
  margin: 0;
  max-width: 240px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #5f6368;
}

#saTypesSheet .sa-type-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 56px;
  padding: 8px 8px 8px 10px;
  margin: 0 0 6px;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease;
}

#saTypesSheet .sa-type-row:active {
  background: #f8f9fa;
}

#saTypesSheet .sa-type-row__main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

#saTypesSheet .sa-type-row__avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e8f0fe;
  color: #0d47a1;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#saTypesSheet .sa-type-row__name {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #202124;
  min-width: 0;
  word-break: break-word;
}

#saTypesSheet .sa-type-row__remove {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5f6368;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

#saTypesSheet .sa-type-row__remove:hover,
#saTypesSheet .sa-type-row__remove:focus-visible {
  background: #fce8e6;
  color: #c5221f;
}

#saTypesSheet .sa-types-sheet__footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 12px calc(8px + var(--md-sheet-footer-safe, 0px));
  border-top: 1px solid #e8eaed;
  background: #f8f9fa;
}

#saTypesSheet .sa-types-sheet__field {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}

#saTypesSheet .sa-types-sheet__textarea {
  display: block;
  width: 100%;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  margin: 0;
  padding: 8px 12px;
  line-height: 1.25;
  resize: none;
  overflow: hidden;
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 10px;
  background: #fff;
}

#saTypesSheet .sa-types-sheet__add {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  text-transform: none;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: none;
}

/* ── zap-app: subject-assessment view/edit score cards ── */
.subject-assessment-view-page .md-class-result-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.subject-assessment-view-page .md-class-result-hero__meta-item {
  min-width: 0;
  max-width: none;
  flex: 0 1 auto;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  min-height: 0;
}

.subject-assessment-view-page .md-class-result-hero__meta-icon {
  font-size: 0.625rem;
}

.subject-assessment-view-page .md-class-result-hero__meta-text {
  flex-direction: row;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
}

.subject-assessment-view-page .md-class-result-hero__meta-label {
  font-size: 0.625rem;
  line-height: 1.2;
  opacity: 0.72;
}

.subject-assessment-view-page .md-class-result-hero__meta-value {
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.2;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subject-assessment-edit-page .md-ecr-toolbar__context {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.subject-assessment-edit-page .md-ecr-toolbar__context .md-ecr-toolbar__chip {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
}

.subject-assessment-edit-page .md-sa-autosave {
  font-family: "Jost", Roboto, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: #80868b;
}

.subject-assessment-edit-page .md-sa-autosave--toolbar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  max-width: 104px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f3f4;
  border: 1px solid #dadce0;
  text-align: center;
  white-space: nowrap;
}

.subject-assessment-edit-page .md-sa-autosave.is-saving {
  color: #1565c0;
  background: #e8f0fe;
  border-color: rgba(26, 115, 232, 0.28);
}

.subject-assessment-edit-page .md-sa-autosave.is-saved {
  color: #137333;
  background: #e6f4ea;
  border-color: rgba(30, 142, 62, 0.28);
}

.subject-assessment-edit-page .md-sa-autosave.is-error {
  color: #c5221f;
  background: #fce8e6;
  border-color: rgba(217, 48, 37, 0.28);
}

.subject-assessment-edit-page .md-ecr-toolbar__actions--solo {
  grid-template-columns: 1fr;
}

.subject-assessment-edit-page .md-ecr-toolbar__actions--solo .md-btn-contained {
  width: 100%;
}

/* Hint — compact tip below Assessment details */
.subject-assessment-edit-page .md-sa-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff8e1;
  border: 1px solid rgba(237, 108, 2, 0.28);
  color: #5d4037;
  box-shadow: none;
}

.subject-assessment-edit-page .md-sa-hint__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 8px;
  background: rgba(237, 108, 2, 0.14);
  color: #ef6c00;
  font-size: 0.8125rem;
}

.subject-assessment-edit-page .md-sa-hint__text {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: "Jost", Roboto, sans-serif;
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 500;
}

.subject-assessment-edit-page .md-sa-hint__text strong {
  font-weight: 800;
  color: #bf360c;
}

/* Hide app bottom nav — score dock owns the bottom chrome */
html.sa-edit-no-nav #footer-bar,
body.sa-edit-no-nav #footer-bar,
html.sa-edit-no-nav.md-has-bottom-nav #footer-bar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.sa-edit-no-nav.md-has-bottom-nav,
body.sa-edit-no-nav.md-has-bottom-nav,
html.sa-edit-no-nav body {
  padding-bottom: 0 !important;
}

.subject-assessment-edit-page .edit-class-result-feed {
  padding-bottom: calc(88px + var(--md-sheet-footer-safe, 0px));
}

body.sa-edit-no-nav > .md-ecr-score__back {
  bottom: 74px !important;
}

.subject-assessment-view-page .md-sa-status-row {
  margin: 0 0 8px;
}

.subject-assessment-edit-page .md-class-result-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.subject-assessment-edit-page .md-class-result-hero__meta-item {
  min-width: 0;
  max-width: none;
  flex: 0 1 auto;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  min-height: 0;
}

.subject-assessment-edit-page .md-class-result-hero__meta-icon {
  font-size: 0.625rem;
}

.subject-assessment-edit-page .md-class-result-hero__meta-text {
  flex-direction: row;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
}

.subject-assessment-edit-page .md-class-result-hero__meta-label {
  font-size: 0.625rem;
  line-height: 1.2;
  opacity: 0.72;
}

.subject-assessment-edit-page .md-class-result-hero__meta-value {
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.2;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Meta panel — Material outlined Paper (distinct from score cards) */
.subject-assessment-edit-page .md-sa-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0 0 12px;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
  border: 2px solid #1a73e8 !important;
  box-shadow:
    0 1px 2px rgba(26, 115, 232, 0.08),
    0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

.subject-assessment-edit-page .md-sa-meta__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #0d47a1 0%, #1565c0 45%, #1a73e8 100%);
  border-bottom: none;
  color: #fff;
}

.subject-assessment-edit-page .md-sa-meta__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: none;
}

.subject-assessment-edit-page .md-sa-meta__heading {
  min-width: 0;
  flex: 1 1 auto;
}

.subject-assessment-edit-page .md-sa-meta__title-text {
  margin: 0;
  font-family: "Jost", Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.25;
}

.subject-assessment-edit-page .md-sa-meta__lead {
  margin: 2px 0 0;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.78);
}

.subject-assessment-edit-page .md-sa-meta__stat {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: none;
}

.subject-assessment-edit-page .md-sa-meta__stat-value {
  font-family: "Jost", Roboto, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fff;
}

.subject-assessment-edit-page .md-sa-meta__stat-label {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fdd663;
  opacity: 1;
}

.subject-assessment-edit-page .md-sa-meta__body {
  padding: 12px 14px 14px;
  background: #fff;
}

.subject-assessment-edit-page .md-sa-meta__title {
  margin: 0 0 10px;
}

.subject-assessment-edit-page .md-sa-meta__row {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(88px, 0.55fr);
  gap: 10px;
  align-items: end;
}

.subject-assessment-edit-page .md-sa-meta .mui-field {
  margin: 0;
}

.subject-assessment-edit-page .md-sa-meta .mui-field__label {
  font-size: 0.6875rem;
  margin-bottom: 4px;
  color: #5f6368;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.subject-assessment-edit-page .md-sa-meta .mui-field__input,
.subject-assessment-edit-page .md-sa-meta .mui-field__select {
  min-height: 44px;
  padding: 8px 12px;
  font-size: 0.875rem;
  border: 1.5px solid #c6cdd5;
  border-radius: 12px;
  background: #f8fafc;
  box-shadow: none;
}

.subject-assessment-edit-page .md-sa-meta .mui-field__input:focus,
.subject-assessment-edit-page .md-sa-meta .mui-field__select:focus {
  border-color: #1a73e8;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.18);
  outline: none;
}

.subject-assessment-edit-page .md-sa-meta .sa-new-title-input,
.subject-assessment-edit-page .md-sa-meta .upper {
  text-transform: uppercase;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #202124;
}

/* Search — full-width Material field (edit page is not .class-result-page) */
.subject-assessment-edit-page .md-sa-search.md-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 0 14px;
  min-height: 48px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #dadce0;
  box-shadow: none;
}

.subject-assessment-edit-page .md-sa-search.md-search-field:focus-within {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.14);
}

.subject-assessment-edit-page .md-sa-search .md-search-field__icon {
  flex: 0 0 auto;
  color: #5f6368;
  font-size: 0.875rem;
}

.subject-assessment-edit-page .md-sa-search .md-search-field__input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 48px;
  border: none;
  background: transparent;
  font-family: "Jost", Roboto, sans-serif;
  font-size: 0.9375rem;
  outline: none;
  color: #202124;
}

.subject-assessment-edit-page .md-sa-search .md-search-field__input::placeholder {
  color: #80868b;
}

.subject-assessment-edit-page .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.md-sa-score-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.subject-assessment-view-page .md-sa-score-list .md-sa-score-card--view {
  content-visibility: auto;
  contain-intrinsic-size: 72px;
}

.md-sa-score-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  margin: 0;
}

/* Edit score row — clear outlined Material card */
.md-sa-score-card--edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  padding: 10px 12px;
  border: 1.5px solid #dadce0 !important;
  border-radius: 14px !important;
  background: #fff;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.md-sa-score-card--edit:focus-within {
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12) !important;
}

.md-sa-score-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.md-sa-select-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid #dadce0;
  border-radius: 12px;
  background: #fff;
}

.md-sa-select-bar__all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.md-sa-select-bar__label {
  font-family: "Jost", Roboto, sans-serif;
  font-size: 0.875rem;
  font-weight: 650;
  color: #202124;
}

.md-sa-select-bar__count {
  font-size: 0.75rem;
  font-weight: 600;
  color: #5f6368;
}

/* Large Material-style checkbox */
.md-sa-check {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.md-sa-check__input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.md-sa-check__box {
  position: relative;
  z-index: 1;
  display: block;
  width: 22px;
  height: 22px;
  border: 2px solid #5f6368;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
  pointer-events: none;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.md-sa-check__box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.6);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.md-sa-check__input:checked + .md-sa-check__box {
  background: #1a73e8;
  border-color: #1a73e8;
}

.md-sa-check__input:checked + .md-sa-check__box::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.md-sa-check__input:focus-visible + .md-sa-check__box {
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.28);
}

.md-sa-check__input:indeterminate + .md-sa-check__box {
  background: #1a73e8;
  border-color: #1a73e8;
}

.md-sa-check__input:indeterminate + .md-sa-check__box::after {
  left: 4px;
  top: 8px;
  width: 10px;
  height: 2px;
  border: none;
  background: #fff;
  opacity: 1;
  transform: none;
  border-radius: 1px;
}

.md-sa-score-card__check {
  flex-shrink: 0;
  padding-top: 0;
}

.md-sa-score-card__identity {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.md-sa-score-card--edit .md-sa-score-card__avatar {
  width: 32px;
  height: 32px;
  font-size: 0.8125rem;
  border: 1px solid rgba(21, 101, 192, 0.18);
}

.md-sa-score-card--edit .md-sa-score-card__name {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #202124;
}

.md-sa-score-card__fields {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.md-sa-score-card__fields .mui-field {
  margin: 0;
}

.md-sa-score-card__fields .mui-field__label {
  font-size: 0.625rem;
  margin-bottom: 2px;
  line-height: 1.2;
  color: #5f6368;
  font-weight: 600;
}

.md-sa-score-card__fields .mui-field__input,
.md-sa-score-card__fields textarea.md-sa-comment {
  min-height: 38px;
  padding: 6px 10px;
  font-size: 0.875rem;
  border: 1px solid #dadce0;
  border-radius: 10px;
  background: #fafafa;
  box-shadow: none;
  width: 100%;
  box-sizing: border-box;
}

.md-sa-score-card__fields textarea.md-sa-comment {
  display: block;
  resize: none;
  overflow-y: hidden;
  line-height: 1.35;
  max-height: 160px;
  field-sizing: content;
}

.md-sa-score-card__fields .mui-field__input:focus,
.md-sa-score-card__fields textarea.md-sa-comment:focus {
  border-color: #1a73e8;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.14);
  outline: none;
}

.md-sa-score-card__score-field.is-over-max .mui-field__input,
.md-sa-score-card__score-field.is-over-max .mui-field__input:focus {
  border-color: #d93025;
  background: #fce8e6;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.16);
  color: #b3261e;
}

.md-sa-score-card__main {
  flex: 1;
  min-width: 0;
}

.md-sa-score-card__name {
  margin: 0 0 10px;
  font-family: "Jost", Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #202124;
}

.md-sa-score-card--view {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid #e8eaed !important;
  border-radius: 12px !important;
  background: #fff;
  box-shadow: none !important;
}

.md-sa-score-card--view .md-sa-score-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.md-sa-score-card__avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e8f0fe;
  color: #0d47a1;
  font-family: "Jost", Roboto, sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.md-sa-score-card--view .md-sa-score-card__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.md-sa-score-card--view .md-sa-score-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.md-sa-score-card--view .md-sa-score-card__name {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-sa-score-card__score {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f3f4;
  color: #3c4043;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.md-sa-score-card__score-total {
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.72;
}

.md-sa-score-card--high .md-sa-score-card__score {
  background: #e6f4ea;
  color: #137333;
}

.md-sa-score-card--mid .md-sa-score-card__score {
  background: #e8f0fe;
  color: #1967d2;
}

.md-sa-score-card--low .md-sa-score-card__score {
  background: #fce8e6;
  color: #c5221f;
}

.md-sa-score-card--empty .md-sa-score-card__score {
  background: #f1f3f4;
  color: #80868b;
}

.md-sa-score-card--view .md-sa-score-card__comment {
  margin: 0;
  padding-left: 52px;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: #5f6368;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.md-sa-score-card__comment.is-empty {
  color: #9aa0a6;
  font-style: italic;
}

.md-sa-score-card--view .md-sa-score-card__metrics {
  display: grid;
  grid-template-columns: minmax(72px, 0.35fr) 1fr;
  gap: 10px;
}

.md-sa-score-card__metric-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #5f6368;
  margin-bottom: 2px;
}

.md-sa-score-card__metric-value {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #202124;
  word-break: break-word;
}

.md-sa-assign-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow: auto;
}

.md-sa-assign-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
}

.subject-assessment-edit-page .md-ecr-score__footer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.subject-assessment-edit-page .md-ecr-score__footer-actions .md-btn-contained {
  min-height: 44px;
}

/* View scores sheet — AJAX list (no full-page hop) */
#saViewSheet.sa-view-sheet.menu {
  top: auto !important;
  bottom: 0 !important;
  height: auto !important;
  max-height: min(calc(var(--md-viewport-height, 100vh) * 0.92), 780px) !important;
  transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
}

#saViewSheet.sa-view-sheet .md-sl-sheet__panel {
  display: flex;
  flex-direction: column;
  max-height: min(calc(var(--md-viewport-height, 100vh) * 0.92), 780px);
  background:
    linear-gradient(180deg, #e8f0fe 0%, #fff 110px),
    #fff;
}

#saViewSheet .sa-view-sheet__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 0 20px 12px;
}

#saViewSheet .sa-view-sheet__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(26, 115, 232, 0.08);
  color: #174ea6;
  font-family: "Jost", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
}

#saViewSheet .sa-view-sheet__pill .fa {
  font-size: 0.6875rem;
  opacity: 0.85;
}

#saViewSheet .sa-view-sheet__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  min-height: 160px;
  margin: 0;
  padding: 0 12px 20px !important;
}

#saViewSheet .md-sa-score-list {
  gap: 8px;
}